summaryrefslogtreecommitdiff
path: root/ext/mixed/css/material.css
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2021-01-20 21:21:39 -0500
committerGitHub <noreply@github.com>2021-01-20 21:21:39 -0500
commit6c81a10e05bfc5fa60a44faabf2c65d8220fb4fe (patch)
tree3856c7c09943489e26c520365285b473250920e0 /ext/mixed/css/material.css
parentebb9f15cf92ab3ab72039b811e5e50e58309654f (diff)
Move menu styles into material.css (#1283)
Diffstat (limited to 'ext/mixed/css/material.css')
-rw-r--r--ext/mixed/css/material.css81
1 files changed, 81 insertions, 0 deletions
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);
+}