aboutsummaryrefslogtreecommitdiff
path: root/ext/css/material.css
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2022-05-30 12:03:24 -0400
committerGitHub <noreply@github.com>2022-05-30 12:03:24 -0400
commit19bba07a8bccb51a9db85c13fd921d825defe753 (patch)
tree4354e2d3396f5957a005256a85f60d239ab30c0d /ext/css/material.css
parent0b5d54e7c66c17383e23855a1c3d4dbb1ea817fc (diff)
Add support for Anki API key (#2169)
* Update material.css to support password fields * Support password * Add "apiKey" setting * Use apiKey * Update options if API key changes * Update tests
Diffstat (limited to 'ext/css/material.css')
-rw-r--r--ext/css/material.css35
1 files changed, 26 insertions, 9 deletions
diff --git a/ext/css/material.css b/ext/css/material.css
index 4d8eda51..4d319349 100644
--- a/ext/css/material.css
+++ b/ext/css/material.css
@@ -723,7 +723,8 @@ select::-ms-expand {
/* Material design inputs */
input[type=text],
-input[type=number] {
+input[type=number],
+input[type=password] {
width: var(--input-width);
height: var(--input-height);
line-height: var(--line-height);
@@ -745,7 +746,8 @@ input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
-input[type=text] {
+input[type=text],
+input[type=password] {
width: var(--input-width-large);
}
textarea {
@@ -763,23 +765,27 @@ select:invalid,
textarea:invalid,
input[type=text]:invalid,
input[type=number]:invalid,
+input[type=password]:invalid,
select[data-invalid=true],
textarea[data-invalid=true],
input[type=text][data-invalid=true],
-input[type=number][data-invalid=true] {
+input[type=number][data-invalid=true],
+input[type=password][data-invalid=true] {
border: var(--thin-border-size) solid var(--danger-color);
}
select,
textarea,
input[type=text],
-input[type=number] {
+input[type=number],
+input[type=password] {
box-shadow: none;
transition: box-shadow calc(var(--animation-duration) / 2) linear;
}
select:focus,
textarea:focus,
input[type=text]:focus,
-input[type=number]:focus {
+input[type=number]:focus,
+input[type=password]:focus {
box-shadow: 0 0 0 calc(2em / var(--font-size-no-units)) var(--input-outline-color);
outline: none;
}
@@ -787,15 +793,18 @@ select:invalid:focus,
textarea:invalid:focus,
input[type=text]:invalid:focus,
input[type=number]:invalid:focus,
+input[type=password]:invalid:focus,
select[data-invalid=true]:focus,
textarea[data-invalid=true]:focus,
input[type=text][data-invalid=true]:focus,
-input[type=number][data-invalid=true]:focus {
+input[type=number][data-invalid=true]:focus,
+input[type=password][data-invalid=true]:focus {
box-shadow: 0 0 0 calc(2em / var(--font-size-no-units)) var(--danger-color);
outline: none;
}
input[type=text].code,
-input[type=number].code {
+input[type=number].code,
+input[type=password].code {
font-family: 'Courier New', Courier, monospace;
}
@@ -807,6 +816,7 @@ input[type=number].code {
}
.input-group>input[type=text],
.input-group>input[type=number],
+.input-group>input[type=password],
.input-group>button.input-button {
flex: 1 1 auto;
border-top-right-radius: 0;
@@ -815,6 +825,7 @@ input[type=number].code {
z-index: 1;
}
.input-suffix,
+.button.input-suffix,
button.input-suffix {
display: flex;
flex-flow: row nowrap;
@@ -828,11 +839,13 @@ button.input-suffix {
position: relative;
}
.input-suffix:not(:first-child),
+.button.input-suffix:not(:first-child),
button.input-suffix:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.input-suffix:not(:last-child),
+.button.input-suffix:not(:last-child),
button.input-suffix:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
@@ -842,8 +855,10 @@ button.input-suffix:not(:last-child) {
}
input[type=text]:invalid~.input-suffix:not(button),
input[type=number]:invalid~.input-suffix:not(button),
+input[type=password]:invalid~.input-suffix:not(button),
input[type=text][data-invalid=true]~.input-suffix:not(button),
-input[type=number][data-invalid=true]~.input-suffix:not(button) {
+input[type=number][data-invalid=true]~.input-suffix:not(button),
+input[type=password][data-invalid=true]~.input-suffix:not(button) {
border-color: var(--danger-color);
border-width: var(--thin-border-size);
border-style: solid;
@@ -1079,8 +1094,10 @@ button.input-suffix.input-suffix-icon-button>.icon {
}
input[type=text]:invalid~button.input-suffix,
input[type=number]:invalid~button.input-suffix,
+input[type=password]:invalid~button.input-suffix,
input[type=text][data-invalid=true]~button.input-suffix,
-input[type=number][data-invalid=true]~button.input-suffix {
+input[type=number][data-invalid=true]~button.input-suffix,
+input[type=password][data-invalid=true]~button.input-suffix {
--button-border-color: var(--danger-color);
--button-hover-border-color: var(--danger-color);
--button-active-border-color: var(--danger-color);