diff options
Diffstat (limited to '')
| -rw-r--r-- | toolkit/components/aboutconfig/content/aboutconfig.css | 290 |
1 files changed, 290 insertions, 0 deletions
diff --git a/toolkit/components/aboutconfig/content/aboutconfig.css b/toolkit/components/aboutconfig/content/aboutconfig.css new file mode 100644 index 0000000000..b1ffe12a86 --- /dev/null +++ b/toolkit/components/aboutconfig/content/aboutconfig.css @@ -0,0 +1,290 @@ +/* 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 http://mozilla.org/MPL/2.0/. */ + +:root { + --prefs-table-border-width: 1px; + --prefs-table-border: var(--prefs-table-border-width) solid var(--in-content-box-border-color); +} + +.hidden { + display: none; +} + +.table-shown > #show-all, +.table-shown > .config-background-wrapper { + display: none; +} + +.config-background { + background: url("chrome://global/content/aboutconfig/background.svg") no-repeat; + height: 182px; + margin: 32px auto; + width: 235px; +} + +.config-help-text { + text-align: center; +} + +.title { + background-image: url("chrome://global/skin/icons/warning.svg"); + fill: #fcd100; +} + +#toolbar { + position: sticky; + top: 0; + z-index: 1; + box-sizing: border-box; + width: 100%; + background-color: var(--in-content-page-background); + padding: 10px; + padding-bottom: 0; + min-width: 644px; + display: flex; +} + +.checkbox-container { + /* Center align and get rid of whitespace. */ + display: inline-flex; + align-items: center; + margin-inline-start: 1ch; +} + +#about-config-search { + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + box-sizing: border-box; + flex-grow: 1; + background-image: url("chrome://global/skin/icons/search-glass.svg"); + background-repeat: no-repeat; + background-position: 8px center; + background-size: 16px; + /* Set horizontal margin to 0 to ensure alignment with table. */ + margin-inline: 0; + text-align: match-parent; + /* All prefs must be left-to-right. */ + direction: ltr; +} + +@media not (prefers-contrast) { + #about-config-search { + fill-opacity: 0.4; + } +} + +#about-config-search:placeholder-shown { + /* Display the placeholder in its natural directionality, + * even if the user changes the text direction manually + * (e.g. via RightCtrl+Shift). */ + direction: inherit; +} + +:root:dir(ltr) #about-config-search { + /* Be explicit about padding direction since + * `about-config-search` is forced to be LTR. */ + padding-left: 32px; +} + +:root:dir(rtl) #about-config-search { + background-position-x: right 8px; + padding-right: 32px; +} + +#show-all { + display: block; + margin: 10px auto; +} + +#prefs { + background-color: var(--in-content-box-background); + color: var(--in-content-text-color); + margin: 10px; + table-layout: fixed; + width: calc(100% - 20px); + min-width: 644px; + /* To stay consistent with about:preferences (664px - 20px margin). */ + border: var(--prefs-table-border); + border-radius: 4px; + border-spacing: 0; +} + +#prefs > tr.odd { + background-color: var(--in-content-box-background-odd); +} + +#prefs > tr:hover { + background-color: var(--in-content-item-hover); + color: var(--in-content-item-hover-text); +} + +#prefs > tr.has-user-value { + font-weight: bold; +} + +#prefs > tr.locked { + opacity: 0.4; + background-image: url("chrome://global/skin/icons/security.svg"); + background-repeat: no-repeat; + background-position: 9px center; + background-size: 16px 16px; + -moz-context-properties: fill; + fill: currentColor; +} + +#prefs > tr.locked:dir(rtl) { + background-position-x: right 9px; +} + +#prefs > tr > td, +#prefs > tr > th { + padding: 4px; + font-weight: inherit; +} + +#prefs > tr > th { + direction: ltr; + text-align: match-parent; +} + +#prefs > tr:dir(ltr) > th { + /* Be explicit about padding direction since `th` is forced to be LTR. */ + padding-left: 30px; +} + +#prefs > tr:dir(rtl) > th { + padding-right: 30px; +} + +#prefs > tr.deleted > th > span { + font-weight: bold; + color: var(--text-color-deemphasized); +} + +#prefs > tr > td.cell-edit, +#prefs > tr > td.cell-reset { + width: 40px; + padding: 0; +} + +.cell-value { + overflow-wrap: anywhere; + white-space: pre-wrap; + word-break: break-all; +} + +tr:not(.deleted) > .cell-value { + /* Always display the text in the value cell using left-to-right rules, but + align it according to the page direction. This doesn't apply to the radio + buttons shown for deleted preferences. */ + direction: ltr; + text-align: match-parent; +} + +:root:dir(ltr) tr:not(.deleted) > .cell-value > #form-edit { + /* Make the text in the form stay in the same place as before editing the pref. */ + margin-left: -8px; +} + +:root:dir(rtl) tr:not(.deleted) > .cell-value > #form-edit { + margin-right: -8px; +} + +#form-edit > label { + /* Make the radiobutton's text wrap to a new line along with + the radiobutton itself, when space is constrained. */ + display: inline-block; + margin-inline-end: 30px; +} + +#form-edit > label:last-of-type { + margin-inline-end: 0; +} + +#form-edit > label > :is(input[type="radio"], span) { + vertical-align: middle; +} + +td.cell-value > form > input[type="text"], +td.cell-value > form > input[type="number"] { + appearance: textfield; + margin: 0; + width: 100%; + box-sizing: border-box; + /* Align the text inside the input field in the same way as the table cell, + for both the left-to-right and right-to-left directions. */ + text-align: match-parent; +} + +.button-add, +.button-save, +.button-edit, +.button-toggle, +.button-delete, +.button-reset { + -moz-context-properties: fill; + background-position: center; + background-repeat: no-repeat; + background-size: 16px; + fill: currentColor; + min-width: auto; + width: 32px; +} + +.button-add { + background-image: url("chrome://global/skin/icons/plus.svg"); +} + +.button-save { + background-image: url("chrome://global/skin/icons/check.svg"); +} + +.button-edit { + background-image: url("chrome://global/skin/icons/edit.svg"); +} + +.button-toggle { + background-image: url("chrome://global/content/aboutconfig/toggle.svg"); +} + +.button-delete { + background-image: url("chrome://global/skin/icons/delete.svg"); +} + +.button-reset { + background-image: url("chrome://global/skin/icons/undo.svg"); +} + +.button-reset:dir(rtl) { + transform: scaleX(-1); +} + +/* The ::before creates a blank space between the last visible pref and the add row. */ +#prefs[has-visible-prefs] > .add > th::before, +#prefs[has-visible-prefs] > .add > td::before { + content: ""; + display: block; + position: absolute; + top: 0; + /* Make it wider by the border width so the border-inline is hidden. */ + inset-inline: calc(var(--prefs-table-border-width) * -1); + height: 12px; + background-color: var(--in-content-page-background); + /* This is visually the top border on the add row. */ + border-bottom: var(--prefs-table-border); +} + +#prefs[has-visible-prefs] > .add > th, +#prefs[has-visible-prefs] > .add > td { + /* This is the border underneath the last existing pref row. */ + border-top: var(--prefs-table-border); + padding-top: 14px; + position: relative; +} + +@media (prefers-contrast) { + #prefs > tr.deleted:hover > th > span { + color: inherit; + } +} |