Advertisement
althindor

Pro for Emmeleia

Oct 6th, 2019
522
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 9.87 KB | None | 0 0
  1. /* Profile by AlthIndor */
  2. /* Artworks by Emmeleia */
  3.  
  4. html {
  5.  --out-color: #20205480;
  6.  --hov-color: #202054D0;
  7.  --red-color: #D85854;
  8. }
  9.  
  10. html, body {background: #D4F4FF;}
  11. body a {text-decoration: none !important;}
  12.  
  13. body ::selection {
  14.  background: var(--red-color);
  15.  color: #FFFFFF;
  16. }
  17.  
  18. /* Fonts */
  19.  
  20. @font-face {
  21.  font-family: 'Open Sans Condensed';
  22.  font-style: normal;
  23.  font-weight: 700;
  24.  src: local('Open Sans Condensed Bold'), local('OpenSansCondensed-Bold'), url(https://fonts.gstatic.com/s/opensanscondensed/v14/z7NFdQDnbTkabZAIOl9il_O6KJj73e7Ff0GmDuXMRw.woff2) format('woff2');
  25. }
  26.  
  27. @font-face {
  28.  font-family: 'Open Sans';
  29.  font-style: normal;
  30.  font-weight: 400;
  31.  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
  32. }
  33.  
  34. @font-face {
  35.  font-family: 'Open Sans';
  36.  font-style: normal;
  37.  font-weight: 700;
  38.  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN7rgOUuhp.woff2) format('woff2');
  39. }
  40.  
  41. /* Header */
  42.  
  43. #viewer #gaia_header, #gaia_header #header_left, #gaia_header #header_right {height: auto !important;}
  44. #viewer #gaia_header {background: none !important;}
  45.  
  46. #gaia_header #header_left, #gaia_header #header_right {
  47.  background: var(--out-color);
  48.  width: auto !important;
  49.  font: 700 0/0 'Open Sans Condensed', sans-serif !important;
  50.  margin: 10px !important;
  51.  padding: 15px 5px !important;
  52.  border-radius: 5px;
  53.  transition: background-color .5s ease-in-out;
  54. }
  55. #gaia_header #header_left:hover, #gaia_header #header_right:hover {background: var(--hov-color);}
  56. #gaia_header #header_right {float: right;}
  57.  
  58. #gaia_header a img, #gaia_header li.spacer {display: none !important;}
  59. #gaia_header li {margin: 0 5px !important;}
  60.  
  61. #header_left li:nth-of-type(2) a {
  62.  background: url('https://i.imgur.com/5FTB40o.png') 0 2px no-repeat;
  63.  padding-left: 37px;
  64. }
  65.  
  66. #gaia_header a {
  67.  color: #FFFFFF !important;
  68.  font-size: 13px !important;
  69.  letter-spacing: .03em;
  70.  text-transform: uppercase;
  71.  vertical-align: top;
  72. }
  73.  
  74. /* Columns */
  75.  
  76. #columns, #column_1, #column_2 {
  77.  float: none;
  78.  display: block;
  79.  margin: 0;
  80.  position: absolute;
  81. }
  82. #column_3 {display: none;}
  83.  
  84. #columns, #column_1 {
  85.  width: 100%;
  86.  height: 100%;
  87.  top: 0;
  88.  left: 0;
  89. }
  90. #column_1 {pointer-events: none;}
  91.  
  92. #column_2 {
  93.  width: 400px;
  94.  height: 300px;
  95.  top: calc(50% - 150px);
  96.  left: 56px;
  97. }
  98.  
  99. #columns ::-webkit-scrollbar {
  100.  background: #20205420;
  101.  width: 8px;
  102.  border-radius: 4px;
  103. }
  104.  
  105. #columns ::-webkit-scrollbar-thumb {
  106.  background: var(--out-color) content-box;
  107.  border: 1px solid transparent;
  108.  border-radius: 3px;
  109. }
  110.  
  111. /* Panels */
  112.  
  113. .panel, .panel h2 {
  114.  padding: 0;
  115.  margin: 0;
  116.  box-sizing: border-box;
  117. }
  118.  
  119. .panel {
  120.  color: #404040;
  121.  font: 11px/1.6 'Open Sans', sans-serif;
  122.  text-align: justify;
  123.  overflow: hidden;
  124. }
  125. .panel a {color: var(--red-color);}
  126. .panel img {max-width: 100% !important;}
  127.  
  128. #id_about, #id_wishlist, #column_2 .custom_panel {
  129.  background: #FFFFFFD0;
  130.  width: 100%;
  131.  height: 100%;
  132.  padding-right: 10px;
  133.  position: absolute;
  134.  top: -100%;
  135.  left: 0;
  136.  border: 10px solid transparent;
  137.  border-radius: 10px;
  138.  overflow-y: scroll;
  139.  scrollbar-color: var(--out-color) #20205420;
  140.  scrollbar-width: thin;
  141. }
  142. #id_about:hover, #id_wishlist:hover, #column_2 .custom_panel:hover {top: 0;}
  143.  
  144. /* Wish List */
  145.  
  146. #id_wishlist {
  147.  display: grid;
  148.  grid-template-columns: repeat(7, 1fr);
  149.  grid-auto-rows: min-content;
  150.  gap: 10px;
  151. }
  152. .premium_sparkle, .owwner_checkmark {margin: 0;}
  153.  
  154. .premium_sparkle {
  155.  top: 0;
  156.  right: 0;
  157. }
  158.  
  159. .owner_checkmark {
  160.  right: 4px;
  161.  bottom: 3px;
  162. }
  163.  
  164. #id_wishlist .item {
  165.  background: #20205420;
  166.  width: 100%;
  167.  height: 30px;
  168.  text-align: center;
  169.  padding: 5px 0;
  170.  position: relative;
  171.  border-radius: 5px;
  172.  transition: background .5s ease-in-out;
  173. }
  174. #id_wishlist .item:hover {background: var(--red-color);}
  175.  
  176. /* Buttons */
  177.  
  178. #id_comments, #id_store, .media_panel, #column_2 h2, #id_contact ul:not(.buttons) li {
  179.  background-color: var(--out-color) !important;
  180.  width: 36px;
  181.  border-radius: 5px;
  182.  transition: background-color .5s ease-in-out;
  183. }
  184. #id_comments:hover, #id_store:hover, .media_panel:hover , #column_2 .panel:hover h2, #id_contact ul:not(.buttons) li:hover {background-color: var(--hov-color) !important;}
  185. #id_contact, #id_comments, #id_store, .media_panel, #column_2 h2 {position: fixed;}
  186. #id_contact, #id_comments, #id_store {right: 10px;}
  187. #column_2 h2, .media_panel {left: 10px;}
  188.  
  189. #column_2 h2, #id_contact ul:not(.buttons) li, #id_comments, #id_store {
  190.  background: url('https://i.imgur.com/vcNz49l.png') top center / 36px auto;
  191.  height: 36px;
  192.  font-size: 0;
  193. }
  194. #id_comments {background-position-y: -216px}
  195. #id_store {background-position-y: -144px;}
  196.  
  197. #id_contact ul:not(.buttons) li {
  198.  margin-bottom: 10px;
  199.  position: relative;
  200. }
  201. #id_contact ul:not(.buttons) li:nth-of-type(1) {background-position-y: 0;}
  202. #id_contact ul:not(.buttons) li:nth-of-type(2) {background-position-y: -36px;}
  203. #id_contact ul:not(.buttons) li:nth-of-type(3) {background-position-y: -72px;}
  204.  
  205. #id_about h2 {
  206.  background-position-y: -252px;
  207.  top: calc(50% - 110px);
  208. }
  209.  
  210. #id_wishlist h2 {
  211.  background-position-y: -324px;
  212.  top: calc(50% - 64px);
  213. }
  214.  
  215. #column_2 .custom_panel h2 {
  216.  background-position-y: -180px;
  217.  top: calc(50% - 64px + 46px)
  218. }
  219.  
  220. #id_about h2::after, #id_wishlist h2::after, #column_2 .custom_panel h2::after {
  221.  content: '';
  222.  display: none;
  223.  width: 0;
  224.  height: 0;
  225.  position: absolute;
  226.  top: -2px;
  227.  left: 26px;
  228.  border-top: 20px solid transparent;
  229.  border-bottom: 20px solid transparent;
  230.  border-right: 20px solid #FFFFFFD0;
  231. }
  232. #id_about:hover h2::after, #id_wishlist:hover h2::after, #column_2 .custom_panel:hover h2::after {display: block;}
  233.  
  234. /* Contact, Comments, and Store */
  235.  
  236. #id_contact {
  237.  background: none;
  238.  top: calc(50% - 110px);
  239. }
  240. #id_contact h2 {display: none;}
  241.  
  242. #id_comments {top: calc(50% + 28px);}
  243. #id_comments h2 {display: none;}
  244. #id_comments dl {display: none;}
  245. #id_comments p {margin: 0;}
  246.  
  247. #id_store {top: calc(50% + 74px);}
  248. #id_store :not(p):not(a) {display: none;}
  249. #id_store p:nth-last-of-type(n+2) {display: none;}
  250. #id_store p {margin: 0;}
  251.  
  252. #id_contact a, #id_comments a, #id_store a {
  253.  display: block;
  254.  width: 100%;
  255.  height: 100%;
  256.  position: absolute;
  257.  top: 0;
  258.  left: 0;
  259. }
  260.  
  261. #id_comments div a {z-index: 2;}
  262. #id_comments p a {z-index: 1;}
  263.  
  264. /* Media */
  265.  
  266. .media_panel {
  267.  background: url('https://i.imgur.com/gqTTTvw.png') no-repeat -14px 3px / 240px auto, url('https://i.imgur.com/gqTTTvw.png') no-repeat -56px 39px;
  268.  height: 82px !important;
  269.  top: calc(50% + 28px);
  270. }
  271. .media_panel h2 {display: none;}
  272.  
  273. .media_panel iframe {
  274.  width: 300px;
  275.  height: 300px;
  276.  position: absolute;
  277.  top: -15px;
  278.  left: 300px;
  279.  transform-origin: 0 0;
  280.  transform: rotate(90deg);
  281.  opacity: .01;
  282. }
  283.  
  284. .media_panel::after {
  285.  content: '';
  286.  display: block;
  287.  width: 50%;
  288.  height: 50%;
  289.  position: absolute;
  290.  top: -1px;
  291.  left: 25%;
  292.  border-bottom: 2px dotted #FFFFFF;
  293.  pointer-events: none;
  294. }
  295.  
  296. /* Animations */
  297.  
  298. @keyframes clouds {
  299.  from {background-position-x: 0;}
  300.  to {background-position-x: 512px;}
  301. }
  302.  
  303. @keyframes fallingX1 {
  304.  from {background-position-x: 0;}
  305.  to {background-position-x: 40px;}
  306. }
  307.  
  308. @keyframes fallingX2 {
  309.  from {background-position-x: 0;}
  310.  to {background-position-x: 80px;}
  311. }
  312.  
  313. @keyframes fallingX3 {
  314.  from {background-position-x: 0;}
  315.  to {background-position-x: -1200px;}
  316. }
  317.  
  318. @keyframes fallingY {
  319.  from {background-position-y: 0;}
  320.  to {background-position-y: 1200px;}
  321. }
  322.  
  323. @keyframes breathe {
  324.  0% {opacity: 1;}
  325.  50% {opacity: 0;}
  326.  70% {opacity: 0;}
  327.  90% {opacity: 1;}
  328.  100% {opacity: 1;}
  329. }
  330.  
  331. #column_1 * {height: 100% !important;}
  332. #column_1 .clear, #column_1 h2, #column_1 br {display: none;}
  333.  
  334. #column_1 .custom_panel {
  335.  background: url('https://i.imgur.com/dtu16H7.png') 0 0 / 512px 512px #D4F4FF;
  336.  background-blend-mode: color, normal;
  337.  animation: clouds 30s linear infinite;
  338. }
  339.  
  340. #column_1 b, #column_1 i {
  341.  display: block;
  342.  width: 100%;
  343.  position: absolute;
  344.  top: 0;
  345.  left: 0;
  346. }
  347.  
  348. #column_1 b:nth-of-type(1) {background: url('https://i.imgur.com/k373pJe.png') center / cover;}
  349. #column_1 b:nth-of-type(2) {background: url('https://i.imgur.com/GFbqxfO.png') center / cover;}
  350. #column_1 b:nth-of-type(3) {background: url('https://i.imgur.com/hL1wG2e.png') center / cover;}
  351. #column_1 b:nth-of-type(4) {background: url('https://i.imgur.com/cTT7ajP.png') center / cover;}
  352.  
  353. #column_1 b:nth-of-type(5) {
  354.  background: url('https://i.imgur.com/ixwKWJa.png') center / cover;
  355.  animation: breathe 5s linear infinite;
  356. }
  357.  
  358. #column_1 i:nth-of-type(1) {
  359.  background: url('https://i.imgur.com/ETrG7YK.png') 0 0 / 200px 200px;
  360.  filter: blur(.5px);
  361.  opacity: .4;
  362.  animation: fallingX1 5s ease-in-out infinite alternate, fallingY 30s linear infinite;
  363. }
  364.  
  365. #column_1 i:nth-of-type(2) {
  366.  background: url('https://i.imgur.com/JsxDJBy.png') 0 0 / 200px 200px;
  367.  filter: blur(.5px);
  368.  opacity: .6;
  369.  animation: fallingX1 5s ease-in-out infinite alternate-reverse, fallingY 26s linear infinite;
  370. }
  371.  
  372. #column_1 i:nth-of-type(3) {
  373.  background: url('https://i.imgur.com/hiymLjO.png') 0 0 / 300px 300px;
  374.  filter: blur(1px);
  375.  opacity: .8;
  376.  animation: fallingX2 5s ease-in-out infinite alternate, fallingY 22s linear infinite;
  377. }
  378.  
  379. #column_1 i:nth-of-type(4) {
  380.  background: url('https://i.imgur.com/MRo92zN.png') 0 0 / 300px 300px;
  381.  filter: blur(1px);
  382.  opacity: 1;
  383.  animation: fallingX2 5s ease-in-out infinite alternate-reverse, fallingY 18s linear infinite;
  384. }
  385.  
  386. #column_1 i:nth-of-type(5) {
  387.  background: url('https://i.imgur.com/yeYZHj7.png') 0 0 / 400px 400px;
  388.  animation: fallingX3 80s linear infinite, fallingY 14s linear infinite;
  389. }
  390.  
  391. #column_1 i:nth-of-type(6) {
  392.  background: url('https://i.imgur.com/S93KRrp.png') 0 0 / 600px 600px;
  393.  filter: blur(1px);
  394.  opacity: .8;
  395.  animation: fallingX3 80s linear infinite, fallingY 10s linear infinite;
  396. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement