349 lines
14 KiB
CSS
349 lines
14 KiB
CSS
/*
|
|
* Page layout: top app bar (top menu + header), primary tabs (project menu),
|
|
* sidebar card, content, footer, menus.
|
|
*
|
|
* State layers: M3 draws hover/focus/press as a translucent layer of the content
|
|
* color. Here that is a background-image of currentColor mixed at the state opacity,
|
|
* so it works on top of any background color.
|
|
*/
|
|
|
|
:root {
|
|
--nm-state-hover: linear-gradient(color-mix(in srgb, currentColor var(--md-sys-state-hover-state-layer-opacity), transparent) 0 0);
|
|
--nm-state-pressed: linear-gradient(color-mix(in srgb, currentColor var(--md-sys-state-pressed-state-layer-opacity), transparent) 0 0);
|
|
--nm-transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
|
|
color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
|
|
}
|
|
|
|
#wrapper { background: var(--md-sys-color-surface); }
|
|
|
|
/***** Top app bar *****/
|
|
nav.top-menu {
|
|
background: var(--md-sys-color-surface-container);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-label-large);
|
|
letter-spacing: var(--md-sys-typescale-label-large-tracking);
|
|
padding-block: 4px;
|
|
padding-inline: 12px;
|
|
}
|
|
|
|
.top-menu__links a, .top-menu__links a:link, .top-menu__links a:visited, #account .dropdown-trigger {
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
padding-block: 6px;
|
|
padding-inline: 12px;
|
|
transition: var(--nm-transition);
|
|
}
|
|
|
|
.top-menu__links a:hover, #account .dropdown-trigger:hover {
|
|
color: var(--md-sys-color-on-surface);
|
|
background-color: transparent;
|
|
background-image: var(--nm-state-hover);
|
|
}
|
|
|
|
.top-menu__links svg.icon-svg, #account .dropdown-trigger .icon-svg,
|
|
.top-menu__links a:hover svg.icon-svg, #account .dropdown-trigger:hover .icon-svg {
|
|
stroke: currentColor;
|
|
}
|
|
|
|
#header {
|
|
background: var(--md-sys-color-surface-container);
|
|
color: var(--md-sys-color-on-surface);
|
|
padding-block: 4px 0;
|
|
padding-inline: 24px;
|
|
}
|
|
body.has-main-menu #header { padding-block-end: 48px; }
|
|
#header a, #header a:hover { color: var(--md-sys-color-on-surface); }
|
|
|
|
#header h1 {
|
|
font: var(--md-sys-typescale-title-large);
|
|
min-block-size: 3rem;
|
|
}
|
|
#header h1 .breadcrumbs {
|
|
font: var(--md-sys-typescale-label-medium);
|
|
letter-spacing: var(--md-sys-typescale-label-medium-tracking);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
}
|
|
#header h1 .breadcrumbs a { color: var(--md-sys-color-on-surface-variant); }
|
|
|
|
#quick-search { min-block-size: 3rem; color: var(--md-sys-color-on-surface-variant); }
|
|
#quick-search #q {
|
|
inline-size: 220px;
|
|
block-size: 40px;
|
|
padding-inline: 16px;
|
|
border: 0;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
background-color: var(--md-sys-color-surface-container-highest);
|
|
color: var(--md-sys-color-on-surface);
|
|
font: var(--md-sys-typescale-body-large);
|
|
}
|
|
#quick-search #q:focus { outline: 2px solid var(--md-sys-color-primary); outline-offset: 0; }
|
|
#quick-search form label { font: var(--md-sys-typescale-label-large); }
|
|
|
|
#project-jump.drdn { margin-inline-start: 8px; }
|
|
#project-jump .drdn-trigger {
|
|
block-size: 40px;
|
|
padding-inline: 16px 36px;
|
|
border: 1px solid var(--md-sys-color-outline-variant);
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
background-color: transparent;
|
|
color: var(--md-sys-color-on-surface);
|
|
font: var(--md-sys-typescale-label-large);
|
|
line-height: 38px;
|
|
}
|
|
#project-jump .drdn-trigger:hover { background-image: var(--nm-state-hover); }
|
|
|
|
/***** Primary tabs (project menu) *****/
|
|
#main-menu {
|
|
background: var(--md-sys-color-surface-container);
|
|
border-block-end: 1px solid var(--md-sys-color-outline-variant);
|
|
padding-block: 0;
|
|
padding-inline: 16px;
|
|
}
|
|
#main-menu ul { min-block-size: 48px; }
|
|
#main-menu li a {
|
|
position: relative;
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-title-small);
|
|
letter-spacing: var(--md-sys-typescale-title-small-tracking);
|
|
padding-block: 14px;
|
|
padding-inline: 16px;
|
|
line-height: 20px;
|
|
transition: var(--nm-transition);
|
|
}
|
|
#main-menu li a:hover {
|
|
background-color: transparent;
|
|
background-image: var(--nm-state-hover);
|
|
color: var(--md-sys-color-on-surface);
|
|
}
|
|
#main-menu li a.selected, #main-menu li a.selected:hover {
|
|
background-color: transparent;
|
|
color: var(--md-sys-color-primary);
|
|
font-weight: 500;
|
|
box-shadow: none;
|
|
}
|
|
#main-menu li a.selected::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset-inline: 16px;
|
|
inset-block-end: 0;
|
|
block-size: 3px;
|
|
border-radius: 3px 3px 0 0;
|
|
background: var(--md-sys-color-primary);
|
|
}
|
|
|
|
/* "+" new object: tonal icon button */
|
|
#main-menu li a.new-object {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
inline-size: 40px;
|
|
block-size: 40px;
|
|
padding: 0;
|
|
margin-block: 0;
|
|
border: 0;
|
|
border-radius: var(--md-sys-shape-corner-medium);
|
|
background-color: var(--md-sys-color-secondary-container);
|
|
color: var(--md-sys-color-on-secondary-container);
|
|
}
|
|
#main-menu li a.new-object:hover {
|
|
background-color: var(--md-sys-color-secondary-container);
|
|
background-image: var(--nm-state-hover);
|
|
color: var(--md-sys-color-on-secondary-container);
|
|
}
|
|
|
|
/* Scroll arrows when the menu overflows: icon buttons on the bar's colour, so menu items
|
|
slide under them instead of showing through (button styles in components.css) */
|
|
#main-menu div.tabs-buttons {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
inline-size: auto;
|
|
block-size: 48px;
|
|
inset-inline-end: 0;
|
|
padding-inline: 8px;
|
|
border: 0;
|
|
background-color: var(--md-sys-color-surface-container);
|
|
}
|
|
|
|
/***** Menus: project menu children, dropdowns, profile menu *****/
|
|
#main-menu .menu-children,
|
|
html .drdn-content,
|
|
html .dropdown-content {
|
|
background-color: var(--md-sys-color-surface-container);
|
|
border: 0;
|
|
border-radius: var(--md-sys-shape-corner-extra-small);
|
|
box-shadow: var(--md-sys-elevation-level2);
|
|
color: var(--md-sys-color-on-surface);
|
|
padding-block: 8px;
|
|
overflow: hidden;
|
|
}
|
|
#main-menu .menu-children li a,
|
|
html .dropdown-content li a,
|
|
html .dropdown-content .dropdown-items a,
|
|
.drdn-items > * {
|
|
background-color: transparent;
|
|
border: 0;
|
|
border-radius: 0;
|
|
color: var(--md-sys-color-on-surface);
|
|
font: var(--md-sys-typescale-label-large);
|
|
letter-spacing: var(--md-sys-typescale-label-large-tracking);
|
|
padding-block: 10px;
|
|
padding-inline: 12px;
|
|
}
|
|
#main-menu .menu-children li a:hover,
|
|
html .dropdown-content li a:hover,
|
|
html .dropdown-content .dropdown-items a:hover,
|
|
.drdn-items > a:hover,
|
|
.drdn-items > a:focus {
|
|
background-color: transparent;
|
|
background-image: var(--nm-state-hover);
|
|
color: var(--md-sys-color-on-surface);
|
|
text-decoration: none;
|
|
}
|
|
#main-menu .menu-children li a:hover::after { display: none; }
|
|
.drdn-items > .selected { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
|
|
/* At medium/high contrast secondary-container turns into a dark block; the check mark already marks the item */
|
|
:root:is([data-contrast="medium"], [data-contrast="high"]) .drdn-items > .selected { background-color: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); }
|
|
#project-jump .drdn-items > a:hover { background-color: transparent; color: var(--md-sys-color-on-surface) !important; }
|
|
/* Section headers (Bookmarks, Recently used, All Projects): small primary labels, a divider between sections */
|
|
#project-jump .drdn-items > strong {
|
|
padding-block: 12px 4px;
|
|
color: var(--md-sys-color-primary) !important; /* core: gray !important */
|
|
font: var(--md-sys-typescale-label-medium);
|
|
letter-spacing: var(--md-sys-typescale-label-medium-tracking);
|
|
}
|
|
#project-jump .drdn-items > strong:not(:first-child) { margin-block-start: 8px; border-block-start: 1px solid var(--md-sys-color-outline-variant); }
|
|
div + .drdn-items, .dropdown-divider, #account .dropdown-content .logout { border-color: var(--md-sys-color-outline-variant); }
|
|
#account .dropdown-content .user-info { color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-medium); }
|
|
#account .dropdown-content .user-info .user-name { color: var(--md-sys-color-on-surface); font: var(--md-sys-typescale-title-small); }
|
|
|
|
/***** Content and sidebar *****/
|
|
#main { background: var(--md-sys-color-surface); }
|
|
|
|
#content {
|
|
background-color: var(--md-sys-color-surface);
|
|
padding-block: 24px 16px;
|
|
padding-inline: 24px;
|
|
}
|
|
|
|
#sidebar {
|
|
background: var(--md-sys-color-surface-container-low);
|
|
border: 0;
|
|
border-radius: var(--md-sys-shape-corner-large);
|
|
margin-block: 16px;
|
|
margin-inline-end: 16px;
|
|
padding-block: 16px;
|
|
padding-inline: 16px;
|
|
box-sizing: border-box;
|
|
align-self: flex-start;
|
|
}
|
|
/* Collapsed: only the switch button remains, in a small rounded surface */
|
|
#main.collapsedsidebar #sidebar { inline-size: auto; margin-block: 16px; margin-inline-end: 16px; padding: 4px; }
|
|
#main.collapsedsidebar #sidebar-switch-panel { float: none; margin: 0; }
|
|
#sidebar h3 {
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-title-small);
|
|
letter-spacing: var(--md-sys-typescale-title-small-tracking);
|
|
margin-block: 16px 8px;
|
|
}
|
|
#sidebar hr { background: var(--md-sys-color-outline-variant); margin-block: 12px; }
|
|
|
|
/* Collapse button: 32px icon button in the top corner, level with the first heading */
|
|
#sidebar-switch-panel { float: inline-end; inline-size: auto; margin-block: -6px 0; margin-inline: 8px -6px; padding: 0; }
|
|
#sidebar-switch-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
inline-size: 32px;
|
|
block-size: 32px;
|
|
padding: 0;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
}
|
|
#sidebar-switch-button svg { stroke: var(--md-sys-color-on-surface-variant); color: inherit; }
|
|
#sidebar-switch-button:hover { background-color: transparent; background-image: var(--nm-state-hover); }
|
|
|
|
/* Sidebar forms (activity, roadmap, …): label above a full-width field */
|
|
#sidebar form > p:has(> input:not([type="submit"], [type="hidden"], [type="checkbox"]), > select) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
margin-block: 0 12px;
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-label-medium);
|
|
letter-spacing: var(--md-sys-typescale-label-medium-tracking);
|
|
}
|
|
#sidebar form > p > :is(input:not([type="submit"], [type="checkbox"]), select) { inline-size: 100%; max-inline-size: none; margin: 0; }
|
|
/* First heading sits level with the collapse button, also after hidden form inputs */
|
|
#sidebar-wrapper > form:first-child > h3:first-of-type,
|
|
#sidebar-wrapper > .contextual:first-child + h3 { margin-block-start: 0; }
|
|
#sidebar-wrapper > .contextual:first-child { margin-block: 0; }
|
|
/* Watchers opening the sidebar: "Add" sits next to the collapse button, heading level with it */
|
|
#sidebar-wrapper > #watchers:first-child > .contextual { margin-block: 0; margin-inline-end: 0; }
|
|
#sidebar-wrapper > #watchers:first-child > .contextual + h3 { margin-block-start: 0; }
|
|
#sidebar form > p:empty { display: none; }
|
|
|
|
/* Checkbox lists: even 32px rows, text-colored labels */
|
|
#sidebar li:has(input[type="checkbox"]),
|
|
#sidebar :is(li, form > p) > label:has(input[type="checkbox"]),
|
|
#sidebar form > p:has(> input[type="checkbox"]) {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
min-block-size: 32px;
|
|
}
|
|
#sidebar :is(li, form > p) > label:has(input[type="checkbox"]) { flex: 1; }
|
|
#sidebar input[type="checkbox"] { inline-size: 18px; block-size: 18px; margin: 0; flex-shrink: 0; }
|
|
#sidebar li label, #sidebar li label a, #sidebar form > p > label { color: var(--md-sys-color-on-surface); font: var(--md-sys-typescale-body-medium); }
|
|
#sidebar ul + ul, #sidebar ul + p { margin-block-start: 12px; }
|
|
|
|
/* Navigation-drawer style items for plain link lists in the sidebar (queries, sort order,
|
|
versions, wiki index, …): a link that is alone in its list item, or a saved query */
|
|
#sidebar li > a:is(:only-child, .query), #admin-menu li a {
|
|
display: flex;
|
|
align-items: center;
|
|
min-block-size: 36px;
|
|
padding-block: 8px; /* long names wrap: keep the items apart */
|
|
padding-inline: 12px;
|
|
box-sizing: border-box;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-body-medium); /* regular weight: only the section titles are bold */
|
|
letter-spacing: var(--md-sys-typescale-body-medium-tracking);
|
|
transition: var(--nm-transition);
|
|
}
|
|
#sidebar li > a:is(:only-child, .query):hover, #admin-menu li a:hover { background-image: var(--nm-state-hover); text-decoration: none; }
|
|
#sidebar li > a.selected:is(:only-child, .query), #admin-menu li a.selected {
|
|
margin-inline-start: 0; /* core: -6px, inset marker bar */
|
|
padding-block: 8px;
|
|
box-shadow: none;
|
|
background-color: var(--md-sys-color-secondary-container);
|
|
color: var(--md-sys-color-on-secondary-container);
|
|
}
|
|
#admin-menu li, #sidebar li:has(> a:is(:only-child, .query)) { padding-block-end: 2px; }
|
|
/* The selected query also holds its "clear" icon: it sits at the end, inside the pill */
|
|
#sidebar li:has(> .icon-clear-query) { display: grid; align-items: center; }
|
|
#sidebar li:has(> .icon-clear-query) > * { grid-area: 1 / 1; }
|
|
#sidebar li:has(> .icon-clear-query) > a.query { padding-inline-end: 40px; }
|
|
#sidebar li > .icon-clear-query { justify-self: end; margin-inline-end: 12px; color: var(--md-sys-color-on-secondary-container); }
|
|
|
|
/***** Footer *****/
|
|
#footer {
|
|
background: var(--md-sys-color-surface);
|
|
border: 0;
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-label-small);
|
|
letter-spacing: var(--md-sys-typescale-label-small-tracking);
|
|
padding: 16px;
|
|
}
|
|
|
|
/***** Login *****/
|
|
#login-form {
|
|
inline-size: 400px;
|
|
padding: 24px;
|
|
background-color: var(--md-sys-color-surface-container-low);
|
|
border-radius: var(--md-sys-shape-corner-extra-large);
|
|
}
|
|
#login-form label { font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-on-surface-variant); }
|
|
#login-form input { block-size: 40px; }
|