The version of vichan running on lainchan.org
Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.

1922 рядки
30KB

  1. /*Lainchan*/
  2. div.sidearrows{
  3. display:none;
  4. }
  5. td{
  6. }
  7. html, body {
  8. max-width: 100%!important;
  9. overflow-x: hidden!important;
  10. }
  11. .post-image{
  12. max-width: 94%!important;
  13. }
  14. select{
  15. float:right;
  16. }
  17. div.pages{
  18. margin:0!important;
  19. padding: 0!important;
  20. }
  21. div.boardlist.bottom {
  22. text-align: center!important;
  23. display: none!important;
  24. }
  25. img.banner, img.board_image {
  26. max-width: 100%!important;
  27. }
  28. .pintro{
  29. width: 98%!important;
  30. }
  31. .bar {
  32. display: table!important;
  33. position: fixed;
  34. width: 100%;
  35. left: 0px;
  36. z-index: 3;
  37. background-color: #333333;
  38. border-color: #B7C5D9;
  39. }
  40. .bar > :not(script) {
  41. display: table-cell;
  42. vertical-align: middle;
  43. }
  44. .bar.top {
  45. text-align: center;
  46. top: 0px;
  47. border-bottom: 1px solid #B7C5D9;
  48. }
  49. .bar.bottom {
  50. bottom: 0px;
  51. border-top: 1px solid #333333;
  52. background-color: #333333 ;
  53. }
  54. /*homepage banner*/
  55. div.lain_banner{
  56. margin:auto;
  57. position: absolute;
  58. }
  59. /* === GENERAL TAG SETTINGS === */
  60. /* Page Layouts */
  61. body {
  62. background: #EEF2FF url('img/fade-blue.png') repeat-x 50% 0%;
  63. color: black;
  64. font-family: arial,helvetica,sans-serif;
  65. font-size: 10pt;
  66. margin: 0 4px;
  67. padding-left: 4px;
  68. padding-right: 4px;
  69. }
  70. main,
  71. aside,
  72. section {
  73. display: block;
  74. margin: 0 auto;
  75. width: 100%;
  76. }
  77. main {
  78. max-width: 1110px;
  79. }
  80. /* Tables */
  81. table {
  82. margin: auto;
  83. }
  84. table.board-list-table {
  85. width: 100%;
  86. }
  87. table tbody td {
  88. margin: 0;
  89. padding: 4px 15px 4px 4px;
  90. text-align: left;
  91. }
  92. table thead th {
  93. border: 1px solid #000333;
  94. padding: 4px 15px 5px 5px;
  95. background: #98E;
  96. color: #000333;
  97. text-align: left;
  98. white-space: nowrap;
  99. }
  100. table tbody tr:nth-of-type( even ) {
  101. background-color: transparent!important;
  102. }
  103. tr{
  104. }
  105. td.minimal,th.minimal {
  106. width: 1%;
  107. white-space: nowrap;
  108. }
  109. table.mod.config-editor {
  110. font-size: 9pt;
  111. width: 100%;
  112. }
  113. table.mod.config-editor td {
  114. text-align: left;
  115. padding: 5px;
  116. border-bottom: 1px solid #98e;
  117. }
  118. table.mod.config-editor input[type="text"] {
  119. width: 98%;
  120. }
  121. .longtable p {
  122. margin: 0;
  123. }
  124. /* Uncategorized */
  125. #post-form-outer {
  126. text-align: center;
  127. }
  128. #post-form-inner {
  129. display: inline-block;
  130. }
  131. .post-table, .post-table-options, textarea {
  132. width: 100%;
  133. }
  134. #post-form-inner .post-table tr {
  135. background-color: transparent;
  136. }
  137. .post-table th, .post-table-options th {
  138. width: 85px;
  139. }
  140. .post-table-options {
  141. display: none;
  142. }
  143. .required-field-cell {
  144. vertical-align: top;
  145. }
  146. .show-options-cell {
  147. text-align: right;
  148. }
  149. .hidden {
  150. display:none;
  151. }
  152. a,a:visited {
  153. text-decoration: underline;
  154. color: #34345C;
  155. }
  156. a:hover,.intro a.post_no:hover {
  157. color: #ff0000;
  158. }
  159. a.post_no {
  160. text-decoration: none;
  161. margin: 0;
  162. padding: 0;
  163. }
  164. .intro a.post_no {
  165. color: inherit;
  166. }
  167. .intro a.post_no,p.intro a.email,p.intro a.post_anchor {
  168. margin: 0;
  169. }
  170. .intro a.email span.name {
  171. color: #34345C;
  172. }
  173. .intro a.email:hover span.name {
  174. color: #ff0000;
  175. }
  176. .intro label {
  177. display: inline;
  178. }
  179. .intro time,p.intro a.ip-link,p.intro a.capcode {
  180. direction: ltr;
  181. unicode-bidi: embed;
  182. }
  183. h2 {
  184. color: #AF0A0F;
  185. font-size: 11pt;
  186. margin: 0;
  187. padding: 0;
  188. }
  189. header {
  190. margin: 2em 0;
  191. }
  192. h1 {
  193. font-family: tahoma;
  194. letter-spacing: -2px;
  195. font-size: 20pt;
  196. margin: 0;
  197. }
  198. header div.subtitle,h1 {
  199. color: #AF0A0F;
  200. text-align: center;
  201. }
  202. header div.subtitle {
  203. font-size: 8pt;
  204. }
  205. form table {
  206. margin: auto;
  207. }
  208. form table input {
  209. height: auto;
  210. }
  211. input[type="text"],input[type="password"],textarea {
  212. border: 1px solid #a9a9a9;
  213. text-indent: 0;
  214. text-shadow: none;
  215. text-transform: none;
  216. word-spacing: normal;
  217. font-size: inherit;
  218. font-family: sans-serif;
  219. padding:0px!important;
  220. }
  221. #upload input[type="file"] {
  222. max-width: 230px;
  223. }
  224. form table tr td {
  225. text-align: left;
  226. margin: 0;
  227. padding: 0;
  228. }
  229. form table.mod tr td {
  230. padding: 2px;
  231. }
  232. form table tr th {
  233. text-align: left;
  234. padding: 4px;
  235. }
  236. form table tr th {
  237. background: #98E;
  238. }
  239. form table tr td div.center {
  240. text-align: center;
  241. float: left;
  242. padding: 3px;
  243. padding-top: 0px;
  244. border: 1px dashed black;
  245. margin: 2px
  246. }
  247. /*form table tr td div input {
  248. display: block;
  249. margin: 2px auto 0 auto;
  250. }
  251. form table tr td div label {
  252. font-size: 10px;
  253. }*/
  254. .unimportant,.unimportant * {
  255. font-size: 10px;
  256. }
  257. .file {
  258. float: left;
  259. margin-right: 2px;
  260. }
  261. .file:not(.multifile) .post-image {
  262. float: left;
  263. }
  264. .file:not(.multifile) {
  265. float: none;
  266. }
  267. p.fileinfo {
  268. display: block;
  269. margin: 0 0 0 20px;
  270. }
  271. div.post p.fileinfo {
  272. padding-left: 5px;
  273. }
  274. div.banner {
  275. background-color: #E04000;
  276. font-size: 12pt;
  277. font-weight: bold;
  278. text-align: center;
  279. margin: 1em 0;
  280. }
  281. div.banner,div.banner a {
  282. color: white;
  283. }
  284. div.banner a:hover {
  285. color: #EEF2FF;
  286. text-decoration: none;
  287. }
  288. img.banner,img.board_image {
  289. display: block;
  290. border: 1px solid #a9a9a9;
  291. margin: 12px auto 0 auto;
  292. }
  293. .post-image {
  294. display: block;
  295. float: left;
  296. margin: 5px 20px 10px 20px;
  297. border: none;
  298. }
  299. .full-image {
  300. float: left;
  301. padding: 5px;
  302. margin: 0 20px 0 0;
  303. max-width: 98%;
  304. }
  305. div.post .post-image {
  306. padding: 5px;
  307. margin: 0 20px 0 0;
  308. }
  309. div.post img.icon {
  310. display: inline;
  311. margin: 0 5px;
  312. padding: 0;
  313. }
  314. div.post i.fa, div.thread i.fa {
  315. margin: 0 4px;
  316. font-size: 16px;
  317. }
  318. div.post.op {
  319. margin-right: 20px;
  320. margin-bottom: 5px;
  321. }
  322. div.post.op hr {
  323. border-color: #D9BFB7;
  324. }
  325. .intro {
  326. margin: 0.5em 0;
  327. padding: 0;
  328. padding-bottom: 0.2em;
  329. }
  330. input.delete {
  331. float: left;
  332. margin: 1px 6px 0 0;
  333. }
  334. .intro span.subject {
  335. color: #0F0C5D;
  336. font-weight: bold;
  337. }
  338. .intro span.name {
  339. color: #117743;
  340. font-weight: bold;
  341. }
  342. .intro span.capcode,p.intro a.capcode,p.intro a.nametag {
  343. color: #F00000;
  344. margin-left: 0;
  345. }
  346. .intro a {
  347. margin-left: 5px;
  348. }
  349. .sage {
  350. color: red;
  351. font-weight: bold;
  352. }
  353. .required-star {
  354. color: maroon;
  355. }
  356. div.post p {
  357. display: block;
  358. margin: 0;
  359. line-height: 1.16em;
  360. font-size: 13px;
  361. min-height: 1.16em;
  362. }
  363. div.post div.body {
  364. margin-top: 0.8em;
  365. padding-right: 3em;
  366. padding-bottom: 0.3em;
  367. }
  368. div.post.reply div.body {
  369. margin-left: 1.8em;
  370. }
  371. div.post.reply.highlighted {
  372. background: #D6BAD0;
  373. }
  374. div.post.reply div.body a {
  375. color: #D00;
  376. }
  377. div.post div.body {
  378. word-wrap: break-word;
  379. white-space: pre-wrap;
  380. }
  381. div.post.reply {
  382. background: #D6DAF0;
  383. margin: 0.2em 4px;
  384. padding: 0.5em 0.3em 0.5em 0.6em;
  385. border-width: 1px;
  386. border-style: none solid solid none;
  387. border-color: #B7C5D9;
  388. display: inline-block;
  389. max-width: 94%!important;
  390. }
  391. div.post.reply.has-file.body-not-empty {
  392. min-width: 33%;
  393. }
  394. div.post_modified {
  395. margin-left: 1.8em;
  396. }
  397. div.post_modified div.content-status {
  398. margin-top: 0.5em;
  399. padding-bottom: 0em;
  400. font-size: 72%;
  401. }
  402. div.post_modified div.content-status:first-child {
  403. margin-top: 1.3em;
  404. }
  405. div.post_modified div.content-status:first-child {
  406. margin-top: 1.3em;
  407. }
  408. a.dashed-underline {
  409. text-decoration: none;
  410. border-bottom: 1px dashed;
  411. }
  412. span.trip {
  413. color: #228854;
  414. }
  415. .quote {
  416. color: #789922;
  417. }
  418. span.omitted {
  419. display: block;
  420. margin-top: 1em;
  421. }
  422. br.clear {
  423. clear: left;
  424. display: block;
  425. }
  426. span.controls {
  427. float: right;
  428. margin: 0;
  429. padding: 0;
  430. font-size: 80%;
  431. }
  432. span.controls.op {
  433. float: none;
  434. margin-left: 10px;
  435. }
  436. span.controls a {
  437. margin: 0;
  438. }
  439. div#wrap {
  440. width: 900px;
  441. margin: 0 auto;
  442. }
  443. div.module,
  444. div.ban {
  445. background: white;
  446. border: 1px solid #98E;
  447. max-width: 700px;
  448. margin: 30px auto;
  449. }
  450. div.ban p,
  451. div.ban h2 {
  452. padding: 3px 7px;
  453. }
  454. div.ban h2 {
  455. background: #98E;
  456. color: black;
  457. font-size: 12pt;
  458. }
  459. div.ban p {
  460. font-size: 12px;
  461. margin-bottom: 12px;
  462. }
  463. div.ban p.reason {
  464. font-weight: bold;
  465. }
  466. span.heading {
  467. color: #AF0A0F;
  468. font-size: 11pt;
  469. font-weight: bold;
  470. }
  471. span.spoiler {
  472. background: black;
  473. color: black;
  474. padding: 0 1px;
  475. }
  476. div.post.reply div.body span.spoiler a {
  477. color: black;
  478. }
  479. span.spoiler:hover,div.post.reply div.body span.spoiler:hover a {
  480. color: white;
  481. }
  482. div.styles {
  483. float: right;
  484. padding-bottom: 20px;
  485. }
  486. div.styles a {
  487. margin: 0 10px;
  488. }
  489. div.styles a.selected {
  490. text-decoration: none;
  491. }
  492. table.test {
  493. width: 100%;
  494. }
  495. table.test td,table.test th {
  496. text-align: left;
  497. padding: 5px;
  498. }
  499. table.test tr.h th {
  500. background: #98E;
  501. }
  502. table.test td img {
  503. margin: 0;
  504. }
  505. fieldset label {
  506. display: block;
  507. }
  508. div.pages {
  509. /*! color: #89A; */
  510. /*! background: #D6DAF0; */
  511. display: inline-block;
  512. padding: 8px;
  513. /*! margin: 8px 0 4px 0; */
  514. /*! border-right: 1px solid #B7C5D9; */
  515. /*! border-bottom: 1px solid #B7C5D9; */
  516. }
  517. div.pages.top {
  518. display: block;
  519. padding: 5px 8px;
  520. margin-bottom: 5px;
  521. position: fixed;
  522. top: 0;
  523. right: 0;
  524. opacity: 0.9;
  525. }
  526. @media screen and (max-width: 800px) {
  527. div.pages.top {
  528. display: none!important;
  529. }
  530. }
  531. div.pages a.selected {
  532. color: black;
  533. font-weight: bolder;
  534. }
  535. div.pages a {
  536. text-decoration: none;
  537. }
  538. div.pages form {
  539. margin: 0;
  540. padding: 0;
  541. display: inline;
  542. }
  543. div.pages form input {
  544. margin: 0 5px;
  545. display: inline;
  546. }
  547. hr {
  548. border: none;
  549. border-top: 1px solid #B7C5D9;
  550. height: 0;
  551. clear: left;
  552. }
  553. div.report {
  554. color: #333;
  555. }
  556. div.top_notice {
  557. text-align: center;
  558. margin: 5px auto;
  559. }
  560. span.public_ban {
  561. display: block;
  562. color: red;
  563. font-weight: bold;
  564. margin-top: 15px;
  565. }
  566. span.toolong {
  567. display: block;
  568. margin-top: 15px;
  569. }
  570. div.blotter {
  571. color: red;
  572. font-weight: bold;
  573. text-align: center;
  574. }
  575. .desktop-style div.boardlist:not(.bottom) {
  576. position: fixed;
  577. top: 0;
  578. left: 0;
  579. right: 0;
  580. margin-top: 0;
  581. z-index: 30;
  582. box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
  583. border-bottom: 1px solid;
  584. background-color: #D6DAF0;
  585. }
  586. .desktop-style body {
  587. padding-top: 20px;
  588. }
  589. .desktop-style .sub {
  590. background: inherit;
  591. }
  592. .desktop-style .sub .sub {
  593. display: inline-block;
  594. text-indent: -9000px;
  595. width: 7px;
  596. background: url('img/arrow.png') right center no-repeat;
  597. }
  598. .desktop-style .sub .sub:hover,.desktop-style .sub .sub.hover {
  599. display: inline;
  600. text-indent: 0;
  601. background: inherit;
  602. }
  603. #attention_bar {
  604. height: 1.5em;
  605. max-height: 1.5em;
  606. width: 100%;
  607. max-width: 100%;
  608. text-align: center;
  609. overflow: hidden;
  610. }
  611. #attention_bar_form {
  612. display: none;
  613. padding: 0;
  614. margin: 0;
  615. }
  616. #attention_bar_input {
  617. width: 100%;
  618. padding: 0;
  619. margin: 0;
  620. text-align: center;
  621. }
  622. #attention_bar:hover {
  623. background-color: rgba(100%,100%,100%,0.2);
  624. }
  625. .intro.thread-hidden {
  626. margin: 0;
  627. padding: 0;
  628. }
  629. form.ban-appeal {
  630. margin: 9px 20px;
  631. }
  632. form.ban-appeal textarea {
  633. display: block;
  634. }
  635. .MathJax_Display {
  636. display:inline!important;
  637. }
  638. pre {
  639. margin:0
  640. display: inline!important;
  641. }
  642. .theme-catalog div.thread img {
  643. float: none!important;
  644. margin: auto;
  645. max-height: 150px;
  646. max-width: 200px;
  647. box-shadow: 0 0 4px rgba(0,0,0,0.55);
  648. border: 2px solid rgba(153,153,153,0);
  649. }
  650. .theme-catalog div.thread {
  651. display: inline-block;
  652. vertical-align: top;
  653. text-align: center;
  654. font-weight: normal;
  655. margin-top: 2px;
  656. margin-bottom: 2px;
  657. padding: 2px;
  658. height: 300px;
  659. width: 205px;
  660. overflow: hidden;
  661. position: relative;
  662. font-size: 11px;
  663. max-height: 300px;
  664. background: rgba(182, 182, 182, 0.12);
  665. border: 2px solid rgba(111, 111, 111, 0.34);
  666. max-height:300px;
  667. }
  668. .theme-catalog div.thread strong {
  669. display: block;
  670. }
  671. .theme-catalog div.threads {
  672. text-align: center;
  673. margin-left: -20px;
  674. }
  675. .theme-catalog div.thread:hover {
  676. background: #D6DAF0;
  677. border-color: #B7C5D9;
  678. }
  679. .theme-catalog div.grid-size-vsmall img {
  680. max-height: 33%;
  681. max-width: 95%
  682. }
  683. .theme-catalog div.grid-size-vsmall {
  684. min-width:90px; max-width: 90px;
  685. max-height: 148px;
  686. }
  687. .theme-catalog div.grid-size-small img {
  688. max-height: 33%;
  689. max-width: 95%
  690. }
  691. .theme-catalog div.grid-size-small {
  692. min-width:140px; max-width: 140px;
  693. max-height: 192px;
  694. }
  695. .theme-catalog div.grid-size-medium img {
  696. max-height: 33%;
  697. max-width: 95%
  698. }
  699. .theme-catalog div.grid-size-medium {
  700. min-width:200px; max-width: 200px;
  701. max-height: 274px;
  702. }
  703. .theme-catalog div.grid-size-large img {
  704. max-height: 40%;
  705. max-width: 95%
  706. }
  707. .theme-catalog div.grid-size-large {
  708. min-width: 256px; max-width: 256px;
  709. max-height: 384px;
  710. }
  711. .theme-catalog img.thread-image {
  712. height: auto;
  713. max-width: 100%;
  714. }
  715. @media (max-width: 420px) {
  716. .theme-catalog ul#Grid {
  717. padding-left: 18px;
  718. }
  719. .theme-catalog div.thread {
  720. width: auto;
  721. margin-left: 0;
  722. margin-right: 0;
  723. }
  724. .theme-catalog div.threads {
  725. overflow: hidden;
  726. }
  727. div.post .body {
  728. clear: both;
  729. }
  730. }
  731. .compact-boardlist {
  732. padding: 3px;
  733. padding-bottom: 0;
  734. }
  735. .compact-boardlist .cb-item {
  736. display: inline-block;
  737. vertical-align: middle;
  738. }
  739. .compact-boardlist .cb-icon {
  740. padding-bottom: 1px;
  741. }
  742. .compact-boardlist .cb-fa {
  743. font-size: 21px;
  744. padding: 2px;
  745. padding-top: 0;
  746. }
  747. .compact-boardlist .cb-cat {
  748. padding: 5px 6px 8px 6px;
  749. }
  750. .cb-menuitem {
  751. display: table-row;
  752. }
  753. .cb-menuitem span {
  754. padding: 5px;
  755. display: table-cell;
  756. text-align: left;
  757. border-top: 1px solid rgba(0,0,0,0.5);
  758. }
  759. .cb-menuitem span.cb-uri {
  760. text-align: right;
  761. }
  762. .boardlist:not(.compact-boardlist) #watch-pinned::before {
  763. content: " [ ";
  764. }
  765. .boardlist:not(.compact-boardlist) #watch-pinned::after {
  766. content: " ] ";
  767. }
  768. .boardlist:not(.compact-boardlist) #watch-pinned {
  769. display: inline;
  770. }
  771. .boardlist:not(.compact-boardlist) #watch-pinned a {
  772. margin-left: 3pt;
  773. }
  774. .boardlist:not(.compact-boardlist) #watch-pinned a:first-child {
  775. margin-left: 0pt;
  776. }
  777. .compact-boardlist #watch-pinned {
  778. display: inline-block;
  779. vertical-align: middle;
  780. }
  781. .new-posts {
  782. opacity: 0.6;
  783. margin-top: 1em;
  784. }
  785. .new-threads, .board-settings {
  786. text-align: center;
  787. }
  788. #options_handler, #alert_handler {
  789. position: fixed;
  790. top: 0px;
  791. left: 0px;
  792. right: 0px;
  793. bottom: 0px;
  794. width: 100%;
  795. height: 100%;
  796. text-align: center;
  797. z-index: 9900;
  798. }
  799. #options_background, #alert_background {
  800. background: black;
  801. opacity: 0.5;
  802. position: absolute;
  803. top: 0px;
  804. left: 0px;
  805. right: 0px;
  806. bottom: 0px;
  807. width: 100%;
  808. height: 100%;
  809. z-index: -1;
  810. }
  811. #options_div, #alert_div {
  812. background-color: #d6daf0;
  813. border: 1px solid black;
  814. display: inline-block;
  815. position: relative;
  816. margin-top: 20px;
  817. }
  818. #options_div {
  819. width: 600px;
  820. height: 360px;
  821. /* width: 620px;
  822. height: 400px;
  823. resize: both;
  824. overflow: auto;*/
  825. }
  826. #alert_div {
  827. width: 500px;
  828. }
  829. #alert_message {
  830. text-align: center;
  831. margin: 13px;
  832. font-size: 110%;
  833. }
  834. .alert_button {
  835. margin-bottom: 13px;
  836. }
  837. #options_div textarea {
  838. max-width: 100%;
  839. }
  840. #options_close, #alert_close {
  841. top: 0px;
  842. right: 0px;
  843. position: absolute;
  844. margin-right: 3px;
  845. font-size: 20px;
  846. z-index: 100;
  847. }
  848. #options_tablist {
  849. padding: 0px 5px;
  850. left: 0px;
  851. width: 90px;
  852. top: 0px;
  853. bottom: 0px;
  854. height: 100%;
  855. border-right: 1px solid black;
  856. }
  857. .options_tab_icon {
  858. padding: 5px;
  859. color: black;
  860. cursor: pointer;
  861. }
  862. .options_tab_icon.active {
  863. color: red;
  864. }
  865. .options_tab_icon i {
  866. font-size: 20px;
  867. }
  868. .options_tab_icon div {
  869. font-size: 11px;
  870. }
  871. .options_tab {
  872. padding: 10px;
  873. position: absolute;
  874. top: 0px;
  875. bottom: 10px;
  876. left: 101px;
  877. right: 0px;
  878. text-align: left;
  879. font-size: 12px;
  880. overflow-y: auto;
  881. }
  882. .options_tab h2 {
  883. text-align: center;
  884. margin-bottom: 5px;
  885. }
  886. .mobile-style #options_div, .mobile-style #alert_div {
  887. display: block;
  888. width: 100%;
  889. height: 100%;
  890. margin-top: 0px;
  891. }
  892. .mentioned {
  893. word-wrap: break-word;
  894. }
  895. .poster_id {
  896. cursor: pointer;
  897. white-space:nowrap;
  898. display: inline-block;
  899. -webkit-user-select: none;
  900. -moz-user-select: none;
  901. -ms-user-select: none;
  902. -o-user-select: none;
  903. user-select: none;
  904. }
  905. .poster_id:hover {
  906. color: #800000!important;
  907. }
  908. .poster_id::before {
  909. content: " ID: ";
  910. }
  911. pre {
  912. /* Better code tags */
  913. max-width:inherit;
  914. word-wrap:normal;
  915. overflow:auto;
  916. display: block!important;
  917. font-size:9pt;
  918. font-family:monospace;
  919. }
  920. span.pln {
  921. color:grey;
  922. }
  923. @media screen and (min-width: 768px) {
  924. .intro {
  925. clear: none;
  926. }
  927. div.post div.body {
  928. clear: none;
  929. }
  930. }
  931. /* === SITE-WIDE ASSETS === */
  932. #logo {
  933. display: block;
  934. width: 100%;
  935. padding: 0;
  936. margin: 0 0 0 0;
  937. text-align: center;
  938. }
  939. #logo-link {
  940. display: inline;
  941. }
  942. #logo-img {
  943. display: inline-block;
  944. height: 128px;
  945. width: auto;
  946. }
  947. /* === GENERAL CLASSES === */
  948. .loading {
  949. background: none;
  950. background-color: none;
  951. background-image: url('/static/infinity.gif');
  952. background-position: center center;
  953. background-repeat: no-repeat;
  954. min-height: 76px;
  955. min-width: 128px;
  956. }
  957. .loading-small {
  958. background: none;
  959. background-color: none;
  960. background-image: url('/static/infinity-small.gif');
  961. background-position: center center;
  962. background-repeat: no-repeat;
  963. min-height: 24px;
  964. min-width: 48px;
  965. }
  966. /* Text and accessibility */
  967. .ltr {
  968. direction: ltr;
  969. }
  970. .rtl {
  971. direction: rtl;
  972. font-family: Tahoma;
  973. }
  974. /* Responsive helpers */
  975. .col {
  976. box-sizing: border-box;
  977. float: left;
  978. }
  979. .col-12 { width: 100%; }
  980. .col-11 { width: 91.66666667%; }
  981. .col-10 { width: 83.33333333%; }
  982. .col-9 { width: 75%; }
  983. .col-8 { width: 66.66666667%; }
  984. .col-7 { width: 58.33333333%; }
  985. .col-6 { width: 50%; }
  986. .col-5 { width: 41.66666667%; }
  987. .col-4 { width: 33.33333333%; }
  988. .col-3 { width: 25%; }
  989. .col-2 { width: 16.66666667%; }
  990. .col-1 { width: 8.33333333%; }
  991. .left-push {
  992. float: left;
  993. }
  994. .right-push {
  995. float: right;
  996. }
  997. /* Layout design */
  998. .box {
  999. background: #D6DAF0;
  1000. border: 1px solid #000333;
  1001. color: #000333;
  1002. margin: 0 0 12px 0;
  1003. }
  1004. .box-title {
  1005. background: #98E;
  1006. color: #000333;
  1007. font-size: 120%;
  1008. font-weight: bold;
  1009. padding: 4px 8px;
  1010. }
  1011. .box-content {
  1012. padding: 0 8px;
  1013. margin: 4px 0;
  1014. }
  1015. .clearfix {
  1016. display: block;
  1017. clear: both;
  1018. visibility: hidden;
  1019. overflow: hidden;
  1020. font-size: 0px;
  1021. line-height: 0px;
  1022. box-sizing: border-box;
  1023. border: none;
  1024. height: 0;
  1025. margin: 0;
  1026. padding: 0;
  1027. width: 100%;
  1028. zoom: 1;
  1029. }
  1030. /* === SPECIFIC PAGES & FEATURES === */
  1031. /* Board List */
  1032. div.boardlist {
  1033. margin-top: 3px;
  1034. color: #89A;
  1035. font-size: 9pt;
  1036. }
  1037. div.boardlist.bottom {
  1038. margin-top: 12px;
  1039. clear: both;
  1040. }
  1041. div.boardlist a {
  1042. text-decoration: none;
  1043. }
  1044. /* Threads */
  1045. /* Thread Footer */
  1046. #thread-interactions {
  1047. margin: 8px 0;
  1048. clear: both;
  1049. }
  1050. #thread-links {
  1051. float: left;
  1052. }
  1053. #thread-links > a {
  1054. padding-left: none;
  1055. padding-right: 10px;
  1056. }
  1057. #thread-quick-reply {
  1058. display: none;
  1059. position: absolute;
  1060. left: 50%;
  1061. right: 50%;
  1062. text-align: center;
  1063. width: 100px;
  1064. margin-left: -50px;
  1065. }
  1066. #thread_stats {
  1067. float: right;
  1068. }
  1069. #post-moderation-fields {
  1070. float: right;
  1071. text-align: right;
  1072. }
  1073. #delete-fields {
  1074. }
  1075. #report-fields {
  1076. }
  1077. /* threadwatcher */
  1078. #watchlist {
  1079. display: none;
  1080. max-height: 250px;
  1081. overflow: auto;
  1082. border: 1px solid;
  1083. border-style: none solid solid none;
  1084. width: 50%;
  1085. margin: 0 auto;
  1086. margin-bottom: 10px;
  1087. }
  1088. #watchlist {
  1089. font-size: 8pt;
  1090. width: 15%;
  1091. position: fixed;
  1092. right: 0pt;
  1093. bottom: 0pt;
  1094. margin: 0pt;
  1095. padding: 0pt;
  1096. }
  1097. .watchlist-inner, .watchlist-controls {
  1098. margin: 0pt;
  1099. text-align: center;
  1100. }
  1101. #watchlist-toggle, .watchThread, .watchlist-remove, #clearList, #clearGhosts {
  1102. cursor: pointer;
  1103. }
  1104. .own_post {
  1105. font-style: italic;
  1106. font-weight: normal;
  1107. opacity: .666;
  1108. }
  1109. li.mix {
  1110. display: inline-block;
  1111. }
  1112. /* Mona Font */
  1113. .aa {
  1114. font-family: Mona, "MS PGothic", "MS Pゴシック", sans-serif;
  1115. display: block!important;
  1116. font-size: 12pt;
  1117. line-height: 1.1;
  1118. }
  1119. .dx,
  1120. .dy,
  1121. .dz {
  1122. width: 30px;
  1123. text-align: right;
  1124. display: inline-block;
  1125. }
  1126. /* Dice */
  1127. .dice-option table {
  1128. border: 1px dotted black;
  1129. margin: 0;
  1130. border-collapse: collapse;
  1131. }
  1132. .dice-option table td {
  1133. text-align: center;
  1134. border-left: 1px dotted black;
  1135. padding-left: 2px;
  1136. padding-right: 2px;
  1137. padding-bottom: 2px;
  1138. }
  1139. /* Quick reply (why was most of this ever in the script?) */
  1140. #quick-reply {
  1141. position: fixed;
  1142. right: 5%;
  1143. top: 5%;
  1144. float: right;
  1145. display: block;
  1146. padding: 0 0 0 0;
  1147. width: 300px;
  1148. z-index: 100;
  1149. }
  1150. #quick-reply #post-form-inner {
  1151. min-width: 300px;
  1152. }
  1153. #quick-reply .post-table tr td:nth-child(2) {
  1154. width: 33%;
  1155. text-align: right;
  1156. padding-right: 4px;
  1157. }
  1158. #quick-reply tr td:nth-child(2) input[type="submit"] {
  1159. width: 99%;
  1160. }
  1161. #quick-reply th, #quick-reply td {
  1162. margin: 0;
  1163. padding: 0;
  1164. }
  1165. #quick-reply th {
  1166. text-align: center;
  1167. padding: 2px 0;
  1168. border: 1px solid #222;
  1169. }
  1170. #quick-reply th .handle {
  1171. float: left;
  1172. width: 100%;
  1173. display: inline-block;
  1174. }
  1175. #quick-reply th .close-btn {
  1176. float: right;
  1177. padding: 0 5px;
  1178. }
  1179. #quick-reply input[type="text"], #quick-reply select {
  1180. width: 100%;
  1181. padding: 2px;
  1182. font-size: 10pt;
  1183. box-sizing: border-box;
  1184. -webkit-box-sizing:border-box;
  1185. -moz-box-sizing: border-box;
  1186. }
  1187. #quick-reply textarea {
  1188. min-width: 100%;
  1189. box-sizing: border-box;
  1190. -webkit-box-sizing:border-box;
  1191. -moz-box-sizing: border-box;
  1192. font-size: 10pt;
  1193. resize: both;
  1194. }
  1195. #quick-reply input, #quick-reply select, #quick-reply textarea {
  1196. margin: 0 0 1px 0;
  1197. }
  1198. #quick-reply input[type="file"] {
  1199. padding: 5px 2px;
  1200. }
  1201. #quick-reply .nonsense {
  1202. display: none;
  1203. }
  1204. #quick-reply td.recaptcha {
  1205. text-align: center;
  1206. padding: 0 0 1px 0;
  1207. }
  1208. #quick-reply td.recaptcha span {
  1209. display: inline-block;
  1210. width: 100%;
  1211. background: white;
  1212. border: 1px solid #ccc;
  1213. cursor: pointer;
  1214. }
  1215. #quick-reply td.recaptcha-response {
  1216. padding: 0 0 1px 0;
  1217. }
  1218. @media screen and (max-width: 600px) {
  1219. #quick-reply {
  1220. display: none !important;
  1221. }
  1222. }
  1223. #youtube-size input {
  1224. width: 50px;
  1225. }
  1226. /* File selector */
  1227. .dropzone {
  1228. color: #000;
  1229. cursor: default;
  1230. margin: auto;
  1231. padding: 0px 4px;
  1232. text-align: center;
  1233. min-height: 50px;
  1234. max-height: 140px;
  1235. transition: 0.2s;
  1236. background-color: rgba(200, 200, 200, 0.5);
  1237. overflow-y: auto;
  1238. }
  1239. .dropzone-wrap {
  1240. width: 100%;
  1241. }
  1242. .dropzone .file-hint {
  1243. color: rgba(0, 0, 0, 0.5);
  1244. cursor: pointer;
  1245. position: relative;
  1246. margin-bottom: 5px;
  1247. padding: 10px 0px;
  1248. top: 5px;
  1249. transition: 0.2s;
  1250. border: 2px dashed rgba(125, 125, 125, 0.4);
  1251. }
  1252. .file-hint:hover, .dropzone.dragover .file-hint {
  1253. color: rgba(0, 0, 0, 1);
  1254. border-color: rgba(125, 125, 125, 0.8);
  1255. }
  1256. .dropzone.dragover {
  1257. background-color: rgba(200, 200, 200, 1);
  1258. }
  1259. .dropzone .file-thumbs {
  1260. text-align: left;
  1261. width: 100%;
  1262. }
  1263. .dropzone .tmb-container {
  1264. padding: 3px;
  1265. overflow-x: hidden;
  1266. white-space: nowrap;
  1267. }
  1268. .dropzone .file-tmb {
  1269. height: 40px;
  1270. width: 70px;
  1271. cursor: pointer;
  1272. display: inline-block;
  1273. text-align: center;
  1274. background-color: rgba(187, 187, 187, 0.5);
  1275. background-size: cover;
  1276. background-position: center;
  1277. }
  1278. .dropzone .file-tmb span {
  1279. font-weight: 600;
  1280. position: relative;
  1281. top: 13px;
  1282. }
  1283. .dropzone .tmb-filename {
  1284. display: inline-block;
  1285. vertical-align: bottom;
  1286. bottom: 12px;
  1287. position: relative;
  1288. margin-left: 5px;
  1289. }
  1290. .dropzone .remove-btn {
  1291. cursor: pointer;
  1292. color: rgba(125, 125, 125, 0.5);
  1293. display: inline-block;
  1294. vertical-align: bottom;
  1295. bottom: 10px;
  1296. position: relative;
  1297. margin-right: 5px;
  1298. font-size: 20px
  1299. }
  1300. .dropzone .remove-btn:hover {
  1301. color: rgba(125, 125, 125, 1);
  1302. }
  1303. table.board-list-table {
  1304. display: table;
  1305. margin: -2px;
  1306. margin-bottom: 10px;
  1307. overflow: hidden;
  1308. table-layout: fixed;
  1309. }
  1310. table.board-list-table .board-cell {
  1311. position: static;
  1312. margin: 0;
  1313. padding: 0;
  1314. box-sizing: border-box;
  1315. white-space: nowrap;
  1316. overflow: hidden;
  1317. text-overflow: ellipsis;
  1318. }
  1319. table.board-list-table .board-cell::after {
  1320. content: ' ';
  1321. clear: both;
  1322. }
  1323. table.board-list-table .board-meta {
  1324. padding-right: 4px;
  1325. width: 70px;
  1326. }
  1327. table.board-list-table .board-uri {
  1328. max-width: 196px;
  1329. }
  1330. table.board-list-table .board-title {
  1331. width: auto;
  1332. }
  1333. table.board-list-table .board-pph {
  1334. width: 55px;
  1335. padding: 4px;
  1336. }
  1337. table.board-list-table .board-max {
  1338. width: 90px;
  1339. padding: 4px;
  1340. }
  1341. table.board-list-table .board-unique {
  1342. width: 100px;
  1343. padding: 4px;
  1344. }
  1345. table.board-list-table .board-tags {
  1346. position: relative;
  1347. height: 15px;
  1348. width: auto;
  1349. padding: 0 15px 0 4px;
  1350. }
  1351. table.board-list-table .board-tags .tag-link {
  1352. display: inline;
  1353. }
  1354. table.board-list-table .board-tags .board-cell:hover {
  1355. position: absolute;
  1356. background: #EEF2FF;
  1357. line-height: 23px;
  1358. top: 0;
  1359. bottom: 0;
  1360. width: 310px;
  1361. }
  1362. table.board-list-table tr:nth-of-type( even ) .board-tags .board-cell {
  1363. background: #D6DAF0;
  1364. }
  1365. table.board-list-table .board-uri a {
  1366. display: inline-block;
  1367. float: left;
  1368. }
  1369. table.board-list-table .board-uri .board-nsfw {
  1370. color: rgb(230,0,0);
  1371. margin: 0 0 0 0.6em;
  1372. float: right;
  1373. }
  1374. table.board-list-table .board-uri .board-sfw {
  1375. color: #34345C;
  1376. margin: 0 0 0 0.6em;
  1377. float: right;
  1378. }
  1379. table.board-list-table div.board-cell {
  1380. max-width: 100%;
  1381. overflow: hidden;
  1382. }
  1383. tbody.board-list-loading {
  1384. display: none;
  1385. }
  1386. tbody.board-list-loading .loading {
  1387. height: 80px;
  1388. }
  1389. tbody.board-list-omitted td {
  1390. background: #98E;
  1391. border-top: 1px solid #000333;
  1392. padding: 8px;
  1393. font-size: 125%;
  1394. text-align: center;
  1395. }
  1396. tbody.board-list-omitted #board-list-more {
  1397. cursor: default;
  1398. }
  1399. tbody.board-list-omitted #board-list-more.board-list-hasmore {
  1400. cursor: pointer;
  1401. }
  1402. tbody.board-list-omitted .board-page-loadmore {
  1403. display: none;
  1404. }
  1405. tbody.board-list-omitted .board-list-hasmore .board-page-loadmore {
  1406. display: inline;
  1407. }
  1408. aside.search-container {
  1409. margin-bottom: 12px;
  1410. }
  1411. aside.search-container .box {
  1412. margin-right: 12px;
  1413. }
  1414. .board-search {
  1415. margin: 8px 0;
  1416. }
  1417. .search-item {
  1418. margin: 8px 0;
  1419. }
  1420. .search-sfw {
  1421. display: block;
  1422. cursor: pointer;
  1423. font-size: 110%;
  1424. line-height: 120%;
  1425. }
  1426. #search-sfw-input {
  1427. margin: 0;
  1428. padding: 0;
  1429. transform: scale(1.20);
  1430. }
  1431. #search-lang-input,
  1432. #search-title-input,
  1433. #search-tag-input {
  1434. box-sizing: border-box;
  1435. font-size: 110%;
  1436. line-height: 120%;
  1437. vertical-align: top;
  1438. padding: 2px 0 2px 4px;
  1439. max-width: 100%;
  1440. min-width: 100%;
  1441. width: 100%:
  1442. }
  1443. #search-loading {
  1444. display: inline-block;
  1445. vertical-align: bottom;
  1446. }
  1447. ul.tag-list {
  1448. display: block;
  1449. list-style: none;
  1450. margin: 8px 8px -9px 8px;
  1451. padding: 8px 0 0 0;
  1452. border-top: 1px solid #000333;
  1453. }
  1454. ul.tag-list::after {
  1455. content: ' ';
  1456. display: block;
  1457. clear: both;
  1458. }
  1459. li.tag-item {
  1460. display: inline-block;
  1461. float: left;
  1462. font-size: 100%;
  1463. list-style: none;
  1464. margin: 0;
  1465. padding: 0 4px 0 0;
  1466. }
  1467. li.tag-item:last-child {
  1468. padding-bottom: 17px;
  1469. }
  1470. a.tag-link {
  1471. overflow: hidden;
  1472. white-space: nowrap;
  1473. }
  1474. li.tag-item a.tag-link {
  1475. }
  1476. td.board-tags a.tag-link {
  1477. display: inline-block;
  1478. margin: 0 0.4em 0 0;
  1479. }
  1480. @media screen and (max-width: 1100px) {
  1481. aside.search-container {
  1482. width: 100%;
  1483. margin-bottom: 12px;
  1484. }
  1485. aside.search-container .box {
  1486. margin-right: 0;
  1487. }
  1488. section.board-list {
  1489. margin-top: 12px;
  1490. width: 100%;
  1491. }
  1492. table.board-list-table .board-meta,
  1493. table.board-list-table .board-pph,
  1494. table.board-list-table .board-tags {
  1495. padding: 0;
  1496. margin: 0;
  1497. font-size: 0;
  1498. width: 0;
  1499. }
  1500. }
  1501. #post-moderation-fields {
  1502. display: none;
  1503. }
  1504. .announcement {
  1505. font-size: 75%;
  1506. padding-bottom: 1%;
  1507. margin-left: 5%;
  1508. margin-right: 5%;
  1509. }
  1510. /* Gallery view */
  1511. #gallery_images {
  1512. position: absolute;
  1513. right: 0px;
  1514. bottom: 0px;
  1515. top: 0px;
  1516. width: 12%;
  1517. background-color: rgba(0, 0, 0, 0.4);
  1518. overflow: auto;
  1519. }
  1520. #gallery_toolbar {
  1521. position: absolute;
  1522. right: 12%;
  1523. left: 0px;
  1524. bottom: 0px;
  1525. height: 32px;
  1526. background-color: rgba(0, 0, 0, 0.4);
  1527. text-align: right;
  1528. }
  1529. #gallery_images img {
  1530. width: 100%;
  1531. }
  1532. #gallery_toolbar a {
  1533. font-size: 28px;
  1534. padding-right: 5px;
  1535. }
  1536. #gallery_main {
  1537. position: absolute;
  1538. left: 0px;
  1539. right: 12%;
  1540. bottom: 32px;
  1541. top: 0px;
  1542. padding: 10px;
  1543. }
  1544. #gallery_images img {
  1545. opacity: 0.6;
  1546. -webkit-transition: all 0.5s;
  1547. transition: all 0.5s;
  1548. }
  1549. #gallery_images img:hover, #gallery_images img.active {
  1550. opacity: 1;
  1551. }
  1552. #gallery_images img.active {
  1553. -webkit-box-shadow: 0px 0px 29px 2px rgba(255,255,255,1);
  1554. -moz-box-shadow: 0px 0px 29px 2px rgba(255,255,255,1);
  1555. box-shadow: 0px 0px 29px 2px rgba(255,255,255,1);
  1556. z-index: 1;
  1557. }
  1558. #gallery_main img, #gallery_main video {
  1559. max-width: 100%;
  1560. max-height: 100%;
  1561. position: absolute;
  1562. }
  1563. /* Fileboard */
  1564. table.fileboard th, table.fileboard td {
  1565. padding: 2px;
  1566. text-align: center;
  1567. }
  1568. table.fileboard .intro a {
  1569. margin-left: 0px;
  1570. }
  1571. /* Rules Popup */
  1572. #rules-popup {
  1573. width: 80%;
  1574. height: 80%;
  1575. position: fixed;
  1576. z-index: 9999;
  1577. left: 50%;
  1578. margin-left: -40%;
  1579. top: 50%;
  1580. margin-top: -40vh;
  1581. background: #000000;
  1582. text-align: center;
  1583. font-family: sans-serif;
  1584. font-size: 14px;
  1585. color: #FFFFFF;
  1586. }
  1587. #rules-popup .rules-popup-top {
  1588. font-size: 40px;
  1589. line-height: 60px;
  1590. position: absolute;
  1591. top: 0px;
  1592. height: 60px;
  1593. width: 100%;
  1594. }
  1595. #rules-popup .rules-popup-content-wrapper {
  1596. text-align: left;
  1597. position: absolute;
  1598. bottom: 80px;
  1599. top: 60px;
  1600. width: 100%;
  1601. overflow: auto;
  1602. }
  1603. #rules-popup #rules-popup-content {
  1604. padding: 10px;
  1605. font-size: 12px;
  1606. }
  1607. #rules-popup .rules-popup-bottom {
  1608. bottom: 0px;
  1609. height: 80px;
  1610. width: 100%;
  1611. position: absolute;
  1612. }
  1613. #rules-popup .rules-popup-bottom-instructions {
  1614. line-height: 40px;
  1615. }
  1616. #rules-popup .rules-popup-captcha-wrapper {
  1617. height: 40px;
  1618. }
  1619. #rules-popup .rules-popup-captcha {
  1620. display: inline-block;
  1621. border: 1px solid white;
  1622. font-family: serif;
  1623. padding: 3px;
  1624. }
  1625. #rules-popup .rules-popup-form {
  1626. display: inline-block;
  1627. }
  1628. #rules-popup .rules-popup-form-input {
  1629. width: 100px;
  1630. }
  1631. /* dropdown for boardlist. */
  1632. .dropdown {
  1633. position: relative;
  1634. display: inline-block;
  1635. }
  1636. /* Alter details as needed, I'm not a designer. */
  1637. .dropdown-content {
  1638. display: none;
  1639. position: absolute;
  1640. background-color: #666666;
  1641. min-width: 130px;
  1642. padding: 2px 6px;
  1643. color: #DCA1F5;
  1644. }
  1645. .dropdown:hover .dropdown-content {
  1646. display: block;
  1647. }
  1648. .own_post {
  1649. font-style: italic;
  1650. font-weight: normal;
  1651. opacity: .666;
  1652. }
  1653. div.mix {
  1654. display: inline-block;
  1655. }