EH22/dokuwiki-template-sprintdoc-modified
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

WIP style adjustments to match eh22 styleguide

Browse source
This commit is contained in:
kritzl 2025-02-15 03:32:26 +01:00
commit 9402a254c6
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
56 changed files with 966 additions and 232 deletions
Download patch file Download diff file Expand all files Collapse all files

21
css/area_content.less
View file

@ -4,23 +4,13 @@
.content .row {
> .col-xs-12 {
box-shadow: @box-shadow;
background-color: var(--color-background);
#dokuwiki__content {
position: relative;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: @page-header_height;
box-sizing: border-box;
width: 100%;
background-color: @ini_background_page_header;
border-bottom: 1px solid @ini_border_light;
}
.page-content {
padding-top: @page-header_height;
@ -31,6 +21,11 @@
}
}
}
@media @screen_min-md {
> .col-xs-12 {
border-left: dashed 0.25em var(--color-shade-4);
}
}
}
.main-content > .level2,

14
css/area_footer.less
View file

@ -7,10 +7,10 @@
@media screen {
.page-footer {
min-height: @page-header_height;
background-color: @ini_background_page_header;
border-top: 1px solid @ini_border_light;
background-color: var(--color-background);
border-top: 1px solid var(--color-shade-4);
border-radius: 0 0 @fix_border-radius @fix_border-radius; // @ini_default_border_radius vs. @fix_border-radius
color: @ini_background_page_footer;
color: var(--color-shade-4);
font-size: @font-size-default;
text-align: right;
padding: @margin-small @margin-default;
@ -35,20 +35,16 @@
.main-footer {
position: relative;
box-sizing: border-box;
background-color: @ini_background_site;
background-color: var(--color-background);
margin-top: 5px; // for box-shadow of content
text-align: center;
}
p {
color: @ini_text_webframe;
color: var(--color-shade-4);
font-size: @font-size-default;
margin: 0;
}
a {
color: @ini_nav_menu_color;
}
}
}

9
css/area_forms.less
View file

