Goyslop/4chan-x
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

I think that's about as simple as I can get theme.css for now.

Browse Source
This commit is contained in:
Zixaphir 2013-06-03 07:15:05 -07:00
parent 696efc3f35
commit 3efa3f2a5b
7 changed files with 89 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
builds/appchan-x.js
View File

File diff suppressed because one or more lines are too long

13
builds/appchan-x.user.js
View File

File diff suppressed because one or more lines are too long

13
builds/crx/script.js
View File

File diff suppressed because one or more lines are too long

6
src/General/Globals.coffee
View File

@ -3083,8 +3083,4 @@ textarea,
border: 1px solid #111 !important; border: 1px solid #111 !important;
background-color: #933; background-color: #933;
} }
""" """
Icons =
oneechan: '<%= grunt.file.read("src/General/img/icons/oneechan.png", {encoding: "base64"}) %>'
"4chan SS": '<%= grunt.file.read("src/General/img/icons/4chanSS.png", {encoding: "base64"}) %>'

89
src/General/css/layout.css
View File

@ -188,11 +188,18 @@ th {
border-left: 6px solid transparent; border-left: 6px solid transparent;
margin: 1.5px; margin: 1.5px;
} }
#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);
}
/* Header */ /* Header */
#header-bar { #header-bar {
z-index: 6; z-index: 6;
border-width: 1px; border-width: 1px;
padding: 0 2px; padding: 0 2px;
border-style: solid;
} }
.pagination-sticky-top .pagelist, .pagination-sticky-top .pagelist,
.pagination-sticky-bottom .pagelist, .pagination-sticky-bottom .pagelist,
@ -365,6 +372,7 @@ th {
} }
/* Pagination */ /* Pagination */
.pagelist { .pagelist {
border-style: solid;
border-width: 1px; border-width: 1px;
z-index: 6; z-index: 6;
} }
@ -412,18 +420,10 @@ th {
border: 0 none !important; border: 0 none !important;
text-align: right; text-align: right;
} }
.pagination-on-side.post-form-style-fixed.show-post-form-header.post-form-decorations .pagelist,
.pagination-on-side.post-form-style-transparent-fade.show-post-form-header.post-form-decorations .pagelist {
bottom: 23.3em;
}
.pagination-on-side.post-form-style-fixed.show-post-form-header .pagelist, .pagination-on-side.post-form-style-fixed.show-post-form-header .pagelist,
.pagination-on-side.post-form-style-transparent-fade.show-post-form-header .pagelist { .pagination-on-side.post-form-style-transparent-fade.show-post-form-header .pagelist {
bottom: 23.1em; bottom: 23.1em;
} }
.pagination-on-side.post-form-style-fixed.post-form-decorations .pagelist,
.pagination-on-side.post-form-style-transparent-fade.post-form-decorations .pagelist {
bottom: 21.8em;
}
.pagination-on-side.post-form-style-fixed .pagelist, .pagination-on-side.post-form-style-fixed .pagelist,
.pagination-on-side.post-form-style-transparent-fade .pagelist { .pagination-on-side.post-form-style-transparent-fade .pagelist {
bottom: 21.6em; bottom: 21.6em;
@ -479,6 +479,29 @@ th {
display: inline-block; display: inline-block;
margin: 0 3px; margin: 0 3px;
} }
/* Icons */
.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 #img-controls,
.icons-4chan-ss #catalog::after,
.icons-4chan-ss #fappeTyme {
background-image: url("data:image/png;base64,<%= grunt.file.read("src/General/img/icons/4chanSS.png", {encoding: "base64"}) %>");
}
.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 #img-controls,
.icons-oneechan #catalog::after,
.icons-oneechan #fappeTyme {
background-image: url("data:image/png;base64,<%= grunt.file.read("src/General/img/icons/oneechan.png", {encoding: "base64"}) %>");
}
/* Banner & Board Title */ /* Banner & Board Title */
.boardBanner { .boardBanner {
line-height: 0; line-height: 0;
@ -1071,6 +1094,26 @@ s {
.backlinks-position-lower-right .inline .container { .backlinks-position-lower-right .inline .container {
float: none; float: none;
} }
/* 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;
}
/* Code */ /* Code */
.prettyprint { .prettyprint {
<%= sizing %>: border-box; <%= sizing %>: border-box;
@ -1414,6 +1457,7 @@ input:not([type=radio]) {
margin: .1em 0 0; margin: .1em 0 0;
vertical-align: bottom; vertical-align: bottom;
padding: 0 1px; padding: 0 1px;
outline: none;
} }
.selectrice { .selectrice {
padding-right: 1.6em; padding-right: 1.6em;
@ -1638,11 +1682,7 @@ a:only-of-type > .remove {
bottom: 20.1em; bottom: 20.1em;
} }
.post-form-style-fixed.show-post-form-header #mascot img, .post-form-style-fixed.show-post-form-header #mascot img,
.post-form-style-transparent-fade.show-post-form-header #mascot img, .post-form-style-transparent-fade.show-post-form-header #mascot img {
.fourchan-ss-navigation.bottom.fixed.post-form-style-fixed.post-form-decorations #mascot img,
.fourchan-ss-navigation.index.pagination-sticky-bottom.post-form-style-fixed.post-form-decorations #mascot img,
.fourchan-ss-navigation.bottom.fixed.post-form-style-transparent-fade.post-form-decorations #mascot img,
.fourchan-ss-navigation.index.pagination-sticky-bottom.post-form-style-transparent-fade.post-form-decorations #mascot img {
bottom: 20.3em; bottom: 20.3em;
} }
.fourchan-ss-navigation.bottom.fixed.show-post-form-header.post-form-style-fixed #mascot img, .fourchan-ss-navigation.bottom.fixed.show-post-form-header.post-form-style-fixed #mascot img,
@ -1651,16 +1691,6 @@ a:only-of-type > .remove {
.fourchan-ss-navigation.index.pagination-sticky-bottom.show-post-form-header.post-form-style-transparent-fade #mascot img { .fourchan-ss-navigation.index.pagination-sticky-bottom.show-post-form-header.post-form-style-transparent-fade #mascot img {
bottom: 21.6em; bottom: 21.6em;
} }
.fourchan-ss-navigation.bottom.fixed.post-form-style-fixed.post-form-decorations.show-post-form-header #mascot img,
.fourchan-ss-navigation.index.pagination-sticky-bottom.post-form-style-fixed.post-form-decorations.show-post-form-header #mascot img,
.fourchan-ss-navigation.bottom.fixed.post-form-style-transparent-fade.post-form-decorations.show-post-form-header #mascot img,
.fourchan-ss-navigation.index.pagination-sticky-bottom.post-form-style-transparent-fade.post-form-decorations.show-post-form-header #mascot img {
bottom: 21.8em;
}
.post-form-style-fixed.post-form-decorations #mascot img,
.post-form-style-transparent-fade.post-form-decorations #mascot img {
bottom: 18.8em;
}
.mascot-position-default:not(.post-form-style-fixed):not(.post-form-style-transparent-fade) #mascot img, .mascot-position-default:not(.post-form-style-fixed):not(.post-form-style-transparent-fade) #mascot img,
.mascot-position-bottom #mascot img, .mascot-position-bottom #mascot img,
.mascot-position-default.posting-disabled #mascot img { .mascot-position-default.posting-disabled #mascot img {
@ -1754,6 +1784,7 @@ a:only-of-type > .remove {
right: 5px; right: 5px;
bottom: 5px; bottom: 5px;
left: 5px; left: 5px;
padding: 5px;
} }
.sections-list { .sections-list {
padding: 0 3px; padding: 0 3px;
@ -1770,6 +1801,9 @@ a:only-of-type > .remove {
border-color: transparent; border-color: transparent;
border-style: solid; border-style: solid;
} }
.sections-list > a.tab-selected {
border-style: solid;
}
.credits { .credits {
float: right; float: right;
} }
@ -1827,6 +1861,10 @@ article li {
bottom: 1.7em; bottom: 1.7em;
left: 0; left: 0;
} }
#mascotcontent,
#themecontent {
padding: 5px;
}
#themecontent { #themecontent {
top: 1.8em; top: 1.8em;
} }
@ -2102,6 +2140,7 @@ article li {
top: 50% !important; top: 50% !important;
left: 50%; left: 50%;
<%= agent %>transform: translate(-50%, -50%); <%= agent %>transform: translate(-50%, -50%);
padding: 5px;
} }
.icon::after { .icon::after {
display: inline-block; display: inline-block;
@ -2230,4 +2269,8 @@ article li {
#ft .fill, #ft .fill,
.clear-bug { .clear-bug {
display: none; display: none;
}
/* ExLinks */
#exlinks-options-content {
padding: 5px;
} }

65
src/General/css/theme.css
View File

@ -44,16 +44,13 @@ html {
.panel, .panel,
.section-container, .section-container,
#exlinks-options-content, #exlinks-options-content,
#mascotcontent,
#themecontent { #themecontent {
background: #{backgroundC}; background: #{backgroundC};
border: 1px solid #{theme["Reply Border"]}; border: 1px solid #{theme["Reply Border"]};
padding: 5px;
} }
.sections-list > a.tab-selected { .sections-list > a.tab-selected {
background: #{backgroundC}; background: #{backgroundC};
border-color: #{theme["Reply Border"]}; border-color: #{theme["Reply Border"]};
border-style: solid;
} }
.captcha-img img { .captcha-img img {
<%= filter %>: url("#captcha-filter"); <%= filter %>: url("#captcha-filter");
@ -74,26 +71,6 @@ html {
0 2px 4px rgba(0,0,0,.6), 0 2px 4px rgba(0,0,0,.6),
0 0 10px 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, #exlinks-options,
#appchanx-settings, #appchanx-settings,
#qrtab, #qrtab,
@ -149,7 +126,6 @@ textarea.field:focus {
background: #{theme["Focused Input Background"]}; background: #{theme["Focused Input Background"]};
border-color: #{theme["Focused Input Border"]}; border-color: #{theme["Focused Input Border"]};
color: #{theme["Inputs"]}; color: #{theme["Inputs"]};
outline: none;
} }
.has-file #qr-filename-container:active #qr-extras-container, .has-file #qr-filename-container:active #qr-extras-container,
.has-file #qr-filename-container:focus #qr-extras-container { .has-file #qr-filename-container:focus #qr-extras-container {
@ -176,7 +152,6 @@ textarea.field:focus {
#header-bar, #header-bar,
.pagelist { .pagelist {
background: #{theme["Navigation Background"]}; background: #{theme["Navigation Background"]};
border-style: solid;
border-color: #{theme["Navigation Border"]}; border-color: #{theme["Navigation Border"]};
} }
#doc, #doc,
@ -185,7 +160,6 @@ textarea.field:focus {
border: 1px solid #{theme["Thread Wrapper Border"]}; border: 1px solid #{theme["Thread Wrapper Border"]};
} }
#boardNavDesktopFoot, #boardNavDesktopFoot,
#mascotConf,
#mascot_hide, #mascot_hide,
#menu, #menu,
#selectrice, #selectrice,
@ -210,12 +184,6 @@ textarea.field:focus {
.warning { .warning {
color: #{theme["Warnings"]}; 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 { #charCount {
color: #{(if Style.lightTheme then "rgba(0,0,0,0.7)" else "rgba(255,255,255,0.7)")}; color: #{(if Style.lightTheme then "rgba(0,0,0,0.7)" else "rgba(255,255,255,0.7)")};
} }
@ -365,29 +333,16 @@ a .name {
#selectrice li:not(:first-of-type) { #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)"}; 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, #navtopright .exlinksOptionsLink::after,
.icons-4chan-ss #main-menu, #main-menu,
.icons-4chan-ss .navLinks > a:first-of-type::after, .navLinks > a:first-of-type::after,
.icons-4chan-ss #watcher::after, #watcher::after,
.icons-4chan-ss #globalMessage::after, #globalMessage::after,
.icons-4chan-ss #boardNavDesktopFoot::after, #boardNavDesktopFoot::after,
.icons-4chan-ss #img-controls, #img-controls,
.icons-4chan-ss #catalog::after, #catalog::after,
.icons-4chan-ss #fappeTyme { #fappeTyme {
background-image: url("data:image/png;base64,#{Icons['4chan SS']}"); #{unless Style.lightTheme then "<%= filter %>: url(\"#icons-filter\");" else ""}
}
.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 #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 { .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)"}); 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)"});

3
src/Theming/Mascots.coffee
View File

@ -102,9 +102,6 @@ MascotTools =
id: "mascotConf" id: "mascotConf"
className: "reply dialog" className: "reply dialog"
innerHTML: " innerHTML: "
<div id=mascotbar>
</div>
<hr>
<div id=mascotcontent> <div id=mascotcontent>
<center> <center>
PROTIP: Shift-Click the Mascot Image field to upload your own images! PROTIP: Shift-Click the Mascot Image field to upload your own images!