From ce93dc575393fb546630adee8e7205083c3fb3d4 Mon Sep 17 00:00:00 2001 From: Michael Walker Date: Sat, 12 Sep 2015 21:53:09 +0100 Subject: [PATCH] Add two new stylesheets --- stylesheets/8ch.cyber.css | 469 ++++++++++++++++++++++++++++++++++++++++++++++ stylesheets/beta.css | 381 +++++++++++++++++++++++++++++++++++++ stylesheets/style.css | 106 ++++++++++- 3 files changed, 950 insertions(+), 6 deletions(-) create mode 100644 stylesheets/8ch.cyber.css create mode 100644 stylesheets/beta.css diff --git a/stylesheets/8ch.cyber.css b/stylesheets/8ch.cyber.css new file mode 100644 index 00000000..189e0d85 --- /dev/null +++ b/stylesheets/8ch.cyber.css @@ -0,0 +1,469 @@ +DIV.announcement.apr212015.board-owners-or-users-feel-free-to-hide +{color: #fff;} + +form table tr td { + background-color: rgb(43, 43, 43);} + + /*monoelains ez css for VIP quality imageboards. steal this .css and edit it to your liking. */ + + + + + /*Bottom bar settings for lainchan.org CSS theft by kalyx*/ + +.bar { + -moz-box-shadow: 0 0 0px #d1d5ee; + -webkit-box-shadow: 0 0 0px #d1d5ee; + box-shadow: 0 0 0px #d1d5ee; + display: table; + position: fixed; + width: 100%; + left: 0px; + z-index: 3; + background-color: #35363b; + border-color: #39d958; +} + + /* OPTION HIDING */ + + + /*removes footer (STI pls dont sue) + footer { + display:none; + color: #ffffff; + } + + /* hides AA in catalog */ + .theme-catalog span.aa { + display: none !important; + } + + /* hides expand all images */ + #expand-all-images { + display: none; + } + + /* hides hints*/ + .hint { + display: none; + } + + /* hides horizontal bar */ + hr { + display: none; + } + + /*banner stuff*/ + img.banner, img.board_image { + border: 1px solid #989898; + background-color: #B2A50F; + display: ; + box-shadow: 3px 5px #989898; + margin: 30px auto 0px; + margin-top: 50px; + } + + /* hides delete options (obsolete) */ + div.delete { + display: none; + } + + /*makes files align vertically (hw pls fix this shit)*/ + .file { + display: block; + margin-right: 11px; +} + + + /*expanded image border/shadow*/ + .full-image { + border-top-right-radius: 0; + box-shadow: 3px 5px #2e8b57; + border: solid 1px #2e8b57; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + border-top-left-radius: 0; + padding: 5px; + margin: 0px 0px 0px; + border-radius: 0; + max-width: 80% !important; + float: none; + background-color: #2b2b2b; + } + + /*gives quick reply its border/shadow*/ + #quick-reply table { + background: none repeat scroll 0 0 #2b2b2b; + border: 1px solid #989898; + margin: 0; + box-shadow: 3px 5px #989898; + width: auto !important; + } + + /*makes posting form maroon*/ + form table tr th { + background-color: #2e8b57; + color: #2b2b2b; + font-family: "Lucida Console", Monaco, monospace; + } + + /*gives images border/shadow*/ + div.files img.post-image { + box-shadow: 3px 5px #4D4D4D; + background-color: #2b2b2b; + border: solid 1px #4D4D4D; + padding: 0px; + border-radius: 0; + margin-bottom: 5px; + } + + /* makes Youtube thumbs not obscenely big */ + div.video-container { + width: auto !important; + height: auto !important; + max-height: 50% !important; + max-width: 50% !important; + } + + /* Image thumbs size limit (make as big as you want)*/ + .post-image { + border: solid 1px #2e8b57; + height: auto !important; + width: auto !important; + max-height: 60%; + max-width: 60%; + box-shadow: 3px 5px #2e8b57; +padding: 5px; +background-color: #2b2b2b; + } + + /* Keep small thumbnails in replies */ + .post.reply a:not([data-expanded="true"]) .post-image { + width: auto !important; + height: auto !important; + max-height: 60%; + max-width: 60%; + } + + /* reply box size */ + .input[type="text"], textarea { + min-height: 117px; + min-width: 240px; + } + + /*boardwide font stuff goes here also background image*/ + body { + padding: 0; + font-family: "Lucida Console", Monaco, monospace; + font-size: 14px; + background: url("https://a.pomf.se/waivbu.png") fixed repeat top #000000; +float: left; +margin-left: 10px; +margin-right: 35px; + } + /*saves one pixel of space*/ + header { + margin-bottom: 0px; + } + + /*gives posting table its border/shadow*/ + form table { + width: 100%; + minimum-width: 960px; + min-height: 250px; + display: inline-block; + margin: 5px auto; + background-color: #2b2b2b; + border: solid 1px #989898; + color: #61CE3C; + padding: 5px; + box-shadow: 3px 3px #989898 !important; + } + + /*gives threads its border/shadow*/ + div[id^="thread_"] { + background-color: #1A1A1A; + color: #61CE3C; + margin-bottom: 20px; + padding: 10px; + border: solid 1px #7b68ee; + width: 100%; + box-shadow: 3px 5px #7b68ee; + } + + /*adds horizontal bar below subject*/ + p.intro { + background-image: url('https://i.imgur.com/Ua5aMb0.png'); + background-repeat: repeat-x; + background-position: bottom; + padding-bottom: 7px; + } + + /*gives replies border/shadow*/ + div.post.reply { + max-width: 95% !important; + box-shadow: 3px 5px #2e8b57; + padding: 4px; + margin-top: 9px; + border: solid 1px #2e8b57; + background-color: #2b2b2b; + } + + /*unfucks highlighting replies and gives border/shadow*/ + div.post.reply.highlighted { + background-color: #2b2b2b; + border: solid 1px #93e0e3; + box-shadow: 3px 5px #93e0e3; + } + + /*dont touch this*/ + div.body { + display: block; + clear: both; + padding-top: 10px; + } + + /*makes page bar have border/shadow*/ + div.pages { + box-shadow: 3px 5px #2e8b57; + width: 100%; + display: block; + clear: both; + border: solid 1px #2e8b57; + background-color: #2b2b2b; + } + + /*hovered links have underline*/ + a:hover { + text-decoration: underline; + } + + /*stops textbox resizing shenanigans*/ + .input[type="text"], textarea { + font-size: 14px; + max-width: 9000px; + font-family: "Lucida Console", Monaco, monospace; + min-height: 115px; + min-width: 270px; + background-color: #1A1A1A; + color: #61CE3C; + } + +input { +background-color: #1A1A1A; + color: #61CE3C; +} +select { +background-color: #1A1A1A; + color: #61CE3C; +} + + /*boardname nice font. replace with something classy someday*/ + header div.subtitle, h1 { + font-family: "Lucida Console", Monaco, monospace; + color: #cc0000; + } + + /*announcement font and color*/ + div.blotter { + padding: 15px; + color: #cc0000; + font-family: "Lucida Console", Monaco, monospace; + } + + /*makes links red*/ + a { + color: #c80b63; + text-decoration: none; + } + + /*top boardlist stuff. change position to "fixed" to make it behave like normal 8chan*/ + div.boardlist:not(.bottom) { + background-color: #1A1A1A !important; + text-align: center; + padding: 5px 1px; + letter-spacing: -2px; + color: #989898; + font-size: 11px; + border-bottom: double 3px #989898 !important; + position:fixed; + } + + /*favorites in a new line*/ + div.boardlist span.favorite-boards { + display: ; + } + + /*subject color*/ + p.intro span.subject { + color: #7b68ee; + } + + /*bottom boardlist centered*/ + + div.boardlist.bottom { + text-align: center; + background-color: #1A1A1A; + border: solid 1px #989898; + box-shadow: 3px 7px #989898; + width: 100%; + margin: 15px; + + + } + + /*colors name*/ + p.intro span.name { + color: #989898; + font-family: ; + } + + /*catalog stuff*/ + .theme-catalog div.thread { + background-color: #2b2b2b; + color: #61CE3C; + border: solid 1px #2e8b57; + } + + .theme-catalog div.thread:hover { + background-color: #383838; + border: solid 1px #2e8b57; + } + + span.trip { + color: rgb(34, 136, 84); + } + + #updater, #thread-links { + background-color: #2b2b2b; + border:solid 1px #989898; + padding: 5px; + margin: 5px; + box-shadow: 3px 5px #989898; + color: #989898; + } + + A#update_thread + {color: #ffffff;} + A#thread-catalog + {color: #ffffff;} + A#thread-top + {color: #ffffff;} + A#thread-return + {color: #ffffff;} + +div.banner { +width: 380px; +display:block; +margin-left:auto; +margin-right:auto; + +} + +#quick-reply th .close-btn{ +color:#ffffff; + +} + +div.post-hover { + +border: solid 1px #2e8b57; +box-shadow: 3px 5px #2e8b57; +max-width: 50%; +} + +span.subject:after { content: '\A'; white-space:pre; } +SPAN.controls.op:before { content: '\A'; white-space:pre; } + +a:visited {color: #97094b} + +.quote {color: #93e0e3;} +a:hover,p.intro a.post_no:hover { + color: #ff0000 !important; +} + +p.intro {color: #989898} + +p.intro a {color: #ffffff !important} +A.post_no {color:#989898} + + +p.fileinfo +{color: #989898 !important} + +p.fileinfo a:link{ + color: #989898; +} !important; +max-width: 50%; +} + +span.subject:after { content: '\A'; white-space:pre; } +SPAN.controls.op:before { content: '\A'; white-space:pre; } + +a:visited {color: #97094b} + + +p.intro {color: #989898} + +p.intro a {color: #ffffff !important} +A.post_no {color:#989898} + + +p.fileinfo +{color: #989898 !important} + +p.fileinfo a:link{ + color: #989898; +} + +DIV#thread_stats +{ +border: solid 1px #989898; +box-shadow: 3px 5px #989898; +color: #989898; +} + +DIV.file-hint +{background-color: #383838;} +div.dropzone +{background-color: #383838; +color: #ffffff} + +#options_div +{background-color: #383838; color: #61CE3C; +} +div.options_tab_icon +{color: #61CE3C;} +div.options_tab_icon.active +{color: #ffffff;} +#filter-container +{background-color: #707070; +color: #ffffff;} +#treeview +{display:none} +span.heading +{color: #FF6400} +body > footer:nth-child(19) +{color: #ffffff;} +div.boardlist a {color: #ffffff;} + +form table tr th { + color: #ffffff !important; +} + +p.intro a.email span.name{color: #c80b63} +p.intro span.capcode {color: #FBDE2D} +p.intro span.capcode:before {font-family: MS PGothic; content: "（　´∀｀） 🔰"} + + +label {display:none} + +div.post-menu {color: #ffffff} + + + +@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) { + +div.boardlist:not(.bottom) {position: static;} +body { min-width: 100%;} +} diff --git a/stylesheets/beta.css b/stylesheets/beta.css new file mode 100644 index 00000000..e32353cc --- /dev/null +++ b/stylesheets/beta.css @@ -0,0 +1,381 @@ +/** + * Beta.css + * by kalyx + *this might work well on phones + */ + +body +{ + display:block; + padding-top: 26px; + background: #0d1010; + color: #e8e8e3; + font-family: sans-serif; + font-size: 18px; + + + width: 100%; +} + +html { + /* Size of largest container or bigger */ + background:#0d1010; + width: 100%; + margin-left: auto; + margin-right: auto; + + } +/*banner*/ +.board_image{ + border: double 0px #e8e8e3; + box-shadow: 2px 2px #e8e8e3; +} + + /*gives images border/shadow*/ + div.files img.post-image { + border: solid 1px #e8e8e3; + box-shadow: 2px 2px #e8e8e3; + padding: 0px; + border-radius: 0; + margin-bottom: 5px; + } +div.sidearrows{ + display: none; +} + +span.quote +{ + color:#e8d928; +} +@font-face +{ + font-family: 'lain'; + src: url('./fonts/nrdyyh.woff') format('woff'), + url('./fonts/tojcxo.TTF') format('truetype'); +} +h1 +{ + display: none; + font-family: 'lain', tahoma; + + letter-spacing: -2px; + font-size: 42pt; + text-align: center; + color: #e8e8e3; + +} +header div.subtitle +{ + display: none; + color: #e8e8e3; + font-size: 13px; + margin-left: auto; + margin-right: auto; + max-width:385px; +} +div.title +{ + display: none; + color: #e8e8e3; + font-family: Arial, Helvetica, sans-serif; + +} +div.title p +{ + font-size: 8px; + color: #e8e8e3; +} +a:link, a:visited, p.intro a.email span.name +{ + color: #e8e8e3; + text-transform: uppercase; + font-size: 10px; + text-decoration: none; + font-family: sans-serif; +} +a:link, a:visited, p.intro a.email span.name +{ + -moz-transition: 0.15s text-shadow, 0.15s color; + -webkit-transition: 0.15s text-shadow, 0.15s color; + -khtml-transition: 0.15s text-shadow, 0.15s color; + -o-transition: 0.15s text-shadow, 0.15s color; + -ms-transition: 0.15s text-shadow, 0.15s color; + transition: 0.15s text-shadow, 0.15s color; +} +input[type="text"], textarea +{ + -moz-transition: 0.15s border-color; + -webkit-transition: 0.15s border-color; + -khtml-transition: 0.15s border-color; + -o-transition: 0.15s border-color; + -ms-transition: 0.15s border-color; + transition: 0.15s border-color; +} +input[type="submit"] +{ + -moz-transition: 0.15s border-color, 0.15s background-color, 0.15s color; + -webkit-transition: 0.15s border-color, 0.15s background-color, 0.15s color; + -khtml-transition: 0.15s border-color, 0.15s background-color, 0.15s color; + -o-transition: 0.15s border-color, 0.15s background-color, 0.15s color; + -ms-transition: 0.15s border-color, 0.15s background-color, 0.15s color; + transition: 0.15s border-color, 0.15s background-color, 0.15s color; +} +a:link:hover, a:visited:hover +{ + color: #e8d928; + font-family: sans-serif; + text-decoration: none; + text-shadow: 0px 0px 5px #d2e7e8; +} +a.post_no +{ + color: #e8d928; + text-decoration: none; +} +p.intro a.post_no:hover +{ + color: #e8d928!important; +} +div.post.reply +{ + background: #0d1010; + align: center; + max-width:100% !important; + min-width: 100%!important; +border: solid 1px #e8e8e3; +box-shadow: 2px 2px #e8e8e3; + + +} + +div.postcontainer +{ + max-width:100% !important; + min-width: 100%!important; + +} +div.post.reply.highlighted +{ + background: #1e2324; + border: solid 1px #93e0e3; + box-shadow: 3px 5px #5c8c8e; + margin-left: auto; + margin-right: auto; +} +div.post.reply div.body a:link, div.post.reply div.body a:visited +{ + color: #CCCCCC; + +} +div.post.reply div.body a:link:hover, div.post.reply div.body a:visited:hover +{ + color: #e8d928; + +} +p.intro span.subject +{ + font-size: 12px; + font-family: sans-serif; + color: #e8d928; + font-weight: 800; + +} +p.intro span.name +{ + color: #c3e849; + font-weight: 800; +} +p.intro a.capcode, p.intro a.nametag +{ + color: magenta; + margin-left: 0; +} +p.intro a.email, p.intro a.email span.name, p.intro a.email:hover, p.intro a.email:hover span.name +{ + color: #d2e7e8; + +} +input[type="text"], textarea, select +{ + background: #0d1010!important; + color: #CCCCCC!important; +border: solid 1px #e8e8e3; +box-shadow: 1px 1px #0d1010; + margin-left: auto; + margin-right: auto; + + +} +input[type="password"] +{ + background: #0d1010!important; + color: #CCCCCC!important; + border: #d2e7e8 1px double!important; +} +form table tr th +{ + background: #0d1010!important; + color: #e8e8e3!important; + border: solid 1px #d2e7e8; +box-shadow: 1px 1px #0d1010; + text-align: right; + +} +div.banner +{ + + background: #E04000; + border: 0px solid hsl(17, 100%, 60%); + color: #EEE; + text-align: center; + height: 15px; + padding: 1px 1px 4px 1px; + margin-left: auto; + margin-right: auto; +} +div.banner a +{ + color:#000; +} +input[type="submit"] +{ + background: #333333; + border: #666 1px solid; + color: #CCCCCC; +} +input[type="submit"]:hover +{ + background: #555; + border: #888 1px solid; + color: #e8d928; +} +input[type="text"]:focus, textarea:focus +{ + border:#888 1px solid!important; +} +p.fileinfo a:hover +{ + text-decoration: underline; +} +span.trip +{ + color: #AAA; +} +.bar +{ + background: #0c0c0c!important; + -moz-box-shadow: 0 0 0px #000; + -webkit-box-shadow: 0 0 0px #000; + + + + +} +.bar.top +{ + border: solid 1px #e8e8e3; +box-shadow: 0px 1px #d2e7e8; + +} +.bar.bottom +{ + border-top: 0px solid #666; + border: solid 1px #e8e8e3; + + +} +div.pages +{ + color: #d2e7e8 ; + background: #333; + border: #666 0px solid; + font-family: sans-serif; + font-size: 10pt; +} +div.pages a.selected +{ + color: #d2e7e8 ; +} +hr +{ + height: 0px; + border: #e8e8e3 2px solid; + +} +div.boardlist +{ + color: #e8e8e3; +} + +div.ban +{ + background-color: #0d1010; + border: 0px solid #555; + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + border-radius: 2px; + text-align: left!important; + font-size: 13px; + +} +div.ban h2 +{ + background: #333; + color: #e8e8e3; + padding: 3px 7px; + font-size: 12pt; + border-bottom: 1px solid #555; +} +div.ban h2:not(:nth-child(1)) +{ + border-top: 0px solid #555; +} +table.modlog tr th +{ + background: #333; + color: #AAA; +} + +div.report +{ + color: #666; +} +.pages, .board_image, input, .reply, form table th, textarea, a img, select, .banner +{ + -webkit-border-radius: 2px; + -khtml-border-radius: 2px; + -moz-border-radius: 2px; + -o-border-radius: 2px; + -ms-border-radius: 2px; + border-radius: 2px; +} +.blur +{ + filter: blur(20px); + -webkit-filter: blur(23px); + -moz-filter: blur(23px); + -o-filter: blur(23px); + -ms-filter: blur(23px); + filter: url(svg/blur.svg#blur); +} + +/* options.js */ +#options_div +{ + background: #333333; +} +.options_tab_icon +{ + color: #AAAAAA; +} +.options_tab_icon.active +{ + color: #FFFFFF; +} + + + +.blotter +{ + color: #e8e8e3!important; +} diff --git a/stylesheets/style.css b/stylesheets/style.css index ca0762fb..8750ed3b 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -1,9 +1,21 @@ /* backup version before modifying bar.top */ -* { - max-width: 100%; + +/*for trollin +audio { + display:none; } +*/ + +/*FIXED THE FUCKING BREAKOUT LINKS MOTHER FUCKING FINALLY -kalyx*/ +a{ + overflow-wrap: break-word; +} +p.intro a.post_no, p.intro a.email, p.intro a.post_anchor, a.mentioned, time, span.name{ + overflow-wrap: break-word; +} + html { - width: 100%!important; + width: 98%!important; } body { background: #EEF2FF url('img/fade-blue.png') repeat-x 50% 0%; @@ -170,7 +182,6 @@ header div.subtitle { .file:not(.multifile) .post-image { float: left; } -/* [data-board] > .files > :nth-child(1):not(.multifile) > a:before { content: url('/static/partyhat.gif'); float: left; @@ -179,6 +190,7 @@ header div.subtitle { position: relative; top: -120px; left: -30px; + pointer-events: none; } [data-board] > .files > :nth-child(1).multifile > a:before { @@ -189,9 +201,8 @@ header div.subtitle { position: relative; top: -120px; left: -50px; - + pointer-events: none; } -*/ .file:not(.multifile) { float: none; } @@ -720,6 +731,89 @@ form.ban-appeal textarea { max-width: 100%; } + + +/* File selector */ +.dropzone { + color: #000; + cursor: default; + margin: auto; + padding: 0px 4px; + text-align: center; + min-height: 50px; + max-height: 140px; + transition: 0.2s; + background-color: rgba(200, 200, 200, 0.5); + overflow-y: auto; +} +.dropzone-wrap { + width: 100%; +} +.dropzone .file-hint { + color: rgba(0, 0, 0, 0.5); + cursor: pointer; + position: relative; + margin-bottom: 5px; + padding: 10px 0px; + top: 5px; + transition: 0.2s; + border: 2px dashed rgba(125, 125, 125, 0.4); +} +.file-hint:hover, .dropzone.dragover .file-hint { + color: rgba(0, 0, 0, 1); + border-color: rgba(125, 125, 125, 0.8); +} +.dropzone.dragover { + background-color: rgba(200, 200, 200, 1); +} +.dropzone .file-thumbs { + text-align: left; + width: 100%; +} +.dropzone .tmb-container { + padding: 3px; + overflow-x: hidden; + white-space: nowrap; +} +.dropzone .file-tmb { + height: 40px; + width: 70px; + cursor: pointer; + display: inline-block; + text-align: center; + background-color: rgba(187, 187, 187, 0.5); + background-size: cover; + background-position: center; +} +.dropzone .file-tmb span { + font-weight: 600; + position: relative; + top: 13px; +} +.dropzone .tmb-filename { + display: inline-block; + vertical-align: bottom; + bottom: 12px; + position: relative; + margin-left: 5px; +} +.dropzone .remove-btn { + cursor: pointer; + color: rgba(125, 125, 125, 0.5); + display: inline-block; + vertical-align: bottom; + bottom: 10px; + position: relative; + margin-right: 5px; + font-size: 20px +} +.dropzone .remove-btn:hover { + color: rgba(125, 125, 125, 1); +} + + + + /* Containerchan */ video.post-image { display: block;