Advertisement
althindor

Pro for Coyote Type

Feb 17th, 2021 (edited)
1,209
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 8.38 KB | None | 0 0
  1. /* Profile By AlthIndor */
  2.  
  3. html, body {
  4.   background: url('https://www.toptal.com/designers/subtlepatterns/patterns/checkerboard-cross.png') #202020;
  5.   background-blend-mode: multiply, normal;
  6. }
  7. body a {text-decoration: none !important;}
  8.  
  9. /* Change Artwork Here */
  10.  
  11. .custom_panel {background: url('https://i.imgur.com/t6GuCZS.jpg') #000 center / cover;}
  12.  
  13. /* Fonts */
  14.  
  15. @font-face {
  16.   font-family: 'Font Awesome 5 Brands';
  17.   font-style: normal;
  18.   font-weight: 400;
  19.   font-display: block;
  20.   src: url('https://ka-f.fontawesome.com/releases/v5.15.2/webfonts/free-fa-brands-400.woff2') format('woff2'), url('https://ka-f.fontawesome.com/releases/v5.15.2/webfonts/free-fa-brands-400.woff') format('woff');
  21. }
  22.  
  23. @font-face {
  24.   font-family: 'Font Awesome 5 Free';
  25.   font-style: normal;
  26.   font-weight: 900;
  27.   font-display: block;
  28.   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');
  29. }
  30.  
  31. @font-face {
  32.   font-family: 'Open Sans';
  33.   font-style: normal;
  34.   font-weight: 400;
  35.   src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
  36. }
  37.  
  38. @font-face {
  39.   font-family: 'Open Sans';
  40.   font-style: normal;
  41.   font-weight: 700;
  42.   src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN7rgOUuhp.woff2) format('woff2');
  43. }
  44.  
  45. /* Header */
  46.  
  47. #viewer #gaia_header {
  48.   background: #000;
  49.   height: 30px !important;
  50.   box-shadow: 0 2px 5px #00000040;
  51. }
  52. #gaia_header li {margin: 0 5px;}
  53. #gaia_header li.spacer {display: none !important;}
  54.  
  55. #gaia_header #header_left, #gaia_header #header_right {
  56.   background: none;
  57.   font: 700 0/27px 'Open Sans', sans-serif !important;
  58.   padding: 0 5px !important;
  59.   box-sizing: border-box;
  60. }
  61. #gaia_header #header_right {float: right;}
  62.  
  63. #gaia_header img {
  64.  -webkit-mask: url('https://i.imgur.com/cGGVY2x.png') no-repeat 0 3px;
  65.   mask: url('https://i.imgur.com/cGGVY2x.png') no-repeat 0 3px;
  66.   background: #FFFFFF;
  67.   width: 0;
  68.   padding: 0 34px 0 0;
  69. }
  70. #header_left li:nth-of-type(n+2) a:hover img {background: #BED5C6;}
  71.  
  72. #gaia_header a {
  73.   color: #FFFFFF !important;
  74.   font-size: 11px !important;
  75.   text-transform: uppercase;
  76. }
  77. #gaia_header a:hover {color: #BED5C6 !important;}
  78.  
  79. /* Columns */
  80.  
  81. #columns, #column_1 {
  82.   box-sizing: border-box;
  83.   overflow: visible;
  84. }
  85.  
  86. #columns {
  87.   background: #FFFFFF;
  88.   width: 700px;
  89.   height: 414px;
  90.   top: calc(50% - 206px);
  91.   left: calc(50% - 350px);
  92.   border: 12px solid transparent;
  93.   filter: drop-shadow(0 2px 5px #000);
  94. }
  95.  
  96. #column_1 {
  97.   display: grid;
  98.   grid-template: 50% 50% / 350px 1fr;
  99.   gap: 0 3px;
  100.   background: #000;
  101.   width: calc(100% - 52px);
  102.   height: 100%;
  103.   margin: 0;
  104.   border: 3px solid #000;
  105. }
  106.  
  107. #column_2, #column_3 {display: contents;}
  108.  
  109. /* Scrollbars */
  110.  
  111. #columns ::-webkit-scrollbar {
  112.   background: #00000020;
  113.   width: 5px;
  114. }
  115. #columns ::-webkit-scrollbar-thumb {background: #FFFFFF;}
  116.  
  117. .panel {
  118.   scrollbar-color: #FFFFFF #00000020;
  119.   scrollbar-width: thin;
  120. }
  121.  
  122. /* Panels */
  123.  
  124. .panel, .panel h2 {
  125.   padding: 0;
  126.   margin: 0;
  127.   box-sizing: border-box;
  128. }
  129.  
  130. .panel {
  131.   width: 100%;
  132.   font: 10px/1.7 'Open Sans', 'Segoe UI', sans-serif;
  133.   text-align: justify;
  134.   overflow: hidden;
  135. }
  136. .custom_panel {grid-area: 1/2/3/3;}
  137.  
  138. .panel a {color: darkslategray;}
  139. #id_about a:hover, dl a:hover {mix-blend-mode: hard-light;}
  140.  
  141. #id_about, #id_comments {
  142.   background: #BED5C6;
  143.   padding-right: 20px;
  144.   border: 20px solid transparent;
  145.   border-top-width: 80px;
  146.   overflow-y: scroll;
  147. }
  148. #id_about img, #id_comments .postcontent img {max-width: 100%;}
  149.  
  150. #id_about {
  151.   grid-area: 1/1/2/2;
  152.   border-bottom-width: 10px;
  153. }
  154.  
  155. #id_comments {
  156.   grid-area: 2/1/3/2;
  157.   border-top-width: 70px;
  158. }
  159.  
  160. /* Panel Headers */
  161.  
  162. #about_title, #comments_title {
  163.   background: linear-gradient(to left, #0004 0px, #0004 5px, #0000 5px, #0000 10px, #0008 10px, #0008 20px, #0000 20px, #0000 25px, #000C 25px, #000C 45px, #0000 45px, #0000 50px, #000 50px);
  164.   width: 333px;
  165.   height: 40px;
  166.   font-size: 0;
  167.   text-indent: 20px;
  168.   text-transform: capitalize;
  169.   position: fixed;
  170.   left: 0;
  171. }
  172. #contact_title, #store_title, .custom_panel h2 {display: none;}
  173.  
  174. #about_title {top: 20px;}
  175. #comments_title {top: calc(50% + 10px);}
  176.  
  177. #about_title::before, #comments_title::before {
  178.   color: #FFFFFF;
  179.   font: 700 20px/40px 'Open Sans', sans-serif;
  180. }
  181. #about_title::before {content: 'About This User';}
  182. #comments_title::before {content: 'Leave Comment';}
  183.  
  184. /* Buttons */
  185.  
  186. #id_contact, #id_store {
  187.   background: none;
  188.   width: max-content;
  189. }
  190.  
  191. #id_contact li, #id_contact a, #id_store a[href*='userstore'], #id_comments h2 + div a, #id_comments h2 ~ p a, .custom_panel a {
  192.   display: block;
  193.   width: 40px;
  194.   height: 40px;
  195.   font-size: 0;
  196. }
  197.  
  198. #id_contact li, #id_store a[href*='userstore'], #id_comments h2 + div a, #id_comments h2 ~ p a, .custom_panel a {
  199.   background: #000;
  200.   color: #FFFFFF;
  201.   text-align: center;
  202. }
  203.  
  204. #id_contact li:hover, #id_store a[href*='userstore']:hover, #id_comments h2 + div a:hover, #id_comments h2 ~ p a:hover, .custom_panel a:hover {
  205.   background: #BED5C6;
  206.   color: #000;
  207. }
  208.  
  209. #id_contact, #id_store, #id_comments h2 + div a, #id_comments h2 ~ p a, .custom_panel div:first-of-type {
  210.   position: fixed;
  211.   right: 0;
  212. }
  213. #id_contact li::before, #id_store a[href*='userstore']::before, #id_comments h2 + div a::before, #id_comments h2 ~ p a::before, .custom_panel a[href*='carrd']::before {font: 900 20px/40px 'Font Awesome 5 Free';}
  214.  
  215. .custom_panel a::before {font: 400 20px/40px 'Font Awesome 5 Brands';}
  216. .custom_panel a[href*='instagram']::before {content: ''; font-size: 26px;}
  217. .custom_panel a[href*='twitter']::before {content: '';}
  218. .custom_panel a[href*='tumblr']::before {content: '';}
  219. .custom_panel a[href*='carrd']::before {content: '';}
  220.  
  221. /* Contact */
  222.  
  223. #id_contact {top: 0;}
  224. #id_contact span {display: none;}
  225.  
  226. #id_contact li {
  227.   margin-bottom: 10px;
  228.   position: relative;
  229. }
  230. #id_contact li:nth-of-type(1)::before {content: '';}
  231. #id_contact li:nth-of-type(2)::before {content: '';}
  232. #id_contact li:nth-of-type(3)::before {content: '';}
  233.  
  234. #id_contact a {
  235.   position: absolute;
  236.   top: 0;
  237.   left: 0;
  238. }
  239.  
  240. /* Store */
  241.  
  242. #id_store {top: 200px;}
  243. #id_store p {margin: 0;}
  244. #id_store h2 ~ :not(p:last-of-type) {display: none;}
  245. #id_store a[href*='userstore']::before {content: '';}
  246.  
  247. /* Comment Button */
  248.  
  249. #id_comments h2 + div a, #id_comments h2 ~ p a {top: 150px;}
  250. #id_comments h2 + div a::before, #id_comments h2 ~ p a::before {content: '';}
  251. #id_comments h2 + div a {z-index: 1;}
  252.  
  253. /* Custom Links */
  254.  
  255. .custom_panel div {top: 200px;}
  256. .custom_panel br {display: none;}
  257. .custom_panel a {margin-bottom: 10px;}
  258.  
  259. /* Comments */
  260.  
  261. #id_comments #alert_container, #id_comments h2 ~ p {display: contents;}
  262. #id_comments #alerts_banner {display: none;}
  263.  
  264. #id_comments dt {
  265.   display: flex;
  266.   flex-flow: row wrap;
  267.   justify-content: space-between;
  268.   height: auto;
  269.   line-height: normal;
  270.   padding: 0 0 3px 0;
  271.   margin: 0 0 3px 0;
  272.   border-bottom: 1px dotted #00000080;
  273. }
  274. #id_comments .date a {font-weight: 400;}
  275.  
  276. #id_comments dd {margin: 0 0 20px 0;}
  277. #id_comments dd:last-of-type {margin: 0;}
  278.  
  279. #id_comments .dropBox {
  280.   background: #000;
  281.   width: 45px;
  282.   height: 55px;
  283.   margin: 5px 10px 0 0;
  284.   border: 2px solid transparent;
  285.   overflow: hidden;
  286. }
  287.  
  288. #id_comments .dropBox img {
  289.   width: 120px;
  290.   height: 150px;
  291.   margin: -30px 0 0 -45px;
  292. }
  293.  
  294. /* Accents */
  295.  
  296. #columns::before, #column_1::before, #column_1::after, #columns::after {
  297.   content: '';
  298.   width: 0;
  299.   height: 0;
  300.   position: fixed;
  301.   filter: drop-shadow(0 1px 1px #000000);
  302.   pointer-events: none;
  303.   z-index: 1;
  304. }
  305.  
  306. #columns::before, #column_1::before {
  307.   top: -14px;
  308.   border-top: 40px solid #FFFFFF;
  309. }
  310.  
  311. #columns::before, #columns::after {
  312.   left: -14px;
  313.   border-right: 40px solid transparent;
  314. }
  315.  
  316. #column_1::after, #columns::after {
  317.   bottom: -14px;
  318.   border-bottom: 40px solid #FFFFFF;
  319. }
  320.  
  321. #column_1::before, #column_1::after {
  322.   right: -14px;
  323.   border-left: 40px solid transparent;
  324. }
  325.  
  326. /* Misc */
  327.  
  328. #pictures_container, #texts_container {
  329.   width: 1px;
  330.   height: 1px;
  331.   position: absolute;
  332.   top: calc(50% - 206px);
  333.   left: calc(50% - 350px);
  334.   overflow: visible;
  335. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement