Как изменить внешний вид сайта шикимори

Тема для сайта shikimori.one

Современная тема по мотивам Material Design (в меру возможностей CSS). Тема работает только в современных браузерах и не поддерживает UC Browser и Opera Mobile в силу технической невозможности подстроить элементы для каждого из них. Главной особенностью темы является, нет, не обложка в профиле, а удобство пользования: шрифт и активные элементы увеличены, чтобы соответствовать области нажатия на тачскрине. Также увеличено пространство между элементами, изменено положение некоторых элементов, изменена главная страница сайта: теперь это не отправная точка в любой закоулок сайта, а сборник активности пользователей – в центре внимания популярные темы и аниме, новости, опросы, рецензии и ссылки на форум.

Так как сайт часто меняется, в теме могут возникать ошибки, поэтому настоятельно рекомендуется следить за обновлениями темы.

Установка

Удобнее всего воспользоваться специальным сайтом-сборщиком, где можно настроить цвета, обложку и фон по своему вкусу. Нажмите создать тему, и после завершения сборки скопируйте готовый код в настойки внешнего вида сайта.

Важно! Чтобы узнать свой ID, скачайте свою аватарку: цифры в названии файла – это ваш ID.

Все свои настройки указывайте в конце стиля в разделе «Мои настройки»:

/* МОИ НАСТРОЙКИ */

/* Фон меню */
.l-top_menu:before {
  background-color: #212121;
}

Если по каким-то причинам использовать сборщик не представляется возможным, используйте готовые релизы темы: найдите наиболее новую версию, скачайте одну из представленных тем, а затем скопируйте код себе в настройки.

Установка обложки

Для того чтобы обложка отображалась в вашем профиле, вам потребуется заменить все вхождения 2727 на ваш ID. Используйте для этого поиск по странице (сочетание клавиш Ctrl+F). Чтобы узнать свой ID, скачайте свою аватарку: цифры в названии файла – это ваш ID. Ссылка на изображение указывается в самом конце файла:

/* Моя обложка в профиле */
.p-profiles .profile-head[data-user-id = "2727"] .c-brief:before {
  /* background-image: url(//i.imgur.com/bd8W6VB.jpg); /* Пример */
  background-image: url(); /* Моя обложка */
  background-position: center;
}

Превью

Альбом со скриншотами темы: https://imgur.com/a/tc7uV

Благодарности

В тестировании темы принимало участие большое количество пользователей, отзывы которых помогли довести дело до победного конца и сделать тему действительно приятной для использования. Большое вам спасибо!

Поддержать проект

Поддержать создание темы можно сообщив о найденных ошибках и неточностях автору или создав issue, либо материально:

Яндекс.Деньги: 41001258665103

Description:

Меняет дизайн меню + делает его фиксированным. Также облагораживает комментарии и отзывы. Несколько бонусов на выбор: увеличенный текст, круглые аватары и настройка прозрачности.

More info

1. /*

2.  * Shikimori.org – CSS Theme

3.  * Author: grin3671

4.  * Some changes: temu

5. */

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. }

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. }

27. ::-moz-selection {

28. background: var(—main-col);

29. color: #FFFFFF

30. }

31. ::selection {

32. background: var(—main-col);

33. color: #FFFFFF

34. }

37. /* Кнопка сохранения стиля всегда на виду, спасибо @morr! */

38. #submit_style {

39. position: fixed;

40. bottom: 0;

41. right: 40%;

42. margin: 40px;

43. z-index: 1000;

44. }

48. /* FONT COLLECTION */

49. /* NOTE: Если вы знаете как можно сократить этот код или использовать меньшее количество шрифтов при том же результате — напишите мне. */

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. }

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. }

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. }

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. }

87. *  {

88. font-family: ‘Consolas’, ‘Roboto’, ‘Noto’, ‘Arial’, sans-serif !important;

89. }

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. }

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 */

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 */

234. /* COLOR SETTINGS */

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. }

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. }

333. /* PRIMARY COLOR */

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 */

378. /* ВЫСОТА СТРОКИ */

379. .cc-2a>.c-column { line-height: inherit; }

381. /* ОБЩИЕ КЛАССЫ */

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. }

388. hr {

389. margin: 8px 0;

390. }

392. .b-mention s {

393. color: inherit;

394. }

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. }

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. }

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. }

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. }

463. .b-source {

464. margin-top: 8px;

465. margin-bottom: 16px;

466. }

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. }

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. }

493. .b-nothing_here {

494. margin-left: 0;

495. font-size: .875rem;

496. }

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. }

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. }

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. }

554. .b-contests-menu .results {

555. float: none;

556. display: block;

557. margin: .5rem 0;

558. }

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; }

572. .b-input input,

573. .b-input textarea {

574. padding: 8px 16px;

575. line-height: 20px;

576. }

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. }

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. }

597. .l-page .menu-toggler { top: 64px; z-index: 9; }

601. .history-interval,

602. .mischeadline,

603. .b-input,

604. .prgrph,

605. .spoiler-prgrph,

606. .review-votes_count {

607. margin-bottom: 8px !important;

608. }

610. .block {

611. line-height: 20px;

612. }

613. .text {

614. margin-left: 0 !important;

615. }

617. .b-breadcrumbs {

618. margin: 0;

619. color: var(—text-sec);

620. line-height: 1rem;

621. }

623. .block-list li,

624. .block-list-alt li {

625. line-height: 20px;

626. margin: 2px -8px;

627. padding: 0 8px;

628. }

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. }

639. .b-user.named_avatar .name {margin: auto;}

642. /**

643.  * TOPMENU

644.  * Изменение верхнего меню сайта. ————————————————————

645.  * Меню закреплено и увеличено.

646.  */

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 Настройка цветов в меню */

663. /* NOTE: Что это за элемент? */

664. .to-top-fix {

665. background: none;

666. border: 0;

667. }

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. }

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. }

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; }

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 */

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. }

848. .l-top_menu .menu-items>.entry.calendar>a,

849. .l-top_menu .menu-items>.entry.info>a {

850. padding: 0.9375rem;

851. }

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. }

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. }

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. }

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. }

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. }

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 Текст вместо иконок в верхнем меню */

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. }

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. }

952. @media screen and (min-width: 1025px) {

953. .l-top_menu .menu-items .submenu-toggler,

954. .l-top_menu .inner .sign_out { display: none; }

956. .l-top_menu .menu-items>.entry {

957. color: inherit; /* var(—bg) */

958. }

959. }

961. @media screen and (max-width: 1024px) {

962. .l-top_menu .submenu {

963. padding-left: 32px;

964. }

965. }

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. }

982. .b-main_search {

983. padding-right: 8px !important;

984. padding-left: 8px !important;

985. }

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 */

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 */

1051. /* TOPMENU | USERBOX */

1053. .l-top_menu .menu-userbox {

1054. position: absolute;

1055. top: 0;

1056. right: 0;

1057. }

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; }

1079. @media screen and (max-width: 1024px) {

1080. .userbox img.avatar,

1081. .menu .unread-count { margin-top: 0; }

1082. }

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. }

1095. @media screen and (min-width: 1025px) {

1096. .l-top_menu .menu-userbox {

1097. position: relative;

1098. }

1099. }

1100. /* END of USERBOX */

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 */

1120. /* ************** */

1121. /* END of TOPMENU */ ———————————————————————————————————-

1122. /* ************** */

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;

1204. text-transform: none;

1205. letter-spacing: normal;

1206. word-wrap: normal;

1207. white-space: nowrap;

1208. direction: ltr;

1210. /* Support for all WebKit browsers. */

1211.   -webkit-font-smoothing: antialiased;

1212. /* Support for Safari and Chrome. */

1213. text-rendering: optimizeLegibility;

1215. /* Support for Firefox. */

1216.   -moz-osx-font-smoothing: grayscale;

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. }

1240. /**

1241.  * SUBHEADER

1242.  * Изменение подзаголовков разделов и ссылок в них.

1243.  */

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. }

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. }

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 */

1328. /**/

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 */

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; }

1368. /**

1369.  * ANIME PAGE

1370.  */

1372. .b-animes-menu .friend-rate {

1373. line-height: 1.5rem;

1374. }

1376. .b-db_entry {

1377. margin-bottom: 8px;

1378. }

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. }

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. }

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. }

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; }

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. }

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. }

1464. .midheadline,

1465. .m10 {

1466. margin-bottom: 0 !important;

1467. }

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. }

1483. .b-forums .forum .topics {

1484. margin-left: 8px;

1485. margin-top: 0;

1486. }

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 */

1573. .b-db_entry-note .name-container {

1574. margin-left: 64px;

1575. line-height: inherit;

1576. }

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. }

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. }

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. }

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. }

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;

1698. text-transform: none;

1699. letter-spacing: normal;

1700. word-wrap: normal;

1701. white-space: nowrap;

1702. direction: ltr;

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;

1722. text-transform: none;

1723. letter-spacing: -6px;

1724. word-wrap: normal;

1725. white-space: nowrap;

1726. direction: ltr;

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’; }

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. }

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. }

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. }

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. }

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. }

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. */

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. }

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. }

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. }

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. }

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. }

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; }

2030. .b-topic>.inner header:after {

2031. content: »;

2032. clear: both;

2033. display: block;

2034. }

2035. .b-topic .body {

2036. line-height: 20px;

2037. }

2039. .b-topic-preview > .inner .status-line {

2040. margin-top: -12px;

2041. margin-bottom: 8px;

2042. }

2044. .tooltip .b-comment {

2045. padding-top: 0 !important;

2046. padding-bottom: 0;

2047. }

2048. .tooltip .b-comment:before {

2049. display: none;

2050. }

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. }

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. }

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;

2119. text-transform: none;

2120. letter-spacing: normal;

2121. word-wrap: normal;

2122. white-space: nowrap;

2123. direction: ltr;

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. }

2135. .b-clubs-menu .block-list li,

2136. .b-clubs-menu .block-list li a {

2137. color: var(—text) !important

2138. }

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. }

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. }

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;

2192. text-transform: none;

2193. letter-spacing: normal;

2194. word-wrap: normal;

2195. white-space: nowrap;

2196. direction: ltr;

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 */

2214. .p-contests .results .cc-result .c-rounds .label {

2215. font-size: .875rem;

2216. }

2218. /**

2219.  * INDEX

2220.  * Изменения главной страницы.

2221.  *

2222.  */

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. }

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. }

2294. /**

2295.  * PROFILE

2296.  *

2297.  */

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. }

2325. /* HISTORY */

2326. .history-interval p:hover {

2327. background-color: var(—bg2);

2328. }

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. }

2348. .p-user_rates-index .list-lines tr td .rate-text {

2349. font-size: .875rem;

2350. line-height: 1.25rem;

2351. }

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. }

2361. .p-user_rates-index .list-lines tr.edit-form .b-input.text textarea {

2362. font-size: .875rem;

2363. }

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. }

2370. .b-stats_bar .bar { border-radius: 2px; }

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;

2396. text-transform: none;

2397. letter-spacing: normal;

2398. word-wrap: normal;

2399. white-space: nowrap;

2400. direction: ltr;

2402. /* Support for all WebKit browsers. */

2403.   -webkit-font-smoothing: antialiased;

2404. /* Support for Safari and Chrome. */

2405. text-rendering: optimizeLegibility;

2407. /* Support for Firefox. */

2408.   -moz-osx-font-smoothing: grayscale;

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. }

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. }

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. }

2490. .b-catalog-entry-embedded .b-catalog_entry {

2491. margin-bottom: 0 !important;

2492. }

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. }

2504. .b-topic {

2505. margin-bottom: .5rem;

2506. }

2507. .m13 {

2508. margin-bottom: 0 !important;

2509. }

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. }

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 */

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. }

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. }

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. }

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;

2624. text-transform: none;

2625. letter-spacing: normal;

2626. word-wrap: normal;

2627. white-space: nowrap;

2628. direction: ltr;

2630. /* Support for all WebKit browsers. */

2631.   -webkit-font-smoothing: antialiased;

2632. /* Support for Safari and Chrome. */

2633. text-rendering: optimizeLegibility;

2635. /* Support for Firefox. */

2636.   -moz-osx-font-smoothing: grayscale;

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 */

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 */

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.  */

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. }

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;

2768. text-transform: none;

2769. letter-spacing: normal;

2770. word-wrap: normal;

2771. white-space: nowrap;

2772. direction: ltr;

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. }

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;

2795. text-transform: none;

2796. letter-spacing: normal;

2797. word-wrap: normal;

2798. white-space: nowrap;

2799. direction: ltr;

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. }

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;

2822. text-transform: none;

2823. letter-spacing: normal;

2824. word-wrap: normal;

2825. white-space: nowrap;

2826. direction: ltr;

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. }

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. }

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. }

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. }

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. }

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. }

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. }

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;

3142. text-transform: none;

3143. letter-spacing: normal;

3144. word-wrap: normal;

3145. white-space: nowrap;

3146. direction: ltr;

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. }

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;

3214. text-transform: none;

3215. letter-spacing: normal;

3216. word-wrap: normal;

3217. white-space: nowrap;

3218. direction: ltr;

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. }

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. }

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. }

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. }

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. }

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;

3365. text-transform: none;

3366. letter-spacing: normal;

3367. word-wrap: normal;

3368. white-space: nowrap;

3369. direction: ltr;

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 */

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. }

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. }

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. }

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 */

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 */

3471. /* FLOATED OPTIONS */

3472. .b-options-floated {

3473. margin-top: 16px;

3474. font-size: 14px;

3475. font-weight: 500;

3476. line-height: 16px;

3477. }

3479. .b-options-floated.before-buttons-2 {

3480. padding-right: 112px;

3481. }

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. }

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. }

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. }

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. }

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. }

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. }

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. }

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. }

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 */

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. }

3590. .p-messages .mass-actions .action:after {

3591. display: none;

3592. }

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. }

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 */

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. }

3624. .b-db_entry-note:first-child {

3625. padding-top: 8px;

3626. }

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. }

3638. .b-db_entry-note:last-child:before {

3639. display: none;

3640. }

3642. /* FIX */

3643. .b-db_entry-note:before {

3644. right: 0;

3645. left: 64px;

3646. }

3648. .p-db_entries-related .b-db_entry-note {

3649. padding: 16px 0;

3650. }

3652. .p-db_entries-related .b-db_entry-note:first-child {

3653. padding-top: 16px;

3654. }

3655. /* END of DB ENTRY NOTES*/

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. }

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. }

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. }

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. }

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. }

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. }

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. }

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. }

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. }

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 */

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. }

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. }

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. }

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. }

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. }

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. }

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 */

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. }

3812. .b-dialog:hover .to_dialog {

3813. background-color: rgba(0,0,0,.05);

3814. z-index: 0;

3815. }

3817. .b-dialog img,

3818. .b-dialog a,

3819. .b-dialog .buttons {

3820. position: relative;

3821. z-index: 2;

3822. }

3823. /* EXPEREMENTAL CODE | END */

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 */

3867. /**

3868.  * PROFILE HEAD

3869.  * Adaptive profile header includes: avatar, history, information, anime/manga bars.

3870.  */

3872. .p-profiles .profile-head {

3873. position: relative;

3874. overflow: visible;

3875. }

3877. .p-profiles .profile-head {

3878. min-height: 216px;

3879. padding-top: 3rem;

3880. margin-top: -1rem;

3881. background-color: none;

3882. }

3884. .p-profiles .profile-head .c-brief {

3885. position: relative;

3886. margin: -3rem -1rem 1rem;

3887. overflow: hidden;

3888. }

3890. .p-profiles .profile-head .c-brief:before {

3891. content: »;

3892. display: block;

3893. height: 0;

3894. padding-bottom: 0;

3895. }

3897. .p-profiles .profile-head .c-brief .avatar > img,

3898. .p-profiles .profile-head .c-history {

3899. display: none;

3900. }

3902. @media screen and (min-width: 320px) {

3903. .p-profiles .profile-head .c-mobile-actions {

3904. display: none;

3905. }

3907. .p-profiles .profile-head .c-brief:before {

3908. content: »;

3909. display: block;

3910. height: 0;

3911. padding-bottom: 34%;

3912. }

3914. .p-profiles .profile-head .c-brief .avatar {

3915. float: none;

3916. max-width: 100%;

3917. margin: 0 auto;

3918. margin-top: -17%;

3919. }

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. }

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. }

3939. .p-profiles .profile-head .c-brief .avatar .profile-actions > a:first-child {

3940. float: right;

3941. margin: 0 .25rem;

3942. }

3944. .profile-actions .fav-add,

3945. .profile-actions .fav-remove {

3946. float: right;

3947. }

3949. .p-profiles .profile-head .c-brief header {

3950. clear: both;

3951. text-align: center;

3952. }

3953. }

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. }

3972. .p-profiles .profile-head .c-history > .subheadline {

3973. display: inline-block;

3974. vertical-align: top;

3975. }

3977. .p-profiles .profile-head .c-history > .subheadline > a {

3978. color: var(—text) !important;

3979. }

3981. .p-profiles .profile-head .c-history > .subheadline > a:before {

3982. display: none;

3983. }

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. }

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. }

4002. .p-profiles .profile-head .c-history .entry:before {

4003. display: none;

4004. }

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. }

4017. .p-profiles .profile-head .c-history .entry span.misc {

4018. display: none;

4019. }

4021. @media screen and (min-width: 600px) {

4022. .p-profiles .profile-head .c-history {

4023. padding: .25rem 1rem;

4024. }

4025. }

4026. }

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. }

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. }

4048. @media screen and (min-width: 360px) and (max-width: 599px) {

4049. .p-profiles .profile-head .c-mobile-actions {

4050. display: none;

4051. }

4053. .p-profiles .profile-head .c-brief .avatar .profile-actions {

4054. display: block;

4055. }

4056. }

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. }

4070. .p-profiles .profile-head .c-brief .avatar .profile-actions > a:first-child {

4071. float: none;

4072. margin: 0;

4073. }

4075. .profile-actions .fav-add,

4076. .profile-actions .fav-remove {

4077. float: none;

4078. }

4080. .p-profiles .profile-head .c-brief:before {

4081. padding-bottom: 48px;

4082. }

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. }

4091. .p-profiles .profile-head .c-brief .avatar img {

4092. width: 120px;

4093. }

4095. .p-profiles .profile-head .c-brief header {

4096. clear: none;

4097. padding: 1rem 0;

4098. text-align: left;

4099. }

4100. }

4103. @media screen and (min-width: 600px) {

4104. .p-profiles .profile-head .c-brief {

4105. margin: -3rem -1rem 0;

4106. overflow: hidden;

4107. }

4109. .p-profiles .profile-head .c-brief .avatar img {

4110. width: 160px;

4111. }

4113. .p-profiles .profile-head .c-brief .avatar .profile-actions {

4114. display: block;

4115. }

4116. }

