API tools faq
paste
althindor

Pro for Myrna Fade

althindor
Dec 6th, 2021 (edited)
999
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 12.04 KB | None | 0 0
raw download clone embed print report
  1. /* Art by Myrna Fade */
  2. /* Code by AlthIndor */
  3.  
  4. :root {--top-offset: calc(50% - 300px + 20px);}
  5.  
  6. html, body {
  7.   background: repeating-linear-gradient(to right, #505050 calc(50% - 12px), #505050 calc(50% + 12px), #404040 calc(50% + 12px), #404040 calc(50% + 42px));
  8.   min-height: 800px;
  9.   overflow-x: hidden;
  10. }
  11. body {position: relative;}
  12. body a {text-decoration: none !important;}
  13.  
  14. .bbcode-swapping-image {background: url('https://i.imgur.com/Fk5mUXF.png');}
  15. * {cursor: url('https://i.ibb.co/FYGyk43/anchor-cursor.png'), auto !important;}
  16.  
  17. ::selection {
  18.   background: #FFE090;
  19.   color: #181238;
  20. }
  21.  
  22. /* Atlas */
  23.  
  24. #panel-details, #columns::before, #id_details, .custom_panel:nth-of-type(2), #id_contact li, .custom_panel:nth-of-type(1) a, .text_decoration:first-of-type a {background: url('https://i.ibb.co/SmD4QW9/myrnafade-layout.png') repeat-x border-box;}
  25. #panel-details {background-position: center top;}
  26. #columns::before {background-position: 0 -50px;}
  27. #id_details, .custom_panel:nth-of-type(2) {background-position: 0 -225px;}
  28. .text_decoration:first-of-type a {background-position: bottom right;}
  29.  
  30. #id_contact li:nth-of-type(2) {background-position-y: -625px;}
  31. #id_contact li:nth-of-type(3) {background-position-y: -825px;}
  32. .custom_panel:nth-of-type(1) a[href*='insta'] {background-position-y: -1025px;}
  33. .custom_panel:nth-of-type(1) a[href*='forum'] {background-position-y: -1225px;}
  34. #id_contact li:hover, .custom_panel:nth-of-type(1) a:hover {background-position-x: -210px;}
  35.  
  36. /* Fonts */
  37.  
  38. @font-face {
  39.   font-family: 'Open Sans';
  40.   font-style: normal;
  41.   font-weight: 400;
  42.   src: local('Open Sans Regular'), local('OpenSans-Regular'), url('https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0b.woff2') format('woff2');
  43. }
  44.  
  45. @font-face {
  46.   font-family: 'Open Sans';
  47.   font-style: normal;
  48.   font-weight: 700;
  49.   src: local('Open Sans Bold'), local('OpenSans-Bold'), url('https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN7rgOUuhp.woff2') format('woff2');
  50. }
  51.  
  52. /* Header */
  53.  
  54. #viewer #gaia_header, #panel-details {
  55.   height: 42px !important;
  56.   position: fixed !important;
  57. }
  58. #gaia_header li.spacer {display: none !important;}
  59. #gaia_header li {margin: 0 5px;}
  60.  
  61. #viewer #gaia_header, #gaia_header ul {
  62.   background: none !important;
  63.   box-sizing: border-box;
  64. }
  65.  
  66. #gaia_header ul {
  67.   font: 0/28px 'Open Sans', sans-serif !important;
  68.   padding: 0 2px !important;
  69. }
  70. #header_right {float: right !important;}
  71.  
  72. #header_left img {
  73.  -webkit-mask: url('https://i.imgur.com/cGGVY2x.png') 0 4px no-repeat;
  74.   mask: url('https://i.imgur.com/cGGVY2x.png') 0 4px no-repeat;
  75.   background: #FFFFFF;
  76.   width: 0;
  77.   padding: 0 34px 0 0;
  78. }
  79. #header_left li:nth-of-type(2) a:hover img {background: #FFE090;}
  80.  
  81. #gaia_header a {
  82.   color: #FFFFFF !important;
  83.   font-size: 10px !important;
  84.   text-transform: uppercase;
  85. }
  86. #gaia_header a:hover {color: #FFE090 !important;}
  87.  
  88. #header_right a[href*='edit'], #header_right a[href*='report'] {font-size: 0 !important;}
  89. #header_right a[href*='edit']::before, #header_right a[href*='report']::before {font-size: 10px;}
  90. #header_right a[href*='edit']::before {content: 'Edit My Profile';}
  91. #header_right a[href*='report']::before {content: 'Report Profile';}
  92.  
  93. /* False Header */
  94.  
  95. #panel-details {
  96.   width: 100%;
  97.   box-shadow: 0 1px 1px #000;
  98.   z-index: 1;
  99. }
  100. .text_decoration:first-of-type {display: none;}
  101.  
  102. /* Columns */
  103.  
  104. #columns {
  105.   float: none;
  106.   display: grid;
  107.   grid-template-rows: 175px 400px;
  108.   grid-template-columns: 210px 405px 405px 210px;
  109.   gap: 25px 20px;
  110.   font-size: 0;
  111.   top: var(--top-offset);
  112.   left: calc((100% - 1290px) / 2);
  113. }
  114. #column_1 {display: contents;}
  115. #column_2, #column_3 {display: none;}
  116.  
  117. #columns::before {
  118.   content: '';
  119.   display: block;
  120.   grid-area: 1/2/2/4;
  121.   width: 400px;
  122.   height: 100%;
  123.   justify-self: center;
  124. }
  125.  
  126. #columns ::-webkit-scrollbar {width: 0;}
  127. .panel {scrollbar-width: none;}
  128.  
  129. /* Grid Layout */
  130.  
  131. #id_contact {grid-area: 2/1/3/2;}
  132. #id_details {grid-area: 2/2/3/3;}
  133. .custom_panel:nth-of-type(2) {grid-area: 2/3/3/4;}
  134. .custom_panel:nth-of-type(1) {grid-area: 2/4/3/5;}
  135.  
  136. /* Panels */
  137.  
  138. .panel {
  139.   background: none;
  140.   color: #FFFFFF;
  141.   font: 10px/1.6 'Open Sans', sans-serif;
  142.   padding: 0;
  143.   margin: 0;
  144.   box-sizing: border-box;
  145. }
  146. .panel h2 {display: none;}
  147. .panel img {max-width: 100% !important;}
  148.  
  149. .panel a {color: mediumturquoise;}
  150. .panel a:hover {color: #FFE090;}
  151.  
  152. #id_details, .custom_panel:nth-of-type(2) {
  153.   width: 400px;
  154.   height: 400px;
  155.   border: 65px solid transparent;
  156. }
  157. #id_details {justify-self: left;}
  158.  
  159. .custom_panel:nth-of-type(2) {
  160.   justify-self: right;
  161.   text-align: justify;
  162.   overflow: hidden scroll;
  163. }
  164.  
  165. /* Buttons */
  166.  
  167. #id_contact li:nth-of-type(1), #id_contact span, .custom_panel:nth-of-type(1) br {display: none;}
  168. #id_contact li:nth-of-type(3), .custom_panel:nth-of-type(1) a:nth-of-type(2) {margin-top: -32px;}
  169.  
  170. #id_contact li, #id_contact a, .custom_panel:nth-of-type(1) a {
  171.   width: 210px;
  172.   height: 200px;
  173. }
  174.  
  175. /* LMK once Opera supports clip-path: path() */
  176.  
  177. #id_contact li, .custom_panel:nth-of-type(1) a {
  178.   display: block;
  179.   color: #FFFFFF;
  180.   text-align: center;
  181.   position: relative;
  182.   clip-path: polygon(
  183.     102px 065px, 108px 065px, 112px 059px, 115px 059px, 116px 060px, 120px 055px, 126px 049px, 130px 042px, 133px 038px, 136px 038px,
  184.     137px 039px, 138px 042px, 139px 046px, 140px 051px, 140px 059px, 139px 064px, 138px 075px, 138px 078px, 143px 073px, 148px 073px,
  185.     150px 074px, 157px 079px, 165px 088px, 172px 098px, 177px 106px, 180px 111px, 183px 118px, 186px 127px, 188px 138px, 189px 145px,
  186.     190px 154px, 190px 161px, 189px 162px, 188px 162px, 186px 157px, 184px 155px, 179px 153px, 174px 153px, 171px 155px, 169px 158px,
  187.     160px 174px, 159px 174px, 155px 169px, 154px 168px, 151px 168px, 149px 169px, 145px 173px, 138px 185px, 135px 185px, 133px 182px,
  188.     131px 182px, 126px 186px, 119px 190px, 113px 193px, 106px 198px, 104px 198px, 097px 193px, 089px 189px, 083px 185px, 079px 182px,
  189.     077px 182px, 075px 185px, 072px 185px, 071px 182px, 068px 178px, 064px 172px, 060px 168px, 056px 168px, 054px 170px, 051px 174px,
  190.     050px 174px, 047px 170px, 044px 164px, 041px 158px, 038px 154px, 036px 153px, 031px 153px, 028px 154px, 025px 157px, 022px 162px,
  191.     021px 162px, 020px 161px, 021px 145px, 022px 137px, 025px 123px, 028px 115px, 032px 107px, 039px 096px, 046px 087px, 053px 079px,
  192.     062px 073px, 067px 073px, 072px 078px, 072px 075px, 071px 064px, 070px 059px, 070px 051px, 073px 039px, 074px 038px, 077px 038px,
  193.     081px 044px, 087px 052px, 090px 055px, 094px 060px, 095px 059px, 098px 059px
  194.   );
  195. }
  196. #id_contact a, .custom_panel:nth-of-type(1) a {font-size: 0;}
  197.  
  198. #id_contact li:hover, .custom_panel:nth-of-type(1) a:hover {
  199.   clip-path: polygon(
  200.     102px 065px, 108px 065px, 112px 059px, 115px 059px, 116px 060px, 120px 055px, 126px 049px, 130px 042px, 133px 038px, 136px 038px,
  201.     137px 039px, 138px 042px, 139px 046px, 140px 051px, 140px 059px, 139px 064px, 140px 071px, 143px 070px, 146px 071px, 149px 074px,
  202.     154px 068px, 170px 045px, 187px 022px, 193px 014px, 198px 009px, 205px 003px, 209px 001px, 205px 008px, 202px 018px, 201px 024px,
  203.     201px 029px, 202px 034px, 203px 036px, 208px 039px, 208px 041px, 205px 044px, 201px 050px, 198px 056px, 197px 060px, 197px 068px,
  204.     199px 073px, 202px 075px, 205px 076px, 205px 078px, 203px 079px, 197px 084px, 194px 089px, 192px 094px, 192px 107px, 193px 112px,
  205.     194px 115px, 194px 117px, 189px 120px, 185px 124px, 186px 127px, 188px 138px, 189px 145px, 190px 154px, 190px 161px, 189px 162px,
  206.     188px 162px, 186px 157px, 184px 155px, 179px 153px, 174px 153px, 171px 155px, 169px 158px, 160px 174px, 159px 174px, 155px 169px,
  207.     154px 168px, 151px 168px, 149px 169px, 145px 173px, 138px 185px, 135px 185px, 133px 182px, 131px 182px, 126px 186px, 119px 190px,
  208.     113px 193px, 106px 198px, 104px 198px, 097px 193px, 089px 189px, 083px 185px, 079px 182px, 077px 182px, 075px 185px, 072px 185px,
  209.     071px 182px, 068px 178px, 064px 172px, 060px 168px, 056px 168px, 054px 170px, 051px 174px, 050px 174px, 047px 170px, 044px 164px,
  210.     041px 158px, 038px 154px, 036px 153px, 031px 153px, 028px 154px, 025px 157px, 022px 162px, 021px 162px, 020px 161px, 021px 145px,
  211.     022px 137px, 025px 124px, 020px 120px, 016px 117px, 016px 115px, 018px 107px, 018px 095px, 017px 091px, 012px 084px, 008px 080px,
  212.     005px 078px, 005px 076px, 008px 075px, 012px 071px, 013px 068px, 013px 060px, 011px 054px, 006px 046px, 002px 041px, 002px 039px,
  213.     006px 037px, 008px 034px, 009px 029px, 009px 023px, 008px 017px, 005px 008px, 001px 001px, 005px 003px, 011px 008px, 017px 014px,
  214.     040px 045px, 054px 065px, 061px 073px, 064px 071px, 067px 070px, 070px 071px, 071px 064px, 070px 059px, 070px 051px, 073px 039px,
  215.     074px 038px, 077px 038px, 081px 044px, 087px 052px, 090px 055px, 094px 060px, 095px 059px, 098px 059px
  216.     );
  217. }
  218.  
  219. #id_contact a {
  220.   position: absolute;
  221.   left: 0;
  222. }
  223.  
  224. /* Details */
  225.  
  226. #id_details {
  227.   display: flex;
  228.   justify-content: center;
  229.   align-items: center;
  230. }
  231. #id_details p:nth-of-type(n+2), .forum_userstatus {display: none;}
  232. #id_details p {margin: 0;}
  233.  
  234. #id_details img {
  235.   transform: scale(2);
  236.   image-rendering: pixelated;
  237. }
  238.  
  239. /* Misc */
  240.  
  241. #pictures_container, #texts_container {
  242.   width: 0;
  243.   height: 0;
  244.   position: absolute;
  245.   top: var(--top-offset);
  246.   left: 50%;
  247. }
  248.  
  249. /* Mobile */
  250.  
  251. @media (max-width: 1360px) {
  252.  
  253.   :root {--top-offset: calc((100% - 1420px) / 2 + 50px);}
  254.   html, body {min-height: 1600px;}
  255.  
  256.   #gaia_header #header_right {
  257.     display: grid !important;
  258.     grid-auto-flow: column dense;
  259.     justify-content: right;
  260.   }
  261.   #header_right li:nth-of-type(4) {grid-column: 2;}
  262.  
  263.   #header_right a[href*='edit'], #header_right a[href*='report'] {font-size: 0 !important;}
  264.   #header_right a[href*='edit']::before, #header_right a[href*='report']::before {font-size: 10px;}
  265.   #header_right a[href*='edit']::before {content: 'Edit Mine';}
  266.   #header_right a[href*='report']::before {content: 'Report Profile';}
  267.  
  268.   #columns {
  269.     grid-template-columns: 440px;
  270.     grid-template-rows: 175px 400px 400px 200px 165px;
  271.     gap: 20px;
  272.     left: calc(50% - 220px);
  273.   }
  274.  
  275.   #columns::before, .panel {grid-column: 1 !important;}
  276.   #columns::before {grid-row: 1;}
  277.   .panel {justify-self: center !important;}
  278.  
  279.   #id_details {grid-row: 2;}
  280.   .custom_panel:nth-of-type(2) {grid-row: 3;}
  281.   #id_contact {grid-row: 4;}
  282.  
  283.   .custom_panel:nth-of-type(1) {
  284.     grid-row: 5;
  285.     margin-top: -35px;
  286.   }
  287.  
  288.   #id_contact li, .custom_panel:nth-of-type(1) a {
  289.     float: left;
  290.     margin: 0 3px !important;
  291.   }
  292.  
  293. }
  294.  
  295. /* Small Mobile */
  296.  
  297. @media (max-width: 700px) {
  298.  
  299.   #panel-details {
  300.     background-color: #000;
  301.     background-position-y: 16px;
  302.     height: 59px !important;
  303.   }
  304.  
  305.   #viewer #gaia_header, #gaia_header::before {overflow: hidden;}
  306.   .text_decoration:first-of-type {display: revert;}
  307.  
  308.   #gaia_header::before, .text_decoration:first-of-type a {
  309.     position: fixed;
  310.     top: 10px;
  311.   }
  312.  
  313.   #viewer #gaia_header {
  314.     background: #000000 !important;
  315.     width: 50% !important;
  316.     height: 0 !important;
  317.     left: unset !important;
  318.     right: 0;
  319.     box-shadow: 0 0 5px #00000080;
  320.   }
  321.  
  322.   #viewer #gaia_header:hover {
  323.     height: 100% !important;
  324.     padding: 40px 10px 10px 10px !important;
  325.   }
  326.  
  327.   #viewer #gaia_header ul {display: contents !important;}
  328.   #header_right a[href*='edit']::before {content: 'Edit My Profile';}
  329.  
  330.   #gaia_header ul li {
  331.     display: block !important;
  332.     line-height: 2;
  333.     text-align: right;
  334.     margin: 0;
  335.   }
  336.   #gaia_header #header_left li:nth-of-type(2) {display: none !important;}
  337.   #gaia_header a, #gaia_header a::before {font-size: 14px !important;}
  338.  
  339.   #header_left li:nth-of-type(3), #header_right li:nth-of-type(1) {
  340.     padding-top: 5px;
  341.     margin-top: 5px;
  342.     border-top: 1px solid #808080;
  343.   }
  344.  
  345.   #gaia_header::before {
  346.     content: url('https://i.ibb.co/XyVt7fP/menu.png');
  347.     right: 10px;
  348.     border-radius: 3px;
  349.   }
  350.  
  351.   .text_decoration:first-of-type a {
  352.     width: 55px;
  353.     height: 25px;
  354.     left: 10px;
  355.   }
  356.  
  357. }
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!