lainchan/stylesheets/style.css

1932 lines
30 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/*Lainchan*/
div.sidearrows{
display:none;
}
img {
image-orientation: from-image;
}
/* boardlist gets all scrunched on small screens */
@media screen and (max-width: 600px) {
header, img.board_image {
margin-top: 5em;
}
}
@media screen and (min-width: 700px) {
header, img.board_image {
margin-top: 3em;
}
}
html, body {
max-width: 100%!important;
overflow-x: hidden!important;
}
.post-image{
max-width: 94%!important;
}
select{
float:right;
}
div.pages{
margin:0!important;
padding: 0!important;
}
div.boardlist.bottom {
text-align: center!important;
display: none!important;
}
img.banner, img.board_image {
max-width: 100%!important;
}
.pintro{
width: 98%!important;
}
.bar {
display: table!important;
position: fixed;
width: 100%;
left: 0px;
z-index: 3;
background-color: #333333;
border-color: #B7C5D9;
}
.bar > :not(script) {
display: table-cell;
vertical-align: middle;
}
.bar.top {
text-align: center;
top: 0px;
border-bottom: 1px solid #B7C5D9;
}
.bar.bottom {
bottom: 0px;
border-top: 1px solid #333333;
background-color: #333333 ;
}
/*homepage banner*/
div.lain_banner{
margin:auto;
position: absolute;
}
/* === GENERAL TAG SETTINGS === */
/* Page Layouts */
body {
background: #EEF2FF url('img/fade-blue.png') repeat-x 50% 0%;
color: black;
font-family: arial,helvetica,sans-serif;
font-size: 10pt;
margin: 0 4px;
padding-left: 4px;
padding-right: 4px;
}
main,
aside,
section {
display: block;
margin: 0 auto;
width: 100%;
}
main {
max-width: 1110px;
}
/* Tables */
table {
margin: auto;
}
table.board-list-table {
width: 100%;
}
table tbody td {
margin: 0;
padding: 4px 15px 4px 4px;
text-align: left;
}
table thead th {
border: 1px solid #000333;
padding: 4px 15px 5px 5px;
background: #98E;
color: #000333;
text-align: left;
white-space: nowrap;
}
table tbody tr:nth-of-type( even ) {
background-color: transparent!important;
}
tr{
}
td.minimal,th.minimal {
width: 1%;
white-space: nowrap;
}
table.mod.config-editor {
font-size: 9pt;
width: 100%;
}
table.mod.config-editor td {
text-align: left;
padding: 5px;
border-bottom: 1px solid #98e;
}
table.mod.config-editor input[type="text"] {
width: 98%;
}
.longtable p {
margin: 0;
}
/* Uncategorized */
#post-form-outer {
text-align: center;
}
#post-form-inner {
display: inline-block;
}
.post-table, .post-table-options, textarea {
width: 100%;
}
#post-form-inner .post-table tr {
background-color: transparent;
}
.post-table th, .post-table-options th {
width: 85px;
}
.post-table-options {
display: none;
}
.required-field-cell {
vertical-align: top;
}
.show-options-cell {
text-align: right;
}
.hidden {
display:none;
}
a,a:visited {
text-decoration: underline;
color: #34345C;
}
a:hover,.intro a.post_no:hover {
color: #ff0000;
}
a.post_no {
text-decoration: none;
margin: 0;
padding: 0;
}
.intro a.post_no {
color: inherit;
}
.intro a.post_no,p.intro a.email,p.intro a.post_anchor {
margin: 0;
}
.intro a.email span.name {
color: #34345C;
}
.intro a.email:hover span.name {
color: #ff0000;
}
.intro label {
display: inline;
}
.intro time,p.intro a.ip-link,p.intro a.capcode {
direction: ltr;
unicode-bidi: embed;
}
h2 {
color: #AF0A0F;
font-size: 11pt;
margin: 0;
padding: 0;
}
header {
margin: 3em 0;
}
h1 {
font-family: tahoma;
letter-spacing: -2px;
font-size: 20pt;
margin: 0;
}
header div.subtitle,h1 {
color: #AF0A0F;
text-align: center;
}
header div.subtitle {
font-size: 8pt;
}
form table {
margin: auto;
}
form table input {
height: auto;
}
input[type="text"],input[type="password"],textarea {
border: 1px solid #a9a9a9;
text-indent: 0;
text-shadow: none;
text-transform: none;
word-spacing: normal;
font-size: inherit;
font-family: sans-serif;
padding:0px!important;
}
#upload input[type="file"] {
max-width: 230px;
}
form table tr td {
text-align: left;
margin: 0;
padding: 0;
}
form table.mod tr td {
padding: 2px;
}
form table tr th {
text-align: left;
padding: 4px;
}
form table tr th {
background: #98E;
}
form table tr td div.center {
text-align: center;
float: left;
padding: 3px;
padding-top: 0px;
border: 1px dashed black;
margin: 2px
}
/*form table tr td div input {
display: block;
margin: 2px auto 0 auto;
}
form table tr td div label {
font-size: 10px;
}*/
.unimportant,.unimportant * {
font-size: 10px;
}
.file {
float: left;
margin-right: 2px;
}
.file:not(.multifile) .post-image {
float: left;
}
.file:not(.multifile) {
float: none;
}
p.fileinfo {
display: block;
margin: 0 0 0 20px;
}
div.post p.fileinfo {
padding-left: 5px;
}
div.banner {
background-color: #E04000;
font-size: 12pt;
font-weight: bold;
text-align: center;
margin: 1em 0;
}
div.banner,div.banner a {
color: white;
}
div.banner a:hover {
color: #EEF2FF;
text-decoration: none;
}
img.banner,img.board_image {
display: block;
border: 1px solid #a9a9a9;
margin: 3em auto 0 auto;
}
.post-image {
display: block;
float: left;
margin: 5px 20px 10px 20px;
border: none;
}
.full-image {
float: left;
padding: 5px;
margin: 0 20px 0 0;
max-width: 98%;
}
div.post .post-image {
padding: 5px;
margin: 0 20px 0 0;
}
div.post img.icon {
display: inline;
margin: 0 5px;
padding: 0;
}
div.post i.fa, div.thread i.fa {
margin: 0 4px;
font-size: 16px;
}
div.post.op {
margin-right: 20px;
margin-bottom: 5px;
}
div.post.op hr {
border-color: #D9BFB7;
}
.intro {
margin: 0.5em 0;
padding: 0;
padding-bottom: 0.2em;
}
input.delete {
float: left;
margin: 1px 6px 0 0;
}
.intro span.subject {
color: #0F0C5D;
font-weight: bold;
}
.intro span.name {
color: #117743;
font-weight: bold;
}
.intro span.capcode,p.intro a.capcode,p.intro a.nametag {
color: #F00000;
margin-left: 0;
}
.intro a {
margin-left: 5px;
}
.sage {
color: red;
font-weight: bold;
}
.required-star {
color: maroon;
}
div.post p {
display: block;
margin: 0;
line-height: 1.16em;
font-size: 13px;
min-height: 1.16em;
}
div.post div.body {
margin-top: 0.8em;
padding-right: 3em;
padding-bottom: 0.3em;
}
div.post.reply div.body {
margin-left: 1.8em;
}
div.post.reply.highlighted {
background: #D6BAD0;
}
div.post.reply div.body a {
color: #D00;
}
div.post div.body {
word-wrap: break-word;
white-space: pre-wrap;
}
div.post.reply {
background: #D6DAF0;
margin: 0.2em 4px;
padding: 0.5em 0.3em 0.5em 0.6em;
border-width: 1px;
border-style: none solid solid none;
border-color: #B7C5D9;
display: inline-block;
max-width: 94%!important;
}
div.post.reply.has-file.body-not-empty {
min-width: 33%;
}
div.post_modified {
margin-left: 1.8em;
}
div.post_modified div.content-status {
margin-top: 0.5em;
padding-bottom: 0em;
font-size: 72%;
}
div.post_modified div.content-status:first-child {
margin-top: 1.3em;
}
div.post_modified div.content-status:first-child {
margin-top: 1.3em;
}
a.dashed-underline {
text-decoration: none;
border-bottom: 1px dashed;
}
span.trip {
color: #228854;
}
.quote {
color: #789922;
}
span.omitted {
display: block;
margin-top: 1em;
}
br.clear {
clear: left;
display: block;
}
span.controls {
float: right;
margin: 0;
padding: 0;
font-size: 80%;
}
span.controls.op {
float: none;
margin-left: 10px;
}
span.controls a {
margin: 0;
}
div#wrap {
width: 900px;
margin: 0 auto;
}
div.module,
div.ban {
background: white;
border: 1px solid #98E;
max-width: 700px;
margin: 30px auto;
}
div.ban p,
div.ban h2 {
padding: 3px 7px;
}
div.ban h2 {
background: #98E;
color: black;
font-size: 12pt;
}
div.ban p {
font-size: 12px;
margin-bottom: 12px;
}
div.ban p.reason {
font-weight: bold;
}
span.heading {
color: #AF0A0F;
font-size: 11pt;
font-weight: bold;
}
span.spoiler {
background: black;
color: black;
padding: 0 1px;
}
div.post.reply div.body span.spoiler a {
color: black;
}
span.spoiler:hover,div.post.reply div.body span.spoiler:hover a {
color: white;
}
div.styles {
float: right;
padding-bottom: 20px;
}
div.styles a {
margin: 0 10px;
}
div.styles a.selected {
text-decoration: none;
}
table.test {
width: 100%;
}
table.test td,table.test th {
text-align: left;
padding: 5px;
}
table.test tr.h th {
background: #98E;
}
table.test td img {
margin: 0;
}
fieldset label {
display: block;
}
div.pages {
/*! color: #89A; */
/*! background: #D6DAF0; */
display: inline-block;
padding: 8px;
/*! margin: 8px 0 4px 0; */
/*! border-right: 1px solid #B7C5D9; */
/*! border-bottom: 1px solid #B7C5D9; */
}
div.pages.top {
display: block;
padding: 5px 8px;
margin-bottom: 5px;
position: fixed;
top: 0;
right: 0;
opacity: 0.9;
}
@media screen and (max-width: 800px) {
div.pages.top {
display: none!important;
}
}
div.pages a.selected {
color: black;
font-weight: bolder;
}
div.pages a {
text-decoration: none;
}
div.pages form {
margin: 0;
padding: 0;
display: inline;
}
div.pages form input {
margin: 0 5px;
display: inline;
}
hr {
border: none;
border-top: 1px solid #B7C5D9;
height: 0;
clear: left;
}
div.report {
color: #333;
}
div.top_notice {
text-align: center;
margin: 5px auto;
}
span.public_ban {
display: block;
color: red;
font-weight: bold;
margin-top: 15px;
}
span.toolong {
display: block;
margin-top: 15px;
}
div.blotter {
color: red;
font-weight: bold;
text-align: center;
}
.desktop-style div.boardlist:not(.bottom) {
position: fixed;
top: 0;
left: 0;
right: 0;
margin-top: 0;
z-index: 30;
box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
border-bottom: 1px solid;
background-color: #D6DAF0;
}
.desktop-style body {
padding-top: 20px;
}
.desktop-style .sub {
background: inherit;
}
.desktop-style .sub .sub {
display: inline-block;
text-indent: -9000px;
width: 7px;
background: url('img/arrow.png') right center no-repeat;
}
.desktop-style .sub .sub:hover,.desktop-style .sub .sub.hover {
display: inline;
text-indent: 0;
background: inherit;
}
#attention_bar {
height: 1.5em;
max-height: 1.5em;
width: 100%;
max-width: 100%;
text-align: center;
overflow: hidden;
}
#attention_bar_form {
display: none;
padding: 0;
margin: 0;
}
#attention_bar_input {
width: 100%;
padding: 0;
margin: 0;
text-align: center;
}
#attention_bar:hover {
background-color: rgba(100%,100%,100%,0.2);
}
.intro.thread-hidden {
margin: 0;
padding: 0;
}
form.ban-appeal {
margin: 9px 20px;
}
form.ban-appeal textarea {
display: block;
}
.MathJax_Display {
display:inline!important;
}
pre {
margin:0
display: inline!important;
}
.theme-catalog div.thread img {
float: none!important;
margin: auto;
max-height: 150px;
max-width: 200px;
box-shadow: 0 0 4px rgba(0,0,0,0.55);
border: 2px solid rgba(153,153,153,0);
}
.theme-catalog div.thread {
display: inline-block;
vertical-align: top;
text-align: center;
font-weight: normal;
margin-top: 2px;
margin-bottom: 2px;
padding: 2px;
height: 300px;
width: 205px;
overflow: hidden;
position: relative;
font-size: 11px;
max-height: 300px;
background: rgba(182, 182, 182, 0.12);
border: 2px solid rgba(111, 111, 111, 0.34);
max-height:300px;
}
.theme-catalog div.thread strong {
display: block;
}
.theme-catalog div.threads {
text-align: center;
margin-left: -20px;
}
.theme-catalog div.thread:hover {
background: #D6DAF0;
border-color: #B7C5D9;
}
.theme-catalog div.grid-size-vsmall img {
max-height: 33%;
max-width: 95%
}
.theme-catalog div.grid-size-vsmall {
min-width:90px; max-width: 90px;
max-height: 148px;
}
.theme-catalog div.grid-size-small img {
max-height: 33%;
max-width: 95%
}
.theme-catalog div.grid-size-small {
min-width:140px; max-width: 140px;
max-height: 192px;
}
.theme-catalog div.grid-size-medium img {
max-height: 33%;
max-width: 95%
}
.theme-catalog div.grid-size-medium {
min-width:200px; max-width: 200px;
max-height: 274px;
}
.theme-catalog div.grid-size-large img {
max-height: 40%;
max-width: 95%
}
.theme-catalog div.grid-size-large {
min-width: 256px; max-width: 256px;
max-height: 384px;
}
.theme-catalog img.thread-image {
height: auto;
max-width: 100%;
}
@media (max-width: 420px) {
.theme-catalog ul#Grid {
padding-left: 18px;
}
.theme-catalog div.thread {
width: auto;
margin-left: 0;
margin-right: 0;
}
.theme-catalog div.threads {
overflow: hidden;
}
div.post .body {
clear: both;
}
}
.compact-boardlist {
padding: 3px;
padding-bottom: 0;
}
.compact-boardlist .cb-item {
display: inline-block;
vertical-align: middle;
}
.compact-boardlist .cb-icon {
padding-bottom: 1px;
}
.compact-boardlist .cb-fa {
font-size: 21px;
padding: 2px;
padding-top: 0;
}
.compact-boardlist .cb-cat {
padding: 5px 6px 8px 6px;
}
.cb-menuitem {
display: table-row;
}
.cb-menuitem span {
padding: 5px;
display: table-cell;
text-align: left;
border-top: 1px solid rgba(0,0,0,0.5);
}
.cb-menuitem span.cb-uri {
text-align: right;
}
.boardlist:not(.compact-boardlist) #watch-pinned::before {
content: " [ ";
}
.boardlist:not(.compact-boardlist) #watch-pinned::after {
content: " ] ";
}
.boardlist:not(.compact-boardlist) #watch-pinned {
display: inline;
}
.boardlist:not(.compact-boardlist) #watch-pinned a {
margin-left: 3pt;
}
.boardlist:not(.compact-boardlist) #watch-pinned a:first-child {
margin-left: 0pt;
}
.compact-boardlist #watch-pinned {
display: inline-block;
vertical-align: middle;
}
.new-posts {
opacity: 0.6;
margin-top: 1em;
}
.new-threads, .board-settings {
text-align: center;
}
#options_handler, #alert_handler {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 100%;
height: 100%;
text-align: center;
z-index: 9900;
}
#options_background, #alert_background {
background: black;
opacity: 0.5;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 100%;
height: 100%;
z-index: -1;
}
#options_div, #alert_div {
background-color: #d6daf0;
border: 1px solid black;
display: inline-block;
position: relative;
margin-top: 20px;
}
#options_div {
width: 600px;
height: 360px;
/* width: 620px;
height: 400px;
resize: both;
overflow: auto;*/
}
#alert_div {
width: 500px;
}
#alert_message {
text-align: center;
margin: 13px;
font-size: 110%;
}
.alert_button {
margin-bottom: 13px;
}
#options_div textarea {
max-width: 100%;
}
#options_close, #alert_close {
top: 0px;
right: 0px;
position: absolute;
margin-right: 3px;
font-size: 20px;
z-index: 100;
}
#options_tablist {
padding: 0px 5px;
left: 0px;
width: 90px;
top: 0px;
bottom: 0px;
height: 100%;
border-right: 1px solid black;
}
.options_tab_icon {
padding: 5px;
color: black;
cursor: pointer;
}
.options_tab_icon.active {
color: red;
}
.options_tab_icon i {
font-size: 20px;
}
.options_tab_icon div {
font-size: 11px;
}
.options_tab {
padding: 10px;
position: absolute;
top: 0px;
bottom: 10px;
left: 101px;
right: 0px;
text-align: left;
font-size: 12px;
overflow-y: auto;
}
.options_tab h2 {
text-align: center;
margin-bottom: 5px;
}
.mobile-style #options_div, .mobile-style #alert_div {
display: block;
width: 100%;
height: 100%;
margin-top: 0px;
}
.mentioned {
word-wrap: break-word;
}
.poster_id {
cursor: pointer;
white-space:nowrap;
display: inline-block;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.poster_id:hover {
color: #800000!important;
}
.poster_id::before {
content: " ID: ";
}
pre {
/* Better code tags */
max-width:inherit;
word-wrap:normal;
overflow:auto;
display: block!important;
font-size:9pt;
font-family:monospace;
}
span.pln {
color:grey;
}
@media screen and (min-width: 768px) {
.intro {
clear: none;
}
div.post div.body {
clear: none;
}
}
/* === SITE-WIDE ASSETS === */
#logo {
display: block;
width: 100%;
padding: 0;
margin: 0 0 0 0;
text-align: center;
}
#logo-link {
display: inline;
}
#logo-img {
display: inline-block;
height: 128px;
width: auto;
}
/* === GENERAL CLASSES === */
.loading {
background: none;
background-color: none;
background-image: url('/static/infinity.gif');
background-position: center center;
background-repeat: no-repeat;
min-height: 76px;
min-width: 128px;
}
.loading-small {
background: none;
background-color: none;
background-image: url('/static/infinity-small.gif');
background-position: center center;
background-repeat: no-repeat;
min-height: 24px;
min-width: 48px;
}
/* Text and accessibility */
.ltr {
direction: ltr;
}
.rtl {
direction: rtl;
font-family: Tahoma;
}
/* Responsive helpers */
.col {
box-sizing: border-box;
float: left;
}
.col-12 { width: 100%; }
.col-11 { width: 91.66666667%; }
.col-10 { width: 83.33333333%; }
.col-9 { width: 75%; }
.col-8 { width: 66.66666667%; }
.col-7 { width: 58.33333333%; }
.col-6 { width: 50%; }
.col-5 { width: 41.66666667%; }
.col-4 { width: 33.33333333%; }
.col-3 { width: 25%; }
.col-2 { width: 16.66666667%; }
.col-1 { width: 8.33333333%; }
.left-push {
float: left;
}
.right-push {
float: right;
}
/* Layout design */
.box {
background: #D6DAF0;
border: 1px solid #000333;
color: #000333;
margin: 0 0 12px 0;
}
.box-title {
background: #98E;
color: #000333;
font-size: 120%;
font-weight: bold;
padding: 4px 8px;
}
.box-content {
padding: 0 8px;
margin: 4px 0;
}
.clearfix {
display: block;
clear: both;
visibility: hidden;
overflow: hidden;
font-size: 0px;
line-height: 0px;
box-sizing: border-box;
border: none;
height: 0;
margin: 0;
padding: 0;
width: 100%;
zoom: 1;
}
/* === SPECIFIC PAGES & FEATURES === */
/* Board List */
div.boardlist {
margin-top: 3px;
color: #89A;
font-size: 9pt;
}
div.boardlist.bottom {
margin-top: 12px;
clear: both;
}
div.boardlist a {
text-decoration: none;
}
/* Threads */
/* Thread Footer */
#thread-interactions {
margin: 8px 0;
clear: both;
}
#thread-links {
float: left;
}
#thread-links > a {
padding-left: none;
padding-right: 10px;
}
#thread-quick-reply {
display: none;
position: absolute;
left: 50%;
right: 50%;
text-align: center;
width: 100px;
margin-left: -50px;
}
#thread_stats {
float: right;
}
#post-moderation-fields {
float: right;
text-align: right;
}
#delete-fields {
}
#report-fields {
}
/* threadwatcher */
#watchlist {
display: none;
max-height: 250px;
overflow: auto;
border: 1px solid;
border-style: none solid solid none;
width: 50%;
margin: 0 auto;
margin-bottom: 10px;
}
#watchlist {
font-size: 8pt;
width: 15%;
position: fixed;
right: 0pt;
bottom: 0pt;
margin: 0pt;
padding: 0pt;
}
.watchlist-inner, .watchlist-controls {
margin: 0pt;
text-align: center;
}
#watchlist-toggle, .watchThread, .watchlist-remove, #clearList, #clearGhosts {
cursor: pointer;
}
.own_post {
font-style: italic;
font-weight: normal;
opacity: .666;
}
li.mix {
display: inline-block;
}
/* Mona Font */
.aa {
font-family: Mona, "MS PGothic", " Pゴシック", sans-serif;
display: block!important;
font-size: 12pt;
line-height: 1.1;
}
.dx,
.dy,
.dz {
width: 30px;
text-align: right;
display: inline-block;
}
/* Dice */
.dice-option table {
border: 1px dotted black;
margin: 0;
border-collapse: collapse;
}
.dice-option table td {
text-align: center;
border-left: 1px dotted black;
padding-left: 2px;
padding-right: 2px;
padding-bottom: 2px;
}
/* Quick reply (why was most of this ever in the script?) */
#quick-reply {
position: fixed;
right: 5%;
top: 5%;
float: right;
display: block;
padding: 0 0 0 0;
width: 300px;
z-index: 100;
}
#quick-reply #post-form-inner {
min-width: 300px;
}
#quick-reply .post-table tr td:nth-child(2) {
width: 33%;
text-align: right;
padding-right: 4px;
}
#quick-reply tr td:nth-child(2) input[type="submit"] {
width: 99%;
}
#quick-reply th, #quick-reply td {
margin: 0;
padding: 0;
}
#quick-reply th {
text-align: center;
padding: 2px 0;
border: 1px solid #222;
}
#quick-reply th .handle {
float: left;
width: 100%;
display: inline-block;
}
#quick-reply th .close-btn {
float: right;
padding: 0 5px;
}
#quick-reply input[type="text"], #quick-reply select {
width: 100%;
padding: 2px;
font-size: 10pt;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
}
#quick-reply textarea {
min-width: 100%;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
font-size: 10pt;
resize: both;
}
#quick-reply input, #quick-reply select, #quick-reply textarea {
margin: 0 0 1px 0;
}
#quick-reply input[type="file"] {
padding: 5px 2px;
}
#quick-reply .nonsense {
display: none;
}
#quick-reply td.recaptcha {
text-align: center;
padding: 0 0 1px 0;
}
#quick-reply td.recaptcha span {
display: inline-block;
width: 100%;
background: white;
border: 1px solid #ccc;
cursor: pointer;
}
#quick-reply td.recaptcha-response {
padding: 0 0 1px 0;
}
@media screen and (max-width: 600px) {
#quick-reply {
display: none !important;
}
}
#youtube-size input {
width: 50px;
}
/* File selector */
.dropzone {
color: #000;
cursor: default;
margin: auto;
padding: 0px 4px;
text-align: center;
min-height: 50px;
max-height: 140px;
transition: 0.2s;
background-color: rgba(200, 200, 200, 0.5);
overflow-y: auto;
}
.dropzone-wrap {
width: 100%;
}
.dropzone .file-hint {
color: rgba(0, 0, 0, 0.5);
cursor: pointer;
position: relative;
margin-bottom: 5px;
padding: 10px 0px;
top: 5px;
transition: 0.2s;
border: 2px dashed rgba(125, 125, 125, 0.4);
}
.file-hint:hover, .dropzone.dragover .file-hint {
color: rgba(0, 0, 0, 1);
border-color: rgba(125, 125, 125, 0.8);
}
.dropzone.dragover {
background-color: rgba(200, 200, 200, 1);
}
.dropzone .file-thumbs {
text-align: left;
width: 100%;
}
.dropzone .tmb-container {
padding: 3px;
overflow-x: hidden;
white-space: nowrap;
}
.dropzone .file-tmb {
height: 40px;
width: 70px;
cursor: pointer;
display: inline-block;
text-align: center;
background-color: rgba(187, 187, 187, 0.5);
background-size: cover;
background-position: center;
}
.dropzone .file-tmb span {
font-weight: 600;
position: relative;
top: 13px;
}
.dropzone .tmb-filename {
display: inline-block;
vertical-align: bottom;
bottom: 12px;
position: relative;
margin-left: 5px;
}
.dropzone .remove-btn {
cursor: pointer;
color: rgba(125, 125, 125, 0.5);
display: inline-block;
vertical-align: bottom;
bottom: 10px;
position: relative;
margin-right: 5px;
font-size: 20px
}
.dropzone .remove-btn:hover {
color: rgba(125, 125, 125, 1);
}
table.board-list-table {
display: table;
margin: -2px;
margin-bottom: 10px;
overflow: hidden;
table-layout: fixed;
}
table.board-list-table .board-cell {
position: static;
margin: 0;
padding: 0;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
table.board-list-table .board-cell::after {
content: ' ';
clear: both;
}
table.board-list-table .board-meta {
padding-right: 4px;
width: 70px;
}
table.board-list-table .board-uri {
max-width: 196px;
}
table.board-list-table .board-title {
width: auto;
}
table.board-list-table .board-pph {
width: 55px;
padding: 4px;
}
table.board-list-table .board-max {
width: 90px;
padding: 4px;
}
table.board-list-table .board-unique {
width: 100px;
padding: 4px;
}
table.board-list-table .board-tags {
position: relative;
height: 15px;
width: auto;
padding: 0 15px 0 4px;
}
table.board-list-table .board-tags .tag-link {
display: inline;
}
table.board-list-table .board-tags .board-cell:hover {
position: absolute;
background: #EEF2FF;
line-height: 23px;
top: 0;
bottom: 0;
width: 310px;
}
table.board-list-table tr:nth-of-type( even ) .board-tags .board-cell {
background: #D6DAF0;
}
table.board-list-table .board-uri a {
display: inline-block;
float: left;
}
table.board-list-table .board-uri .board-nsfw {
color: rgb(230,0,0);
margin: 0 0 0 0.6em;
float: right;
}
table.board-list-table .board-uri .board-sfw {
color: #34345C;
margin: 0 0 0 0.6em;
float: right;
}
table.board-list-table div.board-cell {
max-width: 100%;
overflow: hidden;
}
tbody.board-list-loading {
display: none;
}
tbody.board-list-loading .loading {
height: 80px;
}
tbody.board-list-omitted td {
background: #98E;
border-top: 1px solid #000333;
padding: 8px;
font-size: 125%;
text-align: center;
}
tbody.board-list-omitted #board-list-more {
cursor: default;
}
tbody.board-list-omitted #board-list-more.board-list-hasmore {
cursor: pointer;
}
tbody.board-list-omitted .board-page-loadmore {
display: none;
}
tbody.board-list-omitted .board-list-hasmore .board-page-loadmore {
display: inline;
}
aside.search-container {
margin-bottom: 12px;
}
aside.search-container .box {
margin-right: 12px;
}
.board-search {
margin: 8px 0;
}
.search-item {
margin: 8px 0;
}
.search-sfw {
display: block;
cursor: pointer;
font-size: 110%;
line-height: 120%;
}
#search-sfw-input {
margin: 0;
padding: 0;
transform: scale(1.20);
}
#search-lang-input,
#search-title-input,
#search-tag-input {
box-sizing: border-box;
font-size: 110%;
line-height: 120%;
vertical-align: top;
padding: 2px 0 2px 4px;
max-width: 100%;
min-width: 100%;
width: 100%:
}
#search-loading {
display: inline-block;
vertical-align: bottom;
}
ul.tag-list {
display: block;
list-style: none;
margin: 8px 8px -9px 8px;
padding: 8px 0 0 0;
border-top: 1px solid #000333;
}
ul.tag-list::after {
content: ' ';
display: block;
clear: both;
}
li.tag-item {
display: inline-block;
float: left;
font-size: 100%;
list-style: none;
margin: 0;
padding: 0 4px 0 0;
}
li.tag-item:last-child {
padding-bottom: 17px;
}
a.tag-link {
overflow: hidden;
white-space: nowrap;
}
li.tag-item a.tag-link {
}
td.board-tags a.tag-link {
display: inline-block;
margin: 0 0.4em 0 0;
}
@media screen and (max-width: 1100px) {
aside.search-container {
width: 100%;
margin-bottom: 12px;
}
aside.search-container .box {
margin-right: 0;
}
section.board-list {
margin-top: 12px;
width: 100%;
}
table.board-list-table .board-meta,
table.board-list-table .board-pph,
table.board-list-table .board-tags {
padding: 0;
margin: 0;
font-size: 0;
width: 0;
}
}
#post-moderation-fields {
display: none;
}
.announcement {
font-size: 75%;
padding-bottom: 1%;
margin-left: 5%;
margin-right: 5%;
}
/* Gallery view */
#gallery_images {
position: absolute;
right: 0px;
bottom: 0px;
top: 0px;
width: 12%;
background-color: rgba(0, 0, 0, 0.4);
overflow: auto;
}
#gallery_toolbar {
position: absolute;
right: 12%;
left: 0px;
bottom: 0px;
height: 32px;
background-color: rgba(0, 0, 0, 0.4);
text-align: right;
}
#gallery_images img {
width: 100%;
}
#gallery_toolbar a {
font-size: 28px;
padding-right: 5px;
}
#gallery_main {
position: absolute;
left: 0px;
right: 12%;
bottom: 32px;
top: 0px;
padding: 10px;
}
#gallery_images img {
opacity: 0.6;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
#gallery_images img:hover, #gallery_images img.active {
opacity: 1;
}
#gallery_images img.active {
-webkit-box-shadow: 0px 0px 29px 2px rgba(255,255,255,1);
-moz-box-shadow: 0px 0px 29px 2px rgba(255,255,255,1);
box-shadow: 0px 0px 29px 2px rgba(255,255,255,1);
z-index: 1;
}
#gallery_main img, #gallery_main video {
max-width: 100%;
max-height: 100%;
position: absolute;
}
/* Fileboard */
table.fileboard th, table.fileboard td {
padding: 2px;
text-align: center;
}
table.fileboard .intro a {
margin-left: 0px;
}
/* Rules Popup */
#rules-popup {
width: 80%;
height: 80%;
position: fixed;
z-index: 9999;
left: 50%;
margin-left: -40%;
top: 50%;
margin-top: -40vh;
background: #000000;
text-align: center;
font-family: sans-serif;
font-size: 14px;
color: #FFFFFF;
}
#rules-popup .rules-popup-top {
font-size: 40px;
line-height: 60px;
position: absolute;
top: 0px;
height: 60px;
width: 100%;
}
#rules-popup .rules-popup-content-wrapper {
text-align: left;
position: absolute;
bottom: 80px;
top: 60px;
width: 100%;
overflow: auto;
}
#rules-popup #rules-popup-content {
padding: 10px;
font-size: 12px;
}
#rules-popup .rules-popup-bottom {
bottom: 0px;
height: 80px;
width: 100%;
position: absolute;
}
#rules-popup .rules-popup-bottom-instructions {
line-height: 40px;
}
#rules-popup .rules-popup-captcha-wrapper {
height: 40px;
}
#rules-popup .rules-popup-captcha {
display: inline-block;
border: 1px solid white;
font-family: serif;
padding: 3px;
}
#rules-popup .rules-popup-form {
display: inline-block;
}
#rules-popup .rules-popup-form-input {
width: 100px;
}
/* dropdown for boardlist. */
.dropdown {
position: relative;
display: inline-block;
}
/* Alter details as needed, I'm not a designer. */
.dropdown-content {
display: none;
position: absolute;
background-color: #666666;
min-width: 130px;
padding: 2px 6px;
color: #DCA1F5;
}
.dropdown:hover .dropdown-content {
display: block;
}
.own_post {
font-style: italic;
font-weight: normal;
opacity: .666;
}
div.mix {
display: inline-block;
}