summaryrefslogtreecommitdiffstats
path: root/devtools/client/themes/splitview.css
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
commit26a029d407be480d791972afb5975cf62c9360a6 (patch)
treef435a8308119effd964b339f76abb83a57c29483 /devtools/client/themes/splitview.css
parentInitial commit. (diff)
downloadfirefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.zip
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'devtools/client/themes/splitview.css')
-rw-r--r--devtools/client/themes/splitview.css145
1 files changed, 145 insertions, 0 deletions
diff --git a/devtools/client/themes/splitview.css b/devtools/client/themes/splitview.css
new file mode 100644
index 0000000000..08ccb05d69
--- /dev/null
+++ b/devtools/client/themes/splitview.css
@@ -0,0 +1,145 @@
+/* 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/. */
+
+.theme-dark {
+ --sidemenu-selected-arrow: url(images/item-arrow-dark-ltr.svg);
+ --sidemenu-selected-arrow-rtl: url(images/item-arrow-dark-rtl.svg);
+}
+.theme-light {
+ --sidemenu-selected-arrow: url(images/item-arrow-ltr.svg);
+ --sidemenu-selected-arrow-rtl: url(images/item-arrow-rtl.svg);
+}
+
+box,
+.splitview-nav {
+ flex: 1;
+ flex-direction: column;
+ min-width: 0;
+ min-height: 0;
+}
+
+.splitview-nav {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ background-color: var(--theme-sidebar-background);
+
+ display: flex;
+ overflow-x: hidden;
+ overflow-y: auto;
+}
+
+.splitview-nav > li {
+ padding-inline-end: 8px;
+ align-items: center;
+ outline: 0;
+ vertical-align: bottom;
+ border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+.placeholder {
+ flex: 1;
+ text-align: center;
+}
+
+.splitview-nav > li.splitview-active {
+ background-color: var(--theme-selection-background);
+ color: var(--theme-selection-color);
+ background-image: var(--sidemenu-selected-arrow);
+ background-repeat: no-repeat;
+ background-position: center right;
+}
+
+.splitview-nav > li.splitview-active:-moz-locale-dir(rtl) {
+ background-image: var(--sidemenu-selected-arrow-rtl);
+ background-position: center left;
+}
+
+.splitview-nav > li:not(.splitview-active):where(:hover, :focus-within) {
+ background-color: var(--theme-selection-background-hover);
+}
+
+/* Toolbars */
+
+.splitview-main > .devtools-toolbar {
+ height: 29px;
+}
+
+.splitview-main > toolbar,
+.loading .splitview-nav-container {
+ border-inline-end: 1px solid var(--theme-splitter-color);
+}
+
+.splitview-nav-container {
+ justify-content: center;
+}
+
+.loading .splitview-nav-container > .placeholder {
+ display: none !important;
+}
+
+.splitview-controller,
+.splitview-main {
+ flex: none;
+}
+
+.splitview-controller {
+ min-height: 3em;
+ max-height: 14em;
+ max-width: 400px;
+ min-width: 200px;
+}
+
+.splitview-side-details > * {
+ display: none;
+ min-width: 0;
+ min-height: 0;
+}
+
+/* only the active details pane is shown */
+.splitview-side-details > .splitview-active {
+ display: flex;
+}
+
+/* filtered items are hidden */
+ol.splitview-nav > li.splitview-filtered {
+ display: none;
+}
+
+/* "empty list" and "all filtered" placeholders are hidden */
+.splitview-nav:empty,
+.splitview-nav.splitview-all-filtered,
+.splitview-nav + .splitview-nav.placeholder {
+ display: none;
+}
+.splitview-nav.splitview-all-filtered ~ .splitview-nav.placeholder.all-filtered,
+.splitview-nav:empty ~ .splitview-nav.placeholder.empty {
+ display: flex;
+}
+
+@media (width >= 700px) {
+ .splitview-root {
+ flex-direction: row;
+ }
+ .splitview-controller {
+ max-height: none;
+ /* Override the potential splitter-set height */
+ height: auto !important;
+ }
+ .splitview-details {
+ display: none;
+ }
+ .splitview-details.splitview-active {
+ display: flex;
+ }
+}
+
+/* portrait mode */
+@media (width < 700px) {
+ .splitview-controller {
+ max-width: none;
+ /* Override the potential splitter-set width */
+ width: auto !important;
+ }
+}