Input styles updates (#1900)
* Rename class * Update styles * Use input-group class * Update styles * Update input line height * Update border styles * Update styles * Update line height * Update styles * Update line height * Update line height * Update outline item style
This commit is contained in:
toasted-nutbread
GitHub
parent
388328b85b
commit
e56734fc88
@ -258,21 +258,8 @@
|
||||
:root[data-page-type=popup]:not([data-theme]) body {
|
||||
background-color: transparent;
|
||||
}
|
||||
:root {
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-size: var(--font-size);
|
||||
line-height: var(--line-height);
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-size: inherit;
|
||||
}
|
||||
ol, ul {
|
||||
margin-top: 0;
|
||||
|
||||
@ -23,6 +23,9 @@
|
||||
--font-size-small-no-units: 12;
|
||||
--font-size-small: calc(1em * var(--font-size-small-no-units) / var(--font-size-no-units));
|
||||
|
||||
--line-height-no-units: 20;
|
||||
--line-height: calc(var(--line-height-no-units) / var(--font-size-no-units));
|
||||
|
||||
--animation-duration: 0.125s;
|
||||
--animation-duration2: calc(var(--animation-duration) * 2);
|
||||
|
||||
@ -44,6 +47,7 @@
|
||||
--material-arrow-dimension1: calc(5em / var(--font-size-no-units));
|
||||
--material-arrow-dimension2: calc(10em / var(--font-size-no-units));
|
||||
|
||||
--button-border-radius: 0.3em;
|
||||
--button-default-shadow-params: 0 0.0625em 0.125em 0;
|
||||
|
||||
--thin-border-size: calc(1em / var(--font-size-no-units));
|
||||
@ -179,6 +183,26 @@
|
||||
}
|
||||
|
||||
|
||||
/* Root styles */
|
||||
:root {
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-size: var(--font-size);
|
||||
line-height: var(--line-height);
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
|
||||
/* Text styles */
|
||||
.light {
|
||||
color: var(--text-color-light2);
|
||||
@ -666,7 +690,7 @@ label.radio {
|
||||
select {
|
||||
width: var(--input-width-large);
|
||||
height: var(--input-height);
|
||||
line-height: var(--input-height);
|
||||
line-height: var(--line-height);
|
||||
border: 0;
|
||||
border-radius: var(--input-border-radius);
|
||||
box-sizing: border-box;
|
||||
@ -693,7 +717,7 @@ input[type=text],
|
||||
input[type=number] {
|
||||
width: var(--input-width);
|
||||
height: var(--input-height);
|
||||
line-height: var(--input-height);
|
||||
line-height: var(--line-height);
|
||||
color: var(--text-color);
|
||||
font-size: var(--input-font-size);
|
||||
background-color: var(--input-background-color);
|
||||
@ -761,17 +785,61 @@ input[type=number][data-invalid=true]:focus {
|
||||
box-shadow: 0 0 0 calc(2em / var(--font-size-no-units)) var(--danger-color);
|
||||
outline: none;
|
||||
}
|
||||
input[type=text].input-with-suffix-button,
|
||||
input[type=number].input-with-suffix-button {
|
||||
input[type=text].code,
|
||||
input[type=number].code {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
}
|
||||
|
||||
/* Input groups */
|
||||
.input-group {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: stretch;
|
||||
}
|
||||
.input-group>input[type=text],
|
||||
.input-group>input[type=number],
|
||||
.input-group>button.input-button {
|
||||
flex: 1 1 auto;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-right-style: none;
|
||||
z-index: 1;
|
||||
}
|
||||
input[type=text].code,
|
||||
input[type=number].code {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
.input-suffix,
|
||||
button.input-suffix {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
border-radius: var(--input-border-radius);
|
||||
border-style: none;
|
||||
border-width: 0;
|
||||
height: var(--input-height);
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.5em;
|
||||
position: relative;
|
||||
}
|
||||
.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) {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.input-suffix:not(button) {
|
||||
background-color: var(--input-background-color);
|
||||
}
|
||||
input[type=text]:invalid~.input-suffix:not(button),
|
||||
input[type=number]: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) {
|
||||
border-color: var(--danger-color);
|
||||
border-width: var(--thin-border-size);
|
||||
border-style: solid;
|
||||
border-left-style: none;
|
||||
border-right-style: none;
|
||||
}
|
||||
|
||||
|
||||
@ -818,7 +886,7 @@ button,
|
||||
|
||||
border-width: var(--thin-border-size);
|
||||
border-style: solid;
|
||||
border-radius: 0.3em;
|
||||
border-radius: var(--button-border-radius);
|
||||
padding: var(--button-padding-vertical) var(--button-padding-horizontal);
|
||||
font-weight: bold;
|
||||
font-size: inherit;
|
||||
@ -979,48 +1047,31 @@ button.input-button {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
button.input-button.input-with-suffix-button {
|
||||
flex: 1 1 auto;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-right-style: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Input suffix button */
|
||||
button.input-suffix-button {
|
||||
button.input-suffix {
|
||||
--button-content-color: var(--button-default-icon-color);
|
||||
--button-border-color: var(--input-background-color);
|
||||
--button-background-color: var(--input-background-color);
|
||||
--button-hover-background-color: var(--input-background-color-dark);
|
||||
--button-active-background-color: var(--input-background-color-darker);
|
||||
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-style: none;
|
||||
border-width: 0;
|
||||
height: var(--input-height);
|
||||
line-height: var(--input-height);
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.5em;
|
||||
position: relative;
|
||||
}
|
||||
button.input-suffix-button.light-icon {
|
||||
button.input-suffix.light-icon {
|
||||
--button-content-color: var(--button-default-icon-color-light);
|
||||
}
|
||||
button.input-suffix-button.input-suffix-icon-button {
|
||||
button.input-suffix.input-suffix-icon-button {
|
||||
width: 2.125em;
|
||||
}
|
||||
button.input-suffix-button.input-suffix-icon-button>.icon {
|
||||
button.input-suffix.input-suffix-icon-button>.icon {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--button-current-content-color);
|
||||
}
|
||||
input[type=text]:invalid+button.input-suffix-button,
|
||||
input[type=number]:invalid+button.input-suffix-button,
|
||||
input[type=text][data-invalid=true]+button.input-suffix-button,
|
||||
input[type=number][data-invalid=true]+button.input-suffix-button {
|
||||
input[type=text]:invalid~button.input-suffix,
|
||||
input[type=number]:invalid~button.input-suffix,
|
||||
input[type=text][data-invalid=true]~button.input-suffix,
|
||||
input[type=number][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);
|
||||
|
||||
@ -42,7 +42,6 @@
|
||||
--font-size-no-units: 14;
|
||||
--font-size: calc(1px * var(--font-size-no-units));
|
||||
--font-size-small: 12px;
|
||||
--line-height-default: calc(20 / var(--font-size-no-units));
|
||||
--outline-item-height: 40px;
|
||||
--outline-item-icon-size: 32px;
|
||||
--input-short-width: calc(var(--input-width-large) / 2 - var(--padding) / 2);
|
||||
@ -101,19 +100,7 @@
|
||||
|
||||
|
||||
/* Common styles */
|
||||
:root {
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
font-size: var(--font-size);
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
color: var(--text-color);
|
||||
line-height: var(--line-height-default);
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
p {
|
||||
@ -407,10 +394,10 @@ a.heading-link-light {
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: var(--outline-item-height);
|
||||
line-height: var(--outline-item-height);
|
||||
padding: 0 1.5em;
|
||||
cursor: pointer;
|
||||
transition: background-color var(--animation-duration) ease-in-out;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.outline-item,
|
||||
.outline-item:hover {
|
||||
@ -423,6 +410,7 @@ a.heading-link-light {
|
||||
min-width: var(--outline-item-icon-size);
|
||||
min-height: var(--outline-item-icon-size);
|
||||
position: relative;
|
||||
line-height: var(--outline-item-height);
|
||||
}
|
||||
.outline-item-left-warning-badge {
|
||||
position: absolute;
|
||||
@ -668,7 +656,7 @@ input[type=number].short-height,
|
||||
select.short-height {
|
||||
height: var(--input-short-height);
|
||||
margin-top: calc(var(--settings-group-right-max-height) - var(--input-short-height) - var(--font-size-small));
|
||||
line-height: var(--input-short-height);
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
.settings-item-button-group-container {
|
||||
max-height: none;
|
||||
@ -1544,10 +1532,7 @@ select.profile-condition-operator {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.anki-card-field-value-container {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
width: 100%;
|
||||
align-items: stretch;
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
input.anki-card-field-value {
|
||||
@ -1597,10 +1582,7 @@ code.anki-field-marker {
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
.anki-card-templates-test-input-container {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
width: 100%;
|
||||
align-items: stretch;
|
||||
}
|
||||
.anki-card-templates-test-container {
|
||||
flex: 0 1 auto;
|
||||
@ -1679,7 +1661,7 @@ code.anki-field-marker {
|
||||
padding: 0 var(--modal-padding-horizontal);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.scan-input-suffix-cell {
|
||||
.scan-input-menu-button-cell {
|
||||
grid-area: 1/4/2/5;
|
||||
}
|
||||
.scan-input-index-cell {
|
||||
@ -1697,10 +1679,7 @@ code.anki-field-marker {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.scan-input-content-cell {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
width: 100%;
|
||||
align-items: stretch;
|
||||
}
|
||||
.scan-input-prefix-cell[data-property=include] {
|
||||
grid-area: 1/2/2/3;
|
||||
@ -2008,9 +1987,6 @@ input.sentence-termination-character-input2 {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.hotkey-list-item-enabled-button-container {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: stretch;
|
||||
margin-left: 0.375em;
|
||||
}
|
||||
button.hotkey-list-item-enabled-button {
|
||||
|
||||
@ -2618,22 +2618,22 @@
|
||||
<template id="scan-input-template"><div class="scan-input" data-show-advanced="false">
|
||||
<div class="scan-input-grid">
|
||||
<div class="scan-input-index-cell generic-list-index-prefix"></div>
|
||||
<div class="scan-input-suffix-cell">
|
||||
<div class="scan-input-menu-button-cell">
|
||||
<div class="input-height-icon-button-container">
|
||||
<button class="icon-button scanning-input-menu-button" data-menu="scanning-inputs-menu" data-menu-position="below left"><span class="icon-button-inner"><span class="icon" data-icon="kebab-menu"></span></span></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="scan-input-prefix-cell" data-property="include"><span>Required inputs:</span></div>
|
||||
<div class="scan-input-content-cell" data-property="include">
|
||||
<input type="text" class="input-with-suffix-button scan-input-field" autocomplete="off" spellcheck="false" placeholder="No inputs" data-property="include">
|
||||
<button class="input-suffix-button input-suffix-icon-button light-icon mouse-button" data-property="include"><span class="icon" data-icon="mouse"></span></button>
|
||||
<div class="scan-input-content-cell input-group" data-property="include">
|
||||
<input type="text" class="scan-input-field" autocomplete="off" spellcheck="false" placeholder="No inputs" data-property="include">
|
||||
<button class="input-suffix input-suffix-icon-button light-icon mouse-button" data-property="include"><span class="icon" data-icon="mouse"></span></button>
|
||||
</div>
|
||||
|
||||
<div class="scan-input-prefix-cell" data-property="exclude"><span>Excluded inputs:</span></div>
|
||||
<div class="scan-input-content-cell" data-property="exclude">
|
||||
<input type="text" class="input-with-suffix-button scan-input-field" autocomplete="off" spellcheck="false" placeholder="No inputs" data-property="exclude">
|
||||
<button class="input-suffix-button input-suffix-icon-button light-icon mouse-button" data-property="exclude"><span class="icon" data-icon="mouse"></span></button>
|
||||
<div class="scan-input-content-cell input-group" data-property="exclude">
|
||||
<input type="text" class="scan-input-field" autocomplete="off" spellcheck="false" placeholder="No inputs" data-property="exclude">
|
||||
<button class="input-suffix input-suffix-icon-button light-icon mouse-button" data-property="exclude"><span class="icon" data-icon="mouse"></span></button>
|
||||
</div>
|
||||
|
||||
<div class="scan-input-prefix-cell scan-input-options-cell" data-property="types"><span>Input types:</span></div>
|
||||
@ -2971,9 +2971,9 @@
|
||||
|
||||
<!-- Anki card templates -->
|
||||
<template id="anki-card-field-template"><div class="anki-card-field-name-container"><span class="anki-card-field-name"></span></div>
|
||||
<div class="anki-card-field-value-container">
|
||||
<input type="text" class="anki-card-field-value input-with-suffix-button" autocomplete="off">
|
||||
<button class="anki-card-field-value-menu-button input-suffix-button input-suffix-icon-button light-icon" data-menu-position="v-center left"><span class="icon" data-icon="material-down-arrow"></span></button>
|
||||
<div class="anki-card-field-value-container input-group">
|
||||
<input type="text" class="anki-card-field-value" autocomplete="off">
|
||||
<button class="anki-card-field-value-menu-button input-suffix input-suffix-icon-button light-icon" data-menu-position="v-center left"><span class="icon" data-icon="material-down-arrow"></span></button>
|
||||
</div></template>
|
||||
|
||||
<template id="anki-card-terms-field-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"><div class="popup-menu-body"></div></div></div></template>
|
||||
@ -3008,9 +3008,9 @@
|
||||
<div class="anki-card-templates-test-table-header">Card field</div>
|
||||
<div></div>
|
||||
<input type="text" id="anki-card-templates-test-text-input" class="form-control" value="読め" placeholder="Preview text" autocomplete="off" lang="ja">
|
||||
<div class="anki-card-templates-test-input-container">
|
||||
<input type="text" class="input-with-suffix-button" id="anki-card-templates-test-field-input" value="{expression}" placeholder="{marker}" autocomplete="off" spellcheck="false">
|
||||
<button class="input-suffix-button input-suffix-icon-button light-icon" id="anki-card-templates-test-field-menu-button" data-menu="anki-card-all-field-menu" data-menu-position="below left"><span class="icon" data-icon="material-down-arrow"></span></button>
|
||||
<div class="anki-card-templates-test-input-container input-group">
|
||||
<input type="text" id="anki-card-templates-test-field-input" value="{expression}" placeholder="{marker}" autocomplete="off" spellcheck="false">
|
||||
<button class="input-suffix input-suffix-icon-button light-icon" id="anki-card-templates-test-field-menu-button" data-menu="anki-card-all-field-menu" data-menu-position="below left"><span class="icon" data-icon="material-down-arrow"></span></button>
|
||||
</div>
|
||||
<button id="anki-card-templates-test-render-button">Test</button>
|
||||
</div>
|
||||
@ -3352,14 +3352,14 @@
|
||||
<div class="hotkey-list-item-input-label-cell">Input:</div>
|
||||
<div class="hotkey-list-item-input-cell">
|
||||
<input type="text" class="hotkey-list-item-input" autocomplete="off" spellcheck="false" placeholder="No input" data-property="include">
|
||||
<div class="hotkey-list-item-enabled-button-container">
|
||||
<button class="hotkey-list-item-enabled-button input-button input-with-suffix-button">
|
||||
<div class="hotkey-list-item-enabled-button-container input-group">
|
||||
<button class="hotkey-list-item-enabled-button input-button">
|
||||
<label class="hotkey-list-item-enabled-button-label button-inner-label">
|
||||
<span class="checkbox"><input type="checkbox" class="hotkey-list-item-enabled"><span class="checkbox-body"><span class="checkbox-fill"></span><span class="checkbox-border"></span><span class="checkbox-check"></span></span></span>
|
||||
<span>Enabled</span>
|
||||
</label>
|
||||
</button>
|
||||
<button class="hotkey-list-item-scopes-button input-suffix-button input-suffix-icon-button light-icon" data-menu="hotkey-list-item-scopes-menu" data-menu-position="below left"><span class="icon" data-icon="material-down-arrow"></span></button>
|
||||
<button class="hotkey-list-item-scopes-button input-suffix input-suffix-icon-button light-icon" data-menu="hotkey-list-item-scopes-menu" data-menu-position="below left"><span class="icon" data-icon="material-down-arrow"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user