monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-12-11 13:57:28 +08:00
Code Issues Projects Releases Packages Wiki Activity

using box shadow instead of outline to fix stupid safari not supporting rounded outlines

Browse source 
consistent outline thickness
This commit is contained in:
Miodec 2023-01-25 22:26:35 +01:00
parent a68d163f8d
commit edd69c17aa
5 changed files with 15 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/styles/commandline.scss
View file

@ -44,7 +44,8 @@
width: 100%;
background: var(--bg-color);
border-radius: var(--roundness);
outline: 0.25rem solid transparent;
// outline: 0.25rem solid transparent;
box-shadow: 0 0 0 0.2em transparent;
transition: outline 0.125s;
.searchicon {
@ -156,7 +157,8 @@
&.noBackground {
background: none;
#commandLine {
outline: 0.25rem solid var(--sub-alt-color);
box-shadow: 0 0 0 0.2em var(--sub-alt-color);
// outline: 0.25rem solid var(--sub-alt-color);
}
}
}

3
frontend/src/styles/core.scss
View file

@ -315,7 +315,8 @@ key {
outline: none;
}
&:focus {
outline: 2px solid var(--text-color);
box-shadow: 0 0 0 0.2em var(--text-color);
// outline: 2px solid var(--text-color);
}
&:active {
background: var(--sub-color);

3
frontend/src/styles/inputs.scss
View file

@ -97,7 +97,8 @@ select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
border: none;
outline: 2px solid var(--main-color);
// outline: 2px solid var(--main-color);
box-shadow: 0 0 0 0.2em var(--text-color);
font-family: inherit;
-webkit-text-fill-color: var(--text-color);
-webkit-box-shadow: 0 0 0 1000000px var(--sub-alt-color) inset;

11
frontend/src/styles/notifications.scss
View file

@ -34,13 +34,14 @@
display: grid;
grid-template-columns: min-content auto min-content;
border-radius: var(--roundness);
outline-width: 0.25em;
outline-style: solid;
outline-color: var(--sub-color);
// outline-width: 0.25em;
// outline-style: solid;
// outline-color: var(--sub-color);
box-shadow: 0 0 0 0.2em var(--sub-color);
&.bad {
// background-color: var(--error-color);
outline-color: var(--error-color);
box-shadow: 0 0 0 0.2em var(--error-color);
color: var(--error-color);
.icon {
color: var(--error-color);
@ -48,7 +49,7 @@
}
&.good {
outline-color: var(--main-color);
box-shadow: 0 0 0 0.2em var(--main-color);
color: var(--main-color);
.icon {
color: var(--main-color);

2
frontend/src/styles/settings.scss
View file

@ -54,7 +54,7 @@
align-items: center;
.button.danger {
box-shadow: 0px 0px 0px 2px var(--error-color);
box-shadow: 0 0 0 0.2em var(--error-color);
color: var(--text-color);
&:hover {
background: var(--text-color);