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

WIP 02: style adjustments to match eh22 styleguide

Browse source
This commit is contained in:
kritzl 2025-02-20 22:03:16 +01:00
commit 0501598d41
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
75 changed files with 957 additions and 317 deletions
Download patch file Download diff file Expand all files Collapse all files

16
css/area_main-content-anchor.less
View file

@ -9,13 +9,27 @@
svg {
width: 1em;
height: 1em;
fill: @ini_link;
fill: var(--color-foreground);
}
}
&:hover {
a.anchor {
display: inline-block;
transition-property: filter, border-color;
transition-duration: 200ms;
transition-timing-function: ease-out;
&:hover {
color: var(--color-glow-primary);
filter: var(--filter-glow-primary);
transition: var(--transition-glow);
svg {
fill: var(--color-glow-primary);
}
}
}
}
}

24
css/area_main-content-secedit.less
View file

@ -12,19 +12,21 @@
form div.no {
button {
margin-top: -.4rem;
padding-right: 0;
margin-right: -0.4rem;
padding: 0.2rem 0.4rem;
}
}
// "section editing button"
button {
display: flex;
align-items: center;
background-color: transparent;
color: transparent;
border-color: transparent;
&::after {
content: '';
float: right;
display: inline-block;
background: transparent url("svg.php?svg=pencil.svg&f=existing") center center no-repeat;
height: 1em;
@ -34,20 +36,20 @@
border-radius: @ini_default_border_radius;
margin-left: @small-spacing;
margin-top: -1px;
color: var(--color-foreground);
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
background: currentColor !important;
mask-image: url('img/pencil.svg');
}
&:hover,
&:active,
&:focus {
//background-color: @ini_existing;
color: @ini_existing;
//border-color: @ini_existing;
&::after {
background-color: @ini_existing;
background-image: url("svg.php?svg=pencil.svg&f=background");
border-color: @ini_existing;
}
.fnActiveButton();
}
}
}

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

