Advertisement
althindor

Pro for Rimuka

Sep 27th, 2018
385
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 5.56 KB | None | 0 0
  1. /* Code by AlthIndor, Layout by Lady IV */
  2.  
  3. html, body {background: repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0px, rgba(255,255,255,.2) 40px, transparent 40px, transparent 80px), url('https://images2.imgbox.com/24/d9/bsmy5w6a_o.png');}
  4. #columns, #id_contact ul:not(.buttons) li, #id_comments h2 ~ div a, #id_comments h2 ~ p a {background: url('https://images2.imgbox.com/48/ce/w8PIvDQw_o.png');}
  5.  
  6. /* Fonts */
  7.  
  8. @font-face {
  9.  font-family: 'Montserrat Alternates';
  10.  font-style: normal;
  11.  font-weight: 600;
  12.  src: local('Montserrat Alternates SemiBold'), local('MontserratAlternates-SemiBold'), url(https://fonts.gstatic.com/s/montserratalternates/v9/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xNIPFB7xG.woff2) format('woff2'), url(https://fonts.gstatic.com/s/montserratalternates/v9/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xNIPFB7xA.woff) format('woff');
  13. }
  14.  
  15. /* Header */
  16.  
  17. #gaia_header {
  18.  background: #005080 !important;
  19.  border-bottom: 5px solid transparent;
  20.  box-shadow: 0 1px 2px #FFFFF0;
  21. }
  22.  
  23. #gaia_header #header_left, #gaia_header #header_right {
  24.  background: none;
  25.  width: auto !important;
  26.  color: transparent;
  27.  font: 10px/30px 'Montserrat Alternates', sans-serif !important;
  28.  padding: 0 6px !important;
  29.  box-sizing: border-box;
  30. }
  31. #gaia_header #header_right {float: right;}
  32. #gaia_header .spacer {display: none !important;}
  33. #gaia_header li {padding: 0 1px;}
  34.  
  35. #gaia_header #header_left img {
  36.  background: url('https://gaia.hs.llnwd.net/e1/images/gaia_global/gaia_header/br_gaia_logo_header.png') 0 100% no-repeat;
  37.  background-size: auto 200%;
  38.  width: 0;
  39.  height: 18px;
  40.  padding: 0 42px 0 0;
  41. }
  42.  
  43. #gaia_header a, #gaia_header #header_left::after {
  44.  color: #FFFFFF !important;
  45.  font-weight: normal !important;
  46.  text-decoration: none;
  47.  text-transform: uppercase;
  48.  opacity: .8;
  49. }
  50. #gaia_header a:hover {opacity: 1;}
  51.  
  52. #gaia_header #header_left::after {
  53.  content: 'Come to Cinnamon Tea';
  54.  margin-left: 8px;
  55. }
  56.  
  57. /* Columns */
  58.  
  59. #columns, #column_1, #column_2 {
  60.  display: block;
  61.  float: none;
  62.  margin: 0;
  63.  position: absolute;
  64. }
  65. #column_3 {display: none;}
  66.  
  67. #columns {
  68.  background-repeat: no-repeat;
  69.  width: 820px;
  70.  height: 900px;
  71.  top: 40px;
  72.  left: calc(50% - 410px);
  73. }
  74.  
  75. #column_1 {
  76.  width: 100%;
  77.  height: 100%;
  78. }
  79.  
  80. #column_2 {
  81.  width: 1px;
  82.  height: 1px;
  83.  right: 0;
  84.  overflow: visible;
  85. }
  86.  
  87. /* Panels */
  88.  
  89. .panel {
  90.  padding: 0;
  91.  margin: 0;
  92.  position: absolute;
  93.  box-sizing: border-box;
  94. }
  95. .panel h2 {display: none;}
  96. .panel a {color: rebeccapurple;}
  97.  
  98. #id_about, #id_comments, .custom_panel {
  99.  background: #B4BCE4;
  100.  color: #283048;
  101.  font: 11px/1.6em sans-serif;
  102.  text-align: justify;
  103.  border: 10px solid transparent;
  104.  border-radius: 10px;
  105.  box-shadow: 0 0 0 1px #7884DC;
  106. }
  107. #id_about {z-index: 8;}
  108. #id_comments {z-index: 7;}
  109. #id_comments:hover {z-index: 9;}
  110.  
  111. #id_about, #id_comments {
  112.  width: 429px;
  113.  height: 450px;
  114.  top: 432px;
  115.  left: 16px;
  116. }
  117. #id_about img, #id_comments .postcontent img {max-width: 100% !important;}
  118.  
  119. #id_about, #id_comments dl, .custom_panel {
  120.  overflow-x: hidden;
  121.  overflow-y: scroll;
  122. }
  123. #id_about, #id_comments dl {padding-right: 10px;}
  124.  
  125. /* Contact Buttons */
  126.  
  127. #id_contact {
  128.  background: none;
  129.  top: 377px;
  130.  left: 15px;
  131. }
  132. #id_contact, #id_contact a, #id_comments h2 ~ div a, #id_comments h2 ~ p a {font-size: 0;}
  133.  
  134. #id_contact ul:not(.buttons) li, #id_comments h2 ~ div a, #id_comments h2 ~ p a {
  135.  display: block;
  136.  background-position-x: -820px;
  137.  width: 104px;
  138.  height: 46px;
  139.  opacity: 0;
  140. }
  141.  
  142. #id_contact ul:not(.buttons) li {
  143.  float: left;
  144.  margin: 0 5px 0 0;
  145.  position: relative;
  146. }
  147. #id_contact ul:not(.buttons) li:hover, #id_comments:hover a {opacity: 1;}
  148.  
  149. #id_contact ul:not(.buttons) li:nth-of-type(1) {background-position-y: 0;}
  150. #id_contact ul:not(.buttons) li:nth-of-type(2) {background-position-y: -46px;}
  151. #id_contact ul:not(.buttons) li:nth-of-type(3) {background-position-y: -92px;}
  152. #id_comments h2 ~ div a, #id_comments h2 ~ p a {background-position-y: -138px;}
  153.  
  154. #id_contact ul:not(.buttons) li a {
  155.  display: block;
  156.  width: 100%;
  157.  height: 100%;
  158.  position: absolute;
  159. }
  160.  
  161. #id_comments h2 ~ div a, #id_comments h2 ~ p a {
  162.  position: absolute;
  163.  top: -65px;
  164.  left: 316px;
  165. }
  166.  
  167. #id_comments h2 ~ div a {z-index: 9;}
  168. #id_comments h2 ~ p a {z-index: 8;}
  169. #id_comments:hover h2 ~ p a {border-bottom: 10px solid transparent;}
  170.  
  171. /* Comments */
  172.  
  173. #id_comments h2 ~ p {margin: 0;}
  174. #id_comments #alert_container {padding: 0;}
  175. #id_comments #alerts_banner {display: none;}
  176. #id_comments dd:nth-last-of-type(n+2) {margin-bottom: 15px;}
  177.  
  178. #id_comments dl {
  179.  width: 100%;
  180.  height: 100%;
  181.  box-sizing: border-box;
  182. }
  183.  
  184. #id_comments dt {
  185.  padding: 0 0 1px 0;
  186.  margin: 0 0 3px 0;
  187.  border-bottom: 1px dotted #808080;
  188. }
  189.  
  190. #id_comments .date {
  191.  font-family: monospace;
  192.  font-size: 80%;
  193. }
  194.  
  195. #id_comments .dropBox {
  196.  background: #D8B8F8;
  197.  width: 52px;
  198.  height: 62px;
  199.  margin: 5px 8px 0px 0px;
  200.  border: 2px solid #506482;
  201.  box-sizing: border-box;
  202.  overflow: hidden;
  203. }
  204.  
  205. #id_comments .dropBox img {
  206.  width: 120px;
  207.  height: 150px;
  208.  margin: -25px 0 0 -45px;
  209. }
  210.  
  211. /* Gallery */
  212.  
  213. .custom_panel {
  214.  width: 342px;
  215.  height: 435px !important;
  216.  top: 447px;
  217.  right: 16px;
  218. }
  219. .custom_panel br {display: none;}
  220.  
  221. .custom_panel a {
  222.  display: flex;
  223.  flex-flow: column nowrap;
  224.  justify-content: center;
  225.  float: left;
  226.  width: calc(50% - 10px);
  227.  height: 140px;
  228.  border: 2px solid #506482;
  229.  box-sizing: border-box;
  230.  overflow: hidden;
  231. }
  232. .custom_panel a:nth-of-type(odd) {margin-right: 10px;}
  233. .custom_panel a:nth-last-of-type(n+3) {margin-bottom: 10px;}
  234.  
  235. .custom_panel a img {
  236.  object-fit: cover;
  237.  object-position: center;
  238. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement