althindor

Pro for tanmono

Apr 14th, 2021
510
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /* Profile By AlthIndor */
  2.  
  3. :root {
  4.   --color-1: #CF6A76;
  5.   --color-2: lemonchiffon;
  6.   --color-3: #695A45;
  7.   --color-4: #FCDEE2;
  8.   --top-offset: 150px;
  9.   --drop-shadow: 0 2px 5px #40000080;
  10. }
  11.  
  12. html, body {
  13.   background: url(https://i.imgur.com/0cBt7ef.png) center #FCDEE2;
  14.   height: revert;
  15.   min-height: 100vh;
  16. }
  17. body {padding-top: var(--top-offset);}
  18.  
  19. ::selection {
  20.   background: #3399FF;
  21.   color: #FFFFFF;
  22. }
  23.  
  24. /* Fonts */
  25.  
  26. @font-face {
  27.   font-family: 'Open Sans';
  28.   font-style: normal;
  29.   font-weight: 400;
  30.   src: local('Open Sans'), url('https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0b.woff2') format('woff2');
  31. }
  32.  
  33. @font-face {
  34.   font-family: 'Open Sans';
  35.   font-style: normal;
  36.   font-weight: 600;
  37.   src: local('Open Sans Semibold'), url('https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UNirkOUuhp.woff2') format('woff2');
  38. }
  39.  
  40. /* Header */
  41.  
  42. #gaia_header, #header_left, #header_right {box-sizing: border-box;}
  43. #gaia_header li.spacer {display: none !important;}
  44.  
  45. #viewer #gaia_header {
  46.   background: var(--color-3) !important;
  47.   width: calc(100% - 20px) !important;
  48.   height: 40px !important;
  49.   position: absolute !important;
  50.   top: 10px !important;
  51.   left: 10px !important;
  52.   border-radius: 5px;
  53.   box-shadow: var(--drop-shadow);
  54. }
  55.  
  56. #gaia_header #header_left, #gaia_header #header_right {
  57.   background: none !important;
  58.   width: auto !important;
  59.   font: 0/40px 'Kosugi Maru', sans-serif !important;
  60.   padding: 0 15px !important;
  61. }
  62. #gaia_header #header_right {float: right;}
  63.  
  64. #header_left img {
  65.  -webkit-mask: url('https://i.imgur.com/5FTB40o.png') no-repeat 0 2px;
  66.   mask: url('https://i.imgur.com/5FTB40o.png') no-repeat 0 2px;
  67.   background: #FFFFFF;
  68.   width: 0 !important;
  69.   padding: 0 37px 0 0;
  70. }
  71. #header_left li:nth-of-type(2) a:hover img {background: var(--color-4);}
  72.  
  73. #gaia_header a {
  74.   color: #FFFFFF !important;
  75.   font-size: 12px !important;
  76.   font-weight: 400 !important;
  77.   letter-spacing: .05em;
  78.   text-decoration: none !important;
  79.   text-transform: uppercase;
  80. }
  81. #gaia_header a:hover {color: var(--color-4) !important;}
  82.  
  83. #header_left li:nth-of-type(n+3)::before, #header_right li:nth-of-type(n+2)::before {
  84.   content: '■';
  85.   font-size: 10px;
  86.   margin: 0 8px 0 7px;
  87.   position: relative;
  88.   top: -2px;
  89. }
  90.  
  91. #header_right a[href*='report'], #header_right a[href*='edit'] {font-size: 0 !important;}
  92. #header_right a[href*='report']::before, #header_right a[href*='edit']::before {font-size: 12px !important;}
  93. #header_right a[href*='report']::before {content: 'Report Profile';}
  94. #header_right a[href*='edit']::before {content: 'Edit My Profile';}
  95.  
  96. /* Columns */
  97.  
  98. #columns {
  99.   float: none;
  100.   width: 430px;
  101.   font-size: 0;
  102.   padding-top: 70px;
  103.   margin: 0 auto;
  104.   position: static;
  105.   transform: translateZ(0);
  106.   overflow: visible;
  107. }
  108. #columns .column {display: contents;}
  109.  
  110. /* Panels */
  111.  
  112. .panel, .panel h2 {
  113.   padding: 0;
  114.   margin: 0;
  115.   box-sizing: border-box;
  116.   overflow: hidden;
  117. }
  118.  
  119. .panel a {
  120.   color: var(--color-1);
  121.   text-decoration: dotted underline;
  122. }
  123. .panel a:hover {color: inherit;}
  124.  
  125. .panel {
  126.   color: var(--color-3);
  127.   font: 10px/1.6 'Open Sans', sans-serif;
  128.   text-align: justify;
  129. }
  130.  
  131. .panel:not(#id_contact):not(.media_panel) {
  132.   padding: 0 15px 15px 15px;
  133.   margin-bottom: 30px;
  134. }
  135.  
  136. .panel:not(#id_contact) {
  137.   background: #FFFFFF;
  138.   border-radius: 5px;
  139.   box-shadow: var(--drop-shadow);
  140. }
  141.  
  142. .panel h2 {
  143.   background: var(--color-3);
  144.   width: calc(100% + 30px);
  145.   height: 40px;
  146.   font: 20px/40px 'Kosugi Maru', monospace;
  147.   letter-spacing: .05em;
  148.   text-align: center;
  149.   margin: 0 0 15px -15px;
  150. }
  151.  
  152. #id_about img, #id_comments .postcontent img {max-width: 100%;}
  153.  
  154. /* Contact Buttons */
  155.  
  156. #id_contact, #id_comments h2 + div a, #id_comments h2 ~ p a, .media_panel {
  157.   position: fixed;
  158.   top: 0;
  159. }
  160. #id_contact h2, .media_panel h2 {display: none;}
  161.  
  162. #id_contact {
  163.   background: none;
  164.   overflow: visible;
  165. }
  166.  
  167. #id_contact li, #id_comments h2 + div a, #id_comments h2 ~ p a {
  168.   background: var(--color-3);
  169.   width: 60px;
  170.   height: 40px;
  171.   border-radius: 5px;
  172.   box-shadow: var(--drop-shadow);
  173. }
  174. #id_contact li:hover, #id_comments h2 + div a:hover, #id_comments h2 ~ p a:hover {background: var(--color-1);}
  175.  
  176. #id_contact li {
  177.   float: left;
  178.   margin-right: 10px;
  179.   position: relative;
  180. }
  181.  
  182. #id_contact li *, #id_comments h2 + div a, #id_comments h2 ~ p a {
  183.   color: #FFFFFF;
  184.   font-size: 0;
  185.   text-align: center;
  186. }
  187.  
  188. #id_contact li * {
  189.   width: 100%;
  190.   height: 100%;
  191.   position: absolute;
  192.   top: 0;
  193.   left: 0;
  194. }
  195. #id_contact li a {text-decoration: none;}
  196.  
  197. #id_comments h2 + div a, #id_comments h2 ~ p a {text-decoration: none;}
  198. #id_comments h2 + div a {left: 210px;}
  199. #id_comments h2 ~ p a {left: 280px;}
  200.  
  201. #id_contact li *::before, #id_comments h2 + div a::before, #id_comments h2 ~ p a::before {font: 20px/40px 'Kosugi Maru', monospace;}
  202. #id_contact li:nth-of-type(1) *::before {content: 'ADD';}
  203. #id_contact li:nth-of-type(2) *::before {content: 'MSG';}
  204. #id_contact li:nth-of-type(3) *::before {content: 'TRD';}
  205. #id_comments h2 + div a::before {content: 'CMT';}
  206. #id_comments h2 ~ p a::before {content: 'ALL';}
  207.  
  208. /* Comments */
  209.  
  210. #id_comments {padding-bottom: 0 !important;}
  211. #id_comments h2 {margin-bottom: 0;}
  212. #id_comments #alert_container, #id_comments h2 + div, #id_comments h2 ~ p {display: contents;}
  213. #id_comments #alerts_banner {display: none;}
  214.  
  215. #id_comments dt, #id_comments dd {
  216.   width: 100%;
  217.   margin-left: -15px;
  218. }
  219. #id_comments dd:nth-of-type(even), #id_comments dt:nth-of-type(even) {background: var(--color-2);}
  220. #id_comments dd:nth-of-type(even):last-of-type, #id_comments dt:nth-of-type(even):last-of-type {display: none;}
  221.  
  222. #id_comments dt {
  223.   height: revert;
  224.   line-height: revert;
  225.   padding: 10px 15px 4px 15px;
  226.   border-bottom: none;
  227. }
  228.  
  229. #id_comments dd {
  230.   padding: 0 15px 15px 15px;
  231.   margin-bottom: 0;
  232. }
  233.  
  234. #id_comments .dropBox {
  235.   background: #FFFFFF;
  236.   width: 48px;
  237.   height: 54px;
  238.   margin: 5px 10px 0 0;
  239.   border: 1px solid #000000;
  240.   overflow: hidden;
  241. }
  242.  
  243. #id_comments .dropBox img {
  244.   width: 120px;
  245.   height: 150px;
  246.   margin: -30px 0 0 -47px;
  247. }
  248.  
  249. #id_comments .deletecomment {
  250.   text-align: right;
  251.   margin: 0 0 10px 25px;
  252. }
  253. #id_comments .deletecomment a:first-of-type::after {content: ' Comment'; letter-spacing: .02em;}
  254.  
  255. #id_comments .deletecomment a:last-of-type {
  256.   font-size: 0;
  257.   text-decoration: none;
  258. }
  259.  
  260. #id_comments .deletecomment a:last-of-type::after {
  261.   content: 'Return Comment';
  262.   font-size: 10px;
  263.   text-decoration: dotted underline;
  264. }
  265.  
  266.  
  267. /* Wish List */
  268.  
  269. #id_wishlist {
  270.   display: grid;
  271.   grid-template-columns: repeat(8, 1fr);
  272.   gap: 10px;
  273. }
  274. #id_wishlist .clear, .premium_sparkle {display: none;}
  275.  
  276. #id_wishlist h2 {
  277.   margin-bottom: 5px;
  278.   grid-column: span 8;
  279. }
  280.  
  281. #id_wishlist .item {
  282.   background: var(--color-4);
  283.   width: 100%;
  284.   height: 40px;
  285.   text-align: center;
  286.   padding: 5px;
  287.   position: relative;
  288.   border-radius: 5px;
  289.   box-sizing: border-box;
  290. }
  291. #id_wishlist .item:hover {background: var(--color-1);}
  292.  
  293. .owner_checkmark {
  294.   margin: 0;
  295.   bottom: 5px;
  296.   left: 5px;
  297. }
  298.  
  299. /* Visitors */
  300.  
  301. #id_footprints {padding: 0 0 10px 0 !important;}
  302. #id_footprints h2 {margin-bottom: 10px;}
  303.  
  304. #id_footprints .item {padding: 5px 15px;}
  305. #id_footprints .item:nth-of-type(even) {background: var(--color-2);}
  306. #id_footprints .item:nth-of-type(even):nth-last-of-type(2) {display: none;}
  307.  
  308. /* Media */
  309.  
  310. .media_panel {
  311.   background: url('https://i.imgur.com/gqTTTvw.png') -16px -2px var(--color-3) !important;
  312.   width: 80px;
  313.   height: 40px !important;
  314.   right: 0;
  315. }
  316. .media_panel:hover {background-color: var(--color-1) !important;}
  317.  
  318. .media_panel iframe {
  319.   position: absolute;
  320.   bottom: 2px;
  321.   left: -9px;
  322.   opacity: .001;
  323. }
  324.  
  325. /* Misc */
  326.  
  327. #pictures_container, #texts_container {
  328.   width: 0;
  329.   height: 0;
  330.   position: absolute;
  331.   top: var(--top-offset);
  332.   left: 50%;
  333. }
  334.  
  335. /* Kosugi Maru Font */
  336.  
  337. /* [117] */
  338. @font-face {
  339.   font-family: 'Kosugi Maru';
  340.   font-style: normal;
  341.   font-weight: 400;
  342.   src: url(https://fonts.gstatic.com/s/kosugimaru/v6/0nksC9PgP_wGh21A2KeqGiTv4ur_mWjfXWdNMtg65zwIiCccFzPAsA.117.woff2) format('woff2');
  343.   unicode-range: U+4e, U+a0, U+3000, U+300c-300d, U+4e00, U+4e0a, U+4e2d, U+4e8b, U+4eba, U+4f1a, U+5165, U+5168, U+5185, U+51fa, U+5206, U+5229, U+524d, U+52d5, U+5408, U+554f, U+5831, U+5834, U+5927, U+5b9a, U+5e74, U+5f0f, U+60c5, U+65b0, U+65b9, U+6642, U+6700, U+672c, U+682a, U+6b63, U+6c17, U+7121, U+751f, U+7528, U+753b, U+76ee, U+793e, U+884c, U+898b, U+8a18, U+9593, U+95a2, U+ff01, U+ff08-ff09;
  344. }
  345.  
  346. /* [118] */
  347. @font-face {
  348.   font-family: 'Kosugi Maru';
  349.   font-style: normal;
  350.   font-weight: 400;
  351.   src: url(https://fonts.gstatic.com/s/kosugimaru/v6/0nksC9PgP_wGh21A2KeqGiTv4ur_mWjfXWdNMtg65zwIiCccFzPAsA.118.woff2) format('woff2');
  352.   unicode-range: U+21-22, U+27-2a, U+2c-3b, U+3f, U+41-4d, U+4f-5d, U+61-7b, U+7d, U+ab, U+ae, U+b2-b3, U+b7, U+bb, U+c9, U+d6, U+d8, U+dc, U+e0-e5, U+e7-ed, U+ef, U+f1-f4, U+f6, U+f8, U+fa, U+fc-fd, U+103, U+14d, U+1b0, U+1ebf, U+1ec7, U+2013-2014, U+201c-201d, U+2039-203a, U+203c, U+2048-2049, U+2113, U+2122, U+65e5, U+6708, U+70b9;
  353. }
  354.  
  355. /* [119] */
  356. @font-face {
  357.   font-family: 'Kosugi Maru';
  358.   font-style: normal;
  359.   font-weight: 400;
  360.   src: url(https://fonts.gstatic.com/s/kosugimaru/v6/0nksC9PgP_wGh21A2KeqGiTv4ur_mWjfXWdNMtg65zwIiCccFzPAsA.119.woff2) format('woff2');
  361.   unicode-range: U+20, U+3001-3002, U+3041-307f, U+3081-308f, U+3091-3093, U+3099-309a, U+309d-309e, U+30a1-30e1, U+30e3-30ed, U+30ef-30f0, U+30f2-30f4, U+30fb-30fe, U+ff0c, U+ff0e;
  362. }
RAW Paste Data

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×