forked from leftypol/leftypol
944c3b6c28
I noticed that some url's were causing the posts to stretch over the maximum device with. The code blocks were exhibiting similar behavior as well, and have been adjusted to display well on all themes. I still need to fix the post form for handhelds, though it is not as annoying as the other things fixed
920 lines
12 KiB
CSS
920 lines
12 KiB
CSS
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;
|
|
}
|
|
|
|
table * {
|
|
margin: 1px;
|
|
}
|
|
|
|
a,a:visited {
|
|
text-decoration: underline;
|
|
color: #34345C;
|
|
}
|
|
|
|
a:hover,p.intro a.post_no:hover {
|
|
color: #ff0000;
|
|
}
|
|
|
|
a.post_no {
|
|
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.email span.name {
|
|
color: #34345C;
|
|
}
|
|
|
|
p.intro a.email:hover span.name {
|
|
color: #ff0000;
|
|
}
|
|
|
|
p.intro label {
|
|
display: inline;
|
|
}
|
|
|
|
p.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: 1em 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 {
|
|
margin-bottom: 4em;
|
|
}
|
|
|
|
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;
|
|
max-width: 75%;
|
|
}
|
|
|
|
#quick-reply input[type="text"], input[type="password"], #quick-reply textarea {
|
|
max-width: 100%;
|
|
}
|
|
|
|
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-left: 3px;
|
|
}
|
|
|
|
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: 12px auto 0 auto;
|
|
}
|
|
|
|
.post-image {
|
|
display: block;
|
|
float: left;
|
|
margin: 5px 20px 10px 20px;
|
|
border: none;
|
|
}
|
|
|
|
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 {
|
|
margin: 0 4px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
div.post.op {
|
|
margin-right: 20px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
div.post.op hr {
|
|
border-color: #D9BFB7;
|
|
}
|
|
|
|
p.intro {
|
|
margin: 0.5em 0;
|
|
padding: 0;
|
|
padding-bottom: 0.2em;
|
|
}
|
|
|
|
input.delete {
|
|
float: left;
|
|
margin: 1px 6px 0 0;
|
|
}
|
|
|
|
p.intro span.subject {
|
|
color: #0F0C5D;
|
|
font-weight: bold;
|
|
}
|
|
|
|
p.intro span.name {
|
|
color: #117743;
|
|
font-weight: bold;
|
|
}
|
|
|
|
p.intro span.capcode,p.intro a.capcode,p.intro a.nametag {
|
|
color: #F00000;
|
|
margin-left: 0;
|
|
}
|
|
|
|
p.intro a {
|
|
margin-left: 8px;
|
|
}
|
|
|
|
div.delete {
|
|
float: right;
|
|
}
|
|
|
|
div.post.reply p {
|
|
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;
|
|
}
|
|
|
|
div.post.reply.highlighted {
|
|
background: #D6BAD0;
|
|
}
|
|
|
|
div.post.reply div.body a {
|
|
color: #D00;
|
|
}
|
|
|
|
div.post {
|
|
padding-left: 20px;
|
|
}
|
|
|
|
div.post div.body {
|
|
word-wrap: break-word;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
div.post.reply {
|
|
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: 94%!important;
|
|
}
|
|
|
|
span.trip {
|
|
color: #228854;
|
|
}
|
|
|
|
span.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.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;
|
|
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;
|
|
}
|
|
|
|
@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.boardlist {
|
|
color: #89A;
|
|
font-size: 9pt;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
div.boardlist.bottom {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
div.boardlist a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
div.report {
|
|
color: #333;
|
|
}
|
|
|
|
table.modlog {
|
|
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;
|
|
}
|
|
|
|
table.modlog tr th {
|
|
background: #98E;
|
|
}
|
|
|
|
td.minimal,th.minimal {
|
|
width: 1%;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
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%;
|
|
}
|
|
|
|
.desktop-style div.boardlist:nth-child(1) {
|
|
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);
|
|
}
|
|
|
|
p.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;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.theme-catalog div.thread strong {
|
|
display: block;
|
|
}
|
|
|
|
.theme-catalog div.threads {
|
|
text-align: center;
|
|
margin-left: -20px;
|
|
}
|
|
|
|
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-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;
|
|
}
|
|
}
|
|
|
|
.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 {
|
|
text-align: center;
|
|
}
|
|
|
|
#options_handler {
|
|
position: fixed;
|
|
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%;
|
|
z-index: -1;
|
|
}
|
|
|
|
#options_div {
|
|
background-color: #d6daf0;
|
|
border: 1px solid black;
|
|
display: inline-block;
|
|
position: relative;
|
|
margin-top: 20px;
|
|
width: 600px;
|
|
height: 300px;
|
|
}
|
|
|
|
#options_close {
|
|
top: 0px;
|
|
right: 0px;
|
|
position: absolute;
|
|
margin-right: 3px;
|
|
font-size: 20px;
|
|
z-index: 100;
|
|
}
|
|
|
|
#options_tablist {
|
|
padding: 0px 5px;
|
|
left: 0px;
|
|
width: 70px;
|
|
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: 0px;
|
|
left: 81px;
|
|
right: 0px;
|
|
text-align: left;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.options_tab h2 {
|
|
text-align: center;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.mobile-style #options_div {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin-top: 0px;
|
|
}
|
|
|
|
.mentioned {
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.poster_id {
|
|
cursor: pointer;
|
|
}
|
|
|
|
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) {
|
|
p.intro {
|
|
clear: none;
|
|
}
|
|
|
|
div.post div.body {
|
|
clear: none;
|
|
}
|
|
}
|