Shishipastebin

Untitled

May 21st, 2023
52
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.71 KB | None | 0 0
  1. /*
  2. Boku wa Tomodachi ga Sukunai by Hahaido
  3. */
  4.  
  5. @\import "https://yuiafterdark.github.io/shared/fixes/classic.css";
  6. @\import "https://fonts.googleapis.com/css2?family=Codystar&family=Poiret+One&display=swap";
  7.  
  8. /* Tab Content */
  9.  
  10. /* # */
  11. td[class^='td']:first-child { visibility: hidden; width: 34px !important; }
  12.  
  13. /* Score */
  14. td[class^='td'][width="45"] {
  15. position: absolute !important;
  16. display: inline-block;
  17. margin-left: -546px;
  18. width: 24px !important;
  19. text-align: center !important;
  20. background-color: rgba(238, 237, 193, 1);
  21. border-radius: 10em;
  22. }
  23.  
  24. td[class^='td']:nth-child(2) { width: 520px; }
  25.  
  26. td[class^='td']:nth-child(4) { text-align: right !important; }
  27.  
  28. td[class^='td'][width="50"] { width: 70px !important; }
  29.  
  30. tr:hover > .td1, tr:hover > .td2, tr:hover > .td1 a, tr:hover > .td2 a, .table_headerLink:hover { color: #3fa6e1; text-shadow: 0 0 0.2em #3fa6e1, 0 0 0.2em #3fa6e1; }
  31. tr:hover td[class^='td'][width="45"], tr:hover td[class^='td'][width="45"] a { color: #436e5d; text-shadow: none; }
  32.  
  33. #list_surround table tbody:hover td[class^='td']:nth-of-type(3) { color: #436e5d !important; text-shadow: none !important; }
  34.  
  35. #list_surround table:nth-of-type(n+4) tbody:hover .animetitle + small { text-shadow: none !important; }
  36.  
  37. #list_surround table:nth-of-type(n+4) tbody:hover .animetitle span:after { visibility: hidden; }
  38.  
  39. /* EDIT-MORE */
  40. #list_surround table:nth-of-type(n+4) div small { visibility: hidden; }
  41.  
  42. #list_surround table:nth-of-type(n+4) tbody:hover div small a:first-of-type {
  43. visibility: visible;
  44. position: absolute !important;
  45. display: block !important;
  46. font-family: 'Poiret One', cursive !important;
  47. color: #d6000a !important;
  48. line-height: 25px !important;
  49. margin-left: -28px !important;
  50. text-shadow: none;
  51. }
  52.  
  53. #list_surround table:nth-of-type(n+4) div small a:hover {
  54. text-shadow: 0 0 0.2em #d6000a !important;
  55. }
  56.  
  57. #list_surround table:nth-of-type(n+4) div small a:last-of-type { display: none !important; }
  58.  
  59. /* SORT */
  60. #list_surround > table:nth-of-type(n+4) ~ .header_cw + table,
  61. #list_surround > table:nth-of-type(n+4) ~ .header_completed + table,
  62. #list_surround > table:nth-of-type(n+4) ~ .header_onhold + table,
  63. #list_surround > table:nth-of-type(n+4) ~ .header_dropped + table,
  64. #list_surround > table:nth-of-type(n+4) ~ .header_ptw + table {
  65. display: none;
  66. }
  67.  
  68. .header_cw + table, .header_completed + table, .header_onhold + table,
  69. .header_dropped + table, .header_ptw + table {
  70. position: absolute;
  71. margin: -220px 0 0 690px;
  72. width: 100px;
  73. padding: 4px 10px 4px 4px;
  74. background-color: rgba(255, 255, 255, 1);
  75. border: solid 4px #eeedc1;
  76. }
  77.  
  78. .table_header {
  79. position: relative;
  80. display: block;
  81. width: 100px;
  82. text-align: left;
  83. }
  84.  
  85. .table_headerLink {
  86. font-family: 'Codystar', cursive;
  87. color: #436e5d;
  88. font-size: 16px;
  89. font-weight: normal;
  90. white-space: nowrap;
  91. }
  92.  
  93. .table_header span { display: none; }
  94.  
  95. .table_headerLink strong { font-weight: normal !important; }
  96.  
  97. /* Top Menu */
  98.  
  99. #mal\_control_strip:before {
  100. opacity: 1;
  101. position: absolute;
  102. display: block;
  103. content: 'Menu';
  104. margin-top: 192px;
  105. left: 40px;
  106. padding: 4px;
  107. color: #436e5d;
  108. background-color: rgba(238, 237, 193, 1);
  109. border-radius: 0 0 6px 6px;
  110. transition: opacity .5s linear .5s, margin-top 0s linear .5s;
  111. -webkit-transition: opacity .5s linear .5s, margin-top 0s linear .5s;
  112. z-index: -1;
  113. }
  114.  
  115. #mal\_control_strip:hover:before {
  116. opacity: 0;
  117. margin-top: 0;
  118. transition: opacity .5s linear, margin-top 0s linear .5s;
  119. -webkit-transition: opacity .5s linear, margin-top 0s linear .5s;
  120. }
  121.  
  122. #mal\_control_strip:after {
  123. position: absolute;
  124. display: block;
  125. content: '';
  126. top: 0;
  127. left: 0;
  128. height: 64px;
  129. width: 128px;
  130. background: url(https://i.imgur.com/yuKEnkg.png) /* logo.png */ no-repeat;
  131. }
  132.  
  133. #mal\_control_strip {
  134. position: fixed !important;
  135. display: block !important;
  136. left: 0;
  137. top: 0;
  138. margin-top: -192px !important;
  139. height: 192px !important;
  140. width: 128px !important;
  141. background: rgba(238, 237, 193, 1) !important;
  142. border-radius: 0 0 8px;
  143. transition: all .5s linear;
  144. -webkit-transition: all .5s linear;
  145. }
  146.  
  147. #mal\_control_strip:hover { margin-top: 0 !important; }
  148.  
  149. #mal\_control_strip a { text-decoration: none !important; }
  150.  
  151. #mal\_control_strip a:hover, #mal\_cs_otherlinks div a:hover:after { text-decoration: underline !important; }
  152.  
  153. #mal\_control_strip, #mal\_control_strip a, #mal\_control_strip td, #mal\_control_strip td div, #mal\_control_strip a, #mal\_cs_otherlinks div a:after {
  154. font-family: 'Poiret One', cursive !important;
  155. color: #d6000a !important;
  156. font-size: 16px !important;
  157. }
  158.  
  159. #mal\_control_strip table, #mal\_control_strip td {
  160. display: block !important;
  161. width: 128px !important;
  162. }
  163.  
  164. #mal\_control_strip img, #mal\_cs_powered, #mal\_cs_powered img, #mal\_cs_pic img, #mal\_cs_otherlinks strong, #searchBox,
  165. #mal\_cs_otherlinks div a[href*="shared"], #mal\_cs_otherlinks div span[title*="Compatibility Score"],
  166. #mal\_cs_otherlinks div a[href*="register"], #mal\_cs_otherlinks div a[href*="forum"], #mal_cs_otherlinks div a[href*="list/"] { display: none !important; }
  167.  
  168. #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: none !important; }
  169.  
  170. #mal\_cs_otherlinks div:nth-child(2) { color: transparent !important; }
  171.  
  172. /* Username, Logout */
  173. #mal\_cs_listinfo div {
  174. margin: 0 !important;
  175. width: 100px !important;
  176. }
  177.  
  178. #mal\_cs_listinfo div a {
  179. position: relative !important;
  180. display: block !important;
  181. top: 68px !important;
  182. line-height: 18px !important;
  183. }
  184.  
  185. /* Add to List, Home, Anime List, Manga List */
  186. #mal\_cs_links div {
  187. margin: 0 !important;
  188. width: 100px !important;
  189. }
  190.  
  191. #mal\_cs_links div a {
  192. position: relative !important;
  193. display: inline-block !important;
  194. top: 68px !important;
  195. line-height: 18px !important;
  196. }
  197.  
  198. #mal\_cs_links div a[href*="addtolist"] { font-weight: 600 !important; }
  199.  
  200. /* History, Forum, Export */
  201. #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"] { display: none !important; }
  202.  
  203. /* LOGIN */
  204. #mal\_cs_otherlinks div a[href*="login"]:before {
  205. pointer-events: none;
  206. visibility: visible;
  207. position: absolute;
  208. display: block;
  209. content: '';
  210. left: 0;
  211. top: 0;
  212. width: 128px;
  213. height: 128px;
  214. background: url(https://i.imgur.com/3zH9Iki.png) /* logo2.png */ no-repeat;
  215. }
  216.  
  217. #mal\_cs_otherlinks div a[href*="login"] {
  218. visibility: hidden;
  219. position: absolute;
  220. display: block;
  221. left: 0;
  222. top: 64px;
  223. font-size: 0 !important;
  224. }
  225.  
  226. #mal\_cs_otherlinks div a[href*="login"]:after {
  227. visibility: visible;
  228. position: absolute;
  229. display: block;
  230. content: 'Login';
  231. margin: 48px 0 0 25px;
  232. font-size: 20px !important;
  233. transition: all .3s linear;
  234. -webkit-transition: all .3s linear
  235. }
  236.  
  237. #mal\_cs_listinfo div:last-of-type a:before, #mal\_cs_links div a[href$="/"]:before,
  238. #mal\_cs_links div:last-of-type a:first-of-type:before, #mal\_cs_links div:last-of-type a:last-of-type:before {
  239. position: absolute;
  240. display: block;
  241. content: '';
  242. margin: 5px 0 0 -12px;
  243. height: 8px;
  244. width: 8px;
  245. background-color: rgba(67, 110, 93, 1);
  246. border-radius: 10px;
  247. }
  248.  
  249. /* Category Menu */
  250.  
  251. #list_surround table:first-of-type {
  252. position: absolute !important;
  253. margin-top: -18px;
  254. padding-bottom: 11px;
  255. background-color: rgb(255, 255, 255);
  256. }
  257.  
  258. .status_not_selected, .status_selected { position: relative !important; width: 115px !important; padding-top: 4px; border-radius: 0 0 8px 8px; }
  259.  
  260. .status_not_selected a, .status_selected a {
  261. display: inline-block;
  262. font-size: 0;
  263. }
  264.  
  265. .status_not_selected a:hover { box-shadow: inset 0 -4px 0 #436e5d; }
  266.  
  267. .status_not_selected a:after, .status_selected a:after {
  268. display: inline-block;
  269. color: #eeedc1;
  270. line-height: 30px;
  271. font-size: 20px;
  272. padding-bottom: 4px;
  273. font-weight: 600;
  274. text-align: center;
  275. }
  276.  
  277. .status_selected a:after {
  278. font-weight: 400;
  279. color: #436e5d !important;
  280. }
  281.  
  282. .status_selected { background-color: rgba(238, 237, 193, 1); }
  283.  
  284. /* Currently watching */
  285. .status_not_selected:first-child, .status_selected:first-child { border-radius: 0 0 8px 0; }
  286. .status_not_selected a[href*="status=1"]:after, .status_selected a[href*="status=1"]:after { content: 'Watching'; }
  287.  
  288. /* Completed */
  289. .status_not_selected a[href*="status=2"]:after, .status_selected a[href*="status=2"]:after { content: 'Completed'; }
  290.  
  291. /* On hold */
  292. .status_not_selected a[href*="status=3"]:after, .status_selected a[href*="status=3"]:after { content: 'On Hold'; }
  293.  
  294. /* Dropped */
  295. .status_not_selected a[href*="status=4"]:after, .status_selected a[href*="status=4"]:after { content: 'Dropped'; }
  296.  
  297. /* Planned */
  298. .status_not_selected a[href*="status=6"]:after, .status_selected a[href*="status=6"]:after { content: 'Planned'; }
  299.  
  300. /* All */
  301. .status_not_selected:last-child, .status_selected:last-child { border-radius: 0 0 0 8px; }
  302. .status_not_selected a[href*="status=7"]:after, .status_selected a[href*="status=7"]:after { content: 'All'; }
  303.  
  304. /* Main Style */
  305.  
  306. /* Custom cursor */
  307. * { cursor: url(https://i.imgur.com/6kpfmHf.png) /* cursor.png */, auto; }
  308.  
  309. /* ~Add~ form */
  310. #fancybox-wrap { position: fixed !important; }
  311.  
  312. /* Disabling default form outer area effects */
  313. div#fancy-bg-n, div#fancy-bg-ne, div#fancy-bg-e, div#fancy-bg-se, div#fancy-bg-s, div#fancy-bg-sw, div#fancy-bg-w, div#fancy-bg-nw { background: none !important; }
  314.  
  315. /* Custom form outer area effects */
  316. #fancybox-outer {
  317. box-shadow: 0 0 20px rgba(220, 209, 207, 1);
  318. }
  319.  
  320. /* Form background color*/
  321. #fancybox-frame { background-color: rgba(238, 237, 193, 1) !important; }
  322.  
  323. /* Overlay effect when form is showed */
  324. #fancybox-overlay {
  325. opacity: .5 !important;
  326. background-color: rgba(220, 209, 207, 1) !important;
  327. }
  328.  
  329. /* ~Close~ form button */
  330. #fancybox-close {
  331. height: 48px !important;
  332. width: 48px !important;
  333. background: url(https://i.imgur.com/TzWyoer.png) /* close.png */ no-repeat !important;
  334. }
  335. /* ~Add~ form */
  336.  
  337. body {
  338. font-family: 'Poiret One', cursive;
  339. font-size: 12px;
  340. color: #436e5d;
  341. background-color: rgba(255, 255, 255, 1);
  342. }
  343.  
  344. a { text-decoration: none; }
  345.  
  346. #list_surround {
  347. position: relative;
  348. left: 40%;
  349. width: 690px;
  350. margin-top: 128px;
  351. background-color: rgba(255, 255, 255, 1);
  352. }
  353.  
  354. #list_surround:after {
  355. pointer-events: none;
  356. position: absolute;
  357. display: block;
  358. content: '';
  359. left: -4px;
  360. top: -4px;
  361. width: 690px;
  362. height: 100%;
  363. border: solid 4px #eeedc1;
  364. box-shadow: 0 0 20px #dcd1cf;
  365. z-index: 1;
  366. }
  367.  
  368. .animetitle span {
  369. display: block;
  370. min-width: 0;
  371. max-width: 464px;
  372. padding: 2px 0;
  373. font-size: 20px;
  374. white-space: nowrap;
  375. text-overflow: ellipsis;
  376. overflow: hidden;
  377. }
  378.  
  379. .animetitle + small {
  380. position: absolute;
  381. display: inline-block;
  382. right: 694px;
  383. margin-top: -4px;
  384. padding: 4px;
  385. font-family: 'Poiret One', cursive;
  386. color: #d6000a !important;
  387. font-size: 12px !important;
  388. background-color: rgba(238, 237, 193, 1);
  389. }
  390.  
  391. .td1, .td2 {
  392. line-height: 24px !important;
  393. font-family: 'Codystar', cursive;
  394. font-size: 16px;
  395. background-color: rgba(255, 255, 255, 1);
  396. }
  397.  
  398. .td1 a, .td2 a { color: #436e5d; }
  399.  
  400. /* HEADERS */
  401. .header_title {
  402. display: block;
  403. height: 220px;
  404. }
  405.  
  406. /* Headers pics */
  407. .header_cw span, .header_completed span, .header_onhold span, .header_dropped span, .header_ptw span {
  408. position: absolute;
  409. display: inline-block;
  410. width: 690px;
  411. height: 200px;
  412. font-size: 0;
  413. background-image: url(https://i.imgur.com/oIiM8jZ.png) /* headers_bg.png */;
  414. background-repeat: no-repeat;
  415. }
  416.  
  417. .header_cw span { background-position: center 0; }
  418.  
  419. .header_completed span { background-position: center -200px; }
  420.  
  421. .header_onhold span { background-position: center -400px; }
  422.  
  423. .header_dropped span { background-position: center -600px; }
  424.  
  425. .header_ptw span { background-position: center -800px; }
  426.  
  427. .category_totals {
  428. padding: 4px 6px 8px;
  429. line-height: 18px;
  430. font-size: 14px;
  431. color: #eeedc1;
  432. font-weight: 900;
  433. text-align: center;
  434. background-color: rgba(255, 255, 255, 1);
  435. }
  436.  
  437.  
  438. #grand_totals { display: none; }
  439.  
  440. /* BACKGROUNDS */
  441. #copyright:before {
  442. pointer-events: none;
  443. position: fixed;
  444. display: inline-block;
  445. content: '';
  446. left: 0;
  447. top: 0;
  448. width: 100%;
  449. height: 100%;
  450. background-repeat: no-repeat;
  451. background-position: center top;
  452. background-size: cover;
  453. z-index: -2;
  454. }
  455.  
  456. .header_cw ~ #copyright:before { background-image: url(https://cdn.imgchest.com/files/j7kzcaxljg7.jpg); }
  457. .header_completed ~ #copyright:before { background-image: url(https://cdn.imgchest.com/files/l7lxcpxbql7.jpg); }
  458. .header_onhold ~ #copyright:before { background-image: url(https://cdn.imgchest.com/files/pyq9c3vqw64.jpg); }
  459. .header_dropped ~ #copyright:before { background-image: url(https://cdn.imgchest.com/files/84jdcv6pl94.jpg); }
  460. .header_ptw ~ #copyright:before { background-image: url(https://cdn.imgchest.com/files/myd5cem28r4.jpg); }
  461. #grand_totals ~ #copyright:before { background-image: url(https://cdn.imgchest.com/files/my2pck5bgz7.jpg); }
  462.  
  463. #copyright {
  464. position: relative !important;
  465. margin-top: -20px !important;
  466. padding: 20px 2px 2px;
  467. font-size: 14px;
  468. color: #436e5d;
  469. text-align: center !important;
  470. background: linear-gradient(bottom, rgba(238, 237, 193, 1) 35%, rgba(255, 255, 255, 0) 90%);
  471. background: -moz-linear-gradient(bottom, rgba(238, 237, 193, 1) 35%, rgba(255, 255, 255, 0) 90%);
  472. background: -webkit-linear-gradient(bottom, rgba(238, 237, 193, 1) 35%, rgba(255, 255, 255, 0) 90%);
  473. }
  474.  
  475. #copyright a { color: #d6000a; }
  476.  
  477. #copyright a:hover { text-shadow: #d6000a 0.1em 0.1em 0.2em; }
  478.  
  479. #copyright:after { display: block; content: 'List designed by Hahaido.'; }
  480.  
  481. /*@-moz-document url-prefix() {
  482. .td1, .td2 { line-height: 14px; padding: 4px 0; }
  483. }*/
Add Comment
Please, Sign In to add comment