Shishipastebin

Untitled

May 21st, 2023
81
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.76 KB | None | 0 0
  1. /*
  2. Hitsugi no Chaika by Hahaido
  3. */
  4.  
  5. @\import "https://yuiafterdark.github.io/shared/fixes/classic.css";
  6. @\import "'https://fonts.googleapis.com/css2?family=Philosopher&display=swap";
  7.  
  8. /* Top Menu */
  9.  
  10. #mal\_control_strip {
  11. position: absolute;
  12. display: block;
  13. left: calc(50% - 64px) !important;
  14. top: 435px;
  15. width: 0 !important;
  16. height: 0 !important;
  17. background: none !important;
  18. z-index: 1;
  19. }
  20.  
  21. #mal\_control_strip a { text-decoration: none !important; }
  22.  
  23. #mal\_control_strip td { display: inline !important; }
  24.  
  25. #mal\_control_strip img, #mal\_cs_powered, #mal\_cs_powered img, #mal\_cs_pic, #mal\_cs_otherlinks strong, #mal\_cs_links div:last-of-type a:first-of-type, #search,
  26. #mal\_cs_otherlinks div a[href*="shared"], #mal\_cs_otherlinks div span[title*="Compatibility Score"] { display: none; }
  27.  
  28. #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: none !important; }
  29.  
  30. #mal\_cs_otherlinks div:nth-child(2) { color: transparent !important; }
  31.  
  32. #mal_cs_otherlinks div a[href*="history"], #mal_cs_otherlinks div a[href*="list/"],
  33. #mal_cs_otherlinks div a[href$="/forum/"], #mal_cs_otherlinks div a[href*="export"],
  34. #mal\_cs_links div a[href$="/"] { display: none !important; }
  35.  
  36. #mal\_cs_otherlinks div a:before, #mal\_cs_listinfo div:last-of-type a:before, #mal\_cs_listinfo div:first-of-type a:before,
  37. #mal_cs_links div a[href*="addtolist"]:before, #mal\_cs_links div:last-of-type a:first-of-type:before, #mal\_cs_links div:last-of-type a:last-of-type:before {
  38. pointer-events: none;
  39. opacity: 0;
  40. position: absolute;
  41. display: inline-block;
  42. width: 70px;
  43. margin: 45px 0 0 -24px;
  44. padding: 4px;
  45. line-height: 17px;
  46. font-family: 'Philosopher';
  47. font-size: 14px;
  48. color: #a5f0f6;
  49. text-align: center;
  50. background-color: rgba(87, 190, 198, .5);
  51. box-shadow: 1px 0 0 #a5f0f6, -1px 0 0 #a5f0f6;
  52. transition: all .3s linear;
  53. -webkit-transition: all .3s linear;
  54. z-index: 1;
  55. }
  56.  
  57. #mal\_cs_otherlinks div a:hover:before, #mal\_cs_listinfo div:last-of-type a:hover:before, #mal\_cs_listinfo div:first-of-type a:hover:before,
  58. #mal_cs_links div a[href*="addtolist"]:hover:before, #mal\_cs_links div:last-of-type a:first-of-type:hover:before, #mal\_cs_links div:last-of-type a:last-of-type:hover:before { opacity: 1; margin: 25px 0 0 -24px; }
  59.  
  60. #mal\_cs_otherlinks div a:after, #mal\_cs_listinfo div:last-of-type a:after, #mal\_cs_listinfo div:first-of-type a:after,
  61. #mal_cs_links div a[href*="addtolist"]:after, #mal\_cs_links div:last-of-type a:last-of-type:after {
  62. opacity: 0;
  63. position: absolute;
  64. content: '';
  65. width: 33px;
  66. height: 36px;
  67. background-image: url(https://i.imgur.com/do8KWiI.png) /* top_buttons.png */;
  68. background-repeat: no-repeat;
  69. transition: opacity .3s linear;
  70. -webkit-transition: opacity .3s linear;
  71. }
  72.  
  73. #mal\_cs_otherlinks div a:hover:after, #mal\_cs_listinfo div:last-of-type a:hover:after, #mal\_cs_listinfo div:first-of-type a:hover:after,
  74. #mal_cs_links div a[href*="addtolist"]:hover:after, #mal\_cs_links div:last-of-type a:last-of-type:hover:after { opacity: 1; }
  75.  
  76. #mal\_cs_otherlinks div a, #mal\_cs_listinfo div:last-of-type a, #mal\_cs_listinfo div:first-of-type a,
  77. #mal_cs_links div a[href*="addtolist"], #mal\_cs_links div:last-of-type a:last-of-type {
  78. position: absolute !important;
  79. display: block;
  80. top: 0;
  81. width: 33px;
  82. height: 36px;
  83. font-size: 0 !important;
  84. color: transparent;
  85. background-image: url(https://i.imgur.com/do8KWiI.png) /* top_buttons.png */;
  86. background-repeat: no-repeat;
  87. }
  88.  
  89. /* USERNAME */
  90. #mal\_cs_listinfo div:first-of-type a { background-position: 0 0; }
  91. #mal\_cs_listinfo div:first-of-type a:before { content: 'Profile'; }
  92. #mal\_cs_listinfo div:first-of-type a:after, #mal\_cs_listinfo div:first-of-type a:hover:after { background-position: 0 -36px; }
  93.  
  94. /* ADD */
  95. #mal\_cs_links div a[href*="addtolist"] { margin-left: 33px; background-position: -33px 0; }
  96. #mal\_cs_links div a[href*="addtolist"]:before { content: 'Add'; }
  97. #mal\_cs_links div a[href*="addtolist"]:after, #mal\_cs_links div a[href*="addtolist"]:hover:after { background-position: -33px -36px; }
  98.  
  99. /* MANGALIST */
  100. #mal\_cs_links div:last-of-type a:last-of-type { margin-left: 66px; background-position: -66px 0; }
  101. #mal\_cs_links div:last-of-type a:last-of-type:before { content: 'Manga'; }
  102. #mal\_cs_links div:last-of-type a:last-of-type:after, #mal\_cs_links div:last-of-type a:last-of-type:hover:after { background-position: -66px -36px; }
  103.  
  104. /* LOGOUT */
  105. #mal\_cs_listinfo div:last-of-type a { margin-left: 99px; background-position: -99px 0; }
  106. #mal\_cs_listinfo div:last-of-type a:before { content: 'Logout'; }
  107. #mal\_cs_listinfo div:last-of-type a:after, #mal\_cs_listinfo div:last-of-type a:hover:after { background-position: -99px -36px; }
  108.  
  109. /* LOGIN */
  110. #mal\_cs_otherlinks div a[href*="login"] { margin-left: 16px; background-position: -132px 0; }
  111. #mal\_cs_otherlinks div a[href*="login"]:before { content: 'Login'; }
  112. #mal\_cs_otherlinks div a[href*="login"]:after , #mal\_cs_otherlinks div a[href*="login"]:hover:after { background-position: -132px -36px; }
  113.  
  114. /* REGISTER */
  115. #mal\_cs_otherlinks div a[href*="register"] { margin-left: 49px; background-position: -165px 0; }
  116. #mal\_cs_otherlinks div a[href*="register"]:before { content: 'Register'; }
  117. #mal\_cs_otherlinks div a[href*="register"]:after, #mal\_cs_otherlinks div a[href*="register"]:hover:after { background-position: -165px -36px; }
  118.  
  119. /* FAQ */
  120. #mal\_cs_otherlinks div a[href*="forum"] { margin-left: 82px; background-position: -198px 0;}
  121. #mal\_cs_otherlinks div a[href*="forum"]:before { content: 'Help'; }
  122. #mal\_cs_otherlinks div a[href*="forum"]:after, #mal\_cs_otherlinks div a[href*="forum"]:hover:after { background-position: -198px -36px; }
  123.  
  124. /* Tab Content */
  125.  
  126. td[class^='td']:not(.borderRBL):first-child { width: 56px; padding-left: 6px; }
  127.  
  128. td[class^='td']:not(.borderRBL):last-child { width: 56px; padding-right: 6px; }
  129.  
  130. /* EDIT-MORE */
  131. #list_surround table:nth-of-type(n+4) tbody div small { visibility: hidden; padding: 0 2px; }
  132.  
  133. #list_surround table:nth-of-type(n+4) tbody div small a {
  134. font-size: 14px;
  135. color: #a5f0f6;
  136. text-shadow: none;
  137. text-transform: lowercase;
  138. }
  139.  
  140. #list_surround table:nth-of-type(n+4) tbody:hover small { visibility: visible; }
  141.  
  142. #list_surround table:nth-of-type(n+4) tbody small a:hover { color: #FFFFFF; }
  143.  
  144. /* SORT */
  145. #list_surround table:nth-of-type(3) { width: 220px !important; }
  146.  
  147. .header_cw + table, .header_completed + table, .header_onhold + table,
  148. .header_dropped + table, .header_ptw + table {
  149. position: absolute;
  150. display: block !important;
  151. margin: -49px 0 0 193px;
  152. width: 220px !important;
  153. }
  154.  
  155. .table_header {
  156. position: relative;
  157. display: inline-block;
  158. width: 70px;
  159. white-space: nowrap;
  160. }
  161.  
  162. .table_headerLink {
  163. display: block;
  164. width: 70px;
  165. font-size: 14px;
  166. color: #000000;
  167. font-weight: normal;
  168. text-align: center;
  169. }
  170.  
  171. .table_headerLink:before {
  172. pointer-events: none;
  173. position: absolute;
  174. display: block;
  175. content: '';
  176. margin: 20px 0 0 22px;
  177. width: 25px;
  178. height: 2px;
  179. background-color: transparent;
  180. transition: all .3s linear;
  181. -webkit-transition: all .3s linear;
  182. }
  183.  
  184. .table_headerLink:hover:before { background-color: rgb(0, 0, 0); }
  185.  
  186. .table_headerLink strong { font-weight: normal !important; }
  187.  
  188. .table_header:first-child { display:none; }
  189.  
  190. /* Category Menu */
  191.  
  192. #list_surround > table:first-of-type {
  193. position: absolute !important;
  194. display: block;
  195. margin-left: -164px;
  196. top: -48px;
  197. width: 127px;
  198. height: 616px;
  199. /*background: url(https://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Chaika/-Images-/category_bg.png) no-repeat;*/
  200. z-index: 1;
  201. }
  202.  
  203. /* MENU BUTTONS */
  204. .status_not_selected, .status_selected {
  205. position: absolute !important;
  206. display: block;
  207. left: 0;
  208. width: 136px;
  209. height: 272px;
  210. background-image: url(https://i.imgur.com/EbKUj4A.png) /* category_bg.png */;
  211. background-repeat: no-repeat;
  212. transition: left .3s linear;
  213. -webkit-transition: left .3s linear;
  214. }
  215.  
  216. .status_not_selected a, .status_selected a {
  217. display: block;
  218. width: 136px;
  219. height: 272px;
  220. font-size: 0;272
  221. }
  222.  
  223. .status_not_selected:hover, .status_selected { opacity: 1; }
  224.  
  225. /* Currently watching */
  226. .status_not_selected:first-child { top: 0; background-position: 0 0; }
  227. .status_not_selected:first-child:hover, .status_selected:first-child { left: 8px; top: 0; background-position: -136px 0; }
  228.  
  229. /* Completed */
  230. .status_not_selected:nth-child(2) { top: 180px; background-position: 0 -272px; }
  231. .status_not_selected:nth-child(2):hover, .status_selected:nth-child(2) { left: 8px; top: 180px; background-position: -136px -272px; }
  232.  
  233. /* On hold */
  234. .status_not_selected:nth-child(3) { top: 360px; background-position: 0 -544px; }
  235. .status_not_selected:nth-child(3):hover, .status_selected:nth-child(3) { left: 8px; top: 360px; background-position: -136px -544px; }
  236.  
  237. /* Dropped */
  238. .status_not_selected:nth-child(4) { left: 784px; top: 0; background-position: 0 -816px; }
  239. .status_not_selected:nth-child(4):hover, .status_selected:nth-child(4) { left: 776px; top: 0; background-position: -136px -816px; }
  240.  
  241. /* Planned */
  242. .status_not_selected:nth-child(5) { left: 784px; top: 180px; background-position: 0 -1088px; }
  243. .status_not_selected:nth-child(5):hover, .status_selected:nth-child(5) { left: 776px; top: 180px; background-position: -136px -1088px; }
  244.  
  245. /* All */
  246. .status_not_selected:last-child { left: 784px; top: 360px; background-position: 0 -1360px; }
  247. .status_not_selected:last-child:hover, .status_selected:last-child { left: 776px; top: 360px; background-position: -136px -1360px; }
  248.  
  249. /* Main Style */
  250.  
  251. * { cursor: standart, auto !important; }
  252.  
  253. body {
  254. font-family: 'Philosopher';
  255. font-size: 12px;
  256. background-color: rgb(0, 0, 0);
  257. background-image: url(https://i.imgur.com/DJotgZh.jpg) /* background.jpg */;
  258. background-repeat: no-repeat;
  259. background-position: left top;
  260. background-attachment: fixed;
  261. background-size: cover;
  262. }
  263.  
  264. tr:hover > td[class^='td']:not(.borderRBL):first-child {
  265. background-image: linear-gradient(left, rgba(24, 123, 125, 1) 4%, rgba(255, 255, 255, .7) 5%, rgba(255, 255, 255, .7) 25%, rgba(255, 255, 255, 0) 96%);
  266. background-image: -moz-linear-gradient(left, rgba(24, 123, 125, 1) 4%, rgba(255, 255, 255, .7) 5%, rgba(255, 255, 255, .7) 25%, rgba(255, 255, 255, 0) 96%);
  267. background-image: -webkit-linear-gradient(left, rgba(24, 123, 125, 1) 4%, rgba(255, 255, 255, .7) 5%, rgba(255, 255, 255, .7) 25%, rgba(255, 255, 255, 0) 96%);
  268. }
  269.  
  270. tr:hover > td[class^='td']:not(.borderRBL):last-child {
  271. background-image: linear-gradient(right, rgba(24, 123, 125, 1) 4%, rgba(255, 255, 255, .7) 5%, rgba(255, 255, 255, .7) 25%, rgba(255, 255, 255, 0) 96%);
  272. background-image: -moz-linear-gradient(right, rgba(24, 123, 125, 1) 4%, rgba(255, 255, 255, .7) 5%, rgba(255, 255, 255, .7) 25%, rgba(255, 255, 255, 0) 96%);
  273. background-image: -webkit-linear-gradient(right, rgba(24, 123, 125, 1) 4%, rgba(255, 255, 255, .7) 5%, rgba(255, 255, 255, .7) 25%, rgba(255, 255, 255, 0) 96%);
  274. }
  275.  
  276. .td1:not(.borderRBL), .td2:not(.borderRBL), .td1 a, .td2 a { font-size: 16px; color: #FFFFFF; text-shadow: 0 0 .2em #187b7d, 0 0 .2em #187b7d, 0 0 .2em #187b7d; }
  277.  
  278. .animetitle + small, .borderRBL a { color: #a5f0f6; text-shadow: none; }
  279.  
  280. a { text-decoration: none; }
  281.  
  282. #list_surround:before, #list_surround:after {
  283. pointer-events: none;
  284. position: absolute;
  285. display: block;
  286. content: '';
  287. }
  288.  
  289. #list_surround:before {
  290. left: -28px;
  291. top: -70px;
  292. width: 568px;
  293. height: 100%;
  294. /* Table borders */
  295. background-clip: padding-box;
  296. border-color: transparent;
  297. border-style: solid;
  298. border-width: 70px 40px;
  299. border-image: url(https://i.imgur.com/bu5Ljrh.png) /* frame.png */ 70 40 round;
  300. -moz-border-image: url(https://i.imgur.com/bu5Ljrh.png) /* frame.png */ 70 40 round;
  301. z-index: 2;
  302. }
  303.  
  304. #list_surround:after {
  305. left: -30px;
  306. top: -414px;
  307. width: 655px;
  308. height: 480px;
  309. background: url(https://i.imgur.com/Fvu7ILU.png) /* top_bg.png */ no-repeat;
  310. z-index: 3;
  311. }
  312.  
  313. #list_surround {
  314. position: relative;
  315. width: 592px;
  316. margin: 414px auto 0;
  317. padding: 55px 0 169px;
  318. background-color: rgba(0, 0, 0, .5);
  319. }
  320.  
  321. #list_surround br { display:none; }
  322.  
  323. .td1, .td2 { vertical-align: top; line-height: 20px; }
  324.  
  325. .animetitle + small {
  326. font-size: 14px;
  327. text-transform: lowercase;
  328. }
  329.  
  330. .borderRBL {
  331. padding: 0 5px;
  332. font-size: 12px;
  333. color: #FFFFFF;
  334. box-shadow: 0 -1px 0 #FFFFFF;
  335. }
  336.  
  337. .borderRBL a:hover { color: #FFFFFF; }
  338.  
  339. .borderRBL small { visibility: visible !important; }
  340.  
  341. /* HEADERS */
  342. .header_title {
  343. pointer-events: none;
  344. display: block;
  345. height: 199px;
  346. }
  347.  
  348. /* Headers pics */
  349. .header_cw span, .header_completed span, .header_onhold span, .header_dropped span, .header_ptw span {
  350. position: absolute;
  351. display: inline-block;
  352. width: 592px;
  353. height: 189px;
  354. font-size: 0;
  355. background-image: url(https://i.imgur.com/n8OwAMj.png) /* headers_bg.png */;
  356. background-repeat: no-repeat;
  357. }
  358.  
  359. .header_cw span { background-position: center 0; }
  360.  
  361. .header_completed span { background-position: center -189px; }
  362.  
  363. .header_onhold span { background-position: center -378px; }
  364.  
  365. .header_dropped span { background-position: center -567px; }
  366.  
  367. .header_ptw span { background-position: center -756px; }
  368.  
  369. .category_totals {
  370. position: relative;
  371. display: block;
  372. margin-top: 10px;
  373. padding: 5px;
  374. color: #a5f0f6;
  375. text-align: center;
  376. background-color: rgba(87, 190, 198, .5);
  377. }
  378.  
  379. #grand_totals { display:none; }
  380.  
  381. #copyright:before {
  382. pointer-events: none;
  383. position: absolute;
  384. display: block;
  385. content: '';
  386. margin: -223px 0 0 -5px;
  387. width: 592px;
  388. height: 185px;
  389. background: url(https://i.imgur.com/ioEs855.png) /* bottom_bg.png */ center top no-repeat;
  390. }
  391.  
  392. #copyright {
  393. position: absolute;
  394. margin-top: 235px !important;
  395. width: 582px;
  396. padding: 5px;
  397. color: #FFFFFF;
  398. text-align: center;
  399. z-index: 3;
  400. }
  401.  
  402. #copyright:after { content: 'List designed by Hahaido.'; }
Advertisement
Add Comment
Please, Sign In to add comment