FlexokiCSS
code:style.css
:root {
/* base tones */
--black: #100F0F; --black-rgba: rgba(16, 15, 15, 1); --base-950: #1C1B1A; --base-950-rgba: rgba(28, 27, 26, 1); --base-900: #282726; --base-900-rgba: rgba(40, 39, 38, 1); --base-850: #343331; --base-850-rgba: rgba(52, 51, 49, 1); --base-800: #403E3C; --base-800-rgba: rgba(64, 62, 60, 1); --base-700: #575653; --base-700-rgba: rgba(87, 86, 83, 1); --base-600: #6F6E69; --base-600-rgba: rgba(111, 110, 105, 1); --base-500: #878580; --base-500-rgba: rgba(135, 133, 128, 1); --base-300: #B7B5AC; --base-300-rgba: rgba(183, 181, 172, 1); --base-200: #CECDC3; --base-200-rgba: rgba(206, 205, 195, 1); --base-150: #DAD8CE; --base-150-rgba: rgba(218, 216, 206, 1); --base-100: #E6E4D9; --base-100-rgba: rgba(230, 228, 217, 1); --base-50: #F2F0E5; --base-50-rgba: rgba(242, 240, 229, 1); --paper: #FFFCF0; --paper-rgba: rgba(255, 252, 240, 1); /* dark accent colors */
--red-600: #AF3029; --red-600-rgba: rgba(175, 48, 41, 1); --orange-600: #BC5215; --orange-600-rgba: rgba(188, 82, 21, 1); --yellow-600: #AD8301; --yellow-600-rgba: rgba(173, 131, 1, 1); --green-600: #66800B; --green-600-rgba: rgba(102, 128, 11, 1); --cyan-600: #24837B; --cyan-600-rgba: rgba(36, 131, 123, 1); --blue-600: #205EA6; --blue-600-rgba: rgba(32, 94, 166, 1); --purple-600: #5E409D; --purple-600-rgba: rgba(94, 64, 157, 1); --magenta-600: #A02F6F; --magenta-600-rgba: rgba(160, 47, 111, 1); /* light accent colors */
--red-400: #D14D41; --red-400-rgba: rgba(209, 77, 65, 1); --orange-400: #DA702C; --orange-400-rgba: rgba(218, 112, 44, 1); --yellow-400: #D0A215; --yellow-400-rgba: rgba(208, 162, 21, 1); --green-400: #879A39; --green-400-rgba: rgba(135, 154, 57, 1); --cyan-400: #3AA99F; --cyan-400-rgba: rgba(58, 169, 159, 1); --blue-400: #4385BE; --blue-400-rgba: rgba(67, 133, 190, 1); --purple-400: #8B7EC8; --purple-400-rgba: rgba(139, 126, 200, 1); --magenta-400: #CE5D97; --magenta-400-rgba: rgba(206, 93, 151, 1); /* mapping */
--tx: var(--black); --tx-rgba: var(--black-rgba); /* primary text */
--tx-2: var(--base-600); --tx-2-rgba: var(--base-600-rgba); /* muted text */
--tx-3: var(--base-300); --tx-3-rgba: var(--base-300-rgba); /* faint text */
--ui-3: var(--base-200); --ui-3-rgba: var(--base-200-rgba); /* active borders */
--ui-2: var(--base-150); --ui-2-rgba: var(--base-150-rgba); /* hovered borders */
--ui: var(--base-100); --ui-rgba: var(--base-100-rgba); /* borders */
--bg-2: var(--base-50); --bg-2-rgba: var(--base-50-rgba); /* secondary background */
--bg: var(--paper); --bg-rgba: var(--paper-rgba); /* main background */
--re: var(--red-600); --re-rgba: var(--red-600-rgba); /* error text */
--or: var(--orange-600); --or-rgba: var(--orange-600-rgba); /* warning text */
--ye: var(--yellow-600); --ye-rgba: var(--yellow-600-rgba);
--gr: var(--green-600); --gr-rgba: var(--green-600-rgba); /* success text */
--cy: var(--cyan-600); --cy-rgba: var(--cyan-600-rgba); /* active states */
--bl: var(--blue-600); --bl-rgba: var(--blue-600-rgba); /* links */
--pu: var(--purple-600); --pu-rgba: var(--purple-600-rgba);
--ma: var(--magenta-600); --ma-rgba: var(--magenta-600-rgba);
--re-2: var(--red-400); --re-2-rgba: var(--red-400-rgba);
--or-2: var(--orange-400); --or-2-rgba: var(--orange-400-rgba);
--ye-2: var(--yellow-400); --ye-2-rgba: var(--yellow-400-rgba);
--gr-2: var(--green-400); --gr-2-rgba: var(--green-400-rgba);
--cy-2: var(--cyan-400); --cy-2-rgba: var(--cyan-400-rgba);
--bl-2: var(--blue-400); --bl-2-rgba: var(--blue-400-rgba);
--pu-2: var(--purple-400); --pu-2-rgba: var(--purple-400-rgba);
--ma-2: var(--magenta-400); --ma-2-rgba: var(--magenta-400-rgba);
}
body {
--body-bg: var(--bg-2); /* 全体の背景色 */
/* navbar背景色については別ページで個別に設定
--navbar-bg: var(--hogehoge);
*/
--navbar-icon-color: var(--paper);
--brand-icon-color: var(--navbar-icon-color);
--navbar-icon-active-color: var(--paper);
--navbar-icon-hovered-color: var(--base-100);
--navbar-title-color: var(--paper);
/* --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(16, 15, 15, 0.0875); /* --blackを薄く透過で敷く */
--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(208, 162, 21, 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,
.table-block .table-block-start {
border: solid 1px var(--ui-3);
background-color: var(--base-200);
padding: 2px 5px;
color: var(--tx);
}
.line span.code-block .code-block-start a,
.table-block .table-block-start a {
color: var(--tx);
}
/*
.code-block {
--code-bg: var(--bg-2); 上記で設定済み
--code-color: var(--tx-2);
font-weight: normal;
}
code.highlight .hljs-subst {
color: var(--code-color);
}
code.highlight .hljs-title {
color: var(--re);
font-weight: normal;
}
code.highlight .hljs-name {
color: var(--or);
}
code.highlight .hljs-tag {
color: var(--tx);
}
code.highlight .hljs-attr {
color: var(--bl);
font-style: italic;
}
code.highlight :is(
.hljs-built_in,
.hljs-selector-tag,
.hljs-section
) {
color: var(--bl);
}
code.highlight .hljs-keyword {
color: var(--gr);
}
code.highlight :is(
.hljs-string,
.hljs-attribute,
.hljs-symbol,
.hljs-bullet,
.hljs-addition,
.hljs-code,
.hljs-regexp,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-template-tag,
.hljs-quote,
.hljs-deletion
) {
color: var(--cy);
}
code.highlight :is(
.hljs-meta,
.hljs-meta .hljs-string
) {
color: var(--bl);
}
code.highlight .hljs-comment {
color: var(--tx-3);
}
code.highlight :is(
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-name
) {
font-weight: normal;
}
code.highlight :is(
.hljs-literal,
.hljs-number
) {
color: var(--pu);
}
code.highlight .hljs-emphasis {
font-style: italic;
}
code.highlight .hljs-strong {
font-weight: bold;
}
*/
参考
/icons/hr.icon
code:old.css
body {
background-color: var(--bg-2);
color: var(--tx);
}
.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);
}