98 lines
3.2 KiB
CSS
98 lines
3.2 KiB
CSS
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */
|
|
|
|
:host {
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-size-tokens */
|
|
--progress-height: 10px;
|
|
--progress-border-width: 0.5px;
|
|
--progress-color: var(--icon-color-success);
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-medium);
|
|
}
|
|
|
|
#usage-help-text {
|
|
color: var(--text-color-deemphasized);
|
|
}
|
|
|
|
#progress-bar {
|
|
position: absolute;
|
|
width: 100%;
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
height: var(--progress-height);
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/no-base-design-tokens, stylelint-plugin-mozilla/use-design-tokens */
|
|
background-color: light-dark(var(--color-gray-20), var(--color-gray-80));
|
|
|
|
border: var(--progress-border-width) solid var(--card-border-color);
|
|
border-radius: var(--border-radius-circle);
|
|
|
|
&::-moz-progress-bar {
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens, stylelint-plugin-mozilla/no-non-semantic-token-usage */
|
|
background-color: var(--progress-color);
|
|
border: var(--progress-border-width) solid var(--card-border-color);
|
|
border-radius: var(--border-radius-circle);
|
|
box-shadow: var(--box-shadow-level-1);
|
|
}
|
|
|
|
&[percent="75"]::-moz-progress-bar,
|
|
&[percent="75"] + #min-progress {
|
|
--progress-color: var(--icon-color-warning);
|
|
}
|
|
|
|
&[percent="90"]::-moz-progress-bar,
|
|
&[percent="90"] + #min-progress {
|
|
--progress-color: var(--icon-color-critical);
|
|
}
|
|
}
|
|
|
|
#progress-description {
|
|
margin-block-start: var(--space-small);
|
|
}
|
|
|
|
#progress-description [data-l10n-name="usage"] {
|
|
font-weight: var(--font-weight-bold);
|
|
}
|
|
|
|
#progress-container {
|
|
position: relative;
|
|
}
|
|
|
|
#min-progress {
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
width: var(--progress-height);
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
height: var(--progress-height);
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens, stylelint-plugin-mozilla/no-non-semantic-token-usage */
|
|
background-color: var(--progress-color);
|
|
border-radius: var(--border-radius-circle);
|
|
position: absolute;
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens, stylelint-plugin-mozilla/use-size-tokens */
|
|
top: var(--progress-border-width);
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens, stylelint-plugin-mozilla/use-size-tokens */
|
|
inset-inline-start: var(--progress-border-width);
|
|
}
|
|
|
|
@media (forced-colors) {
|
|
#progress-bar {
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
background-color: SelectedItemText;
|
|
border-color: var(--border-color);
|
|
|
|
&::-moz-progress-bar {
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
background-color: SelectedItem;
|
|
border-color: var(--border-color);
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
#min-progress {
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
background-color: SelectedItem;
|
|
}
|
|
}
|