API tools faq
paste
Advertisement
daisukiseiya

[Modern] isaychris - minimalist blue grey

daisukiseiya
Apr 16th, 2016
3,028
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 18.50 KB | None | 0 0
raw download clone embed print report
  1. :root {
  2.     --shade1: #607d8b;
  3.     --shade2: #78909c;
  4.     --shade3: #90a4ae;
  5. }
  6. .cover-block::before {
  7.     content: "vZangetsuha" !important;
  8. }
  9. body {
  10.     color: white;
  11.     font-family: Verdana,Arial;
  12.     font-size: 11px;
  13.     margin: 0;
  14.     text-align: center;
  15. }
  16. td {
  17.     line-height: 30px;
  18. }
  19. a {
  20.     color: white !important;
  21.     text-decoration: none;
  22. }
  23. #footer-block {
  24.     background-color: var(--shade1);
  25.     color: #ffffff;
  26.     display: none;
  27.     font-family: Avenir,"lucida grande",tahoma,verdana,arial,sans-serif;
  28.     padding: 15px 0;
  29. }
  30. #copyright {
  31.     color: #9caed9;
  32.     font-size: 12px;
  33.     padding-top: 3px;
  34.     text-align: center;
  35. }
  36. .header a {
  37.     color: #fff;
  38.     font-weight: bold;
  39. }
  40. .header a:hover {
  41.     text-decoration: underline;
  42. }
  43. .header {
  44.     background: var(--shade1) none repeat scroll 0 0 !important;
  45.     box-shadow: 0 3px 6px -2px gray;
  46.     color: #fff;
  47.     display: block;
  48.     height: 65px;
  49.     margin: 0 auto;
  50.     min-width: 950px !important;
  51.     position: relative;
  52.     width: auto;
  53. }
  54. .header .header-title {
  55.     background-image: url("/img/pc/ownlist/logo_mal.png");
  56.     background-position: left top;
  57.     background-repeat: no-repeat;
  58.     background-size: auto 36px;
  59.     display: block;
  60.     height: 36px;
  61.     margin-left: 15px;
  62.     overflow: hidden;
  63.     position: absolute;
  64.     text-indent: -9999px;
  65.     top: 21px;
  66.     width: 240px;
  67. }
  68. .header .header-menu {
  69.     position: absolute;
  70.     right: 4px;
  71.     top: 25px;
  72. }
  73. .header .header-menu.other {
  74.     top: 18px;
  75. }
  76. .header .header-menu .btn-menu {
  77.     display: block;
  78.     font-size: 16px;
  79.     margin-right: 10px;
  80.     text-align: right;
  81. }
  82. .header .header-menu .header-info {
  83.     font-size: 1em;
  84.     margin-right: 15px;
  85.     margin-top: 6px;
  86.     text-align: right;
  87. }
  88. .header .username {
  89.     font-weight: bold;
  90. }
  91. .header .header-menu .list-menu {
  92.     background-color: var(--shade1) !important;
  93.     border: medium none !important;
  94.     border-radius: 5px !important;
  95.     box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  96.     display: none;
  97.     position: absolute;
  98.     right: 5px;
  99.     top: 25px;
  100.     z-index: 1;
  101. }
  102. .header .header-menu .list-menu .icon-menu {
  103.     border-radius: 5px;
  104.     color: white !important;
  105.     display: block;
  106.     font-size: 14px;
  107.     font-weight: bold;
  108.     height: 30px;
  109.     text-decoration: none;
  110.     transition-duration: 0.3s;
  111.     transition-property: all;
  112.     transition-timing-function: ease-in-out;
  113.     width: 150px;
  114. }
  115. .header .header-menu .list-menu .icon-menu:hover {
  116.     background-color: var(--shade2) !important;
  117. }
  118. .header .header-menu .list-menu .icon-menu svg.icon {
  119.     fill: white !important;
  120.     left: 12px;
  121.     position: absolute;
  122.     top: 4px;
  123. }
  124. .header .header-menu .list-menu .icon-menu .text {
  125.     left: 52px;
  126.     position: absolute;
  127.     top: 6px;
  128. }
  129. .list-menu-float {
  130.     border: 1px solid #ebebeb;
  131.     display: block;
  132.     position: fixed;
  133.     top: 20%;
  134.     width: 50px;
  135.     z-index: 2;
  136. }
  137. .list-menu-float .icon-menu {
  138.     background-color: #f6f6f6;
  139.     display: block;
  140.     height: 50px;
  141.     opacity: 1;
  142.     position: relative;
  143.     transition-duration: 0.3s;
  144.     transition-property: all;
  145.     transition-timing-function: ease-in-out;
  146.     width: 50px;
  147. }
  148. .list-menu-float .icon-menu svg.icon {
  149.     fill: #323232;
  150.     position: absolute;
  151. }
  152. .list-menu-float .icon-menu:hover svg.icon {
  153.     fill: #ffffff;
  154.     position: absolute;
  155. }
  156. .list-menu-float .icon-menu.profile {
  157.     background-size: cover;
  158. }
  159. .list-menu-float .icon-menu.quick-add {
  160. }
  161. .list-menu-float .icon-menu.quick-add svg.icon-quick-add {
  162.     left: 13px;
  163.     top: 12px;
  164. }
  165. .list-menu-float .icon-menu.anime-list {
  166. }
  167. .list-menu-float .icon-menu.anime-list svg.icon-anime-list {
  168.     left: 13px;
  169.     top: 12px;
  170. }
  171. .list-menu-float .icon-menu.manga-list {
  172. }
  173. .list-menu-float .icon-menu.manga-list svg.icon-manga-list {
  174.     left: 13px;
  175.     top: 12px;
  176. }
  177. .list-menu-float .icon-menu.history {
  178. }
  179. .list-menu-float .icon-menu.history svg.icon-history {
  180.     left: 13px;
  181.     top: 12px;
  182. }
  183. .list-menu-float .icon-menu.export {
  184. }
  185. .list-menu-float .icon-menu.export svg.icon-export {
  186.     left: 13px;
  187.     top: 12px;
  188. }
  189. .list-menu-float .icon-menu.login {
  190. }
  191. .list-menu-float .icon-menu.login svg.icon-login {
  192.     left: 13px;
  193.     top: 12px;
  194. }
  195. .list-menu-float .icon-menu.logout {
  196. }
  197. .list-menu-float .icon-menu.logout svg.icon-logout {
  198.     left: 13px;
  199.     top: 14px;
  200. }
  201. .list-menu-float .icon-menu.setting {
  202. }
  203. .list-menu-float .icon-menu.setting svg.icon-setting {
  204.     left: 13px;
  205.     top: 13px;
  206. }
  207. .list-menu-float .icon-menu .text {
  208.     color: #ffffff;
  209.     display: inline-block;
  210.     font-family: "Helvetica neue",Helvetica,"lucida grande",tahoma,verdana,arial,sans-serif;
  211.     font-size: 1.4em;
  212.     left: 50px;
  213.     opacity: 0;
  214.     overflow: hidden;
  215.     position: absolute;
  216.     text-align: center;
  217.     top: 14px;
  218.     transition-duration: 0.3s;
  219.     transition-property: all;
  220.     transition-timing-function: ease-in-out;
  221.     vertical-align: middle;
  222.     white-space: nowrap;
  223.     width: 0;
  224. }
  225. .list-menu-float .icon-menu:hover:not(.profile) {
  226.     background-color: var(--shade1) !important;
  227.     width: 145px;
  228. }
  229. .list-menu-float .icon-menu:hover .text {
  230.     opacity: 1;
  231.     width: 94px;
  232. }
  233. .list-menu-float .icon-menu.setting .text {
  234.     height: 100px;
  235.     opacity: 0;
  236.     top: 0;
  237.     transition-duration: 0.3s;
  238.     transition-property: all;
  239.     transition-timing-function: ease-in-out;
  240.     width: 0;
  241. }
  242. .list-menu-float .icon-menu.setting:hover .text {
  243.     height: 100px;
  244.     opacity: 1;
  245.     top: 0;
  246.     width: 114px;
  247. }
  248. .list-menu-float .icon-menu.setting .text .link-list-setting, .list-menu-float .icon-menu.setting .text .link-style-setting {
  249.     display: block;
  250.     opacity: 0;
  251. }
  252. .list-menu-float .icon-menu.setting:hover .text .link-list-setting, .list-menu-float .icon-menu.setting:hover .text .link-style-setting {
  253.     background-color: var(--shade1) !important;
  254.     color: #ffffff;
  255.     display: block;
  256.     height: 50px;
  257.     line-height: 50px;
  258.     opacity: 1;
  259.     position: absolute;
  260.     text-decoration: none;
  261.     width: 110px;
  262. }
  263. .list-menu-float .icon-menu.setting:hover .text .link-list-setting {
  264.     top: 0;
  265. }
  266. .list-menu-float .icon-menu.setting:hover .text .link-style-setting {
  267.     border-top: 1px solid #ebebeb;
  268.     top: 50px;
  269. }
  270. .list-container {
  271.     background-color: rgba(0, 0, 0, 0);
  272.     border: medium none !important;
  273.     border-radius: 25px !important;
  274.     margin-bottom: 0;
  275.     margin-left: auto;
  276.     margin-right: auto;
  277.     margin-top: 25px !important;
  278.     position: relative;
  279.     text-align: left;
  280.     width: 950px;
  281. }
  282. .cover-block {
  283.     display: block;
  284.     margin: 0 auto;
  285.     text-align: center;
  286.     vertical-align: middle;
  287.     width: 950px;
  288. }
  289. .cover-block::before {
  290.     background-color: rgba(0, 0, 0, 0.15) !important;
  291.     content: "vZangetsuha";
  292.     display: block !important;
  293.     font-size: 68px;
  294.     margin-top: 61px !important;
  295.     position: absolute;
  296.     text-shadow: 1px 1px 10px #000000;
  297.     width: 950px !important;
  298. }
  299. .cover-block .image-container {
  300.     display: block;
  301.     margin: auto !important;
  302.     padding: 0 !important;
  303.     width: 950px;
  304. }
  305. .cover-block .image-container.hide {
  306.     display: none;
  307. }
  308. .cover-block .image-container img {
  309.     border-radius: 25px 25px 0 0 !important;
  310.     box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3);
  311.     height: 200px;
  312.     width: 100%;
  313. }
  314. .cover-block .image-container .btn-list-setting {
  315.     display: none;
  316. }
  317. .cover-block .image-container:hover .btn-list-setting {
  318.     border: 1px solid rgba(255, 255, 255, 0);
  319.     color: #ffffff;
  320.     display: block;
  321.     font-family: "Helvetica neue",Helvetica,"lucida grande",tahoma,verdana,arial,sans-serif;
  322.     font-size: 14px;
  323.     padding: 8px;
  324.     position: absolute;
  325.     right: 28px;
  326.     top: 20px;
  327. }
  328. .cover-block .image-container .btn-list-setting:hover {
  329.     background-color: rgba(0, 0, 0, 0.6);
  330.     border: 1px solid #ffffff;
  331.     box-shadow: 0 0 4px #000000;
  332.     color: #ffffff;
  333.     font-size: 14px;
  334.     padding: 8px;
  335.     position: absolute;
  336.     right: 28px;
  337.     text-shadow: 1px 1px 1px #323232;
  338.     top: 20px;
  339. }
  340. .cover-block .image-container .btn-list-setting .fa-camera {
  341.     font-size: 16px;
  342.     text-shadow: 1px 1px 3px #000000;
  343. }
  344. .cover-block .image-container .btn-list-setting .icon-plus-circle {
  345.     background-color: rgba(0, 0, 0, 0.6);
  346.     border-radius: 50%;
  347.     box-shadow: -1px 1px 0 0 #323232;
  348.     font-size: 10px;
  349.     left: 18px;
  350.     position: absolute;
  351.     top: 4px;
  352. }
  353. .cover-block .image-container .btn-list-setting .text {
  354.     display: none;
  355. }
  356. .cover-block .image-container .btn-list-setting:hover .text {
  357.     display: inline-block;
  358.     margin-left: 4px;
  359. }
  360. .status-menu-container {
  361.     background-color: var(--shade1);
  362.     border: medium none !important;
  363.     border-radius: 0 0 25px 25px !important;
  364.     box-shadow: 0 3px 6px -2px gray;
  365.     color: white !important;
  366.     height: 46px;
  367.     margin: auto !important;
  368.     width: 950px;
  369.     z-index: 1;
  370. }
  371. .status-menu-container.fixed {
  372.     margin: auto;
  373.     position: fixed;
  374.     top: 0;
  375.     width: 950px !important;
  376. }
  377. .status-menu-container.fixed + div.list-block {
  378.     margin-top: 62px;
  379. }
  380. .status-menu-container .status-menu {
  381.     border-collapse: separate;
  382.     border-spacing: 40px 0;
  383.     color: white !important;
  384.     display: table;
  385.     margin: 0 auto;
  386.     width: 950px !important;
  387. }
  388. .status-menu-container .status-menu .status-button {
  389.     color: #9b9b9b;
  390.     display: table-cell;
  391.     font-family: "Helvetica neue",Helvetica,"lucida grande",tahoma,verdana,arial,sans-serif;
  392.     font-size: 1.6em;
  393.     margin: 0;
  394.     padding: 12px 0;
  395.     position: relative;
  396.     text-align: center;
  397.     vertical-align: middle;
  398. }
  399. .status-menu-container .status-menu .status-button.on {
  400.     color: #787878;
  401.     font-weight: normal;
  402. }
  403. .status-menu-container .status-menu .status-button::after {
  404.     background-color: white;
  405.     bottom: 0;
  406.     content: "";
  407.     display: block;
  408.     height: 4px;
  409.     left: 0;
  410.     opacity: 0;
  411.     position: absolute;
  412.     transition-duration: 0.3s;
  413.     transition-property: all;
  414.     transition-timing-function: ease-in-out;
  415.     width: 100%;
  416. }
  417. .status-menu-container .status-menu .status-button.on::after, .status-menu .status-button:hover::after {
  418.     opacity: 1;
  419. }
  420. .status-menu-container .search-container {
  421.     display: none !important;
  422.     position: absolute;
  423.     right: 18px;
  424. }
  425. .status-menu-container .search-container #search-button {
  426.     color: #787878;
  427.     display: inline-block;
  428.     font-size: 1.6em;
  429.     height: 22px;
  430.     margin-top: 15px;
  431.     vertical-align: middle;
  432. }
  433. .status-menu-container .search-container #search-box {
  434.     display: inline-block;
  435.     height: 22px;
  436.     margin-top: 13px;
  437.     overflow: hidden;
  438.     transition: width 0.3s ease 0s;
  439.     vertical-align: middle;
  440.     width: 0;
  441. }
  442. .status-menu-container .search-container #search-box.open {
  443.     display: inline-block;
  444.     width: 100px;
  445. }
  446. .status-menu-container .search-container #search-box input {
  447.     box-sizing: border-box;
  448.     height: 100%;
  449.     width: 100%;
  450. }
  451. .list-block {
  452.     margin-top: 16px;
  453.     min-height: 600px;
  454.     padding: 0;
  455. }
  456. .list-unit {
  457.     border-radius: 25px;
  458.     box-shadow: 0 3px 6px -2px gray;
  459.     display: block;
  460.     margin: 0 auto;
  461.     width: 950px;
  462. }
  463. .list-unit::after {
  464.     background: var(--shade1) none repeat scroll 0 0 !important;
  465.     border-radius: 0 0 25px 25px !important;
  466.     border-top: 1px solid white !important;
  467.     content: "MyAnimeList.net is a property of MyAnimeList, LLC. ©2015 All Rights Reserved.";
  468.     display: block !important;
  469.     margin-bottom: 25px;
  470.     padding: 20px !important;
  471.     text-align: center;
  472. }
  473. .list-unit .list-status-title {
  474.     background-color: var(--shade1) !important;
  475.     border-radius: 25px 25px 0 0;
  476.     display: table;
  477.     height: 38px;
  478.     position: relative;
  479.     width: 950px;
  480. }
  481. .list-unit .list-status-title .text {
  482.     color: #fff;
  483.     display: table-cell;
  484.     font-family: "Helvetica neue",Helvetica,"lucida grande",tahoma,verdana,arial,sans-serif;
  485.     font-size: 2em;
  486.     font-weight: normal;
  487.     height: 38px;
  488.     text-align: center;
  489.     vertical-align: middle;
  490.     width: 950px !important;
  491. }
  492. .list-unit .list-status-title .stats {
  493.     height: 38px;
  494.     line-height: 38px;
  495.     position: absolute;
  496.     right: 4px;
  497. }
  498. .list-unit .list-status-title .stats a {
  499.     color: #fff;
  500.     margin-right: 8px;
  501. }
  502. .list-unit .list-status-title .stats a.filterd {
  503.     text-shadow: 0 0 2px #fff;
  504. }
  505. .list-unit .list-stats {
  506.     background-color: var(--shade1) !important;
  507.     color: #fff;
  508.     display: none;
  509.     height: 30px;
  510.     line-height: 30px;
  511.     text-align: center;
  512.     width: 950px !important;
  513. }
  514. .list-table {
  515.     background: var(--shade2) none repeat scroll 0 0 !important;
  516.     border: medium none !important;
  517.     border-collapse: collapse;
  518.     margin: 0 auto;
  519.     width: 100%;
  520. }
  521. .list-table > tbody:nth-of-type(2n+1) {
  522.     background-color: var(--shade3) !important;
  523. }
  524. .list-table .list-table-header .header-title {
  525.     background: var(--shade1) none repeat scroll 0 0 !important;
  526.     display: table-cell;
  527.     height: 36px;
  528.     text-align: center;
  529.     vertical-align: middle;
  530. }
  531. .list-table .list-table-header .header-title:last-child {
  532.     background-image: none;
  533. }
  534. .list-table .list-table-header .header-title.status {
  535.     background-image: none;
  536.     width: 4px;
  537. }
  538. .list-table .list-table-header .header-title.number {
  539.     width: 30px;
  540. }
  541. .list-table .list-table-header .header-title.image {
  542.     width: 66px;
  543. }
  544. .list-table .list-table-header .header-title.title {
  545.     padding-left: 8px;
  546.     text-align: left;
  547. }
  548. .list-table .list-table-header .header-title.score {
  549.     width: 65px;
  550. }
  551. .list-table .list-table-header .header-title.type {
  552.     width: 60px;
  553. }
  554. .list-table .list-table-header .header-title.progress {
  555.     width: 90px;
  556. }
  557. .list-table .list-table-header .header-title.chapters {
  558.     width: 90px;
  559. }
  560. .list-table .list-table-header .header-title.volumes {
  561.     width: 90px;
  562. }
  563. .list-table .list-table-header .header-title.tags {
  564.     width: 120px;
  565. }
  566. .list-table .list-table-header .header-title.rated {
  567.     width: 70px;
  568. }
  569. .list-table .list-table-header .header-title.started {
  570.     width: 110px;
  571. }
  572. .list-table .list-table-header .header-title.finished {
  573.     width: 110px;
  574. }
  575. .list-table .list-table-header .header-title.days {
  576.     width: 45px;
  577. }
  578. .list-table .list-table-header .header-title.storage {
  579.     width: 75px;
  580. }
  581. .list-table .list-table-header .header-title.retail {
  582.     width: 65px;
  583. }
  584. .list-table .list-table-header .header-title.priority {
  585.     width: 70px;
  586. }
  587. .list-table .list-table-header .header-title .link {
  588.     color: #323232;
  589.     font-size: 11px;
  590.     text-decoration: none;
  591. }
  592. .list-table .list-table-header .header-title .link.sort {
  593.     color: #323232;
  594.     display: inline-block;
  595.     position: relative;
  596.     transition-duration: 0.3s;
  597.     transition-property: all;
  598.     transition-timing-function: ease-in-out;
  599.     white-space: nowrap;
  600. }
  601. .list-table .list-table-header .header-title .link.sort:hover {
  602.     text-decoration: underline;
  603. }
  604. .list-table .list-table-header .header-title .link.sort:hover {
  605.     color: #2556c6;
  606. }
  607. .list-table .list-table-header .header-title .sort-icon {
  608.     color: white !important;
  609. }
  610. .list-table .list-table-data .data {
  611.     border: medium none !important;
  612.     color: white !important;
  613.     display: table-cell;
  614.     padding: 4px 0;
  615.     text-align: center;
  616.     vertical-align: middle;
  617. }
  618. .list-table .list-table-data a:hover:not(.edit-disabled) {
  619.     text-decoration: underline;
  620. }
  621. .list-table .list-table-data a.edit-disabled {
  622.     color: black;
  623.     cursor: text;
  624. }
  625. .list-table .list-table-data .tags .edit {
  626.     color: white !important;
  627.     display: block;
  628.     font-family: "Helvetica neue",Helvetica,"lucida grande",tahoma,verdana,arial,sans-serif;
  629.     font-size: 10px;
  630.     text-align: center;
  631.     width: 100%;
  632. }
  633. .list-table .list-table-data .tags .edit:hover {
  634.     color: white !important;
  635. }
  636. .list-table .list-table-data .tags textarea {
  637.     box-sizing: border-box;
  638.     height: 60px;
  639.     width: 100%;
  640. }
  641. .list-table .list-table-data .data.image a {
  642.     display: inline-block;
  643. }
  644. .list-table .list-table-data .data.image .image {
  645.     border: 1px solid #ebebeb;
  646.     border-radius: 9px;
  647.     height: 68px;
  648.     width: 48px;
  649. }
  650. .list-table .list-table-data .data.title {
  651.     padding-left: 8px;
  652.     text-align: left;
  653.     word-wrap: break-word;
  654. }
  655. .list-table .list-table-data .data.title .link {
  656.     font-size: 1.1em;
  657.     font-weight: normal;
  658. }
  659. .list-table .list-table-data .data.title .rewatching, .list-table .list-table-data .data.title .rereading, .list-table .list-table-data .data.title .content-status {
  660.     background: var(--shade1) none repeat scroll 0 0 !important;
  661.     border-radius: 5px;
  662.     color: white;
  663.     font-size: 0.9em;
  664.     margin-left: 10px;
  665.     padding: 5px;
  666. }
  667. .list-table .list-table-data .data.score .link {
  668.     font-size: 1.1em;
  669.     font-weight: normal;
  670. }
  671. .list-table .list-table-data .data.title .add-edit-more {
  672.     float: right;
  673.     font-size: 0.9em;
  674.     margin-right: 10px;
  675. }
  676. .list-table .list-table-data .data.title .more {
  677.     position: relative;
  678. }
  679. .list-table .more-info {
  680.     display: none;
  681. }
  682. .list-table .more-info .more-content {
  683.     padding: 10px;
  684. }
  685. .list-table .list-table-data .data.tags {
  686.     word-wrap: break-word;
  687. }
  688. .list-table .list-table-data .data.status {
  689.     width: 4px;
  690. }
  691. .list-table .list-table-data .data.status .text {
  692.     display: none;
  693. }
  694. .list-table .list-table-data .data.status.reading, .list-table .list-table-data .data.status.watching {
  695.     background-color: #2db039;
  696. }
  697. .list-table .list-table-data .data.status.plantoread, .list-table .list-table-data .data.status.plantowatch {
  698.     background-color: #c3c3c3;
  699. }
  700. .list-table .list-table-data .data.status.completed {
  701.     background-color: #26448f;
  702. }
  703. .list-table .list-table-data .data.status.onhold {
  704.     background-color: #f1c83e;
  705. }
  706. .list-table .list-table-data .data.status.dropped {
  707.     background-color: #a12f31;
  708. }
  709. .list-table .list-table-data .data.title {
  710.     padding-left: 8px;
  711.     text-align: left;
  712. }
  713. .list-unit .loading-space {
  714.     font-size: 20px;
  715.     height: 0;
  716.     margin: 0;
  717.     text-align: center;
  718. }
  719. .add-edit-more {
  720.     visibility: hidden;
  721. }
  722. .list-item:hover .add-edit-more {
  723.     visibility: visible;
  724. }
  725. .data.score .link {
  726.     background: var(--shade1) none repeat scroll 0 0 !important;
  727.     border-radius: 5px;
  728.     display: inline-block;
  729.     line-height: 21px !important;
  730.     width: 29px !important;
  731. }
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!