Small CSS improvements

- Helper (<small>) for <select> and <textarea>
- Better roll for a.contrast
This commit is contained in:
Lucas 2020-08-08 10:05:47 +07:00
parent 195e0c6b6b
commit 6cc98ad873
12 changed files with 43 additions and 15 deletions

View file

@ -27,6 +27,7 @@
--contrast-hover: #0d1419;
--contrast-focus: rgba(115, 130, 140, 0.125);
--contrast-border: rgba(255, 223, 128, 0.5);
--contrast-border-h: #ffdf80;
--contrast-inverse: #FFF;
--input-background: #FFF;
--input-border: #c8d1d8;
@ -73,6 +74,7 @@
--contrast-hover: #FFF;
--contrast-focus: rgba(89, 107, 120, 0.25);
--contrast-border: rgba(255, 223, 128, 0.33);
--contrast-border-h: rgba(255, 223, 128, 0.5);
--contrast-inverse: #10181e;
--input-background: #10181e;
--input-border: #374956;
@ -673,7 +675,9 @@ form small {
color: var(--muted-text);
}
input + small {
input + small,
select + small,
textarea + small {
margin-top: -1rem;
margin-bottom: 1.5rem;
}

File diff suppressed because one or more lines are too long

View file

@ -27,6 +27,7 @@
--contrast-hover: #0d1419;
--contrast-focus: rgba(115, 130, 140, 0.125);
--contrast-border: rgba(255, 223, 128, 0.5);
--contrast-border-h: #ffdf80;
--contrast-inverse: #FFF;
--input-background: #FFF;
--input-border: #c8d1d8;
@ -73,6 +74,7 @@
--contrast-hover: #FFF;
--contrast-focus: rgba(89, 107, 120, 0.25);
--contrast-border: rgba(255, 223, 128, 0.33);
--contrast-border-h: rgba(255, 223, 128, 0.5);
--contrast-inverse: #10181e;
--input-background: #10181e;
--input-border: #374956;
@ -437,7 +439,9 @@ a.contrast:not([role="button"]) {
}
a.contrast:not([role="button"]):hover, a.contrast:not([role="button"]):active, a.contrast:not([role="button"]):focus {
box-shadow: inset 0 -0.33rem 0 var(--contrast-border-h);
color: var(--contrast-hover);
text-decoration: none;
}
a.contrast:not([role="button"]):focus {
@ -779,7 +783,9 @@ form small {
color: var(--muted-text);
}
input + small {
input + small,
select + small,
textarea + small {
margin-top: -1rem;
margin-bottom: 1.5rem;
}

View file

@ -27,6 +27,7 @@
--contrast-hover: #0d1419;
--contrast-focus: rgba(115, 130, 140, 0.125);
--contrast-border: rgba(255, 223, 128, 0.5);
--contrast-border-h: #ffdf80;
--contrast-inverse: #FFF;
--input-background: #FFF;
--input-border: #c8d1d8;
@ -73,6 +74,7 @@
--contrast-hover: #FFF;
--contrast-focus: rgba(89, 107, 120, 0.25);
--contrast-border: rgba(255, 223, 128, 0.33);
--contrast-border-h: rgba(255, 223, 128, 0.5);
--contrast-inverse: #10181e;
--input-background: #10181e;
--input-border: #374956;
@ -669,7 +671,9 @@ form small {
color: var(--muted-text);
}
input + small {
input + small,
select + small,
textarea + small {
margin-top: -1rem;
margin-bottom: 1.5rem;
}

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored

File diff suppressed because one or more lines are too long

View file

@ -30,6 +30,7 @@
--contrast-hover: #0d1419;
--contrast-focus: rgba(115, 130, 140, 0.125);
--contrast-border: rgba(255, 223, 128, 0.5);
--contrast-border-h: #ffdf80;
--contrast-inverse: #FFF;
--input-background: #FFF;
--input-border: #c8d1d8;
@ -76,6 +77,7 @@
--contrast-hover: #FFF;
--contrast-focus: rgba(89, 107, 120, 0.25);
--contrast-border: rgba(255, 223, 128, 0.33);
--contrast-border-h: rgba(255, 223, 128, 0.5);
--contrast-inverse: #10181e;
--input-background: #10181e;
--input-border: #374956;
@ -375,7 +377,9 @@ a.contrast:not([role="button"]) {
}
a.contrast:not([role="button"]):hover, a.contrast:not([role="button"]):active, a.contrast:not([role="button"]):focus {
box-shadow: inset 0 -0.33rem 0 var(--contrast-border-h);
color: var(--contrast-hover);
text-decoration: none;
}
a.contrast:not([role="button"]):focus {
@ -691,7 +695,9 @@ form small {
color: var(--muted-text);
}
input + small {
input + small,
select + small,
textarea + small {
margin-top: -1rem;
margin-bottom: 1.5rem;
}

File diff suppressed because one or more lines are too long