API tools faq
paste
Advertisement
ValerioLyndon

SylakentH Bakemonogatari Manga

ValerioLyndon
Oct 10th, 2019
636
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 17.59 KB | None | 0 0
raw download clone embed print report
  1. /* LAYOUT DESIGN MADE BY SYLAKENTH, THANKS TO HAHAIDO!
  2. /
  3. /
  4. /I ABSTAINED FROM IMPORTING LINKS FROM DROPBOX SINCE THE CRASH
  5. /SO MOSTLY ADDED EVERYTHING TO THIS CODE
  6. /
  7. /
  8. /                                   */
  9. @\import "https://malscraper.azurewebsites.net/covers/auto/presets/more";
  10. @\import "https://fonts.googleapis.com/css?family=Viga";
  11.  
  12. * {
  13.     text-decoration: none;
  14. }
  15. body {
  16.     background-attachment: fixed;
  17.     background-clip: border-box;
  18.     background-color: rgba(0, 0, 0, 0);
  19. background-image: url("https://i.imgur.com/OY6BSMD.jpg");
  20.     background-position: 0% 30%;
  21.     background-repeat: no-repeat no-repeat;
  22.     background-size: cover;
  23.     font-family: Viga !important;
  24.   font-variant: small-caps;
  25.  
  26. }
  27. a {
  28.     color: rgba(255,255,255,0.7);
  29.   text-shadow: 0px 0px 0px white;
  30. }
  31.  
  32. a :hover {
  33.   color: yellow !important;
  34.   letter-spacing: 1px;
  35.   transition: all 0.4s ease 0s;
  36. }
  37. body {
  38.     background-color: rgba(0, 0, 0, 0);
  39.     color: #7F7E7E;
  40. }
  41. #list_surround {
  42.     font-size: 14px;
  43.     height: 200px;
  44.     right: 10%;
  45.     line-height: 1;
  46.     margin-left: 550px !important;
  47.     padding-bottom: 10px;
  48.     padding-left: 0;
  49.     padding-right: 0;
  50.     position: relative;
  51.     top: 0;
  52.     width: 650px;
  53. }
  54. .table_header {
  55.     padding-bottom: 4px;
  56. }
  57. .table_header span {
  58.     display: none;
  59. }
  60. .table_header:nth-child(2) {
  61.     text-align: left;
  62. }
  63. [cellspacing="0"] {
  64.     line-height: 17px;
  65. }
  66. .td1, .td2 {
  67.     padding: 4px 0;
  68.     transition: background-color 1s linear 0s;
  69. }
  70. .animetitle + small {
  71.     color: #FFD700 !important;
  72.     font-weight: bold;
  73.     text-shadow: 0 0 2px #000000, 0 0 1px #000000, 0 1px 7px #FFFFFF, 0 0 0 #000000;
  74.     visibility: visible !important;
  75.     letter-spacing:0.5px;
  76. }
  77. #list_surround small {
  78.     visibility: hidden;
  79. }
  80. #list_surround small a:last-of-type {
  81.     display: none !important;
  82. }
  83. td[class^="td"]:nth-child(2) {
  84.     text-align: left;
  85. }
  86.  
  87. #list_surround a[href*="http://myanimelist.net/panel.php?go=edit"], #list_surround a[href*="http://myanimelist.net/editlist.php?type="], #list_surround a[href*="http://myanimelist.net/panel.php?go=add"] {
  88.     margin-right: 10px;
  89.     visibility: visible !important;
  90. }
  91. .table_header, .td1, .td2 {
  92.     background-color: rgba(130, 189, 205, 0.9);
  93.     text-align: center;
  94.     vertical-align: top;
  95. }
  96. tr:hover td[class^="td"] {
  97.     background-color: #7e99ff;
  98. }
  99. tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 {
  100.     color: #304242;
  101.     text-shadow: 0 0 1px #304242;
  102.   /*transition: all 0.4s ease 0s;*/
  103. }
  104.  
  105. .table_headerLink {
  106.     color: #FFFFFF ;
  107.     line-height: 20px;
  108. }
  109. td[class^="td"]:nth-child(3), td[class^="td"]:nth-child(3) a {
  110.     color: #FFFFFF ;
  111. }
  112. td[class^="td"]:nth-child(5), td[class^="td"]:nth-child(5) a {
  113.     color: #FFFFFF ;
  114. }
  115. td[class^="td"]:first-child {
  116.     border-left: 2px solid #FFFFFF !important;
  117. }
  118. td[class^="td"]:last-child {
  119.     border-right: 2px solid #FFFFFF !important;
  120. }
  121. td[class^="td"]:nth-child(5) {
  122.         border-right: 2px solid white !important;
  123. }
  124. .table_header {
  125.     background-color: #82bdcd;
  126.     border-color: #FFFFFF;
  127.     border-style: solid;
  128.     border-width: 2px 0 0;
  129.   letter-spacing: 1px;
  130. }
  131. .table_header:first-child {
  132.     border-left: 2px solid #FFFFFF !important;
  133.   border-radius: 16px 0 0 0;
  134.   border-right: 0px;
  135.   border-bottom: 0px;
  136.   border-top: 2px solid #FFFFFF !important;
  137. }
  138. .table_header:nth-child(5) {
  139.     border-radius: 0 16px 0 0;
  140.     border-right: 2px solid #FFFFFF !important;
  141. }
  142. /*
  143.  
  144. EDIT BUTTON
  145.  
  146.  
  147. */
  148.  
  149. #list_surround table:nth-of-type(n+4) tbody div small {
  150.     letter-spacing: -25px;
  151.     visibility: visible;
  152.   color: transparent !important;
  153.  
  154. }
  155. #list_surround table:nth-of-type(n+4) tbody small a:first-of-type {
  156.     display: inline-block !important;
  157.   opacity: 0;
  158. }
  159. #list_surround table:nth-of-type(n+4) tbody small a:last-of-type {
  160.     display: none !important;
  161. }
  162. #list_surround table:nth-of-type(n+4) tbody:hover small a:first-of-type {
  163.     -moz-border-bottom-colors: none;
  164.     -moz-border-left-colors: none;
  165.     -moz-border-right-colors: none;
  166.     -moz-border-top-colors: none
  167.     color: white ;
  168.     display: inline-block !important;
  169.     position: relative !important;
  170.     text-align: left;
  171.     visibility: visible;
  172.     opacity: 1 !important;
  173.     transition: all 0.8s ease 0s;
  174.   letter-spacing: 1px;
  175.   float: right;
  176.   padding-left: 5px;
  177. }
  178. .td1 div, .td2 div {
  179.     color: transparent !important;
  180.     padding-left: 4px;
  181. }
  182. .td1 div:hover small a, .td2 div:hover small a {
  183.     color:white;
  184.     transition: all 0.8s ease 0s;
  185. }
  186.  
  187. /*
  188.  
  189. */
  190. .category_totals {
  191.     background-color: #2e504f;
  192.     border: 2px solid #FFFFFF;
  193.     border-radius: 0 0 16px 16px;
  194.     color: #FFFFFF;
  195.     padding: 3px 3px 9px;
  196.     text-align: center;
  197. }
  198.  
  199. #grand_totals {
  200.     background-color: #2e504f;
  201.     border-color: #FFFFFF;
  202.     border-radius: 0 0 12px 12px;
  203.     border-style: solid;
  204.     border-width: 2px;
  205.     color: #FFFFFF;
  206.     display: block;
  207.     margin-top: 35px;
  208.     padding: 0 10px 10px;
  209.     position: absolute;
  210.     text-align: center;
  211.     width: calc(100% - 24px);
  212.   padding-top:10px;
  213. }
  214.  
  215. td[class^="td"]:nth-of-type(2) {
  216.     width: 454px !important;
  217. }
  218.  
  219.  
  220. /*
  221.  
  222.  
  223. COVER NECESSITIES
  224.  
  225.  
  226. */
  227. /* COVER AREA
  228. The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS).
  229. Left and top adjust the position it appears on screen.
  230. Control the height and width of the pic with height and width.
  231. Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away.
  232. Increase height and width to make the pics bigger.
  233. Delete border-style: solid; to remove the border.*/
  234.  
  235. :hover + .hide {
  236.     background-color: #304242;
  237.     background-position: 50% 50% !important;
  238.     background-repeat: no-repeat !important;
  239.     background-size: auto auto !important;
  240.     border-color: #FFFFFF;
  241.     border-radius: 16px 16px 0 0;
  242.     border-style: solid;
  243.     border-width: 2px;
  244.     box-shadow: 0 2px 2px #000000;
  245.     display: block !important;
  246.     height: 250px;
  247.     padding: 39px 22px 9px 10px;
  248.     position: fixed;
  249.     top: 200px;
  250.     left: 1070px;
  251.     width: 183px;
  252. }
  253.  
  254.  
  255. /*
  256. MINI REVIEW (HOVER TAG)
  257. Move the area around with the left and top codes.
  258. Adjust the surrounding area of the tags by adjusting the padding.
  259. Control the height and width of the section with the height and width codes.
  260.  
  261. If your tags/mini-reviews aren't hovering correctly or you need help understanding or adjusting the background color code, see the bottom of the original tutorial:
  262. http://myanimelist.net/forum/?topicid=563993
  263. */
  264. td[class^='td']:nth-of-type(6) {
  265. background-color: rgba( 0, 0, 0, 0.7) !important;
  266.     /*border: 2px solid #FFFFFF;*/
  267.     border-radius: 20px 20px 20px 20px;
  268.     display: block !important;
  269.     line-height:15px !important;
  270.     padding: 8px 8px 8px ;
  271.     position: fixed;
  272.     left: 1070px;
  273.     text-shadow: 0 0 0 #000000 !important;
  274.     visibility: hidden;
  275.     width: 199px;
  276.   top: 495px !important;
  277.   transition: all 0s ease 0s;
  278. }
  279.  
  280. /* TAG TEXT COLOR*/
  281. tr:hover td[class^='td']:nth-of-type(6) a {
  282. color: white !important;
  283. }
  284.  
  285.  
  286. /* OTHER SETTINGS */
  287. :hover + .hide , tr:hover td[class^='td']:nth-of-type(6){
  288. visibility: visible;
  289. opacity: 1;
  290. }
  291.  
  292. /* REMOVE TABLE HEADER
  293. Deletes the table header Tags which isn't necessary.
  294. */
  295. .table_header:nth-of-type(6) {
  296. display: none;
  297. }
  298.  
  299. /* REMOVE TAG EDIT BUTTON
  300. Deletes the Tag's edit link which will is inaccessible with this setup, use the edit button by Animetitle to edit your tags.
  301. */
  302. td:nth-of-type(6) small {
  303. display: none;
  304. }
  305.  
  306. /* GOOGLE CHROME FIX
  307. Adjust this amount 50px at a time if your columns are uneven in Chrome.
  308. */
  309. @media screen and (-webkit-min-device-pixel-ratio:0) {
  310. td[class^='td']:nth-of-type(2) {
  311. width: 420px !important;}
  312. }
  313. /*  
  314.  
  315.  
  316. HEADERS
  317.  
  318.  
  319.  
  320. */
  321. [class^="header_"] * {
  322.     background-repeat: no-repeat no-repeat;
  323.     font-size: 0;
  324.     height: 345px;
  325.     line-height: 24px;
  326.     padding-bottom: 50px;
  327.     text-align: right;
  328.     vertical-align: bottom;
  329. }
  330. .header_title {
  331.     border-radius: 4px 4px 4px 4px;
  332.     color: #FFFFFF;
  333.     display: inline-block;
  334.     font-style: italic;
  335.     height: auto;
  336.     padding: 0 8px 0 0;
  337.     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  338. }
  339. .header_cw {
  340.     background-color: transparent;
  341.     background-image: url("http://i.imgur.com/wZ9ZcP1.png");
  342.     background-position: 50% 2px;
  343.     background-repeat: no-repeat no-repeat;
  344.     height: 350px;
  345.     margin-bottom: -45px;
  346. }
  347. .header_completed {
  348.     background-color: transparent;
  349.     background-image: url("http://i.imgur.com/4uF23p0.png");
  350.     background-position: 50% 2px;
  351.     background-repeat: no-repeat no-repeat;
  352.     margin-bottom: -44px;
  353.     z-index: 0;
  354. }
  355. .header_onhold {
  356.     background-color: transparent;
  357.     background-image: url("http://i.imgur.com/5FnKVLP.png");
  358.     background-position: 50% 2px;
  359.     background-repeat: no-repeat no-repeat;
  360.     height: 200px;
  361.     margin-bottom: -44px;
  362. }
  363. .header_dropped {
  364.     background-color: transparent;
  365.     background-image: url("http://i.imgur.com/gGE7rW2.png");
  366.     background-position: 50% 2px;
  367.     background-repeat: no-repeat no-repeat;
  368.     height: 200px;
  369.     margin-bottom: -44px;
  370. }
  371. .header_ptw {
  372.     background-color: transparent;
  373.     background-image: url("http://i.imgur.com/OMSv4xg.png");
  374.     background-position: 50% 2px;
  375.     background-repeat: no-repeat no-repeat;
  376.     height: 200px;
  377.     margin-bottom: -44px;
  378. }
  379. /*
  380.  
  381.  
  382. CATEGORY LINKS
  383.  
  384.  
  385. */
  386. .status_not_selected {
  387.     opacity: 0.75;
  388.     left: -95px !important;
  389.     transition: all 0.4s ease 0s;
  390. }
  391. .status_not_selected:hover {
  392.     color: transparent;
  393.     opacity: 1;
  394.     left: -8px !important;
  395.     transition: all 0.4s ease 0s;
  396. }
  397. .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a {
  398.     color: transparent;
  399.     display: block;
  400.     height: 100px;
  401.     opacity: 0;
  402.     width: 300px;
  403. }
  404. .status_selected {
  405.     display: block;
  406. }
  407. .status_not_selected {
  408.     display: block;
  409. }
  410. #list_surround .status_selected, #list_surround .status_not_selected {
  411.     background-attachment: scroll;
  412.     background-color: transparent;
  413.     background-image: url("http://i.imgur.com/KCVVbEB.png");
  414.     background-position: 0 0;
  415.     background-repeat: no-repeat no-repeat;
  416.     border: 0px solid white !important;
  417.     border-radius: 5px 0 0 0;
  418.     display: block;
  419.     height: 92px;
  420.     padding: 0;
  421.     position: fixed;
  422.     left: -3px;
  423.     top: 160px;
  424.     width: 300px;
  425. }
  426. #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected {
  427.     background-attachment: scroll;
  428.     background-color: transparent;
  429.    background-position: 0% 20%;
  430.     background-repeat: no-repeat no-repeat;
  431.     border-bottom-right-radius: 0;
  432.     border-top-left-radius: 0;
  433.     border-top-right-radius: 0;
  434.     top: 250px;
  435. }
  436. #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected {
  437.     background-attachment: scroll;
  438.     background-color: transparent;
  439.     background-position: 0% 40%;
  440.     top: 339px;
  441. }
  442. #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
  443.     background-attachment: scroll;
  444.     background-color: transparent;
  445.     background-position: 0% 60%;
  446.     background-repeat: repeat repeat;
  447.     top: 429px;
  448. }
  449. #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
  450.     background-attachment: scroll;
  451.     background-color: transparent;
  452.     background-position: 0% 80%;
  453.     top: 517px;
  454. }
  455. #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
  456.     background-attachment: scroll;
  457.     background-color: transparent;
  458.    
  459.     background-position: 0 100%;
  460.     background-repeat: no-repeat no-repeat;
  461.     border-bottom-left-radius: 20px;
  462.     border-bottom-right-radius: 20px;
  463.     top: 605px;
  464.     width: 300px;
  465. }
  466. /*
  467.  
  468. COPYRIGHT
  469.  
  470. */
  471.  
  472. #copyright:before {
  473.     content: "Design by SylakentH, thanks to Hahaido.";
  474.     font-size: 12px;
  475. }
  476. #copyright {
  477.     background-color: #A0373C;
  478.     border: 4px solid #DA6358;
  479.     border-radius: 12px;
  480.     color: #FFFFFF;
  481.     display: block;
  482.     margin-top: -10px !important;
  483.     padding: 2px 14px 4px;
  484.     position: relative;
  485. }
  486. #copyright a {
  487.     color: #FFFFFF;
  488.     font-size: 14px;
  489.     padding-right: 2px;
  490.     text-shadow: 1px 1px #F11C26;
  491. }
  492.  
  493. /* TOP MENU BAR */
  494.  
  495. #mal\_control_strip:before {
  496.     position: absolute;
  497.     display: block;
  498.     content: 'Menu';
  499.     margin-top: 190px;
  500.     left: 15px !important;
  501.     padding: 4px 8px;
  502.     background-color: rgba(130, 189, 205, 1);
  503.     border-radius: 0 0 1em 1em;
  504.   border: 1px solid white;
  505.   width: 80px;
  506.   text-align:center;
  507. }
  508.  
  509. #mal\_control_strip {
  510.     position: fixed !important;
  511.     display: block !important;
  512.     margin-top: -192px !important;
  513.     height: 192px !important;
  514.     width: 128px !important;
  515.   left: 62px !important;
  516.     border-top: none;
  517.     background: url('http://i.imgur.com/9p2gXE5.png') no-repeat center top rgba(130, 189, 205, 1) !important;
  518.     border-radius: 0 0 1em 1em;
  519.     transition: all .5s ease-out;
  520.     -webkit-transition: all .5s ease-out;
  521.     z-index: 10;
  522.   border: 1px solid white;
  523. }
  524.  
  525. #mal\_control_strip:after {
  526.     position: fixed;
  527.     display: block;
  528.     content: '';
  529.     left: 0;
  530.     top: -300px;
  531.     width: 100%;
  532.     height: 300px;
  533.     box-shadow: 0 0 20px rgba(130, 189, 205, 1);
  534. }
  535.  
  536. #mal\_control_strip a { text-decoration: none !important; }
  537.  
  538. #mal\_control_strip a:hover { text-decoration: underline !important; }
  539.  
  540. #mal\_control_strip:hover { margin-top: 0 !important; }
  541.  
  542. #mal\_control_strip, #mal\_control_strip a, #mal\_control_strip td, #mal\_control_strip td div, #mal\_control_strip a {
  543.     font-family: 'Electrolize', sans-serif !important;
  544.     color: #8f2589 !important;
  545.     font-size: 16px !important;
  546. }
  547.  
  548. #mal\_control_strip td {
  549.     display: block !important;
  550.     width: 100px !important;
  551. }
  552.  
  553. #mal\_control_strip img, #mal\_cs_powered, #mal\_cs_powered img, #mal\_cs_pic img, #mal\_cs_otherlinks strong, #search,
  554. #mal\_cs_otherlinks div a[href*="sharedanime"], #mal\_cs_otherlinks div span[title*="Compatibility Score"] { display: none !important; }
  555.  
  556. #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: none !important; }
  557.  
  558. #mal\_cs_otherlinks div:nth-child(2) {  color: transparent !important; }
  559.  
  560. /* Username, Logout */
  561. #mal\_cs_listinfo div { margin: 0 !important; }
  562.  
  563. #mal\_cs_listinfo div a {
  564.     position: relative !important;
  565.     display: block !important;
  566.     top: 68px !important;
  567.     line-height: 18px !important;
  568. }
  569.  
  570. /* Add to List, Home, Anime List, Manga List */
  571. #mal\_cs_links div { margin: 0 !important; }
  572.  
  573. #mal\_cs_links div a {
  574.     position: relative !important;
  575.     display: inline-block !important;
  576.     top: 68px !important;
  577.     line-height: 18px !important;
  578. }
  579.  
  580. #mal\_cs_links div a[href*="addtolist"] { font-weight: 600 !important; }
  581.  
  582. /* History, Forum, Export */
  583. #mal\_cs_otherlinks div a[href*="history"], #mal\_cs_otherlinks div a[href*="forum"], #mal\_cs_otherlinks div a[href*="export"], #mal\_cs_otherlinks div a[href*="mangalist"]  {
  584.     display: none !important;
  585. }
  586.  
  587. /* Log in, Create list, Learn more */
  588. #mal\_cs_otherlinks div { margin: 0 !important; }
  589.  
  590. #mal\_cs_otherlinks div a {
  591.     position: relative !important;
  592.     display: block !important;
  593.     top: 28px !important;
  594.     line-height: 18px !important;
  595. }
  596.  
  597. #mal\_cs_otherlinks div a[href*="login"] { font-weight: 600 !important; }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!