| %%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}] |