FlexokiCSS--dark
code:style.css
/* base tones */
:root {
}
/* dark accent colors */
:root {
}
/* light accent colors */
:root {
}
/* mapping */
:root {
--tx: var(--base-200); /* primary text */
--tx-2: var(--base-500); /* muted text */
--tx-3: var(--base-700); /* faint text */
--ui-3: var(--base-800); /* active borders */
--ui-2: var(--base-850); /* hovered borders */
--ui: var(--base-900); /* borders */
--bg-2: var(--base-950); /* secondary background */
--bg: var(--black); /* main background */
--re: var(--red-400); /* error text */
--or: var(--orange-400); /* warning text */
--ye: var(--yellow-400);
--gr: var(--green-400); /* success text */
--cy: var(--cyan-400); /* active states */
--bl: var(--blue-400); /* links */
--pu: var(--purple-400);
--ma: var(--magenta-400);
--re-2: var(--red-600);
--or-2: var(--orange-600);
--ye-2: var(--yellow-600);
--gr-2: var(--green-600);
--cy-2: var(--cyan-600);
--bl-2: var(--blue-600);
--pu-2: var(--purple-600);
--ma-2: var(--magenta-600);
}
body {
--body-bg: var(--bg-2); /* 全体の背景色 */
/* navbar背景色については別ページで個別に設定
--navbar-bg: var(--hogehoge);
*/
--navbar-icon-color: var(--paper);
--navbar-icon-active-color: var(--paper);
--navbar-icon-hovered-color: var(--base-100);
/* --search-form-bg: color-mix(in srgb, var(--navbar-bg) 50%, transparent); */
--search-form-icon-color: var(--paper);
--search-form-icon-focus-color: var(--tx-2);
--card-title-color: var(--tx);
--card-title-bg: var(--ui);
--card-bg: var(--bg);
--card-hover-bg: rgba(255, 252, 240, 0.0875); /* --paperを薄く透過で敷く */
--card-active-bg: var(--card-hover-bg);
--card-backside: var(--ui-3);
--card-description-color: var(--tx-2);
--card-description-link-color: var(--bl-2);
/* --card-description-code-color: var(--tx-2); */
--card-box-shadow-color: var(--ui);
--card-box-shadow: 0 2px 0 var(--card-box-shadow-color);
--card-box-hover-shadow: 0 2px 0 var(--card-box-shadow-color);
--card-title-bg-pinned: var(--ui);
--relation-label-bg: var(--base-150);
--relation-label-text: var(--tx);
--relation-label-links-bg: var(--bl-2);
--relation-label-links-text: var(--paper);
--relation-label-empty-bg: var(--or-2);
--relation-label-empty-text: var(--paper);
--tool-color: var(--tx-2);
/* --tool-light-color: var(--hogehoge); */
/* --tool-badge-bg: var(--hogehoge); */
--tool-bg: var(--bg);
--tool-text-color: var(--tx);
/* new-buttonの前景色は別ページで個別に設定
--new-button-vertical-color: var(--hogehoge);
--new-button-horizontal-color: var(--hogehoge);
*/
--new-button-bg: var(--paper);
--new-button-hover-bg: var(--base-100);
--new-button-active-bg: var(--paper);
--telomere-border: var(--ui-2);
--telomere-unread: var(--blue-400);
--telomere-updated: var(--blue-600);
--page-text-color: var(--tx);
--page-link-color: var(--bl);
--page-link-hover-color: var(--bl-2);
--page-link-color-cursor-line: var(--bl-2);
--page-bg: var(--bg);
--empty-page-link-color: var(--or);
--empty-page-link-hover-color: var(--or-2);
--line-title-color: var(--tx);
--line-permalink-color: rgba(173, 131, 1, 0.5); /* --ye-2を薄く透過で敷く */
/* --code-color: #ccc; */ --code-bg: var(--bg-2);
--quote-bg-color: var(--bg-2);
--cursor-color: var(--tx);
/* drop-down menu */
--dropdown-menu-bg: var(--bg);
--dropdown-menu-border: 1px solid var(--ui);
--dropdown-menu-text-color: var(--page-text-color);
--dropdown-menu-divider-color: var(--ui);
--dropdown-menu-text-hover-color: var(--page-text-color);
--dropdown-menu-text-hover-bg: var(--bg-2);
}
.dropdown-menu,
.drawer .drawer-menu{
background-color: var(--dropdown-menu-bg);
border: var(--dropdown-menu-border, unset);
}
.dropdown-menu > li > a,
.drawer .drawer-menu ul li a,
.page-menu ul > li > div {
color: var(--dropdown-menu-text-color);
}
.dropdown-menu>li>a:active,
.drawer-menu ul li a:active,
li > :is(a:hover, a:focus) {
color: var(--dropdown-menu-text-hover-color);
background-color: var(--dropdown-menu-text-hover-bg);
}
:is(.dropdown-menu, .drawer-menu) .divider {
color: var(--dropdown-menu-divider-color);
}
/* code block */
.line span.code-block .code-block-start {
border: solid 1px var(--ui-3);
background-color: var(--base-800);
padding: 2px 5px;
color: var(--tx);
}
.line span.code-block .code-block-start a {
color: var(--tx);
}
/icons/hr.icon
code:old.css
.navbar .row .project-home {
color: var(--paper);
}
.page {
background-color: var(--bg);
box-shadow: 0 4px 0 var(--ui);
}
.page-sort-menu .tool-btn {
color: var(--tx);
}
.editor {
color: var(--tx);
}
.line .telomere .telomere-border {
border-color: var(--ui-2);
}
.line .telomere .telomere-border.updated-after-load {
border-color: var(--blue-600);
}
.line .telomere .telomere-border.unread:not(.updated-after-load) {
border-color: var(--blue-400);
}
.scroll-bar-overlay .unread-bar {
background-color: var(--blue-400);
}
.line.line-title {
color: var(--tx);
}
.grid li.page-list-item a {
background-color: var(--bg);
box-shadow: 0 2px 0 var(--ui);
color: var(--tx);
}
background-color: var(--bg-2);
box-shadow: 0 2px 0 var(--ui);
}
ul.grid li.page-list-item a .header,
ul.grid-md.grid li.page-list-item a .header,
ul.grid-lg.grid li.page-list-item a .header {
border-top: solid 4px var(--ui);
}
.grid li.page-list-item a .pin {
background: linear-gradient(45deg, var(--ui-3), var(--ui-3) 50%, var(--ui) 50%, var(--ui));
}
.grid li.page-list-item a .header.pinned {
border-color: var(--ui);
}
.grid li.page-list-item a .title {
color: var(--tx);
}
.grid li.page-list-item a .description {
color: var(--tx-2);}
.grid li.relation-label a {
background-color: var(--base-150);
}
.tool-btn:hover {
color: var(--tx) !important;
background: var(--bg) !important;
}
.page-menu .tool-btn {
color: var(--tx-2);
}
.line span.code-block,
.line code,
.line .quote {
background-color: var(--bg-2);
}
.line .quote {
border-left: solid 1px var(--ui-3);
}
.status-bar>div {
border-top: 1px solid var(--ui);
border-left: 1px solid var(--ui);
background-color: var(--bg-2);
color: var(--tx-2);
}