quarante-douze/qdouze2-wordpress-theme
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix: better focus

Browse source 
Fixes #1
Fixes #2
This commit is contained in:
Kazhnuz 2023-04-24 20:14:42 +02:00
parent f343d03800
commit 0f194ffae8
5 changed files with 144 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
scss/components/_menus.scss
View file

@ -38,24 +38,34 @@
.fg-light & { .fg-light & {
a { a {
color: $color-font-light; color: $color-font-light;
outline-color: $color-font-light;
&:hover, &:hover,
&:active { &:active {
background-color: transparentize($color-font-light, 0.7); background-color: transparentize($color-font-light, 0.7);
} }
} }
input {
outline-color: $color-font-light;
}
} }
&.fg-dark, &.fg-dark,
.fg-dark & { .fg-dark & {
a { a {
color: $color-font; color: $color-font;
outline-color: $color-font;
&:hover, &:hover,
&:active { &:active {
background-color: transparentize($color-font, 0.85); background-color: transparentize($color-font, 0.85);
} }
} }
input {
outline-color: $color-font;
}
} }
} }

9
scss/core/_typography.scss
View file

@ -37,16 +37,17 @@ a, a:visited, mark {
a, a:visited { a, a:visited {
@include background-color($color-link); @include background-color($color-link);
&:hover, &:active, &:focus { outline-color: $color-link;
&:hover, &:active {
color: $color-link; color: $color-link;
background-color: transparent; background-color: transparent;
} }
}
&:focus { a:focus-visible, input:focus-visible {
outline-color: currentColor;
outline-style: dashed; outline-style: dashed;
outline-width: 2px; outline-width: 2px;
} outline-offset: 1px;
} }
mark { mark {

2
scss/custom/_global.scss
View file

@ -59,6 +59,8 @@ header h1 {
a, a:visited, a:hover { a, a:visited, a:hover {
background-color:transparent; background-color:transparent;
outline-color:white;
display: block;
} }
} }

15
scss/mixins/_btns.scss
View file

@ -19,31 +19,24 @@
@mixin button-hover() { @mixin button-hover() {
transition: background-color .2s, border .2s, box-shadow .2s, color .2s; transition: background-color .2s, border .2s, box-shadow .2s, color .2s;
&:hover, &:active, &:focus { &:hover, &:active {
background-color:transparent; background-color:transparent;
} }
&:focus {
outline: none;
box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0);
&:before {
box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
outline: none;
}
}
} }
@mixin button-fullcontrol($background-color, $hover-color, $text-color) { @mixin button-fullcontrol($background-color, $hover-color, $text-color) {
@include colorize-shape($background-color); @include colorize-shape($background-color);
outline-color: $background-color;
color:$text-color; color:$text-color;
&:visited { &:visited {
@include colorize-shape($background-color); @include colorize-shape($background-color);
color:$text-color; color:$text-color;
} }
&, &:visited, &:not(.disabled):not(:disabled) { &, &:visited, &:not(.disabled):not(:disabled) {
&:hover, &:active, &:focus { &:hover, &:active {
@include colorize-shape($hover-color); @include colorize-shape($hover-color);
color:lighten($text-color, 5%); color:lighten($text-color, 5%);
outline-color: $hover-color;
} }
} }
} }

218
style.css
View file

@ -402,14 +402,16 @@ a, a:visited, mark {
a, a:visited { a, a:visited {
background-color: #e33d22; background-color: #e33d22;
color: #fefefe; } color: #fefefe;
a:hover, a:active, a:focus, a:visited:hover, a:visited:active, a:visited:focus { outline-color: #e33d22; }
a:hover, a:active, a:visited:hover, a:visited:active {
color: #e33d22; color: #e33d22;
background-color: transparent; } background-color: transparent; }
a:focus, a:visited:focus {
outline-color: currentColor; a:focus-visible, input:focus-visible {
outline-style: dashed; outline-style: dashed;
outline-width: 2px; } outline-width: 2px;
outline-offset: 1px; }
mark { mark {
background-color: #feebb0; background-color: #feebb0;
@ -1034,14 +1036,8 @@ code {
background-color: transparent; background-color: transparent;
transition: background-color .2s, border .2s, box-shadow .2s, color .2s; transition: background-color .2s, border .2s, box-shadow .2s, color .2s;
font-weight: 400; } font-weight: 400; }
.btn:hover, .btn:active, .btn:focus { .btn:hover, .btn:active {
background-color: transparent; } background-color: transparent; }
.btn:focus {
outline: none;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0), 0px 0px 0px 2px rgba(0, 0, 0, 0); }
.btn:focus:before {
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0), 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
outline: none; }
.btn:hover, .btn:active { .btn:hover, .btn:active {
border: 0px solid rgba(0, 0, 0, 0.3); } border: 0px solid rgba(0, 0, 0, 0.3); }
p .btn:last-child { p .btn:last-child {
@ -1064,14 +1060,8 @@ code {
padding-left: 0.4rem; padding-left: 0.4rem;
padding-right: 0.4rem; padding-right: 0.4rem;
text-decoration: none; } text-decoration: none; }
.btn-small:hover, .btn-small:active, .btn-small:focus, .badge:hover, .badge:active, .badge:focus { .btn-small:hover, .btn-small:active, .badge:hover, .badge:active {
background-color: transparent; } background-color: transparent; }
.btn-small:focus, .badge:focus {
outline: none;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0), 0px 0px 0px 2px rgba(0, 0, 0, 0); }
.btn-small:focus:before, .badge:focus:before {
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0), 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
outline: none; }
strong.btn-fake { strong.btn-fake {
padding: 1.6rem; padding: 1.6rem;
@ -1088,31 +1078,29 @@ strong.btn-fake {
transition: background-color .2s, border .2s, box-shadow .2s, color .2s; transition: background-color .2s, border .2s, box-shadow .2s, color .2s;
font-weight: 400; font-weight: 400;
background-color: transparent; background-color: transparent;
outline-color: transparent;
color: black; } color: black; }
strong.btn-fake:hover, strong.btn-fake:active, strong.btn-fake:focus { strong.btn-fake:hover, strong.btn-fake:active {
background-color: transparent; } background-color: transparent; }
strong.btn-fake:focus {
outline: none;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0), 0px 0px 0px 2px rgba(0, 0, 0, 0); }
strong.btn-fake:focus:before {
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0), 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
outline: none; }
strong.btn-fake:visited { strong.btn-fake:visited {
background-color: transparent; background-color: transparent;
color: black; } color: black; }
strong.btn-fake:hover, strong.btn-fake:active, strong.btn-fake:focus, strong.btn-fake:visited:hover, strong.btn-fake:visited:active, strong.btn-fake:visited:focus, strong.btn-fake:not(.disabled):not(:disabled):hover, strong.btn-fake:not(.disabled):not(:disabled):active, strong.btn-fake:not(.disabled):not(:disabled):focus { strong.btn-fake:hover, strong.btn-fake:active, strong.btn-fake:visited:hover, strong.btn-fake:visited:active, strong.btn-fake:not(.disabled):not(:disabled):hover, strong.btn-fake:not(.disabled):not(:disabled):active {
background-color: transparent; background-color: transparent;
color: #0d0d0d; } color: #0d0d0d;
outline-color: transparent; }
.btn-readmore, .btn-link { .btn-readmore, .btn-link {
background-color: transparent; background-color: transparent;
outline-color: transparent;
color: #e33d22; } color: #e33d22; }
.btn-readmore:visited, .btn-link:visited { .btn-readmore:visited, .btn-link:visited {
background-color: transparent; background-color: transparent;
color: #e33d22; } color: #e33d22; }
.btn-readmore:hover, .btn-readmore:active, .btn-readmore:focus, .btn-readmore:visited:hover, .btn-readmore:visited:active, .btn-readmore:visited:focus, .btn-readmore:not(.disabled):not(:disabled):hover, .btn-readmore:not(.disabled):not(:disabled):active, .btn-readmore:not(.disabled):not(:disabled):focus, .btn-link:hover, .btn-link:active, .btn-link:focus, .btn-link:visited:hover, .btn-link:visited:active, .btn-link:visited:focus, .btn-link:not(.disabled):not(:disabled):hover, .btn-link:not(.disabled):not(:disabled):active, .btn-link:not(.disabled):not(:disabled):focus { .btn-readmore:hover, .btn-readmore:active, .btn-readmore:visited:hover, .btn-readmore:visited:active, .btn-readmore:not(.disabled):not(:disabled):hover, .btn-readmore:not(.disabled):not(:disabled):active, .btn-link:hover, .btn-link:active, .btn-link:visited:hover, .btn-link:visited:active, .btn-link:not(.disabled):not(:disabled):hover, .btn-link:not(.disabled):not(:disabled):active {
background-color: #dbe0e5; background-color: #dbe0e5;
color: #e65139; } color: #e65139;
outline-color: #dbe0e5; }
.btn-readmore:not(:hover), .btn-link:not(:hover) { .btn-readmore:not(:hover), .btn-link:not(:hover) {
border-color: transparent; } border-color: transparent; }
@ -1168,31 +1156,29 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
transition: background-color .2s, border .2s, box-shadow .2s, color .2s; transition: background-color .2s, border .2s, box-shadow .2s, color .2s;
font-weight: 400; font-weight: 400;
background-color: #f1f3f5; background-color: #f1f3f5;
outline-color: #f1f3f5;
color: #212529; color: #212529;
margin: 0 0 0 0; } margin: 0 0 0 0; }
.breadcrumb li.breadcrumb-item a:hover, .breadcrumb li.breadcrumb-item a:active, .breadcrumb li.breadcrumb-item a:focus, .breadcrumb li.breadcrumb-item > span:hover, .breadcrumb li.breadcrumb-item > span:active, .breadcrumb li.breadcrumb-item > span:focus { .breadcrumb li.breadcrumb-item a:hover, .breadcrumb li.breadcrumb-item a:active, .breadcrumb li.breadcrumb-item > span:hover, .breadcrumb li.breadcrumb-item > span:active {
background-color: transparent; } background-color: transparent; }
.breadcrumb li.breadcrumb-item a:focus, .breadcrumb li.breadcrumb-item > span:focus {
outline: none;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0), 0px 0px 0px 2px rgba(0, 0, 0, 0); }
.breadcrumb li.breadcrumb-item a:focus:before, .breadcrumb li.breadcrumb-item > span:focus:before {
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0), 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
outline: none; }
.breadcrumb li.breadcrumb-item a:visited, .breadcrumb li.breadcrumb-item > span:visited { .breadcrumb li.breadcrumb-item a:visited, .breadcrumb li.breadcrumb-item > span:visited {
background-color: #f1f3f5; background-color: #f1f3f5;
color: #212529; } color: #212529; }
.breadcrumb li.breadcrumb-item a:hover, .breadcrumb li.breadcrumb-item a:active, .breadcrumb li.breadcrumb-item a:focus, .breadcrumb li.breadcrumb-item a:visited:hover, .breadcrumb li.breadcrumb-item a:visited:active, .breadcrumb li.breadcrumb-item a:visited:focus, .breadcrumb li.breadcrumb-item a:not(.disabled):not(:disabled):hover, .breadcrumb li.breadcrumb-item a:not(.disabled):not(:disabled):active, .breadcrumb li.breadcrumb-item a:not(.disabled):not(:disabled):focus, .breadcrumb li.breadcrumb-item > span:hover, .breadcrumb li.breadcrumb-item > span:active, .breadcrumb li.breadcrumb-item > span:focus, .breadcrumb li.breadcrumb-item > span:visited:hover, .breadcrumb li.breadcrumb-item > span:visited:active, .breadcrumb li.breadcrumb-item > span:visited:focus, .breadcrumb li.breadcrumb-item > span:not(.disabled):not(:disabled):hover, .breadcrumb li.breadcrumb-item > span:not(.disabled):not(:disabled):active, .breadcrumb li.breadcrumb-item > span:not(.disabled):not(:disabled):focus { .breadcrumb li.breadcrumb-item a:hover, .breadcrumb li.breadcrumb-item a:active, .breadcrumb li.breadcrumb-item a:visited:hover, .breadcrumb li.breadcrumb-item a:visited:active, .breadcrumb li.breadcrumb-item a:not(.disabled):not(:disabled):hover, .breadcrumb li.breadcrumb-item a:not(.disabled):not(:disabled):active, .breadcrumb li.breadcrumb-item > span:hover, .breadcrumb li.breadcrumb-item > span:active, .breadcrumb li.breadcrumb-item > span:visited:hover, .breadcrumb li.breadcrumb-item > span:visited:active, .breadcrumb li.breadcrumb-item > span:not(.disabled):not(:disabled):hover, .breadcrumb li.breadcrumb-item > span:not(.disabled):not(:disabled):active {
background-color: #dbe0e5; background-color: #dbe0e5;
color: #2c3237; } color: #2c3237;
outline-color: #dbe0e5; }
.breadcrumb li.breadcrumb-item a.active, .breadcrumb li.breadcrumb-item > span.active { .breadcrumb li.breadcrumb-item a.active, .breadcrumb li.breadcrumb-item > span.active {
background-color: #343a40; background-color: #343a40;
outline-color: #343a40;
color: #fefefe; } color: #fefefe; }
.breadcrumb li.breadcrumb-item a.active:visited, .breadcrumb li.breadcrumb-item > span.active:visited { .breadcrumb li.breadcrumb-item a.active:visited, .breadcrumb li.breadcrumb-item > span.active:visited {
background-color: #343a40; background-color: #343a40;
color: #fefefe; } color: #fefefe; }
.breadcrumb li.breadcrumb-item a.active:hover, .breadcrumb li.breadcrumb-item a.active:active, .breadcrumb li.breadcrumb-item a.active:focus, .breadcrumb li.breadcrumb-item a.active:visited:hover, .breadcrumb li.breadcrumb-item a.active:visited:active, .breadcrumb li.breadcrumb-item a.active:visited:focus, .breadcrumb li.breadcrumb-item a.active:not(.disabled):not(:disabled):hover, .breadcrumb li.breadcrumb-item a.active:not(.disabled):not(:disabled):active, .breadcrumb li.breadcrumb-item a.active:not(.disabled):not(:disabled):focus, .breadcrumb li.breadcrumb-item > span.active:hover, .breadcrumb li.breadcrumb-item > span.active:active, .breadcrumb li.breadcrumb-item > span.active:focus, .breadcrumb li.breadcrumb-item > span.active:visited:hover, .breadcrumb li.breadcrumb-item > span.active:visited:active, .breadcrumb li.breadcrumb-item > span.active:visited:focus, .breadcrumb li.breadcrumb-item > span.active:not(.disabled):not(:disabled):hover, .breadcrumb li.breadcrumb-item > span.active:not(.disabled):not(:disabled):active, .breadcrumb li.breadcrumb-item > span.active:not(.disabled):not(:disabled):focus { .breadcrumb li.breadcrumb-item a.active:hover, .breadcrumb li.breadcrumb-item a.active:active, .breadcrumb li.breadcrumb-item a.active:visited:hover, .breadcrumb li.breadcrumb-item a.active:visited:active, .breadcrumb li.breadcrumb-item a.active:not(.disabled):not(:disabled):hover, .breadcrumb li.breadcrumb-item a.active:not(.disabled):not(:disabled):active, .breadcrumb li.breadcrumb-item > span.active:hover, .breadcrumb li.breadcrumb-item > span.active:active, .breadcrumb li.breadcrumb-item > span.active:visited:hover, .breadcrumb li.breadcrumb-item > span.active:visited:active, .breadcrumb li.breadcrumb-item > span.active:not(.disabled):not(:disabled):hover, .breadcrumb li.breadcrumb-item > span.active:not(.disabled):not(:disabled):active {
background-color: #343a40; background-color: #343a40;
color: white; } color: white;
outline-color: #343a40; }
.breadcrumb li.breadcrumb-item:not(:first-child) a, .breadcrumb li.breadcrumb-item:not(:first-child) > span { .breadcrumb li.breadcrumb-item:not(:first-child) a, .breadcrumb li.breadcrumb-item:not(:first-child) > span {
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0; } border-bottom-left-radius: 0; }
@ -1223,24 +1209,20 @@ nav.pagination {
padding-right: 0.4rem; padding-right: 0.4rem;
margin-right: 0.05rem; margin-right: 0.05rem;
margin-left: 0.05rem; } margin-left: 0.05rem; }
nav.pagination .page-numbers:hover, nav.pagination .page-numbers:active, nav.pagination .page-numbers:focus, nav.pagination .next:hover, nav.pagination .next:active, nav.pagination .next:focus, nav.pagination .prev:hover, nav.pagination .prev:active, nav.pagination .prev:focus { nav.pagination .page-numbers:hover, nav.pagination .page-numbers:active, nav.pagination .next:hover, nav.pagination .next:active, nav.pagination .prev:hover, nav.pagination .prev:active {
background-color: transparent; } background-color: transparent; }
nav.pagination .page-numbers:focus, nav.pagination .next:focus, nav.pagination .prev:focus {
outline: none;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0), 0px 0px 0px 2px rgba(0, 0, 0, 0); }
nav.pagination .page-numbers:focus:before, nav.pagination .next:focus:before, nav.pagination .prev:focus:before {
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0), 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
outline: none; }
nav.pagination .page-numbers:not(.current), nav.pagination .next:not(.current), nav.pagination .prev:not(.current) { nav.pagination .page-numbers:not(.current), nav.pagination .next:not(.current), nav.pagination .prev:not(.current) {
background-color: #f1f3f5; background-color: #f1f3f5;
outline-color: #f1f3f5;
color: #212529; color: #212529;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); } box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
nav.pagination .page-numbers:not(.current):visited, nav.pagination .next:not(.current):visited, nav.pagination .prev:not(.current):visited { nav.pagination .page-numbers:not(.current):visited, nav.pagination .next:not(.current):visited, nav.pagination .prev:not(.current):visited {
background-color: #f1f3f5; background-color: #f1f3f5;
color: #212529; } color: #212529; }
nav.pagination .page-numbers:not(.current):hover, nav.pagination .page-numbers:not(.current):active, nav.pagination .page-numbers:not(.current):focus, nav.pagination .page-numbers:not(.current):visited:hover, nav.pagination .page-numbers:not(.current):visited:active, nav.pagination .page-numbers:not(.current):visited:focus, nav.pagination .page-numbers:not(.current):not(.disabled):not(:disabled):hover, nav.pagination .page-numbers:not(.current):not(.disabled):not(:disabled):active, nav.pagination .page-numbers:not(.current):not(.disabled):not(:disabled):focus, nav.pagination .next:not(.current):hover, nav.pagination .next:not(.current):active, nav.pagination .next:not(.current):focus, nav.pagination .next:not(.current):visited:hover, nav.pagination .next:not(.current):visited:active, nav.pagination .next:not(.current):visited:focus, nav.pagination .next:not(.current):not(.disabled):not(:disabled):hover, nav.pagination .next:not(.current):not(.disabled):not(:disabled):active, nav.pagination .next:not(.current):not(.disabled):not(:disabled):focus, nav.pagination .prev:not(.current):hover, nav.pagination .prev:not(.current):active, nav.pagination .prev:not(.current):focus, nav.pagination .prev:not(.current):visited:hover, nav.pagination .prev:not(.current):visited:active, nav.pagination .prev:not(.current):visited:focus, nav.pagination .prev:not(.current):not(.disabled):not(:disabled):hover, nav.pagination .prev:not(.current):not(.disabled):not(:disabled):active, nav.pagination .prev:not(.current):not(.disabled):not(:disabled):focus { nav.pagination .page-numbers:not(.current):hover, nav.pagination .page-numbers:not(.current):active, nav.pagination .page-numbers:not(.current):visited:hover, nav.pagination .page-numbers:not(.current):visited:active, nav.pagination .page-numbers:not(.current):not(.disabled):not(:disabled):hover, nav.pagination .page-numbers:not(.current):not(.disabled):not(:disabled):active, nav.pagination .next:not(.current):hover, nav.pagination .next:not(.current):active, nav.pagination .next:not(.current):visited:hover, nav.pagination .next:not(.current):visited:active, nav.pagination .next:not(.current):not(.disabled):not(:disabled):hover, nav.pagination .next:not(.current):not(.disabled):not(:disabled):active, nav.pagination .prev:not(.current):hover, nav.pagination .prev:not(.current):active, nav.pagination .prev:not(.current):visited:hover, nav.pagination .prev:not(.current):visited:active, nav.pagination .prev:not(.current):not(.disabled):not(:disabled):hover, nav.pagination .prev:not(.current):not(.disabled):not(:disabled):active {
background-color: #d2d4d6; background-color: #d2d4d6;
color: #2c3237; } color: #2c3237;
outline-color: #d2d4d6; }
nav.pagination .page-numbers.current, nav.pagination .next.current, nav.pagination .prev.current { nav.pagination .page-numbers.current, nav.pagination .next.current, nav.pagination .prev.current {
background-color: #e33d22; background-color: #e33d22;
color: #fefefe; } color: #fefefe; }
@ -1413,13 +1395,19 @@ ul.card-list, .card > ul {
.menu a:visited .badge { .menu a:visited .badge {
margin: 0; } margin: 0; }
.menu.fg-light a, .fg-light .menu a { .menu.fg-light a, .fg-light .menu a {
color: #fefefe; } color: #fefefe;
outline-color: #fefefe; }
.menu.fg-light a:hover, .menu.fg-light a:active, .fg-light .menu a:hover, .fg-light .menu a:active { .menu.fg-light a:hover, .menu.fg-light a:active, .fg-light .menu a:hover, .fg-light .menu a:active {
background-color: rgba(254, 254, 254, 0.3); } background-color: rgba(254, 254, 254, 0.3); }
.menu.fg-light input, .fg-light .menu input {
outline-color: #fefefe; }
.menu.fg-dark a, .fg-dark .menu a { .menu.fg-dark a, .fg-dark .menu a {
color: #212529; } color: #212529;
outline-color: #212529; }
.menu.fg-dark a:hover, .menu.fg-dark a:active, .fg-dark .menu a:hover, .fg-dark .menu a:active { .menu.fg-dark a:hover, .menu.fg-dark a:active, .fg-dark .menu a:hover, .fg-dark .menu a:active {
background-color: rgba(33, 37, 41, 0.15); } background-color: rgba(33, 37, 41, 0.15); }
.menu.fg-dark input, .fg-dark .menu input {
outline-color: #212529; }
.toolbar { .toolbar {
flex-direction: row; } flex-direction: row; }
@ -1452,14 +1440,8 @@ ul.card-list, .card > ul {
transition: background-color .2s, border .2s, box-shadow .2s, color .2s; transition: background-color .2s, border .2s, box-shadow .2s, color .2s;
padding-left: 0.4rem; padding-left: 0.4rem;
padding-right: 0.4rem; } padding-right: 0.4rem; }
.menu-label:hover, .menu-label:active, .menu-label:focus { .menu-label:hover, .menu-label:active {
background-color: transparent; } background-color: transparent; }
.menu-label:focus {
outline: none;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0), 0px 0px 0px 2px rgba(0, 0, 0, 0); }
.menu-label:focus:before {
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0), 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
outline: none; }
.toast { .toast {
border-radius: 8px 8px 8px 8px; border-radius: 8px 8px 8px 8px;
@ -1986,212 +1968,250 @@ textarea {
.btn-blue { .btn-blue {
background-color: #339af0; background-color: #339af0;
outline-color: #339af0;
color: #fefefe; color: #fefefe;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); } box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
.btn-blue:visited { .btn-blue:visited {
background-color: #339af0; background-color: #339af0;
color: #fefefe; } color: #fefefe; }
.btn-blue:hover, .btn-blue:active, .btn-blue:focus, .btn-blue:visited:hover, .btn-blue:visited:active, .btn-blue:visited:focus, .btn-blue:not(.disabled):not(:disabled):hover, .btn-blue:not(.disabled):not(:disabled):active, .btn-blue:not(.disabled):not(:disabled):focus { .btn-blue:hover, .btn-blue:active, .btn-blue:visited:hover, .btn-blue:visited:active, .btn-blue:not(.disabled):not(:disabled):hover, .btn-blue:not(.disabled):not(:disabled):active {
background-color: #51a9f2; background-color: #51a9f2;
color: white; } color: white;
outline-color: #51a9f2; }
.btn-violet { .btn-violet {
background-color: #845ef7; background-color: #845ef7;
outline-color: #845ef7;
color: #fefefe; color: #fefefe;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); } box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
.btn-violet:visited { .btn-violet:visited {
background-color: #845ef7; background-color: #845ef7;
color: #fefefe; } color: #fefefe; }
.btn-violet:hover, .btn-violet:active, .btn-violet:focus, .btn-violet:visited:hover, .btn-violet:visited:active, .btn-violet:visited:focus, .btn-violet:not(.disabled):not(:disabled):hover, .btn-violet:not(.disabled):not(:disabled):active, .btn-violet:not(.disabled):not(:disabled):focus { .btn-violet:hover, .btn-violet:active, .btn-violet:visited:hover, .btn-violet:visited:active, .btn-violet:not(.disabled):not(:disabled):hover, .btn-violet:not(.disabled):not(:disabled):active {
background-color: #9676f8; background-color: #9676f8;
color: white; } color: white;
outline-color: #9676f8; }
.btn-red { .btn-red {
background-color: #e33d22; background-color: #e33d22;
outline-color: #e33d22;
color: #fefefe; color: #fefefe;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); } box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
.btn-red:visited { .btn-red:visited {
background-color: #e33d22; background-color: #e33d22;
color: #fefefe; } color: #fefefe; }
.btn-red:hover, .btn-red:active, .btn-red:focus, .btn-red:visited:hover, .btn-red:visited:active, .btn-red:visited:focus, .btn-red:not(.disabled):not(:disabled):hover, .btn-red:not(.disabled):not(:disabled):active, .btn-red:not(.disabled):not(:disabled):focus { .btn-red:hover, .btn-red:active, .btn-red:visited:hover, .btn-red:visited:active, .btn-red:not(.disabled):not(:disabled):hover, .btn-red:not(.disabled):not(:disabled):active {
background-color: #e75a43; background-color: #e75a43;
color: white; } color: white;
outline-color: #e75a43; }
.btn-orange { .btn-orange {
background-color: #ff922b; background-color: #ff922b;
outline-color: #ff922b;
color: #fefefe; color: #fefefe;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); } box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
.btn-orange:visited { .btn-orange:visited {
background-color: #ff922b; background-color: #ff922b;
color: #fefefe; } color: #fefefe; }
.btn-orange:hover, .btn-orange:active, .btn-orange:focus, .btn-orange:visited:hover, .btn-orange:visited:active, .btn-orange:visited:focus, .btn-orange:not(.disabled):not(:disabled):hover, .btn-orange:not(.disabled):not(:disabled):active, .btn-orange:not(.disabled):not(:disabled):focus { .btn-orange:hover, .btn-orange:active, .btn-orange:visited:hover, .btn-orange:visited:active, .btn-orange:not(.disabled):not(:disabled):hover, .btn-orange:not(.disabled):not(:disabled):active {
background-color: #ffa24b; background-color: #ffa24b;
color: white; } color: white;
outline-color: #ffa24b; }
.btn-green { .btn-green {
background-color: #51cf66; background-color: #51cf66;
outline-color: #51cf66;
color: #fefefe; color: #fefefe;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); } box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
.btn-green:visited { .btn-green:visited {
background-color: #51cf66; background-color: #51cf66;
color: #fefefe; } color: #fefefe; }
.btn-green:hover, .btn-green:active, .btn-green:focus, .btn-green:visited:hover, .btn-green:visited:active, .btn-green:visited:focus, .btn-green:not(.disabled):not(:disabled):hover, .btn-green:not(.disabled):not(:disabled):active, .btn-green:not(.disabled):not(:disabled):focus { .btn-green:hover, .btn-green:active, .btn-green:visited:hover, .btn-green:visited:active, .btn-green:not(.disabled):not(:disabled):hover, .btn-green:not(.disabled):not(:disabled):active {
background-color: #6bd67d; background-color: #6bd67d;
color: white; } color: white;
outline-color: #6bd67d; }
.btn-skyblue { .btn-skyblue {
background-color: #3bc9db; background-color: #3bc9db;
outline-color: #3bc9db;
color: #fefefe; color: #fefefe;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); } box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
.btn-skyblue:visited { .btn-skyblue:visited {
background-color: #3bc9db; background-color: #3bc9db;
color: #fefefe; } color: #fefefe; }
.btn-skyblue:hover, .btn-skyblue:active, .btn-skyblue:focus, .btn-skyblue:visited:hover, .btn-skyblue:visited:active, .btn-skyblue:visited:focus, .btn-skyblue:not(.disabled):not(:disabled):hover, .btn-skyblue:not(.disabled):not(:disabled):active, .btn-skyblue:not(.disabled):not(:disabled):focus { .btn-skyblue:hover, .btn-skyblue:active, .btn-skyblue:visited:hover, .btn-skyblue:visited:active, .btn-skyblue:not(.disabled):not(:disabled):hover, .btn-skyblue:not(.disabled):not(:disabled):active {
background-color: #58d1e0; background-color: #58d1e0;
color: white; } color: white;
outline-color: #58d1e0; }
.btn-dark { .btn-dark {
background-color: #343a40; background-color: #343a40;
outline-color: #343a40;
color: #fefefe; color: #fefefe;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); } box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
.btn-dark:visited { .btn-dark:visited {
background-color: #343a40; background-color: #343a40;
color: #fefefe; } color: #fefefe; }
.btn-dark:hover, .btn-dark:active, .btn-dark:focus, .btn-dark:visited:hover, .btn-dark:visited:active, .btn-dark:visited:focus, .btn-dark:not(.disabled):not(:disabled):hover, .btn-dark:not(.disabled):not(:disabled):active, .btn-dark:not(.disabled):not(:disabled):focus { .btn-dark:hover, .btn-dark:active, .btn-dark:visited:hover, .btn-dark:visited:active, .btn-dark:not(.disabled):not(:disabled):hover, .btn-dark:not(.disabled):not(:disabled):active {
background-color: #52575d; background-color: #52575d;
color: white; } color: white;
outline-color: #52575d; }
.btn-light { .btn-light {
background-color: #fefefe; background-color: #fefefe;
outline-color: #fefefe;
color: #212529; color: #212529;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); } box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
.btn-light:visited { .btn-light:visited {
background-color: #fefefe; background-color: #fefefe;
color: #212529; } color: #212529; }
.btn-light:hover, .btn-light:active, .btn-light:focus, .btn-light:visited:hover, .btn-light:visited:active, .btn-light:visited:focus, .btn-light:not(.disabled):not(:disabled):hover, .btn-light:not(.disabled):not(:disabled):active, .btn-light:not(.disabled):not(:disabled):focus { .btn-light:hover, .btn-light:active, .btn-light:visited:hover, .btn-light:visited:active, .btn-light:not(.disabled):not(:disabled):hover, .btn-light:not(.disabled):not(:disabled):active {
background-color: #ddddde; background-color: #ddddde;
color: #2c3237; } color: #2c3237;
outline-color: #ddddde; }
.btn-yellow { .btn-yellow {
background-color: #fcc419; background-color: #fcc419;
outline-color: #fcc419;
color: #fefefe; color: #fefefe;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); } box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
.btn-yellow:visited { .btn-yellow:visited {
background-color: #fcc419; background-color: #fcc419;
color: #fefefe; } color: #fefefe; }
.btn-yellow:hover, .btn-yellow:active, .btn-yellow:focus, .btn-yellow:visited:hover, .btn-yellow:visited:active, .btn-yellow:visited:focus, .btn-yellow:not(.disabled):not(:disabled):hover, .btn-yellow:not(.disabled):not(:disabled):active, .btn-yellow:not(.disabled):not(:disabled):focus { .btn-yellow:hover, .btn-yellow:active, .btn-yellow:visited:hover, .btn-yellow:visited:active, .btn-yellow:not(.disabled):not(:disabled):hover, .btn-yellow:not(.disabled):not(:disabled):active {
background-color: #fccd3b; background-color: #fccd3b;
color: white; } color: white;
outline-color: #fccd3b; }
.btn-grey { .btn-grey {
background-color: #adb5bd; background-color: #adb5bd;
outline-color: #adb5bd;
color: #fefefe; color: #fefefe;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); } box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
.btn-grey:visited { .btn-grey:visited {
background-color: #adb5bd; background-color: #adb5bd;
color: #fefefe; } color: #fefefe; }
.btn-grey:hover, .btn-grey:active, .btn-grey:focus, .btn-grey:visited:hover, .btn-grey:visited:active, .btn-grey:visited:focus, .btn-grey:not(.disabled):not(:disabled):hover, .btn-grey:not(.disabled):not(:disabled):active, .btn-grey:not(.disabled):not(:disabled):focus { .btn-grey:hover, .btn-grey:active, .btn-grey:visited:hover, .btn-grey:visited:active, .btn-grey:not(.disabled):not(:disabled):hover, .btn-grey:not(.disabled):not(:disabled):active {
background-color: #b9c0c7; background-color: #b9c0c7;
color: white; } color: white;
outline-color: #b9c0c7; }
.btn-dark2 { .btn-dark2 {
background-color: #212529; background-color: #212529;
outline-color: #212529;
color: #fefefe; color: #fefefe;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); } box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
.btn-dark2:visited { .btn-dark2:visited {
background-color: #212529; background-color: #212529;
color: #fefefe; } color: #fefefe; }
.btn-dark2:hover, .btn-dark2:active, .btn-dark2:focus, .btn-dark2:visited:hover, .btn-dark2:visited:active, .btn-dark2:visited:focus, .btn-dark2:not(.disabled):not(:disabled):hover, .btn-dark2:not(.disabled):not(:disabled):active, .btn-dark2:not(.disabled):not(:disabled):focus { .btn-dark2:hover, .btn-dark2:active, .btn-dark2:visited:hover, .btn-dark2:visited:active, .btn-dark2:not(.disabled):not(:disabled):hover, .btn-dark2:not(.disabled):not(:disabled):active {
background-color: #424649; background-color: #424649;
color: white; } color: white;
outline-color: #424649; }
.btn-light2 { .btn-light2 {
background-color: #f1f3f5; background-color: #f1f3f5;
outline-color: #f1f3f5;
color: #212529; color: #212529;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); } box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
.btn-light2:visited { .btn-light2:visited {
background-color: #f1f3f5; background-color: #f1f3f5;
color: #212529; } color: #212529; }
.btn-light2:hover, .btn-light2:active, .btn-light2:focus, .btn-light2:visited:hover, .btn-light2:visited:active, .btn-light2:visited:focus, .btn-light2:not(.disabled):not(:disabled):hover, .btn-light2:not(.disabled):not(:disabled):active, .btn-light2:not(.disabled):not(:disabled):focus { .btn-light2:hover, .btn-light2:active, .btn-light2:visited:hover, .btn-light2:visited:active, .btn-light2:not(.disabled):not(:disabled):hover, .btn-light2:not(.disabled):not(:disabled):active {
background-color: #d2d4d6; background-color: #d2d4d6;
color: #2c3237; } color: #2c3237;
outline-color: #d2d4d6; }
.btn-primary { .btn-primary {
background-color: #e33d22; background-color: #e33d22;
outline-color: #e33d22;
color: #fefefe; color: #fefefe;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); } box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
.btn-primary:visited { .btn-primary:visited {
background-color: #e33d22; background-color: #e33d22;
color: #fefefe; } color: #fefefe; }
.btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary:visited:hover, .btn-primary:visited:active, .btn-primary:visited:focus, .btn-primary:not(.disabled):not(:disabled):hover, .btn-primary:not(.disabled):not(:disabled):active, .btn-primary:not(.disabled):not(:disabled):focus { .btn-primary:hover, .btn-primary:active, .btn-primary:visited:hover, .btn-primary:visited:active, .btn-primary:not(.disabled):not(:disabled):hover, .btn-primary:not(.disabled):not(:disabled):active {
background-color: #e75a43; background-color: #e75a43;
color: white; } color: white;
outline-color: #e75a43; }
.btn-secondary { .btn-secondary {
background-color: #343a40; background-color: #343a40;
outline-color: #343a40;
color: #fefefe; color: #fefefe;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); } box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
.btn-secondary:visited { .btn-secondary:visited {
background-color: #343a40; background-color: #343a40;
color: #fefefe; } color: #fefefe; }
.btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus, .btn-secondary:visited:hover, .btn-secondary:visited:active, .btn-secondary:visited:focus, .btn-secondary:not(.disabled):not(:disabled):hover, .btn-secondary:not(.disabled):not(:disabled):active, .btn-secondary:not(.disabled):not(:disabled):focus { .btn-secondary:hover, .btn-secondary:active, .btn-secondary:visited:hover, .btn-secondary:visited:active, .btn-secondary:not(.disabled):not(:disabled):hover, .btn-secondary:not(.disabled):not(:disabled):active {
background-color: #52575d; background-color: #52575d;
color: white; } color: white;
outline-color: #52575d; }
.btn-warning { .btn-warning {
background-color: #ff922b; background-color: #ff922b;
outline-color: #ff922b;
color: #fefefe; color: #fefefe;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); } box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
.btn-warning:visited { .btn-warning:visited {
background-color: #ff922b; background-color: #ff922b;
color: #fefefe; } color: #fefefe; }
.btn-warning:hover, .btn-warning:active, .btn-warning:focus, .btn-warning:visited:hover, .btn-warning:visited:active, .btn-warning:visited:focus, .btn-warning:not(.disabled):not(:disabled):hover, .btn-warning:not(.disabled):not(:disabled):active, .btn-warning:not(.disabled):not(:disabled):focus { .btn-warning:hover, .btn-warning:active, .btn-warning:visited:hover, .btn-warning:visited:active, .btn-warning:not(.disabled):not(:disabled):hover, .btn-warning:not(.disabled):not(:disabled):active {
background-color: #ffa24b; background-color: #ffa24b;
color: white; } color: white;
outline-color: #ffa24b; }
.btn-danger { .btn-danger {
background-color: #e33d22; background-color: #e33d22;
outline-color: #e33d22;
color: #fefefe; color: #fefefe;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); } box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
.btn-danger:visited { .btn-danger:visited {
background-color: #e33d22; background-color: #e33d22;
color: #fefefe; } color: #fefefe; }
.btn-danger:hover, .btn-danger:active, .btn-danger:focus, .btn-danger:visited:hover, .btn-danger:visited:active, .btn-danger:visited:focus, .btn-danger:not(.disabled):not(:disabled):hover, .btn-danger:not(.disabled):not(:disabled):active, .btn-danger:not(.disabled):not(:disabled):focus { .btn-danger:hover, .btn-danger:active, .btn-danger:visited:hover, .btn-danger:visited:active, .btn-danger:not(.disabled):not(:disabled):hover, .btn-danger:not(.disabled):not(:disabled):active {
background-color: #e75a43; background-color: #e75a43;
color: white; } color: white;
outline-color: #e75a43; }
.btn-info { .btn-info {
background-color: #3bc9db; background-color: #3bc9db;
outline-color: #3bc9db;
color: #fefefe; color: #fefefe;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); } box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
.btn-info:visited { .btn-info:visited {
background-color: #3bc9db; background-color: #3bc9db;
color: #fefefe; } color: #fefefe; }
.btn-info:hover, .btn-info:active, .btn-info:focus, .btn-info:visited:hover, .btn-info:visited:active, .btn-info:visited:focus, .btn-info:not(.disabled):not(:disabled):hover, .btn-info:not(.disabled):not(:disabled):active, .btn-info:not(.disabled):not(:disabled):focus { .btn-info:hover, .btn-info:active, .btn-info:visited:hover, .btn-info:visited:active, .btn-info:not(.disabled):not(:disabled):hover, .btn-info:not(.disabled):not(:disabled):active {
background-color: #58d1e0; background-color: #58d1e0;
color: white; } color: white;
outline-color: #58d1e0; }
.btn-success { .btn-success {
background-color: #51cf66; background-color: #51cf66;
outline-color: #51cf66;
color: #fefefe; color: #fefefe;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); } box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
.btn-success:visited { .btn-success:visited {
background-color: #51cf66; background-color: #51cf66;
color: #fefefe; } color: #fefefe; }
.btn-success:hover, .btn-success:active, .btn-success:focus, .btn-success:visited:hover, .btn-success:visited:active, .btn-success:visited:focus, .btn-success:not(.disabled):not(:disabled):hover, .btn-success:not(.disabled):not(:disabled):active, .btn-success:not(.disabled):not(:disabled):focus { .btn-success:hover, .btn-success:active, .btn-success:visited:hover, .btn-success:visited:active, .btn-success:not(.disabled):not(:disabled):hover, .btn-success:not(.disabled):not(:disabled):active {
background-color: #6bd67d; background-color: #6bd67d;
color: white; } color: white;
outline-color: #6bd67d; }
.btn-muted { .btn-muted {
background-color: #adb5bd; background-color: #adb5bd;
outline-color: #adb5bd;
color: #fefefe; color: #fefefe;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); } box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
.btn-muted:visited { .btn-muted:visited {
background-color: #adb5bd; background-color: #adb5bd;
color: #fefefe; } color: #fefefe; }
.btn-muted:hover, .btn-muted:active, .btn-muted:focus, .btn-muted:visited:hover, .btn-muted:visited:active, .btn-muted:visited:focus, .btn-muted:not(.disabled):not(:disabled):hover, .btn-muted:not(.disabled):not(:disabled):active, .btn-muted:not(.disabled):not(:disabled):focus { .btn-muted:hover, .btn-muted:active, .btn-muted:visited:hover, .btn-muted:visited:active, .btn-muted:not(.disabled):not(:disabled):hover, .btn-muted:not(.disabled):not(:disabled):active {
background-color: #b9c0c7; background-color: #b9c0c7;
color: white; } color: white;
outline-color: #b9c0c7; }
.head-blue .card-header, .head-blue .menu-header, .head-blue.header-bg th { .head-blue .card-header, .head-blue .menu-header, .head-blue.header-bg th {
background-color: #339af0; background-color: #339af0;
@ -2643,7 +2663,9 @@ header h1 {
margin-top: 0rem; margin-top: 0rem;
width: 100%; } width: 100%; }
header h1 a, header h1 a:visited, header h1 a:hover { header h1 a, header h1 a:visited, header h1 a:hover {
background-color: transparent; } background-color: transparent;
outline-color: white;
display: block; }
.osd { .osd {
background-color: rgba(0, 0, 0, 0.3); } background-color: rgba(0, 0, 0, 0.3); }