4chan/css/yotsubluemobile.css
2025-04-17 14:46:47 -05:00

1030 lines
16 KiB
CSS

/** Here's one for you: internet explorer in wp7 can only handle 1 stylesheet at a time it seems **/
/** Chrome Mobile seems to dislike media="" in html, so we do it this way instead. **/
@media only screen and (max-width: 480px) {
/** GENERIC / ELEMENT STYLING **/
html {
-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
.postMenuBtn {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
margin: 4px -5px 0px 4px !important;
float: left;
font-weight: bold;
opacity: 1 !important;
height: 0.5em !important;
font-size: 16px;
}
.dd-menu {
font-size: 16px;
line-height: 2.5em;
}
.adg-rects > span.mobile {
display: inline-block !important;
}
.party-hat {
left: -15px;
margin-top: -30px;
position: absolute;
width: 100px;
pointer-events: none;
}
.pu-img {
background: url('//s.4cdn.org/image/minileaf@2x.gif');
background-size: 100%;
}
body {
background: #EEF2FF url(/image/fade-blue.png) top center repeat-x;
color: #000000;
font-family: arial, helvetica, sans-serif;
font-size: 10pt;
margin-left: 0;
margin-right: 0;
margin-top: 5px;
padding-left: 0px;
padding-right: 0px;
width: 100%;
}
embed {
display: none !important;
}
.jlist-link {
margin: 15px auto 30px auto;
}
a,
.useremail:not(:hover) .name:not(.capcode),
.useremail:not(:hover) .postertrip:not(.capcode) {
color: #34345C !important;
}
a.replylink, div#absbot a {
text-decoration: underline !important;
}
a.replylink:not(:hover), div#absbot a:not(:hover) {
color: #34345C !important;
}
a:hover,
.useremail .name:hover, .useremail .postertrip:hover,
a.quoteLink:hover, a.quotelink:hover, a.deadlink:hover,
.useremail *:hover, .useremail:hover * {
color: #DD0000 !important;
}
.posteruid .hand:hover {
color: #DD0000 !important;
}
img {
border: none;
}
img.topad, .topad > div, .topad a img {
width: 300px;
height: 250px;
}
img.middlead, .middlead > div, .middlead a img {
width: 234px;
height: 30px;
max-width: 100%;
overflow: hidden;
margin: auto;
}
img.bottomad, .bottomad > div, .bottomad a img {
width: 320px;
height: 40px;
max-width: 100%;
overflow: hidden;
margin: auto;
}
ul.rules {
display: none;
}
.button a {
text-decoration: none !important;
}
div.boardBanner {
margin-top: 40px !important;
}
.backlink.mobile {
background-color: #C9CDE8;
border-top: 1px solid #B7C5D9;
}
.mobile {
display: block !important;
clear: left !important;
}
#quote-preview {
box-shadow: 0px 0px 4px 0 rgba(45, 77, 59, 0.5);
}
.noPictures .mFileInfo {
display: none !important;
}
.postLink.mobile {
clear: both !important;
}
.mobileinline {
display: inline !important;
}
.mobileib {
display: inline-block !important;
}
span.replyTextM {
display: inline !important;
}
.desktop {
display: none !important;
}
.hideMobile {
display: none !important;
}
div.board > hr {
border: none;
border-top: 1px solid #B7C5D9;
height: 0;
margin-top: 30px !important;
margin-bottom: 30px !important;
}
div.board > hr:last-of-type {
margin-bottom: 10px !important;
}
hr.abovePostForm {
width: 90%;
}
span.x-small {
font-size: x-small;
}
/** Mobile Specific CSS **/
div.postLink {
background-color: #c9cde8;
border-top: 1px solid #B7C5D9;
padding: 5px;
overflow: hidden;
}
div.postLink span {
float: left;
}
div.postLink a {
float: right;
color: #34345C !important;
}
.mobilePostFormToggle {
text-align: center;
font-weight: bold;
margin: 0 auto;
padding-top: 15px;
}
a.mobilePostFormToggle {
text-align: center;
display: inline-block !important;
}
div.mobilePostFormToggle div {
width: 300px;
background-color: #98E;
padding-top: 5px;
padding-bottom: 5px;
border: 1px solid #000;
margin: 0 auto;
}
div.post div.file .fileThumb img {
max-width: 125px;
max-height: 125px;
object-fit: scale-down;
}
span.fileThumb {
margin-left: 0px !important;
margin-right: 5px !important;
}
div.post div.file .fileThumb {
margin-left: 5px !important;
margin-right: 10px !important;
text-decoration: none;
}
div.post div.file.image-expanded .fileThumb {
margin-left: 0 !important;
margin-right: 0 !important;
}
div.post div.file div.fileText {
display: none;
}
div.sideArrows {
display: none;
}
div.reply {
padding: 2px;
background-color: #D6DAF0;
margin: 0px;
border: 0;
}
div.replyContainer {
background-color: #D6DAF0;
margin: 5px 0 0;
padding-left: 0;
}
.is_index div.replyContainer {
margin: 7px 0 0 0;
}
div.opContainer {
margin: 5px 0 0;
padding-left: 0;
display: block;
overflow: hidden;
background-color: #D6DAF0;
border: none;
}
span.summary:not(.preview-summary) {
padding: 5px;
text-align: center;
display: block;
background-color: #c9cde8;
border-bottom: 1px solid #B7C5D9 !important;
margin-top: 0px;
margin-bottom: 5px;
font-weight: bold;
}
div.postLink span.info {
color: #34345C;
margin-top: 8px;
}
blockquote {
margin: 10px !important;
}
blockquote.postMessage {
font-size: 11pt;
}
.omittedposts, .abbr {
color: #707070 !important;
font-size: 10pt !important;
}
div.thread {
border-top: none;
}
div.opContainer div.postInfo {
display: none !important;
}
div.post div.postInfoM {
overflow: hidden;
border-bottom: 1px solid #B7C5D9;
background-color: #c9cde8;
padding: 5px;
}
div.replyContainer div.postInfoM {
margin: 0px;
}
div.post div.postInfoM span.postNum, div.postInfo span.postNum {
float: left;
}
div.post div.postInfoM span.postNum a, div.postInfo span.postNum a {
text-decoration: none;
color: #000000 !important;
}
div.post div.postInfoM span.postNum a:hover {
color: red;
}
/* Name */
div.post div.postInfoM span.nameBlock, div.postInfo span.nameBlock {
display: inline;
float: left;
clear: left;
}
div.post div.postInfoM span.nameBlock span.name, div.postInfo span.nameBlock span.name {
color: #117743;
font-weight: bold;
}
div.post div.postInfoM span.nameBlock span.tripcode, div.postInfo span.nameBlock span.tripcode {
color: #117743;
}
/* Date/Time */
div.post div.postInfoM span.dateTime {
float: right;
/*font-style: italic;*/
text-align: right;
color: black !important;
}
div.post div.postInfoM span.time {
}
div.post div.postInfoM span.subject {
color: #0F0C5D;
font-weight: bold;
}
span.fileText {
font-size: smaller;
}
div.replyContainer div.reply {
width: 100%;
padding: 0px !important;
}
div.replyContainer div.post div.postInfo {
overflow: hidden;
border-bottom: 1px solid #B7C5D9;
background-color: #c9cde8;
padding: 3px;
margin: 0px;
}
div.replyContainer div.post div.postInfo input[type=checkbox] {
display: none;
}
div.replyContainer div.post div.postInfo span.postNum {
font-style: italic;
}
div.replyContainer div.post div.postInfo span.userInfo {
float: left;
padding-left: 5px;
}
div.replyContainer div.post div.postInfo span.nameBlock {
}
div.replyContainer div.post div.postInfo span.postNum a:first-child:after {
content: " ";
}
div.replyContainer div.post div.postInfo span.dateTime {
float: right;
text-align: right;
padding-right: 10px;
font-style: italic;
}
div.replyContainer div.post div.postInfo span.dateTime span.date {
display: block;
}
div.thread > div:nth-of-type(2) > div.reply {
margin-top: 0px !important;
}
div.replyContainer div.post div.fileInfo {
margin-left: 0px;
}
div.replyContainer div.post div.file:not(.image-expanded) {
padding: 5px;
}
div.mPagelist {
margin-top: 10px;
text-align: center;
border-bottom: 1px solid #B7C5D9;
padding-bottom: 10px;
color: #89A;
}
div.mPagelist strong {
color: #34345C;
}
div.mPagelist > div.prev, div.mPagelist div.next {
margin: 20px 2px 15px;
display: inline-block;
}
.button {
border-radius: 3px;
padding: 6px 10px 5px 10px;
font-weight: bold;
background-color: #D6DAF0;
border: 1px solid #B7C5D9;
user-select: none;
background-image: url(/image/buttonfade-blue.png);
background-repeat: repeat-x;
text-decoration: none;
color: #34345C !important;
}
#globalToggle {
width: 200px;
display: inline;
text-align: center;
margin: 0 auto;
margin-bottom: 10px;
}
.redButton {
background-color: #ffadad;
background-image: url(/image/buttonfade-red.png);
border: 1px solid #C45858;
color: #800 !important;
}
div.mPagelist span {
padding-left: 3px;
padding-right: 3px;
font-size: larger;
}
.button:hover {
cursor: pointer;
}
.mobileCatalogLink,
div.absBotText {
margin-top: 10px;
}
.mobileCatalogLink {
font-size: larger;
}
#disable-mobile {
font-size: small !important;
}
#enable-mobile {
font-size: small !important;
display: none;
}
.absBotDisclaimer {
display: none !important;
}
div#boardNavMobile {
padding: 2px 4px;
background-color: #D6DAF0;
overflow: hidden;
border-bottom: 2px solid #B7C5D9;
position: fixed;
top: 0px;
width: 100%;
font-size: x-small;
}
div#boardNavMobile select, div#boardNavMobile option {
font-size: x-small;
}
div.boardSelect {
float: left;
}
div.boardSelect > strong {
padding-right: 5px;
}
div.pageJump {
float: right;
padding-right: 5px;
padding-top: 3px;
font-size: 7.5pt;
}
.pageJump a {
text-decoration: none;
padding-right: 5px;
}
div.postingMode {
background-color: #e04000;
padding: 3px;
text-align: center;
width: 300px;
margin: 0 auto;
}
div.navLinks {
margin-top: 9px !important;
margin-bottom: 0px !important;
text-align: center;
}
/** WP7 ADDITIONS **/
div.post div.postInfo span.postNum a {
text-decoration: none;
color: #000000;
}
a.quoteLink {
color: #D00 !important;
}
div.boardBanner {
text-align: center;
clear: both;
}
div.boardBanner > img {
border: 1px solid #34345C;
margin: 5px 0px 5px 0px;
height: 50px;
width: 150px;
max-width: 100%;
}
div.boardBanner > div.boardTitle {
font-family: Tahoma, sans-serif;
font-size: 28px;
font-weight: bold;
letter-spacing: -2px;
margin-top: 0px;
}
div.boardBanner > div.boardSubtitle {
font-size: x-small;
}
div.post div.file .fileThumb img {
border: none;
float: left;
}
div.post div.file .fileThumb .expanded-thumb {
max-width: 100vw !important;
max-height: none !important;
}
.expandedWebm {
width: auto !important;
height: auto !important;
margin: 3px 0 5px;
max-width: 100vw !important;
max-height: none !important;
}
span.subject {
display: block;
}
hr {
border: none;
border-top: 1px solid #B7C5D9;
height: 0;
}
.commentpostername {
font-weight: bold;
}
.identityIcon {
margin-bottom: -3px;
height: 16px;
width: 16px;
}
.stickyIcon {
margin-bottom: -2px;
padding-left: 2px;
height: 16px;
width: 16px;
}
.archivedIcon,
.closedIcon {
margin-bottom: -2px;
margin-left: -1px;
height: 16px;
width: 16px;
}
.trashIcon {
width: 16px;
height: 16px;
margin-bottom: -2px;
}
.fileDeleted {
height: 13px;
width: 172px;
}
.fileDeletedRes {
height: 13px;
width: 127px;
}
.navSmall {
font-size: 90%;
}
.center {
text-align: center;
}
.bold {
font-weight: bold;
}
.smaller {
font-size: smaller;
}
.password {
font-size: smaller;
}
.passNotice {
font-size: smaller;
padding-left: 3px;
}
.qcDiv {
display: none;
}
.qcImg {
height: 1px;
width: 1px;
border: 0px;
}
.jpnFlag {
height: 11px;
width: 17px;
}
.globalMessage {
color: red;
text-align: center;
}
.highlightPost {
background: #f0d6d6 !important;
}
span.postertrip {
color: #117743;
font-weight: normal !important;
}
span.capcodeAdmin span.name, span.capcodeAdmin span.name a, span.capcodeAdmin span.postertrip, span.capcodeAdmin strong.capcode {
color: #F00 !important;
}
span.capcodeMod span.name, span.capcodeMod span.name a, span.capcodeMod span.postertrip, span.capcodeMod strong.capcode {
color: #800080 !important;
}
.omittedposts, .abbr {
color: #070707;
}
span.spoiler {
color: #000 !important;
background: #000 !important;
}
span.spoiler:hover, span.spoiler:focus {
color: #fff !important;
}
table.exif {
display: none;
min-width: 450px;
}
table.exif td {
color: #070707;
min-width: 150px;
font-size: 8pt;
}
table.exif td b {
text-decoration: underline;
}
#navtopright, #navbotright {
float: right;
}
.preview {
background-color: #D6DAF0;
border: 1px solid #B7C5D9 !important;
border-right-width: 2px !important;
border-bottom-width: 2px !important;
}
div.posthover {
max-width: 400px;
margin-left: 20px;
}
div.posthover {
padding: 5px;
padding-left: 10px;
padding-right: 10px;
}
div.posthover a.fileThumb {
margin-left: 5px !important;
margin-right: 10px !important;
}
div.posthover blockquote {
margin: 5px;
}
div.posthover img[data-md5] {
max-width: 80px;
max-height: 80px;
}
div.posthover div.fileThumb {
margin-left: 0px !important;
margin-right: 10px !important;
}
#settingsBox {
position: absolute;
right: 10px;
margin-top: 10px;
background-color: #D6DAF0;
}
div.mPagelist a {
text-decoration: none !important;
}
.pages a {
bottom: -1px;
position: relative;
}
img.expandedImg {
max-width: auto !important;
max-height: auto !important;
}
.prettyprint {
border: none !important;
background-color: #fff;
padding: 5px !important;
display: inline-block;
max-height: 400px;
max-width: 300px;
word-wrap: break-word;
}
td > input[type="text"], td > textarea, td > input[type="password"] {
width: 220px !important;
margin-right: 0 !important;
}
#postForm {
width: auto;
}
#postForm input[name="sub"] {
width: 160px !important;
}
#postForm input[type="submit"] {
width: 60px;
padding: 2px 4px 3px 4px;
margin: 0px;
}
#postForm input[type="password"] {
width: 70px !important;
}
td > input {
margin-left: 1px;
}
tr.mobile {
display: table-row !important;
}
tr.mobile td {
padding: 5px;
}
.recaptcha_image_cell {
width: auto !important;
padding: 0 !important;
}
#recaptcha_table tr > td:last-child {
display: none;
}
#recaptcha_table tr[height="73"] {
height: auto !important;
}
#recaptcha_table tr > td {
padding: 0 !important;
}
#recaptcha_image {
width: 280px !important;
}
.recaptchatable .recaptcha_image_cell center {
}
#recaptcha_response_field {
width: 272px !important;
margin-left: 3px;
margin-top: -1px;
font-size: 10pt !important;
}
#recaptcha_image > img {
width: 280px !important;
}
#postForm:not(.hideMobile) {
/*max-width: 280px !important;*/
overflow: hidden;
margin-top: 20px;
display: table;
}
form[name="post"] {
margin: auto;
max-width: 100%;
}
input[type="text"], input[type="password"], textarea {
-webkit-appearance: none;
-webkit-border-radius: 0;
}
input:focus, textarea:focus {
border: 1px solid #9988EE !important;
}
a:hover, .posteruid .hand:hover {
color: #DD0000 !important;
}
.button a:hover, a.button:hover {
color: #34345C!important;
}
a.redButton:hover,
a.redButton:focus {
color: #880000 !important;
}
table#recaptcha_table > tbody > tr:first-child > td:nth-child(2) {
display: none;
}
.reply:target, .reply:focus, .reply.highlight {
background: #D6BAD0 !important;
border: none !important;
}
.mFileInfo {
padding-top: 5px;
text-align: center;
color: #707070 !important;
font-size: 9pt !important;
text-decoration: none!important;
}
a.replylink, div#absbot a {
text-decoration: underline !important;
}
a.replylink:not(:hover), div#absbot a:not(:hover) {
color: #34345C !important;
}
.mobileSpoiler {
padding: 2px !important;
}
#mpostform {
text-align: center;
margin-top: 10px;
}
}