start refactoring menubar and toolbar components
This commit is contained in:
Stewart Allen
parent
9ffd58a2a2
commit
ce423fddcc
15 changed files with 539 additions and 456 deletions
126
web/moto/menubar.css
Normal file
126
web/moto/menubar.css
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
#menubar {
|
||||
position: relative;
|
||||
z-index: 50;
|
||||
background-color: var(--menubar-back);
|
||||
color: var(--menubar-fore);
|
||||
text-transform: capitalize;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--border-gray);
|
||||
}
|
||||
|
||||
.menubar-separator {
|
||||
align-self: stretch;
|
||||
align-items: center;
|
||||
background: var(--menubar-vsep);
|
||||
margin: 5px;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.menubar-appname,
|
||||
.menubar-mode {
|
||||
color: var(--appname-blue);
|
||||
cursor: default;
|
||||
align-self: stretch;
|
||||
align-items: center;
|
||||
margin: 4px 0 4px 0;
|
||||
padding: 4px 12px 4px 12px;
|
||||
border-radius: 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.menubar-appname {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#menubar .top-menu {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#menubar .top-menu > span {
|
||||
cursor: default;
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
margin: 2px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 6px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#menubar .top-menu > span:hover {
|
||||
border-color: var(--appname-blue);
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
#menubar .top-menu > span:hover .top-menu-drop {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#menubar .top-menu label,
|
||||
#menubar .top-menu svg {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
#menubar .top-menu hr {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
border-top: 0.5px solid var(--menubar-vsep);
|
||||
}
|
||||
|
||||
#menubar .top-menu-drop {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
z-index: 90;
|
||||
font-family: sans-serif;
|
||||
padding-top: 3px;
|
||||
}
|
||||
|
||||
#menubar .top-menu-right {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#menubar .top-menu-drop .content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
border: 1px solid var(--border-gray);
|
||||
border-radius: 6px;
|
||||
background: var(--menubar-back);
|
||||
color: var(--menubar-fore);
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
#menubar .top-menu-drop .content > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 6px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
#menubar .top-menu-drop .content > div > label {
|
||||
flex-grow: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#menubar .top-menu-drop .content > div > span {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
min-width: 16px;
|
||||
}
|
||||
|
||||
#menubar .top-menu-drop .content > div:hover,
|
||||
#menubar .top-menu-drop .content > div.selected,
|
||||
#menubar .top-menu > span.selected {
|
||||
border-color: var(--appname-blue);
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
}
|
||||
|
|
@ -4,43 +4,18 @@
|
|||
*/
|
||||
|
||||
:root {
|
||||
/* semantic core */
|
||||
--color-bg: #f6f8fb;
|
||||
--color-bg-elev: #ffffff;
|
||||
--color-bg-subtle: #eef2f7;
|
||||
--color-surface: #ffffff;
|
||||
--color-surface-2: #f3f6fb;
|
||||
--color-text: #1b2430;
|
||||
--color-text-muted: #556173;
|
||||
--color-border: #a6b3c3;
|
||||
--color-border-strong: #6a7a90;
|
||||
--color-accent: #5a9fd4;
|
||||
--color-accent-hover: #7bb8e8;
|
||||
--color-focus: rgba(90,159,212,0.35);
|
||||
--color-selection: rgba(90,159,212,0.45);
|
||||
--color-selection-hover: rgba(90,159,212,0.8);
|
||||
--color-success: #4ade80;
|
||||
--color-warning: #fbbf24;
|
||||
--color-danger: #f87171;
|
||||
--appname-blue: #5a9fd4;
|
||||
--menubar-vsep: rgba(0,0,0,0.2);
|
||||
--menubar-back: rgba(128,128,128,0.5);
|
||||
--menubar-fore: rgba(20,20,20,1.0);
|
||||
--border-gray: rgba(128,128,128,0.5);
|
||||
}
|
||||
|
||||
:root.dark,
|
||||
:root[data-theme="dark"] {
|
||||
--color-bg: #0f1116;
|
||||
--color-bg-elev: #161a22;
|
||||
--color-bg-subtle: #1b2230;
|
||||
--color-surface: #1a1f29;
|
||||
--color-surface-2: #222936;
|
||||
--color-text: #e2e8f0;
|
||||
--color-text-muted: #a5b0c0;
|
||||
--color-border: #444f63;
|
||||
--color-border-strong: #6d7a93;
|
||||
--color-accent: #5a9fd4;
|
||||
--color-accent-hover: #7bb8e8;
|
||||
--color-focus: rgba(90,159,212,0.4);
|
||||
--color-selection: rgba(90,159,212,0.5);
|
||||
--color-selection-hover: rgba(90,159,212,0.95);
|
||||
--color-success: #4ade80;
|
||||
--color-warning: #fbbf24;
|
||||
--color-danger: #f87171;
|
||||
--appname-blue: #5a9fd4;
|
||||
--menubar-vsep: rgba(255,255,255,0.2);
|
||||
--menubar-back: rgba(50,50,50,0.9);
|
||||
--menubar-fore: rgba(250,250,250,1.0);
|
||||
--border-gray: rgba(128,128,128,0.5);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue