High contrast mode findings (#1892)

Fixes most of the flaws in high contrast mode.
This commit is contained in:
Florian Scholdei
2021-12-16 17:54:39 +01:00
committed by GitHub
parent 089862b7ef
commit 16960d742e
42 changed files with 937 additions and 722 deletions

View File

@@ -174,33 +174,6 @@ footer.footer {
background-color: $danger-25;
}
// TODO
/*.has-background-danger-high-contrast {
background-color: $high-contrast-danger;
}
.has-background-danger-high-contrast-75 {
background-color: $high-contrast-danger-75;
}
.has-background-danger-high-contrast-50 {
background-color: $high-contrast-danger-50;
}
.has-background-danger-high-contrast-25 {
background-color: $high-contrast-danger-25;
}
.has-background-high-contrast-light-gray {
background-color: $high-contrast-light-gray;
}
.has-background-high-contrast-light-gray-75 {
background-color: $light-75;
}
.has-background-high-contrast-light-gray-50 {
background-color: $light-50;
}
.has-background-high-contrast-light-gray-25 {
background-color: $light-25;
}*/
// tags
.tag:not(body) {
border: 1px solid transparent;
@@ -370,6 +343,35 @@ footer.footer {
}
}
.popover {
position: absolute;
z-index: 100;
width: 30em;
display: block;
&:before {
position: absolute;
content: "";
border-style: solid;
pointer-events: none;
height: 0;
width: 0;
top: 100%;
left: 5.5em;
border-color: transparent;
border-width: 0.4rem;
margin-left: -0.4rem;
margin-top: -0.4rem;
-webkit-transform-origin: center;
transform-origin: center;
transform: rotate(-45deg);
}
}
.notifications .dropdown-menu:before {
border: 0.4rem solid transparent;
}
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/solid";
@@ -551,7 +553,7 @@ ul.is-separated {
// panels
.panel {
border: 1px solid #dbdbdb;
border: 1px solid $border;
border-radius: 0.25rem;
.panel-heading {
@@ -833,6 +835,11 @@ form .field:not(.is-grouped) {
color: $text !important;
}
.has-background-accent {
background: $background-accent;
.autocomplete-entry > div {
border-color: $blue-light;
&:hover,
&.is-hovered {
border-color: #4a4a4a;
}
}