4118. @media screen and (min-width: 768px) {

4119. .p-profiles .profile-head .c-brief {

4120. overflow: visible;

4121. }

4122. }

4124. @media screen and (min-width: 960px) {

4125. .p-profiles .profile-head {

4126. padding-top: 0;

4127. margin-top: 0;

4128. }

4130. .p-profiles .profile-head .c-brief {

4131. max-height: 504px;

4132. margin: 0;

4133. overflow: visible;

4134. }

4136. .p-profiles .profile-head .c-brief:before {

4137. padding-bottom: 0;

4138. }

4140. .p-profiles .profile-head .c-brief .avatar {

4141. margin: 1rem 2rem 1rem 0;

4142. }

4144. .p-profiles .profile-head .c-info {

4145. margin-bottom: 1.5rem;

4146. }

4148. .p-profiles .profile-head .c-history {

4149. display: block;

4150. }

4151. }

4152. /**

4153.  * PROFILE COVER

4154.  */

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. }

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. }

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. }

4185. .p-profiles .profile-head .c-brief .avatar img {

4186. width: 120px;

4187. }

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. }

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. }

4211. .p-profiles .profile-head .c-brief:before {

4212. height: 9999px;

4213. max-height: inherit;

4214. padding-bottom: 0;

4215. }

4217. .p-profiles .profile-head .c-brief .avatar {

4218. max-width: 160px;

4219. }

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. }

4226. .p-profiles .profile-head .c-brief header {

4227. padding: 1rem 1.5rem 1rem calc(4.5rem + 160px);

4228. }

4229. }

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. }

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. }

4257. /* Цвет основного текста */

4258. .p-profiles  .profile-head header.head h1,

4259. .p-profiles  .profile-head header.head h2 {

4260. color: #fff;

4261. }

4263. /* Цвет дополнительного текста */

4264. .p-profiles  .profile-head header.head .notice,

4265. .p-profiles .profile-head .c-info .c-additionals b {

4266. color: #aaa;

4267. }

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. }

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.  */

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. }

4309. .p-profiles .profile-head .c-history > .subheadline > a {

4310. color: var(—text) !important;

4311. }

4313. .p-profiles .profile-head .c-history > .subheadline > a:before {

4314. display: none;

4315. }

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. }

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. }

4334. .p-profiles .profile-head .c-history .entry:before {

4335. display: none;

4336. }

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. }

4349. .p-profiles .profile-head .c-history .entry span.misc {

4350. display: none;

4351. }

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. }

4364. .p-profiles .profile-head .c-history > .subheadline > a:hover {

4365. color: var(—text) !important

4366. }

4368. .p-profiles .profile-head .c-history .entry {

4369. margin-left: 1rem;

4370. border-radius: 1rem;

4371. overflow: hidden; /* TODO: check elem height */

4372. }

4374. /* full-width bars */

4375. .p-profiles .profile-head .c-info {

4376. width: 100%;

4377. padding-right: 0;

4378. }

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. }

4389. /*Change shiki icons to material*/

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. }

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. }

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. }

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. }

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;

4463. text-transform: none;

4464. letter-spacing: normal;

4465. word-wrap: normal;

4466. white-space: nowrap;

4467. direction: ltr;

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. }

4504. /*Anime progress icons*/

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. }

4563. /**

4564.  * PROFILE CONTENT

4565.  * Change layout Activity, Friends, Clubs, Favorites blocks —————————————————————————

4566.  */

4568. .p-profiles .lifetime {

4569. margin-bottom: 0;

4570. min-height: 0;

4571. }

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)*/

4591. .p-profiles .lifetime .title > .label {

4592. font-size: 0;

4593. line-height: 0;

4594. }

4596. .p-profiles .lifetime .title > .label:before {

4597. content: ‘Активность’;

4598. display: block;

4599. font-size: 0.875rem;

4600. line-height: 1rem;

4601. }

4603. .p-profiles .lifetime .title .value {

4604. height: 16px;

4605. margin-top: 0;

4606. line-height: 16px;

4607. }

4609. .p-profiles .profile-content .cc-2 .c-right .cc-2a {

4610. margin-bottom: 16px !important;

4611. }

4613. @media (min-width: 768px) {

4614. .p-profiles .profile-content .graph {

4615. height: 155px;

4616. }

4618. .p-profiles .profile-content .cc-2 > .c-column {

4619. width: 100%;

4620. margin-bottom: 1rem;

4621. }

4623. .p-profiles .profile-content .cc-2 .activity {

4624. padding-bottom: 1rem;

4625. }

4626. }

4629. @media (min-width: 960px) {

4630. .p-profiles .profile-content .cc-2 {

4631. position: relative;

4632. }

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. }

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. }

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. }

4660. .p-dashboards-show .cc-news .c-news_topics .b-topic {

4661. border-top-width: 0;

4662. }

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. }

4694. .p-profiles .profile-head .c-brief header {

4695. background-image: linear-gradient(to top, rgba(0,0,0,.7) 100%, transparent) !important;

4696. }

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); }

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); }

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; } */

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. }

4739. .p-contests .match-day .match-link:hover {

4740. background-color: var(—bg2);

4741. }

4743. .tooltip-inner {

4744. color: var(—text);

4745. background: rgba(0,0,0,.8)

4746. }

4748. .tooltip-inner .close {

4749. background: none;

4750. }

4753. .line-container .key {

4754. color: var(—text) !important;

4755. }

4757. .b-user16:hover {

4758. color: #f2f2f2 !important;

4759. background-color: #333;

4760. }

4762. .l-top_menu .menu-items {

4763. background: var(—bg2);

4764. }

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. }

4775. .l-top_menu .submenu {

4776. padding-left: 0;

4777. }

4779. .l-top_menu .menu-items .entry a.entry {

4780. display: block;

4781. margin-left: -10px;

4782. padding-left: 30px;

4783. }

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. }

4809. .input,

4810. input {

4811. background: var(—bg);

4812. color: var(—text-sec);

4813. }

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. }

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. }

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. }

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. }

4856. .l-page .menu-toggler {

4857. top: -80px !important;

4858. width: 40px;

4859. margin-right: -20px;

4860. }

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. }

4874. .b-input textarea, textarea.comment_body {

4875. height: 800px !important;

4876. overflow: scroll !important;

4877. }

4879. .b-options-floated .action {

4880. color: var(—main-col);

4881. }

4882. .b-options-floated .action:hover {

4883. text-decoration: underline !important;

4884. }

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. }

4900. .b-list li {

4901. list-style: none;

4902. }

4903. .b-entry-info .line .value {

4904. color: var(—text-sec);

4905. }

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. }

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. }

4944. .p-profiles .profile-content .cc-2 .c-left {

4945. position: absolute;

4946. }

4948. .p-profiles .profile-content .cc-2 .c-right .cc-2a {

4949. top: 200px;

4950. position: absolute;

4951. left: 0;

4952. width: 77%;

4953. }

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. }

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. }

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. }

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. }

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. }

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. }

5032. .b-spoiler .content .inner, .b-spoiler .content .inner-prgrph {

5033. border-bottom: 1px dashed #555;

5034. }

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. }

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. }

5070. .p-profiles .profile-content .cc-2 .c-right .cc-2a {

5071.   top: -63%;

5072. }

5073. }*/

5075. .p-user_rates-index .list-lines tr td .rewatches {

5076. color: var(—main-col);

5077. }

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. }

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. }

5096. .c-column .b-options-floated {

5097. margin-top: 22px;

5098. }

5099. .b-height_shortener .shade {

5100. left: 0;

5101. }

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. }

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. }

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. }

5161. .b-options-floated {

5162. margin-top: 6px;

5163. }

5164. .p-contests-show .warning {

5165. margin-top: 0;

5166. }

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. }