althindor

Pro for imalwaystiired

Jul 22nd, 2021 (edited)
1,472
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 6.87 KB | None | 0 0
  1. /* Profile By AlthIndor */
  2.  
  3. :root {
  4.   --color-primary: pink;
  5.   --color-secndry: thistle;
  6.   --color-text: #505050;
  7.   --border: 1px solid #B8988C;
  8.   --shadow: 0 2px 5px #00000060;
  9.   --top-offset: 150px;
  10. }
  11.  
  12. html, body {
  13.   background: url('https://i.imgur.com/e42xknE.png') top center #FDE8EA;
  14.   overflow-x: hidden;
  15. }
  16. body a {text-decoration: none !important;}
  17.  
  18. /* Fonts */
  19.  
  20. @font-face {
  21.   font-family: 'Open Sans';
  22.   font-style: normal;
  23.   font-weight: 400;
  24.   src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
  25. }
  26.  
  27. @font-face {
  28.   font-family: 'Open Sans';
  29.   font-style: normal;
  30.   font-weight: 700;
  31.   src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN7rgOUuhp.woff2) format('woff2');
  32. }
  33.  
  34. @font-face {
  35.   font-family: 'Font Awesome 5 Free';
  36.   font-style: normal;
  37.   font-weight: 900;
  38.   font-display: block;
  39.   src: url('https://ka-f.fontawesome.com/releases/v5.15.2/webfonts/free-fa-solid-900.woff2') format('woff2'), url('https://ka-f.fontawesome.com/releases/v5.15.2/webfonts/free-fa-solid-900.woff') format('woff');
  40. }
  41.  
  42. /* Header */
  43.  
  44. #viewer #gaia_header {
  45.   background: var(--color-text) !important;
  46.   height: 30px !important;
  47.   position: fixed !important;
  48.   box-shadow: var(--shadow);
  49. }
  50. #gaia_header li.spacer {display: none !important;}
  51. #gaia_header li {margin: 0 5px;}
  52.  
  53. #gaia_header #header_left, #gaia_header #header_right {
  54.   background: none !important;
  55.   font: 0/28px 'Open Sans', sans-serif !important;
  56.   padding: 0 5px !important;
  57.   box-sizing: border-box;
  58. }
  59. #gaia_header #header_right {float: right;}
  60.  
  61. #gaia_header img {
  62.   background: url('https://i.imgur.com/cGGVY2x.png') no-repeat 0 4px;
  63.   width: 0;
  64.   padding: 0 34px 0 0;
  65.   filter: invert(100%);
  66. }
  67.  
  68. #gaia_header a {
  69.   color: #FFFFFF !important;
  70.   font-size: 10px !important;
  71.   text-transform: uppercase;
  72. }
  73.  
  74. #header_right a[href*='edit'], #header_right a[href*='report'] {font-size: 0 !important;}
  75. #header_right a[href*='edit']::before, #header_right a[href*='report']::before {font-size: 10px;}
  76. #header_right a[href*='edit']::before {content: 'Edit My Profile';}
  77. #header_right a[href*='report']::before {content: 'Report Profile';}
  78.  
  79. /* Columns */
  80.  
  81. #columns, #columns .column {
  82.   float: none;
  83.   width: 372px;
  84.   overflow: visible;
  85. }
  86.  
  87. #columns {
  88.   top: var(--top-offset);
  89.   left: calc(50% - 186px);
  90. }
  91.  
  92. #columns .column {
  93.   display: block;
  94.   margin: 0;
  95.   font-size: 0;
  96. }
  97.  
  98. /* Panels */
  99.  
  100. .panel, .panel h2 {
  101.   color: var(--color-text);
  102.   padding: 0;
  103.   margin: 0;
  104.   box-sizing: border-box;
  105. }
  106.  
  107. .panel a {color: inherit;}
  108. .panel a:hover {color: var(--color-primary);}
  109.  
  110. .panel {
  111.   background: none;
  112.   font: 10px/1.6 'Open Sans', sans-serif;
  113.   text-align: justify;
  114.   margin-bottom: 15px;
  115.   position: relative;
  116. }
  117.  
  118. .panel:not(#id_contact):not(#id_comments):not(.media_panel) {
  119.   background: #FFFFFF;
  120.   padding: 15px;
  121.   border: var(--border);
  122.   box-shadow: var(--shadow);
  123.   overflow: hidden;
  124. }
  125. #id_about img {max-width: 100%;}
  126.  
  127. .panel h2 {
  128.   background: pink;
  129.   width: calc(100% + 30px);
  130.   height: 40px;
  131.   text-indent: 15px;
  132.   font-size: 14px;
  133.   line-height: 39px;
  134.   text-shadow: 0 1px 1px #FFFFFF;
  135.   margin: -15px 0 15px -15px;
  136.   border: var(--border);
  137.   border-width: 0 0 1px 0;
  138. }
  139. #id_contact h2, #id_comments h2, .media_panel h2 {display: none;}
  140.  
  141. /* Contact */
  142.  
  143. #id_contact, #id_comments {
  144.   margin: 0;
  145.   position: absolute;
  146.   left: 166px;
  147.   z-index: 1;
  148. }
  149. #id_contact {top: 56px;}
  150. #id_comments {top: 191px;}
  151.  
  152. #id_contact ul *, #id_comments * {
  153.   width: 190px;
  154.   height: 35px;
  155. }
  156. #id_contact li {margin: 0 0 10px 0;}
  157. #id_contact span {display: none;}
  158.  
  159. #id_contact li, #id_comments h2 + div {
  160.   display: flex;
  161.   flex-flow: row nowrap;
  162.   align-items: center;
  163.   background: var(--color-primary);
  164.   text-align: left;
  165.   text-indent: 15px;
  166.   text-shadow: 0 1px 1px #FFFFFF;
  167.   position: relative;
  168.   border: var(--border);
  169.   box-sizing: border-box;
  170. }
  171. #id_contact li:hover, #id_comments h2 + div:hover {background: var(--color-secndry);}
  172.  
  173. #id_contact li::before, #id_comments h2 + div::before {font: 900 18px/1 'Font Awesome 5 Free';}
  174. #id_contact li:nth-of-type(1)::before {content: '';}
  175. #id_contact li:nth-of-type(2)::before {content: '';}
  176. #id_contact li:nth-of-type(3)::before {content: '';}
  177. #id_comments h2 + div::before {content: '';}
  178.  
  179. #id_contact li::after, #id_comments h2 + div::after {
  180.   font-size: 14px;
  181.   font-weight: 700;
  182.   text-transform: uppercase;
  183. }
  184. #id_contact li:nth-of-type(1)::after {content: 'Add As Friend';}
  185. #id_contact li:nth-of-type(2)::after {content: 'Send Message';}
  186. #id_contact li:nth-of-type(3)::after {content: 'Start A Trade';}
  187. #id_comments h2 + div::after {content: 'Add Comment';}
  188.  
  189. #id_contact a, #id_comments a {
  190.   font-size: 0;
  191.   position: absolute;
  192.   top: 0;
  193.   left: 0;
  194.   z-index: 1;
  195. }
  196.  
  197. /* Comments */
  198.  
  199. #id_comments #alerts_banner, #id_comments h2 ~ p, #id_comments dl, #id_comments .clear {display: none;}
  200. #alert_container {display: contents;}
  201.  
  202. /* Details */
  203.  
  204. #id_details p:nth-of-type(n+2), .forum_userstatus {display: none;}
  205. #id_details img {filter: drop-shadow(0 1px #FFFFFF);}
  206.  
  207. #id_details p {
  208.   background: #00000010;
  209.   width: 140px;
  210.   padding: 9px;
  211.   margin: 0;
  212.   border: 1px solid #00000020;
  213.   box-sizing: border-box;
  214. }
  215.  
  216. /* Wish List */
  217.  
  218. #id_wishlist {
  219.   display: grid;
  220.   grid-template-columns: repeat(7, 40px);
  221.   grid-auto-rows: max-content;
  222.   gap: 10px;
  223.   text-align: center;
  224.   position: relative;
  225. }
  226. #id_wishlist .clear, .premium_sparkle {display: none;}
  227. #id_wishlist .item img {filter: drop-shadow(0 1px #FFFFFF);}
  228.  
  229. #id_wishlist h2 {
  230.   grid-column: 1/-1;
  231.   margin-bottom: 5px;
  232. }
  233.  
  234. #id_wishlist .item {
  235.   background: #00000010;
  236.   width: 100%;
  237.   height: 40px;
  238.   padding: 4px 0;
  239.   position: relative;
  240.   border: 1px solid #00000020;
  241.   box-sizing: border-box;
  242. }
  243. #id_wishlist .item:hover {background: thistle;}
  244.  
  245. #id_wishlist .owner_checkmark {
  246.   margin: 0;
  247.   bottom: 4px;
  248.   left: 4px;
  249. }
  250.  
  251. /* Media */
  252.  
  253. .media_panel {
  254.   background: var(--color-primary);
  255.   width: 100%;
  256.   height: 40px !important;
  257.   border: var(--border);
  258.   box-shadow: var(--shadow);
  259.   overflow: hidden;
  260. }
  261. .media_panel:hover {background-color: var(--color-secndry);}
  262.  
  263. .media_panel::before {
  264.   content: '';
  265.   display: block;
  266.   background: url('https://i.imgur.com/gqTTTvw.png') -14px -3px no-repeat, url('https://i.imgur.com/gqTTTvw.png') 77px -43px no-repeat;
  267.   width: 100%;
  268.   height: 100%;
  269.   filter: invert(68.5%) drop-shadow(0 1px 1px #FFFFFF);
  270. }
  271.  
  272. .media_panel iframe {
  273.   width: calc(100% + 16px);
  274.   height: 200px;
  275.   position: absolute;
  276.   bottom: 0;
  277.   left: -9px;
  278.   opacity: .001;
  279. }
  280.  
  281. /* Misc */
  282.  
  283. #pictures_container, #texts_container {
  284.   width: 0;
  285.   height: 0;
  286.   position: absolute;
  287.   top: var(--top-offset);
  288.   left: 50%;
  289. }
Add Comment
Please, Sign In to add comment