API tools faq
paste
Advertisement
Guest User

Meester Man's MAL Layout 1

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