leftypol
/
leftypol
4
5
Fork 2
Code Issues 60 Pull Requests 1 Projects Releases Wiki Activity
Browse Source

Fix mobile scaling/padding

pull/40/head
kaernyk 10 years ago
parent
c115ebc7e0
commit
a3c03932c3
1 changed files with 191 additions and 166 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 309
      stylesheets/style.css

309
stylesheets/style.css
View File

@ -1,16 +1,15 @@
body { body {
background: #EEF2FF url(img/fade-blue.png) repeat-x 50% 0; background: #EEF2FF url('img/fade-blue.png') repeat-x 50% 0%;
color: #000; color: black;
font-family: arial, helvetica, sans-serif; font-family: arial, helvetica, sans-serif;
font-size: 10pt; font-size: 11pt;
min-width: 200px; margin: 0 4px;
max-width: 100%; padding-left: 4px;
margin: 4px!important; padding-right: 4px;
padding: 4px!important;
} }
table * { table * {
margin: 0; margin: 1px;
} }
a, a:visited { a, a:visited {
@ -19,7 +18,7 @@ a,a:visited {
} }
a:hover, p.intro a.post_no:hover { a:hover, p.intro a.post_no:hover {
color: red; color: #ff0000;
} }
a.post_no { a.post_no {
@ -28,20 +27,22 @@ a.post_no {
padding: 0; padding: 0;
} }
p.intro a.post_no,p.intro a.email,p.intro a.post_anchor {
margin: 0;
}
p.intro a.post_no { 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;
}
p.intro a.email span.name { p.intro a.email span.name {
color: #34345C; color: #34345C;
} }
p.intro a.email:hover span.name { p.intro a.email:hover span.name {
color: red; color: #ff0000;
} }
p.intro label { p.intro label {
@ -53,17 +54,15 @@ p.intro time,p.intro a.ip-link,p.intro a.capcode {
unicode-bidi: embed; unicode-bidi: embed;
} }
header { h2 {
margin: 1em 0;
}
header div.subtitle,h1 {
color: #AF0A0F; color: #AF0A0F;
text-align: center; font-size: 11pt;
margin: 0;
padding: 0;
} }
header div.subtitle { header {
font-size: 8pt; margin: 1em 0;
} }
h1 { h1 {
@ -73,11 +72,13 @@ h1 {
margin: 0; margin: 0;
} }
h2 { header div.subtitle, h1 {
color: #AF0A0F; color: #AF0A0F;
font-size: 11pt; text-align: center;
margin: 0; }
padding: 0;
header div.subtitle {
font-size: 8pt;
} }
form { form {
@ -90,12 +91,15 @@ form table {
form table input { form table input {
height: auto; height: auto;
width: 100%;
} }
input[type="text"], input[type="password"], textarea { input[type="text"], input[type="password"], textarea {
height: auto; border: 1px solid #a9a9a9;
width: 100%; text-indent: 0;
text-shadow: none;
text-transform: none;
word-spacing: normal;
max-width: 75%;
} }
form table tr td { form table tr td {
@ -111,6 +115,9 @@ form table.mod tr td {
form table tr th { form table tr th {
text-align: left; text-align: left;
padding: 4px; padding: 4px;
}
form table tr th {
background: #98E; background: #98E;
} }
@ -122,7 +129,7 @@ form table tr td div.center {
form table tr td div input { form table tr td div input {
display: block; display: block;
margin: 2px auto 0; margin: 2px auto 0 auto;
} }
form table tr td div label { form table tr td div label {
@ -158,13 +165,13 @@ div.post p.fileinfo {
div.banner { div.banner {
background-color: #E04000; background-color: #E04000;
font-size: 12pt; font-size: 12pt;
font-weight: 700; font-weight: bold;
text-align: center; text-align: center;
margin: 1em 0; margin: 1em 0;
} }
div.banner, div.banner a { div.banner, div.banner a {
color: #fff; color: white;
} }
div.banner a:hover { div.banner a:hover {
@ -175,19 +182,19 @@ div.banner a:hover {
img.banner, img.board_image { img.banner, img.board_image {
display: block; display: block;
border: 1px solid #a9a9a9; border: 1px solid #a9a9a9;
margin: 12px auto 0; margin: 12px auto 0 auto;
} }
.post-image { .post-image {
display: block; display: block;
float: left; float: left;
margin: 4px 16px 8px; margin: 5px 20px 10px 20px;
border: none; border: none;
} }
div.post .post-image { div.post .post-image {
padding: 1px; padding: 5px;
margin: 4px 20px 4px 4px; margin: 0 20px 0 0;
} }
div.post img.icon { div.post img.icon {
@ -211,8 +218,9 @@ div.post.op hr {
} }
p.intro { p.intro {
margin: .5em 0; margin: 0.5em 0;
padding: 0 0 .2em; padding: 0;
padding-bottom: 0.2em;
clear: both; clear: both;
} }
@ -223,12 +231,12 @@ input.delete {
p.intro span.subject { p.intro span.subject {
color: #0F0C5D; color: #0F0C5D;
font-weight: 700; font-weight: bold;
} }
p.intro span.name { p.intro span.name {
color: #117743; color: #117743;
font-weight: 700; font-weight: bold;
} }
p.intro span.capcode, p.intro a.capcode, p.intro a.nametag { p.intro span.capcode, p.intro a.capcode, p.intro a.nametag {
@ -244,19 +252,15 @@ div.delete {
float: right; float: right;
} }
div.post.reply {
max-width: 85%;
}
div.post.reply p { div.post.reply p {
margin: .3em 0 0; margin: 0.3em 0 0 0;
} }
div.post.reply div.body { div.post.reply div.body {
margin-left: 1em; margin-left: 1.8em;
margin-top: 1em; margin-top: 0.8em;
padding-right: 2em; padding-right: 3em;
padding-bottom: .3em; padding-bottom: 0.3em;
} }
div.post.reply.highlighted { div.post.reply.highlighted {
@ -275,17 +279,17 @@ div.post {
div.post div.body { div.post div.body {
word-wrap: break-word; word-wrap: break-word;
white-space: pre-wrap; white-space: pre-wrap;
clear: both;
} }
div.post.reply { div.post.reply {
background: #D6DAF0; background: #D6DAF0;
margin: .2em 16px; margin: 0.2em 4px;
padding: .2em .3em .5em .6em; padding: 0.2em 0.3em 0.5em 0.6em;
border-width: 1px; border-width: 1px;
border-style: none solid solid none; border-style: none solid solid none;
border-color: #B7C5D9; border-color: #B7C5D9;
display: inline-block; display: inline-block;
max-width: 95%;
} }
span.trip { span.trip {
@ -328,7 +332,7 @@ div#wrap {
} }
div.ban { div.ban {
background: #fff; background: white;
border: 1px solid #98E; border: 1px solid #98E;
max-width: 700px; max-width: 700px;
margin: 30px auto; margin: 30px auto;
@ -340,7 +344,7 @@ div.ban p,div.ban h2 {
div.ban h2 { div.ban h2 {
background: #98E; background: #98E;
color: #000; color: black;
font-size: 12pt; font-size: 12pt;
} }
@ -350,27 +354,27 @@ div.ban p {
} }
div.ban p.reason { div.ban p.reason {
font-weight: 700; font-weight: bold;
} }
span.heading { span.heading {
color: #AF0A0F; color: #AF0A0F;
font-size: 11pt; font-size: 11pt;
font-weight: 700; font-weight: bold;
} }
span.spoiler { span.spoiler {
background: #000; background: black;
color: #000; color: black;
padding: 0 1px; padding: 0 1px;
} }
div.post.reply div.body span.spoiler a { div.post.reply div.body span.spoiler a {
color: #000; color: black;
} }
span.spoiler:hover, div.post.reply div.body span.spoiler:hover a { span.spoiler:hover, div.post.reply div.body span.spoiler:hover a {
color: #fff; color: white;
} }
div.styles { div.styles {
@ -423,7 +427,7 @@ div.pages.top {
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
opacity: .9; opacity: 0.9;
} }
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
@ -433,7 +437,7 @@ div.pages.top {
} }
div.pages a.selected { div.pages a.selected {
color: #000; color: black;
font-weight: bolder; font-weight: bolder;
} }
@ -492,6 +496,9 @@ table.modlog tr th {
text-align: left; text-align: left;
padding: 4px 15px 5px 5px; padding: 4px 15px 5px 5px;
white-space: nowrap; white-space: nowrap;
}
table.modlog tr th {
background: #98E; background: #98E;
} }
@ -508,7 +515,7 @@ div.top_notice {
span.public_ban { span.public_ban {
display: block; display: block;
color: red; color: red;
font-weight: 700; font-weight: bold;
margin-top: 15px; margin-top: 15px;
} }
@ -519,7 +526,7 @@ span.toolong {
div.blotter { div.blotter {
color: red; color: red;
font-weight: 700; font-weight: bold;
text-align: center; text-align: center;
} }
@ -543,6 +550,7 @@ table.mod.config-editor input[type="text"] {
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
/*text-shadow: white 1px 0 6px, white 1px 0 6px, black 1px 0 3px;*/
margin-top: 0; margin-top: 0;
z-index: 30; z-index: 30;
} }
@ -563,7 +571,7 @@ table.mod.config-editor input[type="text"] {
display: inline-block; display: inline-block;
text-indent: -9000px; text-indent: -9000px;
width: 7px; 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 {
@ -611,11 +619,6 @@ form.ban-appeal textarea {
display: block; display: block;
} }
ul#Grid {
padding: 2px;
margin: 2px 0 2px .5em;
}
.theme-catalog div.thread img { .theme-catalog div.thread img {
float: none!important; float: none!important;
margin: auto; margin: auto;
@ -627,14 +630,18 @@ ul#Grid {
.theme-catalog div.thread { .theme-catalog div.thread {
display: inline-block; display: inline-block;
position: relative;
overflow: hidden;
vertical-align: top; vertical-align: top;
text-align: center; text-align: center;
font-weight: 400; font-weight: normal;
margin: 2px 0; margin-top: 2px;
margin-bottom: 2px;
padding: 2px; padding: 2px;
height: 300px;
width: 205px;
overflow: hidden;
position: relative;
font-size: 11px; font-size: 11px;
max-height: 300px;
background: rgba(182, 182, 182, 0.12); background: rgba(182, 182, 182, 0.12);
border: 2px solid rgba(111, 111, 111, 0.34); border: 2px solid rgba(111, 111, 111, 0.34);
} }
@ -653,38 +660,37 @@ div.thread:hover {
border-color: #B7C5D9; border-color: #B7C5D9;
} }
div.thread.grid-li {
padding: 0;
}
.theme-catalog div.grid-size-vsmall img { .theme-catalog div.grid-size-vsmall img {
max-height: 50%; max-height: 64px;
max-width: 99%; max-width: 100px;
} }
.theme-catalog div.grid-size-vsmall { .theme-catalog div.grid-size-vsmall {
width:128px; width: 100px;
height: 160px; max-width: 100px;
max-height: 150px;
} }
.theme-catalog div.grid-size-small img { .theme-catalog div.grid-size-small img {
max-height: 50%; max-height: 128px;
max-width: 99%; max-width: 225px;
} }
.theme-catalog div.grid-size-small { .theme-catalog div.grid-size-small {
width: 144px; width: 200px;
height:256px; max-width: 225px;
max-height: 300px;
} }
.theme-catalog div.grid-size-large img { .theme-catalog div.grid-size-large img {
max-height: 50%; max-height: 148px;
max-width: 99%; max-width: 300px;
} }
.theme-catalog div.grid-size-large { .theme-catalog div.grid-size-large {
width: 225px; width: 300px;
height: 384px; max-width: 300px;
max-height: 450px;
} }
.theme-catalog img.thread-image { .theme-catalog img.thread-image {
@ -692,6 +698,22 @@ div.thread.grid-li {
max-width: 100%; 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 { .compact-boardlist {
padding: 3px; padding: 3px;
padding-bottom: 0; padding-bottom: 0;
@ -713,9 +735,10 @@ div.thread.grid-li {
} }
.compact-boardlist .cb-cat { .compact-boardlist .cb-cat {
padding: 5px 6px 8px; padding: 5px 6px 8px 6px;
} }
/* styles also used by watch.js */
.cb-menuitem { .cb-menuitem {
display: table-row; display: table-row;
} }
@ -748,7 +771,7 @@ div.thread.grid-li {
} }
.boardlist:not(.compact-boardlist) #watch-pinned a:first-child { .boardlist:not(.compact-boardlist) #watch-pinned a:first-child {
margin-left: 0; margin-left: 0pt;
} }
.compact-boardlist #watch-pinned { .compact-boardlist #watch-pinned {
@ -756,8 +779,9 @@ div.thread.grid-li {
vertical-align: middle; vertical-align: middle;
} }
/* live-index.js */
.new-posts { .new-posts {
opacity: .6; opacity: 0.6;
margin-top: 1em; margin-top: 1em;
} }
@ -765,19 +789,13 @@ div.thread.grid-li {
text-align: center; text-align: center;
} }
.mobile-style #options_div { /* options.js */
display: block;
width: 100%;
height: 100%;
margin-top: 0;
}
#options_handler { #options_handler {
position: fixed; position: fixed;
top: 0; top: 0px;
left: 0; left: 0px;
right: 0; right: 0px;
bottom: 0; bottom: 0px;
width: 100%; width: 100%;
height: 100%; height: 100%;
text-align: center; text-align: center;
@ -785,13 +803,13 @@ div.thread.grid-li {
} }
#options_background { #options_background {
background: #000; background: black;
opacity: .5; opacity: 0.5;
position: absolute; position: absolute;
top: 0; top: 0px;
left: 0; left: 0px;
right: 0; right: 0px;
bottom: 0; bottom: 0px;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: -1; z-index: -1;
@ -799,7 +817,7 @@ div.thread.grid-li {
#options_div { #options_div {
background-color: #d6daf0; background-color: #d6daf0;
border: 1px solid #000; border: 1px solid black;
display: inline-block; display: inline-block;
position: relative; position: relative;
margin-top: 20px; margin-top: 20px;
@ -808,8 +826,8 @@ div.thread.grid-li {
} }
#options_close { #options_close {
top: 0; top: 0px;
right: 0; right: 0px;
position: absolute; position: absolute;
margin-right: 3px; margin-right: 3px;
font-size: 20px; font-size: 20px;
@ -817,34 +835,18 @@ div.thread.grid-li {
} }
#options_tablist { #options_tablist {
border-right: 1px solid #000; padding: 0px 5px;
padding: 0 5px; left: 0px;
top: 0;
bottom: 0;
left: 0;
height: 100%;
width: 70px; width: 70px;
} top: 0px;
bottom: 0px;
.options_tab { height: 100%;
position: absolute; border-right: 1px solid black;
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 { .options_tab_icon {
padding: 5px; padding: 5px;
color: #000; color: black;
cursor: pointer; cursor: pointer;
} }
@ -860,9 +862,35 @@ div.thread.grid-li {
font-size: 11px; font-size: 11px;
} }
code > pre { .options_tab {
background: #000; padding: 10px;
max-width: 80%; 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;
}
pre {
width: 99%;
padding: 0; padding: 0;
margin: 0; margin: 0;
overflow:auto; overflow:auto;
@ -872,9 +900,6 @@ code > pre > span.pln {
color: grey; color: grey;
} }
.mentioned {
word-wrap: break-word;
}
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
p.intro { p.intro {

Write Preview
Loading…
Cancel
Save