diff options
| -rw-r--r-- | ext/css/display.css | 13 | ||||
| -rw-r--r-- | ext/css/material.css | 117 | ||||
| -rw-r--r-- | ext/css/settings.css | 32 | ||||
| -rw-r--r-- | ext/settings.html | 32 |
4 files changed, 104 insertions, 90 deletions
diff --git a/ext/css/display.css b/ext/css/display.css index 70a61b00..76e8d6a4 100644 --- a/ext/css/display.css +++ b/ext/css/display.css @@ -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; diff --git a/ext/css/material.css b/ext/css/material.css index 3aef69d6..702215bd 100644 --- a/ext/css/material.css +++ b/ext/css/material.css @@ -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); diff --git a/ext/css/settings.css b/ext/css/settings.css index 869f52d4..728e93ee 100644 --- a/ext/css/settings.css +++ b/ext/css/settings.css @@ -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 { diff --git a/ext/settings.html b/ext/settings.html index 576b8fc7..a96a0bad 100644 --- a/ext/settings.html +++ b/ext/settings.html @@ -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> |