@ -28,7 +28,7 @@
}
> p {
color: @ini_nav_menu_color;
color: var(--color-foreground);
&.noissue {
color: @ini_text_webframe;
@ -45,7 +45,7 @@
}
li {
color: @ini_nav_menu_color;
color: var(--color-foreground);
> div {
color: @ini_text_webframe;
@ -74,11 +74,11 @@
&:link,
&:visited {
opacity: .9;
color: @ini_nav_menu_color;
color: var(--color-foreground);
}
* {
color: inherit;
color: var(--color-foreground);
}
}
@ -103,12 +103,14 @@
cursor: pointer;
display: table;
display: flex;
align-items: center;
width: 100%;
opacity: 1;
font-weight: normal;
margin: -1px 0 @very-small-spacing;
padding: 0.4rem 0.1rem;
text-decoration: none;
span {
display: inline-block;
@ -116,6 +118,16 @@
color: inherit;
}
span.ico {
display: flex;
align-items: center;
justify-content: center;
i[data-icon] {
font-size: 1.5rem;
}
}
/* + + + submenu entry is active + + + */
/* + + + toggle: open + + + */
@ -146,16 +158,16 @@
&: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);
border: solid 0.1em var(--color-glow-primary);
text-decoration: none;
color: var(--color-white);
--local-primary: var(--color-primary);
filter: @dropshadow;
transition: @neonflicker;
color: var(--color-glow-primary);
filter: var(--filter-glow-primary);
transition: var(--transition-glow);
span.ico {

43
css/area_main-sidebar-search.less
View file

@ -13,9 +13,7 @@
p.toggleSearch a,
button[type="submit"] {
.fontello();
.hide-text-show-before();
.icon-search();
position: relative;
width: @icon-size;
@ -26,25 +24,35 @@
border: solid 1px transparent;
padding: 0;
transition: @transition color, @transition background-color, @transition border-color;
display: flex;
align-items: center;
&:hover,
&:focus,
&:active {
min-height: @icon-size;
background-color: @ini_button_color;
border: solid 1px @ini_button_background;
.fnActiveButton();
&::after {
background-color: @ini_button_background;
&::after{
background-color: var(--color-glow-primary);
}
}
&::before {
width: 100%;
color: inherit;
width: @icon-size;
height: 0.8em;
font-size: @icon-search_font-size;
text-align: center;
margin: 0;
color: var(--color-foreground);
content: '';
display: block;
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
background-color: currentColor;
mask-image: url('img/search.svg');
}
}
@ -78,7 +86,7 @@
&:focus,
&:active {
background-color: @ini_nav_menu_hover_bg;
border-color: @ini_nav_menu_hover_color;
border-color: var(--color-shade-4);
color: @ini_nav_menu_hover_color;
}
}
@ -92,17 +100,6 @@
height: auto;
min-height: (@icon-size - .2);
color: @quicksearch-button-color;
&:hover,
&:focus,
&:active {
top: 0;
bottom: 0;
min-height: @icon-size;
background-color: @ini_button_color;
border: solid 1px @ini_button_background;
color: @ini_button_background;
}
}
/* + + + form + + + */
@ -128,7 +125,7 @@
button[type="submit"] {
border: solid 1px transparent;
border-right-color: @ini_border;
border-right-color: var(--color-shade-4);
margin-left: -(@icon-size);
&::after {
@ -138,7 +135,7 @@
bottom: 15%;
width: 1px;
left: -1px;
background-color: @ini_border;
background-color: var(--color-shade-4);
transition: @transition background-color;
}
}

44
css/area_nav-metabox.less
View file

@ -7,11 +7,17 @@
.flex-direction();
.justify-content(flex-end);
clear: none;
display: block;
position: relative;
float: right;
box-sizing: border-box;
max-width: 40%;
margin-top: -(@page_padding-top); // reverse padding-top of .page container
margin-right: -1px;
padding-bottom: 0.5rem;
height: 4rem !important;
color: var(--color-foreground);
// >= 1024
@media @screen_min-md {
@ -37,7 +43,7 @@
ul.meta-tabs > li > a {
border-top-color: var(--color-background);
border-bottom-color: @noopentasks-border;
border-bottom-color: var(--color-shade-4);
border-radius: 0 0 @ini_default_border_radius @ini_default_border_radius;
}
@ -119,10 +125,10 @@
@media @screen_min-md {
background-color: var(--color-background);
border: 1px solid @noopentasks-border;
border: 1px solid var(--color-shade-4);
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;
color: var(--color-foreground);
margin-left: 4px;
padding: .3em 1rem .1em;
}
@ -130,8 +136,8 @@
@media @screen_max-md {
background-color: var(--color-background);
top: 0;
border: 1px solid @ini_existing;
color: @ini_existing;
border: 1px solid var(--color-shade-4);
color: var(--color-foreground);
margin-top: .2rem;
margin-left: 0;
padding: .2em .3rem;
@ -156,14 +162,14 @@
@media @screen_min-md {
background-color: var(--color-background);
border-color: @ini_existing;
color: @ini_existing;
border-color: var(--color-shade-4);
color: var(--color-foreground);
}
@media @screen_max-md {
background-color: @ini_existing;
background-color: var(--color-shade-4);
border-color: var(--color-background);
color: var(--color-background);
color: var(--color-foreground);
}
}
}
@ -172,15 +178,15 @@
> a {
cursor: default;
background-color: var(--color-background);
border-color: @ini_existing;
border-color: var(--color-shade-4);
border-bottom-color: var(--color-background);
color: @ini_existing;
color: var(--color-foreground);
@media @screen_max-md {
background-color: @ini_existing;
border-bottom-color: @ini_existing;
background-color: var(--color-shade-4);
border-bottom-color: var(--color-shade-4);
border-radius: 0;
color: var(--color-background);
color: var(--color-foreground);
}
}
}
@ -203,7 +209,7 @@
display: none;
width: 100%;
background-color: var(--color-background);
border: 1px solid @ini_existing;
border: 1px solid var(--color-shade-4);
@media @screen_min-xs {
min-width: 20em;
@ -218,7 +224,7 @@
}
a {
color: @ini_existing;
color: var(--color-foreground);
}
> div {
@ -295,7 +301,7 @@
width: 4px;
height: 4px;
overflow: hidden;
background-color: @ini_existing;
background-color: var(--color-shade-4);
}
}
}

