nremiel.theme.core
@import
code:style.css
@import "/api/code/nremiel/nremiel.theme.core.var/style.css";
core
code:style.css
html,
body,
.app {
--body-bg: var(--c-bg-bottom);
color: var(--c-tx-normal);
background-color: var(--c-bg-bottom);
}
input,
button,
select,
textarea,
.global-menu .project-list-filter input,
.drawer .drawer-menu ul .project-list-filter input {
font-family: var(--ui-sans-serif);
font-feature-settings: var(--ffs-ui-sans-serif);
font-size: var(--fs-ui-sans-serif);
&textarea {
font-family: var(--text-field);
line-height: var(--lh-base);
font-size: var(--fs-ui-sans-serif);
font-family: var(--ui-sans-serif);
}
}
}
b,
strong {
font-weight: bold;
}
h1 {
font-family: var(--h1);
font-feature-settings: var(--ffs-h1);
font-weight: var(--fw-h1);
text-transform: var(--tt-h1);
}
h2 {
font-family: var(--h2);
font-feature-settings: var(--ffs-h2);
font-weight: var(--fw-h2);
text-transform: var(--tt-h2);
}
h3 {
font-family: var(--h3);
font-feature-settings: var(--ffs-h3);
font-weight: var(--fw-h3);
text-transform: var(--tt-h3);
}
h4 {
font-family: var(--h4);
font-feature-settings: var(--ffs-h4);
font-weight: var(--fw-h4);
text-transform: var(--tt-h4);
}
h5 {
font-family: var(--h5);
font-feature-settings: var(--ffs-h5);
font-weight: var(--fw-h5);
text-transform: var(--tt-h5);
}
h6 {
font-family: var(--h6);
font-feature-settings: var(--ffs-h6);
font-weight: var(--fw-h6);
text-transform: var(--tt-h6);
}
.page-wrapper,
.project-events {
container-type: inline-size;
container-name: page;
}
.page,
.stream .page {
box-sizing: fit-content;
overflow-x: auto;
position: relative;
box-shadow: var(--shadow-box-page-main);
border-top: var(--border-page-main-top);
background-color: var(--c-bg-page-main);
color: var(--c-tx-normal);
& .lines {
display: block;
box-shadow: var(--shadow-box-page-main-lines);
background-color: var(--c-bg-page-main-lines);
}
}
@container page (width > calc(696px + 42px * 2)) {
.page,
.stream .page {
--fs-base: calc(15px * 1.05);
--fs-code-block: 13.5px;
}
}
@container page (width <=calc(696px + 42px * 2)) {
.page,
.stream .page {
--h-line-base: 1.675;
--fs-code-block: calc(var(--fs-base) * 0.9);
/* padding: 28px 21px 42px; */
padding: 28px 1rem 42px;
}
}
.cursor {
caret-color: var(--c-caret-cursor);
& * {
caret-color: var(--c-caret-cursor);
color: var(--c-caret-cursor);
background-color: var(--c-caret-cursor);
}
}
.line.cursor-line,
.line.cursor-line:has(.indent-mark) .indent,
.line.cursor-line img.image,
.line.cursor-line .altalttext {
caret-color: var(--c-caret-cursor);
background-color: var(--c-bg-current-line);
}
.text-input {
background-color: var(--c-bg-text);
}
.line.permalink {
background-color: var(--c-bg-line-permalink);
}
.selections {
/* 選択範囲の強調色 */
& .selection,
background-color: var(--c-bg-text-selection);
}
& .popup-menu {
box-shadow: var(--shadow-box-popup-menu);
font-size: var(--fs-ui-sans-serif);
font-family: var(--ui-sans-serif);
font-feature-settings: var(--ffs-ui-sans-serif);
& .button-container {
background-color: var(--c-bg-popup-menu);
& .button {
font-size: var(--fs-ui-sans-serif);
font-family: var(--ui-sans-serif);
font-feature-settings: var(--ffs-ui-sans-serif);
color: var(--c-tx-popup-menu-item);
&:not(:first-of-type) {
border-left: var(--border-popup-menu-item);
}
}
}
}
}
.line,
.page,
.page .editor,
.stream .page,
.stream .lines {
color: var(--c-tx-normal);
text-wrap: pretty;
line-height: var(--h-line-base);
font-size: var(--fs-base);
font-family: var(--paragraph);
font-feature-settings: var(--ffs-paragraph);
font-variant-ligatures: common-ligatures;
font-weight: var(--fw-paragraph);
}
/* tekstoj en dika fasono kaj paĝoĉapitrigiloj */
.line,
.stream .page .line {
/* la titolo de paĝo */
&.section-0.line-title.section-title,
&.line-title {
&,
& .text,
&>a {
color: var(--c-tx-h1);
text-align: center;
text-wrap: balance;
text-transform: var(--tt-h1);
font-size: var(--fs-h1);
font-family: var(--h1);
font-feature-settings: var(--ffs-h1);
font-weight: var(--fw-h1);
}
}
& .level.level-1 {
font-weight: bold;
color: var(--c-tx-strong);
}
& .level.level-2 {
display: inline-block;
/* padding: 0; */
color: var(--c-tx-h4);
text-wrap: pretty;
text-transform: var(--tt-h4);
font-size: var(--fs-h4);
font-family: var(--h4);
font-feature-settings: var(--ffs-h4);
font-weight: var(--fw-h4);
}
& .level-3 {
color: var(--c-tx-strong);
font-size: var(--fs-h3);
font-family: var(--h3);
font-feature-settings: var(--ffs-h3);
font-weight: var(--fw-h3);
}
& .level-4 {
color: var(--c-tx-strong);
font-size: var(--fs-h2);
font-family: var(--h2);
font-feature-settings: var(--ffs-h2);
font-weight: var(--fw-h2);
}
&.line.section-title:not(.line-title):has(.level-3),
.line.section-0.line-title.section-title+&.section-title:has(.level-3) {
box-sizing: content-box;
position: relative;
--h-border-section: 4px;
margin-top: var(--h-border-section);
--h-padding-section-h4: 0;
padding-top: var(--h-padding-section-h4);
padding-bottom: var(--h-padding-section-h4);
&::before {
--page-margin-left: 49px;
--w: calc(100% + var(--page-margin-left) * 2);
display: block;
content: "";
width: var(--w);
position: absolute;
top: calc(-1 * var(--h-border-section) / 2);
left: calc(-1 * var(--page-margin-left));
border-top: var(--border-section);
}
& .level-3 {
color: var(--c-tx-h3);
& .text {
text-wrap: pretty !important;
text-transform: var(--tt-h3);
}
}
}
&.line.section-title:not(.line-title):has(.level-4),
.line.section-0.line-title.section-title+&.section-title:has(.level-4) {
box-sizing: content-box;
position: relative;
--h-border-section: 8px;
margin-top: var(--h-border-section);
--h-padding-section-h3: calc(var(--fs-base) * var(--h-line-base) / 2);
padding-top: var(--h-padding-section-h3);
padding-bottom: var(--h-padding-section-h3);
&::before {
--page-margin-left: 49px;
--w: calc(100% + var(--page-margin-left) * 2);
display: block;
content: "";
width: var(--w);
position: absolute;
top: calc(-1 * var(--h-border-section) / 2);
left: calc(-1 * var(--page-margin-left));
border-top: var(--border-section);
}
&.line.section-title:not(.line-title):has(.level-4) .text {
text-align: center !important;
text-wrap: balance;
}
& .level-3 {
color: var(--c-tx-h3);
& .text {
text-wrap: pretty !important;
text-transform: var(--tt-h3);
}
}
& .level-4 {
color: var(--c-tx-h2);
& .text {
text-wrap: balance !important;
text-transform: var(--tt-h2);
}
}
}
&.section-title:not(.line-title):has(.level-5),
.line.section-0.line-title.section-title+&.section-title:has(.level-5) {
box-sizing: content-box;
position: relative;
--page-margin-left: 49px;
--w: calc(100% + var(--page-margin-left) * 2);
--h: calc(2rem * var(--h-line-base));
margin-top: var(--h);
padding-top: 1rem;
padding-bottom: 1rem;
& .text {
text-align: center !important;
text-wrap: balance;
}
&::before {
display: block;
content: "";
/* box-shadow: var(--shadow-box-slipo-bottom-inset); */
position: absolute;
margin-top: var(--h);
top: calc(-2 * var(--h));
left: -49px;
width: var(--w);
height: var(--h);
background-color: var(--c-bg-bottom);
border-bottom: var(--border-page-main-top);
}
}
& .level-5 {
/* tiel grandas kiel la titolo de paĝoj */
box-sizing: content-box;
color: var(--c-tx-h1);
text-wrap: balance !important;
text-transform: var(--tt-h1);
font-size: var(--fs-h1);
font-weight: var(--fw-h1);
font-family: var(--h1);
font-feature-settings: var(--ffs-h1);
& .text {
display: inline-block;
box-sizing: content-box;
margin: 0;
margin-bottom: calc(var(--fs-base) * var(--h-line-base));
padding: 0;
width: 100%;
}
}
& .level-6 {
/* pli grandas ol la titolo de paĝo */
color: var(--c-tx-strong);
font-family: var(--impact);
font-weight: var(--fw-impact);
}
& .level-7,
& .level-8,
& .level-9 {
color: var(--c-tx-strong);
font-family: var(--trump);
font-weight: var(--fw-trump);
}
}
.line,
.stream .page .line {
& .translate .translate-result {
background-color: var(--c-bg-blockquote);
color: var(--c-tx-blockquote);
text-wrap: pretty;
font-size: var(--fs-base);
font-family: var(--blockquote);
font-feature-settings: var(--ffs-blockquote);
font-variant-ligatures: common-ligatures;
font-weight: var(--fw-blockquote);
line-height: var(--h-line-base);
&::before {}
}
.indent-mark .dot {
background-color: var(--c-fg-indent-mark);
}
& a {
color: var(--c-tx-link);
&.link {
color: var(--c-tx-link);
}
&.page-link {
color: var(--c-tx-link);
}
/* ハッシュタグ */
display: inline-block;
background-color: var(--c-bg-link-hashtag);
color: var(--c-tx-link-hashtag);
}
&.empty-page-link {
color: var(--c-tx-link-empty);
}
display: inline-block;
background-color: var(--c-bg-link-empty-hashtag);
color: var(--c-tx-link-empty-hashtag);
}
}
& img.icon {
top: 0;
vertical-align: sub;
height: calc(0.8em * var(--h-line-base));
}
& .deco-\/,
& i,
& em {
font-family: var(--italic);
font-feature-settings: var(--ffs-italic);
font-weight: var(--fw-italic);
font-style: italic;
}
& .level .deco-\/,
& .level i,
& .level em {
font-family: var(--italic-bold);
font-feature-settings: var(--ffs-italic-bold);
font-weight: var(--fw-italic-bold);
font-style: italic;
}
& .code {
background-color: var(--c-bg-code) !important;
color: var(--c-tx-code);
font-family: var(--monospace);
font-feature-settings: var(--ffs-monospace);
}
& kbd {
font-family: var(--kbd);
font-feature-settings: var(--ffs-kbd);
font-weight: var(--fw-kbd);
}
/* */
/* BLOKAJ LINIOJ */
/* */
& .quote {
padding-left: 1em;
padding-right: 1em;
border-left: var(--border-blockquote-left);
border-right: var(--border-blockquote-right);
--c-tx-normal: var(--c-tx-blockquote);
color: var(--c-tx-blockquote);
background-color: var(--c-bg-blockquote);
font-family: var(--blockquote);
font-feature-settings: var(--ffs-blockquote);
font-variant-ligatures: common-ligatures;
font-weight: var(--fw-blockquote);
}
& .code-start {
font-family: var(--tiny);
font-weight: var(--fw-tiny);
font-fezture-settings: var(--ffs-tiny);
}
& .table-block>* {
margin: 0 auto;
max-width: 100% !important;
text-align: center;
font-family: var(--narrow);
font-feature-settings: var(--ffs-narrow);
font-variant-ligatures: common-ligatures;
font-stretch: var(--f-stretch-narrow);
&>* {
text-align: start;
}
}
& .cli {
/* box-shadow: var(--shadow-box-slipo); */
& .command {
font-family: var(--monospace);
font-feature-settings: var(--ffs-monospace);
}
}
&:has(.code-block) {
--h-line-base: 1.375;
line-height: var(--h-line-base);
& .code-block,
& span.code-block {
line-height: var(--h-line-base);
font-family: var(--code);
font-feature-settings: var(--ffs-code);
color: var(--c-tx-code);
}
}
}
/* Table */
.line .cell-text {
font-size: var(--fs-table-block);
}
.line:not(.cursor-line) .cell-text {
display: inline-block;
box-sizing: content-box;
max-width: 30em;
vertical-align: middle;
/* .line:not(.cursor-line) と vertical-align: middle を併用しないとカーソルの挙動がバグる*/
text-wrap: pretty;
}
.line {
& img.image {
display: block;
/* box-shadow: var(--shadow-box-slipo); */
filter: var(--shadow-drop-slipo);
margin: 0.5em auto 0.5em auto;
max-height: 25vh;
max-width: 95%;
}
&:has(.indent) img.image {
display: inline-block;
margin: 0.5em auto 0.5em 0.5em;
}
& img.strong-image {
display: block;
box-sizing: content-box;
/* box-shadow: var(--shadow-box-slipo); */
filter: var(--shadow-drop-slipo);
margin: 0.5em auto 0.5em auto;
}
& video {
display: block;
box-shadow: var(--shadow-box-slipo);
margin: 0.5em auto 0.5em auto;
max-height: 25vh;
max-width: 95%;
}
&:has(.indent) video {
display: inline-block;
margin: 0.5em auto 0.5em 0.5em;
}
& .iframe-video-player iframe.youtube {
box-sizing: content-box;
box-shadow: var(--shadow-box-slipo);
margin: 0.5em auto 0.5em auto;
}
}
.indent-mark {
height: 100% !important;
}
.indent-mark .pad {
height: 100% !important;
overflow: unset !important;
}
.line:has(.indent-mark span:nth-child(4n+1)) {
background: var(--c-bg-indent-level-1-line);
}
.indent-mark:not(.quote .indent-mark) span:nth-child(4n+1) .pad {
/* background: lightblue !important; */
background: var(--c-bg-indent-level-1);
opacity: var(--c-bg-a-indent-opacity);
}
.line:has(.indent-mark span:nth-child(4n+2)) {
background: var(--c-bg-indent-level-2-line);
}
.indent-mark:not(.quote .indent-mark) span:nth-child(4n+2) .pad {
background: lightpink;
background: var(--c-bg-indent-level-2);
opacity: var(--c-bg-a-indent-opacity);
}
.line:has(.indent-mark span:nth-child(4n+3)) {
background: var(--c-bg-indent-level-3-line);
}
.indent-mark:not(.quote .indent-mark) span:nth-child(4n+3) .pad {
background: lightyellow;
background: var(--c-bg-indent-level-3);
opacity: var(--c-bg-a-indent-opacity);
}
.line:has(.indent-mark span:nth-child(4n+4)) {
background: var(--c-bg-indent-level-4-line);
}
.indent-mark:not(.quote .indent-mark) span:nth-child(4n+4) .pad {
background: lightgreen;
background: var(--c-bg-indent-level-4);
opacity: var(--c-bg-a-indent-opacity);
}
/* Telomeres */
.line .telomere {
& .telomere-border {
border-color: var(--c-telomere);
&.unread:not(.updated-after-load) {
border-color: var(--c-telomere-unread);
}
&.updated-after-load {
border-color: var(--c-telomere-updated-after-load);
&.unread {
border-color: var(--c-telomere-updated-after-load-unread);
}
}
&.will-delete-next {
border-color: var(--c-telomere-will-delete-next);
}
}
}
/* Navigatiion */
.navbar {
&.navbar-default {
background-color: var(--c-bg-navbar);
color: var(--c-tx-navbar);
box-shadow: var(--shadow-box-navbar);
}
& .project-list-filter {
/* border-radius: 0% 0%; */
box-shadow: var(--shadow-box-page-list-search);
background: var(--c-bg-related-search-form);
font-family: var(--text-field);
caret-color: var(--c-caret-cursor);
&:focus {}
&:focus-within {
border: var(--border-related-search-form-focus);
box-shadow: var(--shadow-box-page-list-search-focus);
background: var(--c-bg-related-search-form-focus);
color: var(--c-tx-related-search-form);
}
}
}
& .global-menu-for-user.global-menu.dropdown-menu {
background-color: var(--c-bg-dropdown-menu);
color: var(--c-tx-dropdown-menu);
font-family: var(--ui-sans-serif);
&:focus {
background-color: var(--c-bg-dropdown-menu-focus) !important;
}
& .updated {
color: var(--c-tx-dropdown-menu-activated);
border-left: 3px solid var(--c-border-dropdown-menu-activated);
}
}
& .history-back-button {
color: var(--c-ic-navbar);
}
& .row .project-home {
color: var(--c-tx-navbar-project-name);
font-family: var(--ff-project-name);
font-feature-settings: var(--ffs-project-name);
font-weight: var(--fw-project-name);
font-size: 18.5px;
&::before {
content: "";
font-family: var(--icons);
}
/* &::before {
content: "Project: ";
text-transform: uppercase;
font-size: 1.2rem;
font-family: var(--smaller);
font-feature-settings: var(--ffs-smaller);
font-weight: 600;
color: var(--c-dark-2);
} */
}
& .user-menu-dropdown .text {
color: var(--c-tx-navbar);
font-family: var(--ui-sans-serif);
}
& .navbar-menu {}
& .new-button {
--new-button-bg: var(--c-ic-navbar-button-new-page);
--new-button-hover-bg: var(--c-ic-navbar-button-new-page-hover);
/*
--new-button-horizontal-color: var(--c-ic-navbar-button-new-page-horizontal-line);
--new-button-vertical-color: var(--c-ic-navbar-button-new-page-vertical-line);
*/
& .horizontal-line {
background-color: var(--c-ic-navbar-button-new-page-horizontal-line);
}
& .vertical-line {
background-color: var(--c-ic-navbar-button-new-page-vertical-line);
}
}
/* 検索フォーム */
& .search-form .form-group {
--fs: 1rem;
/* border-radius: 1.5rem 0 0 1.5rem; */
background-color: var(--c-bg-navbar-search-form);
font-size: var(--fs);
&:focus-within {
/* border-radius: 0% 0%; */
box-shadow: var(--shadow-box-navbar-search-form-focus);
background-color: var(--c-bg-navbar-search-form-focus);
color: var(--c-tx-navbar-search-form-focus);
caret-color: var(--c-caret-cursor);
& button.btn-search {
margin-right: 0;
}
}
& button.btn-search {
& .kamon {
fill: var(--c-fg-navbar-search-form-icon);
}
}
& .dropdown input {
background-color: var(--c-bg-navbar-search-form);
color: var(--c-tx-navbar-search-form);
text-align: start;
font-size: var(--fs);
font-family: var(--text-field);
&:focus {
background-color: var(--c-bg-navbar-search-form-focus);
color: var(--c-tx-navbar-search-form-focus);
}
}
}
}
/* Status bar */
:root {
--fs-status-bar: 15px;
}
.status-bar {
min-height: 2rem !important;
&>div {
padding: 5px 1em 15px 0;
align-items: top;
vertical-align: baseline;
font-size: var(--fs-status-bar);
font-family: var(--smaller);
font-feature-settings: var(--ffs-smaller);
font-weight: var(--fw-smaller);
&.page-title {
max-width: 60vh;
text-overflow: ellipsis ellipsis;
background-color: var(--c-bg-statusbar-page-title);
color: var(--c-tx-statusbar-page-title);
}
&.error {
background-color: var(--c-bg-statusbar-page-status-error);
color: var(--c-tx-statusbar-page-status-error);
}
&.offline-mode-status {
background-color: var(--c-bg-statusbar-page-status-error);
color: var(--c-tx-statusbar-page-status-error);
}
&.history-mode-status {}
&.page-list-status {
background-color: var(--c-bg-statusbar-page-list-status);
color: var(--c-tx-statusbar-page-list-status);
}
&:has(.kamon-check-circle) {
background-color: var(--c-bg-statusbar-page-status-sync-confirmed);
& .kamon.kamon-check-circle {
color: var(--c-ic-statusbar-page-status-sync-confirmed);
}
}
&:has(.kamon-locked) {
background-color: var(--c-bg-statusbar-project-status-private);
& .kamon.kamon-locked {
color: var(--c-ic-statusbar-project-status-private);
vertical-align: middle;
}
}
& .plan-badge {}
}
}
/* for Stream */
/* ストリーム上部に浮動表示されるバー */
.stream h1 {
background-color: var(--c-bg-statusbar-page-title);
color: var(--c-tx-statusbar-page-title);
text-align: center;
font-size: var(--fs-stream-page-status-bar);
font-weight: var(--fw-stream-page-status-bar);
font-family: var(--stream-page-status-bar);
}
hr.hidden-lines {
border-top: 1px solid hsl(from var(--c-tx-normal) h s l / 50%);
}
/* Menus */
.dropdown {
& .tool-btn,
& .btn.tool-btn.dropdown-toggle,
& .page-list-translation-menu {
.page-list-mode-menu &,
.page-sort-menu &,
.related-page-sort-menu &,
&.random-jump-button {
color: var(--c-tx-dropdown-button-text);
font-family: var(--ui-sans-serif);
& .kamon::before {
color: var(--c-tx-dropdown-button-text);
}
&:not(:has(.kamon))::before {
display: inline-block;
margin-right: 4px;
width: 18px;
height: 18px;
}
}
.page-menu & {
color: var(--c-tx-dropdown-button-icon);
& .random-jump-button .kamon-switch::before {
color: var(--c-tx-dropdown-button-icon);
}
}
}
& .dropdown-menu {
box-shadow: var(--shadow-box-dropdown-menu);
background-color: var(--c-bg-dropdown-menu);
color: var(--c-tx-dropdown-menu);
font-size: var(--fs-ui-sans-serif);
font-family: var(--ui-sans-serif);
font-feature-settings: var(--ffs-ui-sans-serif);
font-variant-ligatures: common-ligatures;
& * {
background-color: var(--c-bg-dropdown-menu);
color: var(--c-tx-dropdown-menu);
}
& .list-header-title,
& .dropdown-header {
color: var(--c-tx-week);
font-family: var(--tiny);
font-weight: var(--fw-tiny);
text-transform: var(--tt-tiny);
}
& .page-list-mode-menu,
& .page-sort-menu,
color: var(--c-tx-toolbar-cardlist);
font-family: var(--ui-sans-serif);
font-feature-settings: var(--ffs-ui-sans-serif);
font-variant-ligatures: common-ligatures;
}
color: var(--c-tx-dropdown-menu-activated);
border-left: 3px solid var(--c-border-dropdown-menu-activated);
}
&>li>a:active,
background-color: var(--c-bg-dropdown-menu-focus);
}
}
}
.page-menu {
background-color: var(--c-bg-page-manu);
& ul>li>div {
font-family: var(--ui-sans-serif);
}
background-color: rgb(55, 52, 64);
}
}
/* Page list filter */
section.related-page-list {
background-color: var(--c-bg-bottom-related);
& .toolbar {
background-color: var(--c-bg-bottom-related-toolbar);
& .related-page-list-search {
/* border-radius: 0% 0%; */
box-shadow: var(--shadow-box-page-list-search);
background: var(--c-bg-related-search-form);
&:focus-within {
border: var(--border-related-search-form-focus);
box-shadow: var(--shadow-box-page-list-search-focus);
background: var(--c-bg-related-search-form-focus);
color: var(--c-tx-related-search-form);
}
font-family: var(--text-field);
caret-color: var(--c-caret-cursor);
&:focus {}
}
}
}
& .links-container>* ul.grid {
background-color: var(--c-bg-bottom-related);
}
}
/* */
/* Page List */
/* */
/* Grid view */
.page-list ul.grid,
.related-page-list ul.grid {
--default-grid-size: 147px;
/* grid-template: repeat(auto-fill, var(--default-grid-size)) repeat(auto-fill, minmax(calc(var(--default-grid-size) * 2), 1fr)); */
background-color: var(--c-bg-bottom);
& li {
/* width: calc(var(--default-grid-size) * 2); */
/* height: var(--default-grid-size); */
font-family: var(--narrow);
font-feature-settings: var(--ffs-narrow);
font-variant-ligatures: common-ligatures;
font-stretch: var(--f-stretch-narrow);
}
& .page-list-item.grid-style-item {
box-shadow: var(--shadow-box-card);
}
& .page-list-item {
& a {
background-color: var(--c-bg-card);
}
& a .hover {}
& a .pin {
/* background: linear-gradient(
45deg,
var(--card-backside, #aaa) 50%, ); */
background: linear-gradient(45deg,
var(--c-fg-card-backside, #aaa), var(--c-fg-card-backside, #aaa) 50%, }
&.pin a .content .header.pinned {
border-color: var(--c-bc-card-topline) var(--c-bg-card-pinned) var(--c-fg-card-backside);
}
& a .content {
& .header {
border-color: var(--c-bc-card-topline) var(--c-bg-card-pinned);
border-color: var(--c-bc-card-topline);
& .title {
min-width: 100%;
min-height: calc(2 * var(--fs-card-title) * var(--h-line-card));
color: var(--c-tx-card-title);
text-align: var(--ta-card-title);
text-wrap: var(--tw-card-title);
font-size: var(--fs-card-title);
line-height: var(--h-line-card);
font-family: var(--card-title);
font-feature-settings: var(--ffs-card-title);
font-variant-ligatures: common-ligatures;
font-weight: var(--fw-card-title);
}
}
& .description,
& .description .line {
color: var(--c-tx-card-description);
text-wrap: pretty;
line-height: var(--h-line-card);
font-size: var(--fs-card-description);
font-family: var(--card-description);
font-feature-settings: var(--ffs-narrow);
font-variant-ligatures: common-ligatures;
font-stretch: var(--f-stretch-narrow);
& a {
color: var(--c-tx-link);
}
}
& .icon {
filter: var(--shadow-drop-slipo);
& img {
max-height: var(--default-grid-size);
}
}
}
}
}
/* Table view */
.scroll-container {
box-sizing: fit-content;
background-color: var(--c-bg-bottom);
}
table.page-list-table {
--fs-base: 14px;
box-sizing: content-box;
box-shadow: var(--shadow-box-page-main);
margin: 0 auto;
& thead tr {
box-sizing: content-box;
box-shadow: var(--shadow-box-slipo);
position: sticky;
top: 0;
background-color: var(--c-bg-navbar);
color: var(--c-tx-navbar);
font-size: 1em;
font-family: var(--ui-sans-serif);
& th:has(.column-title-wrapper) {
position: sticky;
left: 0;
background-color: var(--c-bg-navbar);
}
& .column-title-wrapper {
vertical-align: middle;
&>* {
margin: auto;
& .column-title {
text-align: center;
width: fit-content;
}
}
}
}
& tbody tr {
box-sizing: content-box;
border-top: 6px solid var(--c-bg-bottom);
background-color: var(--c-bg-page-main);
color: var(--c-tx-normal);
font-size: var(--fs-base);
font-family: var(--narrow);
font-feature-settings: var(--ffs-narrow);
font-variant-ligatures: common-ligatures;
font-stretch: var(--f-stretch-narrow);
& th {
position: sticky;
box-shadow: var(--shadow-box-card);
left: 0;
border-left: 4px solid var(--c-bc-card-topline);
width: 20em;
background-color: var(--c-bg-card);
vertical-align: middle;
text-align: center;
text-wrap: balance;
& .page-link {
color: var(--c-tx-card-title);
font-family: var(--card-title);
font-feature-settings: var(--ffs-card-title);
font-variant-ligatures: common-ligatures;
font-weight: var(--fw-card-title);
font-size: 1rem;
}
}
& td {
width: fit-content;
background-color: var(--c-bg-card);
color: var(--c-tx-week);
vertical-align: middle;
text-align: center;
text-wrap: balance;
font-family: var(--narrow);
font-feature-settings: var(--ffs-narrow);
font-variant-ligatures: common-ligatures;
font-stretch: var(--f-stretch-narrow);
&:has(.descriptions) {
vertical-align: top;
& .descriptions {
display: block;
margin: 0;
text-align: start;
text-wrap: balance;
& .line {
font-family: var(--narrow);
}
}
}
& .icon img.page-title-image {
display: block;
margin: auto;
box-shadow: var(--shadow-box-slipo);
max-width: 16em;
}
}
& .page-link {
color: var(--c-tx-link);
}
& .date-label.absolute {
text-align: center;
text-wrap: balance;
font-family: var(--monospace);
font-feature-settings: var(--ffs-monospace);
}
}
}
/* Search result page */
.search-result-list {}
.list li.page-list-item {
box-align: content-box;
box-shadow: var(--shadow-box-card);
background-color: var(--c-bg-card) !important;
color: var(--c-tx-card);
& .content {
& .title-with-description {
color: var(--c-tx-card);
}
}
}
/* Error page panel */
.app:has(.error-page) {
& .navbar.navbar-default {
background-color: var(--c-bg-statusbar-page-title);
color: var(--c-tx-statusbar-page-title);
}
}
.error-page .panel.panel-default {
max-width: 960px;
max-width: 100%;
padding: 0 auto;
box-shadow: var(--shadow-box-page-main);
border: var(--border-page-main-top) none none none;
background-color: var(--c-bg-page-main);
line-height: var(--h-line-base);
&>.panel-body {
background-color: var(--c-bg-page-main-lines);
}
& h1 {
margin: 0 0;
padding: calc(var(--fs-ui-sans-serif) * var(--h-line-base));
background-color: var(--c-bg-h1);
color: var(--c-tx-h1);
font-size: calc(var(--fs-h1) * 1.2);
text-transform: var(--ttf-h1);
font-family: var(--h1);
font-feature-settings: var(--ffs-h1);
font-weight: var(--fw-h1);
}
& p {
margin: 0 0;
color: var(--c-tx-paragraph);
font-size: var(--fs-ui-sans-serif);
text-transform: var(--ttf-ui-sans-serif);
font-family: var(--ui-sans-serif);
& a {
color: var(--c-tx-link);
}
}
& hr {
max-width: 75%;
border: none;
}
}
/* */
/* Patches for Cosense */
/* */
min-height: 100vh;
top: 0;
}