diff --git a/stylesheets/style.css b/stylesheets/style.css index f26d01a8..a3eea7f9 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -1,446 +1,550 @@ 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 8px; - padding-left: 5px; - padding-right: 5px; + background: #EEF2FF url('img/fade-blue.png') repeat-x 50% 0%; + color: black; + font-family: arial, helvetica, sans-serif; + font-size: 11pt; + margin: 0 4px; + padding-left: 4px; + padding-right: 4px; } table * { - margin: 0; + margin: 1px; } a, a:visited { - text-decoration: underline; - color: #34345C; + text-decoration: underline; + color: #34345C; } + a:hover, p.intro a.post_no:hover { - color: #ff0000; + color: #ff0000; } + a.post_no { - text-decoration: none; - margin: 0; - padding: 0; + text-decoration: none; + margin: 0; + padding: 0; } p.intro a.post_no { - color: inherit; + color: inherit; } + p.intro a.post_no, p.intro a.email, p.intro a.post_anchor { - margin: 0; + margin: 0; } + p.intro a.email span.name { - color: #34345C; + color: #34345C; } + p.intro a.email:hover span.name { - color: #ff0000; + color: #ff0000; } + p.intro label { - display: inline; + display: inline; } + p.intro time, p.intro a.ip-link, p.intro a.capcode { - direction: ltr; - unicode-bidi: embed; + direction: ltr; + unicode-bidi: embed; } h2 { - color: #AF0A0F; - font-size: 11pt; - margin: 0; - padding: 0; + color: #AF0A0F; + font-size: 11pt; + margin: 0; + padding: 0; } + header { - margin: 1em 0; + margin: 1em 0; } + h1 { - font-family: tahoma; - letter-spacing: -2px; - font-size: 20pt; - margin: 0; + font-family: tahoma; + letter-spacing: -2px; + font-size: 20pt; + margin: 0; } + header div.subtitle, h1 { - color: #AF0A0F; - text-align: center; + color: #AF0A0F; + text-align: center; } + header div.subtitle { - font-size: 8pt; + font-size: 8pt; } + form { - margin-bottom: 4em; + margin-bottom: 4em; } + form table { - margin: auto; + margin: auto; } + form table input { - height: auto; + 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; + border: 1px solid #a9a9a9; + text-indent: 0; + text-shadow: none; + text-transform: none; + word-spacing: normal; + max-width: 75%; } + form table tr td { - text-align: left; - margin: 0; - padding: 0; + text-align: left; + margin: 0; + padding: 0; } + form table.mod tr td { - padding: 2px; + padding: 2px; } + form table tr th { - text-align: left; - padding: 4px; + text-align: left; + padding: 4px; } + form table tr th { - background: #98E; + background: #98E; } + form table tr td div.center { - text-align: center; - float: left; - padding-left: 3px; + text-align: center; + float: left; + padding-left: 3px; } + form table tr td div input { - display: block; - margin: 2px auto 0 auto; + display: block; + margin: 2px auto 0 auto; } + form table tr td div label { - font-size: 10px; + font-size: 10px; } + .unimportant, .unimportant * { - font-size: 10px; + 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; + display: block; + margin: 0 0 0 20px; } + div.post p.fileinfo { - padding-left: 5px; + padding-left: 5px; } + div.banner { - background-color: #E04000; - font-size: 12pt; - font-weight: bold; - text-align: center; - margin: 1em 0; + background-color: #E04000; + font-size: 12pt; + font-weight: bold; + text-align: center; + margin: 1em 0; } + div.banner, div.banner a { - color: white; + color: white; } + div.banner a:hover { - color: #EEF2FF; - text-decoration: none; + color: #EEF2FF; + text-decoration: none; } + img.banner, img.board_image { - display: block; - border: 1px solid #a9a9a9; - margin: 12px auto 0 auto; + display: block; + border: 1px solid #a9a9a9; + margin: 12px auto 0 auto; } + .post-image { - display: block; - float: left; - margin: 5px 20px 10px 20px; - border: none; + display: block; + float: left; + margin: 5px 20px 10px 20px; + border: none; } + div.post .post-image { - padding: 5px; - margin: 0 20px 0 0; + padding: 5px; + margin: 0 20px 0 0; } + div.post img.icon { - display: inline; - margin: 0 5px; - padding: 0; + display: inline; + margin: 0 5px; + padding: 0; } + div.post i.fa { - margin: 0 4px; - font-size: 16px; + margin: 0 4px; + font-size: 16px; } + div.post.op { - margin-right: 20px; - margin-bottom: 5px; + margin-right: 20px; + margin-bottom: 5px; } + div.post.op hr { - border-color: #D9BFB7; + border-color: #D9BFB7; } + p.intro { - margin: 0.5em 0; - padding: 0; - padding-bottom: 0.2em; + margin: 0.5em 0; + padding: 0; + padding-bottom: 0.2em; + clear: both; } + input.delete { - float: left; - margin: 1px 6px 0 0; + float: left; + margin: 1px 6px 0 0; } + p.intro span.subject { - color: #0F0C5D; - font-weight: bold; + color: #0F0C5D; + font-weight: bold; } + p.intro span.name { - color: #117743; - font-weight: bold; + color: #117743; + font-weight: bold; } + p.intro span.capcode, p.intro a.capcode, p.intro a.nametag { - color: #F00000; - margin-left: 0; + color: #F00000; + margin-left: 0; } + p.intro a { - margin-left: 8px; + margin-left: 8px; } + div.delete { - float: right; + float: right; } + div.post.reply p { - margin: 0.3em 0 0 0; + margin: 0.3em 0 0 0; } + div.post.reply div.body { - margin-left: 1.8em; - margin-top: 0.8em; - padding-right: 3em; - padding-bottom: 0.3em; + margin-left: 1.8em; + margin-top: 0.8em; + padding-right: 3em; + padding-bottom: 0.3em; } + div.post.reply.highlighted { - background: #D6BAD0; + background: #D6BAD0; } + div.post.reply div.body a { - color: #D00; + color: #D00; } + div.post { - max-width: 95%; - padding-left:20px; + max-width: 95%; + padding-left: 20px; } + div.post div.body { - word-wrap: break-word; - white-space: pre-wrap; + word-wrap: break-word; + white-space: pre-wrap; } + div.post.reply { - background: #D6DAF0; - margin: 0.2em 16px; - padding: 0.2em 0.3em 0.5em 0.6em; - border-width: 1px; - border-style: none solid solid none; - border-color: #B7C5D9; - display: inline-block; + background: #D6DAF0; + margin: 0.2em 4px; + padding: 0.2em 0.3em 0.5em 0.6em; + border-width: 1px; + border-style: none solid solid none; + border-color: #B7C5D9; + display: inline-block; + max-width: 95%; } + span.trip { - color: #228854; + color: #228854; } + span.quote { - color: #789922; + color: #789922; } + span.omitted { - display: block; - margin-top: 1em; + display: block; + margin-top: 1em; } + br.clear { - clear: left; - display: block; + clear: left; + display: block; } + span.controls { - float: right; - margin: 0; - padding: 0; - font-size: 80%; + float: right; + margin: 0; + padding: 0; + font-size: 80%; } + span.controls.op { - float: none; - margin-left: 10px; + float: none; + margin-left: 10px; } + span.controls a { - margin: 0; + margin: 0; } + div#wrap { - width: 900px; - margin:0 auto; + width: 900px; + margin: 0 auto; } + div.ban { - background: white; - border: 1px solid #98E; - max-width: 700px; - margin: 30px auto; + background: white; + border: 1px solid #98E; + max-width: 700px; + margin: 30px auto; } + div.ban p, div.ban h2 { - padding: 3px 7px; + padding: 3px 7px; } + div.ban h2 { - background: #98E; - color: black; - font-size: 12pt; + background: #98E; + color: black; + font-size: 12pt; } + div.ban p { - font-size: 12px; - margin-bottom: 12px; + font-size: 12px; + margin-bottom: 12px; } + div.ban p.reason { - font-weight: bold; + font-weight: bold; } + span.heading { - color: #AF0A0F; - font-size: 11pt; - font-weight: bold; + color: #AF0A0F; + font-size: 11pt; + font-weight: bold; } + span.spoiler { - background: black; - color: black; - padding: 0 1px; + background: black; + color: black; + padding: 0 1px; } + div.post.reply div.body span.spoiler a { - color: black; + color: black; } + span.spoiler:hover, div.post.reply div.body span.spoiler:hover a { - color: white; + color: white; } -div.styles { - float: right; - padding-bottom: 20px; +div.styles { + float: right; + padding-bottom: 20px; } + div.styles a { - margin: 0 10px; + margin: 0 10px; } + div.styles a.selected { - text-decoration: none; + text-decoration: none; } + table.test { - width: 100%; + width: 100%; } + table.test td, table.test th { - text-align: left; - padding: 5px; + text-align: left; + padding: 5px; } + table.test tr.h th { - background: #98E; + background: #98E; } + table.test td img { - margin: 0; + margin: 0; } + fieldset label { - display: block; + display: block; } + div.pages { - color: #89A; - background: #D6DAF0; - display: inline; - padding: 8px; - border-right: 1px solid #B7C5D9; - border-bottom: 1px solid #B7C5D9; + color: #89A; + background: #D6DAF0; + display: inline; + padding: 8px; + 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; + 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.top { + display: none !important; + } } + div.pages a.selected { - color: black; - font-weight: bolder; + color: black; + font-weight: bolder; } + div.pages a { - text-decoration: none; + text-decoration: none; } + div.pages form { - margin: 0; - padding: 0; - display: inline; + margin: 0; + padding: 0; + display: inline; } + div.pages form input { - margin: 0 5px; - display: inline; + margin: 0 5px; + display: inline; } + hr { - border: none; - border-top: 1px solid #B7C5D9; - height: 0; - clear: left; + border: none; + border-top: 1px solid #B7C5D9; + height: 0; + clear: left; } + div.boardlist { - color: #89A; - font-size: 9pt; - margin-top: 3px; + color: #89A; + font-size: 9pt; + margin-top: 3px; } + div.boardlist.bottom { - margin-top: 20px; + margin-top: 20px; } + div.boardlist a { - text-decoration: none; + text-decoration: none; } + div.report { - color: #333; + color: #333; } + table.modlog { - margin: auto; - width: 100%; + margin: auto; + width: 100%; } + table.modlog tr td { - text-align: left; - margin: 0; - padding: 4px 15px 0 0; + text-align: left; + margin: 0; + padding: 4px 15px 0 0; } + table.modlog tr th { - text-align: left; - padding: 4px 15px 5px 5px; - white-space: nowrap; + text-align: left; + padding: 4px 15px 5px 5px; + white-space: nowrap; } + table.modlog tr th { - background: #98E; + background: #98E; } + td.minimal, th.minimal { - width: 1%; - white-space: nowrap; + width: 1%; + white-space: nowrap; } + div.top_notice { - text-align: center; - margin: 5px auto; + text-align: center; + margin: 5px auto; } + span.public_ban { - display: block; - color: red; - font-weight: bold; - margin-top: 15px; + display: block; + color: red; + font-weight: bold; + margin-top: 15px; } + span.toolong { - display: block; - margin-top: 15px; + display: block; + margin-top: 15px; } + div.blotter { - color: red; - font-weight: bold; - text-align: center; + color: red; + font-weight: bold; + text-align: center; } + table.mod.config-editor { - font-size: 9pt; - width: 100%; + font-size: 9pt; + width: 100%; } + table.mod.config-editor td { - text-align: left; - padding: 5px; - border-bottom: 1px solid #98e; + text-align: left; + padding: 5px; + border-bottom: 1px solid #98e; } + table.mod.config-editor input[type="text"] { - width: 98%; + width: 98%; } + .desktop-style div.boardlist:nth-child(1) { position: fixed; top: 0; @@ -450,6 +554,7 @@ table.mod.config-editor input[type="text"] { margin-top: 0; z-index: 30; } + .desktop-style div.boardlist:nth-child(1):hover, .desktop-style div.boardlist:nth-child(1).cb-menu { background-color: rgba(90%, 90%, 90%, 0.6); } @@ -461,12 +566,14 @@ table.mod.config-editor input[type="text"] { .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; @@ -481,60 +588,69 @@ table.mod.config-editor input[type="text"] { 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); } + p.intro.thread-hidden { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } form.ban-appeal { - margin: 9px 20px; + margin: 9px 20px; } + form.ban-appeal textarea { - display: block; + display: block; } + .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); + 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; + 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; + 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); } + .theme-catalog div.thread strong { display: block; } -.theme-catalog div.threads{ + +.theme-catalog div.threads { text-align: center; margin-left: -20px; } @@ -545,7 +661,7 @@ div.thread:hover { } .theme-catalog div.grid-size-vsmall img { - max-height: 64px; + max-height: 64px; max-width: 100px; } @@ -586,12 +702,13 @@ div.thread:hover { .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; } @@ -601,18 +718,22 @@ div.thread:hover { 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; } @@ -621,35 +742,41 @@ div.thread:hover { .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: " [ "; + content: " [ "; } + .boardlist:not(.compact-boardlist) #watch-pinned::after { - content: " ] "; + content: " ] "; } + .boardlist:not(.compact-boardlist) #watch-pinned { display: inline; } + .boardlist:not(.compact-boardlist) #watch-pinned a { - margin-left: 3pt; + 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; + vertical-align: middle; } /* live-index.js */ @@ -657,6 +784,7 @@ div.thread:hover { opacity: 0.6; margin-top: 1em; } + .new-threads { text-align: center; } @@ -664,19 +792,29 @@ div.thread:hover { /* options.js */ #options_handler { position: fixed; - top: 0px; left: 0px; right: 0px; bottom: 0px; - width: 100%; height: 100%; + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; + width: 100%; + height: 100%; text-align: center; z-index: 9900; } + #options_background { background: black; opacity: 0.5; position: absolute; - top: 0px; left: 0px; right: 0px; bottom: 0px; - width: 100%; height: 100%; + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; + width: 100%; + height: 100%; z-index: -1; } + #options_div { background-color: #d6daf0; border: 1px solid black; @@ -686,12 +824,16 @@ div.thread:hover { width: 600px; height: 300px; } + #options_close { - top: 0px; right: 0px; + top: 0px; + right: 0px; position: absolute; margin-right: 3px; - font-size: 20px; z-index: 100; + font-size: 20px; + z-index: 100; } + #options_tablist { padding: 0px 5px; left: 0px; @@ -701,28 +843,36 @@ div.thread:hover { 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: 0px; - left: 81px; right: 0px; + top: 0px; + bottom: 0px; + left: 81px; + right: 0px; text-align: left; font-size: 12px; } + .options_tab h2 { text-align: center; margin-bottom: 5px; @@ -734,17 +884,29 @@ div.thread:hover { height: 100%; margin-top: 0px; } + .mentioned { - word-wrap: break-word; + word-wrap: break-word; } - -code > pre { -/* Better code tags */ - background:black; - max-width:inherit; +pre { + width: 99%; + padding: 0; + margin: 0; + overflow:auto; } code > pre > span.pln { - color:grey; + color: grey; } + + +@media screen and (min-width: 768px) { + p.intro { + clear: none; + } + + div.post div.body { + clear: none; + } +} \ No newline at end of file