9
css/area_togglelink.less
View file

@ -44,8 +44,8 @@
&:hover,
&:focus,
&:active {
border-color: var(--color-white);
color: var(--color-white);
border-color: var(--color-glow-primary);
color: var(--color-glow-primary);
text-decoration: none;
* {
@ -53,9 +53,8 @@
text-decoration: none;
}
--local-primary: var(--color-primary);
filter: @dropshadow;
transition: @neonflicker;
filter: var(--filter-glow-primary);
transition: var(--transition-glow);
}
}

99
css/base.less
View file

@ -386,10 +386,6 @@ 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;
@ -505,6 +501,46 @@ border-color 150ms cubic-bezier(0,1.7,1,-0.3) 50ms;
--container-7xl: 80rem;
}
.fnButton {
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;
&:hover, &.active{
.fnActiveButton();
}
}
.fnButtonSecondary {
&:hover, &.active{
.fnActiveButtonSecondary();
}
}
.fnActiveButton {
background-color: transparent;
border: solid 0.1em var(--color-glow-primary);
text-decoration: none;
color: var(--color-glow-primary);
filter: var(--filter-glow-primary);
transition: var(--transition-glow);
}
.fnActiveButtonSecondary {
background-color: transparent;
border: solid 0.1em var(--color-glow-secondary);
text-decoration: none;
color: var(--color-glow-secondary);
filter: var(--filter-glow-secondary);
transition: var(--transition-glow);
}
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* screen only */
@ -527,6 +563,21 @@ border-color 150ms cubic-bezier(0,1.7,1,-0.3) 50ms;
--color-accent-1: var(--color-dark-accent-1);
--color-accent-2: var(--color-dark-accent-2);
--color-accent-3: var(--color-dark-accent-3);
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-primary)) drop-shadow(0 0 0.25em var(--color-primary));
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary));
--color-glow-primary: var(--color-white);
--color-glow-secondary: var(--color-white);
--transition-glow: filter 150ms cubic-bezier(0,1.7,1,-0.3) 50ms,
border-color 150ms cubic-bezier(0,1.7,1,-0.3) 50ms;
.light-only {
display: none;
}
.dark-only {
display: initial;
}
}
.light {
@ -543,6 +594,21 @@ border-color 150ms cubic-bezier(0,1.7,1,-0.3) 50ms;
--color-accent-1: var(--color-light-accent-1);
--color-accent-2: var(--color-light-accent-2);
--color-accent-3: var(--color-light-accent-3);
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-400));
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
--color-glow-primary: var(--color-argon-950);
--color-glow-secondary: var(--color-krypton-950);
--transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
.light-only {
display: initial;
}
.dark-only {
display: none;
}
}
html,
@ -590,9 +656,28 @@ border-color 150ms cubic-bezier(0,1.7,1,-0.3) 50ms;
display: none;
}
a:active,
a:hover {
outline: 0;
a {
color: var(--color-accent-1);
text-decoration: underline;
&:hover,
&:active,
&:focus {
color: var(--color-accent-3);
text-decoration: none;
}
&:visited {
color: var(--color-accent-2);
text-decoration: underline;
&:hover,
&:active,
&:focus {
color: var(--color-accent-3);
text-decoration: none;
}
}
}
abbr[title] {

30
css/base_design.less
View file

@ -438,22 +438,6 @@ th {
text-align: right;
}
a {
outline: none;
&:link,
&:visited {
text-decoration: none;
color: @ini_link; // links to non wikipages (external links)
}
&:hover,
&:focus,
&:active {
text-decoration: underline;
}
}
img {
display: inline-block;
border-width: 0;
@ -526,20 +510,6 @@ kbd {
span {
color: inherit;
}
a {
&:link,
&:visited {
color: inherit;
text-decoration: underline;
}
&:hover,
&:focus,
&:active {
text-decoration: none;
}
}
}
pre {

60
css/icons.less Normal file
View file

@ -0,0 +1,60 @@
i[data-icon] {
display: inline-block;
width: 1em;
height: 1em;
flex-shrink: 0;
position: relative;
box-sizing: content-box;
&::before {
content: '';
display: block;
width: 100%;
height: 100%;
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
background-color: currentColor;
}
&[data-icon='arrow-left']::before {
mask-image: url('img/arrow_left.svg');
}
&[data-icon='arrow-up']::before {
mask-image: url('img/arrow_up.svg');
}
&[data-icon='arrow-right']::before {
mask-image: url('img/arrow_right.svg');
}
&[data-icon='arrow-down']::before {
mask-image: url('img/arrow_down.svg');
}
&[data-icon='info']::before {
mask-image: url('img/info.svg');
}
&[data-icon='home']::before {
mask-image: url('img/home.svg');
}
&[data-icon='menu-small']::before {
mask-image: url('img/menu_small.svg');
}
&[data-icon='light']::before {
mask-image: url('img/lightbulb.svg');
}
&[data-icon='warning']::before {
mask-image: url('img/warning.svg');
}
&[data-icon='creature']::before {
mask-image: url('img/creature.svg');
}
}

26
css/plugins/edit.less
View file

@ -7,13 +7,11 @@
#dokuwiki__content {
div.section_highlight {
clear: right;
background: repeating-linear-gradient(
-45deg,
var(--color-shade-1),
var(--color-shade-1) 10px,
var(--color-background) 10px,
var(--color-background) 20px,
);
background: repeating-linear-gradient(-45deg,
var(--color-shade-1),
var(--color-shade-1) 10px,
var(--color-background) 10px,
var(--color-background) 20px,);
border-color: var(--color-background);
}
@ -23,6 +21,16 @@
font-size: 100%;
margin-top: .5rem;
margin-bottom: .5rem;
&::after {
}
&:hover {
&::after {
border: none;
}
}
}
div.editBox {
@ -42,11 +50,13 @@
white-space: normal;
display: block;
width: 100%;
span {
display: inline-block;
padding-bottom: .4rem;
}
input#edit__summary{
input#edit__summary {
max-width: 100%;
box-sizing: border-box;
}

30
css/plugins/translation.less
View file

@ -1,6 +1,7 @@
/**
* This file provides styles for the translation plugin
*/
@import "../base";
.dokuwiki div.plugin_translation {
@ -11,8 +12,8 @@
box-sizing: border-box;
width: 100%;
border-bottom: 1px solid var(--color-shade-4);
padding-bottom: 0.5rem;
height: 4rem;
+ * {
clear: both;
@ -20,11 +21,28 @@
}
ul li {
a.wikilink1:link,
a.wikilink1:hover,
a.wikilink1:active,
a.wikilink1:visited {
background-color: @ini_link;
// active language
span.wikilink1 {
.fnButton();
.fnActiveButton();
cursor: default;
}
a.wikilink1{
.fnButton();
}
span.wikilink2{
.fnButton();
.fnButtonSecondary();
.fnActiveButtonSecondary()
}
a.wikilink2,
a.wikilink2:visited{
.fnButton();
.fnButtonSecondary();
background-color: var(--color-shade-4);
}
}
}

2
css/toollist.less
View file

@ -23,7 +23,7 @@
svg {
width: @font-size-default;
vertical-align: middle;
fill: @ini_nav_menu_color;
fill: var(--color-foreground);
margin-right: .2em;
}
}