Advertisement
althindor

Pro for Seren Cian

Nov 5th, 2018
399
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 9.63 KB | None | 0 0
  1. /* Code by AlthIndor, Graphics by Visual Light */
  2. /* Star Chart from http://en.hoshifuru.jp/ */
  3.  
  4. html, body {background: url('https://i.imgur.com/wgsKj1R.jpg') center / cover;}
  5. #columns, #column_2 .panel, #id_contact ul:not(.buttons) li, #id_comments h2 + div, .media_panel {background-image: url('https://images2.imgbox.com/c3/f0/rfwIlMZL_o.png');}
  6.  
  7. @keyframes RotateMap {
  8.  from {transform: rotate(0deg);}
  9.  to {transform: rotate(360deg);}
  10. }
  11.  
  12. body::after {
  13.  content: '';
  14.  display: block;
  15.  width: 108%;
  16.  height: 300%;
  17.  background: url('https://images2.imgbox.com/2d/f1/926uu9sa_o.png') no-repeat center / contain;
  18.  position: fixed;
  19.  top: -100%;
  20.  left: -4%;
  21.  animation: RotateMap 3600s linear infinite;
  22.  filter: contrast(150%) saturate(50%);
  23.  z-index: 1;
  24. }
  25.  
  26. /* Fonts */
  27.  
  28. @font-face {
  29.  font-family: 'Parisienne';
  30.  font-style: normal;
  31.  font-weight: 400;
  32.  src: local('Parisienne'), local('Parisienne-Regular'), url(https://fonts.gstatic.com/s/parisienne/v5/E21i_d3kivvAkxhLEVZpQyhwDw.woff2) format('woff2');
  33. }
  34.  
  35. @font-face {
  36.  font-family: 'Open Sans';
  37.  font-style: normal;
  38.  font-weight: 400;
  39.  src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
  40. }
  41.  
  42. @font-face {
  43.  font-family: 'Open Sans ExtraBold';
  44.  font-style: normal;
  45.  font-weight: 800;
  46.  src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN8rsOUuhp.woff2) format('woff2');
  47. }
  48.  
  49. /* Header */
  50.  
  51. #gaia_header, #gaia_header #header_left, #gaia_header #header_right {background: none;}
  52.  
  53. #gaia_header #header_left, #gaia_header #header_right {
  54.  color: transparent;
  55.  font: 10px/28px 'Open Sans ExtraBold', sans-serif !important;
  56.  padding: 0 8px !important;
  57.  box-sizing: border-box;
  58. }
  59. #gaia_header #header_right {float: right;}
  60. #gaia_header .spacer {display: none !important;}
  61.  
  62. #gaia_header #header_left img {
  63.  background: url('https://gaia.hs.llnwd.net/e1/images/gaia_global/gaia_header/br_gaia_logo_header.png') 0 100% no-repeat;
  64.  background-size: auto 200%;
  65.  width: 0;
  66.  height: 16px;
  67.  padding: 0 40px 0 0;
  68. }
  69.  
  70. #gaia_header a {
  71.  color: #FFFFFF !important;
  72.  text-decoration: none;
  73.  text-transform: uppercase;
  74. }
  75.  
  76. /* Columns */
  77.  
  78. #columns, #column_1, #column_2 {
  79.  display: block;
  80.  float: none;
  81.  margin: 0;
  82.  position: absolute;
  83. }
  84. #column_3 {display: none;}
  85.  
  86. #columns, #column_1 {
  87.  width: 654px;
  88.  height: 730px;
  89. }
  90.  
  91. #columns {
  92.  top: calc(50% - 327px);
  93.  left: calc(50% - 327px);
  94.  z-index: 2;
  95. }
  96.  
  97. #column_2 {
  98.  width: 415px;
  99.  height: 280px;
  100.  top: 186px;
  101.  left: 120px;
  102. }
  103.  
  104. #columns ::-webkit-scrollbar {
  105.  background: #2448A8 content-box;
  106.  width: 10px;
  107.  border-left: 3px solid transparent;
  108.  border-right: 3px solid transparent;
  109.  box-shadow: 0 0 2px 0px rgba(0,0,0,.3) inset;
  110. }
  111.  
  112. #columns ::-webkit-scrollbar-thumb {
  113.  background: repeating-linear-gradient(to bottom, rgba(128,128,128,.5) 1px, rgba(128,128,128,.5) 2px, transparent 2px, transparent 3px) #C280FF content-box;
  114.  border-top: 4px solid transparent;
  115.  border-bottom: 4px solid transparent;
  116.  box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset;
  117. }
  118.  
  119. /* Panels */
  120.  
  121. .panel, .panel h2 {
  122.  padding: 0;
  123.  margin: 0;
  124.  box-sizing: border-box;
  125. }
  126. .panel {position: absolute;}
  127. .panel a {color: inherit;}
  128.  
  129. #column_2 .panel {
  130.  background-position: -120px -186px;
  131.  width: 100%;
  132.  height: 0;
  133.  color: #142C64;
  134.  font: 12px/1.6em 'Open Sans', sans-serif;
  135.  text-align: justify;
  136.  top: 0;
  137.  left: 0;
  138.  overflow-x: hidden;
  139.  overflow-y: scroll;
  140. }
  141. #column_2 .panel:hover {height: 100%;}
  142. .custom_panel img, .post img {max-width: 100% !important;}
  143.  
  144. .panel h2 {
  145.  position: fixed;
  146.  text-transform: capitalize;
  147. }
  148. #id_contact h2 {display: none;}
  149.  
  150. #column_2 .panel h2 {
  151.  background: rgba(200,232,200,.8);
  152.  width: 120px;
  153.  height: 120px;
  154.  color: #244CA8;
  155.  font: bold 24px/120px 'Parisienne', cursive;
  156.  text-align: center;
  157.  text-shadow: 0 0 1px #FFFFFF, 0 0 3px #FFFFFF;
  158.  top: calc(50% - 327px + 496px);
  159.  border-radius: 50%;
  160.  box-shadow: 0 0 3px cyan, 0 0 20px 3px #C8E8C8 inset;
  161.  z-index: 9;
  162. }
  163. #column_2 .panel:hover h2 {background: rgba(255,255,255,.85);}
  164.  
  165. .custom_panel h2 {left: calc(50% - 60px);}
  166. #id_comments h2 {left: calc(50% - 60px + 158px);}
  167. #id_wishlist h2 {left: calc(50% - 60px - 158px); text-indent: -4px;}
  168.  
  169. .media_panel h2 {
  170.  background: #FFFFF0;
  171.  color: #000000;
  172.  font: 10px 'Open Sans', sans-serif;
  173.  padding: 4px;
  174.  margin: 3px 0 0 36px;
  175.  border: 1px solid #808080;
  176.  box-shadow: 0 0 0 1px #FFFFFF;
  177.  pointer-events: none;
  178.  z-index: 9;
  179. }
  180.  
  181. /* Transparent Bridge */
  182.  
  183. #column_2 h2::after {
  184.  content: '';
  185.  display: block;
  186.  width: 100%;
  187.  height: 0;
  188.  position: absolute;
  189.  left: 0;
  190.  bottom: 50%;
  191.  z-index: -1;
  192. }
  193. #column_2 .panel:hover h2::after {height: 90px;}
  194.  
  195. /* Contact Buttons and Media */
  196.  
  197. #id_contact, .media_panel {top: 26px;}
  198.  
  199. #id_contact ul:not(.buttons) li, #id_comments h2 + div, .media_panel {
  200.  background-color: rgba(200,232,200,.8);
  201.  background-position: -651px 0;
  202.  width: 32px;
  203.  height: 32px !important;
  204.  border-radius: 50%;
  205.  box-shadow: 0 0 3px #00FFFF;
  206. }
  207. #id_contact ul:not(.buttons) li:hover, #id_comments h2 + div:hover, .media_panel:hover {background-color: #FFFFFF;}
  208.  
  209. #id_contact {
  210.  background: none;
  211.  left: calc(50% - 104px);
  212.  overflow: visible;
  213. }
  214. #id_contact, #id_contact a, #alert_container a {font-size: 0;}
  215.  
  216. #id_contact ul:not(.buttons) li {
  217.  float: left;
  218.  position: relative;
  219. }
  220. #id_contact ul:not(.buttons) li:nth-of-type(n+2) {margin-left: 12px;}
  221. #id_contact ul:not(.buttons) li:nth-of-type(1) {background-position-y: 3px;}
  222. #id_contact ul:not(.buttons) li:nth-of-type(2) {background-position-y: -23px;}
  223. #id_contact ul:not(.buttons) li:nth-of-type(3) {background-position-y: -49px;}
  224.  
  225. #id_contact ul:not(.buttons) a, #alert_container a {
  226.  display: block;
  227.  width: 100%;
  228.  height: 100%;
  229.  position: absolute;
  230. }
  231.  
  232. .media_panel {
  233.  background-position-y: -101px;
  234.  left: calc(50% + 28px);
  235.  overflow: hidden;
  236. }
  237. .media_panel h2 {opacity: 0;}
  238. .media_panel:hover h2 {opacity: 1;}
  239.  
  240. .media_panel object {
  241.  position: absolute;
  242.  left: -9px;
  243.  bottom: -1px;
  244.  opacity: .001;
  245. }
  246.  
  247. #id_comments h2 + div {
  248.  background-position-y: -75px;
  249.  position: fixed;
  250.  top: calc(50% - 327px + 26px);
  251.  left: calc(50% - 327px + 399px);
  252. }
  253.  
  254. /* Details */
  255.  
  256. #id_details {
  257.  background: none;
  258.  width: 120px;
  259.  height: 150px;
  260.  top: 240px;
  261.  left: calc(50% - 60px);
  262.  overflow: hidden;
  263. }
  264. #id_details h2 {display: none;}
  265. #id_details .forum_userstatus {display: none;}
  266.  
  267. /* Comments */
  268.  
  269. #id_comments {padding-right: 10px;}
  270. #id_comments #alerts_banner {display: none;}
  271. #id_comments dd:nth-last-of-type(n+2) {margin-bottom: 15px;}
  272. #id_comments h2 ~ p {display: none;}
  273.  
  274. #id_comments dt {
  275.  padding: 0 0 3px 0;
  276.  margin: 0 0 3px 0;
  277.  border-bottom: 1px dashed #808080;
  278. }
  279.  
  280. #id_comments .date {
  281.  font-family: monospace;
  282.  font-size: 80%;
  283. }
  284.  
  285. #id_comments .dropBox {
  286.  background: #FFFFF0;
  287.  width: 48px;
  288.  height: 48px;
  289.  margin: 4px 10px 0px 0px;
  290.  border: 1px solid #808080;
  291.  border-radius: 3px;
  292.  overflow: hidden;
  293. }
  294.  
  295. #id_comments .dropBox img {
  296.  width: 120px;
  297.  height: 150px;
  298.  margin: -26px 0 0 -46px;
  299.  filter: grayscale(50%);
  300. }
  301. #id_comments .dropBox:hover img {filter: none;}
  302.  
  303. /* Wish List */
  304.  
  305. #id_wishlist .owner_checkmark {
  306.  margin: 0;
  307.  top: calc(50% + 4px);
  308.  left: calc(50% - 16px);
  309. }
  310. .premium_sparkle {display: none;}
  311.  
  312. #id_wishlist {
  313.  display: flex;
  314.  flex-flow: row wrap;
  315.  align-content: flex-start;
  316.  justify-content: space-between;
  317. }
  318.  
  319. #id_wishlist .item {
  320.  background: rgba(36,72,164,.3);
  321.  flex-grow: 1;
  322.  min-width: 30px;
  323.  width: 30px;
  324.  height: 30px;
  325.  text-align: center;
  326.  padding: 5px;
  327.  margin: 0 10px 10px 0;
  328.  position: relative;
  329.  border-radius: 5px;
  330. }
  331. #id_wishlist .item:hover {background: rgba(36,72,164,1);}
  332.  
  333. /* Gallery */
  334.  
  335. .custom_panel div[id*='content'], .custom_panel div[id*='content'] ul {
  336.  width: 100%;
  337.  height: 100% !important;
  338.  margin: 0;
  339.  position: absolute;
  340.  top: 0;
  341.  left: 0;
  342.  box-sizing: border-box;
  343. }
  344. .custom_panel .buttons {z-index: 9;}
  345. .custom_panel br {display: none;}
  346.  
  347. .custom_panel div[id*='content'] ul {
  348.  display: flex;
  349.  flex-flow: row wrap;
  350.  justify-content: flex-start;
  351. }
  352.  
  353. .custom_panel div[id*='content'] li {
  354.  background: rgba(36,72,164,.5);
  355.  flex-grow: 1;
  356.  width: 115px;
  357.  height: 115px;
  358.  margin: 0 10px 10px 0;
  359.  position: relative;
  360.  border: 5px solid transparent;
  361.  border-radius: 3px;
  362.  box-sizing: border-box;
  363.  overflow: hidden;
  364. }
  365.  
  366. .custom_panel .spoiler-wrapper {
  367.  width: 100%;
  368.  height: 110px;
  369.  padding: 0;
  370.  position: absolute;
  371.  border: none;
  372.  box-sizing: border-box;
  373.  overflow: hidden;
  374.  transform: scaleX(1);
  375. }
  376. .custom_panel .spoiler-wrapper span {display: none;}
  377.  
  378. .custom_panel .spoiler-revealed {
  379.  background: rgba(0,0,0,.8);
  380.  position: fixed;
  381.  width: 100%;
  382.  height: 100%;
  383.  top: 0;
  384.  left: 0;
  385.  border: 50px solid transparent;
  386.  z-index: 999;
  387. }
  388.  
  389. .custom_panel .spoiler-title, .custom_panel .spoiler-title button, .custom_panel .spoiler {
  390.  background: none;
  391.  width: 100%;
  392.  height: 100%;
  393.  border: none;
  394. }
  395.  
  396. .custom_panel .spoiler-title {
  397.  position: relative;
  398.  z-index: 2;
  399. }
  400.  
  401. .custom_panel .spoiler {
  402.  display: flex !important;
  403.  flex-flow: column nowrap;
  404.  justify-content: center;
  405.  align-items: center;
  406.  position: absolute;
  407.  top: 0;
  408. }
  409.  
  410. .custom_panel img {
  411.  width: 100%;
  412.  height: 100%;
  413.  border-radius: 2px;
  414.  object-fit: cover;
  415. }
  416. .custom_panel .spoiler-revealed img {object-fit: scale-down;}
  417.  
  418. .custom_panel img[class*='bbcode-swap'] {
  419.  position: fixed;
  420.  z-index: 9;
  421. }
  422. .bbcode-swapping-image {background: url('https://i.imgur.com/Fk5mUXF.png');}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement