4chan-x/src/General/css/theme.css
2013-06-03 03:47:19 -07:00

469 lines
14 KiB
CSS

.hide_thread_button span > span,
.hide_reply_button span > span {
background-color: #{theme["Links"]};
}
#mascot_hide label {
border-bottom: 1px solid #{theme["Reply Border"]};
}
#content .thumb {
box-shadow: 0 0 5px #{theme["Reply Border"]};
}
.export-button,
.mascotname,
#mascot-options {
background: #{theme["Dialog Background"]};
border: 1px solid #{theme["Buttons Border"]};
}
.highlight-you .opContainer.quotesYou,
.highlight-own .opContainer.yourPost,
.opContainer.filter-highlight {
box-shadow: inset 5px 0 #{theme["Backlinked Reply Outline"]};
}
.highlight-you .quotesYou > .reply,
.highlight-own .yourPost > .reply,
.filter-highlight > .reply {
box-shadow: -5px 0 #{theme["Backlinked Reply Outline"]};
}
hr {
border-bottom: 1px solid #{theme["Reply Border"]};
}
hr#unread-line {
border-bottom: 1px solid #{theme["Reply Background"]};
visibility: visible;
}
.threadContainer {
border-color: #{theme["Reply Border"]} !important;
}
html {
background: #{backgroundC or ''};
background-image: #{theme["Background Image"] or ''};
background-repeat: #{theme["Background Repeat"] or ''};
background-attachment: #{theme["Background Attachment"] or ''};
background-position: #{theme["Background Position"] or ''};
}
.panel,
.section-container,
#exlinks-options-content,
#mascotcontent,
#themecontent {
background: #{backgroundC};
border: 1px solid #{theme["Reply Border"]};
padding: 5px;
}
.sections-list > a.tab-selected {
background: #{backgroundC};
border-color: #{theme["Reply Border"]};
border-style: solid;
}
.captcha-img img {
<%= filter %>: url("#captcha-filter");
}
#boardTitle {
text-shadow:
1px 1px #{backgroundC},
-1px -1px #{backgroundC},
1px -1px #{backgroundC},
-1px 1px #{backgroundC};
}
.sidebar-glow #boardTitle {
text-shadow:
1px 1px 1px #{backgroundC},
-1px -1px 1px #{backgroundC},
1px -1px 1px #{backgroundC},
-1px 1px 1px #{backgroundC},
0 2px 4px rgba(0,0,0,.6),
0 0 10px rgba(0,0,0,.6);
}
/* Fixes text spoilers */
.remove-spoilers.indicate-spoilers .spoiler::before,
.remove-spoilers.indicate-spoilers s::before {
content: '[spoiler]';
}
.remove-spoilers.indicate-spoilers .spoiler::after,
.remove-spoilers.indicate-spoilers s::after {
content: '[/spoiler]';
}
:root:not(.remove-spoilers) .spoiler:not(:hover) *,
:root:not(.remove-spoilers) s:not(:hover) * {
color: rgb(0,0,0) !important;
text-shadow: none !important;
}
:root:not(.remove-spoilers) spoiler:not(:hover),
:root:not(.remove-spoilers) s:not(:hover) {
background-color: rgb(0,0,0);
color: rgb(0,0,0) !important;
text-shadow: none !important;
}
#exlinks-options,
#appchanx-settings,
#qrtab,
.post-form-decorations #qr,
.post-form-style-float #qr,
input[type="submit"],
input[value="Report"],
span[style="left: 5px; position: absolute;"] a {
background: #{theme["Buttons Background"]};
border: 1px solid #{theme["Buttons Border"]};
}
.enabled .mascotcontainer {
background: #{theme["Buttons Background"]};
border-color: #{theme["Buttons Border"]};
}
#dump,
#qr-filename-container,
#appchanx-settings input,
.captcha-img,
.dump #dump,
.qr-preview,
.selectrice,
button,
input,
textarea {
background: #{theme["Input Background"]};
border: 1px solid #{theme["Input Border"]};
}
.has-file #qr-extras-container {
background: #{theme["Input Background"]};
}
#dump:hover,
#qr-filename-container:hover,
.selectrice:hover,
#selectrice li:hover,
#selectrice li:nth-of-type(2n+1):hover,
input:hover,
textarea:hover {
background: #{theme["Hovered Input Background"]};
border-color: #{theme["Hovered Input Border"]};
}
.has-file #qr-filename-container:hover #qr-extras-container {
background: #{theme["Hovered Input Background"]};
}
#dump:active,
#dump:focus,
#selectrice li:focus,
.selectrice:focus,
#qr-filename-container:active,
#qr-filename-container:focus,
input:focus,
textarea:focus,
textarea.field:focus {
background: #{theme["Focused Input Background"]};
border-color: #{theme["Focused Input Border"]};
color: #{theme["Inputs"]};
outline: none;
}
.has-file #qr-filename-container:active #qr-extras-container,
.has-file #qr-filename-container:focus #qr-extras-container {
background: #{theme["Focused Input Background"]};
}
#ft,
#mouseover,
#post-preview,
#qp .post,
#xupdater,
.box-outer,
.reply.post {
border-width: 1px;
border-style: solid;
border-color: #{theme["Reply Border"]};
background: #{theme["Reply Background"]};
}
.exblock.reply,
.reply.post.highlight,
.reply.post:target {
background: #{theme["Highlighted Reply Background"]};
border: 1px solid #{theme["Highlighted Reply Border"]};
}
#header-bar,
.pagelist {
background: #{theme["Navigation Background"]};
border-style: solid;
border-color: #{theme["Navigation Border"]};
}
#doc,
.board > .thread {
background: #{theme["Thread Wrapper Background"]};
border: 1px solid #{theme["Thread Wrapper Border"]};
}
#boardNavDesktopFoot,
#mascotConf,
#mascot_hide,
#menu,
#selectrice,
#themeConf,
#watcher,
#watcher:hover,
.dialog,
.submenu,
a[style="cursor: pointer; float: right;"] ~ div[style^="width: 100%;"] > table {
background: #{theme["Dialog Background"]};
border: 1px solid #{theme["Dialog Border"]};
}
.watch-thread-link {
background-image: url("data:image/svg+xml,<svg viewBox='0 0 26 26' preserveAspectRatio='true' xmlns='http://www.w3.org/2000/svg'><path fill='#{theme["Post Numbers"].replace '#', '%23'}' d='M24.132,7.971c-2.203-2.205-5.916-2.098-8.25,0.235L15.5,8.588l-0.382-0.382c-2.334-2.333-6.047-2.44-8.25-0.235c-2.204,2.203-2.098,5.916,0.235,8.249l8.396,8.396l8.396-8.396C26.229,13.887,26.336,10.174,24.132,7.971z'/></svg>");
}
.deleteform::before,
.deleteform,
#qr .warning {
background: #{theme["Input Background"]};
border-color: #{theme["Input Border"]};
}
.disabledwarning,
.warning {
color: #{theme["Warnings"]};
}
#navlinks a:first-of-type {
border-bottom: 11px solid rgb(130,130,130);
}
#navlinks a:last-of-type {
border-top: 11px solid rgb(130,130,130);
}
#charCount {
color: #{(if Style.lightTheme then "rgba(0,0,0,0.7)" else "rgba(255,255,255,0.7)")};
}
.postNum a {
color: #{theme["Post Numbers"]};
}
.subject {
color: #{theme["Subjects"]} !important;
}
.dateTime,
.post-ago {
color: #{theme["Timestamps"]} !important;
}
#fs_status a,
#updater #update-status:not(.new)::after,
#showQR,
.abbr,
.boxbar,
.boxcontent,
.deleteform::before,
.pages strong,
.pln,
.reply,
.reply.highlight,
.summary,
body,
button,
span[style="left: 5px; position: absolute;"] a,
input,
textarea {
color: #{theme["Text"]};
}
#exlinks-options-content > table,
#appchanx-settings fieldset,
#selectrice {
border-bottom: 1px solid #{theme["Reply Border"]};
box-shadow: inset #{theme["Shadow Color"]} 0 0 5px;
}
.quote + .spoiler:hover,
.quote {
color: #{theme["Greentext"]};
}
.forwardlink {
border-bottom: 1px dashed #{theme["Backlinks"]};
}
.container::before {
color: #{theme["Timestamps"]};
}
.quote-shadows #menu,
.quote-shadows #post-preview,
.quote-shadows #qp .opContainer,
.quote-shadows #qp .replyContainer,
.quote-shadows .submenu {
box-shadow: 5px 5px 5px #{theme['Shadow Color']};
}
.rice {
background: #{theme["Checkbox Background"]};
border: 1px solid #{theme["Checkbox Border"]};
}
.selectrice::before {
border-left: 1px solid #{theme["Input Border"]};
}
.selectrice::after {
border-top: .45em solid #{theme["Inputs"]};
}
.bd {
background: #{theme["Buttons Background"]};
border: 1px solid #{theme["Buttons Border"]};
}
.pages a,
#header-bar a {
color: #{theme["Navigation Links"]};
}
input[type=checkbox]:checked + .rice::after {
border-color: #{theme["Inputs"]};
}
#addReply,
#dump,
.button,
.entry,
.replylink,
a {
color: #{theme["Links"]};
}
.backlink {
color: #{theme["Backlinks"]};
}
.qiQuote,
.quotelink {
color: #{theme["Quotelinks"]};
}
#addReply:hover,
#dump:hover,
.entry:hover,
.replylink:hover,
.qiQuote:hover,
.quotelink:hover,
a .name:hover,
a .postertrip:hover,
a:hover {
color: #{theme["Hovered Links"]};
}
#header-bar a:hover,
#boardTitle a:hover {
color: #{theme["Hovered Navigation Links"]};
}
#boardTitle {
color: #{theme["Board Title"]};
}
.name,
.post-author {
color: #{theme["Names"]} !important;
}
.post-tripcode,
.postertrip,
.trip {
color: #{theme["Tripcodes"]} !important;
}
a .postertrip,
a .name {
color: #{theme["Emails"]};
}
.post.reply.qphl,
.post.op.qphl {
border-color: #{theme["Backlinked Reply Outline"]};
background: #{theme["Highlighted Reply Background"]};
}
.quote-shadows .inline .post {
box-shadow: 5px 5px 5px #{theme['Shadow Color']};
}
.placeholder,
#qr input::<%= agent %>placeholder,
#qr textarea::<%= agent %>placeholder {
color: #{if Style.lightTheme then "rgba(0,0,0,0.3)" else "rgba(255,255,255,0.2)"} !important;
}
#qr input:<%= agent %>placeholder,
#qr textarea:<%= agent %>placeholder,
.placeholder {
color: #{if Style.lightTheme then "rgba(0,0,0,0.3)" else "rgba(255,255,255,0.2)"} !important;
}
#appchanx-settings fieldset,
.boxcontent dd,
.selectrice ul {
border-color: #{if Style.lightTheme then "rgba(0,0,0,0.1)" else "rgba(255,255,255,0.1)"};
}
#appchanx-settings li,
#selectrice li:not(:first-of-type) {
border-top: 1px solid #{if Style.lightTheme then "rgba(0,0,0,0.05)" else "rgba(255,255,255,0.025)"};
}
.icons-4chan-ss #navtopright .exlinksOptionsLink::after,
.icons-4chan-ss #main-menu,
.icons-4chan-ss .navLinks > a:first-of-type::after,
.icons-4chan-ss #watcher::after,
.icons-4chan-ss #globalMessage::after,
.icons-4chan-ss #boardNavDesktopFoot::after,
.icons-4chan-ss a[style="cursor: pointer; float: right;"]::after,
.icons-4chan-ss #img-controls,
.icons-4chan-ss #catalog::after,
.icons-4chan-ss #fappeTyme {
background-image: url("data:image/png;base64,#{Icons['4chan SS']}");
}
.icons-oneechan #navtopright .exlinksOptionsLink::after,
.icons-oneechan #main-menu,
.icons-oneechan .navLinks > a:first-of-type::after,
.icons-oneechan #watcher::after,
.icons-oneechan #globalMessage::after,
.icons-oneechan #boardNavDesktopFoot::after,
.icons-oneechan a[style="cursor: pointer; float: right;"]::after,
.icons-oneechan #img-controls,
.icons-oneechan #catalog::after,
.icons-oneechan #fappeTyme {
background-image: url("data:image/png;base64,#{Icons['oneechan']}");
#{unless Style.lightTheme then "
<%= filter %>: url(\"#icons-filter\");" else ""}
}
.alternate-post-colors .replyContainer:not(.hidden):nth-of-type(2n+1) .post {
background-image: <%= agent %>linear-gradient(#{if Style.lightTheme then "rgba(0,0,0,0.05), rgba(0,0,0,0.05)" else "rgba(255,255,255,0.02), rgba(255,255,255,0.02)"});
}
.color-reply-headings .boxbar,
.color-reply-headings .postInfo {
background: #{if (replyHeading = new Style.color Style.colorToHex theme["Reply Background"]) then "rgba(" + (replyHeading.shiftRGB -12, false) + ",0.8)" else "rgba(0,0,0,0.1)"};
border-bottom: 1px solid #{theme["Reply Border"]}
}
.color-file-info .file {
background: #{if (fileHeading = new Style.color Style.colorToHex theme["Reply Background"]) then "rgba(" + (fileHeading.shiftRGB -8, false) + ",0.8)" else "rgba(0,0,0,0.1)"};
border-bottom: 1px solid #{theme["Reply Border"]}
border-top: 1px solid #{theme["Reply Border"]}
}
.color-reply.headings.color-file-info {
border-top: none;
}
.op-background .op.post {
background: #{theme["Reply Background"]};
border: 1px solid #{theme["Reply Border"]};
}
.op-background .op.post:target
.op-background .op.post.highlight {
background: #{theme["Highlighted Reply Background"]};
border: 1px solid #{theme["Highlighted Reply Border"]};
}
.icon-orientation-vertical body::after {
background: #{backgroundC};
}
.icon-orientation-vertical .fourchan-ss-sidebar body::after,
.fourchan-ss-sidebar body::before {
background: none repeat scroll 0% 0% rgba(#{if background = new Style.color Style.colorToHex theme["Reply Background"] then background.shiftRGB -18}, 0.8);
}
.fourchan-ss-sidebar.sidebar-location-right body::before {
border-left: 2px solid #{backgroundC};
box-shadow:
inset 1px 0 0 #{theme["Reply Border"]},
-1px 0 0 #{theme["Reply Border"]};
}
.fourchan-ss-sidebar.sidebar-location-left body::before {
border-right: 2px solid #{backgroundC};
box-shadow:
1px 0 0 #{theme["Reply Border"]},
inset -1px 0 0 #{theme["Reply Border"]};
}
.sage-highlighting-text.sage-highlight-position-before a.useremail[href*="sage"]:last-of-type::before,
.sage-highlighting-text.sage-highlight-position-before a.useremail[href*="Sage"]:last-of-type::before,
.sage-highlighting-text.sage-highlight-position-before a.useremail[href*="SAGE"]:last-of-type::before,
.sage-highlighting-text.sage-highlight-position-after a.useremail[href*="sage"]:last-of-type::after,
.sage-highlighting-text.sage-highlight-position-after a.useremail[href*="Sage"]:last-of-type::after,
.sage-highlighting-text.sage-highlight-position-after a.useremail[href*="SAGE"]:last-of-type::after {
content: " (sage) ";
color: #{theme["Sage"]};
}
.sage-highlighting-image.sage-highlight-position-before a.useremail[href*="sage"]:last-of-type::before,
.sage-highlighting-image.sage-highlight-position-before a.useremail[href*="Sage"]:last-of-type::before,
.sage-highlighting-image.sage-highlight-position-before a.useremail[href*="SAGE"]:last-of-type::before,
.sage-highlighting-image.sage-highlight-position-after a.useremail[href*="sage"]:last-of-type::after,
.sage-highlighting-image.sage-highlight-position-after a.useremail[href*="Sage"]:last-of-type::after,
.sage-highlighting-image.sage-highlight-position-after a.useremail[href*="SAGE"]:last-of-type::after{
content: url("data:image/png;base64,<%= grunt.file.read("src/General/img/emoji/sage.png", {encoding: "base64"}) %>");
vertical-align: top;
}
.announcements-slideout #globalMessage {
background: #{theme["Dialog Background"]};
border: 1px solid #{theme["Dialog Border"]};
}
.post-form-decorations #qr {
border-color: #{theme["Buttons Border"]};
background: #{backgroundC};
}
.post-form-decorations.quote-shadows #qr {
box-shadow: 5px 5px 5px #{theme['Shadow Color']};
}
#{theme["Custom CSS"]}