Advertisement
althindor

Pro for Lachrimosa

Nov 20th, 2022 (edited)
1,193
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 7.85 KB | None | 0 0
  1. /* Design by Nezumimousey */
  2. /* And Coded by AlthIndor */
  3.  
  4. html, body {
  5.   background: url('https://i.imgur.com/XUulUAR.jpg') center / cover;
  6.   min-height: 880px;
  7. }
  8. body {position: relative;}
  9.  
  10. body a {
  11.   text-decoration: none !important;
  12.   transition: all .5s ease-in-out;
  13. }
  14.  
  15. ::selection {
  16.   background: darkolivegreen;
  17.   color: #FFFFFF;
  18. }
  19.  
  20. /* Atlas Control */
  21.  
  22. #id_comments h2 + div, #id_comments h2 ~ p, #id_comments h2 + div a, #id_comments h2 ~ p a, #id_contact a {background: url('https://i.imgur.com/r90zf8K.png');}
  23. #id_comments h2 + div, #id_comments h2 ~ p {background-position-y: -790px;}
  24. #id_comments h2 + div a, #id_comments h2 ~ p a {background-position-y: -830px;}
  25. #id_comments h2 + div, #id_comments h2 + div a {background-position-x: -190px;}
  26. #id_comments h2 ~ p, #id_comments h2 ~ p a {background-position-x: -362px;}
  27. #id_contact li:nth-of-type(1) a {background-position: -20px -790px;}
  28. #id_contact li:nth-of-type(2) a {background-position: -10px -840px;}
  29. #id_contact li:nth-of-type(3) a {background-position: -30px -890px;}
  30.  
  31. #columns::before, #columns::after {background: url('https://i.imgur.com/fAiXTbY.png');}
  32. #columns::after {background-position-x: -120px;}
  33.  
  34. /* Fonts */
  35.  
  36. @font-face {
  37.   font-family: 'PT Serif';
  38.   font-style: normal;
  39.   font-weight: 400;
  40.   src: local('PT Serif'), local('PTSerif-Regular'), url(https://fonts.gstatic.com/s/ptserif/v17/EJRVQgYoZZY2vCFuvAFWzr8.woff2) format('woff2');
  41. }
  42.  
  43. @font-face {
  44.   font-family: 'PT Serif';
  45.   font-style: normal;
  46.   font-weight: 700;
  47.   src: local('PT Serif Bold'), local('PTSerif-Bold'), url(https://fonts.gstatic.com/s/ptserif/v17/EJRSQgYoZZY2vCFuvAnt66qSVys.woff2) format('woff2');
  48. }
  49.  
  50. /* Header */
  51.  
  52. #viewer #gaia_header {
  53.   background: #201818;
  54.   height: 30px !important;
  55.   box-shadow: 0 2px 3px #00000040;
  56. }
  57. #gaia_header li.spacer {display: none !important;}
  58. #gaia_header li {margin: 0 5px;}
  59.  
  60. #gaia_header ul {
  61.   background: none !important;
  62.   width: auto !important;
  63.   font: 0/30px 'PT Serif', serif !important;
  64.   padding: 0 5px !important;
  65. }
  66. #gaia_header #header_right {float: right;}
  67.  
  68. #header_left img {
  69.  -webkit-mask: url('https://i.imgur.com/cGGVY2x.png') 0 3px no-repeat;
  70.   mask: url('https://i.imgur.com/cGGVY2x.png') 0 3px no-repeat;
  71.   background: #FFFFFF;
  72.   width: 0;
  73.   padding: 0 34px 0 0;
  74.   transition: background .5s ease-in-out;
  75. }
  76. #header_left li:nth-of-type(2) a:hover img {background: #A08D8F;}
  77.  
  78. #gaia_header a {
  79.   color: #FFFFFF !important;
  80.   font-size: 11px !important;
  81.   text-decoration: none !important;
  82. }
  83. #gaia_header a:hover {color: #A08D8F !important;}
  84.  
  85. /* Columns */
  86.  
  87. #columns, #pictures_container, #texts_container {
  88.   top: calc(50% - 390px + 15px);
  89.   left: calc(50% - 525px);
  90. }
  91.  
  92. #columns {
  93.   background: url('https://i.imgur.com/h8qzVvH.gif') no-repeat 83px 3px / 460px auto, url('https://i.imgur.com/r90zf8K.png');
  94.   width: 1050px;
  95.   height: 780px;
  96. }
  97. #columns .column {display: contents;}
  98.  
  99. @media screen and (min-width: 1360px) {
  100.   #columns, #pictures_container, #texts_container {left: calc(50% - 650px);}
  101.   #columns {width: 1300px;}
  102. }
  103.  
  104. /* Scrollbars */
  105.  
  106. #columns ::-webkit-scrollbar {width: 0;}
  107. .panel, dl {scrollbar-width: none;}
  108.  
  109. /* Panels */
  110.  
  111. .panel, dl {
  112.   box-sizing: border-box;
  113.   overflow: hidden;
  114. }
  115. #id_about, #id_wishlist, #id_comments dl {overflow-y: scroll;}
  116.  
  117. .panel {
  118.   background: none;
  119.   color: #282020;
  120.   font: 12px/1.6 'PT Serif', serif;
  121.   text-align: center;
  122.   padding: 0;
  123.   margin: 0;
  124.   position: absolute;
  125. }
  126. .panel h2 {display: none;}
  127. .panel img {max-width: 100% !important;}
  128.  
  129. .panel a {color: #8C0E22;}
  130. .panel a:hover {color: darkolivegreen;}
  131.  
  132. #id_about, #id_comments {
  133.   width: 333px;
  134.   height: 190px;
  135. }
  136.  
  137. #id_about {
  138.   top: 120px;
  139.   left: 658px;
  140. }
  141.  
  142. #id_comments {
  143.   top: 455px;
  144.   left: 652px;
  145. }
  146.  
  147. /* Details */
  148.  
  149. #id_details {
  150.   top: 165px;
  151.   left: 68px;
  152. }
  153. #id_details p:nth-of-type(n+2), .forum_userstatus {display: none;}
  154. #id_details p {margin: 0;}
  155.  
  156. /* Contact */
  157.  
  158. #id_contact {
  159.   top: 376px;
  160.   left: 48px;
  161. }
  162. #id_contact span {display: none;}
  163.  
  164. #id_contact li, #id_contact a {height: 50px;}
  165. #id_contact li:nth-of-type(2) {width: 160px;}
  166.  
  167. #id_contact li:nth-of-type(1) {
  168.   width: 140px;
  169.   margin-left: 10px;
  170. }
  171.  
  172. #id_contact li:nth-of-type(3) {
  173.   width: 120px;
  174.   margin-left: 20px;
  175. }
  176.  
  177. #id_contact a {
  178.   display: block;
  179.   width: 100%;
  180.   font-size: 0;
  181.   opacity: 0;
  182. }
  183. #id_contact a:hover {opacity: 1;}
  184.  
  185. /* Comments */
  186.  
  187. #id_comments :is(#alerts_banner, .dropBox, .deletecomment) {display: none;}
  188. #id_comments dd {margin: 0 0 20px 0;}
  189. #id_comments dd:last-of-type {margin: 0;}
  190.  
  191. #id_comments dl {
  192.   width: 100%;
  193.   height: calc(100% - 50px);
  194.   position: absolute;
  195.   bottom: 0;
  196. }
  197.  
  198. #id_comments dt {
  199.   height: unset;
  200.   line-height: inherit;
  201.   text-align: inherit;
  202.   padding: 0 0 5px 0;
  203.   margin: 0 0 5px 0;
  204.   border-bottom: 1px dotted #8C0E22;
  205. }
  206. #id_comments .username {float: none;}
  207.  
  208. #id_comments .date a {
  209.   color: inherit;
  210.   font-weight: 400;
  211. }
  212.  
  213. /* Comment Links */
  214.  
  215. #id_comments #alert_container {display: contents;}
  216. #id_comments h2 + div .clear {display: none;}
  217.  
  218. #id_comments h2 + div, #id_comments h2 ~ p {
  219.   width: 161px;
  220.   height: 30px;
  221.   border-radius: 5px;
  222.   overflow: hidden;
  223. }
  224. #id_comments h2 + div {float: left;}
  225. #id_comments h2 ~ p {float: right;}
  226.  
  227. #id_comments h2 + div a, #id_comments h2 ~ p a {
  228.   display: block;
  229.   height: 100%;
  230.   font-size: 0;
  231.   opacity: 0;
  232. }
  233. #id_comments h2 + div a:hover, #id_comments h2 ~ p a:hover {opacity: 1;}
  234.  
  235. /* Wish List */
  236.  
  237. #id_wishlist {
  238.   display: grid;
  239.   grid-template-columns: repeat(4, 44px);
  240.   grid-auto-rows: 44px;
  241.   gap: 10px;
  242.   height: 314px;
  243.   top: 275px;
  244.   left: 329px;
  245.   scroll-snap-type: y mandatory;
  246. }
  247. #id_wishlist .item, #id_wishlist a {display: block;}
  248. #id_wishlist .clear, .premium_sparkle {display: none;}
  249.  
  250. #id_wishlist .item {
  251.   background: darkolivegreen;
  252.   position: relative;
  253.   border: 2px solid transparent;
  254.   border-radius: 50%;
  255.   box-shadow: 0 0 0 1px #BDB39A inset;
  256.   scroll-snap-align: start;
  257.   transition: all .5s ease-in-out;
  258. }
  259.  
  260. #id_wishlist a {
  261.   padding: 5px;
  262.   outline: 1px dotted #201818;
  263.   outline-offset: -3px;
  264. }
  265. #id_wishlist .item:hover {background: #8C0E22;}
  266.  
  267. .owner_checkmark {
  268.   margin: 0;
  269.   bottom: 8px;
  270.   left: 8px;
  271.   filter: hue-rotate(40deg);
  272. }
  273.  
  274. /* Media */
  275.  
  276. .media_panel {
  277.   background: url('https://i.imgur.com/gqTTTvw.png') no-repeat left -20px top -5px,
  278.     url('https://i.imgur.com/gqTTTvw.png') no-repeat right -14px top -45px #201818;
  279.   width: 304px;
  280.   height: 40px !important;
  281.   top: 151px;
  282.   left: 280px;
  283.   border: 3px solid #BDB39A;
  284.   border-radius: 5px;
  285. }
  286.  
  287. .media_panel iframe {
  288.   width: calc(100% + 35px);
  289.   height: 200px;
  290.   position: absolute;
  291.   bottom: -3px;
  292.   left: -20px;
  293.   opacity: .001;
  294. }
  295.  
  296. @media screen and (min-width: 1360px) {
  297.   .media_panel {
  298.     background: none;
  299.     width: 169px;
  300.     height: 136px !important;
  301.     top: 579px;
  302.     left: 1084px;
  303.     border: unset;
  304.     border-radius: unset;
  305.   }
  306.  
  307.   .media_panel iframe {
  308.     width: 100%;
  309.     height: 100%;
  310.     position: static;
  311.     opacity: 1;
  312.   }
  313. }
  314.  
  315. /* Animations */
  316.  
  317. @keyframes Bounce {
  318.   from {transform: translateY(0);}
  319.   to {transform: translateY(-10px);}
  320. }
  321.  
  322. #columns::before, #columns::after {
  323.   content: '';
  324.   width: 120px;
  325.   height: 160px;
  326.   position: absolute;
  327.   animation: Bounce 1s ease-in-out infinite alternate;
  328. }
  329.  
  330. #columns::before, #columns::after {top: 585px;}
  331. #columns::after {left: 121px;}
  332.  
  333. #columns::before {
  334.   left: 16px;
  335.   animation-delay: -.5s;
  336. }
  337.  
  338. @media screen and (min-width: 1360px) {
  339.   #columns::before {
  340.     top: 580px;
  341.     left: 68px;
  342.   }
  343.  
  344.   #columns::after {
  345.     top: 76px;
  346.     left: 1107px;
  347.   }
  348. }
  349.  
  350. /* Misc */
  351.  
  352. #pictures_container, #texts_container {
  353.   width: 1px;
  354.   height: 1px;
  355.   position: absolute;
  356. }
  357. .bbcode-swapping-image {background: url('https://i.imgur.com/2MbyLRf.png');}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement