yomichan/ext/bg/css/settings2.css
toasted-nutbread 773d67e75a
Split material css (#1175)
* Separate material styles into a separate file

* Improve action button styles

* Rename --font-size-default to --font-size

* Remove px units

* Remove some material vars

* Fix some variable names

* Define variables

* Remove --shadow-vertical

* Revert name change

* Move var

* Rename var

* Update vars

* Remove redundant vars

* Update search styles

* Update styles

* Update colors

* Update variable names

* Include material.css on float.html page
2020-12-29 21:33:57 -05:00

1856 lines
47 KiB
CSS

/*
* Copyright (C) 2020 Yomichan Authors
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
/* Variables */
:root {
--padding: 10px;
--padding-negative: calc(var(--padding) * -1);
--main-content-size: 700px;
--main-content-padding: 10px;
--sidebar-size: 200px;
--preview-sidebar-expanded-width: 400px;
--shadow-vertical: 0 1px 4px 0 var(--shadow-color), 0 2px 2px 0 var(--shadow-color);
--shadow-vertical-strong: 0 1px 3px 1px var(--shadow-color), 0 2px 4px 3px var(--shadow-color);
--shadow-vertical-top: 0 -1px 4px 0 var(--shadow-color), 0 -2px 2px 0 var(--shadow-color);
--shadow-left: -1px 0 4px 0 var(--shadow-color), -2px 0 2px 0 var(--shadow-color);
--shadow-right: 1px 0 4px 0 var(--shadow-color), 2px 0 2px 0 var(--shadow-color);
--settings-group-horizontal-margin: 0;
--settings-group-inner-vertical-margin: 0.75em;
--settings-group-inner-vertical-padding: 0.85em;
--settings-group-inner-horizontal-padding: 1.5em;
--settings-group-inner-horizontal-padding-half: calc(var(--settings-group-inner-horizontal-padding) * 0.5);
--settings-group-inner-horizontal-padding-half-wrappable: var(--settings-group-inner-horizontal-padding-half);
--settings-group-inner-horizontal-padding-fourth: calc(var(--settings-group-inner-horizontal-padding) * 0.25);
--settings-group-border-radius: 0.3em;
--settings-group-right-max-height: 40px;
--settings-group-wrap: nowrap;
--show-preview-label-height: 40px;
--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: 80px;
--input-height-short: 24px;
--input-half-width: calc(var(--input-width-large) / 2 - var(--padding) / 2);
--fab-button-size: 56px;
--fab-button-padding: 16px;
--modal-width: 600px;
--modal-height: 400px;
--modal-width-small: 400px;
--modal-height-small: 200px;
--modal-transition-offset: -64px;
--menu-border-radius: 0.3em;
--menu-item-hover-color: #bbbbbb;
--menu-item-active-color: #aaaaaa;
--link-color: var(--accent-color);
--link-color-hover: var(--accent-color-dark);
--text-color-light: #666666;
--text-color-lighter: #888888;
--separator-color1: #cccccc;
--separator-color2: #eeeeee;
--outline-item-background-color: rgba(13, 13, 13, 0.0);
--outline-item-background-color-hover: rgba(13, 13, 13, 0.15);
--warning-color: #96751c;
--warning-color-light: hsl(44, 80%, 65%);
--dim-background-color: rgba(0, 0, 0, 0.5);
--content-dimmer-color: rgba(0, 0, 0, 0.1);
--modal-padding-horizontal: 1em;
--modal-padding-vertical: 0.625em;
--modal-padding-vertical-half: calc(var(--modal-padding-vertical) * 0.5);
--modal-button-spacing: 0.625em;
}
:root:not([data-loaded=true]) {
--animation-duration: 0s;
}
:root[data-theme=dark] {
--separator-color1: #333333;
--separator-color2: #222222;
}
@media (max-width: 700px) {
:root {
--settings-group-horizontal-margin: calc(var(--main-content-padding) * -1);
--settings-group-inner-horizontal-padding: var(--main-content-padding);
--settings-group-border-radius: 0;
}
}
@media (max-width: 400px) {
:root {
--settings-group-horizontal-margin: calc(var(--main-content-padding) * -1);
--settings-group-inner-horizontal-padding: var(--main-content-padding);
--settings-group-inner-horizontal-padding-half-wrappable: var(--settings-group-inner-horizontal-padding);
--settings-group-wrap: wrap;
}
}
/* 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 {
margin: 0;
}
ol,
ul {
margin: 0;
padding: 0 0 0 1.5em;
}
p+p, p+ol, p+ul,
ol+p, ol+ol, ol+ul,
ul+p, ul+ol, ul+ul,
li {
margin: 0.425em 0;
}
a {
color: var(--link-color);
text-decoration: none;
cursor: pointer;
}
a:hover {
color: var(--link-color-hover);
text-decoration: underline;
}
code {
font-family: 'Courier New', Courier, monospace;
background-color: var(--input-background-color);
}
label {
cursor: pointer;
}
/* Text styles */
.light {
color: var(--text-color-light);
}
.warning-text {
color: var(--warning-color);
}
.danger-text {
color: var(--danger-color);
}
/* Headings */
h1 {
font-size: 2em;
line-height: 1.5em;
margin: 0;
padding: 0.25em 0 0;
font-weight: normal;
box-sizing: border-box;
border-bottom: var(--thin-border-size) solid var(--separator-color1);
}
h2 {
font-size: 1.125em;
font-weight: normal;
line-height: 1.5;
padding: 0.9em 0;
margin: 0.85em 0 0;
}
h3 {
font-size: 1em;
font-weight: bold;
line-height: 1.5;
margin: 1.5em 0 0.85em;
}
.heading-container {
display: flex;
flex-flow: row nowrap;
width: 100%;
align-items: baseline;
}
.heading-container-icon {
flex: 0 0 auto;
align-self: center;
margin: 0.85em 0.75em 0 0;
}
.heading-container-icon>.icon {
display: block;
background-color: var(--button-icon-color);
width: var(--outline-item-icon-size);
height: var(--outline-item-icon-size);
}
.heading-container-left {
flex: 1 1 auto;
}
.heading-container-right {
flex: 0 0 auto;
}
.heading-sub-text {
font-size: calc(1em / 1.125);
color: var(--text-color-light);
}
.heading-link-light {
color: var(--text-color-light);
}
.heading-description,
.heading-description.more {
padding: 0;
margin: 0 0 1.0125em;
}
/* Content layout */
.content-outer {
display: flex;
flex-flow: column nowrap;
width: 100%;
height: 100%;
}
.content {
flex: 1 0 auto;
width: 100%;
height: 100%;
display: flex;
overflow-x: auto;
overflow-y: scroll;
position: relative;
align-items: stretch;
justify-content: center;
}
.content-left {
flex: 1 1 0;
position: sticky;
top: 0;
z-index: 5;
}
.content-center {
flex: 1 1 auto;
width: var(--main-content-size);
padding: 0 var(--main-content-padding);
max-width: var(--main-content-size);
box-sizing: border-box;
}
.content-right {
flex: 1 1 0;
position: sticky;
top: 0;
z-index: 2;
}
#content-scroll-focus {
opacity: 0;
margin: 0;
padding: 0;
outline: none;
background-color: transparent;
display: inline;
width: 0;
height: 0;
line-height: 0;
user-select: none;
}
#content-scroll-focus::-moz-focus-inner {
border: 0;
}
.content-dimmer {
display: block;
visibility: hidden;
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 3;
opacity: 0;
background-color: var(--content-dimmer-color);
pointer-events: none;
transition: opacity var(--animation-duration) ease-in-out, visibility var(--animation-duration) ease-in-out;
}
/* More details toggle */
.more-toggle {
cursor: pointer;
}
.more-toggle.more-only[data-expanded=true],
.more-toggle.no-more-only:not([data-expanded=true]) {
display: none;
}
.more {
margin-top: 0.85em;
}
/* Footer */
.footer-padding {
height: 4.5em;
}
/* Left sidebar */
.sidebar {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: var(--sidebar-size);
max-width: 100%;
background-color: var(--background-color);
transition: max-width var(--animation-duration) ease-in;
}
.sidebar:hover {
max-width: var(--sidebar-size);
transition: max-width var(--animation-duration) ease-out 0.5s,
box-shadow var(--animation-duration) ease-out;
}
.sidebar-inner {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
flex-flow: column nowrap;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
transition: box-shadow var(--animation-duration) ease-out;
}
.sidebar-top {
position: sticky;
top: 0;
height: 2em;
z-index: 1;
}
.sidebar-top-link {
display: block;
background-color: var(--background-color);
height: 100%;
line-height: 2em;
padding: 0 1.5em;
opacity: 1;
visibility: visible;
transition: opacity var(--animation-duration2) ease-in-out, visibility var(--animation-duration2);
}
.sidebar-top-link[hidden] {
display: block;
opacity: 0;
visibility: hidden;
}
.sidebar-top-link:not(:hover) {
color: var(--text-color);
}
.sidebar-top-icon {
display: inline-block;
background-repeat: no-repeat;
background-size: 12px 12px;
width: 12px;
height: 12px;
background-image: url(/mixed/img/up-arrow.svg);
margin-right: calc(var(--padding) * 0.5);
}
.sidebar-body {
padding: 2em 0;
}
.sidebar-bottom {
padding-bottom: 2em;
}
.outline-item {
display: flex;
align-items: center;
width: 100%;
height: var(--outline-item-height);
line-height: var(--outline-item-height);
padding: 0 1.5em;
cursor: pointer;
background-color: var(--outline-item-background-color);
transition: background-color var(--animation-duration) ease-in-out;
}
.outline-item,
.outline-item:hover {
text-decoration: none;
color: var(--text-color);
}
.outline-item:hover {
background-color: var(--outline-item-background-color-hover);
}
.outline-item-left {
display: inline-block;
width: var(--outline-item-icon-size);
height: var(--outline-item-icon-size);
min-width: var(--outline-item-icon-size);
min-height: var(--outline-item-icon-size);
position: relative;
}
.outline-item-left-warning-badge {
position: absolute;
right: calc(var(--outline-item-icon-size) * -0.125);
top: calc(var(--outline-item-icon-size) * -0.125);
width: calc(var(--outline-item-icon-size) * 0.5);
height: calc(var(--outline-item-icon-size) * 0.5);
margin: 0;
padding: 0;
background-color: var(--warning-color-light);
border-radius: calc(var(--outline-item-icon-size) * 0.5);
box-shadow: var(--shadow-vertical);
}
.outline-item-left-warning-badge:not([hidden]) {
display: block;
}
.outline-item-left-warning-badge>.icon {
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: var(--warning-color);
}
.outline-item-label {
white-space: nowrap;
padding-left: var(--padding);
}
.outline-item-icon {
display: block;
background-color: var(--button-icon-color);
width: 100%;
height: 100%;
}
/* Preview sidebar */
.preview-sidebar {
display: flex;
flex-flow: column nowrap;
align-content: center;
justify-content: center;
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 100%;
min-width: 100%;
max-width: 100%;
transition: width var(--animation-duration) ease-in-out,
max-width var(--animation-duration) ease-in-out,
box-shadow var(--animation-duration) ease-in-out;
}
.preview-sidebar-inner {
width: 100%;
height: 100%;
display: flex;
flex-flow: column nowrap;
align-content: center;
justify-content: center;
overflow: hidden;
background-color: var(--background-color);
}
.preview-sidebar-setting {
text-align: center;
flex: 0 0 auto;
}
.preview-frame-container {
position: relative;
align-self: stretch;
flex: 1 1 auto;
visibility: visible;
}
.preview-frame {
border: none;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.show-preview-switch {
display: inline-block;
height: var(--show-preview-label-height);
margin: 0 auto;
line-height: var(--show-preview-label-height);
padding: 0 1.5em;
cursor: pointer;
text-align: left;
color: var(--text-color-lighter);
}
.show-preview-switch-inner {
display: flex;
align-items: center;
}
.show-preview-switch-label {
white-space: nowrap;
padding-left: var(--padding);
}
/* Settings styles */
.settings-group {
margin: 0 var(--settings-group-horizontal-margin);
padding: 0;
box-sizing: border-box;
background-color: var(--background-color-light);
box-shadow: var(--shadow-vertical);
border-radius: var(--settings-group-border-radius);
overflow-x: hidden;
}
.settings-group.settings-group-top-margin {
margin-top: 1.0125em;
}
.settings-item:not([hidden]) {
display: block;
}
.settings-item-outer {
display: block;
width: 100%;
}
.settings-item-inner {
margin-top: var(--settings-group-inner-vertical-margin);
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-content: stretch;
width: 100%;
}
.settings-item-inner.settings-item-inner-wrappable {
flex-wrap: var(--settings-group-wrap);
}
.settings-item-left {
margin-top: calc(var(--settings-group-inner-vertical-margin) * -1);
padding: var(--settings-group-inner-vertical-padding) var(--settings-group-inner-horizontal-padding-half) var(--settings-group-inner-vertical-padding) var(--settings-group-inner-horizontal-padding);
flex: 1 1 auto;
align-self: center;
}
.settings-item-left:last-child {
padding-right: var(--settings-group-inner-horizontal-padding);
}
.settings-item-right {
margin-top: calc(var(--settings-group-inner-vertical-margin) * -1);
padding: var(--settings-group-inner-vertical-padding) var(--settings-group-inner-horizontal-padding) var(--settings-group-inner-vertical-padding) var(--settings-group-inner-horizontal-padding-half);
flex: 0 1 auto;
align-self: stretch;
max-height: var(--settings-group-right-max-height);
display: flex;
flex-flow: row nowrap;
align-items: center;
align-content: center;
justify-content: flex-end;
}
.settings-item-inner.settings-item-inner-wrappable>.settings-item-left {
padding-right: var(--settings-group-inner-horizontal-padding-half-wrappable);
}
.settings-item-inner.settings-item-inner-wrappable>.settings-item-right {
padding-left: var(--settings-group-inner-horizontal-padding-half-wrappable);
}
.settings-item-center {
padding: var(--settings-group-inner-vertical-padding) var(--settings-group-inner-horizontal-padding) var(--settings-group-inner-vertical-padding) var(--settings-group-inner-horizontal-padding);
flex: 0 1 100%;
align-self: flex-start;
text-align: center;
}
.settings-item+.settings-item {
border-top: var(--thin-border-size) solid var(--separator-color2);
}
.settings-item-description {
color: var(--text-color-light);
}
.settings-item-right.open-panel-button-container {
padding: 0.25em 1em 0.25em 0.75em;
max-height: calc(var(--settings-group-right-max-height) + var(--settings-group-inner-vertical-padding) * 2);
}
.settings-item-children {
padding: 0em var(--settings-group-inner-horizontal-padding-half) var(--settings-group-inner-vertical-padding) var(--settings-group-inner-horizontal-padding);
margin-top: 0;
}
.settings-item-children.settings-item-children-group {
padding: 0 0 0 calc(var(--settings-group-inner-horizontal-padding) + var(--settings-group-inner-horizontal-padding));
}
.settings-item-children.settings-item-children-group .settings-item {
border-top: var(--thin-border-size) solid var(--separator-color2);
}
.settings-item-children.settings-item-children-group .settings-item-left {
padding-left: 0;
}
.settings-item-children.settings-item-children-group .settings-item-children {
padding-left: 0;
}
:root:not([data-advanced=true]) .advanced-only {
display: none;
}
.settings-item.settings-item-button,
a.settings-item.settings-item-button {
cursor: pointer;
color: var(--text-color);
text-decoration: none;
background-color: transparent;
transition: background-color var(--animation-duration) ease-in-out;
}
.settings-item.settings-item-button>.settings-item-inner,
.settings-item.settings-item-button>.settings-item-inner>.settings-item-left,
.settings-item.settings-item-button>.settings-item-inner>.settings-item-right {
margin-top: 0;
}
.settings-item.settings-item-button:hover,
.settings-item.settings-item-button:active {
background-color: var(--background-color);
}
.settings-item.settings-item-button .icon-button>.icon-button-inner>.icon {
transition: background-color var(--animation-duration) ease-in-out;
}
.settings-item.settings-item-button:hover .icon-button>.icon-button-inner>.icon,
.settings-item.settings-item-button:active .icon-button>.icon-button-inner>.icon {
background-color: var(--accent-color);
}
/* Settings item groups */
.settings-item-group {
margin-right: var(--padding-negative);
display: flex;
flex-flow: row nowrap;
align-items: center;
align-content: center;
justify-content: flex-end;
}
.settings-item-group.settings-item-group-wrap {
flex-wrap: wrap;
}
.settings-item-group-item {
flex: 0 1 auto;
padding-right: var(--padding);
}
.settings-item-group-item-label {
font-size: var(--font-size-small);
line-height: 1;
}
input[type=text].short-width,
input[type=number].short-width,
select.short-width {
width: var(--input-short);
}
input[type=text].half-width,
input[type=number].half-width,
select.short-width {
width: var(--input-half-width);
}
input[type=text].short-height,
input[type=number].short-height,
select.short-height {
height: var(--input-height-short);
margin-top: calc(var(--settings-group-right-max-height) - var(--input-height-short) - var(--font-size-small));
line-height: var(--input-height-short);
}
.settings-item-button-group-container {
max-height: none;
width: 100%;
}
.settings-item-button-group {
display: flex;
width: 100%;
flex-flow: row wrap;
max-height: none;
justify-content: flex-start;
margin-top: var(--padding-negative);
margin-right: var(--padding-negative);
}
.settings-item-button-group-item {
flex: 0 1 auto;
padding-top: var(--padding);
padding-right: var(--padding);
}
/* Modal */
.modal-container {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
overscroll-behavior: contain;
background-color: var(--dim-background-color);
outline: none;
z-index: 100;
opacity: 1;
visibility: visible;
transition:
opacity var(--animation-duration2) ease-out,
visibility 0s linear;
}
.modal-container[hidden] {
opacity: 0;
visibility: hidden;
transition:
opacity var(--animation-duration2) ease-in,
visibility 0s linear var(--animation-duration2);
}
.modal-container[hidden]:not(.hidden-animating) {
display: none;
}
.modal-content {
max-width: 100%;
max-height: 100%;
width: var(--modal-width);
height: var(--modal-height);
background-color: var(--background-color-light);
flex: 0 1 auto;
border-radius: 0.5em;
transform: translate(0, 0);
transition:
transform var(--animation-duration2) ease-out,
width var(--animation-duration2) ease-in-out,
height var(--animation-duration2) ease-in-out,
border-radius var(--animation-duration2) ease-in-out;
box-shadow: var(--shadow-vertical);
display: flex;
flex-flow: column nowrap;
overflow: hidden;
}
.modal-container[hidden] .modal-content {
pointer-events: none;
}
.modal-content.modal-content-small {
width: var(--modal-width-small);
min-height: var(--modal-height-small);
height: auto;
max-height: 100%;
}
.modal-content.modal-content-full {
width: var(--main-content-size);
height: 100%;
transform: translate(0, 0);
border-radius: 0;
}
.modal-container[hidden] .modal-content {
transform: translate(0, var(--modal-transition-offset));
transition:
transform 0s linear var(--animation-duration2),
width var(--animation-duration2) ease-in-out,
height var(--animation-duration2) ease-in-out,
border-radius var(--animation-duration2) ease-in-out;
}
.modal-header {
flex: 0 0 auto;
padding: var(--modal-padding-vertical) var(--modal-padding-horizontal) var(--modal-padding-vertical-half);
display: flex;
width: 100%;
align-items: center;
box-sizing: border-box;
}
.modal-title {
font-size: 1.125em;
flex: 1 1 auto;
}
.modal-footer {
flex: 0 0 auto;
padding: var(--modal-padding-vertical-half) var(--modal-padding-horizontal) var(--modal-padding-vertical);
margin-right: calc(var(--modal-button-spacing) * -1);
margin-top: calc(var(--modal-button-spacing) * -1);
display: flex;
flex-flow: row wrap;
align-items: flex-end;
justify-items: flex-end;
justify-content: flex-end;
}
.modal-footer>* {
margin-right: var(--modal-button-spacing);
margin-top: var(--modal-button-spacing);
}
.modal-body {
flex: 1 1 auto;
overflow: auto;
padding: var(--modal-padding-vertical-half) var(--modal-padding-horizontal);
}
.modal-body-addon {
flex: 0 0 auto;
padding: var(--modal-padding-vertical-half) var(--modal-padding-horizontal);
}
.modal-body>.settings-item {
margin-left: calc(var(--modal-padding-horizontal) * -1);
}
.modal-body .settings-item {
margin-right: calc(var(--modal-padding-horizontal) * -1);
}
.modal-body .settings-item+.settings-item {
border-top: none
}
.modal-body .settings-item-left {
padding-left: var(--modal-padding-horizontal);
padding-top: var(--settings-group-inner-horizontal-padding-fourth);
padding-bottom: var(--settings-group-inner-horizontal-padding-fourth);
}
.modal-body .settings-item-right {
padding-right: var(--modal-padding-horizontal);
padding-top: var(--settings-group-inner-horizontal-padding-fourth);
padding-bottom: var(--settings-group-inner-horizontal-padding-fourth);
}
.modal-body .settings-item-children {
padding-left: var(--modal-padding-horizontal);
padding-right: var(--modal-padding-horizontal);
padding-bottom: var(--settings-group-inner-horizontal-padding-fourth);
}
.modal-container.modal-container-left {
display: flex;
flex-flow: row nowrap;
width: 100%;
height: 100%;
background-color: transparent;
pointer-events: none;
}
.modal-container.modal-container-left::after {
content: '';
display: block;
overflow-y: scroll;
overflow-x: hidden;
visibility: hidden;
}
.modal-content-container1 {
flex: 1 1 auto;
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 1fr minmax(auto, var(--main-content-size)) 1fr;
grid-template-rows: auto;
align-items: stretch;
}
.modal-content-container2 {
grid-area: 1/1/2/3;
background-color: var(--dim-background-color);
pointer-events: auto;
width: 100%;
height: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
}
.modal-content-container1-fade {
display: block;
position: relative;
grid-area: 1/3/2/4;
}
.modal-content-container1-fade::after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 64px;
background: transparent linear-gradient(to right, var(--dim-background-color), transparent) repeat-y;
}
.modal-header-button-container {
margin-top: calc(-1 * var(--modal-padding-vertical-half));
margin-bottom: calc(-1 * var(--modal-padding-vertical-half));
}
.modal-header-button-group {
display: block;
position: relative;
width: var(--icon-button-size);
height: var(--icon-button-size);
}
.modal-header-button {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
button.icon-button.modal-header-button>.icon-button-inner>.icon {
background-color: var(--button-icon-color-light);
transition: background-color var(--animation-duration) ease-in-out;
}
button.icon-button.modal-header-button:hover>.icon-button-inner>.icon,
button.icon-button.modal-header-button:active>.icon-button-inner>.icon {
background-color: var(--button-icon-color);
}
.modal-header-button[data-modal-action=expand],
.modal-header-button[data-modal-action=collapse] {
visibility: visible;
opacity: 1;
z-index: 1;
transition:
opacity var(--animation-duration2) ease-in-out 0s,
visibility 0s ease-in-out 0s;
}
.modal-content.modal-content-full .modal-header-button[data-modal-action=expand],
.modal-content:not(.modal-content-full) .modal-header-button[data-modal-action=collapse] {
visibility: hidden;
opacity: 0;
pointer-events: none;
z-index: 0;
transition:
opacity var(--animation-duration2) ease-in-out 0s,
visibility 0s ease-in-out var(--animation-duration2);
}
/* Popup menu */
.popup-menu-container {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 101;
outline: none;
overflow: hidden;
}
.popup-menu {
position: absolute;
left: 0;
top: 0;
max-width: 100%;
max-height: 100%;
box-sizing: border-box;
box-shadow: var(--shadow-vertical-strong);
border-radius: var(--menu-border-radius);
background-color: var(--background-color-light);
padding: 0.5em 0;
display: flex;
flex-flow: column nowrap;
align-items: stretch;
min-width: 8em;
overflow: auto;
white-space: nowrap;
}
button.popup-menu-item {
padding: 0.625em 1.5em;
border-radius: 0;
background-color: transparent;
color: var(--text-color);
border: none;
width: 100%;
text-align: left;
font-weight: normal;
font-family: inherit;
}
button.popup-menu-item:hover:not(:disabled),
button.popup-menu-item:focus:not(:disabled) {
background-color: var(--menu-item-hover-color);
}
button.popup-menu-item:active:not(:disabled) {
background-color: var(--menu-item-active-color);
}
button.popup-menu-item:disabled {
color: var(--text-color-light);
}
/* Status footer */
.status-footer-container {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: stretch;
pointer-events: none;
z-index: 2;
}
.status-footer-container2 {
display: flex;
flex-flow: column nowrap;
justify-content: flex-end;
align-items: center;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.status-footer-container::after {
/* Used to add scrollbar width to get better alignment with the main content container */
content: '';
display: block;
flex: 0 0 auto;
overflow-y: scroll;
visibility: hidden;
}
.status-footer {
max-width: var(--main-content-size);
max-height: 100%;
width: 100%;
pointer-events: auto;
overflow: auto;
flex: 0 1 auto;
padding: 0.375em 0;
box-sizing: border-box;
box-shadow: var(--shadow-vertical-top);
background-color: var(--background-color-light);
border-radius: var(--settings-group-border-radius) var(--settings-group-border-radius) 0 0;
transform: none;
opacity: 1;
transition:
transform var(--animation-duration) ease-out,
opacity var(--animation-duration) ease-out;
}
.status-footer-container[hidden] .status-footer {
transform: translate(0, 100%);
opacity: 0;
transition:
transform var(--animation-duration) ease-in,
opacity var(--animation-duration) ease-in;
}
.status-footer-container[hidden]:not(.hidden-animating) {
display: none;
}
.status-footer-header {
display: flex;
width: 100%;
flex-flow: row nowrap;
align-items: center;
padding: 0.375em 0.75em;
box-sizing: border-box;
}
.status-footer-header-label {
font-weight: bold;
flex: 1 1 auto;
}
.status-footer-item {
padding: 0.375em 0.75em;
}
/* Floating action button container */
.fab-container {
display: flex;
visibility: hidden;
align-items: stretch;
position: fixed;
left: 0;
bottom: 0;
top: 0;
right: 0;
pointer-events: none;
z-index: 10;
}
.fab-container::after {
content: '';
display: block;
overflow-y: scroll;
overflow-x: hidden;
visibility: hidden;
}
.fab-container-left {
flex: 1 1 0;
}
.fab-container-center {
flex: 1 1 auto;
width: var(--main-content-size);
padding: 0 var(--main-content-padding);
max-width: var(--main-content-size);
box-sizing: border-box;
display: flex;
justify-content: flex-end;
}
.fab-container-right {
flex: 1 1 0;
position: relative;
}
.fab-container-right-inner1 {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 100%;
min-width: 100%;
max-width: 100%;
transition: width var(--animation-duration) ease-in-out,
max-width var(--animation-duration) ease-in-out;
}
.fab-container-right-inner2 {
display: flex;
flex-flow: column nowrap;
position: absolute;
right: 100%;
bottom: 0;
padding: 0 var(--fab-button-padding) 0 0;
}
.fab-container-item {
padding-bottom: var(--fab-button-padding);
}
button.fab-button {
display: block;
padding: 0;
margin: 0;
pointer-events: all;
}
button.fab-button>.icon-button-inner {
width: var(--fab-button-size);
height: var(--fab-button-size);
}
button.fab-button,
button.fab-button:hover,
button.fab-button:focus,
button.fab-button:active {
background-color: transparent;
box-shadow: none;
}
.fab-button-background {
position: absolute;
display: block;
content: "";
left: 0;
top: 0;
right: 0;
bottom: 0;
border-radius: 50%;
background-color: var(--accent-color);
box-shadow: var(--shadow-vertical);
}
button.fab-button>.icon-button-inner>.icon {
background-color: #ffffff;
}
.fab-container-item.fab-container-item-popup-preview {
display: none;
}
/* Progress */
.progress-labels {
display: flex;
flex-flow: row nowrap;
width: 100%;
}
.progress-info {
flex: 1 0 auto;
}
.progress-status {
text-align: right;
flex: 1 0 auto;
white-space: nowrap;
}
.progress-bar-track {
width: 100%;
height: 4px;
background-color: var(--input-background-color);
}
.progress-bar {
width: 0;
height: 100%;
background-color: var(--accent-color);
}
.progress-bar.danger {
background-color: var(--danger-color);
}
/* Conditional styles */
body.sidebar-visible .content-dimmer {
visibility: visible;
opacity: 1;
}
body.sidebar-visible .sidebar,
body.sidebar-visible .sidebar:hover {
max-width: var(--sidebar-size);
transition: max-width var(--animation-duration) ease-out;
}
body.sidebar-visible .sidebar-inner {
box-shadow: var(--shadow-right);
}
body.sidebar-visible .fab-container {
visibility: visible;
}
body.sidebar-visible .content-left {
z-index: 4;
}
body.preview-sidebar-visible .content-dimmer {
visibility: visible;
opacity: 1;
}
body.preview-sidebar-visible .preview-sidebar {
width: 70vw;
max-width: var(--preview-sidebar-expanded-width);
box-shadow: var(--shadow-left);
}
body.preview-sidebar-visible .content-right {
z-index: 5;
}
body.preview-sidebar-visible .fab-container-right-inner1 {
width: 70vw;
max-width: var(--preview-sidebar-expanded-width);
}
body.preview-sidebar-visible .fab-container {
visibility: visible;
}
body.sidebar-visible .fab-container-item.fab-container-item-popup-preview,
body.preview-sidebar-visible .fab-container-item.fab-container-item-popup-preview {
display: block;
}
/* Specialized settings styles */
#audio-source-list>div+div {
margin-top: 0.375em;
}
#audio-source-list .generic-list-index-prefix {
width: 2em;
text-align: center;
}
#audio-source-list-empty {
display: none;
}
#audio-source-list:empty+#audio-source-list-empty {
display: block;
}
.dictionary-info {
display: flex;
flex-flow: row nowrap;
align-items: center;
}
.dictionary-info-label {
margin-left: 1em;
}
.dictionary-title {
color: inherit;
transition: color var(--animation-duration) ease-in-out;
}
.dictionary-item[data-enabled=false] .dictionary-title {
color: var(--text-color-light);
}
.dictionary-list {
display: flex;
flex-flow: column nowrap;
width: 100%;
}
.dictionary-list>.settings-item,
.dictionary-list>.settings-item+.settings-item {
margin-left: calc(var(--modal-padding-horizontal) * -1);
margin-right: calc(var(--modal-padding-horizontal) * -1);
border-top: var(--thin-border-size) solid var(--separator-color2);
}
.dictionary-details-table {
display: table;
width: 100%
}
.dictionary-details-entry {
display: table-row;
}
.dictionary-details-entry+.dictionary-details-entry>* {
padding-top: 0.25em;
}
.dictionary-details-entry-label {
display: table-cell;
font-weight: bold;
white-space: nowrap;
padding-right: 0.5em;
}
.dictionary-details-entry-info {
display: table-cell;
white-space: pre-line;
}
.dictionary-counts {
width: 100%;
box-sizing: border-box;
font-size: inherit;
max-height: 10em;
line-height: 1.25;
font-family: 'Courier New', Courier, monospace;
white-space: pre;
overflow: auto;
}
.profile-add-button-container {
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
}
.profile-entry-header {
display: flex;
flex-flow: row nowrap;
align-items: center;
}
.profile-entry-header-text {
font-size: var(--font-size-small);
line-height: 1;
text-align: left;
}
.profile-entry {
width: 100%;
display: flex;
flex-flow: row nowrap;
align-items: center;
margin-bottom: 0.25em;
}
.profile-entry-cell:nth-child(1) {
flex: 0 0 auto;
min-width: 2em;
text-align: center;
}
.profile-entry-cell:nth-child(2) {
flex: 0 0 auto;
text-align: center;
width: 3.5em;
}
.profile-entry-cell:nth-child(3) {
flex: 1 1 auto;
}
.profile-entry-cell:nth-child(4) {
flex: 0 0 auto;
min-width: 4em;
text-align: center;
align-self: stretch
}
.profile-entry-cell:nth-child(5) {
flex: 0 0 auto;
width: 2.75em;
text-align: right;
}
input[type=text].profile-entry-name-input {
width: 100%;
}
.profile-entry-condition-count-link {
display: flex;
flex-flow: row nowrap;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
.profile-condition-groups {
margin-left: calc(var(--modal-padding-horizontal) * -1);
margin-right: calc(var(--modal-padding-horizontal) * -1);
padding-left: var(--modal-padding-horizontal);
padding-right: var(--modal-padding-horizontal);
border-top: var(--thin-border-size) solid var(--separator-color2);
}
.profile-condition-group-list-info {
display: flex;
flex-flow: row nowrap;
width: 100%;
align-items: center;
margin-top: 0.5em;
}
.profile-condition-group-list-info-space {
flex: 1 1 auto;
}
.profile-condition-groups-empty-info {
flex: 1 1 auto;
}
.profile-condition-groups:not(:empty)+.profile-condition-group-list-info>.profile-condition-groups-empty-info {
display: none;
}
.profile-condition-group {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.profile-condition-list-info {
width: 100%;
display: flex;
align-items: center;
margin-bottom: 1em;
}
.profile-condition-list-info-space {
flex: 1 1 auto;
}
.profile-condition-group-separator-label {
width: 2.5em;
text-align: center;
margin-right: 0.25em;
}
.profile-condition-group:last-child>.profile-condition-list-info>.profile-condition-group-separator-label {
display: none;
}
.profile-condition {
display: flex;
width: 100%;
flex-flow: row nowrap;
align-items: flex-start;
margin-bottom: 0.25em;
}
.profile-condition-inner {
display: flex;
width: 100%;
flex-flow: row wrap;
align-items: center;
margin-top: -0.25em;
margin-left: -0.25em;
}
.profile-condition-inner>* {
margin-left: 0.25em;
margin-top: 0.25em;
}
.profile-condition-prefix {
width: 2.5em;
text-align: center;
flex: 0 0 auto;
height: var(--input-height);
display: flex;
align-items: center;
justify-content: center;
margin-right: 0.25em;
}
.profile-condition-prefix::after {
content: "if"
}
.profile-condition:nth-child(n+2)>.profile-condition-prefix::after {
content: "and"
}
select.profile-condition-type,
select.profile-condition-operator {
width: auto;
padding-left: 1em;
padding-right: 1em;
flex: 1 0 auto;
}
.profile-condition-input-container {
flex: 1000000 1 auto;
display: flex;
flex-flow: row nowrap;
align-items: center;
}
.profile-condition-input {
width: 100%;
flex: 1 1 auto;
}
.profile-condition-menu-button-container {
margin-left: 0.25em;
}
.anki-card-fields {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto;
align-items: center;
width: 100%;
margin-top: 0.5em;
}
.anki-card-field-name-header {
font-weight: bold;
margin-right: 1em;
}
.anki-card-field-input-header {
font-weight: bold;
}
.anki-card-field-name-container {
display: flex;
flex-flow: row nowrap;
align-self: stretch;
align-items: center;
margin-top: 0.25em;
margin-right: 0.25em;
padding: 0 0.25em;
}
.anki-card-field-name-container[data-invalid=true],
.anki-card-field-name-container[data-order-matches=false][data-index='0'] {
background-color: var(--danger-color-lightest);
border-radius: var(--input-border-radius);
}
.anki-card-field-name {
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 {
flex: 1 1 auto;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
button.anki-card-field-value-menu-button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border: none;
height: var(--input-height);
line-height: var(--input-height);
background-color: var(--input-background-color);
box-sizing: border-box;
padding: 0 0.5em;
}
#anki-error-message-details-toggle {
display: inline-block;
margin-left: 0.5em;
cursor: pointer;
font-weight: bold;
}
#anki-error-message-details {
margin-top: 0.25em;
font-family: 'Courier New', Courier, monospace;
white-space: pre;
overflow-x: auto;
}
.anki-field-marker-info-table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
.anki-field-marker-info-table>thead {
font-weight: bold;
}
code.anki-field-marker {
white-space: nowrap;
font-size: 0.85em;
font-weight: bold;
}
.anki-field-marker-info-table thead tr {
background-color: var(--input-background-color);
}
.anki-field-marker-info-table td {
vertical-align: top;
border: 1px solid var(--separator-color1);
margin: 0;
padding: 0.25em;
}
.anki-field-marker-info-table td:nth-child(n+2) {
border-left: none;
}
.anki-field-marker-info-table td:nth-last-child(n+2) {
border-right: none;
}
.anki-card-templates-layout {
display: flex;
flex-flow: column nowrap;
}
.anki-card-templates-info {
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;
}
.anki-card-templates-test-table {
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-rows: auto;
align-items: center;
width: 100%;
box-sizing: border-box;
column-gap: 0.85em;
}
.anki-card-templates-test-table-header {
font-size: var(--font-size-small);
}
#anki-card-templates-textarea {
flex: 1 1 auto;
width: 100%;
max-width: 100%;
box-sizing: border-box;
resize: none;
min-height: calc(var(--textarea-line-height) * 5 + var(--textarea-padding) * 2);
}
#anki-card-templates-render-result,
#anki-card-templates-compile-result {
flex: 0 0 auto;
width: 100%;
max-width: 100%;
min-height: calc(var(--textarea-line-height) + var(--textarea-padding) * 2);
box-sizing: border-box;
padding: var(--textarea-padding);
font-family: 'Courier New', Courier, monospace;
background-color: var(--input-background-color);
border: none;
border-radius: var(--input-border-radius);
line-height: var(--textarea-line-height);
overflow: auto;
white-space: pre;
}
.custom-popup-css-container {
display: flex;
flex-flow: column nowrap;
}
.custom-popup-css-header {
font-size: var(--font-size-small);
}
#custom-popup-css,
#custom-popup-outer-css {
flex: 1 1 auto;
width: 100%;
max-width: 100%;
box-sizing: border-box;
resize: none;
min-height: calc(var(--textarea-line-height) * 5 + var(--textarea-padding) * 2);
}
.scan-input-list {
margin: 0 calc(var(--modal-padding-horizontal) * -1);
}
.scan-input-list:not(:empty)+.scan-input-list-empty-info {
display: none;
}
.scan-input {
margin: 0.5em 0;
}
.scan-input+.scan-input {
border-top: var(--thin-border-size) solid var(--separator-color2);
}
.scan-input-grid {
display: grid;
grid-template-columns: auto auto 1fr auto;
grid-template-rows: auto;
width: 100%;
column-gap: 0.25em;
row-gap: 0.25em;
margin: 0.5em 0;
padding: 0 var(--modal-padding-horizontal);
box-sizing: border-box;
}
.scan-input-suffix-cell {
grid-area: 1/4/2/5;
}
.scan-input-index-cell {
grid-area: 1/1/2/2;
align-self: center;
width: 2em;
text-align: center;
}
.scan-input-prefix-cell {
align-self: center;
padding-right: 0.5em;
display: flex;
flex-flow: row nowrap;
align-items: center;
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;
}
.scan-input-prefix-cell[data-property=exclude] {
grid-area: 2/2/3/3;
}
.scan-input-prefix-cell[data-property=types] {
grid-area: 3/2/4/3;
}
.scan-input-prefix-cell[data-property=search-options] {
grid-area: 4/2/5/3;
}
.scan-input-prefix-cell[data-property=touch-pen-options] {
grid-area: 5/2/6/3;
}
.scan-input-content-cell[data-property=include] {
grid-area: 1/3/2/4;
}
.scan-input-content-cell[data-property=exclude] {
grid-area: 2/3/3/4;
}
.scan-input-content-cell[data-property=types] {
grid-area: 3/3/4/4;
display: flex;
flex-flow: row wrap;
align-items: center;
}
.scan-input-content-cell[data-property=search-options] {
grid-area: 4/3/5/4;
display: flex;
flex-flow: row wrap;
align-items: center;
}
.scan-input-content-cell[data-property=touch-pen-options] {
grid-area: 5/3/6/4;
display: flex;
flex-flow: column nowrap;
align-items: flex-start;
}
.scan-input-options-cell {
padding: 0.25em 0;
align-self: start;
}
.scan-input:not([data-show-advanced=true]) .scan-input-advanced-only {
display: none;
}
.scan-input-checkbox-item {
display: flex;
flex-flow: row nowrap;
align-items: center;
margin-right: 0.75em;
cursor: pointer;
}
.scan-input-checkbox-item>span {
padding-left: 0.375em;
}
.scan-input-option-heading {
font-weight: bold;
}
.scan-input-option-group {
display: flex;
flex-flow: column nowrap;
padding-left: 1.5em;
align-items: flex-start;
}
#pitch-accents-preview-frame {
border: none;
margin: 0;
padding: 0;
width: 100%;
height: calc(0.425em * 4 + 1em * var(--line-height-default) * 3);
}
/* Generic layouts */
.margin-above {
margin-top: 0.85em;
}
.margin-left {
margin-left: 0.85em;
}
.horizontal-flex {
display: flex;
flex-flow: row wrap;
margin-left: -0.375em;
align-items: center;
align-content: flex-start;
justify-content: flex-start;
}
.horizontal-flex>* {
margin-left: 0.375em;
}
.horizontal-flex-fill {
flex-grow: 1;
}
.generic-list {
counter-reset: generic-list-index;
}
.generic-list-index-prefix::after {
counter-increment: generic-list-index;
content: counter(generic-list-index);
}
.flex-row-nowrap {
display: flex;
flex-flow: row nowrap;
align-items: center;
width: 100%;
}
.flex-row-nowrap.right {
justify-content: flex-end;
}
.flex-row-wrap {
display: flex;
flex-flow: row wrap;
align-items: center;
}
.flex-column-nowrap {
display: flex;
flex-flow: column nowrap;
align-items: flex-start;
width: 100%;
}
.flex-column-nowrap-spaced>* {
margin-top: 0.25em;
}
.flex-label {
display: flex;
flex-flow: row nowrap;
align-items: center;
}
.flex-label>span {
margin-left: 0.375em;
}
.flex-label.no-wrap>span {
white-space: nowrap;
}
.no-wrap {
white-space: nowrap;
}
/* Environment-specific display */
:root[data-browser=edge] [data-show-for-browser]:not([data-show-for-browser~=edge]),
:root[data-browser=edge-legacy] [data-show-for-browser]:not([data-show-for-browser~=edge-legacy]),
:root[data-browser=chrome] [data-show-for-browser]:not([data-show-for-browser~=chrome]),
:root[data-browser=firefox] [data-show-for-browser]:not([data-show-for-browser~=firefox]),
:root[data-browser=firefox-mobile] [data-show-for-browser]:not([data-show-for-browser~=firefox-mobile]),
:root[data-browser=edge] [data-hide-for-browser~=edge],
:root[data-browser=edge-legacy] [data-hide-for-browser~=edge-legacy],
:root[data-browser=chrome] [data-hide-for-browser~=chrome],
:root[data-browser=firefox] [data-hide-for-browser~=firefox],
:root[data-browser=firefox-mobile] [data-hide-for-browser~=firefox-mobile] {
display: none;
}
:root[data-os=mac] [data-show-for-os]:not([data-show-for-os~=mac]),
:root[data-os=win] [data-show-for-os]:not([data-show-for-os~=win]),
:root[data-os=android] [data-show-for-os]:not([data-show-for-os~=android]),
:root[data-os=cros] [data-show-for-os]:not([data-show-for-os~=cros]),
:root[data-os=linux] [data-show-for-os]:not([data-show-for-os~=linux]),
:root[data-os=openbsd] [data-show-for-os]:not([data-show-for-os~=openbsd]),
:root[data-os=mac] [data-hide-for-os~=mac],
:root[data-os=win] [data-hide-for-os~=win],
:root[data-os=android] [data-hide-for-os~=android],
:root[data-os=cros] [data-hide-for-os~=cros],
:root[data-os=linux] [data-hide-for-os~=linux],
:root[data-os=openbsd] [data-hide-for-os~=openbsd] {
display: none;
}
:root[data-manifest-version='2'] [data-show-for-manifest-version]:not([data-show-for-manifest-version~='2']),
:root[data-manifest-version='3'] [data-show-for-manifest-version]:not([data-show-for-manifest-version~='3']),
:root[data-manifest-version='2'] [data-hide-for-manifest-version~='2'],
:root[data-manifest-version='3'] [data-hide-for-manifest-version~='3'] {
display: none;
}
/* Media-specific styles */
@media (max-width: 800px), (hover: none) and (max-width: 1100px) {
.fab-container {
visibility: visible;
}
}
@media (max-width: 700px) {
.sidebar-inner {
box-shadow: var(--shadow-right);
}
}