This page (revision-1) was last changed on 2018-10-21 07:48 by UnknownAuthor

Only authorized users are allowed to rename pages.

Only authorized users are allowed to delete pages.

Page revision history

Version Date Modified Size Author Changes ... Change note

Page References

Incoming links Outgoing links
CSS Theme Dark...nobody
CSSThemeDark

Version management

Difference between version and

At line 1 added 677 lines
%%add-css
/* Inspired by: https://medium.com/@mwichary/dark-theme-in-a-day-3518dde2955a. Adapted for JSPWIKI, as delta on top of haddock.css. */
html {
/*red / ...
--hue: 10;
--accent-hue: 185;
*/
/*green / ...
--hue: 110;
--accent-hue: 285;
*/
/* blue / orange */
--hue: 210;
--accent-hue: 25;
--text-color-normal: hsl(var(--hue), 10%, 62%);
--text-color-light: hsl(var(--hue), 15%, 35%);
--text-color-richer: hsl(var(--hue), 50%, 72%);
--text-color-highlight: hsl(var(--accent-hue), 70%, 45%);
--link-color: hsl(var(--accent-hue), 90%, 70%);
--accent-color: hsl(var(--accent-hue), 100%, 70%);
--error-color: rgb(240, 50, 50);
--button-background: hsl(var(--hue), 63%, 43%);
--button-text-color: black;
--background: hsla(var(--hue), 20%, 12%, 0.9);
--background-sidebar: hsla(var(--hue), 20%, 28%, 0.5);
--background-light: hsla(var(--hue), 20%, 28%, 0.9);
--background-lighter: hsla(var(--hue), 20%, 32%, 0.9);
--background-dropdown: hsla(var(--hue), 20%, 20%, 0.95);
--background-dialog: hsla(var(--hue), 20%, 20%, 0.95);
--border-color: var(--background-lighter);
--context-primary: #0088cc;
--context-success: #47a447;
--context-info: #5bc0de;
--context-warning: #ed9c28;
--context-error: #d53f3a;
--color-black: #111;
--color-white: #fff;
}
::selection {
color:var(--accent-color);
background-color: var(--color-black);
}
/* --- BOOTSTRAP --- */
.panel {
background-color: var(--background-light);
border-color: var(--border-color);
}
.panel-default .panel-heading {
background-color: var(--background-lighter);
border-color: var(--border-color);
color:inherit;
}
.list-group-item {
background-color: var(--background-light);
border-color: var(--border-color);
}
.nav-tabs {
border-color: var(--border-color);
}
.nav-tabs > li > a {
color:inherit;
}
.nav-tabs > li > a:hover {
background-color: var(--background-light);
border-color: var(--border-color);
color:inherit;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active {
background:transparent;
color:var(--text-color-richer);
border-color: var(--border-color);
border-bottom-color: var(--background);
}
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
background-color: var(--background-lighter);
border-color: var(--border-color);
color:var(--text-color-richer);
}
/*.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
}*/
.nav > li > a:hover, .nav > li > a:focus {
background-color: var(--background-lighter);
border-color: var(--border-color);
color:var(--text-color-richer);
}
.btn-default,
.default {
background-color: var(--background-light);
border-color: var(--border-color);
color:var(--text-color-richer);
}
.btn:hover, .btn:focus, .btn.focus,
.btn-default:hover {
background-color: var(--background-lighter);
border-color: var(--border-color);
color:var(--text-color-richer);
}
.btn.disabled:hover {
background-color: var(--background-lighter);
border-color: var(--border-color);
}
.btn-default:active,
.btn-default:active:hover,
.btn-default.active,
.btn-default.active:hover {
background-color: var(--background-lighter);
border-color: var(--border-color);
color:var(--accent-color);
}
.dropdown-menu {
background-color: var(--background-dropdown);
border-color: var(--border-color);
}
.dropdown-header {
color:var(--text-color-richer);
}
.dropdown-menu .divider {
background-color: var(--border-color);
}
.dropdown-menu > li > a {
color:var(--text-color-normal);
}
.dropdown-menu > li > a:hover {
background-color: var(--background-lighter);
color:inherit;
}
.form-control {
background-color: var(--background-light);
border-color: var(--border-color);
}
.form-control:focus {
border-color: var(--accent-color);
}
.form-control[[disabled] {
background-color: transparent;
border-color: var(--border-color);
}
.form-frame {
border-color: var(--border-color);
}
select,
.form-group select {
background-color: var(--background-light);
border-color: var(--border-color);
color:var(--text-color-normal);
}
.modal {
background-color: var(--background-dropdown);
color:var(--text-color-normal);
}
/*pagination.less*/
.pagination {
background-color: var(--background-light);
border-color: var(--border-color);
}
.pagination a {
color:var(--link-color);
text-decoration:none;
}
.pagination .cursor,
.pagination a:hover {
background-color: var(--background-lighter);
border-color: var(--border-color);
color: var(--accent-color);
}
/* --- JSPWiki --- */
/* --- variables.less --- */
/* --- type.less --- */
hr,.hr {
border-color: var(--border-color);
}
mark, .highlight {
background-color: var(--accent-color) !important;
color:var(--text-color-highlight);
}
span.text-white, div.text-white, .bg.dark + .bg-overlay { color:var(--text-color-normal;); }
/*span.text-black, div.text-black, .bg.light + .bg-overlay { color:(var(--text-???); } */
.text-primary { color: var(--context-primary); }
.text-success { color: var(--context-success); }
.text-info { color: var(--context-info); }
.text-warning { color: var(--context-warning); }
.text-error,
.text-danger { color: var(--context-error); }
/* primary */
.panel-primary > .panel-heading,
.bg-primary {
background-color: var(--context-primary);
border-color: var(--context-primary);
color:var(--color-white);
}
.panel-primary > .panel-heading a:link,
.bg-primary a:link {
color:var(--color-black);
}
/* success */
.panel-success > .panel-heading,
.success,
.bg-success {
background-color: var(--context-success);
border-color: var(--context-success);
color:var(--color-black);
}
.panel-success > .panel-heading a:link,
.success a:link,
.bg-success a:link {
color:inherit;
text-decoration:underline;
}
/* info */
.panel-info > .panel-heading,
.info, .information,
.bg-info {
background-color: var(--context-info);
border-color: var(--context-info);
color:var(--color-black);
}
.panel-info > .panel-heading a:link,
.info a:link, .information a:link,
.bg-info a:link {
color:inherit;
text-decoration:underline;
}
/* warning */
.panel-warning > .panel-heading,
.alert-warning,
.warning,
.bg-warning {
background-color: var(--context-warning);
border-color: var(--context-warning);
color:var(--color-black);
}
.panel-warning > .panel-heading a:link,
.alert-warning a:link,
.warning a:link,
.bg-warning a:link {
color:inherit;
text-decoration:underline;
}
/* danger, error */
.panel-danger > .panel-heading,
.error,.danger,
.bg-danger {
background-color: var(--context-error);
border-color: var(--context-error);
color:var(--color-black);
}
.panel-danger > .panel-heading a:link,
.error a:link,.danger a:link,
.bg-danger a:link {
color:inherit;
text-decoration:underline;
}
span.label { color:var(--color-black); }
pre {
background-color:var(--background-light);
border-color:var(--border-color);
color:var(--text-color-richer);
}
code,
tt {
background-color:var(--background-light);
border-color:var(--border-color);
color:var(--text-color-richer);
}
a.list-group-item:hover,
.list-hover li:hover {
background-color:var(--background-lighter);
color:inherit;
}
.tree ul li::before,
.tree ul li::after {
background: var(--border-color);
}
.list-hover li:hover {
background-color:var(--background-lighter);
}
.hover {
background-color:var(--background-lighter);
}
a.slimbox-link:after,
.slimbox-btn:before,
a:visited,
a:link { color:var(--link-color); }
a.createpage {
color:var(--error-color);
}
.interwiki-raw::after,
a.interwiki[[href$="skin=raw"]::after,
.interwiki-reader::after,
a.interwiki[[href$="skin=reader"]::after,
.interwiki-edit::after,
a.interwiki[[href*="Edit.jsp?page="]::after,
.interwiki-group::after,
a.interwiki[[href*="Group.jsp?group="]::after,
a.interwiki[[href^="rss.jsp"]::after {
background-color:var(--background-lighter);
color:var(--accent-color);
}
.editsection,
.hashlink {
background-color: var(--background-light);
border-color: var(--border-color);
color:var(--link-color);
}
h2 .editsection:hover,
h3 .editsection:hover,
h4 .editsection:hover,
h2 .hashlink:hover,
h3 .hashlink:hover,
h4 .hashlink:hover {
background-color: var(--background-lighter);
border-color: var(--border-color);
color:var(--link-color);
opacity:1;
}
div.dropcaps > span.dropcaps {
color: var(--text-color-highlight);
}
blockquote,
.dialog .quote-item {
border-color:var(--text-color-highlight);
}
.page-break {
border-color: var(--border-color);
}
/* --- grid.less --- */
/* --- tables.less --- */
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
border-color: var(--border-color);
}
.wikitable > thead > tr > th,
.wikitable > tbody > tr > th,
.wikitable > tfoot > tr > th,
.wikitable > thead > tr > td,
.wikitable > tbody > tr > td,
.wikitable > tfoot > tr > td,
.wikitable tr:first-child th {
border-color: var(--border-color);
}
.table-bordered,
.table-bordered tr:first-child th,
.table-bordered tr:first-child td {
border-color: var(--border-color);
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
border-color: var(--border-color);
}
.table-hover > tbody > tr:nth-of-type(odd):hover,
.table-hover > tbody > tr:nth-child(odd):hover > td,
.table-hover > tbody > tr:nth-child(odd):hover > th,
.table-hover > tbody > tr:hover {
background-color: var(--background-lighter);
}
.table-striped > tbody > tr:nth-of-type(odd) ,
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
background-color: var(--background-light);
}
[[class*=zebra] .odd {
background-color: var(--background-light);
}
/* --- TableX.Sort.less --- */
.sortable th:hover {
background-color: var(--background-lighter);;
}
.sortable th.up:after,
.sortable th.up:hover:after {
border-bottom-color: var(--accent-color);
opacity:1;
}
.sortable th:hover:after,
.sortable th.down:after,
.sortable th.down:hover:after {
border-top-color: var(--accent-color);
opacity:1;
}
/* --- TableX.Filter.less --- */
/* --- forms.less --- */
/* --- modals.less --- */
/* --- fontjspwiki/font-jspwiki.less --- */
/* --- dropdown.less --- */
/* --- pagination.less --- */
/* --- Tips.less --- */
.tip-link,
.tip-link:hover {
color: var(--link-color);
}
/* --- Magnify.less --- */
/* --- Viewer.less --- */
/* --- Viewer.Slimbox.less --- */
/* --- Viewer.Carousel.less --- */
/* --- Template.View.less --- */
.header, .footer {
background-image: -webkit-radial-gradient(circle, var(--background-light), var(--background));
background-image: radial-gradient(circle, var(--background-light), var(--background) );
color:var(--text-color-normal);
}
a.logo { border-color: var(--border-color); }
div.admin .formcontainer {
/*.default*/
background-color: var(--background-light);
border-color: var(--border-color);
color:var(--text-color-richer);
}
.admin .formcontainer table {
border-color: var(--border-color);
/*
.table;
.table-bordered;
.table-striped;
*/
}
.admin-user-form > div#userlist .list-group-item.new-user{
background-color: var(--background-light);
border-color: var(--border-color);
color:var(--text-color-richer);
}
/* --- Template.UserBox.less --- */
.login-form {
background-color: var(--background-dialog);
border:1px solid var(--border-color);
}
.login-form hr { border-color:var(--border-color); }
/* --- Template.SearchBox.less --- */
/* --- Template.Nav.less --- */
.badge,
.header > .navigation .nav > li > a > .badge {
background-color:var(--background-lighter);
color:var(--text-color-normal);
}
.header > .navigation .nav .btn-xs .badge {
background-color: var(--background-lighter);
}
/* --- Template.Content.less --- */
body, .content {
background-color: var(--background);
color:var(--text-color-normal);
overflow-y: auto;
}
.content:after {
background: var(--background-sidebar);
}
/* --- Template.Attach.less --- */
/* --- Template.Diff.less --- */
.diffadd { background-color:var(--context-success); color:var(--color-black); }
.diffrem { background:var(--context-error); color:var(--color-black); }
/* --- Template.Search.less --- */
form#searchform2 + div .fragment {
color: var(--text-color-richer);
}
form#searchform2 + div .gb-bar {
background-color: var(--context-warning);
}
/* --- Template.Workflow.less --- */
/* --- Template.Edit.less --- */
.editform input[[type="text"]:focus,
.dialog.find input[[type="text"]:focus,
.editform textarea:focus,
.dialog.find textarea:focus {
background-color:var(--background-lighter);
border-color:var(--border-color);
color:var(--text-color-richer);
}
.ajaxpreview {
border-color:var(--border-color);
}
.edit-area ~ .ajaxpreview {
border-left-color:var(--border-color);
}
/* --- Dialog.less --- */
.dialog {
background-color: var(--background-dialog);
border-color: var(--border-color);
}
.dialog .caption {
border-color: var(--border-color);
color: var(--text-color-normal);
}
.dialog.selection .body .item:hover {
background-color: var(--background-lighter);
}
.dialog.selection .body .divider {
background-color: var(--border-color);
}
.dialog.find [[name=tbTEXTSEL] { /*same as selected text*/
color:var(--accent-color);
background-color: var(--color-black);
}
/* --- Template.Preview.less --- */
/* --- ImagePlugin.less --- */
/* --- IndexPlugin.less --- */
.index .header {
background-color:var(--background-light);
border-color:var(--border-color);
}
.index .header:hover {
background-color:var(--background-light);
}
.index .header a {
color:var(--text-color-richer);
}
.index .header a:hover {
background-color:var(--background-lighter);
}
.index > .section a {
color:var(--text-color-richer);
}
/* --- TOCPlugin.less --- */
.toc ul li:hover {
background-color:var(--background-lighter);
}
/* --- WeblogPlugin.less --- */
/* --- RecentChangesPlugin.less --- */
.recentchanges .date {
border-color:var(--border-color);
}
/* --- CommentBox.less --- */
/* --- GraphBar.less --- */
.gb-group {
background-color:var(--background-light);
border:1px solid var(--border-color);
}
/* --- Tabs.less --- */
/* --- Accordion.less --- */
/* --- Columns.less --- */
.columns.border,
.columns.border > .col:not(:last-child) {
border-color:var(--border-color);
}
.columns.hover .col:hover {
background-color: var(--background-lighter);
}
/* --- Collapsible.less --- */
.bullet, .bullet.clpse { border-left-color: var(--text-color-normal); }
.bullet.clpse:hover { border-left-color: var(--text-color-richer); }
.bullet.xpand { border-top-color: var(--text-color-normal); }
.bullet.xpand:hover { border-top-color: var(--text-color-richer); }
/* --- Category.less --- */
.category-link {
border-color:var(--border-color);
}
/* --- Flip.less --- */
/* --- Invisibles.less --- */
/* --- prettify.less --- */
.prettify pre, .prettify-nonum pre, pre.prettylines {
background-color:var(--background-light);
border-color:var(--border-color);
color:var(--text-color-richer);
}
.pln { color: #cccccc; } /* plain text */
.str { color: #99cc99; } /* string content */
.kwd { color: #ffeea6; } /* keyword */
.com { color: #8a8a80; } /* comment */
.typ { color: #bbdaff; } /* type name */
.lit { color: #FCA369; } /* literal value */
.pun { color: #cda869; } /* punctuation */
.opn { color: #ffffff; } /* lisp open bracket */
.clo { color: #ffffff; } /* lisp close bracket */
.tag { color: #78AAD6; } /* markup tag name */
.atn { color: #ffc58f; } /* markup attribute name */
.atv { color: #FFD479; } /* markup attribute value */
.dec { color: #D6ACD6; } /* declaration */
.var { color: #76D4D6; } /* variable name */
.fun { color: #d6acd6; } /* function name */
/* --- responsive-viewport.less --- */
/* --- print.less --- */
/%
[{ALLOW edit Admin}]
[{ALLOW view All}]
This page (revision-1) was last changed on 2018-10-21 07:48 by UnknownAuthorTop