da ich gerade bei Nachtarbeiten lieber einen dunklen Bildschirm bevorzuge und das slashCAM Forum in seiner Farbgebung sehr hell ist, habe ich mir mit dem Browser Add-on "Stylish" (Firefox│Chrome│Opera) ein dunkles Design gebastelt.
Vielleicht mag es der ein oder andere ja auch nutzen oder aber sogar dabei helfen, es zu optimieren. Einige Sachen sind noch nicht ausgereift. So würde ich z.B. gerne noch den Header im typischen slashCAM Orange haben wollen, aber habe das jetzt auf die Schnelle nicht hinbekommen. Vielleicht weiß jemand Rat? Auch andere Sachen könnten noch geändert werden.
Oder jemand entwirft einen ganz anderen Style - dann immer her damit! =)
Ich selbst bin kein Pro in CSS, weshalb der Code wohl auch etwas undurchdacht ist. Aber wenigstens ist es Nachts nun etwas Augenschonender.
Beste Grüße,
Clemens
EDIT:
Installationsanleitung: Browser Add-on Stylish für Firefox, Chrome oder Opera downloaden. Danach den slashCAM-Style per "Install Style" aktivieren. Fertig.
Alternativ bei den Stylish Einstellungen auf "Design erstellen" klicken. Rechts den unten aufgeführten Code einfügen, links einen passenden Namen eingeben und dann auf "Speichern" klicken. Done.
Anmerkung: Da ich den Style mit Firefox erstellt habe, kann ich nicht garantieren, dass er auch in anderen Browsern funktioniert. Das müsste von jemanden getestet werden.
P.S.: Wer auch auf anderen Seiten (Facebook, Google, etc.) seine Umwelt und Augen schonen mag, findet auf https://userstyles.org/ viele coole Layouts dafür.
Code: Alles auswählen
@-moz-document url-prefix("https://www.slashcam.de/forum/") {
/* Reset backgrounds */
span.corners-top, span.corners-bottom, span.corners-top span, span.corners-bottom span, .forabg, .forumbg, .bg1, .bg2, ul.forums,
li.row:hover, #tabs a {
background: none !important;
}
/* Background colors */
.forabg, .forumbg {
background-color: #222 !important;
}
.inner {
background-color: #888 !important;
}
.inner, .index_row, .own_block, .button, .memberlist-title, .attachbox, .strichlang, .rules, .own_block_header_grey, .own_block_header, .author, .action-bar, .pagination, .codebox {
background-color: #444 !important;
}
.topnavtrenner, .header, .post_head, .following_subjects_title {
background-color: #333 !important;
}
.leaderbanner {
background-color: #222 !important;
}
.antwort, .review {
background-color: #555 !important;
}
.rule-item {
background-color: #FFFFFF !important;
}
.headerbar {
background: linear-gradient(to bottom, #222 0%, #333 100%) !important;
}
#navigation a {
background: linear-gradient(to right, #555 0%, #666 100%) !important;
}
#navigation a:hover, #navigation #active-subsection a {
background: linear-gradient(to right, #333 0%, #444 100%) !important;
}
html, body, select, input.search, .inputbox, .pagination span a, .pagination span a:link, .pagination span a:visited,
dl.codebox {
background-color: #333 !important;
}
.navbar, .bg1, ul.forums, .panel, #tabs a {
background-color: #444 !important;
}
.bg2 {
background-color: #4f4f4f !important;
}
li.row:hover {
background-color: #555 !important;
}
blockquote {
background-color: #666 !important;
}
.pagination span a:hover, .pagination span strong {
background-color: #888 !important;
}
.pagination span strong {
background-color: #a96 !important;
}
.postlink:hover {
background-color: #ddd !important;
}
#tabs a span {
background: inherit !important;
}
/* Text colors */
html, body, .headerbar, h2, h3, .postbody, .postbody .content, #tabs .activetab a span, ul.topiclist li,
.panel li.header dd, .panel li.header dt {
color: #ddd !important;
}
.inputbox {
color: #bbb !important;
}
a:hover {
color: #b74 !important;
}
a:link, a:visited {
color: #a96 !important;
}
.postprofile, dl.details dd {
color: #aaa !important;
}
li.row strong, .postprofile strong, label, .panel, #tabs a span, dl.details dt {
color: #999 !important;
}
select, input.search, .inputbox, .pagination span a, .pagination span a:link, .pagination span a:visited {
color: #888 !important;
}
.postlink:hover, .pagination span a:hover, .pagination span strong {
color: #333 !important;
}
dl.codebox code {
color: #6a6 !important;
}
/* Border colors */
hr {
border-color: #222 #333 #333 !important;
}
blockquote {
border-color: #333 !important;
}
dl.codebox {
border-color: #363 !important;
}
select, input.search, .inputbox, .pagination span a, .pagination span a:link, .pagination span a:visited, .pagination span a:hover, .pagination span strong {
border-color: #444 !important;
}
h2, h3 {
border-bottom-color: #222 !important;
}
ul.navlinks, #cp-main h3 {
border-bottom-color: #333 !important;
}
dl.codebox dt {
border-bottom-color: #363 !important;
}
#tabs .activetab a {
border-bottom-color: #444 !important;
}
.postlink {
border-bottom-color: #a96 !important;
}
li.row {
border-top-color: #333 !important;
border-bottom-color: #222 !important;
}
.signature, ul.cplist {
border-top-color: #333 !important;
}
ul.topiclist dd, .postprofile {
border-left-color: #333 !important;
}
/* Other */
.forabg, .forumbg {
border-radius: 4px;
}
blockquote, dl.codebox {
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1) !important;
margin-right: 4px !important; /* So the shadow fits */
}
}
