diff --git a/stylesheets/style.css b/stylesheets/style.css index f26d01a8..129dcffb 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -1,457 +1,554 @@ 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: #000; + font-family: arial,helvetica,sans-serif; + font-size: 10pt; + min-width: 200px; + max-width: 100%; + margin: 4px!important; + padding: 4px!important; } table * { - margin: 0; + margin: 0; } -a, a:visited { - text-decoration: underline; - color: #34345C; +a,a:visited { + text-decoration: underline; + color: #34345C; } -a:hover, p.intro a.post_no:hover { - color: #ff0000; + +a:hover,p.intro a.post_no:hover { + color: red; } + a.post_no { - text-decoration: none; - margin: 0; - padding: 0; + text-decoration: none; + margin: 0; + padding: 0; } -p.intro a.post_no { - color: inherit; +p.intro a.post_no,p.intro a.email,p.intro a.post_anchor { + margin: 0; } -p.intro a.post_no, -p.intro a.email, -p.intro a.post_anchor { - margin: 0; + +p.intro a.post_no { + color: inherit; } + p.intro a.email span.name { - color: #34345C; + color: #34345C; } + p.intro a.email:hover span.name { - color: #ff0000; + color: red; } + p.intro label { - display: inline; -} -p.intro time, p.intro a.ip-link, p.intro a.capcode { - direction: ltr; - unicode-bidi: embed; + display: inline; } -h2 { - color: #AF0A0F; - font-size: 11pt; - margin: 0; - padding: 0; +p.intro time,p.intro a.ip-link,p.intro a.capcode { + direction: ltr; + unicode-bidi: embed; } + header { - margin: 1em 0; -} -h1 { - font-family: tahoma; - letter-spacing: -2px; - font-size: 20pt; - margin: 0; + margin: 1em 0; } -header div.subtitle, h1 { - color: #AF0A0F; - text-align: center; + +header div.subtitle,h1 { + color: #AF0A0F; + text-align: center; } + header div.subtitle { - font-size: 8pt; + font-size: 8pt; +} + +h1 { + font-family: tahoma; + letter-spacing: -2px; + font-size: 20pt; + margin: 0; +} + +h2 { + color: #AF0A0F; + font-size: 11pt; + margin: 0; + padding: 0; } + form { - margin-bottom: 4em; + margin-bottom: 4em; } + form table { - margin: auto; + margin: auto; } + form table input { - height: auto; + height: auto; + width: 100%; } -input[type="text"], input[type="password"], textarea { - border: 1px solid #a9a9a9; - text-indent: 0; - text-shadow: none; - text-transform: none; - word-spacing: normal; + +input[type="text"],input[type="password"],textarea { + height: auto; + width: 100%; } + 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; -} -form table tr th { - text-align: left; - padding: 4px; + padding: 2px; } + form table tr th { - background: #98E; + text-align: left; + padding: 4px; + 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; } + form table tr td div label { - font-size: 10px; + font-size: 10px; } -.unimportant, .unimportant * { - 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; + 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: 700; + text-align: center; + margin: 1em 0; } -div.banner, div.banner a { - color: white; + +div.banner,div.banner a { + color: #fff; } + 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; + +img.banner,img.board_image { + display: block; + border: 1px solid #a9a9a9; + margin: 12px auto 0; } + .post-image { - display: block; - float: left; - margin: 5px 20px 10px 20px; - border: none; + display: block; + float: left; + margin: 4px 16px 8px; + border: none; } + div.post .post-image { - padding: 5px; - margin: 0 20px 0 0; + padding: 1px; + margin: 4px 20px 4px 4px; } + 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: .5em 0; + padding: 0 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: 700; } + p.intro span.name { - color: #117743; - font-weight: bold; + color: #117743; + font-weight: 700; } -p.intro span.capcode, p.intro a.capcode, p.intro a.nametag { - color: #F00000; - margin-left: 0; + +p.intro span.capcode,p.intro a.capcode,p.intro a.nametag { + color: #F00000; + margin-left: 0; } + p.intro a { - margin-left: 8px; + margin-left: 8px; } + div.delete { - float: right; + float: right; } + +div.post.reply { + max-width: 85%; +} + div.post.reply p { - margin: 0.3em 0 0 0; + margin: .3em 0 0; } + div.post.reply div.body { - margin-left: 1.8em; - margin-top: 0.8em; - padding-right: 3em; - padding-bottom: 0.3em; + margin-left: 1em; + margin-top: 1em; + padding-right: 2em; + padding-bottom: .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; + clear: both; } + 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: .2em 16px; + padding: .2em .3em .5em .6em; + border-width: 1px; + border-style: none solid solid none; + border-color: #B7C5D9; + display: inline-block; } + 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: #fff; + border: 1px solid #98E; + max-width: 700px; + margin: 30px auto; } -div.ban p, div.ban h2 { - padding: 3px 7px; + +div.ban p,div.ban h2 { + padding: 3px 7px; } + div.ban h2 { - background: #98E; - color: black; - font-size: 12pt; + background: #98E; + color: #000; + 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: 700; } + span.heading { - color: #AF0A0F; - font-size: 11pt; - font-weight: bold; + color: #AF0A0F; + font-size: 11pt; + font-weight: 700; } + span.spoiler { - background: black; - color: black; - padding: 0 1px; + background: #000; + color: #000; + padding: 0 1px; } + div.post.reply div.body span.spoiler a { - color: black; + color: #000; } -span.spoiler:hover, div.post.reply div.body span.spoiler:hover a { - color: white; + +span.spoiler:hover,div.post.reply div.body span.spoiler:hover a { + color: #fff; } -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; + +table.test td,table.test th { + 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: .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: #000; + 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; -} -table.modlog tr th { - text-align: left; - padding: 4px 15px 5px 5px; - white-space: nowrap; + text-align: left; + margin: 0; + padding: 4px 15px 0 0; } + table.modlog tr th { - background: #98E; + text-align: left; + padding: 4px 15px 5px 5px; + white-space: nowrap; + background: #98E; } -td.minimal, th.minimal { - width: 1%; - white-space: nowrap; + +td.minimal,th.minimal { + 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: 700; + 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: 700; + 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; left: 0; right: 0; - /*text-shadow: white 1px 0 6px, white 1px 0 6px, black 1px 0 3px;*/ 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); + +.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); } .desktop-style body { @@ -461,13 +558,15 @@ 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; + background: url(img/arrow.png) right center no-repeat; } -.desktop-style .sub .sub:hover, .desktop-style .sub .sub.hover { + +.desktop-style .sub .sub:hover,.desktop-style .sub .sub.hover { display: inline; text-indent: 0; background: inherit; @@ -481,60 +580,70 @@ 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); + 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; +} + +ul#Grid { + padding: 2px; + margin: 2px 0 2px .5em; } + .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; - margin-top: 2px; - margin-bottom: 2px; + display: inline-block; + position: relative; + overflow: hidden; + vertical-align: top; + text-align: center; + font-weight: 400; + margin: 2px 0; 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); + font-size: 11px; + 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; } @@ -544,15 +653,18 @@ div.thread:hover { border-color: #B7C5D9; } +div.thread.grid-li { + padding: 0; +} + .theme-catalog div.grid-size-vsmall img { - max-height: 64px; - max-width: 100px; + max-height: 64px; + max-width: 96px; } .theme-catalog div.grid-size-vsmall { - width: 100px; - max-width: 100px; - max-height: 150px; + width:128px; + height: 160px; } .theme-catalog div.grid-size-small img { @@ -561,20 +673,18 @@ div.thread:hover { } .theme-catalog div.grid-size-small { - width: 200px; - max-width: 225px; - max-height: 300px; + width: 144px; + height:256px; } .theme-catalog div.grid-size-large img { - max-height: 148px; + max-height: 175px; max-width: 300px; } .theme-catalog div.grid-size-large { - width: 300px; - max-width: 300px; - max-height: 450px; + width: 225px; + height: 384px; } .theme-catalog img.thread-image { @@ -582,169 +692,231 @@ div.thread:hover { 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; - } -} - .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; + padding: 5px 6px 8px; } -/* styles also used by watch.js */ .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); + 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; + margin-left: 0; } .compact-boardlist #watch-pinned { display: inline-block; - vertical-align: middle; + vertical-align: middle; } -/* live-index.js */ .new-posts { - opacity: 0.6; + opacity: .6; margin-top: 1em; } + .new-threads { text-align: center; } -/* options.js */ +.mobile-style #options_div { + display: block; + width: 100%; + height: 100%; + margin-top: 0; +} + #options_handler { position: fixed; - top: 0px; left: 0px; right: 0px; bottom: 0px; - width: 100%; height: 100%; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; text-align: center; z-index: 9900; } + #options_background { - background: black; - opacity: 0.5; + background: #000; + opacity: .5; position: absolute; - top: 0px; left: 0px; right: 0px; bottom: 0px; - width: 100%; height: 100%; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; z-index: -1; } + #options_div { background-color: #d6daf0; - border: 1px solid black; + border: 1px solid #000; display: inline-block; position: relative; margin-top: 20px; width: 600px; height: 300px; } + #options_close { - top: 0px; right: 0px; + top: 0; + right: 0; position: absolute; margin-right: 3px; - font-size: 20px; z-index: 100; + font-size: 20px; + z-index: 100; } + #options_tablist { - padding: 0px 5px; - left: 0px; - width: 70px; - top: 0px; - bottom: 0px; + border-right: 1px solid #000; + padding: 0 5px; + top: 0; + bottom: 0; + left: 0; height: 100%; - border-right: 1px solid black; + width: 70px; +} + +.options_tab { + position: absolute; + top: 0; + bottom: 0; + left: 81px; + right: 0; + padding: 10px; + text-align: left; + font-size: 12px; +} + +.options_tab h2 { + text-align: center; + margin-bottom: 5px; } + .options_tab_icon { padding: 5px; - color: black; + color: #000; 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; - text-align: left; - font-size: 12px; -} -.options_tab h2 { - text-align: center; - margin-bottom: 5px; + +code > pre { + background: #000; + max-width: 80%; + padding: 0; + margin: 0; + overflow: auto; } -.mobile-style #options_div { - display: block; - width: 100%; - height: 100%; - margin-top: 0px; +code > pre > span.pln { + color: grey; } + .mentioned { - word-wrap: break-word; + word-wrap: break-word; } +@media screen and (min-width: 768px) { + p.intro { + clear: none; + } -code > pre { -/* Better code tags */ - background:black; - max-width:inherit; -} + div.post div.body { + clear: none; + } -code > pre > span.pln { - color:grey; -} + .theme-catalog div.grid-size-vsmall img { + max-height: 96px; + max-width: 160px; + } + + .theme-catalog div.grid-size-vsmall { + width: 160px; + height: 256px; + } + + .theme-catalog div.grid-size-small img { + max-height: 160px; + max-width: 225px; + } + + .theme-catalog div.grid-size-small { + width: 225px; + height:320px; + } + + .theme-catalog div.grid-size-large img { + max-height: 200px; + max-width: 300px; + } + + .theme-catalog div.grid-size-large { + width: 300px; + height: 409px; + } + + .theme-catalog img.thread-image { + height: auto; + max-width: 100%; + } +} \ No newline at end of file