Advertisement
althindor

Pro for saosh

Jul 6th, 2020
1,198
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 7.00 KB | None | 0 0
  1. /* Profile by AlthIndor */
  2.  
  3. html, body {background: #F8F5F0;}
  4.  
  5. html {
  6.   --color-dark: #2E2E2E;
  7.   --color-lite: #00000010;
  8. }
  9.  
  10. /* Fonts */
  11.  
  12. @font-face {
  13.  font-family: 'Open Sans';
  14.  font-style: normal;
  15.  font-weight: 400;
  16.  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
  17. }
  18.  
  19. @font-face {
  20.  font-family: 'Open Sans';
  21.  font-style: normal;
  22.  font-weight: 600;
  23.  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UNirkOUuhp.woff2) format('woff2');
  24. }
  25.  
  26. @font-face {
  27.  font-family: 'Work Sans';
  28.  font-style: normal;
  29.  font-weight: 600;
  30.  src: url(https://fonts.gstatic.com/s/worksans/v8/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K5fQBi8Jpg.woff2) format('woff2');
  31. }
  32.  
  33. /* Header */
  34.  
  35. #gaia_header, #gaia_header #header_left, #gaia_header #header_right {background: none;}
  36. #gaia_header #header_right {float: right !important;}
  37. #gaia_header li.spacer {display: none !important;}
  38. #gaia_header li {margin: 0 10px;}
  39.  
  40. #gaia_header #header_left, #gaia_header #header_right {
  41.  font: 600 0/39px 'Open Sans', sans-serif !important;
  42.  padding: 0 6px !important;
  43.  box-sizing: border-box;
  44. }
  45.  
  46. #gaia_header img {
  47. -webkit-mask: url('https://i.imgur.com/5FTB40o.png') no-repeat 0 3px;
  48.  mask: url('https://i.imgur.com/5FTB40o.png') no-repeat 0 3px;
  49.  background: var(--color-dark);
  50.  width: 0 !important;
  51.  padding: 0 36px 0 0;
  52. }
  53.  
  54. #gaia_header a {
  55.  color: var(--color-dark) !important;
  56.  font-size: 11px !important;
  57.  font-weight: 600 !important;
  58.  letter-spacing: .05em;
  59.  text-decoration: none !important;
  60. }
  61.  
  62. #header_left li:nth-of-type(n+3) a, #header_right a {border-bottom: 1px solid transparent;}
  63. #gaia_header a:hover {border-bottom-color: inherit !important;}
  64.  
  65. /* Columns */
  66.  
  67. #columns, #column_1, #column_2, #column_3 {
  68.  float: none;
  69.  line-height: 0;
  70.  margin: 0;
  71.  box-sizing: border-box;
  72.  overflow: visible;
  73. }
  74. .column {width: 100% !important;}
  75.  
  76. #columns {
  77.  width: 670px;
  78.  position: relative;
  79.  top: 60px;
  80.  left: calc(50% - 335px);
  81. }
  82.  
  83. #columns::before {
  84.  display: block;
  85.  width: 100%;
  86.  content: 'SAOSH';
  87.  color: var(--color-dark);
  88.  font: 600 40px/50px 'Work Sans', sans-serif;
  89.  letter-spacing: .05em;
  90.  margin-bottom: 25px;
  91.  border-bottom: 1px solid #606060;
  92. }
  93.  
  94. #columns ::-webkit-scrollbar {
  95.  width: 7px;
  96.  background: #F0F0F0;
  97. }
  98. #columns ::-webkit-scrollbar-thumb {background: #C8C8C8;}
  99. #columns * {scrollbar-width: thin;}
  100.  
  101. /* Panels */
  102.  
  103. .panel {
  104.  width: 100%;
  105.  font: 400 11px/1.8 'Open Sans', sans-serif;
  106.  padding: 0;
  107.  margin: 0;
  108.  box-sizing: border-box;
  109. }
  110. .panel h2 {display: none;}
  111. .panel img {max-width: 100% !important;}
  112.  
  113. .panel a {
  114.  color: #A0A0A0;
  115.  font-weight: 400;
  116.  text-decoration: none;
  117. }
  118. .panel a:hover {color: inherit;}
  119.  
  120. .panel {
  121.  background: #FFFFFF80;
  122.  color: #606060;
  123.  text-align: justify;
  124.  margin-bottom: 25px;
  125.  border: 25px solid transparent;
  126. }
  127.  
  128. #id_about, #id_wishlist, #id_footprints, #id_comments dl {
  129.  overflow-x: hidden;
  130.  overflow-y: scroll;
  131. }
  132. #id_about, #id_footprints, #id_comments dl {padding-right: 25px;}
  133. #id_wishlist {padding-right: 10px;}
  134. #id_comments {overflow: hidden;}
  135.  
  136. .panel:first-of-type, .panel:nth-of-type(2) {height: 240px;}
  137. .panel:nth-of-type(n+3) {max-height: 300px;}
  138.  
  139. .panel:nth-of-type(2) {
  140.  float: right;
  141.  width: calc(100% - 190px);
  142. }
  143.  
  144. /* Details */
  145.  
  146. #id_details {
  147.  float: left;
  148.  width: 170px;
  149. }
  150. #id_details p:first-of-type {margin-bottom: 15px;}
  151. #id_details h2, #id_details p:nth-of-type(n+2) {display: none;}
  152.  
  153. /* Dropdown Menu */
  154.  
  155. .forum_userstatus, #avatar_menu {
  156.  width: 120px;
  157.  border: none;
  158.  box-sizing: border-box;
  159. }
  160. .forum_userstatus .statuslinks span, #avatar_menu a {font: 600 10px/16px 'Open Sans', sans-serif;}
  161.  
  162. .forum_userstatus {
  163.  background: var(--color-lite);
  164.  height: 25px;
  165.  padding-top: 4px;
  166.  margin: 0;
  167. }
  168.  
  169. .forum_userstatus .statuslinks {
  170.  background: none !important;
  171.  position: relative;
  172. }
  173.  
  174. .forum_userstatus .statuslinks::after {
  175.  content: '➞';
  176.  font-size: 16px;
  177.  position: absolute;
  178.  top: -6px;
  179.  right: 2px;
  180.  pointer-events: none;
  181. }
  182.  
  183. .forum_userstatus .statuslinks span {
  184.  background: none !important;
  185.  padding: 0 0 0 5px !important;
  186.  text-transform: uppercase;
  187. }
  188.  
  189. #avatar_menu {
  190.  background: #E8E8E8;
  191.  padding-bottom: 5px;
  192. }
  193.  
  194. #avatar_menu a {
  195.  color: #404040;
  196.  text-transform: uppercase;
  197.  padding-left: 7px;
  198. }
  199.  
  200. #avatar_menu a:hover {
  201.  background: #00000040;
  202.  color: #FFFFFF;
  203. }
  204.  
  205. /* Wish List */
  206.  
  207. #id_wishlist {
  208.  display: grid;
  209.  grid-template-columns: repeat(6, 50px);
  210.  gap: 20px;
  211. }
  212. .premium_sparkle {display: none;}
  213.  
  214. #id_wishlist .item {
  215.  background: var(--color-lite);
  216.  width: 30px;
  217.  height: 30px;
  218.  padding: 10px;
  219.  position: relative;
  220.  filter: saturate(0%);
  221. }
  222.  
  223. #id_wishlist .item:hover {
  224.  background: #F8F5F0;
  225.  filter: none;
  226. }
  227.  
  228. .owner_checkmark {
  229.  margin: 0;
  230.  bottom: 5px;
  231.  left: 5px;
  232. }
  233.  
  234. /* Comments */
  235.  
  236. #id_comments #alerts_banner {display: none;}
  237. #id_comments .deletecomment {margin: 0 0 0 10px;}
  238. #id_comments dd {margin: 0 0 15px 0;}
  239. #id_comments dd:last-of-type {margin: 0;}
  240.  
  241. #id_comments dl {
  242.  width: 100%;
  243.  max-height: 185px;
  244.  clear: both;
  245.  margin-top: 65px;
  246.  box-sizing: border-box;
  247. }
  248.  
  249. #id_comments dt {
  250.  height: auto;
  251.  line-height: normal;
  252.  padding: 0 0 5px 0;
  253.  margin: 0 0 4px 0;
  254.  border-bottom: 1px solid #00000020;
  255. }
  256.  
  257. #id_comments .dropBox {
  258.  background: var(--color-lite);
  259.  width: 48px;
  260.  height: 48px;
  261.  margin: 5px 10px 0 0;
  262.  border: 1px solid transparent;
  263.  overflow: hidden;
  264. }
  265.  
  266. #id_comments .dropBox img {
  267.  max-width: unset !important;
  268.  width: 120px;
  269.  height: 150px;
  270.  margin: -30px 0 0 -45px;
  271. }
  272.  
  273. /* Comments Links */
  274.  
  275. #id_comments h2 + div, #id_comments h2 ~ p {
  276.  display: block;
  277.  background: var(--color-lite);
  278.  width: calc(50% - 10px);
  279.  height: 40px;
  280.  font: 600 11px/41px 'Work Sans', sans-serif;
  281.  letter-spacing: .05em;
  282.  text-align: center;
  283.  text-transform: uppercase;
  284. }
  285. #id_comments h2 + div {float: left;}
  286. #id_comments h2 ~ p {float: right;}
  287.  
  288. #id_comments #alert_container {float: none;}
  289. #id_comments h2 + div a, #id_comments h2 ~ p a {color: #2E2E2E;}
  290.  
  291. #id_comments #alert_container, #id_comments h2 ~ p {
  292.  padding: 0;
  293.  margin: 0;
  294. }
  295.  
  296. /* Misc */
  297.  
  298. #pictures_container, #texts_container {
  299.  width: 1px;
  300.  height: 1px;
  301.  position: absolute;
  302.  top: 0;
  303.  left: 50%;
  304.  overflow: visible;
  305. }
  306.  
  307. /* Enter Button */
  308.  
  309. @keyframes FadeEnter {
  310.  0% {opacity: 1; height: 100%;}
  311.  99.9999% {height: 100%;}
  312.  100% {opacity: 0; height: 0%;}
  313. }
  314.  
  315. #texts_container .spoiler-wrapper, #texts_container .spoiler-control {border: none;}
  316. #texts_container .spoiler-control-hide, #texts_container .spoiler-control span {display: none !important;}
  317. #texts_container .spoiler-wrapper {padding: 0;}
  318. #texts_container .spoiler-control {outline: none;}
  319.  
  320. #texts_container .spoiler-control-show {
  321.  display: block !important;
  322.  background: #FFFFFF;
  323.  width: 100%;
  324.  height: 100%;
  325.  position: fixed;
  326.  top: 0;
  327.  left: 0;
  328.  overflow: hidden;
  329. }
  330. #texts_container .spoiler-revealed .spoiler-control-show {animation: FadeEnter 1s linear 1 both;}
  331.  
  332. #texts_container .spoiler-control-show::after {
  333.  content: 'SAOSH';
  334.  color: #00000040;
  335.  font: 100px 'Work Sans', sans-serif;
  336. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement