API tools faq
paste
Advertisement
Guest User

Minimal Kissanime MAL List Style CSS V1.0

a guest
Oct 12th, 2016
255
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 11.41 KB | None | 0 0
raw download clone embed print report
  1. /*CHANGELOG:
  2.  
  3. **Version 1.0
  4. Released*/
  5.  
  6. @import 'https://fonts.googleapis.com/css?family=Roboto:400,700';
  7.  
  8. /**GLOBAL AND BACKGROUND**/
  9. html, body {
  10.   /*REMOVE THIS TO USE CUSTOM BACKGROUND THROUGH MAL*/
  11.   background: none !important;
  12.  
  13.   background-color: #212121 !important;
  14.  
  15.   /*LOAD CUSTOM BACKGROUND HERE*/
  16.   /*background-image: url(http://i.imgur.com/ngNMWQK.jpg) !important;
  17.   background-attachment: fixed !important;
  18.   background-size: cover !important;
  19.   background-position: center top !important;*/
  20.  
  21.   font-family: 'Roboto' !important;
  22.   font-size: 12px;
  23. }
  24. a:hover {
  25.   text-decoration: none !important;
  26. }
  27.  
  28. /**ALIGNMENT FOR VERTICAL MONITOR**/
  29. .list-container, .status-menu-container, #footer-block {
  30.   width: 900px;
  31. }
  32. .list-unit, .list-unit .list-status-title, .list-unit .list-stats {
  33.   width: 866px;
  34. }
  35. .header {
  36.   width: 940px;
  37. }
  38. .status-menu-container .status-menu .status-button {
  39.   width: 148px;
  40. }
  41. #fancybox-wrap #fancybox-close {
  42.   right: 30px !important;
  43. }
  44.  
  45. /**ALIGNMENT FOR REGULAR MONITOR**/
  46. /*.list-container, .status-menu-container, #footer-block {
  47.   width: 1058px;
  48. }
  49. .list-unit, .list-unit .list-status-title, .list-unit .list-stats {
  50.   width: 1024px;
  51. }
  52. .header {
  53.   width: 1098px;
  54. }
  55. .status-menu-container .status-menu .status-button {
  56.   width: 174px;
  57. }*/
  58.  
  59. /**GET RID OF UGLY WATCH ON MAL BUTTON**/
  60. .icon-watch {
  61.   display: none !important;
  62. }
  63.  
  64. /**LIST CONTAINERS**/
  65. .list-container {
  66.   background: none !important;
  67.   border: none;
  68. }
  69. .list-block {
  70.   background-color: rgba(17, 17, 17, 0.7);
  71.   padding-top: 12px;
  72.   min-height: 0px;
  73. }
  74. .list-table {
  75.   border: none;
  76. }
  77.  
  78. /**STATUS BAR**/
  79. .status-menu-container {
  80.   background: none;
  81.   z-index: 200;
  82. }
  83. .status-menu-container .status-menu {
  84.   border-spacing: 0px 0;
  85.   border-bottom: 25px solid #42BD41;
  86.   width: 100%;
  87.   display: inline-block;
  88. }
  89. .status-menu-container .status-menu .status-button {
  90.   background-color: #BDBDBD;
  91.   font-size: 12px;
  92.   color: #1c1c1c;
  93.   font-weight: bold;
  94.   height: 27px;
  95.   padding: 0;
  96.   font-size: 12px;
  97.   font-family: 'Roboto';
  98.   margin-right: 1px;
  99.   display: inline-block;
  100.   vertical-align: middle;
  101.   line-height: 27px;
  102. }
  103. .status-menu-container .status-menu .status-button.on {
  104.   background-color: #42BD41;
  105.   color: #ffffff;
  106. }
  107. .status-menu-container .status-menu .status-button:hover {
  108.   background-color: #EEEEEE;
  109.   color: #1c1c1c;
  110. }
  111. .status-menu-container .status-menu .status-button:after {
  112.   display: none;
  113. }
  114.  
  115. /**SEARCH BUTTON**/
  116. .status-menu-container .search-container {
  117.   right: 12px;
  118. }
  119. .status-menu-container .search-container #search-box {
  120.   margin-top: 2px;
  121.   height: 21px;
  122.   background-color: rgba(17, 17, 17, 0.6);
  123.   margin-right: 4px;
  124. }
  125. .status-menu-container .search-container #search-box.open {
  126.   width: 200px;
  127. }
  128. .status-menu-container .search-container #search-box input {
  129.   background: none;
  130.   border: none;
  131.   color: white;
  132.   padding: 0 4px;
  133. }
  134. .status-menu-container .search-container #search-button {
  135.   color: white;
  136.   transform: scale(0.9);
  137.   margin-top: 0;
  138.   text-shadow: 0 0 1px white;
  139. }
  140. .status-menu-container .search-container #search-button:hover {
  141.   color: #dadada;
  142. }
  143.  
  144. /**LIST STATUS TITLE**/
  145. .list-unit .list-status-title {
  146.   background: none;
  147.   border-bottom: 1px solid #dadada;
  148. }
  149. .list-unit .list-status-title .text {
  150.   font-family: 'Roboto';
  151.   color: #dadada;
  152.   font: normal 27px "Tahoma", Arial, Helvetica, sans-serif;
  153.   text-align: left;
  154.   position: absolute;
  155. }
  156. /**MAKE STATUS TITLES UPPERCASE**/
  157. .list-unit .list-status-title .text {
  158.   visibility: hidden;
  159. }
  160. .list-unit .list-status-title .text:before {
  161.   visibility: visible;
  162. }
  163. .anime .list-unit.all_anime .list-status-title .text:before {
  164.   content: 'All Anime';
  165. }
  166. .list-unit.watching .list-status-title .text:before {
  167.   content: 'Currently Watching';
  168. }
  169. ..list-unit.completed .list-status-title .text:before {
  170.   content: 'Completed';
  171. }
  172. .list-unit.onhold .list-status-title .text:before {
  173.   content: 'On Hold';
  174. }
  175. .list-unit.dropped .list-status-title .text:before {
  176.   content: 'Dropped';
  177. }
  178. .list-unit.plantowatch .list-status-title .text:before {
  179.   content: 'Plan to Watch';
  180. }
  181. .manga .list-unit.all_anime .list-status-title .text:before {
  182.   content: 'All Manga';
  183. }
  184. .list-unit.reading .list-status-title .text:before {
  185.   content: 'Currently Reading';
  186. }
  187. .list-unit.plantoread .list-status-title .text:before {
  188.   content: 'Plan to Read';
  189. }
  190.  
  191. /**LIST STATS**/
  192. .list-unit .list-stats {
  193.   background: none;
  194.   color: #dadada;
  195. }
  196. .list-unit .list-status-title .stats a {
  197.   color: #dadada;
  198. }
  199. .list-unit .list-status-title .stats a:hover {
  200.   color: #dadada;
  201. }
  202.  
  203. /**LIST HEADERS**/
  204. .header-title {
  205.   color: #72D572;
  206. }
  207. .list-table .list-table-header .header-title {
  208.   background: none;
  209.   border-bottom: 1px solid #dadada;
  210. }
  211. .list-table .list-table-header .header-title.number {
  212.   color: #888888;
  213.   font-weight: normal;
  214. }
  215. .list-table .list-table-header .header-title .link {
  216.   color: #72D572;
  217. }
  218. .list-table .list-table-header .header-title .link.sort {
  219.   color: #72D572;
  220.   transition-property: none;
  221. }
  222. .list-table .list-table-header .header-title .link.sort:hover {
  223.   color: #A3E9A4;
  224. }
  225.  
  226. /**LIST ITEMS**/
  227. .list-table > tbody:nth-of-type(2n+1) {
  228.   background: none;
  229. }
  230. .list-table > tbody.list-item:nth-of-type(2n+1):hover {
  231.   background-color: #404040;
  232. }
  233. .list-item:hover {
  234.   background-color: #404040;
  235. }
  236. .list-item:last-child {
  237.   border-bottom: #dadada 1px solid;
  238. }
  239. .list-table .more-info {
  240.   border-bottom: none;
  241. }
  242. .list-table .more-info .more-content a {
  243.   color: #72D572;
  244. }
  245. .list-table .more-info .more-content a:hover {
  246.   color: #A3E9A4;
  247. }
  248. .list-table .list-item:last-child .list-table-data .data {
  249.   border-bottom: 1px solid #dadada !important;
  250. }
  251.  
  252. /**LIST DATA**/
  253. .list-table .list-table-data .data {
  254.   border-bottom: none;
  255.   color: #dadada;
  256.   padding: 2px 0;
  257. }
  258. .list-table .list-table-data .data.status {
  259.   border-bottom: 1px solid rgba(17, 17, 17, 0.9);
  260. }
  261. .list-table .list-table-data .data.number {
  262.   color: #888888;
  263. }
  264. .list-table .list-table-data .data.image .image {
  265.   border: none;
  266. }
  267. .list-table .list-table-data .data.title .link, .list-table .list-table-data .data.score .link {
  268.   font-weight: normal;
  269. }
  270. .list-table .list-table-data .data a:not(.edit-disabled) {
  271.   color: #72D572 !important;
  272. }
  273. .list-table .list-table-data .data a:hover:not(.edit-disabled) {
  274.   color: #A3E9A4 !important;
  275. }
  276. .list-table .list-table-data .data a.edit-disabled {
  277.   color: #dadada;
  278. }
  279. .list-table .list-table-data .tags a.edit:not(.edit-disabled), .list-table .list-table-data .tags .edit:hover {
  280.   color: #dadada !important;
  281. }
  282. .list-table .list-item .list-table-data .data.title .add-edit-more {
  283.   margin-right: 0px;
  284. }
  285.  
  286. /**SHOW ADD EDIT MORE ON HOVER**/
  287. .list-table .list-item .list-table-data .data.title .add-edit-more {
  288.   visibility: hidden;
  289. }
  290. .list-table .list-item:hover .list-table-data .data.title .add-edit-more {
  291.   visibility: visible;
  292. }
  293.  
  294. /**SMALLER TAGS SIZE**/
  295. div[class^="tags"] {
  296.   font-size: 10px;
  297.   line-height: 12px;
  298. }
  299.  
  300. /**LOADING SPINNER**/
  301. .list-unit .loading-space {
  302.   color: #dadada;
  303.   padding-bottom: 10px;
  304. }
  305. .list-unit .loading-space #loading-spinner {
  306.   margin-top: 2px;
  307. }
  308.  
  309. /**HEADER**/
  310. .header .header-title {
  311.   background-image: url(http://i.imgur.com/5g7iFal.png);
  312. }
  313. /**FOOTER**/
  314. #footer-block {
  315.   background-color: rgba(17, 17, 17, 0.8);
  316.   margin: auto;
  317.   font-family: 'Roboto';
  318. }
  319.  
  320. /**SMALLER IMAGE SIZE**/
  321. .list-table .list-table-data .data.image .link.sort .image {
  322.   width: 36px;
  323.   height: 51px;
  324. }
  325. /**IMAGE HOVER WITH SMALLER SIZE**/
  326. .list-table .list-table-data .data.number {
  327.   height: 51px;
  328. }
  329. .list-table .list-table-data .data.image .link.sort .image {
  330.   height: 51px;
  331.   width: 36px;
  332.   margin-left: -18px;
  333.   margin-top: -26px;
  334. }
  335. /**IMAGE HOVER WITH NORMAL SIZE**/
  336. /*.list-table .list-table-data .data.number {
  337.   height: 68px;
  338. }
  339. .list-table .list-table-data .data.image .link.sort .image {
  340.   width: 48px;
  341.   height: 68px;
  342.   margin-left: -24px;
  343.   margin-top: -34px;
  344. }*/
  345. /**IMAGE HOVERING GENERAL**/
  346. .list-table .list-table-data .data.image .link.sort .image {
  347.   background-color: rgba(0, 0, 0, 0.7);
  348.   position: absolute;
  349.   z-index: 0;
  350.   transition: all 0.35s;
  351.   transition-timing-function: ease;
  352.   pointer-events: none;
  353. }
  354. .list-table .list-table-data:hover .data.image .link.sort .image {
  355.   position: absolute;
  356.   width: 96px;
  357.   height: 136px;
  358.   z-index: 99;
  359.   margin-left: -66px;
  360.   margin-top: -70px;
  361. }
  362.  
  363. /**FLOAT MENU**/
  364. .list-menu-float {
  365.   /*border: #444 1px solid;*/
  366.   border: none;
  367. }
  368. .list-menu-float .icon-menu {
  369.   background-color: #333 !important;
  370. }
  371. .list-menu-float .icon-menu .text {
  372.   font-size: 1.2em;
  373.   font-family: 'Roboto';
  374. }
  375. .list-menu-float .icon-menu.setting:hover .text .link-style-setting {
  376.   border-top: #444444 1px solid;
  377. }
  378. .list-menu-float .icon-menu.setting:hover .text .link-list-setting, .list-menu-float .icon-menu.setting:hover .text .link-style-setting {
  379.   color: #dadada;
  380. }
  381. .list-menu-float .icon-menu svg.icon {
  382.   fill: #53D752;
  383. }
  384. .list-menu-float .icon-menu:hover svg.icon {
  385.   fill: #A3E9A4;
  386. }
  387. .list-menu-float .icon-menu.setting:hover .text .link-list-setting, .list-menu-float .icon-menu.setting:hover .text .link-style-setting {
  388.   background-color: #333;
  389. }
  390.  
  391. /**HEADER MENU**/
  392. .header .header-menu .list-menu {
  393.   border: #444 1px solid;
  394.   background-color: #222;
  395. }
  396. .header .header-menu .list-menu .icon-menu:hover {
  397.   background: none;
  398. }
  399. .header .header-menu .list-menu .icon-menu .text {
  400.   color: #dadada;
  401. }
  402. .header .header-menu .list-menu .icon-menu svg.icon {
  403.   fill: #dadada;
  404. }
  405. .header .header-menu .list-menu .icon-menu:hover .text {
  406.   color: #A3E9A4;
  407. }
  408. .header .header-menu .list-menu .icon-menu:hover svg.icon {
  409.   fill: #A3E9A4;
  410. }
  411.  
  412. /**FILTER WINDOW**/
  413. #fancybox-overlay {
  414.   background-color: rgb(34, 34, 34) !important;
  415. }
  416. #advanced-options {
  417.   background-color: rgb(17, 17, 17);
  418.   color: #dadada;
  419.   border: none;
  420. }
  421. #advanced-options .advanced-options-header {
  422.   color: #dadada;
  423. }
  424. #advanced-options .sort-widget .widget-header, #advanced-options .filter-widget .widget-header {
  425.   font-family: 'Roboto';
  426. }
  427. #advanced-options .sort-widget input[type="radio"]:checked + label {
  428.   background-color: #53D752;
  429.   border: #53D752 1px solid;
  430. }
  431. #advanced-options .btn-apply, #advanced-options .btn-clear {
  432.   background-color: white;
  433.   transition-property: none;
  434. }
  435. #advanced-options .btn-apply:hover, #advanced-options .btn-clear:hover {
  436.   background-color: #53D752;
  437. }
  438. /**FILTER WINDOW CLOSE X**/
  439. #advanced-options #fancybox-close {
  440.   top: 0px !important;
  441.   right: 0px !important;
  442.   background: none !important;
  443.   border-bottom: 0px solid transparent !important;
  444. }
  445. #advanced-options #fancybox-close:before {
  446.   content: "";
  447.   display: block;
  448.   width: 4px;
  449.   height: 24px;
  450.   background-color: #CCC;
  451.   border-radius: 2px;
  452.   -webkit-transform: rotate(45deg);
  453.   -moz-transform: rotate(45deg);
  454.   transform: rotate(45deg);
  455.   position: absolute;
  456.   top: 4px;
  457.   right: 14px;
  458. }
  459. #advanced-options #fancybox-close:after {
  460.   content: "";
  461.   display: block;
  462.   width: 4px;
  463.   height: 24px;
  464.   background-color: #CCC;
  465.   border-radius: 2px;
  466.   -webkit-transform: rotate(-45deg);
  467.   -moz-transform: rotate(-45deg);
  468.   transform: rotate(-45deg);
  469.   position: absolute;
  470.   top: 4px;
  471.   right: 14px;
  472. }
  473. #advanced-options #fancybox-close:hover:before, #advanced-options #fancybox-close:hover:after {
  474.   background-color: white;
  475. }
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!