API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Feb 25th, 2017
3,067
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 120.54 KB | None | 0 0
raw download clone embed print report
  1. /*
  2.  * Shikimori.org – CSS Theme
  3.  * Author: grin3671
  4.  * Some changes: temu
  5. */
  6.  
  7. body { background-image:
  8.   url(http://i.imgur.com/IniQYdH.jpg) /*site background*/
  9. }
  10. .p-profiles .profile-head .c-brief:before {
  11.   background-image: url(http://pp.vk.me/c631729/v631729648/333e0/O4ZItIYwTl0.jpg) /*profile header*/
  12. }
  13.  
  14. :root {
  15.   --main-col:  #284dcc; /* 3 colors */
  16.   --main-col2: #0c267f;
  17.   --main-col3: #0f1d4c;
  18.   --link:      #284dcc; /*link*/
  19.   --link-hov:  #284dcc; /*link if hovers*/
  20.   --link-act:  #284dcc; /*link if pressed*/
  21.   --text:      #ddd;
  22.   --text-sec:  #999;
  23.   --bg:        #111;
  24.   --bg2:       #000;
  25. }
  26.  
  27. ::-moz-selection {
  28.   background: var(--main-col);
  29.   color: #FFFFFF
  30. }
  31. ::selection {
  32.   background: var(--main-col);
  33.   color: #FFFFFF
  34. }
  35.  
  36.  
  37. /* Кнопка сохранения стиля всегда на виду, спасибо @morr! */
  38. #submit_style {
  39.   position: fixed;
  40.   bottom: 0;
  41.   right: 40%;
  42.   margin: 40px;
  43.   z-index: 1000;
  44. }
  45.  
  46.  
  47.  
  48. /* FONT COLLECTION */
  49. /* NOTE: Если вы знаете как можно сократить этот код или использовать меньшее количество шрифтов при том же результате - напишите мне. */
  50.  
  51. /* Русские символы (cyrillic - 400) */
  52. @font-face {
  53.   font-family: 'Roboto';
  54.   font-style: normal;
  55.   font-weight: 400;
  56.   src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/mErvLBYg_cXG3rLvUsKT_fesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  57.   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  58. }
  59.  
  60. /* Английские символы (latin - 400) */
  61. @font-face {
  62.   font-family: 'Roboto';
  63.   font-style: normal;
  64.   font-weight: 400;
  65.   src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2');
  66.   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
  67. }
  68.  
  69. /* Русские символы (cyrillic - 500) */
  70. @font-face {
  71.   font-family: 'Roboto';
  72.   font-style: normal;
  73.   font-weight: 500;
  74.   src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v15/oHi30kwQWvpCWqAhzHcCSBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  75.   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  76. }
  77.  
  78. /* Английские символы (latin - 500) */
  79. @font-face {
  80.   font-family: 'Roboto';
  81.   font-style: normal;
  82.   font-weight: 500;
  83.   src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
  84.   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
  85. }
  86.  
  87. *  {
  88.   font-family: 'Consolas', 'Roboto', 'Noto', 'Arial', sans-serif !important;
  89. }
  90.  
  91. b,
  92. strong,
  93. .b-add_to_list .trigger,
  94. .b-add_to_list .option,
  95. .b-bb_codes-examples .name,
  96. .b-catalog_entry-tooltip .inner a.name,
  97. .b-catalog_entry-tooltip .inner .line .key,
  98. .b-catalog_entry-tooltip .inner .additional-images .link .title,
  99. .b-catalog_entry .cover .misc span.episode .number,
  100. .b-catalog_entry .cover .title,
  101. .b-club .name,
  102. .b-db_entry-note .name-container .name,
  103. .b-dialog>.inner header .name-date a.name,
  104. .b-entry-info .line .value,
  105. .b-link_button,
  106. .b-message>.inner header .name-date a.name,
  107. .b-table th,
  108. .b-user.detailed .info .image-name .name,
  109. .b-video_variant .episode-num,
  110. .b-video .name,
  111. .b-video .marker,
  112. .bar.horizontal .line .x_label,
  113. .contests .contest .title,
  114. .mischeadline,
  115. .l-menu .sticky-topics .topic .title,
  116. .l-menu .contests .contest .title,
  117. .l-menu .calendar .entry .title,
  118. .l-menu .reviews .entry .title,
  119. .l-menu .clubs .entry .title,
  120. .l-footer .copyright,
  121. .l-footer .links,
  122. .link-with-input .link,
  123. .p-anime_videos-index .c-anime_video_episodes .title,
  124. .p-anime_videos-index .c-videos .title,
  125. .p-contests .results .cc-result .c-rounds .label,
  126. .p-dashboard .l-menu .ongoing .title,
  127. .p-dashboard .l-menu .season .title,
  128. .p-dashboards .user_list .list-type>.title,
  129. .p-dashboards .user_list .history>.title,
  130. .p-dashboards-show .c-content .options .option,
  131. .p-profiles .profile-head .c-history .entry .title,
  132. .p-profiles .profile-head .c-info .c-lists-info .b-stats_bar .title,
  133. .p-profiles .profile-head .c-info .c-lists-info .b-stats_bar .compatibility .rate,
  134. .p-profiles-show .profile-content .activity .title,
  135. .p-topics-create .b-shiki_editor .title,
  136. .p-topics-edit .b-shiki_editor .title,
  137. .p-topics-new .b-shiki_editor .title,
  138. .p-topics-new .topic-type .type-name,
  139. .p-topics-update .b-shiki_editor .title,
  140. .p-user_rates-index .list-groups .summary .stat-value {
  141.   font-weight: 500 !important;
  142. }
  143.  
  144. @media screen and (min-width: 1025px) {
  145.   .b-entry-info .line .value {
  146.     font-weight: 400 !important;
  147.   }
  148. }
  149. /* END of FONT COLLECTION */
  150.  
  151.  
  152.  
  153. /* MAIN BLOCKS */
  154. html {
  155.   height: 100%;
  156. }
  157. body {
  158.   position: relative;
  159.   min-height: 100%;
  160.   background-color: var(--bg) !important;
  161.   color: var(--text);
  162.   font-size: 16px;
  163.   font-weight: 400;
  164.   line-height: 20px;
  165.   overflow-x: hidden;
  166. }
  167. .l-page {
  168.   position: static;
  169.   padding-top: 72px;
  170.   padding-right: 1rem;
  171.   padding-bottom: 4.5rem;
  172.   padding-left: 1rem;
  173.   background-color: inherit;
  174.   background-color: rgba(25,25,25,.95);
  175. }
  176. @media only screen and (max-width: 1025px) {
  177.   body {
  178.     background-image: none;
  179.   }
  180. }
  181. @media only screen and (min-width: 1025px) {
  182.   body {
  183.     /* Изображения грузятся только на лептопах и десктопах */
  184.     background-color: var(--bg) !important;
  185.     background-attachment: fixed;
  186.     background-position: 0 center;
  187.     background-repeat: no-repeat;
  188.     background-size: cover;
  189.   }
  190.   .l-page {
  191.     outline: none;
  192.   }
  193. }
  194. .l-footer {
  195.   position: absolute;
  196.   right: 0;
  197.   bottom: 0;
  198.   left: 0;
  199.   width: 100%;
  200.   max-width: 1200px;
  201.   padding: 0 1rem;
  202.   margin: auto;
  203. }
  204. .l-footer:before {
  205.   content: 'Theme by Karatyshka';
  206.   display: block;
  207.   float: left;
  208.   position: static;
  209.   left: auto;
  210.   bottom: auto;
  211.   width: auto;
  212.   height: auto;
  213.   background: none;
  214.   color: var(--text-sec);
  215.   font-size: 11px;
  216.   font-weight: 500;
  217. }
  218. .l-footer .links {
  219.   padding: 4px 0;
  220.   font: inherit;
  221.   font-size: 12px;
  222.   line-height: 16px;
  223.   text-align: center;
  224. }
  225. .l-footer .links a {
  226.  color: var(--text-sec);
  227. }
  228. .l-footer .links a:last-child {
  229.   margin: 0;
  230. }
  231. /* END of MAIN BLOCKS */
  232.  
  233.  
  234. /* COLOR SETTINGS */
  235.  
  236. /* LINK COLOR */
  237. a,
  238. .b-spoiler label,
  239. .b-spoiler .content .before,
  240. .b-spoiler .content .after,
  241. .b-js-link,
  242. .subheadline .misc-link {
  243.   color: var(--link) !important;
  244. }
  245. a:hover,
  246. .b-spoiler label:hover,
  247. .b-spoiler .content:hover .before,
  248. .b-spoiler .content:hover .after,
  249. .b-js-link:hover,
  250. .subheadline .misc-link:hover {
  251.   color: var(--link-hov) !important;
  252. }
  253. a:active,
  254. .b-spoiler label:active,
  255. .b-spoiler .content:active .before,
  256. .b-spoiler .content:active .after,
  257. .b-js-link:active,
  258. .subheadline .misc-link:active {
  259.   color: var(--link-act) !important;
  260. }
  261.  
  262.  
  263. /* BLACK GREY WHITE */
  264. .b-catalog_entry-tooltip .inner a.name,
  265. .b-catalog_entry-tooltip .inner .line .value a,
  266. .b-catalog_entry .cover .title,
  267. .b-clubs-menu .block-list li:hover,
  268. .b-clubs-menu .block-list li:hover a,
  269. .b-clubs-menu .block-list li a:hover,
  270. .b-comment>.inner header .name-date a.name,
  271. .b-db_entry-note .name-container .name,
  272. .b-dialog>.inner header .name-date a.name,
  273. .b-entry-info .line .b-tag,
  274. .b-height_shortener .expand,
  275. .b-hot_topics .topic.subject,
  276. .b-hot_topics .topic a,
  277. .b-hot_topics .topic a:hover,
  278. .b-message>.inner header .name-date a.name,
  279. .b-modal .subheadline,
  280. .b-link_button,
  281. .b-link_button:hover,
  282. .b-link_button:active,
  283. .b-show_more:hover,
  284. .b-show_more-more .hide-more:hover,
  285. .b-stats_bar .stat_names .stat_name a,
  286. .b-topic>.inner header .name-date a.name,
  287. .b-video .marker,
  288. .headline,
  289. .p-dialogs .b-options-floated > a.selected,
  290. .p-messages .b-options-floated > a.selected,
  291. .p-profiles-edit .b-options-floated > a.selected,
  292. .p-profiles .profile-head .c-history .entry .title,
  293. .p-topics .l-menu .calendar .entry a,
  294. .p-topics .l-menu .reviews .entry a,
  295. .p-topics .l-menu .clubs .entry a,
  296. .p-user_rates-index .l-content .order-control,
  297. .p-user_rates-index .l-content .order-control:hover {
  298.   color: var(--text) !important;
  299. }
  300. .midheadline,
  301. .p-topics header h1 a.reload {
  302.   color: var(--text) !important
  303. }
  304. .b-db_entry-note .name-container .note,
  305. .b-stats_bar .title {
  306.   color: var(--text-sec);
  307. }
  308. .b-breadcrumbs a.b-link,
  309. .p-profiles .profile-head .c-history .entry .misc {
  310.   color: var(--text-sec) !important;
  311. }
  312. .p-profiles .profile-head .c-history .entry .misc.date {
  313.   color: #9B9B9B !important;
  314. }
  315. .b-catalog_entry-tooltip .inner .line .value .tag:hover,
  316. .b-entry-info .line .b-tag:hover {
  317.   color: var(--bg) !important;
  318. }
  319. .b-link_button {
  320.   background-color: var(--bg2);
  321. }
  322. .b-link_button:hover {
  323.   background-color: #050505;
  324. }
  325. .b-link_button:active {
  326.   background-color: #d9d9d9;
  327. }
  328. .b-contests-menu .results,
  329. .b-link_button.dark {
  330.   color: #FFF !important;
  331. }
  332.  
  333. /* PRIMARY COLOR */
  334.  
  335. input[type=submit],
  336. .b-contests-menu .results,
  337. .b-link_button.dark,
  338. .btn-primary {
  339.   background-color: var(--main-col);
  340. }
  341. .b-main_search .input:after {
  342.   border-color: var(--main-col);
  343. }
  344. input[type=submit]:hover,
  345. .b-contests-menu .results:hover,
  346. .b-link_button.dark:hover {
  347.   background-color: var(--main-col2);
  348. }
  349. .headline > a,
  350. .headline > a:hover,
  351. .headline.linkheadline > a,
  352. .midheadline > a,
  353. .midheadline > a:hover,
  354. .midheadline.linkheadline > a,
  355. .subheadline > a,
  356. .subheadline > a:hover,
  357. .subheadline.linkheadline > a,
  358. .b-form .cancel,
  359. .b-shiki_editor footer .unpreview,
  360. .b-shiki_editor footer .unpreview:not(.link):hover,
  361. .b-shiki_editor footer .preview,
  362. .b-stats_bar a.title {
  363.   color: var(--main-col) !important;
  364. }
  365. /* ACCENT COLOR */
  366. .menu .unread-count,
  367. .menu .contest {
  368.   background: var(--main-col);
  369.   color: #fff !important;
  370. }
  371. .menu .unread-count:hover,
  372. .menu .contest:hover {
  373.   background: #FF4081 !important;
  374. }
  375. /* END of COLOR SETTINGS */
  376.  
  377.  
  378. /* ВЫСОТА СТРОКИ */
  379. .cc-2a>.c-column { line-height: inherit; }
  380.  
  381. /* ОБЩИЕ КЛАССЫ */
  382.  
  383.  
  384. .p0, .m0, .m1, .m2, .m3, .m4, .m5, .m6, .m7, .m8, /*.m10,*/ .m12, .m13, .m15, .m20, .m25, .m30, .m40, .m50 {
  385.   margin-bottom: 0 !important
  386. }
  387.  
  388. hr {
  389.   margin: 8px 0;
  390. }
  391.  
  392. .b-mention s {
  393.   color: inherit;
  394. }
  395.  
  396. .b-image,
  397. .b-video {
  398.   display: inline-block;
  399.   vertical-align: top;
  400.   margin: 8px 8px 0 0;
  401. }
  402. .b-image:last-child,
  403. .b-video:last-child {
  404.   margin: 8px 0 0 0;
  405. }
  406. .b-image > img {
  407.   display: block;
  408. }
  409. .solid .b-image {
  410.   margin: 0;
  411. }
  412. .b-image .normalized_width {
  413.   display: initial;
  414. }
  415.  
  416.  
  417. .b-height_shortener {
  418.   padding-left: 56px;
  419.   cursor: s-resize;
  420. }
  421. .b-height_shortener .shade {
  422.   height: 2.5rem;
  423.   margin-top: -2.5rem;
  424.   background-image: linear-gradient(to bottom, rgba(242,242,242,0), var(--bg));
  425. }
  426. .b-height_shortener .expand {
  427.   font-size: .875rem;
  428. }
  429. .b-height_shortener:hover .expand {
  430.   color: var(--text);
  431. }
  432.  
  433. .collapsed {
  434.   margin-bottom: 8px;
  435.   background-color: var(--bg2);
  436.   border-color: #e0e0e0;
  437.   border-radius: 2px;
  438. }
  439. .collapsed:hover {
  440.   background-color: #e0e0e0;
  441.   border-color: var(--bg);
  442. }
  443. .collapsed:active {
  444.   background-color: var(--bg);
  445.   border-color: #d4d4d4;
  446. }
  447.  
  448. .b-show_more,
  449. .b-show_more-more .hide-more {
  450.   display: inline-block;
  451.   padding: 0 .5rem;
  452.   margin: .25rem 0;
  453.   border-radius: 10px;
  454.   color: var(--text);
  455.   font-size: .875rem;
  456.   font-weight: 500;
  457. }
  458. .b-show_more:hover,
  459. .b-show_more-more .hide-more:hover {
  460.   background-color: var(--bg2);
  461. }
  462.  
  463. .b-source {
  464.   margin-top: 8px;
  465.   margin-bottom: 16px;
  466. }
  467.  
  468. .b-sponsors_block_3 {
  469.   min-height: 314px;
  470.   padding: 1rem;
  471.   background-color: #f7f3db;
  472. }
  473. .b-sponsors_block_3:before {
  474.   content: 'Реклама:';
  475.   display: block;
  476.   margin-bottom: .5rem;
  477.   color: #ab9f59;
  478.   font-size: .75rem;
  479.   font-weight: 500;
  480.   line-height: 1rem;
  481. }
  482.  
  483. .b-spoiler label {
  484.   font-size: inherit;
  485.   letter-spacing: initial;
  486. }
  487. .b-spoiler .content .before,
  488. .b-spoiler .content .after {
  489.   font-size: inherit;
  490.   letter-spacing: initial;
  491. }
  492.  
  493. .b-nothing_here {
  494.   margin-left: 0;
  495.   font-size: .875rem;
  496. }
  497.  
  498. header.head h1,
  499. header.head h2 {
  500.   font-family: inherit;
  501. }
  502. header.head .notice {
  503.   margin: 8px 0;
  504.   font-size: 14px;
  505.   line-height: 20px;
  506. }
  507. header.head h1 + .notice,
  508. header.head h2 + .notice {
  509.   margin-top: -8px;
  510. }
  511.  
  512. .tipsy {
  513.   padding: 14px;
  514.   font-size: .875rem;
  515. }
  516. .tipsy-arrow {
  517.   display: none;
  518. }
  519. .tipsy-inner {
  520.   padding: 6px 16px;
  521.   background-color: #565656;
  522.   border-radius: 2px;
  523.   color: var(--bg2);
  524.   text-align: left;
  525.   box-shadow: none;
  526. }
  527.  
  528.  
  529. input {
  530.   font-family: inherit;
  531.   font-size: inherit;
  532. }
  533. .b-contests-menu .results,
  534. .b-link_button,
  535. input[type=submit] {
  536.   padding: 0 1rem;
  537.   margin-right: .5rem;
  538.   border-radius: 2px;
  539.   font-family: 'Roboto', sans-serif;
  540.   font-size: .875rem;
  541.   font-weight: 500;
  542.   line-height: 2rem;
  543.   text-align: center;
  544.   text-decoration: none !important;
  545.   text-transform: uppercase;
  546. }
  547. input[type=submit]:last-child {
  548.   margin-right: 0;
  549. }
  550. input[type=submit]:hover {
  551.   box-shadow: 0 2px 4px 2px rgba(0,0,0,.24);
  552. }
  553.  
  554. .b-contests-menu .results {
  555.   float: none;
  556.   display: block;
  557.   margin: .5rem 0;
  558. }
  559.  
  560. .b-link_button {
  561.   margin-bottom: 8px;
  562. }
  563. .b-link_button.maxi {
  564.   padding: 0;
  565.   font-size: 1rem;
  566.   line-height: 2.5rem;
  567. }
  568. .b-contests-menu .results,
  569. .b-forums > .b-link_button.maxi,
  570. .b-link_button.create-topic { margin-right: 0; }
  571.  
  572. .b-input input,
  573. .b-input textarea {
  574.   padding: 8px 16px;
  575.   line-height: 20px;
  576. }
  577.  
  578. select {
  579.   height: 32px;
  580.   padding: 2px 8px;
  581.   background-color: var(--bg);
  582.   border-color: var(--bg);
  583.   font-size: 14px;
  584.   line-height: 32px;
  585. }
  586.  
  587. .buttons {
  588.   font-family: inherit;
  589.   font-size: inherit;
  590.   font-weight: 500;
  591. }
  592. .btn {
  593.   border-radius: 2px;
  594.   line-height: 2rem;
  595. }
  596.  
  597. .l-page .menu-toggler { top: 64px; z-index: 9; }
  598.  
  599.  
  600.  
  601. .history-interval,
  602. .mischeadline,
  603. .b-input,
  604. .prgrph,
  605. .spoiler-prgrph,
  606. .review-votes_count {
  607.   margin-bottom: 8px !important;
  608. }
  609.  
  610. .block {
  611.   line-height: 20px;
  612. }
  613. .text {
  614.   margin-left: 0 !important;
  615. }
  616.  
  617. .b-breadcrumbs {
  618.   margin: 0;
  619.   color: var(--text-sec);
  620.   line-height: 1rem;
  621. }
  622.  
  623. .block-list li,
  624. .block-list-alt li {
  625.   line-height: 20px;
  626.   margin: 2px -8px;
  627.   padding: 0 8px;
  628. }
  629.  
  630. .b-comments-notifier {
  631.   top: 0 !important;
  632.   width: 32px;
  633.   height: 32px;
  634.   margin-top: 64px;
  635.   border-radius: 2px;
  636.   line-height: 32px;
  637. }
  638.  
  639. .b-user.named_avatar .name {margin: auto;}
  640.  
  641.  
  642. /**
  643.  * TOPMENU
  644.  * Изменение верхнего меню сайта. ------------------------------------------------------------
  645.  * Меню закреплено и увеличено.
  646.  */
  647.  
  648. /* Настройка цветов в меню */
  649. .l-top_menu {
  650.   background-color: &;
  651.   color: #f2f2f2;
  652.   text-transform: uppercase;
  653. }
  654. .l-top_menu .menu-items>.entry>a,
  655. .l-top_menu .menu-items>.entry.sign_out,
  656. .l-top_menu .submenu>.entry,
  657. .l-top_menu .submenu>.entry:active,
  658. .l-top_menu .menu-items>.entry:active {
  659.   color: inherit !important;
  660. }
  661. /* END of Настройка цветов в меню */
  662.  
  663. /* NOTE: Что это за элемент? */
  664. .to-top-fix {
  665.   background: none;
  666.   border: 0;
  667. }
  668.  
  669. .l-top_menu {
  670.   position: fixed;
  671.   top: 0;
  672.   width: 100%;
  673.   height: auto;
  674.   background-color: var(--bg2);
  675.   background-image: none;
  676.   border: none;
  677.   box-shadow: 0 2px 8px 2px rgba(0,0,0,.24);
  678.   overflow: visible;
  679. }
  680. .l-top_menu {
  681.   padding: 4px 0;
  682. }
  683. /* NOTE: Максимальное разрешение SONY Xperia Z Ultra: 960x540px */
  684. @media screen and (min-width: 480px) and (max-height: 540px) and (orientation: landscape) {
  685.   .l-top_menu {
  686.     padding: 0;
  687.   }
  688.   .l-page {
  689.     padding-top: 64px;
  690.   }
  691. }
  692. /* На планшетах и далее, высота меню равна 56px */
  693. @media screen and (min-width: 961px) and (orientation: landscape) {
  694.   .l-top_menu {
  695.     padding: 4px 0;
  696.   }
  697. }
  698.  
  699.  
  700. /* MENUTOP > LOGO */
  701. .l-top_menu .inner > a:first-child {
  702.   display: inline-block;
  703.   vertical-align: top;
  704.   margin: 0 0 0 32px;
  705. }
  706. .l-top_menu .inner .logo {
  707.   float: initial;
  708.   position: static;
  709.   width: auto;
  710.   height: auto;
  711.   padding: .8125rem 1rem;
  712.   margin: 0;
  713.   background: none;
  714. }
  715. .l-top_menu .inner .logo:before {
  716.   content: 'Главная';
  717.   display: block;
  718.   color: #fff;
  719.   font-size: 16px;
  720.   font-weight: 500;
  721.   line-height: 22px;
  722. }
  723. @media only screen and (min-width: 320px) {
  724.   .p-profiles .profile-head .c-brief {
  725.   background: var(--bg2);
  726. }
  727.   .l-top_menu .inner .logo:before {
  728.     content: 'Shikimori';
  729.     font-size: 20px;
  730.     text-transform: uppercase;
  731.   }
  732. }
  733. @media only screen and (min-width: 480px) {
  734.   .l-top_menu .inner .logo:before {
  735.     content: 'Shikimori';
  736.     font-size: 20px;
  737.     text-transform: uppercase;
  738.   }
  739. }
  740.  
  741. .l-top_menu .to-mobile-forum {
  742.   display: inline-block;
  743.   vertical-align: top;
  744.   position: static;
  745.   left: 138px;
  746.   width: 40px;
  747.   height: 40px;
  748.   padding: 8px;
  749.   margin: 4px !important;
  750.   color: var(--bg) !important;
  751. }
  752. .l-top_menu .to-mobile-forum:before {
  753.   width: 1.5rem;
  754.   line-height: 1.5rem;
  755.   text-align: center;
  756.   font-size: 24px;
  757. }
  758. .l-top_menu  .mobile-menu-toggler,
  759. .l-top_menu  .mobile-search-toggler {
  760.   position: absolute;
  761.   top: 0;
  762.   z-index: 10; /* TODO: убрать, потестить */
  763. }
  764. .l-top_menu  .mobile-menu-toggler { left: 0; }
  765. .l-top_menu  .mobile-search-toggler { right: 56px; }
  766.  
  767. /* Перерисовываем меню сайта под Material */
  768. .l-top_menu .mobile-menu-toggler.active {
  769.   position: fixed;
  770.   top: 0;
  771.   left: 0;
  772.   width: 100% !important;
  773.   height: 100% !important;
  774.   margin: 0 !important;
  775.   background-color: var(--bg2);
  776.   z-index: 12;
  777.   opacity: .48;
  778. }
  779. .l-top_menu .menu-items {
  780.   position: absolute;
  781.   top: 0;
  782.   width: calc(100% - 56px);
  783.   max-width: 320px;
  784.   height: calc(100vh + 16px);
  785.   padding: 8px 0;
  786.   margin: -8px 0;
  787.   background-color: #fff;
  788.   color: var(--bg2);
  789.   overflow-y: auto;
  790.   z-index: 13;
  791. }
  792. .l-top_menu .menu-items>.entry>a {
  793.   color: var(--text) !important;
  794. }
  795. /* ECPEREMENTAL > ANIMATED MOBILE MENU */
  796. .l-top_menu .menu-items {
  797.   display: block;
  798.   transform: translate(-100%, 0);
  799.   transition: 240ms ease-out;
  800. }
  801. .l-top_menu .menu-items.active {
  802.   transform: translate(0, 0);
  803. }
  804. /* END of ECPEREMENTAL */
  805.  
  806. @media only screen and (min-width: 320px) {
  807.   .l-top_menu .inner > a:first-child {
  808.     margin: 0 0 0 40px;
  809.   }
  810. }
  811. @media only screen and (min-width: 360px) {
  812.   .l-top_menu .inner > a:first-child {
  813.     margin: 0 0 0 48px;
  814.   }
  815. }
  816. @media only screen and (min-width: 1025px) {
  817.   .l-top_menu .inner > a:first-child {
  818.     margin: 0;
  819.   }
  820. }
  821. @media only screen and (min-width: 1025px) {
  822.   .l-top_menu .to-mobile-forum {
  823.     display: none;
  824.   }
  825.   .l-top_menu .menu-items {
  826.     display: inline-block;
  827.     vertical-align: top;
  828.     position: static;
  829.     width: auto;
  830.     max-width: 100%;
  831.     height: auto;
  832.     padding: 0;
  833.     margin: 0;
  834.     margin-left: 0;
  835.     background-color: initial;
  836.     color: inherit;
  837.     overflow: initial;
  838.     overflow-y: visible;
  839.     transform: translate(0, 0);
  840.   }
  841.   .l-top_menu .menu-items>.entry>a {
  842.     color: inherit !important;
  843.   }
  844.   .b-main_search.hovered .popup {
  845.     height: 272px;
  846.   }
  847.  
  848.   .l-top_menu .menu-items>.entry.calendar>a,
  849.   .l-top_menu .menu-items>.entry.info>a {
  850.     padding: 0.9375rem;
  851.   }
  852.  
  853.   .l-top_menu .menu-items>.entry.calendar>a:before,
  854.   .l-top_menu .menu-items>.entry.info>a:before {
  855.     display: block !important;
  856.   }
  857.  
  858.   .l-top_menu .menu-items>.entry.calendar>a:after,
  859.   .l-top_menu .menu-items>.entry.info>a:after {
  860.     display: none;
  861.   }
  862. }
  863.  
  864. .l-top_menu .menu-items>.entry {
  865.   display: block;
  866.   padding: 0;
  867.   border: 0;
  868.   color: var(--text);
  869.   line-height: inherit;
  870. }
  871. .l-top_menu .menu-items>.entry.selected,
  872. .l-top_menu .menu-items>.entry:hover {
  873.   background-color: transparent;
  874. }
  875. .l-top_menu .menu-items>.entry>a,
  876. .l-top_menu .menu-items>.entry.sign_out {
  877.   padding: 1rem;
  878.   margin: 0;
  879.   font-size: inherit;
  880.   line-height: 1rem;
  881. }
  882.  
  883. /* Текст вместо иконок в верхнем меню */
  884. .l-top_menu .menu-items>.entry.calendar>a,
  885. .l-top_menu .menu-items>.entry.info>a {
  886.   padding: 1rem;
  887.   margin: 0;
  888.   line-height: 1rem;
  889. }
  890. .l-top_menu .menu-items>.entry.calendar>a:before,
  891. .l-top_menu .menu-items>.entry.info>a:before {
  892.   display: none !important;
  893. }
  894. .l-top_menu .menu-items>.entry.calendar>a:after {
  895.   content: 'Календарь онгоингов';
  896. }
  897. .l-top_menu .menu-items>.entry.info>a:after {
  898.   content: 'Информация';
  899. }
  900. @media only screen and (min-width: 1025px) {
  901.   .l-top_menu .menu-items>.entry.calendar>a,
  902.   .l-top_menu .menu-items>.entry.info>a {
  903.     padding: 0.9375rem;
  904.   }
  905.  
  906.   .l-top_menu .menu-items>.entry.calendar>a:before,
  907.   .l-top_menu .menu-items>.entry.info>a:before {
  908.     display: block !important;
  909.   }
  910.  
  911.   .l-top_menu .menu-items>.entry.calendar>a:after,
  912.   .l-top_menu .menu-items>.entry.info>a:after {
  913.     display: none;
  914.   }
  915. }
  916. /* END of Текст вместо иконок в верхнем меню */
  917.  
  918. .l-top_menu .submenu,
  919. .b-main_search ul.popup {
  920.   border: 0;
  921. }
  922. .l-top_menu .submenu>.entry {
  923.   height: 2rem;
  924.   padding: .5rem 1rem;
  925.   border: 0;
  926.   font-size: .875rem;
  927.   line-height: 1rem;
  928. }
  929. .l-top_menu .submenu>.entry:first-child,
  930. .b-main_search ul.popup li:first-child {
  931.   margin-top: 1rem;
  932. }
  933. .l-top_menu .submenu>.entry:last-child,
  934. .b-main_search ul.popup li:last-child {
  935.   margin-bottom: .5rem;
  936. }
  937.  
  938. .l-top_menu .menu-items .submenu-toggler {
  939.   right: 0;
  940.   width: 48px;
  941.   height: 48px;
  942.   padding: .75rem;
  943.   margin: 0;
  944.   color: var(--text-sec);
  945.   z-index: 10;
  946. }
  947. .l-top_menu .menu-items .submenu-toggler:before {
  948.   width: 24px;
  949.   line-height: 24px;
  950. }
  951.  
  952. @media screen and (min-width: 1025px) {
  953. .l-top_menu .menu-items .submenu-toggler,
  954. .l-top_menu .inner .sign_out { display: none; }
  955.  
  956.   .l-top_menu .menu-items>.entry {
  957.     color: inherit; /* var(--bg) */
  958.   }
  959. }
  960.  
  961. @media screen and (max-width: 1024px) {
  962.   .l-top_menu .submenu {
  963.     padding-left: 32px;
  964.   }
  965. }
  966.  
  967.  
  968. /* TOPMENU | SEARCH */
  969. .l-top_menu .menu-search {
  970.   padding: 8px 0;
  971. }
  972. @media screen and (min-width: 1025px) {
  973.   .l-top_menu .menu-search {
  974.     padding: 0;
  975.   }
  976.   .l-top_menu .menu-search>.entry {
  977.     width: 234px;
  978.     padding: 8px 0 !important;
  979.   }
  980. }
  981.  
  982. .b-main_search {
  983.   padding-right: 8px !important;
  984.   padding-left: 8px !important;
  985. }
  986.  
  987. .b-main_search .input {
  988.   position: relative;
  989.   width: auto;
  990.   height: 2rem;
  991.   padding: 0;
  992.   margin: 0;
  993.   background: #fff;
  994.   border-radius: 2px;
  995. }
  996. .b-main_search.hovered .popup {
  997.   border: 0;
  998.   font-size: .875rem;
  999. }
  1000. .b-main_search ul.popup li {
  1001.   width: auto;
  1002.   height: 2rem;
  1003.   padding: .5rem 1rem;
  1004.   border: 0;
  1005.   font-family: inherit;
  1006.   font-size: .875rem;
  1007.   line-height: 20px;
  1008. }
  1009. .b-main_search .input input {
  1010.   width: 100%;
  1011.   padding: 0 1rem;
  1012.   font-family: inherit;
  1013.   font-size: 1rem;
  1014.   line-height: 2rem;
  1015. }
  1016. .b-main_search .input input.ac_loading {
  1017.   width: 100%;
  1018.   padding: 0 1rem;
  1019. }
  1020. .b-main_search ul.popup {
  1021.   width: inherit;
  1022. }
  1023. /* END of SEARCH */
  1024.  
  1025. /* TOPMENU | SEARCHRESULT */
  1026. .ac_results.menu-suggest,
  1027. .completable-block.menu-suggest {
  1028.   border: 0;
  1029.   box-shadow: 0 2px 8px 2px rgba(0,0,0,.24);
  1030. }
  1031. .ac_results,
  1032. .completable-block {
  1033.   font-size: .75rem;
  1034. }
  1035. .ac_results li {
  1036.   padding: 0 .5rem;
  1037.   border: none;
  1038.   line-height: 2rem;
  1039. }
  1040. .b-main_search ul.popup,
  1041. .b-main_search.hovered .popup {
  1042.   margin: 0;
  1043. }
  1044. .ac_results.menu-suggest,
  1045. .completable-block.menu-suggest {
  1046.   margin-top: -17px;
  1047.   margin-left: 6px;
  1048. }
  1049. /* END of SEARCHRESULT */
  1050.  
  1051. /* TOPMENU | USERBOX */
  1052.  
  1053. .l-top_menu .menu-userbox {
  1054.   position: absolute;
  1055.   top: 0;
  1056.   right: 0;
  1057. }
  1058.  
  1059. .l-top_menu .menu-userbox>.entry {
  1060.   position: relative;
  1061.   height: 48px;
  1062.   padding: 0 !important;
  1063.   margin: 0 .5rem 0 1rem !important;
  1064.   cursor: default;
  1065. }
  1066. .entry.userbox > .avatar {
  1067.   display: inline-block;
  1068.   vertical-align: top;
  1069.   width: 32px;
  1070.   height: 32px;
  1071.   margin: 8px;
  1072.   border-radius: 0;
  1073. }
  1074. .entry.userbox > .avatar > img {
  1075.   height: inherit;
  1076. }
  1077. .userbox>a .graphics-arrow-down { display: none; }
  1078.  
  1079. @media screen and (max-width: 1024px) {
  1080.   .userbox img.avatar,
  1081.   .menu .unread-count { margin-top: 0; }
  1082. }
  1083.  
  1084. .menu .unread-count {
  1085.   position: absolute;
  1086.   top: -8px;
  1087.   right: -8px;
  1088.   width: 22px;
  1089.   height: 22px;
  1090.   margin: 4px;
  1091.   border-radius: 50%;
  1092.   line-height: 22px;
  1093. }
  1094.  
  1095. @media screen and (min-width: 1025px) {
  1096.   .l-top_menu .menu-userbox {
  1097.     position: relative;
  1098.   }
  1099. }
  1100. /* END of USERBOX */
  1101.  
  1102. /* TOPMENU | ICON */
  1103. .l-top_menu .menu-mobile .search,
  1104. .l-top_menu .menu-mobile .menu,
  1105. .l-top_menu .menu-mobile #sign_in,
  1106. .l-top_menu .menu-userbox .search,
  1107. .l-top_menu .menu-userbox .menu,
  1108. .l-top_menu .menu-userbox #sign_in {
  1109.   width: 40px;
  1110.   height: 40px;
  1111.   padding: 8px;
  1112.   margin: 4px;
  1113.   margin-left: 4px !important;
  1114. }
  1115. .l-top_menu .menu-userbox #sign_in {
  1116.   margin: -10px 4px;
  1117. }
  1118. /* END of ICON */
  1119.  
  1120. /* ************** */
  1121. /* END of TOPMENU */ ----------------------------------------------------------------------------------------------------------
  1122. /* ************** */
  1123.  
  1124.  
  1125.  
  1126. /**
  1127.  * PAGINATION
  1128.  *
  1129.  */
  1130. /* Делаем пагинацию более удобной */
  1131. .p-animes_collection-index .pagination,
  1132. .p-mangas_collection-index .pagination,
  1133. .p-recommendations-index .pagination,
  1134. .p-userlist_comparer-show .pagination {
  1135.   margin: 8px 0;
  1136.   color: inherit;
  1137.   font-size: 14px;
  1138.   font-weight: 500;
  1139.   line-height: 32px;
  1140. }
  1141. /* Добавляем разной ерунды */
  1142. .p-animes_collection-index .pagination > *,
  1143. .p-mangas_collection-index .pagination > *,
  1144. .p-recommendations-index .pagination > *,
  1145. .p-userlist_comparer-show .pagination > * {
  1146.   vertical-align: top;
  1147. }
  1148. .p-animes_collection-index .pagination .link,
  1149. .p-mangas_collection-index .pagination .link,
  1150. .p-recommendations-index .pagination .link,
  1151. .p-userlist_comparer-show .pagination .link {
  1152.   width: 40px;
  1153.   height: 40px;
  1154.   padding: 8px;
  1155.   margin: -4px 8px;
  1156.   border-radius: 2px;
  1157.   color: var(--text-sec) !important;
  1158.   font-size: 0;
  1159. }
  1160. .p-animes_collection-index .pagination .link.disabled,
  1161. .p-mangas_collection-index .pagination .link.disabled,
  1162. .p-recommendations-index .pagination .link.disabled,
  1163. .p-userlist_comparer-show .pagination .link.disabled {
  1164.   color: #9B9B9B !important;
  1165. }
  1166. .p-animes_collection-index .pagination .link:first-child,
  1167. .p-mangas_collection-index .pagination .link:first-child,
  1168. .p-recommendations-index .pagination .link:first-child,
  1169. .p-userlist_comparer-show .pagination .link:first-child {
  1170.   margin-left: 0;
  1171. }
  1172. .p-animes_collection-index .pagination .link:last-child,
  1173. .p-mangas_collection-index .pagination .link:last-child,
  1174. .p-recommendations-index .pagination .link:last-child,
  1175. .p-userlist_comparer-show .pagination .link:last-child {
  1176.   margin-right: 0;
  1177. }
  1178. .p-animes_collection-index .pagination .link:hover,
  1179. .p-mangas_collection-index .pagination .link:hover,
  1180. .p-recommendations-index .pagination .link:hover,
  1181. .p-userlist_comparer-show .pagination .link:hover {
  1182.   background-color: var(--bg);
  1183.   color: var(--text) !important
  1184.   text-decoration: none;
  1185. }
  1186. .p-animes_collection-index .pagination .link.disabled:hover,
  1187. .p-mangas_collection-index .pagination .link.disabled:hover,
  1188. .p-recommendations-index .pagination .link.disabled:hover,
  1189. .p-userlist_comparer-show .pagination .link.disabled:hover {
  1190.   background-color: transparent;
  1191.   color: #9B9B9B !important;
  1192. }
  1193. .p-animes_collection-index .pagination .link:before,
  1194. .p-mangas_collection-index .pagination .link:before,
  1195. .p-recommendations-index .pagination .link:before,
  1196. .p-userlist_comparer-show .pagination .link:before {
  1197.   display: block;
  1198.   width: 24px !important;
  1199.   font-family: 'Material Icons' !important;
  1200.   font-size: 24px !important;
  1201.   font-weight: 400 !important;
  1202.   line-height: 1 !important;
  1203.  
  1204.   text-transform: none;
  1205.   letter-spacing: normal;
  1206.   word-wrap: normal;
  1207.   white-space: nowrap;
  1208.   direction: ltr;
  1209.  
  1210.   /* Support for all WebKit browsers. */
  1211.   -webkit-font-smoothing: antialiased;
  1212.   /* Support for Safari and Chrome. */
  1213.   text-rendering: optimizeLegibility;
  1214.  
  1215.   /* Support for Firefox. */
  1216.   -moz-osx-font-smoothing: grayscale;
  1217.  
  1218.   /* Support for IE. */
  1219.   font-feature-settings: 'liga';
  1220. }
  1221. .p-animes_collection-index .pagination .link.link-prev:before,
  1222. .p-mangas_collection-index .pagination .link.link-prev:before,
  1223. .p-recommendations-index .pagination .link.link-prev:before,
  1224. .p-userlist_comparer-show .pagination .link.link-prev:before {
  1225.   content: 'chevron_left';
  1226. }
  1227. .p-animes_collection-index .pagination .link.link-next:before,
  1228. .p-mangas_collection-index .pagination .link.link-next:before,
  1229. .p-recommendations-index .pagination .link.link-next:before,
  1230. .p-userlist_comparer-show .pagination .link.link-next:before {
  1231.   content: 'chevron_right';
  1232. }
  1233.  
  1234.  
  1235.  
  1236.  
  1237.  
  1238.  
  1239.  
  1240. /**
  1241.  * SUBHEADER
  1242.  * Изменение подзаголовков разделов и ссылок в них.
  1243.  */
  1244.  
  1245. .headline {
  1246.   padding: 8px 0;
  1247.   margin: 8px 0;
  1248.   background: none;
  1249.   border: 0;
  1250.   font-size: 24px;
  1251.   font-weight: 400;
  1252.   line-height: 32px;
  1253.   text-transform: capitalize;
  1254. }
  1255.  
  1256. .mischeadline,
  1257. .c-my_list .title,
  1258. .subheadline,
  1259. .midheadline,
  1260. .b-stats_bar .title,
  1261. .profile-content .activity .title,
  1262. .lifetime .title {
  1263.   padding: 16px 0;
  1264.   margin-bottom: 0;
  1265.   background-color: transparent;
  1266.   border: 0;
  1267.   font-size: .875rem;
  1268.   font-weight: 500;
  1269.   line-height: 1rem;
  1270.   text-transform: uppercase;
  1271.   overflow: initial;
  1272. }
  1273. .midheadline > a,
  1274. .subheadline > a {
  1275.   vertical-align: top;
  1276.   margin: -.5rem -1rem;
  1277. }
  1278. .midheadline > a,
  1279. .subheadline > a,
  1280. .b-form .cancel,
  1281. .b-shiki_editor footer .unpreview,
  1282. .b-shiki_editor footer .preview {
  1283.   display: inline-block;
  1284.   padding: 0 1rem;
  1285.   background-color: transparent;
  1286.   border-radius: .125rem;
  1287.   font-size: .875rem;
  1288.   font-weight: 500;
  1289.   line-height: 2rem !important;
  1290.   text-transform: uppercase;
  1291. }
  1292. .headline>a:before,
  1293. .midheadline > a:before,
  1294. .subheadline > a:before {
  1295.   right: 0;
  1296.   left: 0;
  1297.   text-align: right;
  1298. }
  1299. .headline.linkheadline > a,
  1300. .linkheadline.midheadline > a,
  1301. .linkheadline.subheadline > a {
  1302.   text-decoration: none;
  1303. }
  1304.  
  1305.  
  1306. .subheadline .misc-link {
  1307.   float: right;
  1308. }
  1309. .subheadline-input {
  1310.   padding: 5px 8px;
  1311.   margin-top: 8px !important;
  1312.   border-radius: 2px !important;
  1313.   font-size: 14px;
  1314.   line-height: inherit !important;
  1315. }
  1316. .subheadline-buttons {
  1317.   right: 0;
  1318.   margin: 0;
  1319. }
  1320. /* HOVER */
  1321. .headline > a:hover,
  1322. .midheadline > a:hover,
  1323. .subheadline > a:hover {
  1324.   text-decoration: none;
  1325. }
  1326. /* END of SUBHEADER */
  1327.  
  1328. /**/
  1329.  
  1330.  
  1331. /* ROUNDED IMAGES */
  1332. .b-dialog>.inner header img,
  1333. .b-message>.inner header img,
  1334. .p-user_rates-index .l-menu .avatar img,
  1335. .avatar > img {
  1336.   border-radius: 0;
  1337. }
  1338. /* END of ROUNDED IMAGES */
  1339.  
  1340.  
  1341.  
  1342. .b-catalog_entry.dropped .image-cutter {
  1343.   opacity: .75;
  1344.   filter: grayscale(100%);
  1345. }
  1346. .b-catalog_entry.completed .image-cutter,
  1347. .b-catalog_entry.on_hold .image-cutter,
  1348. .b-catalog_entry.planned .image-cutter,
  1349. .b-catalog_entry.rewatching .image-cutter,
  1350. .b-catalog_entry.watching .image-cutter {
  1351.   opacity: .9;
  1352. }
  1353. .b-catalog_entry.dropped:hover .image-cutter,
  1354. .b-catalog_entry.completed:hover .image-cutter,
  1355. .b-catalog_entry.on_hold:hover .image-cutter,
  1356. .b-catalog_entry.planned:hover .image-cutter,
  1357. .b-catalog_entry.rewatching:hover .image-cutter,
  1358. .b-catalog_entry.watching:hover .image-cutter {
  1359.   opacity: 1;
  1360.   transition: .3s all;
  1361. }
  1362. .b-catalog_entry .image-cutter { border-radius: 2px; }
  1363.  
  1364.  
  1365.  
  1366.  
  1367.  
  1368. /**
  1369.  * ANIME PAGE
  1370.  */
  1371.  
  1372. .b-animes-menu .friend-rate {
  1373.   line-height: 1.5rem;
  1374. }
  1375.  
  1376. .b-db_entry {
  1377.   margin-bottom: 8px;
  1378. }
  1379.  
  1380.  
  1381. .b-db_entry-note {}
  1382. .b-db_entry-note .name-container {
  1383.   padding: .25rem 0;
  1384. }
  1385. .b-db_entry-note .name-container .name {
  1386.   display: block;
  1387.   font-size: 1rem;
  1388.   line-height: 1.25rem;
  1389. }
  1390. .b-db_entry-note .name-container .note {
  1391.   margin-top: 4px;
  1392.   font-size: .875rem;
  1393.   line-height: 1rem;
  1394. }
  1395. .b-db_entry-note .name-container .b-user_rate {
  1396.   margin-top: .5rem;
  1397. }
  1398.  
  1399. .b-db_entry>.c-about .c-info-left,
  1400. .b-db_entry>.c-about .c-info-right,
  1401. .b-db_entry>.c-about .c-info-left:last-child,
  1402. .b-db_entry>.c-about .c-info-right:last-child {
  1403.   margin-bottom: 8px !important;
  1404. }
  1405.  
  1406.  
  1407. .p-animes .b-db_entry>*:last-child {
  1408.   clear: left;
  1409.   padding-top: 0;
  1410.   margin-left: 0 !important;
  1411. }
  1412. .p-people .subheadline.m10 {
  1413.   width: 100%;
  1414. }
  1415. .p-people .subheadline.m10 > a {
  1416.   display: block;
  1417. }
  1418.  
  1419. .p-characters .subheadline.m5 { width: 100%; overflow: hidden; }
  1420. .p-characters .subheadline.m5 > a { display: block; }
  1421. .p-characters .subheadline.m10 { width: auto; }
  1422. .p-characters .subheadline.m10 > a { display: inline-block; }
  1423.  
  1424.  
  1425. @media screen and (max-width: 480px) and (orientation: portrait) {
  1426.   .b-db_entry > .c-image .c-actions > a {
  1427.     width: auto !important;
  1428.   }
  1429. }
  1430.  
  1431. .b-lang_trigger {
  1432.   position: absolute;
  1433.   top: -53px;
  1434.   right: 0;
  1435.   width: 40px;
  1436.   height: 40px;
  1437.   padding: 10px 0;
  1438.   margin: 4px;
  1439.   background-color: var(--bg2);
  1440.   border-radius: 2px;
  1441.   font-size: 12px;
  1442.   font-weight: 500;
  1443.   line-height: 20px;
  1444.   text-align: center;
  1445.   text-transform: uppercase;
  1446.   cursor: pointer; /* eventListener повешен на этот элемент */
  1447. }
  1448. .b-lang_trigger:before,
  1449. .b-lang_trigger:after {
  1450.   display: none;
  1451. }
  1452. .b-lang_trigger:hover {
  1453.   background-color: var(--bg);
  1454. }
  1455. .b-lang_trigger span {
  1456.   border: 0;
  1457.   color: var(--text-sec);
  1458. }
  1459. .b-lang_trigger:hover span,
  1460. .b-lang_trigger span:hover {
  1461.   color: var(--text);
  1462. }
  1463.  
  1464. .midheadline,
  1465. .m10 {
  1466.   margin-bottom: 0 !important;
  1467. }
  1468.  
  1469. .b-user_rate .rate-show .note {
  1470.   padding: 8px 16px;
  1471.   background-color: var(--bg2);
  1472.   border-radius: 2px;
  1473.   font-size: 14px;
  1474.   line-height: 20px;
  1475. }
  1476. .b-user_rate .rate-show .note:before {
  1477.   content: 'Заметка';
  1478.   display: block;
  1479.   font-size: 10px;
  1480.   font-weight: 500;
  1481. }
  1482.  
  1483. .b-forums .forum .topics {
  1484.   margin-left: 8px;
  1485.   margin-top: 0;
  1486. }
  1487.  
  1488.  
  1489.  
  1490. /* ADD TO LIST BUTTON */
  1491. .b-add_to_list {
  1492.   min-width: 0;
  1493. }
  1494. .b-add_to_list .trigger,
  1495. .b-add_to_list .option {
  1496.   border: 0;
  1497. }
  1498. .b-add_to_list .trigger,
  1499. .b-add_to_list .option {
  1500.   padding: .5rem 1rem .5rem 3rem;
  1501.   border: 0;
  1502.   border-radius: .125rem;
  1503.   line-height: 1.5rem;
  1504. }
  1505. .b-add_to_list .plus,
  1506. .b-add_to_list .edit,
  1507. .b-add_to_list .trigger-arrow {
  1508.   width: 2.5rem;
  1509.   height: 2.5rem;
  1510.   padding: .5rem;
  1511.   margin: -.5rem -1rem -.5rem 0;
  1512.   color: inherit !important;
  1513. }
  1514. .b-add_to_list .plus,
  1515. .b-add_to_list .edit {
  1516.   position: absolute;
  1517.   left: 0;
  1518.   margin-left: 0 !important;
  1519.   margin-right: .5rem !important;
  1520. }
  1521. .b-add_to_list .trigger-arrow {
  1522.   position: relative;
  1523. }
  1524. .b-add_to_list .expanded-options .option .text {
  1525.   padding-left: 0;
  1526. }
  1527. .b-add_to_list.completed ~ .rate-show > .rate-number,
  1528. .b-add_to_list.completed ~ .rate-show > .episodes {
  1529.   height: 1rem;
  1530.   margin-bottom: 0;
  1531.   font-size: 0;
  1532. }
  1533. /* DENSE ATL_BUTTON */
  1534. .b-db_entry-note .name-container .b-user_rate .b-add_to_list .trigger,
  1535. .b-db_entry-note .name-container .b-user_rate .b-add_to_list .option {
  1536.   padding: 0 1rem 0 2.25rem;
  1537.   line-height: 2rem;
  1538. }
  1539. .b-db_entry-note .name-container .b-user_rate .b-add_to_list .plus,
  1540. .b-db_entry-note .name-container .b-user_rate .b-add_to_list .edit,
  1541. .b-db_entry-note .name-container .b-user_rate .b-add_to_list .trigger-arrow {
  1542.   width: 2rem;
  1543.   height: 2rem;
  1544.   padding: .4375rem;
  1545.   margin: 0 -1rem 0 .25rem;
  1546. }
  1547. .b-db_entry-note .name-container .b-user_rate .b-add_to_list .plus,
  1548. .b-db_entry-note .name-container .b-user_rate .b-add_to_list .edit {
  1549.   margin-right: .25rem !important;
  1550. }
  1551. /* END of DENSE ATL_BUTTON */
  1552. /* ATL_BUTTON in NEWS */
  1553. .b-catalog_entry-tooltip .b-add_to_list {
  1554.   width: auto;
  1555. }
  1556. .b-catalog_entry-tooltip .b-add_to_list .trigger {
  1557.   font-size: .875rem;
  1558.   line-height: 1.5rem;
  1559. }
  1560. .b-catalog_entry-tooltip .b-add_to_list .option {
  1561.   font-size: .875rem;
  1562. }
  1563. .b-catalog_entry-tooltip .b-add_to_list .trigger,
  1564. .b-catalog_entry-tooltip .b-add_to_list .add-trigger,
  1565. .b-catalog_entry-tooltip .b-add_to_list .remove-trigger {
  1566.   max-width: 220px;
  1567. }
  1568. /* END of ATL_BUTTON in NEWS */
  1569. /* END of ADD TO LIST BUTTON */
  1570.  
  1571.  
  1572.  
  1573. .b-db_entry-note .name-container {
  1574.   margin-left: 64px;
  1575.   line-height: inherit;
  1576. }
  1577.  
  1578. header.head,
  1579. .b-topic>.inner header,
  1580. .block,
  1581. .b-add_to_list,
  1582. .b-user_rate .rate-show {
  1583.   margin-bottom: .5rem;
  1584. }
  1585. .l-page > div > header.head {
  1586.   margin-bottom: 1.5rem;
  1587. }
  1588.  
  1589. .p-profiles-edit .l-page > div > header.head,
  1590. .p-dialogs .l-page > div > header.head,
  1591. .p-messages .l-page > div > header.head {
  1592.   margin-bottom: 0;
  1593. }
  1594.  
  1595.  
  1596. .c-poster img {
  1597.   display: block;
  1598.   min-height: 48px;
  1599.   background-color: #aaa;
  1600.   border-radius: 2px;
  1601. }
  1602. .c-poster:hover ~ .c-actions {
  1603.   opacity: 0;
  1604. }
  1605. .c-actions {
  1606.   position: absolute;
  1607.   bottom: 0;
  1608.   width: 100%;
  1609.   padding: 4px 0;
  1610.   background-color: rgba(25,25,25,.8);
  1611. }
  1612. .c-actions > * {
  1613.   width: 40px !important;
  1614.   height: 40px !important;
  1615.   padding: .5rem;
  1616.   border-radius: 2px;
  1617.   color: var(--text-sec) !important;
  1618. }
  1619. .c-actions > *:not(:last-child) {
  1620.   margin-right: 8px !important;
  1621. }
  1622. .c-actions > *:hover {
  1623.   color: var(--text) !important
  1624. }
  1625. .c-actions > *:before {
  1626.   font-size: 24px !important;
  1627.   line-height: 1 !important;
  1628. }
  1629. .c-actions .fav-add:hover:before,
  1630. .c-actions .fav-remove:before {
  1631.   color: var(--main-col);
  1632. }
  1633. .c-actions .fav-remove:hover:before {
  1634.   color: inherit;
  1635. }
  1636.  
  1637. @media screen and (min-width: 1200px) {
  1638.   .c-poster center {
  1639.     text-align: left;
  1640.   }
  1641.   .p-animes-show .c-image .b-user_rate,
  1642.   .p-mangas-show .c-image .b-user_rate {
  1643.     margin: 0;
  1644.   }
  1645. }
  1646.  
  1647. .b-rate {
  1648.   padding: 6px 0;
  1649. }
  1650. .b-rate .text-score {
  1651.   vertical-align: top;
  1652. }
  1653. .b-rate .score-value {
  1654.   line-height: 36px;
  1655. }
  1656. .b-rate .score-notice {
  1657.   font-size: 10px;
  1658.   margin-top: -46px;
  1659.   text-transform: uppercase;
  1660. }
  1661. .b-review-topic .b-rate .score-notice {
  1662.   margin-top: -58px;
  1663. }
  1664. .b-user_rate .rate-show .episodes {
  1665.   margin-bottom: 8px;
  1666.   font-size: 14px;
  1667.   line-height: 32px;
  1668. }
  1669. .b-user_rate .rate-show .rate-number {
  1670.   margin-right: 0;
  1671. }
  1672. .b-user_rate .rate-show .rate-number .current-episodes,
  1673. .b-user_rate .rate-show .rate-number .sep,
  1674. .b-user_rate .rate-show .rate-number .total-episodes {
  1675.   display: inline-block;
  1676.   vertical-align: top;
  1677.   line-height: 32px;
  1678. }
  1679. .b-user_rate .rate-show .rate-number .item-add {
  1680.   display: inline-block;
  1681.   vertical-align: top;
  1682.   width: 40px;
  1683.   height: 40px;
  1684.   padding: 8px;
  1685.   margin: -4px 0 0 8px;
  1686.   border-radius: 2px;
  1687. }
  1688. .b-user_rate .rate-show .rate-number .item-add:hover {
  1689.   background-color: var(--bg);
  1690. }
  1691. .b-user_rate .rate-show .rate-number .item-add:before {
  1692.   width: 24px !important;
  1693.   font-family: 'Material Icons' !important;
  1694.   font-size: 24px !important;
  1695.   font-weight: 400 !important;
  1696.   line-height: 1 !important;
  1697.  
  1698.   text-transform: none;
  1699.   letter-spacing: normal;
  1700.   word-wrap: normal;
  1701.   white-space: nowrap;
  1702.   direction: ltr;
  1703.  
  1704.   /* Support for all WebKit browsers. */
  1705.   -webkit-font-smoothing: antialiased;
  1706.   /* Support for Safari and Chrome. */
  1707.   text-rendering: optimizeLegibility;
  1708.   /* Support for Firefox. */
  1709.   -moz-osx-font-smoothing: grayscale;
  1710.   /* Support for IE. */
  1711.   font-feature-settings: 'liga';
  1712. }
  1713. .b-user_rate .rate-show .rate-number .item-add:before {
  1714.   content: 'add';
  1715. }
  1716. .b-rate .stars:after {
  1717.   font-size: 36px !important;
  1718.   font-family: 'Material Icons' !important;
  1719.   line-height: 1 !important;
  1720.   font-weight: 400 !important;
  1721.  
  1722.   text-transform: none;
  1723.   letter-spacing: -6px;
  1724.   word-wrap: normal;
  1725.   white-space: nowrap;
  1726.   direction: ltr;
  1727.  
  1728.   /* Support for all WebKit browsers. */
  1729.   -webkit-font-smoothing: antialiased;
  1730.   /* Support for Safari and Chrome. */
  1731.   text-rendering: optimizeLegibility;
  1732.   /* Support for Firefox. */
  1733.   -moz-osx-font-smoothing: grayscale;
  1734.   /* Support for IE. */
  1735.   font-feature-settings: 'liga';
  1736. }
  1737. .b-rate .stars.background:after {
  1738. }
  1739. .b-rate .stars.background:after {
  1740.   content: 'star_border star_border star_border star_border star_border';
  1741. }
  1742. .b-rate .stars.score-1:after { content: 'star_half'; }
  1743. .b-rate .stars.score-2:after { content: 'star'; }
  1744. .b-rate .stars.score-3:after { content: 'star star_half'; }
  1745. .b-rate .stars.score-4:after { content: 'star star'; }
  1746. .b-rate .stars.score-5:after { content: 'star star star_half'; }
  1747. .b-rate .stars.score-6:after { content: 'star star star'; }
  1748. .b-rate .stars.score-7:after { content: 'star star star star_half'; }
  1749. .b-rate .stars.score-8:after { content: 'star star star star'; }
  1750. .b-rate .stars.score-9:after { content: 'star star star star star_half'; }
  1751. .b-rate .stars.score-10:after { content: 'star star star star star'; }
  1752.  
  1753. .watch-online-placeholer {
  1754.   margin: 2rem auto .5rem;
  1755. }
  1756. .p-animes-show .watch-online,
  1757. .p-animes-show .upload-video,
  1758. .p-mangas-show .watch-online,
  1759. .p-mangas-show .upload-video {
  1760.   border-radius: 2px;
  1761. }
  1762. .b-link_button.watch-online:before,
  1763. .b-link_button.create-topic:before {
  1764.   display: none;
  1765. }
  1766.  
  1767. .b-catalog_entry .cover .title {
  1768.   padding: .5rem 0 0;
  1769.   margin-top: 0;
  1770.   font-size: .875rem;
  1771.   line-height: 1.375rem;
  1772. }
  1773. .b-catalog_entry .cover .misc {
  1774.   padding: 0 0 .5rem;
  1775. }
  1776. .b-entry-info {
  1777.   margin: 0;
  1778.   font-size: .875rem;
  1779. }
  1780. .b-entry-info .line {
  1781.   line-height: 1.5rem;
  1782. }
  1783. .b-entry-info .line .b-tag,
  1784. .b-catalog_entry-tooltip .inner .line .value .tag {
  1785.   padding: 0 8px;
  1786.   margin: 0 4px 0 0;
  1787.   border: 0;
  1788.   border-radius: 2px;
  1789.   font-size: .625rem;
  1790.   line-height: 20px;
  1791.   text-transform: uppercase;
  1792. }
  1793. .b-entry-info .line .b-tag:hover,
  1794. .b-catalog_entry-tooltip .inner .line .value .tag:hover {
  1795.   padding: 0 8px;
  1796.   background-color: #aaa;
  1797.   margin: 0 4px 0 0;
  1798. }
  1799. .b-catalog_entry-tooltip .inner .line .value .tag,
  1800. .b-catalog_entry-tooltip .inner .line .value .tag:hover {
  1801.   padding: 0 6px;
  1802.   line-height: 18px;
  1803. }
  1804. .b-entry-info .line a:active {
  1805.   color: #fff;
  1806. }
  1807. .b-entry-info .line .b-tag:active,
  1808. .b-catalog_entry-tooltip .inner .line .value .tag:active {
  1809.   background-color: #888;
  1810. }
  1811.  
  1812. @media screen and (min-width: 1200px) {
  1813.   .p-animes_collection-index.x1200 .cc-entries>.c-column {
  1814.     width: 18.4%;
  1815.     margin-right: 2%;
  1816.     border-radius: 2px;
  1817.   }
  1818. }
  1819. .b-collection-filters .block>.filter {
  1820.   height: 2.5rem;
  1821.   padding: .625rem;
  1822.   margin-top: .25rem;
  1823.   border-radius: 50%;
  1824.   line-height: 1.25rem;
  1825. }
  1826.  
  1827.  
  1828.  
  1829. /**
  1830.  * COMMENT
  1831.  * Изменение всех комментариев, новостей, диалогов, топиков.
  1832.  */
  1833. .b-comments {
  1834.   line-height: inherit;
  1835. }
  1836. .b-dialog {
  1837.   position: relative;
  1838. }
  1839. .b-dialog,
  1840. .b-message,
  1841. .b-comment {
  1842.   position: relative;
  1843.   padding-top: 12px !important;
  1844.   padding-bottom: 12px;
  1845.   margin-bottom: 0;
  1846.   border: 0;
  1847. }
  1848. .tooltip-inner .b-message {
  1849.   padding-top: 0 !important;
  1850.   padding-bottom: 0;
  1851. }
  1852. .b-dialog:before,
  1853. .b-message:before,
  1854. .b-comment:before {
  1855.   content: '';
  1856.   position: absolute;
  1857.   bottom: 0;
  1858.   right: -24px;
  1859.   left: 56px;
  1860.   height: 1px;
  1861. }
  1862. .b-dialog:last-child:before,
  1863. .b-message:last-child:before,
  1864. .b-comment:last-child:before,
  1865. .tooltip-inner .b-message:before {
  1866.   display: none;
  1867. }
  1868.  
  1869. .b-comment .body,
  1870. .b-topic .body,
  1871. .b-dialog .body {
  1872.   padding-left: 56px !important;
  1873.   line-height: 20px;
  1874. }
  1875. .b-generated_news .body {
  1876.   padding-left: 0 !important;
  1877. }
  1878.  
  1879. /*
  1880. .b-topic,
  1881. .b-comments,
  1882. .b-comment,
  1883. .b-comment > .inner,
  1884. .b-dialog,
  1885. .b-dialog > .inner,
  1886. .b-message,
  1887. .b-message > .inner {
  1888.   overflow-x: initial;
  1889. }
  1890. */
  1891.  
  1892. .b-comment>.inner header,
  1893. .b-dialog>.inner header,
  1894. .b-message>.inner header {
  1895.   margin-bottom: 0;
  1896. }
  1897. .b-message>.inner header {
  1898.   padding: 8px 0;
  1899. }
  1900.  
  1901. .b-topic >.inner header img {
  1902.   border-radius: 2px;
  1903. }
  1904. .b-comment > .inner header img,
  1905. .b-message>.inner header img,
  1906. .b-dialog>.inner header img {
  1907.   margin: 4px 16px 0 0;
  1908.   width: 40px;
  1909.   border-radius: 0;
  1910. }
  1911. .b-topic > .inner header .name-date,
  1912. .b-comment > .inner header .name-date {
  1913.   padding: 8px 0;
  1914.   line-height: 32px;
  1915. }
  1916. .b-message>.inner header .name-date,
  1917. .b-dialog>.inner header .name-date {
  1918.   line-height: 32px;
  1919. }
  1920. .b-topic .name-date .name,
  1921. .b-comment .name-date .name {
  1922.   font-size: 16px;
  1923.   font-weight: 500 !important;
  1924. }
  1925. .b-message>.inner header .name-date a.name,
  1926. .b-topic>.inner header .name-date a.name,
  1927. .b-comment>.inner header .name-date a.name {
  1928.   display: block;
  1929.   margin-right: 16px;
  1930.   line-height: 16px;
  1931. }
  1932. .b-message>.inner header .name-date .time,
  1933. .b-topic>.inner header .name-date .time,
  1934. .b-comment>.inner header .name-date .time {
  1935.   padding-top: 2px;
  1936.   padding-left: 0;
  1937.   line-height: 14px !important;
  1938. }
  1939. .b-message>.inner header .name-date .time > time,
  1940. .b-comment>.inner header .name-date .time > time,
  1941. .b-comment>.inner header .name-date .time > span {
  1942.   vertical-align: top;
  1943.   margin-top: 0;
  1944.   line-height: inherit !important;
  1945. }
  1946. .b-comment header .hash {
  1947.   position: static;
  1948. }
  1949. @media only screen and (min-width: 1025px) {
  1950.   .b-topic>.inner header .name-date a.name,
  1951.   .b-comment>.inner header .name-date a.name {
  1952.     display: inline;
  1953.   }
  1954.   .b-topic > .inner header .name-date,
  1955.   .b-comment > .inner header .name-date {
  1956.     padding: 4px 0;
  1957.     line-height: 24px;
  1958.   }
  1959.   .b-comment>.inner header .name-date .time > time,
  1960.   .b-comment>.inner header .name-date .time > span {
  1961.     vertical-align: baseline;
  1962.   }
  1963. }
  1964.  
  1965.  
  1966. .p-messages .b-message>.inner header .name-date a.name,
  1967. .p-messages .b-message>.inner header .name-date .time {
  1968.   display: inline-block !important;
  1969.   vertical-align: top;
  1970.   padding-top: 0;
  1971.   line-height: inherit !important;
  1972. }
  1973.  
  1974.  
  1975. .b-dialog .b-message {
  1976.   position: static;
  1977.   margin: 0;
  1978. }
  1979. .b-dialog .b-message .inner header {
  1980.   padding: 4px 0;
  1981. }
  1982. .b-dialog .b-message .inner header img {
  1983.   width: 20px;
  1984.   margin: 0 8px 0 0;
  1985. }
  1986. .b-dialog .b-message .inner header .name-date {
  1987.   line-height: 20px;
  1988. }
  1989. .b-dialog .b-message .inner header .name-date .name,
  1990. .b-dialog .b-message .inner header .name-date time {
  1991.   display: initial;
  1992.   line-height: initial !important;
  1993. }
  1994. .b-dialog .b-message .inner .body {
  1995.   padding-left: 0 !important;
  1996. }
  1997.  
  1998.  
  1999.  
  2000.  
  2001. .b-replies {
  2002.   padding: 8px 0 0;
  2003. }
  2004. .b-quote {
  2005.   margin: .5rem 0;
  2006.   padding: .5rem 1rem;
  2007.   border-color: #555;
  2008.   border-radius: 2px;
  2009.   color: var(--text) !important;
  2010. }
  2011. .b-quote .quoteable {
  2012.   margin: 0 0 .5rem;
  2013.   line-height: 20px;
  2014. }
  2015. .b-quote .quoteable:before {
  2016.   float: left;
  2017.   margin-right: 8px;
  2018.   color: var(--text-sec);
  2019. }
  2020. .b-quote .b-quote {
  2021.   margin-left: 0 !important;
  2022. }
  2023.  
  2024. .b-quote,
  2025. .b-quote .b-quote .b-quote { background: var(--bg2); }
  2026. .b-quote .b-quote,
  2027. .b-quote .b-quote .b-quote .b-quote { background: var(--bg2)000; }
  2028.  
  2029.  
  2030. .b-topic>.inner header:after {
  2031.   content: '';
  2032.   clear: both;
  2033.   display: block;
  2034. }
  2035. .b-topic .body {
  2036.   line-height: 20px;
  2037. }
  2038.  
  2039. .b-topic-preview > .inner .status-line {
  2040.   margin-top: -12px;
  2041.   margin-bottom: 8px;
  2042. }
  2043.  
  2044. .tooltip .b-comment {
  2045.   padding-top: 0 !important;
  2046.   padding-bottom: 0;
  2047. }
  2048. .tooltip .b-comment:before {
  2049.   display: none;
  2050. }
  2051.  
  2052.  
  2053. /**
  2054.  * COMMENT DOESN'T SLIDE
  2055.  * Большие комментарии, топики не должны сдвигаться margin'ами.
  2056.  * Либо translate3d либо никак.
  2057.  */
  2058. .b-topic.aside-expanded > .inner,
  2059. .b-dialog.aside-expanded > .inner,
  2060. .b-message.aside-expanded > .inner,
  2061. .b-comment.aside-expanded > .inner,
  2062. .b-topic.aside-expanded > .b-comments {
  2063.   margin-left: 0;
  2064. }
  2065. .b-topic.aside-expanded > .inner aside.buttons,
  2066. .b-dialog.aside-expanded > .inner aside.buttons,
  2067. .b-message.aside-expanded > .inner aside.buttons,
  2068. .b-comment.aside-expanded > .inner aside.buttons {
  2069.   position: absolute;
  2070.   top: 0;
  2071.   right: 0;
  2072.   left: 0;
  2073.   width: auto;
  2074.   height: 100%;
  2075.   margin: 0 -16px;
  2076.   padding: 8px 16px;
  2077.   background-color: rgba(25,25,25,.9);
  2078.   border: 0;
  2079.   overflow-y: auto;
  2080.   z-index: 3;
  2081. }
  2082.  
  2083. .b-dialog > .inner > aside.buttons > .main-controls > a:after,
  2084. .b-dialog > .inner > aside.buttons > .main-controls > span:after,
  2085. .b-dialog > .inner > aside.buttons > .delete-controls > span:after,
  2086. .b-dialog > .inner > aside.buttons > .moderation-controls > span:after,
  2087. .b-message > .inner > aside.buttons > .main-controls > a:after,
  2088. .b-message > .inner > aside.buttons > .main-controls > span:after,
  2089. .b-message > .inner > aside.buttons > .delete-controls > span:after,
  2090. .b-message > .inner > aside.buttons > .moderation-controls > span:after,
  2091. .b-comment > .inner > aside.buttons > .main-controls > a:after,
  2092. .b-comment > .inner > aside.buttons > .main-controls > span:after,
  2093. .b-comment > .inner > aside.buttons > .delete-controls > span:after,
  2094. .b-comment > .inner > aside.buttons > .moderation-controls > span:after{
  2095.   vertical-align: top;
  2096.   padding-left: 12px !important;
  2097.   font-size: 16px !important;
  2098.   line-height: 18px;
  2099. }
  2100.  
  2101.  
  2102. /* CLUB */
  2103. .b-clubs-menu > .actions > .block-list > li {
  2104.   padding: 0 12px;
  2105.   margin: 0 -8px;
  2106.   line-height: 32px;
  2107. }
  2108. .b-clubs-menu > .actions > .block-list > li:before {
  2109.   margin: 7px 12px 0 0;
  2110. }
  2111. .b-clubs-menu > .actions > .block-list > li:before {
  2112.   width: 18px !important;
  2113.   font-family: 'Material Icons' !important;
  2114.   font-size: 18px !important;
  2115.   line-height: 1 !important;
  2116.   text-align: center;
  2117.   font-weight: 400 !important;
  2118.  
  2119.   text-transform: none;
  2120.   letter-spacing: normal;
  2121.   word-wrap: normal;
  2122.   white-space: nowrap;
  2123.   direction: ltr;
  2124.  
  2125.   /* Support for all WebKit browsers. */
  2126.   -webkit-font-smoothing: antialiased;
  2127.   /* Support for Safari and Chrome. */
  2128.   text-rendering: optimizeLegibility;
  2129.   /* Support for Firefox. */
  2130.   -moz-osx-font-smoothing: grayscale;
  2131.   /* Support for IE. */
  2132.   font-feature-settings: 'liga';
  2133. }
  2134.  
  2135. .b-clubs-menu .block-list li,
  2136. .b-clubs-menu .block-list li a {
  2137.   color: var(--text) !important
  2138. }
  2139.  
  2140. .b-clubs-menu .actions .upload {
  2141.   position: relative;
  2142. }
  2143. .b-clubs-menu .actions .upload input {
  2144.   top: 0;
  2145.   left: 0;
  2146.   height: 32px;
  2147.   margin: 0;
  2148.   border: 0;
  2149.   cursor: pointer;
  2150. }
  2151.  
  2152. .actions .edit-entry:before {
  2153.   content: 'build';
  2154. }
  2155. .actions .broadcast:before {
  2156.   content: 'speaker_notes';
  2157. }
  2158. .actions .upload:before {
  2159.   content: 'insert_photo';
  2160. }
  2161. .actions .join:before,
  2162. .actions .invite:before {
  2163.   content: 'person_add';
  2164. }
  2165. .actions .leave:before {
  2166.   content: 'directions_run';
  2167. }
  2168.  
  2169.  
  2170. /* ICON | CREATE CLUB */
  2171. .p-clubs-index header.head a.misc {
  2172.   float: right;
  2173.   width: 40px;
  2174.   height: 40px;
  2175.   padding: 8px;
  2176.   margin: 4px;
  2177.   border-radius: 2px;
  2178.   color: var(--text-sec) !important;
  2179.   font-size: 0;
  2180. }
  2181. .p-clubs-index header.head a.misc:hover {
  2182.   background-color: var(--bg);
  2183.   text-decoration: none;
  2184. }
  2185. .p-clubs-index header.head a.misc:before {
  2186.   width: 24px !important;
  2187.   font-family: 'Material Icons' !important;
  2188.   font-size: 24px !important;
  2189.   font-weight: 400 !important;
  2190.   line-height: 1 !important;
  2191.  
  2192.   text-transform: none;
  2193.   letter-spacing: normal;
  2194.   word-wrap: normal;
  2195.   white-space: nowrap;
  2196.   direction: ltr;
  2197.  
  2198.   /* Support for all WebKit browsers. */
  2199.   -webkit-font-smoothing: antialiased;
  2200.   /* Support for Safari and Chrome. */
  2201.   text-rendering: optimizeLegibility;
  2202.   /* Support for Firefox. */
  2203.   -moz-osx-font-smoothing: grayscale;
  2204.   /* Support for IE. */
  2205.   font-feature-settings: 'liga';
  2206. }
  2207. .p-clubs-index header.head a.misc:before {
  2208.   content: 'group_add';
  2209. }
  2210. /* END of CREATE CLUB */
  2211.  
  2212.  
  2213.  
  2214. .p-contests .results .cc-result .c-rounds .label {
  2215.   font-size: .875rem;
  2216. }
  2217.  
  2218. /**
  2219.  * INDEX
  2220.  * Изменения главной страницы.
  2221.  *
  2222.  */
  2223.  
  2224. .p-dashboards-show .c-my_list {
  2225.   padding: 0;
  2226.   background: initial;
  2227.   border: none;
  2228. }
  2229. .p-dashboards-show .c-my_list .title .switch,
  2230. .p-dashboards-show .c-my_list .title .link {
  2231.   float: right;
  2232. }
  2233.  
  2234.  
  2235. .b-hot_topics {
  2236.   padding: .5rem 1rem;
  2237.   margin: -.5rem -1rem 0 -1rem;
  2238.   background-color: initial;
  2239.   border: 0;
  2240. }
  2241. .b-hot_topics .topic {
  2242.   font-size: .875rem;
  2243.   line-height: 2rem;
  2244.   text-align: left;
  2245. }
  2246. .b-hot_topics .topic.subject {
  2247.   font-size: .875rem;
  2248.   font-weight: 500;
  2249.   line-height: 2rem;
  2250.   text-align: left;
  2251.   text-transform: uppercase;
  2252.   white-space: nowrap;
  2253. }
  2254. .b-hot_topics .topic a {
  2255.   padding: 0 .75rem;
  2256.   background-color: var(--bg2);
  2257.   border-radius: 1rem;
  2258. }
  2259. .b-hot_topics .topic a:hover {
  2260.   background-color: var(--bg);
  2261.   text-decoration: none;
  2262. }
  2263. .b-hot_topics .topic a .poster {
  2264.   position: initial;
  2265.   display: inline-block;
  2266.   vertical-align: middle;
  2267.   width: 2rem;
  2268.   height: 2rem;
  2269.   margin-left: -.75rem;
  2270.   margin-right: .5rem;
  2271.   border-radius: 50%;
  2272. }
  2273. @media screen and (max-width: 1024px) {
  2274.   .b-hot_topics {
  2275.     padding: 14px 16px;
  2276.     margin: -16px -16px 0 -16px;
  2277.     border: 0;
  2278.   }
  2279.   .b-hot_topics .topic a .poster {
  2280.     display:none;
  2281.   }
  2282. }
  2283. @media only screen and (min-width: 1025px) {
  2284.   .b-hot_topics .topic {
  2285.     margin-right: .5%;
  2286.     width: 10.6666%;
  2287.   }
  2288. }
  2289.  
  2290.  
  2291.  
  2292.  
  2293.  
  2294. /**
  2295.  * PROFILE
  2296.  *
  2297.  */
  2298.  
  2299. .b-list_switchers {}
  2300. .b-list_switchers > .switcher {
  2301.   width: 40px;
  2302.   height: 40px;
  2303.   padding: 8px;
  2304.   margin: 4px;
  2305.   border-radius: 2px;
  2306.   color: var(--text-sec) !important;
  2307. }
  2308. .b-list_switchers > .switcher:hover {
  2309.   background-color: var(--bg);
  2310. }
  2311. .b-list_switchers > .switcher:hover {
  2312.   color: var(--text) !important
  2313. }
  2314. .b-list_switchers > .switcher.selected {
  2315.   color: var(--main-col) !important;
  2316. }
  2317. .b-list_switchers .switcher.posters {
  2318.   margin-left: 4px !important;
  2319. }
  2320. .b-list_switchers .switcher.list {
  2321.   margin-left: 4px !important;
  2322. }
  2323.  
  2324.  
  2325. /* HISTORY */
  2326. .history-interval p:hover {
  2327.   background-color: var(--bg2);
  2328. }
  2329.  
  2330. .p-user_rates-index .l-content .filter input {
  2331.   border: 1px solid var(--text);
  2332.   border-radius: 2px;
  2333. }
  2334. .p-user_rates-index .l-menu .avatar img {
  2335.   width: 160px;
  2336.   height: 160px;
  2337.   background-color: var(--bg);
  2338. }
  2339. .p-user_rates-index .l-content thead tr {
  2340.   font-size: 13px;
  2341.   line-height: 32px;
  2342. }
  2343. .p-user_rates-index .l-content .order-control:hover {
  2344.   background-color: var(--bg2);
  2345. }
  2346.  
  2347.  
  2348. .p-user_rates-index .list-lines tr td .rate-text {
  2349.   font-size: .875rem;
  2350.   line-height: 1.25rem;
  2351. }
  2352.  
  2353. .p-user_rates-index .list-lines tr.edit-form form {
  2354.   padding: 4px 16px;
  2355.   margin: 8px 0;
  2356.   background: var(--bg2);
  2357.   border: 1px solid var(--text);
  2358.   border-radius: 2px;
  2359. }
  2360.  
  2361. .p-user_rates-index .list-lines tr.edit-form .b-input.text textarea {
  2362.   font-size: .875rem;
  2363. }
  2364.  
  2365. .b-user_rate .rate-edit .b-input.integer input,
  2366. .p-user_rates-index .list-lines tr.edit-form .b-input.integer input {
  2367.   width: 112px;
  2368. }
  2369.  
  2370. .b-stats_bar .bar { border-radius: 2px; }
  2371.  
  2372. .p-user_rates-index .list-lines tr.edit-form .remove {
  2373.   width: 40px;
  2374.   height: 40px;
  2375.   padding: 8px;
  2376.   margin: 4px;
  2377.   border-radius: 2px;
  2378.   color: var(--text-sec) !important;
  2379. }
  2380. .p-user_rates-index .list-lines tr.edit-form .remove {
  2381.   margin: -4px 0 0;
  2382.   border: 0;
  2383.   font-size: 0;
  2384. }
  2385. .p-user_rates-index .list-lines tr.edit-form .remove:hover {
  2386.   background-color: var(--bg);
  2387.   color: var(--text-sec) !important;
  2388. }
  2389. .p-user_rates-index .list-lines tr.edit-form .remove:before {
  2390.   width: 24px !important;
  2391.   font-family: 'Material Icons' !important;
  2392.   font-size: 24px !important;
  2393.   font-weight: 400 !important;
  2394.   line-height: 1 !important;
  2395.  
  2396.   text-transform: none;
  2397.   letter-spacing: normal;
  2398.   word-wrap: normal;
  2399.   white-space: nowrap;
  2400.   direction: ltr;
  2401.  
  2402.   /* Support for all WebKit browsers. */
  2403.   -webkit-font-smoothing: antialiased;
  2404.   /* Support for Safari and Chrome. */
  2405.   text-rendering: optimizeLegibility;
  2406.  
  2407.   /* Support for Firefox. */
  2408.   -moz-osx-font-smoothing: grayscale;
  2409.  
  2410.   /* Support for IE. */
  2411.   font-feature-settings: 'liga';
  2412. }
  2413. .p-user_rates-index .list-lines tr.edit-form .remove:before  {
  2414.   content: 'delete';
  2415. }
  2416.  
  2417.  
  2418. .p-profiles .profile-head .c-info .c-lists-info .b-stats_bar {
  2419.   margin-bottom: 0;
  2420. }
  2421. .p-profiles .profile-head .c-info .c-lists-info .b-stats_bar .compatibility a {
  2422.   font-size: 14px;
  2423.   margin-top: 16px;
  2424. }
  2425. .b-stats_bar .bar {
  2426.   height: 16px;
  2427. }
  2428. .b-stats_bar .bar .first,
  2429. .b-stats_bar .bar .second,
  2430. .b-stats_bar .bar .third {
  2431.   font-size: 12px;
  2432.   line-height: 16px;
  2433. }
  2434. .p-profiles .profile-head .c-brief .avatar .profile-actions {
  2435.   margin-top: 1rem;
  2436.   margin-right: -12px;
  2437.   margin-left: -12px;
  2438. }
  2439. .profile-actions > a {
  2440.   display: inline-block;
  2441.   padding: 8px;
  2442.   border-radius: 2px;
  2443.   color: var(--text-sec) !important;
  2444. }
  2445. .profile-actions > a:hover {
  2446.   color: var(--text) !important
  2447. }
  2448. .profile-actions > *:before {
  2449.   vertical-align: top;
  2450.   width: 24px !important;
  2451.   line-height: 1 !important;
  2452.   font-size: 24px !important;
  2453. }
  2454. .p-profiles .profile-head .c-brief .avatar > img {
  2455.   display: block;
  2456.   margin: auto;
  2457. }
  2458.  
  2459.  
  2460. @media only screen and (min-width: 768px) {
  2461.   .p-profiles .profile-head .c-brief .avatar {
  2462.     margin: 8px 32px 48px 16px;
  2463.   }
  2464.   .p-profiles .profile-head .c-brief .avatar > img {
  2465.     width: 160px;
  2466.     height: 160px;
  2467.   }
  2468. }
  2469. @media screen and (max-width: 1024px) {
  2470.   .profile-actions .settings,
  2471.   .profile-actions .fav-add,
  2472.   .profile-actions .fav-remove,
  2473.   .profile-actions .ignore-add,
  2474.   .profile-actions .ignore-remove,
  2475.   .profile-actions .ban {
  2476.     margin-left: .5rem;
  2477.   }
  2478. }
  2479. @media only screen and (min-width: 1025px) {
  2480.   .profile-actions .settings,
  2481.   .profile-actions .fav-add,
  2482.   .profile-actions .fav-remove,
  2483.   .profile-actions .ignore-add,
  2484.   .profile-actions .ignore-remove,
  2485.   .profile-actions .ban {
  2486.     margin-left: .5rem;
  2487.   }
  2488. }
  2489.  
  2490. .b-catalog-entry-embedded .b-catalog_entry {
  2491.   margin-bottom: 0 !important;
  2492. }
  2493.  
  2494. :root .b-anime_status_tag:before {
  2495.   vertical-align: text-bottom;
  2496.   padding: 0 4px;
  2497.   border: 0;
  2498.   border-radius: 2px;
  2499.   font-size: 10px;
  2500.   line-height: 16px;
  2501.   text-transform: uppercase;
  2502. }
  2503.  
  2504. .b-topic {
  2505.   margin-bottom: .5rem;
  2506. }
  2507. .m13 {
  2508.   margin-bottom: 0 !important;
  2509. }
  2510.  
  2511. /* USER PROFILE |> HISTORY ENTRY */
  2512. .p-profiles .profile-head .c-history .entry {
  2513.   position: relative;
  2514.   padding: 8px 0;
  2515.   margin: 0;
  2516.   border: 0;
  2517.   overflow: initial;
  2518. }
  2519. .p-profiles .profile-head .c-history .entry,
  2520. .p-profiles .profile-head .c-history .entry:first-child {
  2521.   padding-top: 8px;
  2522.   margin-top: 0;
  2523. }
  2524. .p-profiles .profile-head .c-history .entry:before {
  2525.   content: '';
  2526.   display: block;
  2527.   position: absolute;
  2528.   right: -8px;
  2529.   bottom: 0;
  2530.   left: 56px;
  2531.   height: 1px;
  2532.   background-color: none;
  2533.   pointer-events: none;
  2534. }
  2535. .p-profiles .profile-head .c-history .entry:last-child:before {
  2536.   display: none;
  2537. }
  2538.  
  2539. /* Полноразмерная ссылка .entry, работает только для .c-history & .l-menu */
  2540. .p-profiles .profile-head .c-history .entry:hover a {
  2541.   background-color: var(--bg2);
  2542. }
  2543. .p-profiles .profile-head .c-history .entry a {
  2544.   display: block;
  2545.   padding: 8px;
  2546.   margin: -8px;
  2547. }
  2548. .p-profiles .profile-head .c-history .entry a:after {
  2549.   content: '';
  2550.   clear: both;
  2551.   display: block;
  2552. }
  2553. .p-profiles .profile-head .c-history .entry:hover .title {
  2554.   text-decoration: none;
  2555. }
  2556. /* END of FULLENTRY LINK */
  2557.  
  2558. .p-profiles .profile-head .c-history .entry img {
  2559.   margin: 0 16px 0 0;
  2560.   max-height: 72px;
  2561.   max-width: 40px;
  2562.   border-radius: 2px;
  2563. }
  2564.  
  2565.  
  2566.  
  2567.  
  2568.  
  2569.  
  2570.  
  2571.  
  2572. .b-modal>.inner {
  2573.   padding: 16px 24px;
  2574. }
  2575. .b-modal .subheadline {
  2576.   font-size: 20px;
  2577.   font-weight: 400;
  2578.   text-transform: none;
  2579. }
  2580.  
  2581.  
  2582.  
  2583. .p-profiles .profile-head .c-info .c-additionals {
  2584.   margin-top: 8px;
  2585.   margin-bottom: 8px;
  2586. }
  2587. .p-profiles .profile-head .c-info .c-additionals b {
  2588.   padding-right: 8px;
  2589.   color: var(--text-sec);
  2590.   font-size: 0;
  2591. }
  2592. .p-profiles .profile-head .c-info .c-additionals b:after {
  2593.   content: 'Активность на сайте:';
  2594.   font-size: 14px;
  2595. }
  2596.  
  2597. /* ICON | EDIT ABOUT ME PROFILE'S BLOCK */
  2598. .p-animes .item-edit,
  2599. .p-mangas .item-edit,
  2600. .p-profiles-show .about .item-edit {
  2601.   display: inline-block;
  2602.   width: 40px;
  2603.   height: 40px;
  2604.   padding: 8px;
  2605.   margin: 4px;
  2606.   border-radius: 2px;
  2607.   color: var(--text-sec) !important;
  2608. }
  2609. .p-animes .item-edit:hover,
  2610. .p-mangas .item-edit:hover,
  2611. .p-profiles-show .about .item-edit:hover {
  2612.   background-color: var(--bg);
  2613.   color: var(--text) !important
  2614. }
  2615. .p-animes .item-edit:before,
  2616. .p-mangas .item-edit:before,
  2617. .p-profiles-show .about .item-edit:before {
  2618.   width: 24px !important;
  2619.   font-family: 'Material Icons' !important;
  2620.   font-size: 24px !important;
  2621.   font-weight: 400 !important;
  2622.   line-height: 1 !important;
  2623.  
  2624.   text-transform: none;
  2625.   letter-spacing: normal;
  2626.   word-wrap: normal;
  2627.   white-space: nowrap;
  2628.   direction: ltr;
  2629.  
  2630.   /* Support for all WebKit browsers. */
  2631.   -webkit-font-smoothing: antialiased;
  2632.   /* Support for Safari and Chrome. */
  2633.   text-rendering: optimizeLegibility;
  2634.  
  2635.   /* Support for Firefox. */
  2636.   -moz-osx-font-smoothing: grayscale;
  2637.  
  2638.   /* Support for IE. */
  2639.   font-feature-settings: 'liga';
  2640. }
  2641. .p-animes .item-edit:before,
  2642. .p-mangas .item-edit:before,
  2643. .p-profiles-show .about .item-edit:before {
  2644.   content: 'edit';
  2645. }
  2646. /* END of ICON */
  2647.  
  2648.  
  2649.  
  2650.  
  2651. /* CHIP | USER PLATES */
  2652. .b-user16 {
  2653.   vertical-align: middle;
  2654.   padding: 0 .5rem;
  2655.   margin: 0 .5rem;
  2656.   background-color: var(--bg2);
  2657.   border-radius: .5rem;
  2658.   font-size: .875rem;
  2659.   font-weight: 400;
  2660.   line-height: 1rem !important;
  2661.   text-transform: initial;
  2662. }
  2663. .b-user16:hover {
  2664.   color: #f2f2f2 !important;
  2665.   background-color: var(--text-sec);
  2666. }
  2667. .b-user16:after {
  2668.   display: none !important;
  2669. }
  2670. .b-user16:hover a {
  2671.   color: #fff !important;
  2672.   text-decoration: none;
  2673. }
  2674. .b-user16 > a > span {
  2675.   padding: 0;
  2676. }
  2677. .b-user16:hover span {
  2678.   text-decoration: none;
  2679. }
  2680. .b-user16 img {
  2681.   position: static;
  2682.   display: inline-block;
  2683.   vertical-align: bottom;
  2684.   width: 16px !important;
  2685.   padding: 0;
  2686.   margin: 0 .375rem 0 -.5rem !important;
  2687.   margin-top: 0 !important;
  2688.   border-radius: .5rem;
  2689. }
  2690. .b-animes-menu .friend-rate .b-user16 {
  2691.   display: inline-block;
  2692.   margin: 0 .5rem 0 0;
  2693. }
  2694. .b-quote .quoteable a.b-user16 {
  2695.   padding: 0 .5rem;
  2696.   margin: 0 .5rem 0 0;
  2697. }
  2698. .b-clubs .b-user16 {
  2699.   margin: 0 .5rem 0 0;
  2700. }
  2701. /* COLOR */
  2702. .b-user16,
  2703. .b-user16 a {
  2704.   color: var(--text) !important;
  2705. }
  2706. /* END of USER PLATES */
  2707.  
  2708.  
  2709. /**
  2710.  * MATERIAL ICON
  2711.  * Замена иконок.
  2712.  *
  2713.  * ПРАВИЛА:
  2714.  * Следующие настройки касаются только иконок. Их цвета, родители и их положение настраивается отдельно.
  2715.  * Иконки должны располагаться в псевдоэлементе :before
  2716.  * Иконки используются в двух вариантах: 18px и 24px
  2717.  * Следовательно родители иконок должны быть высотой 32px или 40px
  2718.  *
  2719.  * BUG:
  2720.  * IE doesn't support Materail Icon's font format [.woff2]
  2721.  */
  2722.  
  2723. @font-face {
  2724.   font-family: 'Material Icons';
  2725.   font-style: normal;
  2726.   font-weight: 400;
  2727.   src: local('Material Icons'),
  2728.        local('MaterialIcons-Regular'),
  2729.        url(https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
  2730.        url(https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/MaterialIcons-Regular.woff) format('woff'),
  2731.        url(https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/MaterialIcons-Regular.eot) format('eot'),
  2732.        url(https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/MaterialIcons-Regular.ttf) format('truetype');
  2733. }
  2734.  
  2735. /* LARGE ICON */
  2736. .c-actions > *:before,
  2737. .profile-actions > *:before,
  2738. .l-top_menu .menu-mobile .search:before,
  2739. .l-top_menu .menu-mobile .menu:before,
  2740. .l-top_menu .menu-mobile #sign_in:before,
  2741. .l-top_menu .menu-userbox .search:before,
  2742. .l-top_menu .menu-userbox .menu:before,
  2743. .l-top_menu .menu-userbox #sign_in:before,
  2744. .l-top_menu .to-mobile-forum:before,
  2745. .l-top_menu .menu-items .submenu-toggler:before,
  2746. .l-top_menu .menu-items .submenu-toggler.active:before,
  2747. header.head h1 a.back:before,
  2748. header.head h2 a.back:before,
  2749. .item-mobile:before,
  2750. .editor-controls > span:before,
  2751. .b-add_to_list .trigger-arrow:before,
  2752. .b-add_to_list.expanded .trigger-arrow:before,
  2753. .b-add_to_list.watching .edit:before,
  2754. .b-add_to_list.rewatching .edit:before,
  2755. .b-add_to_list.on_hold .edit:before,
  2756. .b-add_to_list.dropped .edit:before,
  2757. .b-add_to_list .plus:before,
  2758. .b-add_to_list.completed .edit:before,
  2759. .b-add_to_list.planned .edit:before,
  2760. .b-list_switchers > .switcher:before,
  2761. .p-messages .mass-actions .action > a:before {
  2762.   width: 24px !important;
  2763.   font-family: 'Material Icons' !important;
  2764.   font-size: 24px !important;
  2765.   font-weight: 400 !important;
  2766.   line-height: 1 !important;
  2767.  
  2768.   text-transform: none;
  2769.   letter-spacing: normal;
  2770.   word-wrap: normal;
  2771.   white-space: nowrap;
  2772.   direction: ltr;
  2773.  
  2774.   /* Support for all WebKit browsers. */
  2775.   -webkit-font-smoothing: antialiased;
  2776.   /* Support for Safari and Chrome. */
  2777.   text-rendering: optimizeLegibility;
  2778.   /* Support for Firefox. */
  2779.   -moz-osx-font-smoothing: grayscale;
  2780.   /* Support for IE. */
  2781.   font-feature-settings: 'liga';
  2782. }
  2783.  
  2784. /* SMALL ICON */
  2785. .l-top_menu .menu-items>.entry.calendar>a:before,
  2786. .l-top_menu .menu-items>.entry.info>a:before,
  2787. .l-top_menu .menu-userbox #sign_in:before {
  2788.   display: block;
  2789.   width: 18px !important;
  2790.   font-family: 'Material Icons' !important;
  2791.   font-size: 18px !important;
  2792.   font-weight: 400 !important;
  2793.   line-height: 1 !important;
  2794.  
  2795.   text-transform: none;
  2796.   letter-spacing: normal;
  2797.   word-wrap: normal;
  2798.   white-space: nowrap;
  2799.   direction: ltr;
  2800.  
  2801.   /* Support for all WebKit browsers. */
  2802.   -webkit-font-smoothing: antialiased;
  2803.   /* Support for Safari and Chrome. */
  2804.   text-rendering: optimizeLegibility;
  2805.   /* Support for Firefox. */
  2806.   -moz-osx-font-smoothing: grayscale;
  2807.   /* Support for IE. */
  2808.   font-feature-settings: 'liga';
  2809. }
  2810.  
  2811.  
  2812.  
  2813. .headline>a:before,
  2814. .midheadline > a:before,
  2815. .subheadline > a:before {
  2816.   display: block;
  2817.   font-family: 'Material Icons' !important;
  2818.   font-size: 18px !important;
  2819.   font-weight: 400 !important;
  2820.   line-height: 32px !important;
  2821.  
  2822.   text-transform: none;
  2823.   letter-spacing: normal;
  2824.   word-wrap: normal;
  2825.   white-space: nowrap;
  2826.   direction: ltr;
  2827.  
  2828.   /* Support for all WebKit browsers. */
  2829.   -webkit-font-smoothing: antialiased;
  2830.   /* Support for Safari and Chrome. */
  2831.   text-rendering: optimizeLegibility;
  2832.   /* Support for Firefox. */
  2833.   -moz-osx-font-smoothing: grayscale;
  2834.   /* Support for IE. */
  2835.   font-feature-settings: 'liga';
  2836. }
  2837. .headline>a:before,
  2838. .midheadline > a:before,
  2839. .subheadline > a:before {
  2840.   content: 'chevron_right';
  2841. }
  2842.  
  2843.  
  2844.  
  2845. /* Иконки переключения вида каталога: список/постеры */
  2846. .b-list_switchers .switcher.list:before {
  2847.   content: 'view_list';
  2848. }
  2849. .b-list_switchers .switcher.lines:before {
  2850.   content: 'view_headline';
  2851. }
  2852. .b-list_switchers .switcher.posters:before {
  2853.   content: 'view_module';
  2854. }
  2855. /* Иконки списка аниме/манги пользователя */
  2856. .b-add_to_list .plus:before {
  2857.   content: "add";
  2858. }
  2859. .b-add_to_list.planned .edit:before {
  2860.   content: "event";
  2861. }
  2862. .b-add_to_list.watching .edit:before {
  2863.   content: "play_arrow";
  2864. }
  2865. .b-add_to_list.completed .edit:before {
  2866.   content: "done";
  2867. }
  2868. .b-add_to_list.rewatching .edit:before {
  2869.   content: "replay";
  2870. }
  2871. .b-add_to_list.on_hold .edit:before {
  2872.   content: "query_builder";
  2873. }
  2874. .b-add_to_list.dropped .edit:before {
  2875.   content: "delete";
  2876. }
  2877. .b-add_to_list .trigger-arrow:before {
  2878.   content: "arrow_drop_down";
  2879.   transition: 240ms;
  2880. }
  2881. .b-add_to_list.expanded .trigger-arrow:before {
  2882.   content: "arrow_drop_down";
  2883.   transform: rotate(180deg);
  2884. }
  2885. /* Иконки верхнего меню */
  2886. .l-top_menu .menu-items>.entry.calendar>a:before {
  2887.   content: "today";
  2888. }
  2889. .l-top_menu .menu-items>.entry.info>a:before {
  2890.   content: "info";
  2891. }
  2892. .l-top_menu .menu-userbox #sign_in:before {
  2893.   content: "exit_to_app";
  2894. }
  2895. .l-top_menu .to-mobile-forum:before {
  2896.   content: "forum";
  2897. }
  2898. .l-top_menu .menu-items .submenu-toggler:before {
  2899.   content: 'arrow_drop_down'
  2900. }
  2901. .l-top_menu .menu-items .submenu-toggler.active:before {
  2902.   content: "arrow_drop_down";
  2903.   transform: rotate(180deg);
  2904. }
  2905. /* Иконки профиля */
  2906. .profile-actions .mail:before {
  2907.   content: "mail";
  2908. }
  2909. .profile-actions .talk:before {
  2910.   content: "message";
  2911. }
  2912. .profile-actions .fav-add:before {
  2913.   content: "person_add";
  2914. }
  2915. .profile-actions .fav-remove:before {
  2916.   content: "person";
  2917.   color: var(--main-col);
  2918. }
  2919. .profile-actions .fav-remove:hover:before {
  2920.   content: "person_outline";
  2921.   color: inherit;
  2922. }
  2923. .profile-actions .ignore-add:before {
  2924.   content: "do_not_disturb_on";
  2925. }
  2926. .profile-actions .ignore-remove:before {
  2927.   content: "do_not_disturb_off";
  2928. }
  2929. .profile-actions .settings:before {
  2930.   content: "settings";
  2931. }
  2932. .profile-actions .ban:before {
  2933.   content: "gavel";
  2934. }
  2935. /* Иконки текстового редактора */
  2936. .buttons .editor-bold:before {
  2937.   content: "format_bold";
  2938. }
  2939. .buttons .editor-italic:before {
  2940.   content: "format_italic";
  2941. }
  2942. .buttons .editor-underline:before {
  2943.   content: "format_underlined";
  2944. }
  2945. .buttons .editor-strike:before {
  2946.   content: "strikethrough_s";
  2947. }
  2948. .buttons .editor-link:before {
  2949.   content: "insert_link";
  2950. }
  2951. .buttons .editor-image:before {
  2952.   content: "insert_photo";
  2953. }
  2954. .buttons .editor-quote:before {
  2955.   content: "format_quote";
  2956. }
  2957. .buttons .editor-spoiler:before {
  2958.   content: "error_outline";
  2959. }
  2960. .buttons .editor-file:before {
  2961.   content: "attach_file";
  2962. }
  2963. .buttons .editor-smiley:before {
  2964.   content: "insert_emoticon";
  2965. }
  2966. /* Иконки под постером аниме/манги/персонажа и т.д. */
  2967. .c-actions .edit:before {
  2968.   content: "build";
  2969. }
  2970. .c-actions .fav-remove:hover:before,
  2971. .c-actions .fav-add:before {
  2972.   content: "favorite_border";
  2973. }
  2974. .c-actions .fav-add:hover:before,
  2975. .c-actions .fav-remove:before {
  2976.   content: "favorite";
  2977. }
  2978. .c-actions .new_review:before {
  2979.   content: "rate_review";
  2980. }
  2981. .c-actions .new_comment:before {
  2982.   content: "chat_bubble";
  2983. }
  2984. /* Специальная иконка открывающая меню комментария/топика и т.д. */
  2985. .item-mobile:before {
  2986.   content: "more_vert";
  2987. }
  2988. /* Иконка "закрыть" */
  2989. .b-dialog.aside-expanded > .inner > .item-mobile:before,
  2990. .b-message.aside-expanded > .inner > .item-mobile:before,
  2991. .b-comment.aside-expanded > .inner > .item-mobile:before {
  2992.   content: "clear";
  2993. }
  2994. /* Иконка "назад" */
  2995. header.head h1 a.back:before,
  2996. header.head h2 a.back:before {
  2997.   content: "arrow_back";
  2998. }
  2999. /* Иконки в почте пользователя ("Отметить прочитанным" и "Удалить все") */
  3000. .p-messages .mass-actions .action:nth-child(1) > a:before {
  3001.   content: 'done_all';
  3002. }
  3003. .p-messages .mass-actions .action:nth-child(2) > a:before {
  3004.   content: 'delete_sweep';
  3005. }
  3006.  
  3007.  
  3008.  
  3009. .p-dialogs header.head,
  3010. .p-messages header.head,
  3011. .p-profiles-edit header.head {
  3012.   padding: 16px 16px 8px;
  3013.   margin: -16px -16px 0;
  3014.   background-color: #e0e0e0;
  3015. }
  3016.  
  3017. header.head h1,
  3018. header.head h2 {
  3019.   padding: 8px 0;
  3020.   line-height: 32px;
  3021.   color: inherit;
  3022. }
  3023. header.head h1 a.back,
  3024. header.head h2 a.back {
  3025.   vertical-align: top;
  3026.   width: 40px;
  3027.   height: 40px;
  3028.   padding: 8px;
  3029.   margin: -4px 16px -4px -8px;
  3030.   border-radius: 2px;
  3031.   color: var(--text-sec) !important;
  3032.   line-height: initial;
  3033. }
  3034. header.head h1 > a.back:hover,
  3035. header.head h2 > a.back:hover {
  3036.   background-color: var(--bg);
  3037.   color: var(--text) !important
  3038. }
  3039. header.head h1 > a.back:active,
  3040. header.head h2 > a.back:active {
  3041.   color: var(--text) !important
  3042. }
  3043. header.head h1 a.back:before,
  3044. header.head h2 a.back:before {
  3045.   position: static;
  3046.   color: inherit;
  3047. }
  3048. header.head h1 a.back:after,
  3049. header.head h2 a.back:after {
  3050.   display: none;
  3051. }
  3052.  
  3053.  
  3054.  
  3055.  
  3056. .buttons {
  3057.   margin-right: 0;
  3058. }
  3059. .delete-controls > span,
  3060. .moderation-controls > span,
  3061. .main-controls > span,
  3062. .main-controls > a,
  3063. .buttons .item-edit {
  3064.   width: 220px;
  3065.   padding: 11px 16px;
  3066.   margin-right: auto !important;
  3067.   margin-left: auto !important;
  3068.   color: var(--text) !important
  3069.   line-height: 18px !important;
  3070. }
  3071. .delete-controls > span:hover,
  3072. .moderation-controls > span:hover,
  3073. .main-controls > span:hover,
  3074. .main-controls > a:hover,
  3075. .buttons .item-edit:hover {
  3076.   background-color: var(--bg);
  3077.   color: var(--text) !important
  3078. }
  3079.  
  3080. @media only screen and (min-width: 1025px) {
  3081.   .delete-controls > span,
  3082.   .moderation-controls > span,
  3083.   .main-controls > span,
  3084.   .main-controls > a,
  3085.   .buttons .item-edit {
  3086.     width: 32px;
  3087.     height: 32px;
  3088.     padding: 7px;
  3089.     margin-left: 8px !important;
  3090.     color: var(--text-sec) !important;
  3091.     line-height: 18px !important;
  3092.   }
  3093. }
  3094.  
  3095. .item-mobile {
  3096.   position: relative;
  3097.   width: 40px;
  3098.   height: 40px;
  3099.   padding: 8px;
  3100.   margin: 4px -8px;
  3101.   margin-left: 8px !important;
  3102.   border-radius: 50%;
  3103.   color: var(--text-sec);
  3104.   z-index: 4;
  3105. }
  3106. .item-mobile:hover,
  3107. .item-mobile:active {
  3108.   background-color: var(--bg);
  3109.   color: var(--text-sec);
  3110. }
  3111.  
  3112. .b-db_entry-note .name-container .b-user_rate .b-add_to_list .trigger .plus::before,
  3113. .b-db_entry-note .name-container .b-user_rate .b-add_to_list .trigger .edit::before,
  3114. .b-db_entry-note .name-container .b-user_rate .b-add_to_list .trigger .trigger-arrow::before,
  3115. .b-db_entry-note .name-container .b-user_rate .b-add_to_list .option .plus::before,
  3116. .b-db_entry-note .name-container .b-user_rate .b-add_to_list .option .edit::before,
  3117. .b-db_entry-note .name-container .b-user_rate .b-add_to_list .option .trigger-arrow::before,
  3118. .buttons .item-summary:before,
  3119. .buttons .item-ignore:before,
  3120. .buttons .item-quote:before,
  3121. .buttons .item-reply:before,
  3122. .buttons .item-edit:before,
  3123. .buttons .item-delete:before,
  3124. .buttons .item-moderation:before,
  3125. .buttons .item-cancel:before,
  3126. .buttons .item-request-reject:before,
  3127. .buttons .item-apply:before,
  3128. .buttons .item-request-confirm:before,
  3129. .buttons .item-delete-confirm:before,
  3130. .buttons .item-abuse:before,
  3131. .buttons .item-spoiler:before,
  3132. .buttons .item-offtopic:before,
  3133. .buttons .item-delete-cancel:before,
  3134. .buttons .item-moderation-cancel:before {
  3135.   vertical-align: top;
  3136.   width: 18px !important;
  3137.   font-family: 'Material Icons' !important;
  3138.   font-size: 18px !important;
  3139.   font-weight: 400 !important;
  3140.   line-height: 1 !important;
  3141.  
  3142.   text-transform: none;
  3143.   letter-spacing: normal;
  3144.   word-wrap: normal;
  3145.   white-space: nowrap;
  3146.   direction: ltr;
  3147.  
  3148.   /* Support for all WebKit browsers. */
  3149.   -webkit-font-smoothing: antialiased;
  3150.   /* Support for Safari and Chrome. */
  3151.   text-rendering: optimizeLegibility;
  3152.   /* Support for Firefox. */
  3153.   -moz-osx-font-smoothing: grayscale;
  3154.   /* Support for IE. */
  3155.   font-feature-settings: 'liga';
  3156. }
  3157. .buttons .item-ignore:before {
  3158.   content: "do_not_disturb_on";
  3159. }
  3160. .buttons .item-quote:before {
  3161.   content: "format_quote";
  3162. }
  3163. .buttons .item-reply:before {
  3164.   content: "reply";
  3165. }
  3166. .buttons .item-edit:before {
  3167.   content: "mode_edit";
  3168. }
  3169. .buttons .item-delete:before {
  3170.   content: "delete";
  3171. }
  3172. .buttons .item-moderation:before {
  3173.   content: "flag";
  3174. }
  3175. .buttons .item-cancel:before,
  3176. .buttons .item-request-reject:before,
  3177. .buttons .item-delete-cancel:before,
  3178. .buttons .item-moderation-cancel:before {
  3179.   content: "clear";
  3180. }
  3181. .buttons .item-spoiler:before {
  3182.   content: "sms_failed";
  3183. }
  3184. .buttons .item-abuse:before {
  3185.   content: "pan_tool";
  3186. }
  3187. .buttons .item-offtopic:before {
  3188.   content: "speaker_notes_off";
  3189. }
  3190. .buttons .item-summary:before {
  3191.   content: "check_circle";
  3192. }
  3193. .buttons .item-delete-confirm:before {
  3194.   content: "delete";
  3195. }
  3196. .buttons .item-apply:before,
  3197. .buttons .item-request-confirm:before,
  3198. .buttons .item-delete-confirm:before {
  3199.   content: "done";
  3200. }
  3201.  
  3202.  
  3203.  
  3204. .l-top_menu .menu-mobile .menu:before,
  3205. .l-top_menu .menu-userbox .menu:before,
  3206. .l-top_menu .menu-mobile .search:before,
  3207. .l-top_menu .menu-userbox .search:before {
  3208.   width: 24px !important;
  3209.   font-family: 'Material Icons' !important;
  3210.   font-size: 24px !important;
  3211.   font-weight: 400 !important;
  3212.   line-height: 1 !important;
  3213.  
  3214.   text-transform: none;
  3215.   letter-spacing: normal;
  3216.   word-wrap: normal;
  3217.   white-space: nowrap;
  3218.   direction: ltr;
  3219.  
  3220.   /* Support for all WebKit browsers. */
  3221.   -webkit-font-smoothing: antialiased;
  3222.   /* Support for Safari and Chrome. */
  3223.   text-rendering: optimizeLegibility;
  3224.   /* Support for Firefox. */
  3225.   -moz-osx-font-smoothing: grayscale;
  3226.   /* Support for IE. */
  3227.   font-feature-settings: 'liga';
  3228. }
  3229.  
  3230. .l-top_menu .menu-mobile .menu:before,
  3231. .l-top_menu .menu-userbox .menu:before {
  3232.   content: "menu";
  3233. }
  3234. .l-top_menu .menu-mobile .search:before,
  3235. .l-top_menu .menu-userbox .search:before {
  3236.   content: "search";
  3237. }
  3238.  
  3239.  
  3240.  
  3241.  
  3242.  
  3243. .tooltip-inner {
  3244.   min-height: 56px;
  3245.   padding: 14px 16px;
  3246.   border: 0;
  3247.   border-radius: 2px;
  3248.   overflow: hidden;
  3249.   box-shadow: 0 4px 10px 2px rgba(0,0,0,0.24);
  3250. }
  3251. .tooltip-arrow {
  3252.   display: none;
  3253. }
  3254. .b-catalog_entry-tooltip .inner a.name {
  3255.   font-size: .875rem;
  3256. }
  3257. .b-catalog_entry-tooltip .inner .line .key {
  3258. }
  3259.  
  3260.  
  3261.  
  3262. /* TEXTEDITOR | SHIKI EDITOR */
  3263. .b-shiki_editor .body {
  3264.   padding: 0 !important;
  3265. }
  3266. .b-shiki_editor .body > .preview .body {
  3267.   padding-left: 56px !important;
  3268. }
  3269.  
  3270. .editor-controls > span {
  3271.   width: 40px;
  3272.   height: 40px;
  3273.   padding: 8px;
  3274.   margin: 0 8px 0 0 !important;
  3275.   border-radius: 2px;
  3276.   color: var(--text) !important
  3277. }
  3278. .editor-controls > span:hover {
  3279.   color: var(--text) !important
  3280. }
  3281. .editor-controls > span.selected {
  3282.   color: var(--main-col) !important;
  3283. }
  3284.  
  3285. /* Расширяем инпут */
  3286. .buttons .editor-file {
  3287.   position: relative;
  3288. }
  3289. /* TODO: для чего [.buttons .editor-file a] ? */
  3290. .buttons .editor-file span,
  3291. .buttons .editor-file a {
  3292.   top: 0;
  3293.   left: 0;
  3294.   width: 40px;
  3295.   height: 40px;
  3296.   margin: 0 !important;
  3297. }
  3298. .buttons .editor-file input {
  3299.   left: 0;
  3300.   width: 40px;
  3301.   height: 40px;
  3302.   border: 0;
  3303. }
  3304. .b-shiki_editor .links,
  3305. .b-shiki_editor .images,
  3306. .b-shiki_editor .quotes,
  3307. .b-shiki_editor .email,
  3308. .b-shiki_editor .upload {
  3309.   height: 32px;
  3310.   padding-left: 0;
  3311.   line-height: 32px;
  3312. }
  3313. .b-shiki_editor aside.buttons {
  3314.   margin: 0;
  3315.   padding: .25rem 0;
  3316. }
  3317. .b-shiki_editor aside.markers {
  3318.   height: auto;
  3319.   padding: .75rem 0;
  3320. }
  3321. .b-shiki_editor .body .editor textarea {
  3322.   padding: .5rem 1rem;
  3323.   margin: 0;
  3324.   border-radius: 2px;
  3325.   font-size: 1rem;
  3326.   line-height: 1.25rem;
  3327. }
  3328. .b-shiki_editor footer input[type=submit],
  3329. .b-shiki_editor footer .unpreview,
  3330. .b-shiki_editor footer .preview {
  3331.   vertical-align: top;
  3332.   margin-right: 8px;
  3333. }
  3334. .b-shiki_editor.previewed footer .unpreview {
  3335.   border: 0;
  3336.   font-size: 0;
  3337. }
  3338. .b-shiki_editor.previewed footer .unpreview:after {
  3339.   content: 'Назад';
  3340.   vertical-align: top;
  3341.   font-size: 14px;
  3342. }
  3343. .b-shiki_editor footer .cancel {
  3344.   border: 0;
  3345. }
  3346. .b-shiki_editor footer .cancel:hover {
  3347.   color: var(--main-col);
  3348. }
  3349. .about-bb_codes {
  3350.   font-size: 0 !important;
  3351.   padding: 0 1rem;
  3352.   margin-top: 0 !important;
  3353.   border-radius: .125rem;
  3354.   line-height: 2rem !important;
  3355. }
  3356. .about-bb_codes:before {
  3357.   content: 'help'; /* NOT outline (!) see updated guideline (2016-12) */
  3358.   display: inline-block;
  3359.   vertical-align: top;
  3360.   font-family: 'Material Icons' !important;
  3361.   font-size: 24px !important;
  3362.   font-weight: 400 !important;
  3363.   line-height: 32px !important;
  3364.  
  3365.   text-transform: none;
  3366.   letter-spacing: normal;
  3367.   word-wrap: normal;
  3368.   white-space: nowrap;
  3369.   direction: ltr;
  3370.  
  3371.   /* Support for all WebKit browsers. */
  3372.   -webkit-font-smoothing: antialiased;
  3373.   /* Support for Safari and Chrome. */
  3374.   text-rendering: optimizeLegibility;
  3375.   /* Support for Firefox. */
  3376.   -moz-osx-font-smoothing: grayscale;
  3377.   /* Support for IE. */
  3378.   font-feature-settings: 'liga';
  3379. }
  3380. @media only screen and (min-width: 768px) {
  3381.   .about-bb_codes:before {
  3382.     content: 'Справка';
  3383.     font-family: 'Roboto' !important;
  3384.     font-size: 14px !important;
  3385.     font-weight: 500 !important;
  3386.     text-transform: uppercase;
  3387.   }
  3388. }
  3389. /* END of SHIKI_EDITOR */
  3390. /* END of TEXTEDITOR */
  3391.  
  3392. .b-new_marker,
  3393. .b-offtopic_marker,
  3394. .b-summary_marker {
  3395.   width: auto !important;
  3396.   margin: 0 !important;
  3397.   margin-top: 1px !important;
  3398.   margin-left: 8px !important;
  3399. }
  3400.  
  3401. .b-new_marker:before,
  3402. .b-offtopic_marker:before,
  3403. .b-summary_marker:before {
  3404.   position: static !important;
  3405.   width: auto !important;
  3406.   padding: 0 4px !important;
  3407.   margin-top: 8px;
  3408.   border: 0 !important;
  3409.   border-radius: 2px;
  3410.   font-size: 10px !important;
  3411.   font-weight: 500;
  3412.   line-height: 16px !important;
  3413.   text-transform: capitalize;
  3414. }
  3415.  
  3416. .b-shiki_editor .b-summary_marker,
  3417. .b-shiki_editor .b-summary_marker:before,
  3418. .b-shiki_editor .b-offtopic_marker,
  3419. .b-shiki_editor .b-offtopic_marker:before {
  3420.   vertical-align: top;
  3421.   padding: 0 8px !important;
  3422.   margin: 0 !important;
  3423.   font-size: 12px !important;
  3424.   line-height: 24px !important;
  3425. }
  3426.  
  3427. .b-shiki_editor .b-summary_marker,
  3428. .b-shiki_editor .b-offtopic_marker {
  3429.   padding: 0 !important;
  3430.   margin-left: 8px !important;
  3431. }
  3432. /* END of SHIKI_EDITOR */
  3433.  
  3434.  
  3435.  
  3436. /* COLOR | THIRD PART  */
  3437. /* TODO: Merge with other color settings */
  3438. .subheadline,
  3439. .about-bb_codes:before,
  3440. .p-profiles-show .lifetime .title > .label:before,
  3441. .b-catalog_entry .cover .misc span,
  3442. .b-user_rate .rate-show .note,
  3443. .p-profiles-show .profile-content .activity .title {
  3444.   color: var(--text-sec) !important;
  3445. }
  3446. .subheadline > a:hover,
  3447. .midheadline>a:hover,
  3448. .b-form .cancel:hover,
  3449. .b-dialog:before,
  3450. .b-message:before,
  3451. .b-comment:before,
  3452. .b-shiki_editor footer .unpreview:hover,
  3453. .b-shiki_editor footer .preview:hover,
  3454. .editor-controls > span:hover,
  3455. .c-actions > *:hover,
  3456. .about-bb_codes:hover,
  3457. .profile-actions > *:hover,
  3458. .p-profiles .profile-head .c-brief .avatar > img,
  3459. .b-collection-filters .block>.filter,
  3460. .b-entry-info .line .b-tag,
  3461. .b-catalog_entry-tooltip .inner .line .value .tag {
  3462.   background-color: var(--bg);
  3463. }
  3464. .bar.vertical .line .bar-container .value.narrow {
  3465.   background-color: var(--bg) !important;
  3466. }
  3467. /* END of COLOR */
  3468.  
  3469.  
  3470.  
  3471. /* FLOATED OPTIONS */
  3472. .b-options-floated {
  3473.   margin-top: 16px;
  3474.   font-size: 14px;
  3475.   font-weight: 500;
  3476.   line-height: 16px;
  3477. }
  3478.  
  3479. .b-options-floated.before-buttons-2 {
  3480.   padding-right: 112px;
  3481. }
  3482.  
  3483. .p-profiles-edit .b-options-floated,
  3484. .p-dialogs .b-options-floated,
  3485. .p-messages .b-options-floated {
  3486.   position: static;
  3487.   margin: 0 -16px 8px;
  3488.   padding: 0;
  3489.   background-color: #e0e0e0;
  3490.   text-align: left;
  3491.   white-space: nowrap;
  3492.   overflow: hidden;
  3493.   overflow-x: auto;
  3494. }
  3495.  
  3496. .p-profiles-edit .b-options-floated > a,
  3497. .p-dialogs .b-options-floated > a,
  3498. .p-messages .b-options-floated > a {
  3499.   display: inline-block;
  3500.   width: 33.3333%;
  3501.   min-width: 112px;
  3502.   height: 48px;
  3503.   padding: 0 12px;
  3504.   color: var(--text) !important
  3505.   font-size: 14px;
  3506.   font-weight: 500;
  3507.   line-height: 48px;
  3508.   text-align: center;
  3509.   text-transform: uppercase;
  3510. }
  3511.  
  3512. .p-profiles-edit .b-options-floated > a:hover,
  3513. .p-dialogs .b-options-floated > a:hover,
  3514. .p-messages .b-options-floated > a:hover {
  3515.   text-decoration: none;
  3516. }
  3517.  
  3518. .p-profiles-edit .b-options-floated > a.selected,
  3519. .p-dialogs .b-options-floated > a.selected,
  3520. .p-messages .b-options-floated > a.selected {
  3521.   border-bottom: 2px solid var(--main-col);
  3522. }
  3523.  
  3524. @media screen and (min-width: 481px) {
  3525.   .p-profiles-edit .b-options-floated > a,
  3526.   .p-dialogs .b-options-floated > a,
  3527.   .p-messages .b-options-floated > a {
  3528.     width: auto;
  3529.   }
  3530. }
  3531.  
  3532. .b-options-floated a span.brackets,
  3533. .b-options-floated .link span.brackets {
  3534.   display: inline-block;
  3535.   vertical-align: text-top;
  3536.   min-width: 20px;
  3537.   height: 16px;
  3538.   padding: 0 4px;
  3539.   background-color: var(--main-col);
  3540.   border-radius: 4px;
  3541.   color: #fff;
  3542.   font-size: 10px;
  3543.   font-weight: 500;
  3544.   line-height: 16px;
  3545.   text-align: center;
  3546. }
  3547.  
  3548. .p-profiles-edit .b-options-floated > a:after,
  3549. .p-dialogs .b-options-floated > a:after,
  3550. .p-messages .b-options-floated > a:after,
  3551. .b-options-floated a span.brackets:before,
  3552. .b-options-floated a span.brackets:after,
  3553. .b-options-floated .link span.brackets:before,
  3554. .b-options-floated .link span.brackets:after {
  3555.   display: none;
  3556. }
  3557.  
  3558. @media screen and (min-width: 481px) {
  3559.   .p-dialogs header.head,
  3560.   .p-messages header.head,
  3561.   .p-profiles-edit header.head {
  3562.     padding: 0;
  3563.     margin: 0;
  3564.     background-color: transparent;
  3565.   }
  3566.  
  3567.   .p-profiles-edit .b-options-floated,
  3568.   .p-dialogs .b-options-floated,
  3569.   .p-messages .b-options-floated {
  3570.     position: initial;
  3571.     margin: 0 -16px 8px;
  3572.     padding: 0;
  3573.     background-color: transparent;
  3574.     text-align: right;
  3575.   }
  3576. }
  3577. /* END of FLOATED OPTIONS */
  3578.  
  3579.  
  3580.  
  3581.  
  3582. /* USER'S MAIL ICONS – READ ALL & DELETE ALL */
  3583. .p-messages .mass-actions {
  3584.   position: absolute;
  3585.   top: 56px;
  3586.   right: 0;
  3587.   margin: 0 -.5rem;
  3588. }
  3589.  
  3590. .p-messages .mass-actions .action:after {
  3591.   display: none;
  3592. }
  3593.  
  3594. .p-messages .mass-actions > .action > a {
  3595.   width: 40px;
  3596.   height: 40px;
  3597.   padding: 8px;
  3598.   margin: 4px;
  3599.   border: 0;
  3600.   border-radius: 2px;
  3601.   color: var(--text-sec) !important;
  3602.   font-size: 0;
  3603.   line-height: 1;
  3604. }
  3605.  
  3606. .p-messages .mass-actions .action > a:hover {
  3607.   background-color: var(--bg);
  3608.   color: var(--text) !important
  3609. }
  3610. /* END of USER'S MAIL ICONS */
  3611.  
  3612.  
  3613.  
  3614.  
  3615. /* DB ENTRY NOTES */
  3616. /* TODO: MERGE WITH .c-history .entry */
  3617. .b-db_entry-note {
  3618.   position: relative;
  3619.   padding: 8px 0;
  3620.   margin: 0;
  3621.   border: 0;
  3622. }
  3623.  
  3624. .b-db_entry-note:first-child {
  3625.   padding-top: 8px;
  3626. }
  3627.  
  3628. .b-db_entry-note:before {
  3629.   content: '';
  3630.   position: absolute;
  3631.   right: -16px;
  3632.   bottom: 0;
  3633.   left: 56px;
  3634.   height: 1px;
  3635.   background-color: var(--bg);
  3636. }
  3637.  
  3638. .b-db_entry-note:last-child:before {
  3639.   display: none;
  3640. }
  3641.  
  3642. /* FIX */
  3643. .b-db_entry-note:before {
  3644.   right: 0;
  3645.   left: 64px;
  3646. }
  3647.  
  3648. .p-db_entries-related .b-db_entry-note {
  3649.   padding: 16px 0;
  3650. }
  3651.  
  3652. .p-db_entries-related .b-db_entry-note:first-child {
  3653.   padding-top: 16px;
  3654. }
  3655. /* END of DB ENTRY NOTES*/
  3656.  
  3657.  
  3658.  
  3659.  
  3660. /* MENU ENTRY REVIEW & CLUBS */
  3661. /* TODO: MERGE WITH .c-history .entry */
  3662. /* TODO: where [.calendar .entry]? */
  3663. .p-topics .l-menu .calendar .entry,
  3664. .p-topics .l-menu .reviews .entry,
  3665. .p-topics .l-menu .clubs .entry {
  3666.   position: relative;
  3667.   padding: 8px 0;
  3668.   margin: 0;
  3669.   border: 0;
  3670.   overflow: initial;
  3671. }
  3672.  
  3673. .p-topics .l-menu .calendar .entry:first-child,
  3674. .p-topics .l-menu .reviews .entry:first-child,
  3675. .p-topics .l-menu .clubs .entry:first-child {
  3676.   padding-top: 8px;
  3677.   margin-top: 0;
  3678. }
  3679.  
  3680. .p-topics .l-menu .calendar .entry:before,
  3681. .p-topics .l-menu .reviews .entry:before,
  3682. .p-topics .l-menu .clubs .entry:before {
  3683.   content: '';
  3684.   position: absolute;
  3685.   right: -8px;
  3686.   bottom: 0;
  3687.   left: 56px;
  3688.   height: 1px;
  3689.   background-color: var(--bg);
  3690.   pointer-events: none;
  3691. }
  3692.  
  3693. .p-topics .l-menu .calendar .entry:last-child:before,
  3694. .p-topics .l-menu .reviews .entry:last-child:before,
  3695. .p-topics .l-menu .clubs .entry:last-child:before {
  3696.   display: none;
  3697. }
  3698.  
  3699. /* Полноразмерная ссылка .entry, работает только для .l-menu */
  3700. .p-topics .l-menu .calendar .entry:hover a,
  3701. .p-topics .l-menu .reviews .entry:hover a,
  3702. .p-topics .l-menu .clubs .entry:hover a {
  3703.   background-color: var(--bg2);
  3704. }
  3705.  
  3706. .p-topics .l-menu .calendar .entry a,
  3707. .p-topics .l-menu .reviews .entry a,
  3708. .p-topics .l-menu .clubs .entry a {
  3709.   display: block;
  3710.   padding: 8px;
  3711.   margin: -8px;
  3712. }
  3713.  
  3714. .p-topics .l-menu .calendar .entry a:after,
  3715. .p-topics .l-menu .reviews .entry a:after,
  3716. .p-topics .l-menu .clubs .entry a:after {
  3717.   content: '';
  3718.   clear: both;
  3719.   display: block;
  3720. }
  3721.  
  3722. .p-topics .l-menu .calendar .entry:hover .title,
  3723. .p-topics .l-menu .reviews .entry:hover .title,
  3724. .p-topics .l-menu .clubs .entry:hover .title {
  3725.   text-decoration: none;
  3726. }
  3727.  
  3728. /* ADDITIONS */
  3729. .p-topics .l-menu .reviews .entry img {
  3730.   min-width: 40px;
  3731.   max-height: 64px;
  3732.   margin: 2px 16px 2px 0;
  3733.   border-radius: 2px;
  3734. }
  3735.  
  3736. .p-topics .l-menu .clubs .entry img {
  3737.   width: 40px;
  3738.   min-width: 40px;
  3739.   height: 40px;
  3740.   margin: 2px 16px 2px 0;
  3741.   border-radius: 2px;
  3742. }
  3743. /* END of MENU ENTRY REVIEW & CLUBS */
  3744.  
  3745.  
  3746.  
  3747.  
  3748. /* SIDEMENU LINKS */
  3749. .p-topics .l-menu .sticky-topics .topic,
  3750. .p-dashboards-show .contests .contest,
  3751. .p-topics .l-menu .contests .contest {
  3752.   padding: 8px;
  3753.   margin: 0 -8px;
  3754.   border: 0;
  3755. }
  3756.  
  3757. .p-topics .l-menu .sticky-topics .topic:first-child,
  3758. .p-dashboards-show .contests .contest:first-child,
  3759. .p-topics .l-menu .contests .contest:first-child {
  3760.   padding-top: 8px;
  3761.   margin-top: 0;
  3762. }
  3763.  
  3764. .p-topics .l-menu .sticky-topics .topic:hover,
  3765. .p-dashboards-show .contests .contest:hover,
  3766. .p-topics .l-menu .contests .contest:hover {
  3767.   background-color: var(--bg2);
  3768. }
  3769.  
  3770. .p-topics .l-menu .sticky-topics .topic .title,
  3771. .p-dashboards-show .contests .contest .title,
  3772. .p-topics .l-menu .contests .contest .title {
  3773.   color: inherit;
  3774.   line-height: 20px;
  3775. }
  3776.  
  3777. .p-topics .l-menu .sticky-topics .topic:hover .title,
  3778. .p-dashboards-show .contests .contest:hover .title,
  3779. .p-topics .l-menu .contests .contest:hover .title {
  3780.   color: inherit;
  3781.   text-decoration: none;
  3782. }
  3783.  
  3784. .p-topics .l-menu .sticky-topics .topic .title:after,
  3785. .p-dashboards-show .contests .contest .title:after,
  3786. .p-topics .l-menu .contests .contest .title:after {
  3787.   display: none;
  3788. }
  3789.  
  3790. .p-topics .l-menu .sticky-topics .topic .notice,
  3791. .p-dashboards-show .contests .contest .notice,
  3792. .p-topics .l-menu .contests .contest .notice {
  3793.   margin-top: 2px;
  3794.   line-height: 18px;
  3795. }
  3796. /* END of SIDEMENU LINKS */
  3797.  
  3798.  
  3799.  
  3800.  
  3801. /* EXPEREMENTAL CODE | OPEN DIALOG BY CLICK */
  3802. .b-dialog .to_dialog {
  3803.   position: absolute;
  3804.   top: 0;
  3805.   right: 0;
  3806.   bottom: 0;
  3807.   left: 0;
  3808.   margin: 0 -16px;
  3809.   font-size: 0;
  3810. }
  3811.  
  3812. .b-dialog:hover .to_dialog {
  3813.   background-color: rgba(0,0,0,.05);
  3814.   z-index: 0;
  3815. }
  3816.  
  3817. .b-dialog img,
  3818. .b-dialog a,
  3819. .b-dialog .buttons {
  3820.   position: relative;
  3821.   z-index: 2;
  3822. }
  3823. /* EXPEREMENTAL CODE | END */
  3824.  
  3825.  
  3826. /* EXPEREMENTAL CODE | USER RATE DIALOG */
  3827. .b-user_rate .b-form {
  3828.   position: fixed;
  3829.   top: 0;
  3830.   right: 0;
  3831.   bottom: 0;
  3832.   left: 0;
  3833.   width: 100%;
  3834.   max-width: 600px;
  3835.   height: 1px;
  3836.   min-height: 60%;
  3837.   max-height: 100%;
  3838.   padding: 16px 24px;
  3839.   margin: auto;
  3840.   background-color: #fff;
  3841.   border-radius: 2px;
  3842.   overflow-y: auto;
  3843.   box-shadow: 0 4px 16px 4px rgba(0,0,0,.36);
  3844.   z-index: 100;
  3845. }
  3846. .b-user_rate .b-form:before {
  3847.   content: 'Редактировать';
  3848.   display: block;
  3849.   margin: 8px 0;
  3850.   font-size: 20px;
  3851.   line-height: 1;
  3852. }
  3853. .b-user_rate .b-form:after {
  3854.   content: 'Чтобы закрыть окно нажми на кнопку "Отмена"';
  3855.   float: left;
  3856.   font-size: 12px;
  3857.   color: var(--text-sec);
  3858.   line-height: 32px;
  3859. }
  3860. .b-form .cancel {
  3861.   margin-right: 8px;
  3862.   margin-left: 0;
  3863.   border-bottom: 0;
  3864. }
  3865. /* EXPEREMENTAL CODE | END */
  3866.  
  3867. /**
  3868.  * PROFILE HEAD
  3869.  * Adaptive profile header includes: avatar, history, information, anime/manga bars.
  3870.  */
  3871.  
  3872. .p-profiles .profile-head {
  3873.   position: relative;
  3874.   overflow: visible;
  3875. }
  3876.  
  3877. .p-profiles .profile-head {
  3878.   min-height: 216px;
  3879.   padding-top: 3rem;
  3880.   margin-top: -1rem;
  3881.   background-color: none;
  3882. }
  3883.  
  3884. .p-profiles .profile-head .c-brief {
  3885.   position: relative;
  3886.   margin: -3rem -1rem 1rem;
  3887.   overflow: hidden;
  3888. }
  3889.  
  3890. .p-profiles .profile-head .c-brief:before {
  3891.   content: '';
  3892.   display: block;
  3893.   height: 0;
  3894.   padding-bottom: 0;
  3895. }
  3896.  
  3897. .p-profiles .profile-head .c-brief .avatar > img,
  3898. .p-profiles .profile-head .c-history {
  3899.   display: none;
  3900. }
  3901.  
  3902. @media screen and (min-width: 320px) {
  3903.   .p-profiles .profile-head .c-mobile-actions {
  3904.     display: none;
  3905.   }
  3906.  
  3907.   .p-profiles .profile-head .c-brief:before {
  3908.     content: '';
  3909.     display: block;
  3910.     height: 0;
  3911.     padding-bottom: 34%;
  3912.   }
  3913.  
  3914.   .p-profiles .profile-head .c-brief .avatar {
  3915.     float: none;
  3916.     max-width: 100%;
  3917.     margin: 0 auto;
  3918.     margin-top: -17%;
  3919.   }
  3920.  
  3921.   .p-profiles .profile-head .c-brief .avatar > img {
  3922.     display: block;
  3923.     width: 36%;
  3924.     max-width: 10rem;
  3925.     min-width: 5rem;
  3926.     margin: auto;
  3927.   }
  3928.  
  3929.   .p-profiles .profile-head .c-brief .avatar .profile-actions {
  3930.     display: block;
  3931.     position: absolute;
  3932.     width: 100%;
  3933.     padding: 0 .5rem;
  3934.     margin: 0 auto;
  3935.     margin-top: -15%;
  3936.     text-align: left;
  3937.   }
  3938.  
  3939.   .p-profiles .profile-head .c-brief .avatar .profile-actions > a:first-child {
  3940.     float: right;
  3941.     margin: 0 .25rem;
  3942.   }
  3943.  
  3944.   .profile-actions .fav-add,
  3945.   .profile-actions .fav-remove {
  3946.     float: right;
  3947.   }
  3948.  
  3949.   .p-profiles .profile-head .c-brief header {
  3950.     clear: both;
  3951.     text-align: center;
  3952.   }
  3953. }
  3954.  
  3955.  
  3956. @media screen and (min-width: 320px) and (max-width: 959px) {
  3957.   .p-profiles .profile-head .c-history {
  3958.     display: block;
  3959.     position: absolute;
  3960.     top: 0;
  3961.     right: 0;
  3962.     left: 0;
  3963.     width: auto;
  3964.     padding: 0 1rem;
  3965.     margin: 0 -1rem;
  3966.     background-color: rgba(0,0,0,.48);
  3967.     white-space: nowrap;
  3968.     overflow-x: auto;
  3969.     z-index: 1;
  3970.   }
  3971.  
  3972.   .p-profiles .profile-head .c-history > .subheadline {
  3973.     display: inline-block;
  3974.     vertical-align: top;
  3975.   }
  3976.  
  3977.   .p-profiles .profile-head .c-history > .subheadline > a {
  3978.     color: var(--text) !important;
  3979.   }
  3980.  
  3981.   .p-profiles .profile-head .c-history > .subheadline > a:before {
  3982.     display: none;
  3983.   }
  3984.  
  3985.   .p-profiles .profile-head .c-history > .block-list {
  3986.     display: inline-block;
  3987.     vertical-align: top;
  3988.     padding: .5rem;
  3989.     margin-left: .5rem;
  3990.   }
  3991.  
  3992.   .p-profiles .profile-head .c-history .entry {
  3993.     display: inline-block;
  3994.     vertical-align: top;
  3995.     min-width: 112px;
  3996.     height: 2rem;
  3997.     padding-right: .5rem;
  3998.     padding-left: .5rem;
  3999.     margin-left: .5rem;
  4000.   }
  4001.  
  4002.   .p-profiles .profile-head .c-history .entry:before {
  4003.     display: none;
  4004.   }
  4005.  
  4006.   .p-profiles .profile-head .c-history .entry .image-name {
  4007.     float: left;
  4008.     width: 32px;
  4009.     height: 32px;
  4010.     margin: -8px 8px -8px -8px;
  4011.     border-radius: 50%;
  4012.     font-size: 0;
  4013.     line-height: 0;
  4014.     overflow: hidden;
  4015.   }
  4016.  
  4017.   .p-profiles .profile-head .c-history .entry span.misc {
  4018.     display: none;
  4019.   }
  4020.  
  4021.   @media screen and (min-width: 600px) {
  4022.     .p-profiles .profile-head .c-history {
  4023.       padding: .25rem 1rem;
  4024.     }
  4025.   }
  4026. }
  4027.  
  4028.  
  4029. @media screen and (max-width: 767px) and (min-width: 481px), screen and (max-width: 767px) and (orientation: landscape) {
  4030.   .p-profiles .profile-head .c-history .entry:first-child {
  4031.     display: inline-block;
  4032.   }
  4033. }
  4034.  
  4035.  
  4036. @media screen and (min-width: 360px) {
  4037.   .profile-actions .settings,
  4038.   .profile-actions .fav-add,
  4039.   .profile-actions .fav-remove,
  4040.   .profile-actions .ignore-add,
  4041.   .profile-actions .ignore-remove,
  4042.   .profile-actions .ban {
  4043.     margin-left: .25rem;
  4044.   }
  4045. }
  4046.  
  4047.  
  4048. @media screen and (min-width: 360px) and (max-width: 599px) {
  4049.   .p-profiles .profile-head .c-mobile-actions {
  4050.     display: none;
  4051.   }
  4052.  
  4053.   .p-profiles .profile-head .c-brief .avatar .profile-actions {
  4054.     display: block;
  4055.   }
  4056. }
  4057.  
  4058.  
  4059. @media screen and (min-width: 480px) {
  4060.   .p-profiles .profile-head .c-brief .avatar .profile-actions {
  4061.     position: static;
  4062.     width: auto;
  4063.     padding: 0;
  4064.     margin-top: 1rem;
  4065.     margin-right: -12px;
  4066.     margin-left: -12px;
  4067.     text-align: center;
  4068.   }
  4069.  
  4070.   .p-profiles .profile-head .c-brief .avatar .profile-actions > a:first-child {
  4071.     float: none;
  4072.     margin: 0;
  4073.   }
  4074.  
  4075.   .profile-actions .fav-add,
  4076.   .profile-actions .fav-remove {
  4077.     float: none;
  4078.   }
  4079.  
  4080.   .p-profiles .profile-head .c-brief:before {
  4081.     padding-bottom: 48px;
  4082.   }
  4083.  
  4084.   .p-profiles .profile-head .c-brief .avatar {
  4085.     float: left;
  4086.     position: relative;
  4087.     max-width: 172px;
  4088.     margin: 1rem 1rem 1rem .5rem;
  4089.   }
  4090.  
  4091.   .p-profiles .profile-head .c-brief .avatar img {
  4092.     width: 120px;
  4093.   }
  4094.  
  4095.   .p-profiles .profile-head .c-brief header {
  4096.     clear: none;
  4097.     padding: 1rem 0;
  4098.     text-align: left;
  4099.   }
  4100. }
  4101.  
  4102.  
  4103. @media screen and (min-width: 600px) {
  4104.   .p-profiles .profile-head .c-brief {
  4105.     margin: -3rem -1rem 0;
  4106.     overflow: hidden;
  4107.   }
  4108.  
  4109.   .p-profiles .profile-head .c-brief .avatar img {
  4110.     width: 160px;
  4111.   }
  4112.  
  4113.   .p-profiles .profile-head .c-brief .avatar .profile-actions {
  4114.     display: block;
  4115.   }
  4116. }
  4117.  
  4118. @media screen and (min-width: 768px) {
  4119.   .p-profiles .profile-head .c-brief {
  4120.     overflow: visible;
  4121.   }
  4122. }
  4123.  
  4124. @media screen and (min-width: 960px) {
  4125.   .p-profiles .profile-head {
  4126.     padding-top: 0;
  4127.     margin-top: 0;
  4128.   }
  4129.  
  4130.   .p-profiles .profile-head .c-brief {
  4131.     max-height: 504px;
  4132.     margin: 0;
  4133.     overflow: visible;
  4134.   }
  4135.  
  4136.   .p-profiles .profile-head .c-brief:before {
  4137.     padding-bottom: 0;
  4138.   }
  4139.  
  4140.   .p-profiles .profile-head .c-brief .avatar {
  4141.     margin: 1rem 2rem 1rem 0;
  4142.   }
  4143.  
  4144.   .p-profiles .profile-head .c-info {
  4145.     margin-bottom: 1.5rem;
  4146.   }
  4147.  
  4148.   .p-profiles .profile-head .c-history {
  4149.     display: block;
  4150.   }
  4151. }
  4152. /**
  4153.  * PROFILE COVER
  4154.  */
  4155.  
  4156. @media screen and (min-width: 320px) {
  4157.   .p-profiles .profile-head .c-brief {
  4158.     background-color: none;
  4159.     box-shadow: 0 2px 8px 2px rgba(0,0,0,.24);
  4160.   }
  4161.  
  4162.   .p-profiles .profile-head .c-brief:before {
  4163.     content: '';
  4164.     display: block;
  4165.     height: 0;
  4166.     padding-bottom: 56.25%;
  4167.     background-color: var(--bg);
  4168.     background-position: top center;
  4169.     background-size: cover;
  4170.   }
  4171. }
  4172.  
  4173. @media screen and (min-width: 480px) {
  4174.   .p-profiles .profile-head .c-brief .avatar {
  4175.     position: absolute;
  4176.     top: auto;
  4177.     right: auto;
  4178.     bottom: 0;
  4179.     left: 0;
  4180.     max-width: 148px;
  4181.     margin: 1.5rem;
  4182.     z-index: 2;
  4183.   }
  4184.  
  4185.   .p-profiles .profile-head .c-brief .avatar img {
  4186.     width: 120px;
  4187.   }
  4188.  
  4189.   .p-profiles .profile-head .c-brief header {
  4190.     position: absolute;
  4191.     top: auto;
  4192.     right: 0;
  4193.     bottom: 0;
  4194.     left: 0;
  4195.     min-height: 112px;
  4196.     padding: 1rem 1.5rem 1rem calc(4rem + 148px);
  4197.     margin: 0;
  4198.     background: inherit;
  4199.     z-index: 1;
  4200.   }
  4201. }
  4202.  
  4203. @media screen and (min-width: 600px) {
  4204.   .p-profiles .profile-head .c-brief {
  4205.     max-height: 380px;
  4206.     margin: -3rem -1rem 1rem;
  4207.     background-color: inherit;
  4208.     box-shadow: none;
  4209.   }
  4210.  
  4211.   .p-profiles .profile-head .c-brief:before {
  4212.     height: 9999px;
  4213.     max-height: inherit;
  4214.     padding-bottom: 0;
  4215.   }
  4216.  
  4217.   .p-profiles .profile-head .c-brief .avatar {
  4218.     max-width: 160px;
  4219.   }
  4220.  
  4221.   .p-profiles .profile-head .c-brief .avatar img {
  4222.     width: 160px;
  4223.     box-shadow: 0 2px 8px 1px rgba(0,0,0,.16);
  4224.   }
  4225.  
  4226.   .p-profiles .profile-head .c-brief header {
  4227.     padding: 1rem 1.5rem 1rem calc(4.5rem + 160px);
  4228.   }
  4229. }
  4230.  
  4231. @media screen and (min-width: 960px) {
  4232.   .p-profiles .profile-head .c-brief {
  4233.     max-height: 504px;
  4234.     margin: -1rem -1rem 1rem;
  4235.   }
  4236.   .p-profiles .profile-head .c-info {
  4237.     width: 77%;
  4238.     padding-right: 2.5rem;
  4239.   }
  4240.  
  4241.   .p-profiles .profile-head .c-history {
  4242.     float: none;
  4243.     position: absolute;
  4244.     right: 0;
  4245.     top: 392px;
  4246.     width: 23%;
  4247.     margin: .5rem 0;
  4248.     z-index: 3;
  4249.   }
  4250. }
  4251. /* PROFILE HEADER - TRANSPARENT */
  4252. @media (min-width: 600px) {
  4253.   .p-profiles .profile-head .c-brief header {
  4254.     background-image: linear-gradient(to top, rgba(0,0,0,.64) 100%, transparent);;
  4255.   }
  4256.  
  4257.   /* Цвет основного текста */
  4258.   .p-profiles  .profile-head header.head h1,
  4259.   .p-profiles  .profile-head header.head h2 {
  4260.     color: #fff;
  4261.   }
  4262.  
  4263.   /* Цвет дополнительного текста */
  4264.   .p-profiles  .profile-head header.head .notice,
  4265.   .p-profiles .profile-head .c-info .c-additionals b {
  4266.     color: #aaa;
  4267.   }
  4268.  
  4269.   /* Цвет ссылок */
  4270.   .p-profiles .profile-head .c-brief  a,
  4271.   .p-profiles .profile-head .c-brief  a:hover,
  4272.   .p-profiles .profile-head .c-brief  a:active {
  4273.     color: var(--text) !important;
  4274.   }
  4275.  
  4276.   .p-profiles .profile-head .c-brief .profile-actions > a:hover {
  4277.     color: var(--text) !important
  4278.   }
  4279. }
  4280. /**
  4281.  * HISTORY BLOCK
  4282.  * PART OF: PROFILE HEADER - TRANSPARENT
  4283.  * Similary mobile-tablet block
  4284.  */
  4285.  
  4286. @media (max-width: 960px) {
  4287.   .p-profiles .profile-head .c-history {
  4288.     display: block;
  4289.     position: absolute;
  4290.     top: 0;
  4291.     right: 0;
  4292.     left: 0;
  4293.     width: auto;
  4294.     padding: 0 1rem;
  4295.     margin: 0 -1rem;
  4296.     background-color: rgba(0,0,0,.48);
  4297.     white-space: nowrap;
  4298.     overflow-x: auto;
  4299.     z-index: 1;
  4300.   }
  4301. .p-profiles .profile-head .c-history {
  4302.   background-image: linear-gradient(to top, rgba(0,0,0,.5) 100%, transparent) !important;
  4303. }
  4304.   .p-profiles .profile-head .c-history > .subheadline {
  4305.     display: inline-block;
  4306.     vertical-align: top;
  4307.   }
  4308.  
  4309.   .p-profiles .profile-head .c-history > .subheadline > a {
  4310.     color: var(--text) !important;
  4311.   }
  4312.  
  4313.   .p-profiles .profile-head .c-history > .subheadline > a:before {
  4314.     display: none;
  4315.   }
  4316.  
  4317.   .p-profiles .profile-head .c-history > .block-list {
  4318.     display: inline-block;
  4319.     vertical-align: top;
  4320.     padding: .5rem;
  4321.     margin-left: .5rem;
  4322.   }
  4323.  
  4324.   .p-profiles .profile-head .c-history .entry {
  4325.     display: inline-block;
  4326.     vertical-align: top;
  4327.     min-width: 112px;
  4328.     height: 2rem;
  4329.     padding-right: .5rem;
  4330.     padding-left: .5rem;
  4331.     margin-left: .5rem;
  4332.   }
  4333.  
  4334.   .p-profiles .profile-head .c-history .entry:before {
  4335.     display: none;
  4336.   }
  4337.  
  4338.   .p-profiles .profile-head .c-history .entry .image-name {
  4339.     float: left;
  4340.     width: 32px;
  4341.     height: 32px;
  4342.     margin: -8px 8px -8px -8px;
  4343.     border-radius: 50%;
  4344.     font-size: 0;
  4345.     line-height: 0;
  4346.     overflow: hidden;
  4347.   }
  4348.  
  4349.   .p-profiles .profile-head .c-history .entry span.misc {
  4350.     display: none;
  4351.   }
  4352.  
  4353.   /* PART OF CHANGES */
  4354.   .p-profiles .profile-head .c-history {
  4355.     padding: .25rem 1.5rem;
  4356.     top: 0;
  4357.     background-color: transparent;
  4358.     background-image: -webkit-linear-gradient(rgba(50,50,50,.64) 100%, transparent);
  4359.     background-image:      -o-linear-gradient(rgba(50,50,50,.64) 100%, transparent);
  4360.     background-image:         linear-gradient(rgba(50,50,50,.64) 100%, transparent);
  4361.     z-index: 3;
  4362.   }
  4363.  
  4364.   .p-profiles .profile-head .c-history > .subheadline > a:hover {
  4365.     color: var(--text) !important
  4366.   }
  4367.  
  4368.   .p-profiles .profile-head .c-history .entry {
  4369.     margin-left: 1rem;
  4370.     border-radius: 1rem;
  4371.     overflow: hidden; /* TODO: check elem height */
  4372.   }
  4373.  
  4374.   /* full-width bars */
  4375.   .p-profiles .profile-head .c-info {
  4376.     width: 100%;
  4377.     padding-right: 0;
  4378.   }
  4379.  
  4380.   /* Recolor transparent header */
  4381.   .p-profiles .profile-head .c-brief header {
  4382.     background-color: transparent;
  4383.     background-image: -webkit-linear-gradient(to top, rgba(50,50,50,.64) 100%, transparent);
  4384.     background-image:      -o-linear-gradient(to top, rgba(50,50,50,.64) 100%, transparent);
  4385.     background-image:         linear-gradient(to top, rgba(50,50,50,.64) 100%, transparent);
  4386.   }
  4387. }
  4388.  
  4389. /*Change shiki icons to material*/
  4390.  
  4391. @media only screen and (min-width: 1025px) {
  4392. .l-top_menu .menu-items>.entry>a.contest {
  4393.     width: 40px;
  4394.     height: 40px;
  4395.     padding: 11px !important;
  4396.     margin: 4px;
  4397.     background: transparent;
  4398.     border-radius: 2px;
  4399. }
  4400. }
  4401.  
  4402. .p-profiles .profile-head .c-brief .avatar .profile-actions {
  4403.   margin-top: 1rem;
  4404.   margin-right: -12px;
  4405.   margin-left: -12px;
  4406. }
  4407. .profile-actions > a {
  4408.   display: inline-block;
  4409.   padding: 8px;
  4410.   border-radius: 2px;
  4411.   color: var(--text-sec) !important;
  4412. }
  4413. .profile-actions > a:hover {
  4414.   color: #444 !important;
  4415. }
  4416. .profile-actions > *:before {
  4417.   vertical-align: top;
  4418. }
  4419. .profile-actions > *:hover {
  4420.   background-color: var(--text);
  4421. }
  4422.  
  4423. @media screen and (max-width: 1024px) {
  4424.   .profile-actions .settings,
  4425.   .profile-actions .fav-add,
  4426.   .profile-actions .fav-remove,
  4427.   .profile-actions .ignore-add,
  4428.   .profile-actions .ignore-remove,
  4429.   .profile-actions .ban {
  4430.     margin-left: .5rem;
  4431.   }
  4432. }
  4433. @media only screen and (min-width: 1025px) {
  4434.   .profile-actions .settings,
  4435.   .profile-actions .fav-add,
  4436.   .profile-actions .fav-remove,
  4437.   .profile-actions .ignore-add,
  4438.   .profile-actions .ignore-remove,
  4439.   .profile-actions .ban {
  4440.     margin-left: .5rem;
  4441.   }
  4442. }
  4443.  
  4444. @font-face {
  4445.   font-family: 'Material Icons';
  4446.   font-style: normal;
  4447.   font-weight: 400;
  4448.   src: local('Material Icons'),
  4449.        local('MaterialIcons-Regular'),
  4450.        url(https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
  4451.        url(https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/MaterialIcons-Regular.woff) format('woff'),
  4452.        url(https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/MaterialIcons-Regular.eot) format('eot'),
  4453.        url(https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/MaterialIcons-Regular.ttf) format('truetype');
  4454. }
  4455.  
  4456. .profile-actions > *:before {
  4457.   width: 24px !important;
  4458.   font-family: 'Material Icons' !important;
  4459.   font-size: 24px !important;
  4460.   font-weight: 400 !important;
  4461.   line-height: 1 !important;
  4462.  
  4463.   text-transform: none;
  4464.   letter-spacing: normal;
  4465.   word-wrap: normal;
  4466.   white-space: nowrap;
  4467.   direction: ltr;
  4468.  
  4469.   /* Support for all WebKit browsers. */
  4470.   -webkit-font-smoothing: antialiased;
  4471.   /* Support for Safari and Chrome. */
  4472.   text-rendering: optimizeLegibility;
  4473.   /* Support for Firefox. */
  4474.   -moz-osx-font-smoothing: grayscale;
  4475.   /* Support for IE. */
  4476.   font-feature-settings: 'liga';
  4477. }
  4478. /* Иконки профиля */
  4479. .profile-actions .mail:before {
  4480.   content: "mail";
  4481. }
  4482. .profile-actions .talk:before {
  4483.   content: "message";
  4484. }
  4485. .profile-actions .fav-add:before {
  4486.   content: "person_add";
  4487. }
  4488. .profile-actions .fav-remove:before {
  4489.   content: "person_outline";
  4490. }
  4491. .profile-actions .ignore-add:before {
  4492.   content: "do_not_disturb_on";
  4493. }
  4494. .profile-actions .ignore-remove:before {
  4495.   content: "do_not_disturb_off";
  4496. }
  4497. .profile-actions .settings:before {
  4498.   content: "settings";
  4499. }
  4500. .profile-actions .ban:before {
  4501.   content: "gavel";
  4502. }
  4503.  
  4504. /*Anime progress icons*/
  4505.  
  4506. .b-catalog_entry.planned .image-decor::after,
  4507. .b-catalog_entry.watching .image-decor::after,
  4508. .b-catalog_entry.completed .image-decor::after,
  4509. .b-catalog_entry.rewatching .image-decor::after,
  4510. .b-catalog_entry.on_hold .image-decor::after,
  4511. .b-catalog_entry.dropped .image-decor::after {
  4512.     top: auto;
  4513.     right: 6px;
  4514.     bottom: -8px;
  4515.     width: 32px;
  4516.     height: auto;
  4517.     border: none;
  4518.     border-radius: 100%;
  4519.     line-height: 32px;
  4520.     box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .32);
  4521.     font-family: 'Material Icons';
  4522. }
  4523. .p-animes_collection-index.x1000 .b-catalog_entry .image-decor::after,
  4524. .p-mangas_collection-index.x1000 .b-catalog_entry .image-decor::after,
  4525. .p-recommendations-index.x1000 .b-catalog_entry .image-decor::after,
  4526. .p-userlist_comparer-show.x1000 .b-catalog_entry .image-decor::after {
  4527.     width: 32px;
  4528.     height: auto;
  4529.     border-radius: 100%;
  4530.     line-height: 32px;
  4531. }
  4532. .b-catalog_entry.planned .image-decor::after {
  4533.     content: "event";
  4534.     background: #448AFF;
  4535.     color: #fff;
  4536. }
  4537. .b-catalog_entry.watching .image-decor::after {
  4538.     content: "play_arrow";
  4539.     background: #3D5AFE;
  4540.     color: #fff;
  4541. }
  4542. .b-catalog_entry.rewatching .image-decor::after {
  4543.     content: "replay";
  4544.     background: #3D5AFE;
  4545.     color: #fff;
  4546. }
  4547. .b-catalog_entry.completed .image-decor::after {
  4548.     content: "done";
  4549.     background: #00E676;
  4550.     color: #fff;
  4551. }
  4552. .b-catalog_entry.on_hold .image-decor::after {
  4553.     content: "schedule";
  4554.     background: #BDBDBD;
  4555.     color: #fff;
  4556. }
  4557. .b-catalog_entry.dropped .image-decor::after {
  4558.     content: "delete";
  4559.     background: #FF1744;
  4560.     color: #fff;
  4561. }
  4562.  
  4563. /**
  4564.  * PROFILE CONTENT
  4565.  * Change layout Activity, Friends, Clubs, Favorites blocks ---------------------------------------------------------------------------
  4566.  */
  4567.  
  4568. .p-profiles .lifetime {
  4569.   margin-bottom: 0;
  4570.   min-height: 0;
  4571. }
  4572.  
  4573. .p-profiles .lifetime .bar,
  4574. /*.p-profiles .profile-content .cc-2 .activity,*/
  4575. .p-profiles .lifetime .times,
  4576. .p-profiles .profile-content .activity .title {
  4577.   display: none;
  4578. }
  4579. .p-profiles .profile-content .cc-2 .activity {
  4580.   width: 30%;
  4581.   z-index: 1111;
  4582. }
  4583. .p-profiles .profile-content .cc-2 .activity .graph {
  4584.     margin-top: -60px;
  4585.     height: 80px;
  4586. }
  4587. /*@media screen and (min-width: 1200px)*/
  4588.  
  4589.  
  4590.  
  4591. .p-profiles .lifetime .title > .label {
  4592.   font-size: 0;
  4593.   line-height: 0;
  4594. }
  4595.  
  4596. .p-profiles .lifetime .title > .label:before {
  4597.   content: 'Активность';
  4598.   display: block;
  4599.   font-size: 0.875rem;
  4600.   line-height: 1rem;
  4601. }
  4602.  
  4603. .p-profiles .lifetime .title .value {
  4604.   height: 16px;
  4605.   margin-top: 0;
  4606.   line-height: 16px;
  4607. }
  4608.  
  4609. .p-profiles .profile-content .cc-2 .c-right .cc-2a {
  4610.   margin-bottom: 16px !important;
  4611. }
  4612.  
  4613. @media (min-width: 768px) {
  4614.   .p-profiles .profile-content .graph {
  4615.     height: 155px;
  4616.   }
  4617.  
  4618.   .p-profiles .profile-content .cc-2 > .c-column {
  4619.     width: 100%;
  4620.     margin-bottom: 1rem;
  4621.   }
  4622.  
  4623.   .p-profiles .profile-content .cc-2 .activity {
  4624.     padding-bottom: 1rem;
  4625.   }
  4626. }
  4627.  
  4628.  
  4629. @media (min-width: 960px) {
  4630.   .p-profiles .profile-content .cc-2 {
  4631.     position: relative;
  4632.   }
  4633.  
  4634.   .p-profiles .profile-content .cc-2 .c-left {
  4635.     width: 77%;
  4636.     min-height: 220px;
  4637.     padding-right: 2.5rem;
  4638.     margin-bottom: 1.5rem;
  4639.   }
  4640.  
  4641.   .p-profiles .profile-content .cc-2 .c-right .cc-2a {
  4642.     position: absolute;
  4643.     top: 0;
  4644.     right: 0;
  4645.     width: 23%;
  4646.     margin-top: -244px;
  4647.   }
  4648.  
  4649.   .p-profiles .profile-content .cc-2 .c-right .cc-2a > .c-column {
  4650.     clear: both;
  4651.     width: 100%;
  4652.     margin: 0;
  4653.   }
  4654. }
  4655. .b-add_to_list .trigger, .b-add_to_list .option {
  4656.     background: var(--bg2) !important;
  4657.     /*color: var(--text) !important;*/
  4658. }
  4659.  
  4660. .p-dashboards-show .cc-news .c-news_topics .b-topic {
  4661.   border-top-width: 0;
  4662. }
  4663.  
  4664.  .l-top_menu {
  4665.    max-width: calc(1200px + 2rem) !important;
  4666.   position: fixed;
  4667.   top: 0;
  4668.   right: 0;
  4669.   left: 0;
  4670.   width: 100%;
  4671.   max-width: 100%;
  4672.   height: auto;
  4673.   margin: auto;
  4674.   background-image: none;
  4675.   border: none;
  4676.   box-shadow: 0 2px 8px 2px rgba(0,0,0,.24);
  4677.   overflow: visible;
  4678. }
  4679. .b-main_search ul.popup,
  4680. .l-top_menu .submenu {
  4681.   background: rgba(0,0,0,.7) !important;
  4682. }
  4683. .b-main_search .popup li,
  4684. .l-top_menu .submenu>.entry {
  4685.   background: rgba(0,0,0,0) !important;
  4686. }
  4687. .b-main_search .popup li.active,
  4688. .b-main_search .popup li:hover,
  4689. .l-top_menu .submenu>.entry:hover {
  4690.   background: rgba(0,0,0,1) !important;
  4691. }
  4692.  
  4693.  
  4694. .p-profiles .profile-head .c-brief header {
  4695.   background-image: linear-gradient(to top, rgba(0,0,0,.7) 100%, transparent) !important;
  4696. }
  4697.  
  4698. header.head .notice {
  4699.   color: var(--text) !important;
  4700. }
  4701. .p-contests .contest-match .votes-percents .left-part:hover,
  4702. .p-contests .contest-match .votes-percents .left-part,
  4703. .b-stats_bar.anime .bar .first {
  4704.   background: var(--main-col); }
  4705. .b-stats_bar.anime .bar .second {
  4706.   background: var(--main-col2); }
  4707. .b-stats_bar.anime .bar .third {
  4708.   background: var(--main-col3); }
  4709.  
  4710. .p-contests .contest-match .votes-percents .left-part:hover .right-part:before,
  4711. .p-contests .contest-match .votes-percents .right-part:before {
  4712.   border-right: 30px solid var(--main-col);
  4713. }
  4714. .p-contests .contest-match .votes-percents .left-part:hover .right-part,
  4715. .p-contests .contest-match .votes-percents .right-part,
  4716. .b-stats_bar.manga .bar .first {
  4717.   background: var(--main-col); }
  4718. .b-stats_bar.manga .bar .second {
  4719.   background: var(--main-col2); }
  4720. .b-stats_bar.manga .bar .third {
  4721.   background: var(--main-col3); }
  4722.  
  4723. /*.bar.simple .bar.s0 {
  4724.   background: #E56744; }
  4725. .bar.simple .bar.s1 {
  4726.   background: #E56744; }
  4727. .bar.simple .bar.s2 {
  4728.   background: #E56744; }
  4729. .bar.simple .bar.s3 {
  4730.   background: #E56744; } */
  4731.  
  4732. .line:nth-child(even) > .bar-container > .bar, .line:nth-child(even) > .bar-container > .bar:hover {
  4733.     background-color: var(--main-col);
  4734. }
  4735. .line:nth-child(odd) > .bar-container > .bar, .line:nth-child(odd) > .bar-container > .bar:hover {
  4736.     background-color: var(--main-col2);
  4737. }
  4738.  
  4739. .p-contests .match-day .match-link:hover {
  4740.     background-color: var(--bg2);
  4741. }
  4742.  
  4743. .tooltip-inner {
  4744.   color: var(--text);
  4745.   background: rgba(0,0,0,.8)
  4746. }
  4747.  
  4748. .tooltip-inner .close {
  4749.   background: none;
  4750. }
  4751.  
  4752.  
  4753. .line-container .key {
  4754.   color: var(--text) !important;
  4755. }
  4756.  
  4757. .b-user16:hover {
  4758.     color: #f2f2f2 !important;
  4759.     background-color: #333;
  4760. }
  4761.  
  4762. .l-top_menu .menu-items {
  4763.   background: var(--bg2);
  4764. }
  4765.  
  4766.  
  4767. .l-top_menu .submenu>.entry {
  4768.     height: 2rem;
  4769.     padding: 1.5rem 1rem;
  4770.     border: 0;
  4771.     font-size: .875rem;
  4772.     line-height: .25rem;
  4773. }
  4774.  
  4775. .l-top_menu .submenu {
  4776.   padding-left: 0;
  4777.   }
  4778.  
  4779. .l-top_menu .menu-items .entry a.entry {
  4780.     display: block;
  4781.     margin-left: -10px;
  4782.     padding-left: 30px;
  4783. }
  4784.  
  4785. @media screen and (max-width: 480px) {
  4786.   .avatar img {
  4787.   border-radius: 50%;
  4788.   }
  4789. }
  4790. .video-id,
  4791. .b-video_variant .video-author,
  4792. .p-anime_videos-index .c-anime_video_episodes .title, .p-anime_videos-index .c-videos .title,
  4793. .p-anime_videos-index .same-videos .title {
  4794.     color: var(--text) !important;
  4795. }
  4796. .b-tag,
  4797. .b-video_variant a.active {
  4798.     color: var(--main-col);
  4799.     border-bottom: 1px dotted var(--main-col);
  4800. }
  4801. .b-tag:hover {
  4802.     background-color: var(--main-col);
  4803.     color: var(--bg2) !important;
  4804. }
  4805. .b-options-floated .selected.always-active {
  4806.     color: var(--text);
  4807. }
  4808.  
  4809. .input,
  4810. input {
  4811.   background: var(--bg);
  4812.   color: var(--text-sec);
  4813. }
  4814.  
  4815. .p-user_rates-index .l-content .filter input {
  4816.     border: 0 solid var(--text);
  4817.     border-radius: 0;
  4818. }
  4819. .p-user_rates-index .l-content .order-control:hover {
  4820.     background-color: rgba(0,0,0,0);
  4821. }
  4822.  
  4823. .b-main_search .input {
  4824.       background: var(--bg2) !important;
  4825.     border-bottom: 1px solid var(--text) !important;
  4826.   }
  4827. .b-rate .stars.hover,
  4828. .b-rate .stars.score,
  4829. .episodes_total,
  4830.   .b-table tr .name a {
  4831.     color: var(--text) !important;
  4832.   }
  4833.   .b-rate .stars.hover,
  4834.     .b-table tr .name a:hover {
  4835.     color: var(--main-col) !important;
  4836.     text-decoration:none;
  4837.   }
  4838. .block-list li:hover, .block-list-alt li:hover {
  4839.     background-color: rgba(0,0,0,.5);
  4840.     color: var(--text) !important;
  4841. }
  4842.  
  4843. /*.p-profiles .profile-head .c-info,
  4844. .p-profiles .profile-content .cc-2 .c-right .cc-2a .m0,*/
  4845.   .p-user_rates-index .list-lines .selectable:hover {
  4846.     background-color: rgba(0,0,0,.5);
  4847. }
  4848.  
  4849. .p-user_rates-index .list-lines tr td .new-value input {
  4850.   padding: 2px;
  4851.   border: none;
  4852.   background-color: rgba(0,0,0,.5);
  4853.   border-radius: 0;
  4854. }
  4855.  
  4856. .l-page .menu-toggler {
  4857.   top: -80px !important;
  4858.   width: 40px;
  4859.   margin-right: -20px;
  4860. }
  4861.  
  4862. .l-page .menu-toggler .toggler {
  4863.     border-top-right-radius: 0;
  4864.     border-bottom-right-radius: 0;
  4865.     background: var(--bg2);
  4866.     color: var(--text-sec);
  4867.     border: 0;
  4868. }
  4869. .b-animes-menu .total-rates,
  4870. .l-page .menu-toggler .toggler:after {
  4871.   color: var(--text-sec);
  4872. }
  4873.  
  4874. .b-input textarea, textarea.comment_body {
  4875.   height: 800px !important;
  4876.   overflow: scroll !important;
  4877. }
  4878.  
  4879. .b-options-floated .action {
  4880.   color: var(--main-col);
  4881. }
  4882. .b-options-floated .action:hover {
  4883.   text-decoration: underline !important;
  4884. }
  4885.  
  4886. .collapsed {
  4887.     background-color: var(--bg);
  4888.     border-color: var(--bg2);
  4889. }
  4890. .collapsed:hover {
  4891.     background-color: var(--bg);
  4892.     border-color: #777;
  4893.     color: #777;
  4894. }
  4895. .b-rate .score-notice,
  4896. .p-user_rates-index .list-groups .summary.lines {
  4897.     color: var(--text) !important;
  4898. }
  4899.  
  4900. .b-list li {
  4901.     list-style: none;
  4902.   }
  4903. .b-entry-info .line .value {
  4904.   color: var(--text-sec);
  4905. }
  4906.  
  4907.  
  4908. @media screen and (min-width: 480px) {
  4909.   .p-profiles .profile-head .c-brief .avatar {
  4910.     position: absolute;
  4911.   }
  4912.   .p-profiles .profile-head .c-brief .avatar img {
  4913.     position: relative;
  4914.     top: 0;
  4915.   }
  4916.     .p-profiles .profile-head .c-brief .avatar .profile-actions {
  4917.     position: static;
  4918.   }
  4919. }
  4920.  
  4921. @media screen and (min-width: 600px) {
  4922.   .p-profiles .profile-head .c-brief .avatar {
  4923.     width: calc(100% - 48px);
  4924.     max-width: 100%;
  4925.     height: 0;
  4926.     position: absolute;
  4927.   }
  4928.   .p-profiles .profile-head .c-brief .avatar img {
  4929.     position: absolute;
  4930.     top: -120px;
  4931.   }
  4932.     .p-profiles .profile-head .c-brief .avatar .profile-actions {
  4933.     right: 0;
  4934.     position: absolute;
  4935.     top: -40px;
  4936.   }
  4937. }
  4938. @media (min-width: 960px) {
  4939. .p-profiles .profile-head .c-history.x3 {
  4940.       top: 72%;
  4941.     padding: 15px;
  4942. }
  4943.  
  4944. .p-profiles .profile-content .cc-2 .c-left {
  4945.   position: absolute;
  4946. }
  4947.  
  4948. .p-profiles .profile-content .cc-2 .c-right .cc-2a {
  4949.     top: 200px;
  4950.     position: absolute;
  4951.     left: 0;
  4952.     width: 77%;
  4953. }
  4954.  
  4955. .p-profiles .profile-content .cc-2 .c-right .cc-2a > .c-column {
  4956.   position: relative;
  4957.   margin: 0 2.5%;
  4958.   width: 28%;
  4959.   clear: none;
  4960.   float: right;
  4961. }
  4962.  
  4963. .cc-2>.c-column>.block:last-child, .cc-2>.c-column>.subcontent:last-child {
  4964.   margin-top: 100px;
  4965. }
  4966. }
  4967. .p-profiles .profile-head .c-brief .avatar,
  4968. .p-profiles-show .profile-content {
  4969.     overflow: visible;
  4970. }
  4971. .p-profiles .lifetime .title > .label {
  4972.   display: none
  4973. }
  4974. .p-profiles .profile-content .cc-2 .c-left {
  4975.     width: 100%;
  4976.     padding: 0;
  4977.     margin: 0;
  4978. }
  4979.  
  4980. .p-profiles .lifetime .title .value:before {
  4981.   content: 'время за аниме и мангой:';
  4982.   position: absolute;
  4983.   top: -120%;
  4984.   text-align: right;
  4985.   right: 0;
  4986.   width: 500px;
  4987. }
  4988. .p-profiles .lifetime .title .value {
  4989.   position: absolute;
  4990.   top: -20rem;
  4991.   right: 0;
  4992.   color: var(--text);
  4993.   cursor: pointer;
  4994. }
  4995.  
  4996. @media (max-width: 960px) {
  4997. .p-profiles .lifetime .title .value {
  4998.   top: -18.5rem;
  4999. }
  5000. }
  5001. @media (max-width: 600px) {
  5002.   .p-profiles .lifetime .title .value:before,
  5003. .p-profiles .lifetime .title .value {
  5004.   display: none;
  5005. }
  5006. }
  5007.  
  5008. .b-animes-menu .friend-rate .status {
  5009.       right: 0;
  5010.     position: absolute;
  5011.   }
  5012. input,
  5013. textarea {
  5014.   background: var(--bg) !important;
  5015.   color: var(--text) !important;
  5016.   border-color: var(--bg2) !important;
  5017. }
  5018.  
  5019. .ac_results li {
  5020.   color: var(--text);
  5021. }
  5022. .ac_odd {
  5023.     background-color: var(--bg);
  5024. }
  5025. .ac_even {
  5026.     background-color: #151515;
  5027. }
  5028. .ac_over {
  5029.     background-color: var(--bg2);
  5030. }
  5031.  
  5032. .b-spoiler .content .inner, .b-spoiler .content .inner-prgrph {
  5033.     border-bottom: 1px dashed #555;
  5034. }
  5035.  
  5036. .b-comments .comments-loader:hover, .b-comments .comments-hider:hover, .b-comments .comments-expander:hover {
  5037.     border: 1px solid var(--bg);
  5038. }
  5039. .b-comments .comments-loader:hover, .b-comments .comments-hider:hover, .b-comments .comments-expander:hover {
  5040.     color: var(--text);
  5041.     background: var(--bg);
  5042. }
  5043. .b-comments .comments-loader, .b-comments .comments-hider, .b-comments .comments-expander {
  5044.     border: 1px solid var(--bg);
  5045.     background: var(--bg);
  5046.     color: #777;
  5047. }
  5048. /*-------------------------------------------------------------------------------------------------------*/
  5049. .p-profiles .lifetime .title .value {
  5050.   z-index: 111;
  5051. }
  5052.  
  5053. /*@media (min-width: 960px)*/
  5054. /*@media (min-width: 960px) {
  5055. .p-profiles .profile-head .c-history.x3 {
  5056.     width: 100%;
  5057.     position: absolute;
  5058.     margin-top: 195px;
  5059.     padding-top: 0;
  5060. }
  5061. .block-list {
  5062.   width: 100%;
  5063. }
  5064. .p-profiles .profile-head .c-history .entry {
  5065.     margin-right: 3% !important;
  5066.     float: left;
  5067.     width: 30%;
  5068. }
  5069.  
  5070. .p-profiles .profile-content .cc-2 .c-right .cc-2a {
  5071.   top: -63%;
  5072. }
  5073. }*/
  5074.  
  5075. .p-user_rates-index .list-lines tr td .rewatches {
  5076.     color: var(--main-col);
  5077. }
  5078.  
  5079. .subheadline {
  5080.     background-color: rgba(0,0,0,.2);
  5081.     margin: 16px 0;
  5082.     padding: 8px 10px 8px 16px;
  5083.   }
  5084. .m5.subheadline:hover,
  5085. .m10.subheadline:hover {
  5086.     background-color: var(--bg);
  5087. }
  5088.  
  5089. .midheadline, .m10 {
  5090.     margin-bottom: 8px !important;
  5091. }
  5092. .block-list li:active, .block-list-alt li:active {
  5093.     background-color: var(--bg) !important;
  5094. }
  5095.  
  5096. .c-column .b-options-floated {
  5097.     margin-top: 22px;
  5098. }
  5099. .b-height_shortener .shade {
  5100.   left: 0;
  5101. }
  5102.  
  5103. .b-db_entry-note .name-container .b-user_rate .b-add_to_list .trigger:hover .plus::before, .b-db_entry-note .name-container .b-user_rate .b-add_to_list .trigger:hover .edit::before, .b-db_entry-note .name-container .b-user_rate .b-add_to_list .trigger:hover .trigger-arrow::before, .b-db_entry-note .name-container .b-user_rate .b-add_to_list .option:hover .plus::before, .b-db_entry-note .name-container .b-user_rate .b-add_to_list .option:hover .edit::before, .b-db_entry-note .name-container .b-user_rate .b-add_to_list .option:hover .trigger-arrow::before {
  5104.     color: inherit;
  5105. }
  5106.  
  5107. .l-top_menu .menu-items>.entry>a.contest:before {
  5108.     width: 24px !important;
  5109.     font-size: 24px !important;
  5110.     color: #444;
  5111. }
  5112. .l-top_menu .menu-items>.entry>.contest:before {
  5113.     content: "poll";
  5114. }
  5115. .l-top_menu .menu-items>.entry.calendar>a:before, .l-top_menu .menu-items>.entry>.contest:before, .l-top_menu .menu-items>.entry.info>a:before, .l-top_menu .menu-userbox #sign_in:before {
  5116.     display: block;
  5117.     width: 18px !important;
  5118.     font-family: 'Material Icons' !important;
  5119.     font-size: 18px !important;
  5120.     font-weight: 400 !important;
  5121.     line-height: 1 !important;
  5122.     text-transform: none;
  5123.     letter-spacing: normal;
  5124.     word-wrap: normal;
  5125.     white-space: nowrap;
  5126.     direction: ltr;
  5127.     -webkit-font-smoothing: antialiased;
  5128.     text-rendering: optimizeLegibility;
  5129.     -moz-osx-font-smoothing: grayscale;
  5130.     font-feature-settings: 'liga';
  5131. }
  5132. .l-top_menu .menu-items>.entry>a.contest {
  5133.     width: 48px;
  5134.     height: 48px;
  5135.     padding: 12px !important;
  5136.     background: inherit;
  5137. }
  5138. .menu .unread-count:hover, .menu .contest:hover {
  5139.     background: var(--bg2) !important;
  5140. }
  5141. .l-top_menu .menu-items>.entry>a.contest:before:hover {
  5142.   color: var(--main-col);
  5143. }
  5144.  
  5145. @media only screen and (min-width: 1025px) {
  5146. .l-top_menu .menu-items>.entry>a.contest:before {
  5147.     position: static;
  5148.     width: 18px !important;
  5149.     margin: 0;
  5150.     color: inherit;
  5151.     font-size: 18px !important;
  5152. }
  5153. }
  5154. .p-contests .contest-match .prev-match:active, .p-contests .contest-match .next-match:active {
  5155.     color: var(--main-col);
  5156. }
  5157. .p-contests .contest-match .prev-match:hover, .p-contests .contest-match .next-match:hover {
  5158.   color: var(--main-col);
  5159.   }
  5160.  
  5161.   .b-options-floated {
  5162.     margin-top: 6px;
  5163. }
  5164. .p-contests-show .warning {
  5165.     margin-top: 0;
  5166. }
  5167.  
  5168. .p-dashboards-show .c-content .options .option {
  5169.     color: var(--text);
  5170. }
  5171. .p-dashboards-show .c-content .options .option:not(.selected):hover {
  5172.     color: var(--main-col);
  5173. }
  5174. .p-dashboards-show .c-content .options .option.selected,
  5175. .p-dashboards-show .c-content .options .option:act {
  5176.     color: var(--main-col);
  5177. }
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!