@ -59,8 +59,8 @@ meter,
progress {
font: inherit;
font-weight: normal;
color: #333;
background-color: #fff;
color: var(--color-foreground);
background-color: var(--color-background);
line-height: normal;
margin: 0;
vertical-align: middle;
@ -90,8 +90,7 @@ textarea,
select,
keygen {
min-height: @formfield_min-height;
border: 1px solid @ini_border;
box-shadow: inset 0 0 1px #eee;
border: 1px solid var(--color-shade-4);
border-radius: @fix_border-radius;
padding-left: .3rem;
padding-right: .3rem;
@ -118,7 +117,7 @@ select:active,
select:focus,
keygen:active,
keygen:focus {
border-color: #999;
border-color: var(--color-shade-4);
}
input[type="file"] {

19
css/area_header.less
View file

@ -13,20 +13,19 @@
@media @screen_min-md {
.logo {
padding: 1rem 0 .3rem;
text-align: center;
img {
height: 4.6rem;
height: 200px;
width: auto;
border-style: solid;
border-color: transparent;
border-width: 2px 0;
transition: transform 200ms ease-in-out;
}
a:hover,
a:focus,
a:active {
img {
border-width: 0;
transform: scale(1.05);
}
}
}
@ -34,7 +33,13 @@
@media @screen_max-md {
.logo {
display: table-cell;
//display: table-cell;
text-align: center;
width: 100%;
img {
max-height: 200px;
}
.mobile-only {
margin: .8rem 1rem .6rem 0;
@ -85,7 +90,7 @@
/* + + + wiki title + + + */
p.title {
background-color: @ini_background_site;
background-color: var(--color-background);
opacity: @header-font-opacity;
color: @ini_text_webframe;
line-height: @line-height-default;

2
css/area_main-content.less
View file

@ -6,7 +6,7 @@
div[class^="level"] {
p a.media {
img {
border: 1px dotted @ini_background_site;
border: 1px dotted var(--color-background);
}
&:hover,

143
css/area_main-sidebar-nav.less
View file

@ -19,6 +19,10 @@
}
nav {
display: flex;
flex-direction: column;
gap: 0.75rem;
&.nav-main {
margin-bottom: @nav-margin;
}
@ -59,6 +63,7 @@
/* + + + + + active + + + + + */
span.curid {
font-weight: bold;
}
@ -78,26 +83,32 @@
}
/* + + + the wrapper around the toggle to reserve space + + + */
div.nav {
min-height: @icon-size + @margin-small;
border: 1px solid transparent;
background-color: var(--color-background);
border-radius: 0.5rem;
// the toggle element
a {
border-radius: 0.5rem;
background-color: var(--color-shade-1);
transition: background-color 150ms;
color: var(--color-foreground);
font-size: 1.2em;
border: solid 0.1em var(--color-shade-1);
transition-property: filter, border-color;
transition-duration: 200ms;
transition-timing-function: ease-out;
cursor: pointer;
display: table;
width: 100%;
min-height: @icon-size + @margin-small;
opacity: 1;
border: 1px solid transparent;
border-radius: @fix_border-radius;
color: @ini_nav_menu_color;
font-size: @font-size-head6;
font-weight: normal;
margin: -1px 0 @very-small-spacing;
padding-bottom: .4rem;
padding-top: .4rem;
transition: @transition color, @transition background-color, @transition border-color;
padding: 0.4rem 0.1rem;
span {
display: inline-block;
@ -105,19 +116,51 @@
color: inherit;
}
&:hover,
&:focus,
&:active {
position: relative; // always show label, even with collapsed sidebar
width: 100%;
background-color: @ini_nav_menu_hover_bg;
border-color: @ini_nav_menu_hover_color;
color: @ini_nav_menu_hover_color;
text-decoration: none;
/* + + + submenu entry is active + + + */
/* + + + toggle: open + + + */
&.is-active, &.is-open {
background-color: var(--color-shade-2);
border-color: var(--color-shade-4);
color: var(--color-foreground);
span.ico {
&:after {
background-color: @ini_nav_menu_hover_color;
background-color: currentColor;
}
strong {
border-color: currentColor;
}
svg {
path {
fill: currentColor;
}
}
}
}
}
&:hover,
&:focus-within {
position: relative; // always show label, even with collapsed sidebar
z-index: 100;
a {
width: 100%;
background-color: transparent;
border: solid 0.1em var(--color-white);
text-decoration: none;
color: var(--color-white);
--local-primary: var(--color-primary);
filter: @dropshadow;
transition: @neonflicker;
span.ico {
&:after {
background-color: currentColor;
}
strong {
@ -126,63 +169,12 @@
svg {
path {
fill: @ini_nav_menu_hover_color;
fill: currentColor;
}
}
}
}
/* + + + submenu entry is active + + + */
&.is-active {
font-weight: bold;
}
/* + + + toggle: open + + + */
&.is-open {
background-color: @ini_nav_menu_hover_color;
border-color: @ini_nav_menu_hover_color;
color: @ini_nav_menu_hover_bg;
span.ico {
&:after {
background-color: @ini_nav_menu_hover_bg;
}
strong {
border-color: @ini_nav_menu_hover_bg;
}
svg {
path {
fill: @ini_nav_menu_hover_bg;
}
}
}
&:hover,
&:focus,
&:active {
background-color: @ini_nav_menu_hover_bg;
border-color: @ini_nav_menu_hover_color;
color: @ini_nav_menu_hover_color;
span.ico {
&:after {
background-color: @ini_nav_menu_hover_color;
}
strong {
border-color: inherit;
}
svg {
path {
fill: @ini_nav_menu_hover_color;
}
}
}
}
}
}
span.ico {
@ -205,7 +197,7 @@
bottom: auto;
height: @border-height;
width: 1px;
background-color: @ini_nav_menu_color;
background-color: currentColor;
margin-top: -(@border-height / 2);
// wordbreak too late in IE 10
@ -222,7 +214,7 @@
display: inline-block;
width: @icon-size * 0.98;
height: @icon-size * 0.98;
border: 2px solid fade(@ini_nav_menu_color, 80%);
border: 2px solid currentColor;
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
color: inherit;
@ -240,7 +232,7 @@
height: @icon-size;
path {
fill: @ini_nav_menu_color;
fill: currentColor;
transition: @transition all;
}
}
@ -254,6 +246,7 @@
}
/* + + + + + the panel (hidden by default) + + + + + */
div.nav-panel {
display: none;
margin-top: .5rem;
@ -328,7 +321,7 @@
min-width: 45%;
max-width: 90%;
height: auto;
background: @ini_background_site;
background: var(--color-background);
> nav {
position: relative;

2
css/area_main-sidebar-tabs.less
View file

@ -21,7 +21,7 @@
border-top-left-radius: @fix_border-radius;
&.active {
border-bottom: 1px solid @ini_background_site;
border-bottom: 1px solid var(--color-background);
font-weight: bold;
}
}

12
css/area_nav-breadcrumb.less
View file

@ -6,23 +6,15 @@
position: relative;
min-height: @page-header_height;
box-sizing: border-box;
background-color: @ini_background;
border-bottom: 1px solid @ini_border_light;
background-color: var(--color-background);
border-bottom: 1px solid var(--color-shade-4);
padding: 1rem 1.8rem .2rem;
@media @screen_max-md {
background-color: @ini_background_page_header;
}
@media @screen_max-xs {
padding-left: @margin-small;
padding-right: .75rem;
}
@media @screen_xs-lg {
background-color: @ini_background;
}
> p {
font-size: @font-size-small;
margin: 0;

22
css/area_nav-metabox.less
View file

@ -36,7 +36,7 @@
top: 0;
ul.meta-tabs > li > a {
border-top-color: @ini_background_site;
border-top-color: var(--color-background);
border-bottom-color: @noopentasks-border;
border-radius: 0 0 @ini_default_border_radius @ini_default_border_radius;
@ -118,9 +118,9 @@
transition: @transition background-color, @transition border-color, @transition color;
@media @screen_min-md {
background-color: @ini_background_site;
background-color: var(--color-background);
border: 1px solid @noopentasks-border;
border-bottom-color: @ini_background_site;
border-bottom-color: var(--color-background);
border-radius: @ini_default_border_radius @ini_default_border_radius 0 0; // @ini_default_border_radius vs. @fix_border-radius
color: @ini_nav_menu_color;
margin-left: 4px;
@ -128,7 +128,7 @@
}
@media @screen_max-md {
background-color: @ini_background;
background-color: var(--color-background);
top: 0;
border: 1px solid @ini_existing;
color: @ini_existing;
@ -155,15 +155,15 @@
text-decoration: none;
@media @screen_min-md {
background-color: @ini_background;
background-color: var(--color-background);
border-color: @ini_existing;
color: @ini_existing;
}
@media @screen_max-md {
background-color: @ini_existing;
border-color: @ini_background;
color: @ini_background;
border-color: var(--color-background);
color: var(--color-background);
}
}
}
@ -171,16 +171,16 @@
&.active {
> a {
cursor: default;
background-color: @ini_background;
background-color: var(--color-background);
border-color: @ini_existing;
border-bottom-color: @ini_background;
border-bottom-color: var(--color-background);
color: @ini_existing;
@media @screen_max-md {
background-color: @ini_existing;
border-bottom-color: @ini_existing;
border-radius: 0;
color: @ini_background;
color: var(--color-background);
}
}
}
@ -202,7 +202,7 @@
right: 0;
display: none;
width: 100%;
background-color: @ini_background;
background-color: var(--color-background);
border: 1px solid @ini_existing;
@media @screen_min-xs {

6
css/area_nav-pagetools.less
View file

@ -102,7 +102,7 @@ nav#dokuwiki__pagetools {
&:focus {
box-shadow: @box-shadow;
background-image: none;
background-color: @ini_background;
background-color: var(--color-background);
color: @ini_existing;
span {
@ -151,7 +151,7 @@ nav#dokuwiki__pagetools {
&:hover {
ul {
box-shadow: @box-shadow; // @box-shadow-offset;
background-color: @ini_background;
background-color: var(--color-background);
border-color: @wikiicons-border;
li {
@ -176,7 +176,7 @@ nav#dokuwiki__pagetools {
svg {
background-color: @ini_existing;
border-color: @ini_existing;
fill: @ini_background;
fill: var(--color-background);
}
}

6
css/area_nav-usertools.less
View file

@ -76,7 +76,7 @@
&.user {
position: relative;
display: table-cell;
background-color: @ini_background_site;
background-color: var(--color-background);
border: solid 1px @wikiicons-border;
border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
color: @ini_text_webframe;
@ -301,7 +301,7 @@
overflow: hidden;
li.user {
color: @ini_background_site;
color: var(--color-background);
bdi {
position: absolute;
@ -311,7 +311,7 @@
&:before {
transition: @transition background-color;
background-color: @ini_background_site;
background-color: var(--color-background);
color: @ini_nav_menu_color;
text-indent: 0;
}

8
css/area_recent.less
View file

@ -67,8 +67,8 @@
.diffnav {
a {
background-color: @ini_background_site;
border: solid 1px @ini_background_site;
background-color: var(--color-background);
border: solid 1px var(--color-background);
border-radius: @ini_default_border_radius;
color: @ini_nav_menu_color;
transition: @transition background-color, @transition color, @transition border-color;
@ -84,7 +84,7 @@
&:active {
background-color: @ini_nav_menu_color;
border: solid 1px @ini_nav_menu_color;
color: @ini_background_site;
color: var(--color-background);
&::before {
background-color: inherit;
@ -110,7 +110,7 @@
}
th {
background-color: @ini_background;
background-color: var(--color-background);
color: @ini_text;
padding-top: 10px;
padding-bottom: 10px;

12
css/area_tabs.less
View file

@ -8,14 +8,22 @@
li:not([class~="active"]) {
strong,
a {
color: @ini_text_neu;
transition: @transition background-color, @transition color;
}
a {
background-color: var(--color-shade-2);
color: var(--color-accent-1);
}
strong {
background-color: var(--color-shade-3);
color: inherit;
}
a:hover,
a:focus,
a:active {
color: @ini_text;
color: var(--color-accent-3);
}
}
}

283
css/base.less
View file

@ -5,10 +5,10 @@
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* global vars */
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
@font_family_screen: arial, sans-serif;
@font_family_print: "Times New Roman", serif;
@font_family_screen: "Athiti", ui-sans, sans-serif;
@font_family_print: "Athiti", ui-sans, sans-serif;
@nav_direct_background: @ini_background;
@nav_direct_background: var(--color-background);
@nav_direct_color: @ini_existing;
@background_darker: rgba(230,230,230, .2);
@ -36,7 +36,7 @@
@box-shadow-bottom: 0 .1em .5em rgba(153,153,153,.5); // qc-wrapper (breadcrumb), struct inline-editor
/* + + + for programmers customizing + + + */
@fix_border-radius: 3px; // inputs, editbox (textarea), buttons, content, code, quicksearch, msg
@fix_border-radius: 0.5rem; // inputs, editbox (textarea), buttons, content, code, quicksearch, msg
@toggle-showsidebar_width: 3.47rem; // shown sidebar after toggle
@ -66,7 +66,7 @@
/* edit mode */
@highlight-odd-ini_text: fade(@ini_background, 95%);
@highlight-even-ini_text: fade(@ini_text, 5%);
@color-editBox: #252525; // editmode for tables, revision states
@color-editBox: var(--color-foreground); // editmode for tables, revision states
//@nolinkedicon-ini_background: fade(@ini_background_site, 10%);
//@opacity-ini_nav_menu_color: fade(@ini_nav_menu_color, 40%);
@ -170,6 +170,100 @@
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* fonts */
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
@font-face {
font-family: "Athiti";
font-weight: 700;
src: url("fonts/athiti/Athiti-Bold.woff2") format("woff2");
}
@font-face {
font-family: "Athiti";
font-weight: 600;
src: url("fonts/athiti/Athiti-SemiBold.woff2") format("woff2");
}
@font-face {
font-family: "Athiti";
font-weight: 500;
src: url("fonts/athiti/Athiti-Medium.woff2") format("woff2");
}
@font-face {
font-family: "Athiti";
font-weight: 400;
src: url("fonts/athiti/Athiti-Regular.woff2") format("woff2");
}
@font-face {
font-family: "Athiti";
font-weight: 300;
src: url("fonts/athiti/Athiti-Light.woff2") format("woff2");
}
@font-face {
font-family: "Athiti";
font-weight: 200;
src: url("fonts/athiti/Athiti-ExtraLight.woff2") format("woff2");
}
@font-face {
font-family: "Departure Mono";
src: url("fonts/departuremono/DepartureMono-Regular.woff2") format("woff2");
}
@font-face {
font-family: "Argon Glow";
font-weight: 100;
src: url("fonts/argonglow/ArgonGlow-Thin.woff2") format("woff2");
}
@font-face {
font-family: "Argon Glow";
font-weight: 200;
src: url("fonts/argonglow/ArgonGlow-ExtraLight.woff2") format("woff2");
}
@font-face {
font-family: "Argon Glow";
font-weight: 300;
src: url("fonts/argonglow/ArgonGlow-Light.woff2") format("woff2");
}
@font-face {
font-family: "Argon Glow";
font-weight: 400;
src: url("fonts/argonglow/ArgonGlow-Regular.woff2") format("woff2");
}
@font-face {
font-family: "Argon Glow";
font-weight: 500;
src: url("fonts/argonglow/ArgonGlow-Medium.woff2") format("woff2");
}
@font-face {
font-family: "Argon Glow";
font-weight: 600;
src: url("fonts/argonglow/ArgonGlow-SemiBold.woff2") format("woff2");
}
@font-face {
font-family: "Argon Glow";
font-weight: 700;
src: url("fonts/argonglow/ArgonGlow-Bold.woff2") format("woff2");
}
@font-face {
font-family: "Argon Glow";
src: url("fonts/argonglow/ArgonGlow-VariableVF.woff2") format("woff2");
font-weight: 100 900;
}
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* all media */
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
@ -288,11 +382,186 @@ nav > ul {
}
}
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* variables */
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
@dropshadow: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--local-primary)) drop-shadow(0 0 0.25em var(--local-primary));
@neonflicker: filter 150ms cubic-bezier(0,1.7,1,-0.3) 50ms,
border-color 150ms cubic-bezier(0,1.7,1,-0.3) 50ms;
:root {
--color-neutral-50: #F2F0F5;
--color-neutral-100: #D1C6E0;
--color-neutral-200: #B2A0CB;
--color-neutral-300: #957EB5;
--color-neutral-400: #7A60A0;
--color-neutral-500: #61468B;
--color-neutral-600: #4B3176;
--color-neutral-700: #371F60;
--color-neutral-800: #26114B;
--color-neutral-900: #180736;
--color-neutral-950: #0C011F;
--color-argon-50: #E1ABC9;
--color-argon-100: #DA87B5;
--color-argon-200: #D464A1;
--color-argon-300: #CD448F;
--color-argon-400: #C6257D;
--color-argon-500: #B0166F;
--color-argon-600: #9A0A61;
--color-argon-700: #830755;
--color-argon-800: #6D0449;
--color-argon-900: #56023C;
--color-argon-950: #3F012D;
--color-krypton-50: #B2D9EA;
--color-krypton-100: #8CC9E4;
--color-krypton-200: #69BADE;
--color-krypton-300: #4BADD8;
--color-krypton-400: #2493C2;
--color-krypton-500: #167FAC;
--color-krypton-600: #0A6C96;
--color-krypton-700: #075C81;
--color-krypton-800: #044C6B;
--color-krypton-900: #023C55;
--color-krypton-950: #012C3F;
--color-green-50: #C0F49A;
--color-green-100: #A7E57A;
--color-green-200: #8FD75D;
--color-green-300: #7AC843;
--color-green-400: #66B92D;
--color-green-500: #54AA18;
--color-green-600: #47990F;
--color-green-700: #397E0A;
--color-green-800: #2B6206;
--color-green-900: #1F4703;
--color-green-950: #122B01;
--color-red-50: #E6AFAF;
--color-red-100: #DD9090;
--color-red-200: #D57272;
--color-red-300: #CC5757;
--color-red-400: #C33D3D;
--color-red-500: #BB2626;
--color-red-600: #B21010;
--color-red-700: #950808;
--color-red-800: #780404;
--color-red-900: #5C0202;
--color-red-950: #3F0101;
--color-white: #FFFFFF;
--color-dark-foreground: var(--color-neutral-50);
--color-dark-background: var(--color-neutral-950);
--color-dark-shade-1: var(--color-neutral-900);
--color-dark-shade-2: var(--color-neutral-800);
--color-dark-shade-3: var(--color-neutral-700);
--color-dark-shade-4: var(--color-neutral-600);
--color-dark-primary: var(--color-argon-400);
--color-dark-secondary: var(--color-krypton-300);
--color-dark-error: var(--color-red-500);
--color-dark-success: var(--color-green-500);
--color-dark-accent-1: #60a5f9;
--color-dark-accent-2: #d381f7;
--color-dark-accent-3: #ff7975;
--color-light-foreground: var(--color-neutral-950);
--color-light-background: var(--color-neutral-50);
--color-light-shade-1: var(--color-neutral-100);
--color-light-shade-2: var(--color-neutral-200);
--color-light-shade-3: var(--color-neutral-300);
--color-light-shade-4: var(--color-neutral-400);
--color-light-primary: var(--color-argon-600);
--color-light-secondary: var(--color-krypton-500);
--color-light-error: var(--color-red-600);
--color-light-success: var(--color-green-600);
--color-light-accent-1: #303EC0;
--color-light-accent-2: #6c366c;
--color-light-accent-3: #932f0a;
--color-cmyk-primary: var(--color-dark-primary);
--color-cmyk-secondary: var(--color-dark-secondary);
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;
--text-5xl: 3rem;
--container-3xs: 16rem;
--container-2xs: 18rem;
--container-xs: 20rem;
--container-sm: 24rem;
--container-md: 28rem;
--container-lg: 32rem;
--container-xl: 36rem;
--container-2xl: 42rem;
--container-3xl: 48rem;
--container-4xl: 56rem;
--container-5xl: 64rem;
--container-6xl: 72rem;
--container-7xl: 80rem;
}
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* screen only */
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
@media screen {
.dark {
--color-foreground: var(--color-dark-foreground);
--color-background: var(--color-dark-background);
--color-shade-1: var(--color-dark-shade-1);
--color-shade-2: var(--color-dark-shade-2);
--color-shade-3: var(--color-dark-shade-3);
--color-shade-4: var(--color-dark-shade-4);
--color-primary: var(--color-dark-primary);
--color-secondary: var(--color-dark-secondary);
--color-error: var(--color-dark-error);
--color-success: var(--color-dark-success);
--color-accent-1: var(--color-dark-accent-1);
--color-accent-2: var(--color-dark-accent-2);
--color-accent-3: var(--color-dark-accent-3);
}
.light {
--color-foreground: var(--color-light-foreground);
--color-background: var(--color-light-background);
--color-shade-1: var(--color-light-shade-1);
--color-shade-2: var(--color-light-shade-2);
--color-shade-3: var(--color-light-shade-3);
--color-shade-4: var(--color-light-shade-4);
--color-primary: var(--color-light-primary);
--color-secondary: var(--color-light-secondary);
--color-error: var(--color-light-error);
--color-success: var(--color-light-success);
--color-accent-1: var(--color-light-accent-1);
--color-accent-2: var(--color-light-accent-2);
--color-accent-3: var(--color-light-accent-3);
}
html,
html.light {
.light();
}
html.dark {
.dark();
}
@media (prefers-color-scheme: dark) {
html {
.dark();
}
}
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
@ -351,7 +620,7 @@ nav > ul {
kbd,
pre,
samp {
font-family: monospace, monospace;
font-family: "Departure Mono", ui-monospace, monospace;
font-size: 1em;
}
@ -420,7 +689,7 @@ nav > ul {
html, body {
font-family: @font_family_screen;
color: @ini_text;
color: var(--color-foreground);
}
}

39
css/base_design.less
View file

@ -5,7 +5,7 @@
html, body {
background-color: @ini_background_site;
background-color: var(--color-background);
}
/* highlight selected tool */
@ -26,7 +26,11 @@ html, body {
.page ol li,
.page ul li,
.aside ul li {
color: @ini_text;
color: var(--color-foreground);
.li {
color: var(--color-foreground);
}
}
.pageId {
@ -41,7 +45,7 @@ html, body {
font-size: @font-size-small;
border: solid @ini_background_alt;
border-width: 1px 1px 0;
background-color: @ini_background_site;
background-color: var(--color-background);
color: @ini_text_alt;
padding: .1em .35em;
border-top-left-radius: 2px;
@ -55,7 +59,7 @@ html, body {
clear: both;
overflow: hidden;
word-wrap: break-word;
background: @ini_background;
background: var(--color-background);
color: inherit;
padding: @page_padding-top @margin-default @margin-default;
@ -374,16 +378,11 @@ ol ol ol ol ol {
.dokuwiki {
table.inline tr:hover {
th {
background-color: fade(@ini_background_alt, 50%);
background-color: var(--color-shade-3);
}
td {
background-color: fade(@ini_background_alt, 80%);
color: @ini_text_alt;
*:not(button,a) {
color: @ini_text_alt;
}
background-color: var(--color-shade-2);
}
}
}
@ -392,7 +391,7 @@ table {
border-collapse: collapse;
empty-cells: show;
border-spacing: 0;
border: 1px solid @ini_border;
border: 1px solid var(--color-shade-4);
font-size: @font-size-default;
line-height: 140%;
}
@ -411,13 +410,13 @@ td {
padding: .3em .5em;
margin: 0;
vertical-align: top;
border: 1px solid @ini_border;
border: 1px solid var(--color-shade-4);
}
th {
font-weight: bold;
background-color: @ini_background_alt;
color: @ini_text_alt;
background-color: var(--color-shade-1);
color: var(--color-foreground);
text-align: left;
a {
@ -470,7 +469,7 @@ button img {
hr {
border-top: solid @ini_border;
border-bottom: solid @ini_background_site;
border-bottom: solid var(--color-background);
border-width: 1px 0;
height: 0;
text-align: center;
@ -498,14 +497,13 @@ pre,
code,
samp,
kbd {
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Nimbus Mono L", Monaco, "Courier New", monospace;
font-family: "Departure Mono", ui-monospace, monospace;
/* same font stack should be used for ".dokuwiki table.diff td" in _diff.css */
font-size: @font-size-default;
direction: ltr;
text-align: left;
background-color: @code-background;
color: @noopentasks-color;
box-shadow: inset 0 0 .3em @noopentasks-border;
background-color: var(--color-shade-1);
color: var(--color-foreground);
border-radius: @fix_border-radius;
padding-left: @small-spacing;
padding-right: @small-spacing;
@ -537,7 +535,6 @@ kbd {
pre {
overflow: auto;
word-wrap: normal;
border: 1px solid @noopentasks-border;
font-size: @font-size-default;
line-height: 140%;
padding: .7em 1em;

22
css/plugins/configmanager.less
View file

@ -9,9 +9,10 @@
min-width: 100%;
overflow-x: auto;
box-sizing: border-box;
background-color: @background_darker;
background-color: var(--color-background);
margin-left: 0;
margin-right: 0;
color: var(--color-foreground)
}
.selectiondefault {
@ -20,11 +21,24 @@
}
tr {
a {
color: var(--color-shade-4);
}
.input {
background-color: transparent;
color: inherit;
}
input, select, textarea {
background-color: var(--color-background);
color: var(--color-foreground);
}
select.edit {
padding: 0 0.3em;
}
&:hover {
td {
color: inherit;
@ -36,13 +50,17 @@
.input {
background-color: transparent;
}
input, select, textarea {
background-color: var(--color-shade-1);
}
}
td.label {
padding: .8em 0 1.2em 1em;
span.outkey {
background-color: @ini_background;
background-color: var(--color-background);
color: inherit;
font-size: (@font-size-small - .06);
font-weight: bold;

4
css/plugins/data.less
View file

@ -23,7 +23,7 @@
button {
min-height: 1rem;
height: 1.8em;
background-color: @ini_background;
background-color: var(--color-background);
border-top: solid 1px @ini_button_background;
border-color: @ini_border;
border-radius: 0 0 @fix_border-radius @fix_border-radius;
@ -40,7 +40,7 @@
&:active {
background-color: @ini_existing;
border-color: @ini_existing;
color: @ini_background;
color: var(--color-background);
}
}
}

4
css/plugins/do_tasks.less
View file

@ -53,7 +53,7 @@
.noopentasks {
span {
background-color: @ini_background_site;
background-color: var(--color-background);
border-color: @noopentasks-border;
color: @ini_text_webframe;
}
@ -86,7 +86,7 @@
}
table.inline {
background-color: #FFF;
background-color: var(--color-background);
margin-top: .5rem;
@media @screen_max-sm {

16
css/plugins/edit.less
View file

@ -9,12 +9,12 @@
clear: right;
background: repeating-linear-gradient(
-45deg,
@highlight-odd-ini_text,
@highlight-odd-ini_text 10px,
@highlight-even-ini_text 10px,
@highlight-even-ini_text 20px,
var(--color-shade-1),
var(--color-shade-1) 10px,
var(--color-background) 10px,
var(--color-background) 20px,
);
border-color: @ini_background_page_header;
border-color: var(--color-background);
}
// "section edit button" and "editbutton_table edit button"
@ -26,8 +26,10 @@
}
div.editBox {
background-color: #FFF;
border: solid 2px #FFF;
background-color: var(--color-background);
border: solid 2px var(--color-shade-4);
border-radius: @fix_border-radius;
padding: 0.5rem;
.editButtons {
display: inline-block;

4
css/plugins/edittable.less
View file

@ -13,7 +13,7 @@
button,
input.button {
min-height: 1rem;
background-color: @ini_background;
background-color: var(--color-background);
border-top: solid 1px @ini_button_background;
border-color: @ini_border;
border-radius: 0 0 @fix_border-radius @fix_border-radius;
@ -28,7 +28,7 @@
&:active {
background-color: @ini_existing;
border-color: @ini_existing;
color: @ini_background;
color: var(--color-background);
}
}
}

2
css/plugins/magic-matcher.less
View file

@ -50,7 +50,7 @@
min-height: @height-context-bar;
box-sizing: border-box;
box-shadow: @box-shadow;
background-color: @ini_background;
background-color: var(--color-background);
border-radius: 0 0 @ini_default_border_radius @ini_default_border_radius;
font-size: @font-size-default;
padding: .8em 1em .5em;

26
css/plugins/mediamanager.less
View file

@ -23,6 +23,32 @@
margin-left: 0;
}
}
.panelHeader {
background-color: var(--color-shade-2);
}
.filelist .panelContent ul li{
background-color: var(--color-shade-2);
color: var(--color-foreground);
&:hover {
background-color: var(--color-shade-4);
border: none;
}
}
.file dl {
dt{
background-color: var(--color-shade-2);
padding: 0.2em;
}
dd{
background-color: var(--color-shade-1);
padding: 0.2em;
}
}
}
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */

2
css/plugins/struct.less
View file

@ -69,7 +69,7 @@
background-color: @ini_existing;
background-image: url("svg.php?svg=file-export.svg&f=background");
border-color: @ini_existing;
//color: @ini_background;
//color: var(--color-background);
text-decoration: none;
}
}

4
css/plugins/tabinclude.less
View file

@ -32,7 +32,7 @@ div#dwpl-ti-container {
&.selected {
position: relative;
background-color: @ini_background;
background-color: var(--color-background);
color: @ini_text;
}
}
@ -43,7 +43,7 @@ div#dwpl-ti-container {
position: relative;
overflow: auto;
box-shadow: @box-shadow;
background-color: @ini_background;
background-color: var(--color-background);
border: solid 1px @ini_border;
border-radius: 0;
margin-top: -1px;

2
css/plugins/tablelayout.less
View file

@ -8,7 +8,7 @@
#dokuwiki__content.main-content .secedit.editbutton_table{
a.button.print {
min-height: 1rem;
background-color: @ini_background;
background-color: var(--color-background);
border-radius: 0 @ini_default_border_radius;
border-top: solid 1px;
border-color: @ini_border;

5
css/plugins/translation.less
View file

@ -9,6 +9,11 @@
position: relative;
float: none;
box-sizing: border-box;
width: 100%;
border-bottom: 1px solid var(--color-shade-4);
padding-bottom: 0.5rem;
+ * {
clear: both;
padding-top: 1em; // as h1

6
css/template_admin.less
View file

@ -49,7 +49,7 @@
svg {
width: 26px;
height: 26px;
border: solid 1px @ini_background;
border: solid 1px var(--color-background);
border-radius: @ini_default_border_radius;
fill: @ini_existing;
transition: @transition background-color, @transition border-color, @transition fill;
@ -68,10 +68,10 @@
svg {
background-color: @ini_existing;
border-color: @ini_existing;
fill: @ini_background;
fill: var(--color-background);
path {
fill: @ini_background;
fill: var(--color-background);
}
}
}

2
css/template_detail.less
View file

@ -33,7 +33,7 @@
img {
margin: 0;
display: block;
border: 1px dotted @ini_background_site;
border: 1px dotted var(--color-background);
position: relative;
}