Advertisement
althindor

Pro for hurriedly

Dec 28th, 2021
1,471
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 9.51 KB | None | 0 0
  1. /* Profile By AlthIndor */
  2.  
  3. :root {
  4.   --color-level1: #101010;
  5.   --color-level2: #202020;
  6.   --color-level3: #303030;
  7.   --color-level4: #404040;
  8.   --color-accent: hotpink;
  9.   --border: 1px solid #000;
  10.   --shadow: 0 0 5px #00000080 inset;
  11.   --text: #FFFFFF80;
  12.   --top-offset: calc(50% - 426px + 20px);
  13. }
  14.  
  15. html, body {
  16.   background: url('https://i.imgur.com/Kz009WB.png') top center var(--color-level1);
  17.   min-height: 1050px;
  18. }
  19. body {position: relative;}
  20. body a {text-decoration: none !important;}
  21.  
  22. ::selection {
  23.   background: #4A587A;
  24.   color: #FFFFFF;
  25. }
  26.  
  27. /* Fonts */
  28.  
  29. @font-face {
  30.   font-family: 'Open Sans';
  31.   font-style: normal;
  32.   font-weight: 400;
  33.   src: local('Open Sans'), local('Open Sans Regular'), local('OpenSans-Regular'), url('https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0b.woff2') format('woff2');
  34. }
  35.  
  36. @font-face {
  37.   font-family: 'Open Sans';
  38.   font-style: normal;
  39.   font-weight: 700;
  40.   src: local('Open Sans Bold'), local('OpenSans-Bold'), url('https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN7rgOUuhp.woff2') format('woff2');
  41. }
  42.  
  43. @font-face {
  44.   font-family: 'Open Sans Condensed';
  45.   font-style: normal;
  46.   font-weight: 700;
  47.   src: local('Open Sans Condensed Bold'), local('OpenSansCondensed-Bold'), url('https://fonts.gstatic.com/s/opensanscondensed/v14/z7NFdQDnbTkabZAIOl9il_O6KJj73e7Ff0GmDuXMRw.woff2') format('woff2');
  48. }
  49.  
  50. /* Header */
  51.  
  52. #viewer #gaia_header {
  53.   background: var(--color-level2);
  54.   height: 39px !important;
  55.   border-bottom: var(--border);
  56.   box-shadow: 0 10px 20px #00000080;
  57. }
  58. #gaia_header li.spacer {display: none !important;}
  59. #gaia_header li {margin: 0 5px;}
  60.  
  61. #gaia_header #header_left, #gaia_header #header_right {
  62.   background: none !important;
  63.   font: 700 0/38px 'Open Sans Condensed', sans-serif !important;
  64.   padding: 0 10px !important;
  65.   box-sizing: border-box;
  66. }
  67. #gaia_header #header_right {float: right;}
  68.  
  69. #header_left img {
  70.  -webkit-mask: url('https://i.imgur.com/5FTB40o.png') 0 3px no-repeat;
  71.   mask: url('https://i.imgur.com/5FTB40o.png') 0 3px no-repeat;
  72.   background: #FFFFFF;
  73.   width: 0;
  74.   padding: 0 37px 0 0;
  75. }
  76. #header_left li:nth-of-type(2) a:hover img {background: var(--color-accent);}
  77.  
  78. #gaia_header a {
  79.   color: #FFFFFF !important;
  80.   font-size: 12px !important;
  81.   text-transform: uppercase;
  82. }
  83. #gaia_header a:hover {color: var(--color-accent) !important;}
  84.  
  85. #header_right a[href*='edit'], #header_right a[href*='report'] {font-size: 0 !important;}
  86. #header_right a[href*='edit']::before, #header_right a[href*='report']::before {font-size: 12px;}
  87. #header_right a[href*='edit']::before {content: 'Edit My Profile';}
  88. #header_right a[href*='report']::before {content: 'Report Profile';}
  89.  
  90. /* Columns */
  91.  
  92. #columns, #column_1, #column_2 {
  93.   float: none;
  94.   display: block;
  95.   border: var(--border);
  96. }
  97. #column_3 {display: contents;}
  98.  
  99. #columns {
  100.   background: var(--color-level2);
  101.   font-size: 0;
  102.   padding: 10px;
  103.   top: var(--top-offset);
  104.   left: calc(50% - 331px);
  105.   box-shadow: 0 10px 20px #00000080;
  106.   contain: layout;
  107. }
  108.  
  109. #column_1, #column_2 {
  110.   width: 640px;
  111.   box-sizing: border-box;
  112. }
  113.  
  114. #column_1 {
  115.   background: url('https://i.imgur.com/7Ndo8Xe.gif') center / 640px auto no-repeat;
  116.   height: 360px;
  117.   margin: 0 0 50px 0;
  118.   box-shadow: var(--shadow);
  119.   image-rendering: pixelated;
  120. }
  121.  
  122. #column_2 {
  123.   height: 320px;
  124.   margin: 0 0 10px 0;
  125.   position: relative;
  126. }
  127.  
  128. /* Scrollbars */
  129.  
  130. #columns ::-webkit-scrollbar {
  131.   background: var(--color-level2);
  132.   width: 8px;
  133. }
  134. #columns ::-webkit-scrollbar-thumb {background: var(--text);}
  135.  
  136. .panel {
  137.   scrollbar-color: var(--text) var(--color-level2);
  138.   scrollbar-width: thin;
  139. }
  140.  
  141. #id_wishlist {scrollbar-width: none;}
  142. #id_wishlist::-webkit-scrollbar {width: 0;}
  143.  
  144. /* Panels */
  145.  
  146. .panel, .panel h2 {
  147.   background: none;
  148.   color: var(--text);
  149.   padding: 0;
  150.   margin: 0;
  151.   box-sizing: border-box;
  152.   overflow: hidden;
  153. }
  154. :is(#id_about, #id_comments .postcontent, .custom_panel) img {max-width: 100%;}
  155.  
  156. .panel a {color: var(--color-accent);}
  157. .panel a:hover {color: #FFFFFF;}
  158.  
  159. .panel {
  160.   font: 10px/1.6 'Open Sans', sans-serif;
  161.   text-align: justify;
  162. }
  163.  
  164. #column_2 .panel {
  165.   background: var(--color-level3);
  166.   width: 100%;
  167.   height: 100%;
  168.   padding-right: 15px;
  169.   position: absolute;
  170.   top: 0;
  171.   border: 15px solid transparent;
  172. }
  173.  
  174. #column_2 .panel, #id_wishlist {
  175.   overflow-y: scroll;
  176.   overscroll-behavior: contain;
  177. }
  178.  
  179. #column_2 .panel, #column_2 .panel:hover ~ #id_about {z-index: 1;}
  180. #column_2 .panel:hover, #column_2 #id_about {z-index: 2;}
  181.  
  182. /* Panel Headers */
  183.  
  184. .panel h2 {
  185.   width: 129px;
  186.   height: 41px;
  187.   font: 700 16px/40px 'Open Sans Condensed', sans-serif;
  188.   text-align: center;
  189.   position: fixed;
  190.   top: 380px;
  191.   border: var(--border);
  192. }
  193. #column_3 h2 {display: none;}
  194.  
  195. #id_about h2 {left: 10px;}
  196. #id_comments h2 {left: 138px;}
  197. #id_interests h2 {left: 393px;}
  198. .custom_panel h2 {left: 521px;}
  199.  
  200. #id_footprints h2 {
  201.   width: 128px;
  202.   left: 266px;
  203. }
  204.  
  205. #column_2 .panel h2, #column_2 .panel:hover ~ #id_about h2 {
  206.   background: var(--color-level2);
  207.   color: var(--text);
  208.   border-width: 1px;
  209.   box-shadow: none;
  210. }
  211.  
  212. #column_2 .panel:hover h2, #column_2 #id_about h2 {
  213.   background: var(--color-level3);
  214.   color: #FFFFFF;
  215.   border-width: 1px 1px 0 1px;
  216.   box-shadow: 0 2px var(--color-accent) inset;
  217. }
  218.  
  219. /* Comments */
  220.  
  221. #id_comments #alert_container {display: contents;}
  222. #id_comments #alerts_banner {display: none;}
  223.  
  224. #id_comments dl {
  225.   clear: both;
  226.   margin-top: 45px;
  227. }
  228.  
  229. #id_comments dt {
  230.   height: revert;
  231.   line-height: revert;
  232.   padding: 0 0 3px 0;
  233.   margin: 0 0 3px 0;
  234.   border-bottom: 1px dotted #000;
  235. }
  236.  
  237. #id_comments dd {margin: 0 0 15px 0;}
  238. #id_comments dd:last-of-type {margin: 0;}
  239.  
  240. #id_comments .dropBox {
  241.   background: var(--color-level4);
  242.   width: 48px;
  243.   height: 55px;
  244.   margin: 4px 10px 0 0;
  245.   border: 1px solid #000000;
  246.   overflow: hidden;
  247. }
  248.  
  249. #id_comments .dropBox img {
  250.   width: 120px;
  251.   height: 150px;
  252.   margin: -30px 0 0 -47px;
  253. }
  254.  
  255. #id_comments .deletecomment {
  256.   text-align: right;
  257.   margin: 0 0 0 10px;
  258. }
  259.  
  260. /* Comment + Other Buttons */
  261.  
  262. #id_comments h2 + div, #id_comments h2 ~ p {width: calc(50% - 7px);}
  263. #id_comments h2 + div {float: left;}
  264. #id_comments h2 ~ p {float: right;}
  265.  
  266. #id_comments h2 + div a, #id_comments h2 ~ p a, .spoiler-control {
  267.   background: var(--color-level4);
  268.   height: 30px;
  269.   color: var(--text);
  270.   font: 700 12px/29px 'Open Sans Condensed', sans-serif;
  271.   text-align: center;
  272.   text-transform: uppercase;
  273.   border: var(--border);
  274.   box-shadow: 0 2px 5px #00000040;
  275.   box-sizing: border-box;
  276. }
  277. #id_comments h2 + div a, #id_comments h2 ~ p a {display: block;}
  278. #id_comments h2 + div a {font-size: 0;}
  279.  
  280. #id_comments h2 + div:hover a, #id_comments h2 ~ p:hover a, .spoiler-control:hover, .spoiler-revealed .spoiler-control {
  281.   background: var(--color-accent);
  282.   color: #FFFFFF;
  283. }
  284.  
  285. #id_comments h2 + div a::after {
  286.   content: 'Post New Comment';
  287.   font-size: 12px;
  288. }
  289.  
  290. .spoiler-control {
  291.   width: 107px;
  292.   outline: none;
  293. }
  294.  
  295. /* Wish List */
  296.  
  297. #id_wishlist .item, #id_wishlist a {height: 40px;}
  298. #id_wishlist .clear, .premium_sparkle {display: none;}
  299.  
  300. #id_wishlist {
  301.   display: flex;
  302.   flex-flow: row wrap;
  303.   gap: 10px;
  304.   width: 640px;
  305.   height: 90px;
  306.   text-align: center;
  307.   left: 0;
  308.   scroll-snap-type: y mandatory;
  309. }
  310.  
  311. #id_wishlist .item {
  312.   flex-grow: 1;
  313.   min-width: 40px;
  314.   position: relative;
  315.   scroll-snap-align: start;
  316.   scroll-snap-stop: always;
  317. }
  318.  
  319. #id_wishlist a {
  320.   display: block;
  321.   background: var(--color-level1);
  322.   width: 100%;
  323.   padding: 4px;
  324.   border: 1px solid #000;
  325.   box-shadow: 0 0 5px #00000080 inset;
  326.   box-sizing: border-box;
  327. }
  328. #id_wishlist .item:hover a {background: var(--color-accent);}
  329.  
  330. .owner_checkmark {
  331.   background: var(--color-level1);
  332.   padding: 2px;
  333.   margin: 0;
  334.   bottom: 2px;
  335.   left: 2px;
  336. }
  337.  
  338. /* Visitors */
  339.  
  340. #id_footprints .item {
  341.   display: grid;
  342.   grid-auto-flow: column dense;
  343.   justify-content: start;
  344. }
  345.  
  346. #id_footprints .item::before {
  347.   content: ' visited ';
  348.   grid-column: 2;
  349.   white-space: pre;
  350. }
  351. #id_footprints .item::after {content: '.';}
  352.  
  353. /* Interests */
  354.  
  355. #id_interests h3 {
  356.   font-size: 12px;
  357.   padding: 0 0 3px 0;
  358.   margin: 0 0 3px 0;
  359.   border-bottom: 1px dotted #000;
  360. }
  361.  
  362. #id_interests ul:nth-last-of-type(n+2) {margin-bottom: 15px;}
  363. #id_interests li:nth-last-of-type(n+2)::after {content: ',';}
  364.  
  365. #id_interests a {
  366.   color: var(--text);
  367.   font-weight: 400;
  368.   text-transform: capitalize;
  369. }
  370. #id_interests a:hover {color: var(--color-accent);}
  371.  
  372. /* Media */
  373.  
  374. .media_panel {
  375.   background: url('https://i.imgur.com/gqTTTvw.png') -29px -13px;
  376.   width: 55px;
  377.   height: 18px !important;
  378.   position: absolute;
  379.   top: 21px;
  380.   right: 21px;
  381.   opacity: .5;
  382. }
  383. .media_panel:hover {opacity: 1;}
  384.  
  385. .media_panel iframe {
  386.   width: 300px;
  387.   height: 200px;
  388.   position: absolute;
  389.   bottom: -9px;
  390.   left: -24px;
  391.   opacity: .001;
  392. }
  393.  
  394. /* Misc */
  395.  
  396. #pictures_container, #texts_container {
  397.   width: 0;
  398.   height: 0;
  399.   position: absolute;
  400.   top: var(--top-offset);
  401.   left: 50%;
  402. }
  403.  
  404. #equipped-item-details_mask ~ #equipped-item-details_mask, #avatar_menu + div + div {display: none !important;}
  405. .spoiler-revealed {padding: 5px;}
  406.  
  407. .bbcode-swapping-image {
  408.   filter: invert(1);
  409.   mix-blend-mode: screen;
  410. }
  411.  
  412. /* Bug in Chrome causes skipping over scroll-snap lines */
  413. /* Firefox doesn't have this issue - gets 'prettier' WL */
  414.  
  415. @-moz-document url-prefix() {
  416.   :root {--top-offset: calc(50% - 401px + 20px);}
  417.   html, body {min-height: 1000px;}
  418.   #id_wishlist {height: 40px;}
  419. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement