diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
commit | 0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d (patch) | |
tree | a31f07c9bcca9d56ce61e9a1ffd30ef350d513aa /devtools/client/themes/styleeditor.css | |
parent | Initial commit. (diff) | |
download | firefox-esr-upstream/115.8.0esr.tar.xz firefox-esr-upstream/115.8.0esr.zip |
Adding upstream version 115.8.0esr.upstream/115.8.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'devtools/client/themes/styleeditor.css')
-rw-r--r-- | devtools/client/themes/styleeditor.css | 283 |
1 files changed, 283 insertions, 0 deletions
diff --git a/devtools/client/themes/styleeditor.css b/devtools/client/themes/styleeditor.css new file mode 100644 index 0000000000..154497fa5e --- /dev/null +++ b/devtools/client/themes/styleeditor.css @@ -0,0 +1,283 @@ +/* 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/. */ + +#style-editor-chrome { + flex: 1; +} + +.splitview-nav > li, +.stylesheet-info, +.stylesheet-more, +.stylesheet-rule-count, +li.splitview-active > hgroup > .stylesheet-more > h3 > .stylesheet-saveButton, +li:hover > hgroup > .stylesheet-more > h3 > .stylesheet-saveButton { + display: flex; +} + +.devtools-toolbar > spacer { + flex: 1; +} + +.style-editor-newButton { + list-style-image: url(images/add.svg); +} + +.style-editor-importButton { + list-style-image: url(images/import.svg); +} + +.stylesheet-details-container { + flex: 1; + min-width: 0; + min-height: 0; +} + +.stylesheet-at-rules-container { + overflow-y: auto; + min-width: 0; + min-height: 0; +} + +.stylesheet-error-message { + display: none; +} + +li.error > .stylesheet-info > .stylesheet-more > .stylesheet-error-message { + display: block; +} + +.stylesheet-title, +.stylesheet-name { + text-decoration: none; +} + +.stylesheet-name { + font-size: 13px; + white-space: nowrap; +} + +.stylesheet-name > label { + display: inline; + cursor: pointer; +} + +.stylesheet-info > h1 { + flex: 1; +} + +.splitview-nav > li > hgroup.stylesheet-info { + justify-content: center; + /* This prevents stylesheets with long names from breaking the layout of + the StyleEditor sources sidebar. */ + overflow: hidden; +} + +.stylesheet-more > spacer { + flex: 1; +} + +.stylesheet-title, +.stylesheet-name, +.stylesheet-rule-count, +.stylesheet-linked-file, +.stylesheet-saveButton { + color: var(--theme-body-color); +} + +.stylesheet-saveButton { + display: none; + margin-top: 0px; + margin-bottom: 0px; + text-decoration: underline; + cursor: pointer; +} + +.splitview-active .stylesheet-title, +.splitview-active .stylesheet-name, +.theme-light .splitview-active .stylesheet-rule-count, +.theme-light .splitview-active .stylesheet-linked-file, +.theme-light .splitview-active .stylesheet-saveButton { + color: var(--theme-selection-color); +} + +.splitview-nav:focus { + outline: 0; /* focus ring is on the stylesheet name */ +} + +.splitview-nav > li { + flex-direction: row; +} + +.splitview-nav > li > hgroup { + display: flex; + flex-direction: column; + flex: 1; +} + +.splitview-nav > li.unsaved > hgroup .stylesheet-name { + font-style: italic; +} + +.splitview-nav:-moz-locale-dir(ltr) > li.unsaved > hgroup .stylesheet-name:before, +.splitview-nav:-moz-locale-dir(rtl) > li.unsaved > hgroup .stylesheet-name:after { + font-style: italic; +} + +.splitview-nav.empty > p { + padding: 0 10px; +} + +.stylesheet-sidebar { + max-width: 400px; + min-width: 100px; + border-color: var(--theme-splitter-color); +} + +.at-rule-label { + display: grid; + /* + * +----------------------------------------------+ + * | Rule information | line number | + * +----------------------------------------------+ + */ + grid-template-columns: 1fr max-content; + padding: 4px; + border-bottom: 1px solid var(--theme-splitter-color); + cursor: pointer; + word-break: break-word; +} + +.media-responsive-mode-toggle { + color: var(--theme-highlight-blue); + text-decoration: underline; +} + +.at-rule-line { + padding-inline-start: 4px; +} + +.media-condition-unmatched { + opacity: 0.4; +} + +.stylesheet-toggle { + display: flex; + cursor: pointer; + padding: 8px 0; + margin: 0 8px; + background-image: url(images/eye-opened.svg); + background-repeat: no-repeat; + background-clip: content-box; + background-position: center; + background-size: 16px; + width: 24px; + height: 40px; + flex-shrink: 0; + + /* The icon color should always match the text color. */ + -moz-context-properties: fill, stroke; + fill: currentColor; + stroke: currentColor; +} + +.disabled > .stylesheet-toggle { + background-image: url(images/eye-closed.svg); +} + +.stylesheet-system > .stylesheet-toggle { + /* Override the default "color: grayText" from [disabled] browser style */ + color: currentColor; + cursor: auto; + opacity: 0.3; +} + +.stylesheet-linked-file:not(:empty){ + margin-inline-end: 0.4em; +} + +.stylesheet-linked-file:not(:empty):before { + margin-inline-start: 0.4em; + content: " ↳ "; +} + +li.unsaved > hgroup > h1 > .stylesheet-name:before { + content: "*"; +} + +li.linked-file-error .stylesheet-linked-file { + text-decoration: line-through; +} + +li.linked-file-error .stylesheet-linked-file:after { + font-size: 110%; + content: " ✘"; +} + +li.linked-file-error .stylesheet-rule-count { + visibility: hidden; +} + +.stylesheet-more > h3 { + font-size: 11px; + margin-inline-end: 2px; +} + +.placeholder a { + text-decoration: underline; +} + +h1, +h2, +h3 { + font-size: inherit; + font-weight: normal; + margin: 0; + padding: 0; +} + +@media (max-width: 700px) { + .stylesheet-sidebar { + width: 150px; + } +} + +/* portrait mode */ +@media (max-width: 550px) { + li.splitview-active > hgroup > .stylesheet-more > .stylesheet-rule-count, + li:hover > hgroup > .stylesheet-more > .stylesheet-rule-count { + display: none; + } + + .splitview-nav { + box-shadow: none; + } + + .splitview-nav > li.splitview-active { + background-size: 0 0, 0 0, auto; + } + + .stylesheet-toggle { + padding: 0; + height: 24px; + } + + .splitview-nav > li > hgroup.stylesheet-info { + align-items: baseline; + flex-direction: row; + flex: 1; + } + + .stylesheet-sidebar { + width: 180px; + } + + .stylesheet-more { + flex: 1; + justify-content: flex-end; + } + + .stylesheet-more > spacer { + flex: none; + } +} |