Compare commits
126 changed files with 612 additions and 2437 deletions
31
Template.php
31
Template.php
|
|
@ -264,16 +264,35 @@ class Template {
|
|||
$title = tpl_getLang('adjunct_start_logo_text') . $conf['title'];
|
||||
}
|
||||
|
||||
$logo = <<<HTML
|
||||
<img class="mobile-hide dark-only" src="/_media/wiki:logo-on.svg" alt="EH22 DEMO">
|
||||
<img class="mobile-hide light-only" src="/_media/wiki:logo-off.svg" alt="EH22 DEMO">
|
||||
HTML;
|
||||
$desktop = self::getResizedImgTag(
|
||||
'img',
|
||||
array(
|
||||
'class' => 'mobile-hide',
|
||||
'src' => array('wiki:logo-wide.svg', 'wiki:logo.svg', 'wiki:logo-wide.png', 'wiki:logo.png'),
|
||||
'alt' => $title,
|
||||
),
|
||||
0, 250, false
|
||||
);
|
||||
$mobile = self::getResizedImgTag(
|
||||
'img',
|
||||
array(
|
||||
'class' => 'mobile-only',
|
||||
'src' => array(
|
||||
'wiki:logo-32x32.svg', 'wiki:favicon.svg', 'wiki:logo-square.svg', 'wiki:logo.svg',
|
||||
'wiki:logo-32x32.png', 'wiki:favicon.png', 'wiki:logo-square.png', 'wiki:logo.png'
|
||||
),
|
||||
'alt' => $title,
|
||||
),
|
||||
32, 32
|
||||
);
|
||||
|
||||
// homepage logo should not link to itself (BITV accessibility requirement)
|
||||
if($linkit) {
|
||||
tpl_link(wl(), $logo, 'accesskey="h" title="[H]"');
|
||||
tpl_link(wl(), $desktop, 'accesskey="h" title="[H]"');
|
||||
tpl_link(wl(), $mobile, 'accesskey="h" title="[H]"');
|
||||
} else {
|
||||
echo $logo;
|
||||
echo $desktop;
|
||||
echo $mobile;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,20 +2,25 @@
|
|||
* This file provides the design styles for the page content.
|
||||
*/
|
||||
|
||||
.picker {
|
||||
z-index: 2; // position over .content
|
||||
}
|
||||
|
||||
.content .row {
|
||||
> .col-xs-12 {
|
||||
z-index: 1;
|
||||
|
||||
background-color: var(--color-background);
|
||||
|
||||
box-shadow: @box-shadow;
|
||||
|
||||
#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;
|
||||
|
||||
|
|
@ -26,12 +31,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
@media @screen_min-md {
|
||||
> .col-xs-12 {
|
||||
border-left: dashed 0.25em var(--color-shade-4);
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-content > .level2,
|
||||
|
|
|
|||
|
|
@ -7,10 +7,10 @@
|
|||
@media screen {
|
||||
.page-footer {
|
||||
min-height: @page-header_height;
|
||||
background-color: var(--color-background);
|
||||
border-top: 1px solid var(--color-shade-4);
|
||||
background-color: @ini_background_page_header;
|
||||
border-top: 1px solid @ini_border_light;
|
||||
border-radius: 0 0 @fix_border-radius @fix_border-radius; // @ini_default_border_radius vs. @fix_border-radius
|
||||
color: var(--color-shade-4);
|
||||
color: @ini_background_page_footer;
|
||||
font-size: @font-size-default;
|
||||
text-align: right;
|
||||
padding: @margin-small @margin-default;
|
||||
|
|
@ -35,16 +35,20 @@
|
|||
.main-footer {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--color-background);
|
||||
background-color: @ini_background_site;
|
||||
margin-top: 5px; // for box-shadow of content
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--color-shade-4);
|
||||
color: @ini_text_webframe;
|
||||
font-size: @font-size-default;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: @ini_nav_menu_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -59,8 +59,8 @@ meter,
|
|||
progress {
|
||||
font: inherit;
|
||||
font-weight: normal;
|
||||
color: var(--color-foreground);
|
||||
background-color: var(--color-background);
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
line-height: normal;
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
|
|
@ -90,7 +90,8 @@ textarea,
|
|||
select,
|
||||
keygen {
|
||||
min-height: @formfield_min-height;
|
||||
border: 1px solid var(--color-shade-4);
|
||||
border: 1px solid @ini_border;
|
||||
box-shadow: inset 0 0 1px #eee;
|
||||
border-radius: @fix_border-radius;
|
||||
padding-left: .3rem;
|
||||
padding-right: .3rem;
|
||||
|
|
@ -117,7 +118,7 @@ select:active,
|
|||
select:focus,
|
||||
keygen:active,
|
||||
keygen:focus {
|
||||
border-color: var(--color-shade-4);
|
||||
border-color: #999;
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
|
|
@ -157,21 +158,19 @@ button[type=submit],
|
|||
cursor: pointer;
|
||||
box-shadow: none;
|
||||
background-image: none;
|
||||
background-color: var(--color-shade-1);
|
||||
border: solid 0.1rem var(--color-shade-2);
|
||||
border-radius: 0.5rem;
|
||||
color: var(--color-foreground);
|
||||
background-color: @ini_button_background;
|
||||
border: 1px solid @ini_button_background;
|
||||
border-radius: @fix_border-radius;
|
||||
color: @ini_button_color;
|
||||
vertical-align: top;
|
||||
padding: .3em @grid;
|
||||
transition: @transition background-color, @transition color;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
background-color: transparent;
|
||||
color: var(--color-glow-primary);
|
||||
border-color: var(--color-glow-primary);
|
||||
transition: var(--transition-glow);
|
||||
filter: var(--filter-glow-primary);
|
||||
background-color: @ini_button_color;
|
||||
color: @ini_button_background;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -240,11 +239,13 @@ button[readonly],
|
|||
select[readonly],
|
||||
textarea[readonly] {
|
||||
cursor: auto;
|
||||
background-color: var(--color-background);
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc4MjQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0VFRUVFRSIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0NDQ0NDQyIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnODI0KSIgLz4KPC9zdmc+);
|
||||
background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%);
|
||||
background-color: #eee;
|
||||
opacity: .5;
|
||||
border: 1px solid @ini_border;
|
||||
border-radius: @fix_border-radius;
|
||||
color: var(--color-shade-4);
|
||||
color: #333;
|
||||
font-weight: normal;
|
||||
padding: .3em @grid;
|
||||
transition: @transition background-color, @transition color;
|
||||
|
|
|
|||
|
|
@ -13,19 +13,20 @@
|
|||
@media @screen_min-md {
|
||||
.logo {
|
||||
padding: 1rem 0 .3rem;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
height: 200px;
|
||||
height: 4.6rem;
|
||||
width: auto;
|
||||
transition: transform 200ms ease-in-out;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
border-width: 2px 0;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:active {
|
||||
img {
|
||||
transform: scale(1.05);
|
||||
border-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -33,13 +34,7 @@
|
|||
|
||||
@media @screen_max-md {
|
||||
.logo {
|
||||
//display: table-cell;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
max-height: 200px;
|
||||
}
|
||||
display: table-cell;
|
||||
|
||||
.mobile-only {
|
||||
margin: .8rem 1rem .6rem 0;
|
||||
|
|
@ -90,7 +85,7 @@
|
|||
|
||||
/* + + + wiki title + + + */
|
||||
p.title {
|
||||
background-color: var(--color-background);
|
||||
background-color: @ini_background_site;
|
||||
opacity: @header-font-opacity;
|
||||
color: @ini_text_webframe;
|
||||
line-height: @line-height-default;
|
||||
|
|
|
|||
|
|
@ -9,27 +9,13 @@
|
|||
svg {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
fill: var(--color-foreground);
|
||||
fill: @ini_link;
|
||||
}
|
||||
}
|
||||
|
||||
&: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);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,21 +12,19 @@
|
|||
form div.no {
|
||||
button {
|
||||
margin-top: -.4rem;
|
||||
margin-right: -0.4rem;
|
||||
padding: 0.2rem 0.4rem;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// "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;
|
||||
|
|
@ -36,20 +34,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 {
|
||||
.fnActiveButton();
|
||||
//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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
div[class^="level"] {
|
||||
p a.media {
|
||||
img {
|
||||
border: 1px dotted var(--color-background);
|
||||
border: 1px dotted @ini_background_site;
|
||||
|
||||
}
|
||||
&:hover,
|
||||
|
|
|
|||
|
|
@ -19,16 +19,12 @@
|
|||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
|
||||
&.nav-main {
|
||||
margin-bottom: @nav-margin;
|
||||
}
|
||||
|
||||
> p {
|
||||
color: var(--color-foreground);
|
||||
color: @ini_nav_menu_color;
|
||||
|
||||
&.noissue {
|
||||
color: @ini_text_webframe;
|
||||
|
|
@ -45,7 +41,7 @@
|
|||
}
|
||||
|
||||
li {
|
||||
color: var(--color-foreground);
|
||||
color: @ini_nav_menu_color;
|
||||
|
||||
> div {
|
||||
color: @ini_text_webframe;
|
||||
|
|
@ -63,63 +59,45 @@
|
|||
|
||||
|
||||
/* + + + + + active + + + + + */
|
||||
|
||||
span.curid {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a, label {
|
||||
a {
|
||||
&:link,
|
||||
&:visited {
|
||||
opacity: .9;
|
||||
color: var(--color-foreground);
|
||||
color: @ini_nav_menu_color;
|
||||
}
|
||||
|
||||
* {
|
||||
color: var(--color-foreground);
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
/* + + + the wrapper around the toggle to reserve space + + + */
|
||||
|
||||
div.nav {
|
||||
min-height: @icon-size + @margin-small;
|
||||
background-color: var(--color-background);
|
||||
border-radius: 0.5rem;
|
||||
|
||||
&.themeToggle input {
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: block;
|
||||
opacity: 0;
|
||||
}
|
||||
border: 1px solid transparent;
|
||||
|
||||
// the toggle element
|
||||
a, label {
|
||||
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;
|
||||
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
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: 0 0 @very-small-spacing;
|
||||
padding: 0.4rem 0.1rem;
|
||||
text-decoration: none;
|
||||
margin: -1px 0 @very-small-spacing;
|
||||
padding-bottom: .4rem;
|
||||
padding-top: .4rem;
|
||||
transition: @transition color, @transition background-color, @transition border-color;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
|
|
@ -127,61 +105,19 @@
|
|||
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 + + + */
|
||||
|
||||
&.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: 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, label {
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
position: relative; // always show label, even with collapsed sidebar
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
border: solid 0.1em var(--color-glow-primary);
|
||||
background-color: @ini_nav_menu_hover_bg;
|
||||
border-color: @ini_nav_menu_hover_color;
|
||||
color: @ini_nav_menu_hover_color;
|
||||
text-decoration: none;
|
||||
color: var(--color-glow-primary);
|
||||
filter: var(--filter-glow-primary);
|
||||
transition: var(--transition-glow);
|
||||
|
||||
|
||||
span.ico {
|
||||
&:after {
|
||||
background-color: currentColor;
|
||||
background-color: @ini_nav_menu_hover_color;
|
||||
}
|
||||
|
||||
strong {
|
||||
|
|
@ -190,12 +126,63 @@
|
|||
|
||||
svg {
|
||||
path {
|
||||
fill: currentColor;
|
||||
fill: @ini_nav_menu_hover_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* + + + 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 {
|
||||
|
|
@ -218,7 +205,7 @@
|
|||
bottom: auto;
|
||||
height: @border-height;
|
||||
width: 1px;
|
||||
background-color: currentColor;
|
||||
background-color: @ini_nav_menu_color;
|
||||
margin-top: -(@border-height / 2);
|
||||
|
||||
// wordbreak too late in IE 10
|
||||
|
|
@ -235,7 +222,7 @@
|
|||
display: inline-block;
|
||||
width: @icon-size * 0.98;
|
||||
height: @icon-size * 0.98;
|
||||
border: 2px solid currentColor;
|
||||
border: 2px solid fade(@ini_nav_menu_color, 80%);
|
||||
border-top-right-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
color: inherit;
|
||||
|
|
@ -253,7 +240,7 @@
|
|||
height: @icon-size;
|
||||
|
||||
path {
|
||||
fill: currentColor;
|
||||
fill: @ini_nav_menu_color;
|
||||
transition: @transition all;
|
||||
}
|
||||
}
|
||||
|
|
@ -267,7 +254,6 @@
|
|||
}
|
||||
|
||||
/* + + + + + the panel (hidden by default) + + + + + */
|
||||
|
||||
div.nav-panel {
|
||||
display: none;
|
||||
margin-top: .5rem;
|
||||
|
|
@ -316,7 +302,7 @@
|
|||
#dokuwiki__aside {
|
||||
div.nav {
|
||||
a {
|
||||
margin-left: 0;
|
||||
margin-left: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -342,7 +328,7 @@
|
|||
min-width: 45%;
|
||||
max-width: 90%;
|
||||
height: auto;
|
||||
background: var(--color-background);
|
||||
background: @ini_background_site;
|
||||
|
||||
> nav {
|
||||
position: relative;
|
||||
|
|
@ -351,8 +337,7 @@
|
|||
margin-top: 1.2rem;
|
||||
}
|
||||
|
||||
a,
|
||||
label {
|
||||
a {
|
||||
font-size: @font-size-small;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,9 @@
|
|||
|
||||
p.toggleSearch a,
|
||||
button[type="submit"] {
|
||||
.fontello();
|
||||
.hide-text-show-before();
|
||||
.icon-search();
|
||||
|
||||
position: relative;
|
||||
width: @icon-size;
|
||||
|
|
@ -24,65 +26,60 @@
|
|||
border: solid 1px transparent;
|
||||
padding: 0;
|
||||
transition: @transition color, @transition background-color, @transition border-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.fnActiveButton();
|
||||
min-height: @icon-size;
|
||||
background-color: @ini_button_color;
|
||||
border: solid 1px @ini_button_background;
|
||||
|
||||
&::after{
|
||||
background-color: var(--color-glow-primary);
|
||||
&::after {
|
||||
background-color: @ini_button_background;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
width: @icon-size;
|
||||
height: 0.8em;
|
||||
width: 100%;
|
||||
color: inherit;
|
||||
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');
|
||||
}
|
||||
}
|
||||
|
||||
p.toggleSearch {
|
||||
display: none;
|
||||
margin: -2px 0 0; // reverse transparent border and box-sizing of a child
|
||||
padding: 0;
|
||||
|
||||
@media @screen_max-xxlg {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
a {
|
||||
min-width: (@toggle-showsidebar_width + 0.1); /* must be a bit a wider than @toggle-showsidebar_width to hide right border */
|
||||
width: @main-ico-dummy;
|
||||
border-radius: 0.5rem 0 0 0.5rem;
|
||||
border-right: none;
|
||||
background-color: var(--color-shade-1);
|
||||
color: var(--color-foreground);
|
||||
border-radius: @fix_border-radius;
|
||||
color: @ini_nav_menu_color;
|
||||
text-decoration: none;
|
||||
box-sizing: border-box;
|
||||
|
||||
&::before {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
color: inherit;
|
||||
text-align: center;
|
||||
margin-top: -(@icon-search_font-size / 2);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
border-right: none;
|
||||
background-color: transparent;
|
||||
border-color: var(--color-glow-primary);
|
||||
color: var(--color-glow-primary);
|
||||
background-color: @ini_nav_menu_hover_bg;
|
||||
border-color: @ini_nav_menu_hover_color;
|
||||
color: @ini_nav_menu_hover_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -95,6 +92,17 @@
|
|||
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 + + + */
|
||||
|
|
@ -120,6 +128,7 @@
|
|||
|
||||
button[type="submit"] {
|
||||
border: solid 1px transparent;
|
||||
border-right-color: @ini_border;
|
||||
margin-left: -(@icon-size);
|
||||
|
||||
&::after {
|
||||
|
|
@ -129,27 +138,23 @@
|
|||
bottom: 15%;
|
||||
width: 1px;
|
||||
left: -1px;
|
||||
background-color: var(--color-shade-4);
|
||||
background-color: @ini_border;
|
||||
transition: @transition background-color;
|
||||
}
|
||||
}
|
||||
|
||||
div.ajax_qsearch {
|
||||
box-shadow: none;
|
||||
background-color: var(--color-shade-1);
|
||||
background-color: #FFF;
|
||||
padding: 0;
|
||||
z-index: 300; // otherwise hidden behind sidebar in mobile view
|
||||
border: solid 0.1em var(--color-shade-4);
|
||||
border-radius: 0.5rem;
|
||||
|
||||
> strong {
|
||||
color: var(--color-foreground);
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-bottom: solid 0.1em var(--color-shade-4);
|
||||
strong {
|
||||
color: @quicksearch-button-color;
|
||||
padding: 0.25rem 0.5rem
|
||||
}
|
||||
|
||||
ul li {
|
||||
color: var(--color-foreground);
|
||||
color: @quicksearch-button-color;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
|
|
@ -157,12 +162,12 @@
|
|||
overflow: hidden;
|
||||
color: inherit;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: var(--color-shade-2);
|
||||
}
|
||||
ul li {
|
||||
&:nth-child(odd) {
|
||||
background-color: @suggestion-zebra;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -218,11 +223,6 @@
|
|||
|
||||
// show when toggled
|
||||
body.show-mobile-sidebar {
|
||||
#dokuwiki__aside {
|
||||
padding: 0 1rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
p.toggleSearch {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
border-top-left-radius: @fix_border-radius;
|
||||
|
||||
&.active {
|
||||
border-bottom: 1px solid var(--color-background);
|
||||
border-bottom: 1px solid @ini_background_site;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,65 +15,23 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* short fix: SPR-891 - icons for notifications in message area are repeated */
|
||||
div.success,
|
||||
div.error,
|
||||
div.info,
|
||||
div.notify {
|
||||
display: block;
|
||||
border: none;
|
||||
border-left: solid 0.5rem var(--color-shade-4);
|
||||
border-radius: 0.5rem;
|
||||
padding: 1em;
|
||||
background-image: none;
|
||||
background-color: var(--color-shade-1);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 8px 50%;
|
||||
border: 1px solid #eeb;
|
||||
font-size: 90%;
|
||||
margin: 0 0 .5em;
|
||||
padding: .4em;
|
||||
padding-left: 32px;
|
||||
overflow: hidden;
|
||||
border-radius: @fix_border-radius;
|
||||
|
||||
&::before {
|
||||
display: inline-block;
|
||||
content: "";
|
||||
margin: 0.3em 0.2em 0 0;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
mask-size: contain;
|
||||
mask-position: center top;
|
||||
mask-repeat: no-repeat;
|
||||
background-color: currentColor;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&.success {
|
||||
color: var(--color-success);
|
||||
|
||||
&::before {
|
||||
mask-image: url(img/tick_small.svg);
|
||||
}
|
||||
}
|
||||
|
||||
&.error {
|
||||
border-left-color: var(--color-error);
|
||||
color: var(--color-foreground);
|
||||
|
||||
&::before {
|
||||
background-color: var(--color-error);
|
||||
mask-image: url(img/power.svg);
|
||||
}
|
||||
}
|
||||
|
||||
&.info {
|
||||
color: var(--color-foreground);
|
||||
|
||||
&::before {
|
||||
mask-image: url(img/info.svg);
|
||||
}
|
||||
}
|
||||
|
||||
&.notify {
|
||||
border-left-color: var(--color-warning);
|
||||
color: var(--color-foreground);
|
||||
|
||||
&::before {
|
||||
background-color: var(--color-warning);
|
||||
mask-image: url(img/warning.svg);
|
||||
}
|
||||
* {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -6,21 +6,29 @@
|
|||
position: relative;
|
||||
min-height: @page-header_height;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--color-background);
|
||||
border-bottom: 1px solid var(--color-shade-4);
|
||||
background-color: @ini_background;
|
||||
border-bottom: 1px solid @ini_border_light;
|
||||
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;
|
||||
|
||||
@media @screen_max-xs{
|
||||
width: 0;
|
||||
width: 1px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 1.6rem;
|
||||
|
|
@ -50,16 +58,14 @@
|
|||
min-width: 1.9em;
|
||||
width: auto;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--color-shade-1);
|
||||
border: solid .1em transparent;
|
||||
border-radius: 0.5rem;
|
||||
border: solid 1px transparent;
|
||||
border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
|
||||
vertical-align: middle;
|
||||
text-decoration: none;
|
||||
margin-top: -.2em;
|
||||
transition: var(--transition-glow);
|
||||
transition: @transition border-color;
|
||||
|
||||
&:before {
|
||||
color: var(--color-foreground);
|
||||
font-size: @font-size-default + (@font-scale-factor * 2);
|
||||
margin-top: .17rem;
|
||||
}
|
||||
|
|
@ -67,14 +73,7 @@
|
|||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
&:before {
|
||||
color: var(--color-glow-primary);
|
||||
}
|
||||
|
||||
background-color: transparent;
|
||||
border-color: var(--color-glow-primary);
|
||||
color: var(--color-glow-primary);
|
||||
filter: var(--filter-glow-primary);
|
||||
border-color: @ini_existing;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,22 +7,16 @@
|
|||
.flex-direction();
|
||||
.justify-content(flex-end);
|
||||
|
||||
clear: none;
|
||||
display: block;
|
||||
position: relative;
|
||||
float: right;
|
||||
|
||||
box-sizing: border-box;
|
||||
max-width: 40%;
|
||||
padding-bottom: 0.5rem;
|
||||
height: 4rem !important;
|
||||
|
||||
color: var(--color-foreground);
|
||||
margin-top: -(@page_padding-top); // reverse padding-top of .page container
|
||||
margin-right: -1px;
|
||||
|
||||
// >= 1024
|
||||
@media @screen_min-md {
|
||||
height: @page-header_height;
|
||||
border: 0 none;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
// < 1024
|
||||
|
|
@ -42,8 +36,8 @@
|
|||
top: 0;
|
||||
|
||||
ul.meta-tabs > li > a {
|
||||
border-top-color: var(--color-background);
|
||||
border-bottom-color: var(--color-shade-4);
|
||||
border-top-color: @ini_background_site;
|
||||
border-bottom-color: @noopentasks-border;
|
||||
border-radius: 0 0 @ini_default_border_radius @ini_default_border_radius;
|
||||
|
||||
}
|
||||
|
|
@ -121,17 +115,26 @@
|
|||
position: relative;
|
||||
display: block;
|
||||
font-size: @font-size-small;
|
||||
transition: var(--transition-glow);
|
||||
background-color: var(--color-shade-1);
|
||||
border: solid 0.1em transparent;
|
||||
border-radius: 0.5rem;
|
||||
color: var(--color-foreground);
|
||||
padding: .25em;
|
||||
margin-left: 0;
|
||||
transition: @transition background-color, @transition border-color, @transition color;
|
||||
|
||||
@media @screen_min-md {
|
||||
background-color: @ini_background_site;
|
||||
border: 1px solid @noopentasks-border;
|
||||
border-bottom-color: @ini_background_site;
|
||||
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;
|
||||
padding: .3em 1rem .1em;
|
||||
}
|
||||
|
||||
@media @screen_max-md {
|
||||
background-color: @ini_background;
|
||||
top: 0;
|
||||
border: 1px solid @ini_existing;
|
||||
color: @ini_existing;
|
||||
margin-top: .2rem;
|
||||
margin-left: 0;
|
||||
padding: .2em .3rem;
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
@ -150,16 +153,35 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
border-color: var(--color-glow-secondary);
|
||||
color: var(--color-glow-secondary);
|
||||
filter: var(--filter-glow-secondary);
|
||||
|
||||
@media @screen_min-md {
|
||||
background-color: @ini_background;
|
||||
border-color: @ini_existing;
|
||||
color: @ini_existing;
|
||||
}
|
||||
|
||||
@media @screen_max-md {
|
||||
background-color: @ini_existing;
|
||||
border-color: @ini_background;
|
||||
color: @ini_background;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
> a {
|
||||
cursor: default;
|
||||
background-color: @ini_background;
|
||||
border-color: @ini_existing;
|
||||
border-bottom-color: @ini_background;
|
||||
color: @ini_existing;
|
||||
|
||||
@media @screen_max-md {
|
||||
background-color: @ini_existing;
|
||||
border-bottom-color: @ini_existing;
|
||||
border-radius: 0;
|
||||
color: @ini_background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -180,16 +202,15 @@
|
|||
right: 0;
|
||||
display: none;
|
||||
width: 100%;
|
||||
background-color: var(--color-shade-1);
|
||||
border: solid .1em transparent;
|
||||
border-radius: 0.5rem;
|
||||
background-color: @ini_background;
|
||||
border: 1px solid @ini_existing;
|
||||
|
||||
@media @screen_min-xs {
|
||||
min-width: 20em;
|
||||
}
|
||||
|
||||
@media @screen_min-md {
|
||||
margin-top: 0.5rem;
|
||||
border-radius: 0 0 @fix_border-radius @fix_border-radius; // @ini_default_border_radius vs. @fix_border-radius
|
||||
}
|
||||
|
||||
&.active {
|
||||
|
|
@ -197,7 +218,7 @@
|
|||
}
|
||||
|
||||
a {
|
||||
color: var(--color-foreground);
|
||||
color: @ini_existing;
|
||||
}
|
||||
|
||||
> div {
|
||||
|
|
@ -239,10 +260,8 @@
|
|||
float: none;
|
||||
margin: 0;
|
||||
padding: .6rem .5rem .5rem .8rem;
|
||||
background-color: transparent;
|
||||
color: var(--color-foreground);
|
||||
border: solid .1em var(--color-shade-4);
|
||||
border-radius: 0.5rem;
|
||||
background: transparent;
|
||||
border: 0 none;
|
||||
|
||||
h3 {
|
||||
display: none;
|
||||
|
|
@ -276,7 +295,7 @@
|
|||
width: 4px;
|
||||
height: 4px;
|
||||
overflow: hidden;
|
||||
background-color: var(--color-shade-4);
|
||||
background-color: @ini_existing;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -100,11 +100,10 @@ nav#dokuwiki__pagetools {
|
|||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
box-shadow: @box-shadow;
|
||||
background-image: none;
|
||||
color: var(--color-glow-primary);
|
||||
transition: var(--transition-glow);
|
||||
filter: var(--filter-glow-primary);
|
||||
background-color: @ini_background;
|
||||
color: @ini_existing;
|
||||
|
||||
span {
|
||||
position: relative;
|
||||
|
|
@ -114,7 +113,7 @@ nav#dokuwiki__pagetools {
|
|||
}
|
||||
|
||||
svg {
|
||||
fill: var(--color-glow-primary);
|
||||
fill: @ini_existing;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -132,7 +131,14 @@ nav#dokuwiki__pagetools {
|
|||
vertical-align: middle;
|
||||
border: solid 1px transparent;
|
||||
margin: @page-tools_svg-space;
|
||||
fill: var(--color-foreground);
|
||||
|
||||
@media @screen_min-md {
|
||||
fill: @ini_nav_menu_color;
|
||||
}
|
||||
|
||||
@media @screen_max-md {
|
||||
fill: @ini_existing;
|
||||
}
|
||||
}
|
||||
|
||||
&.top {
|
||||
|
|
@ -145,12 +151,11 @@ nav#dokuwiki__pagetools {
|
|||
&:hover {
|
||||
ul {
|
||||
box-shadow: @box-shadow; // @box-shadow-offset;
|
||||
background-color: var(--color-shade-1);
|
||||
border-color: var(--color-shade-4);
|
||||
border-radius: 0.5rem;
|
||||
background-color: @ini_background;
|
||||
border-color: @wikiicons-border;
|
||||
|
||||
li {
|
||||
color: var(--color-foreground);
|
||||
color: @ini_existing;
|
||||
|
||||
a {
|
||||
box-shadow: none;
|
||||
|
|
@ -161,21 +166,17 @@ nav#dokuwiki__pagetools {
|
|||
svg {
|
||||
border: solid 1px transparent;
|
||||
border-radius: @ini_default_border_radius;
|
||||
fill: var(--color-foreground);
|
||||
fill: @ini_existing;
|
||||
transition: @transition background-color, @transition border-color, @transition fill;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: var(--color-glow-primary);
|
||||
transition: var(--transition-glow);
|
||||
filter: var(--filter-glow-primary);
|
||||
|
||||
svg {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
fill: var(--color-glow-primary);
|
||||
background-color: @ini_existing;
|
||||
border-color: @ini_existing;
|
||||
fill: @ini_background;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -76,14 +76,23 @@
|
|||
&.user {
|
||||
position: relative;
|
||||
display: table-cell;
|
||||
background-color: var(--color-shade-1);
|
||||
border: solid 1px var(--color-shade-2);
|
||||
background-color: @ini_background_site;
|
||||
border: solid 1px @wikiicons-border;
|
||||
border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
|
||||
color: var(--color-foreground);
|
||||
color: @ini_text_webframe;
|
||||
padding-right: .3rem;
|
||||
|
||||
@media @screen_min-md {
|
||||
padding-top: .35rem;
|
||||
}
|
||||
|
||||
@media @screen_max-md {
|
||||
min-height: @toggle-size;
|
||||
padding-top: .3rem;
|
||||
}
|
||||
|
||||
@media @screen_max-sm {
|
||||
padding-top: .35rem;
|
||||
}
|
||||
|
||||
@media @screen_max-xs {
|
||||
|
|
@ -93,12 +102,14 @@
|
|||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin: -1px 0 0;
|
||||
padding-top: .4rem;
|
||||
}
|
||||
|
||||
@media @screen_max-xxs {
|
||||
left: -10px;
|
||||
right: 0;
|
||||
width: auto;
|
||||
padding-top: .35rem;
|
||||
}
|
||||
|
||||
> a {
|
||||
|
|
@ -108,9 +119,9 @@
|
|||
position: relative;
|
||||
height: 1rem; // for IE11
|
||||
overflow: visible;
|
||||
background: var(--color-shade-1); // for removing bg-image
|
||||
background: @ini_nav_menu_hover_bg; // for removing bg-image
|
||||
border: 0 none;
|
||||
color: var(--color-foreground);
|
||||
color: @ini_nav_menu_hover_color;
|
||||
text-indent: 0;
|
||||
font-size: inherit;
|
||||
margin-right: -.3rem;
|
||||
|
|
@ -147,7 +158,7 @@
|
|||
right: -1px;
|
||||
width: auto;
|
||||
opacity: 0;
|
||||
border: solid 1px var(--color-shade-2);
|
||||
border: solid 1px @ini_nav_menu_hover_color;
|
||||
border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
|
||||
color: inherit;
|
||||
transform: none;
|
||||
|
|
@ -156,15 +167,12 @@
|
|||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: transparent;
|
||||
color: var(--color-glow-secondary);
|
||||
filter: var(--filter-glow-secondary);
|
||||
transition: var(--transition-glow);
|
||||
background-color: @ini_nav_menu_hover_color;
|
||||
color: @ini_nav_menu_hover_bg;
|
||||
|
||||
&::before {
|
||||
opacity: 1;
|
||||
filter: var(--filter-glow-secondary);
|
||||
border-color: var(--color-glow-secondary);
|
||||
border-color: @ini_nav_menu_hover_color;
|
||||
}
|
||||
|
||||
bdi,
|
||||
|
|
@ -189,10 +197,22 @@
|
|||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: -2px;
|
||||
font-size: @font-size-default + (@font-scale-factor * 4);
|
||||
font-size: 1.4rem;
|
||||
margin: 0;
|
||||
|
||||
@media @screen_min-xxlg {
|
||||
top: -.25rem;
|
||||
}
|
||||
|
||||
@media @screen_max-xxlg {
|
||||
top: -.2rem;
|
||||
}
|
||||
|
||||
@media @screen_max-xs {
|
||||
top: -.25rem;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
} // user
|
||||
|
|
@ -202,29 +222,16 @@
|
|||
.menuitem, button {
|
||||
padding: 2px 0 0 2px;
|
||||
min-height: @toggle-size; // overrides button[type="submit"] styles
|
||||
background-color: var(--color-shade-1);
|
||||
color: var(--color-foreground);
|
||||
border: solid 1px var(--color-shade-2); // overrides button[type="submit"] styles
|
||||
border: solid 1px @wikiicons-border; // overrides button[type="submit"] styles
|
||||
.btn-hover();
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
background-color: transparent;
|
||||
border-color: var(--color-glow-secondary);
|
||||
color: var(--color-glow-secondary);
|
||||
filter: var(--filter-glow-secondary);
|
||||
}
|
||||
|
||||
&:hover svg,
|
||||
&:active svg,
|
||||
&:focus svg {
|
||||
&:hover svg, &:focus svg {
|
||||
transition: @transition fill;
|
||||
fill: var(--color-glow-secondary);
|
||||
fill: @ini_nav_menu_hover_bg;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: var(--color-shade-1);
|
||||
fill: @ini_nav_menu_hover_color;
|
||||
height: @font-size-default + (@font-scale-factor * 4);
|
||||
}
|
||||
|
||||
|
|
@ -238,7 +245,6 @@
|
|||
.hide-text-show-before();
|
||||
.btn-hover();
|
||||
|
||||
background-color: var(--color-shade-1);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
line-height: 1;
|
||||
|
|
@ -295,7 +301,7 @@
|
|||
overflow: hidden;
|
||||
|
||||
li.user {
|
||||
color: var(--color-background);
|
||||
color: @ini_background_site;
|
||||
|
||||
bdi {
|
||||
position: absolute;
|
||||
|
|
@ -305,8 +311,8 @@
|
|||
|
||||
&:before {
|
||||
transition: @transition background-color;
|
||||
background-color: var(--color-shade-1);
|
||||
color: var(--color-foreground);
|
||||
background-color: @ini_background_site;
|
||||
color: @ini_nav_menu_color;
|
||||
text-indent: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -317,18 +323,18 @@
|
|||
|
||||
bdi {
|
||||
&:before {
|
||||
background-color: var(--color-shade-1);
|
||||
color: var(--color-foreground);
|
||||
background-color: @ini_nav_menu_hover_bg;
|
||||
color: @ini_nav_menu_hover_color;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--color-glow-secondary);
|
||||
color: @ini_nav_menu_hover_color;
|
||||
|
||||
bdi {
|
||||
&:before {
|
||||
background-color: transparent;
|
||||
color: var(--color-glow-secondary);
|
||||
background-color: @ini_nav_menu_hover_color;
|
||||
color: @ini_nav_menu_hover_bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,13 +11,11 @@
|
|||
color: @color-editBox;
|
||||
|
||||
&.positive {
|
||||
background-color: var(--color-success);
|
||||
color: var(--color-background);
|
||||
background-color: #cfc;
|
||||
}
|
||||
|
||||
&.negative {
|
||||
background-color: var(--color-error);
|
||||
color: var(--color-foreground);
|
||||
background-color: #fdd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -69,10 +67,11 @@
|
|||
|
||||
.diffnav {
|
||||
a {
|
||||
background-color: var(--color-background);
|
||||
border: solid 1px var(--color-background);
|
||||
border-radius: 0.5rem;
|
||||
color: var(--color-foreground);
|
||||
background-color: @ini_background_site;
|
||||
border: solid 1px @ini_background_site;
|
||||
border-radius: @ini_default_border_radius;
|
||||
color: @ini_nav_menu_color;
|
||||
transition: @transition background-color, @transition color, @transition border-color;
|
||||
|
||||
&::before {
|
||||
background-color: inherit;
|
||||
|
|
@ -83,11 +82,9 @@
|
|||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: transparent;
|
||||
border-color: var(--color-glow-primary);
|
||||
color: var(--color-glow-primary);
|
||||
transition: var(--transition-glow);
|
||||
filter: var(--filter-glow-primary);
|
||||
background-color: @ini_nav_menu_color;
|
||||
border: solid 1px @ini_nav_menu_color;
|
||||
color: @ini_background_site;
|
||||
|
||||
&::before {
|
||||
background-color: inherit;
|
||||
|
|
@ -98,8 +95,10 @@
|
|||
}
|
||||
|
||||
table.diff {
|
||||
background-color: var(--color-background);
|
||||
border: none;
|
||||
background-color: #fff;
|
||||
border: solid 1px #fff;
|
||||
border-top-width: 10px;
|
||||
border-bottom-width: 10px;
|
||||
|
||||
&.diff_inline {
|
||||
border-top-width: 0;
|
||||
|
|
@ -111,8 +110,8 @@
|
|||
}
|
||||
|
||||
th {
|
||||
background-color: var(--color-background);
|
||||
color: var(--color-foreground);
|
||||
background-color: @ini_background;
|
||||
color: @ini_text;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
|
||||
|
|
@ -122,33 +121,30 @@
|
|||
}
|
||||
|
||||
td {
|
||||
background-color: transparent;
|
||||
color: var(--color-text-1);
|
||||
|
||||
&.diff-blockheader {
|
||||
background-color: transparent;
|
||||
color: var(--color-foreground);
|
||||
background-color: #cfc;
|
||||
color: @color-editBox;
|
||||
}
|
||||
|
||||
&.diff-context {
|
||||
background-color: transparent;
|
||||
color: var(--color-text-1);
|
||||
background-color: #eee;
|
||||
color: @color-editBox;
|
||||
}
|
||||
}
|
||||
|
||||
.diff-addedline {
|
||||
background-color: var(--color-success-highlight);
|
||||
color: var(--color-foreground);
|
||||
background-color: #cfc;
|
||||
color: @color-editBox;
|
||||
|
||||
strong {
|
||||
background-color: transparent;
|
||||
color: var(--color-success) !important;
|
||||
color: #f00;
|
||||
}
|
||||
}
|
||||
|
||||
.diff-deletedline {
|
||||
background-color: var(--color-error-highlight);
|
||||
color: var(--color-foreground);
|
||||
background-color: #fdd;
|
||||
color: @color-editBox;
|
||||
|
||||
* {
|
||||
color: inherit;
|
||||
|
|
@ -156,12 +152,8 @@
|
|||
|
||||
strong {
|
||||
background-color: transparent;
|
||||
color: var(--color-error) !important;
|
||||
color: #f00;
|
||||
}
|
||||
}
|
||||
|
||||
.diff-lineheader {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,22 +8,14 @@
|
|||
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: var(--color-accent-3);
|
||||
color: @ini_text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,44 +8,52 @@
|
|||
top: 0;
|
||||
bottom: -1px;
|
||||
width: 2rem;
|
||||
left: -(@margin-default + 0.25rem);
|
||||
left: -(@margin-default);
|
||||
|
||||
@media @screen_max-md {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
.fontello-double();
|
||||
.icon-right-bold();
|
||||
.icon-left-bold();
|
||||
|
||||
.display-flex();
|
||||
.flex-direction();
|
||||
.justify-content();
|
||||
|
||||
width: @margin-default;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
border: solid 1px var(--color-shade-4);
|
||||
border-right-style: none;
|
||||
border-radius: 0.5rem 0 0 0.5rem;
|
||||
color: var(--color-shade-4);
|
||||
background-color: @ini_button_background;
|
||||
border: solid 1px @ini_button_background;
|
||||
border-radius: @ini_default_border_radius 0 0 @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
|
||||
color: @ini_button_color;
|
||||
text-decoration: none;
|
||||
transition: @transition color, @transition background-color, @transition border-color;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
inset: 0.3rem;
|
||||
mask-size: contain;
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
background-color: currentColor;
|
||||
mask-image: url('img/arrow_left.svg');
|
||||
&::before,
|
||||
&::after {
|
||||
width: 100%;
|
||||
opacity: .6;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
transition: @transition opacity;
|
||||
}
|
||||
|
||||
&::before {
|
||||
opacity: 1;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
border-color: var(--color-glow-primary);
|
||||
color: var(--color-glow-primary);
|
||||
background-color: @ini_button_color;
|
||||
border-color: @ini_button_background;
|
||||
color: @ini_button_background;
|
||||
text-decoration: none;
|
||||
|
||||
* {
|
||||
|
|
@ -53,24 +61,43 @@
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
filter: var(--filter-glow-primary);
|
||||
transition: var(--transition-glow);
|
||||
|
||||
&::after {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* + + + toggle out + + + */
|
||||
|
||||
.wide-content & {
|
||||
left: 0;
|
||||
|
||||
a {
|
||||
border-radius: 0 0.5rem 0.5rem 0;
|
||||
border-style: solid;
|
||||
border-left-style: none;
|
||||
background-color: @ini_button_background;
|
||||
border-color: @ini_button_background;
|
||||
border-radius: 0 @ini_default_border_radius @ini_default_border_radius 0; // @ini_default_border_radius vs. @fix_border-radius
|
||||
|
||||
&::before {
|
||||
mask-image: url('img/arrow_right.svg');
|
||||
opacity: .6;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&::after {
|
||||
opacity: 1;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: @ini_button_color;
|
||||
|
||||
&::before {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
425
css/base.less
425
css/base.less
|
|
@ -5,10 +5,10 @@
|
|||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||
/* global vars */
|
||||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||
@font_family_screen: "Athiti", ui-sans, sans-serif;
|
||||
@font_family_print: "Athiti", ui-sans, sans-serif;
|
||||
@font_family_screen: arial, sans-serif;
|
||||
@font_family_print: "Times New Roman", serif;
|
||||
|
||||
@nav_direct_background: var(--color-background);
|
||||
@nav_direct_background: @ini_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: 0.5rem; // inputs, editbox (textarea), buttons, content, code, quicksearch, msg
|
||||
@fix_border-radius: 3px; // 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: var(--color-foreground); // editmode for tables, revision states
|
||||
@color-editBox: #252525; // 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,100 +170,6 @@
|
|||
|
||||
|
||||
|
||||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||
/* 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 */
|
||||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||
|
|
@ -382,303 +288,11 @@ nav > ul {
|
|||
}
|
||||
}
|
||||
|
||||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||
/* variables */
|
||||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||
|
||||
: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-text-1: var(--color-neutral-200);
|
||||
--color-dark-text-2: var(--color-neutral-300);
|
||||
--color-dark-text-3: var(--color-neutral-400);
|
||||
--color-dark-text-4: var(--color-neutral-500);
|
||||
--color-dark-primary: var(--color-argon-400);
|
||||
--color-dark-secondary: var(--color-krypton-300);
|
||||
--color-dark-error: var(--color-red-500);
|
||||
--color-dark-error-highlight: var(--color-red-950);
|
||||
--color-dark-success: var(--color-green-500);
|
||||
--color-dark-success-highlight: var(--color-green-950);
|
||||
--color-dark-warning: #efb100;
|
||||
--color-dark-highlight: #efb10060;
|
||||
--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-text-1: var(--color-neutral-800);
|
||||
--color-light-text-2: var(--color-neutral-700);
|
||||
--color-light-text-3: var(--color-neutral-600);
|
||||
--color-light-text-4: var(--color-neutral-500);
|
||||
--color-light-primary: var(--color-argon-600);
|
||||
--color-light-secondary: var(--color-krypton-500);
|
||||
--color-light-error: var(--color-red-600);
|
||||
--color-light-error-highlight: var(--color-red-50);
|
||||
--color-light-success: var(--color-green-600);
|
||||
--color-light-success-highlight: var(--color-green-50);
|
||||
--color-light-warning: #d08700;
|
||||
--color-light-highlight: #d0870060;
|
||||
--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;
|
||||
}
|
||||
|
||||
.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 */
|
||||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||
|
||||
@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-text-1: var(--color-dark-text-1);
|
||||
--color-text-2: var(--color-dark-text-2);
|
||||
--color-text-3: var(--color-dark-text-3);
|
||||
--color-text-4: var(--color-dark-text-4);
|
||||
--color-primary: var(--color-dark-primary);
|
||||
--color-secondary: var(--color-dark-secondary);
|
||||
--color-error: var(--color-dark-error);
|
||||
--color-error-highlight: var(--color-dark-error-highlight);
|
||||
--color-success: var(--color-dark-success);
|
||||
--color-success-highlight: var(--color-dark-success-highlight);
|
||||
--color-warning: var(--color-dark-warning);
|
||||
--color-highlight: var(--color-dark-highlight);
|
||||
--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;
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
--transition-glow: filter 150ms, border-color 150ms;
|
||||
}
|
||||
|
||||
.light-only {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dark-only {
|
||||
display: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.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-text-1: var(--color-light-text-1);
|
||||
--color-text-2: var(--color-light-text-2);
|
||||
--color-text-3: var(--color-light-text-3);
|
||||
--color-text-4: var(--color-light-text-4);
|
||||
--color-primary: var(--color-light-primary);
|
||||
--color-secondary: var(--color-light-secondary);
|
||||
--color-error: var(--color-light-error);
|
||||
--color-error-highlight: var(--color-light-error-highlight);
|
||||
--color-success: var(--color-light-success);
|
||||
--color-success-highlight: var(--color-light-success-highlight);
|
||||
--color-warning: var(--color-light-warning);
|
||||
--color-highlight: var(--color-light-highlight);
|
||||
--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;
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
--transition-glow: filter 150ms, border-color 150ms;
|
||||
}
|
||||
|
||||
.light-only {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
.dark-only {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html {
|
||||
.dark();
|
||||
|
||||
&:has(#themeLight:checked) {
|
||||
.light();
|
||||
}
|
||||
}
|
||||
#themeToggleDark {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
html {
|
||||
.light();
|
||||
|
||||
&:has(#themeDark:checked) {
|
||||
.dark();
|
||||
}
|
||||
}
|
||||
#themeToggleLight {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
html {
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
|
|
@ -707,28 +321,9 @@ nav > ul {
|
|||
display: none;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
|
|
@ -756,7 +351,7 @@ nav > ul {
|
|||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: "Departure Mono", ui-monospace, monospace;
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
|
|
@ -825,7 +420,7 @@ nav > ul {
|
|||
|
||||
html, body {
|
||||
font-family: @font_family_screen;
|
||||
color: var(--color-foreground);
|
||||
color: @ini_text;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue