surtic86andClaude Opus 5.5
44084eaffa
At medium and high contrast, secondary-container turns dark. The empty part of progress bars, highlighted code lines and a targeted roadmap header now use surface-container-highest, so the fill and the text stay readable. The selected project in the project jump is light at these levels too; its check mark marks it. The selected sidebar query gets the pill style even with its "clear" icon next to it. The icon sits inside the pill and takes the pill's text color. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
340 lines
13 KiB
CSS
340 lines
13 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; }
|
|
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-inline: 12px;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-label-large);
|
|
letter-spacing: var(--md-sys-typescale-label-large-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: 0;
|
|
box-shadow: none;
|
|
line-height: normal;
|
|
background-color: var(--md-sys-color-secondary-container);
|
|
color: var(--md-sys-color-on-secondary-container);
|
|
}
|
|
#admin-menu li { 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; }
|