From 6c81a10e05bfc5fa60a44faabf2c65d8220fb4fe Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Wed, 20 Jan 2021 21:21:39 -0500 Subject: Move menu styles into material.css (#1283) --- ext/bg/css/settings2.css | 57 -------------------------------- ext/mixed/css/material.css | 81 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 81 insertions(+), 57 deletions(-) (limited to 'ext') diff --git a/ext/bg/css/settings2.css b/ext/bg/css/settings2.css index 7f7a6763..5376f456 100644 --- a/ext/bg/css/settings2.css +++ b/ext/bg/css/settings2.css @@ -24,7 +24,6 @@ --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); @@ -57,10 +56,6 @@ --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; @@ -938,58 +933,6 @@ button.icon-button.modal-header-button:active>.icon-button-inner>.icon { } -/* 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; diff --git a/ext/mixed/css/material.css b/ext/mixed/css/material.css index b4a80807..d9a16d99 100644 --- a/ext/mixed/css/material.css +++ b/ext/mixed/css/material.css @@ -20,6 +20,9 @@ --font-size-no-units: 14; --font-size: calc(1px * var(--font-size-no-units)); + --font-size-small-no-units: 12; + --font-size-small: calc(1em * var(--font-size-small-no-units) / var(--font-size-no-units)); + --animation-duration: 0.125s; --animation-duration2: calc(var(--animation-duration) * 2); @@ -44,7 +47,11 @@ --thin-border-size: calc(1em / var(--font-size-no-units)); + --menu-border-radius: 0.3em; + --menu-shadow: 0 1px 3px 1px var(--shadow-color), 0 2px 4px 3px var(--shadow-color); + --text-color: #222222; + --text-color-light: #666666; --background-color: #f8f9fa; --background-color-light: #ffffff; @@ -92,9 +99,13 @@ --toggle-knob-color: var(--background-color-light); --selectable-indicator-color: rgba(160, 160, 160, 0.25); + + --menu-item-hover-color: #bbbbbb; + --menu-item-active-color: #aaaaaa; } :root[data-theme=dark] { --text-color: #d4d4d4; + --text-color-light: #909090; --background-color: #1e1e1e; --background-color-light: #0a0a0a; @@ -138,6 +149,9 @@ --toggle-knob-color: #ffffff; --selectable-indicator-color: rgba(100, 100, 100, 0.25); + + --menu-item-hover-color: #333333; + --menu-item-active-color: #444444; } @@ -870,3 +884,70 @@ button.icon-button:active { top: calc((var(--input-height) - var(--icon-button-size)) * 0.5); } + +/* Popup menu */ +#popup-menus { + position: absolute; +} +.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(--menu-shadow); + 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); + box-shadow: none; +} +button.popup-menu-item:active:not(:disabled) { + background-color: var(--menu-item-active-color); + box-shadow: none; +} +button.popup-menu-item:disabled { + color: var(--text-color-light); +} +:root[data-page-type=popup] .popup-menu, +.popup-menu.popup-menu-small { + border-radius: calc(var(--menu-border-radius) * 0.75); + padding: 0.25em 0; + min-width: 6em; +} +:root[data-page-type=popup] button.popup-menu-item, +.popup-menu-small button.popup-menu-item { + padding: 0.5em 0.75em; + font-size: var(--font-size-small); +} -- cgit v1.2.3