settings

関連項目

全体設定

諸々のImport

code:style.css

@import "/api/code/kalaclista/settings%2F色定義/style.css";

@import "/api/code/kalaclista/settings%2Ffavicon/style.css";

@import "/api/code/kalaclista/settings%2F拡張記法/style.css";

全要素共通

code:style.css

:root {

font-size: 16px;

}

色の定義の上書き

code:style.css

/* light mode */

:root {

--theme-page-background: var(--color-gray95);

--theme-page-foreground: var(--color-gray00);

--theme-page-foreground-dim: var(--color-gray40);

--theme-page-foreground-selected: var(--color-gray20);

--theme-page-link: var(--color-blue50);

--theme-page-frame: var(--color-gray90);

--theme-page-empty: var(--color-magenta50);

--theme-page-exists: var(--color-blue50);

--theme-page-new: var(--color-yellow90);

--theme-content-background: var(--color-gray100);

--theme-item-selected: var(--color-blue85);

--theme-item-notified: var(--color-yellow65);

--theme-item-updated: var(--color-green85);

--theme-brand-1: var(--color-blue75);

--theme-brand-2: var(--color-blue50);

}

/* dark mode */

@media (prefers-color-scheme: dark) {

/* あとでやる */

}

/* コンテナサイズ */

:root {

--container-max-width: 55rem;

}

ページ配色

code:style.css

/* 背景色 */

--body-bg: var(--theme-page-background);

--2hop-search-bg: var(--theme-content-background);

/* 文字色 */

--page-text-color: var(--theme-page-foreground);

--page-link-color: var(--theme-page-link);

--empty-page-link-color: var(--theme-page-empty);

--navbar-title-color: var(--theme-page-foreground);

--navbar-icon-color: var(--theme-page-foreground);

--navbar-icon-hovered-color: var(--theme-page-foreground-selected);

--navbar-icon-active-color: var(--theme-page-foreground-selected);

--card-title-color: var(--theme-page-foreground);

--card-description-color: var(--theme-page-foreground-dim);

--card-description-link-color: var(--theme-page-link);

/* テロメア */

--telomere-border: var(--theme-page-frame);

--telomere-unread: var(--theme-item-notified);

--telomere-updated: var(--theme-item-updated);

/* ツールバー */

--tool-text-color: var(--theme-page-foreground-selected);

--tool-color: var(--theme-page-foreground-selected);

--tool-bg: var(--theme-item-selected);

}

.navbar {

--button-hover-color: var(--theme-item-selected);

--button-active-color: var(--them-item-notified);

}

color: var(--color-blue50);

}

color: var(--theme-page-foreground);

background-color: var(--theme-item-selected);

}

.global-menu li a.updated, .global-menu li a.highlight {

border-left-color: var(--color-blue50);

}

.page-filter-menu li .button-delete {

color: var(--theme-page-foreground);

}

ブランドアイコンをかっこよく

code:style.css

.brand-icon > svg > g {

path:nth-child(1) { fill: var(--theme-brand-1); }

path:nth-child(2) { fill: var(--theme-brand-2); }

}

装飾エフェクト

アイコンスピナー（くるくる回る）

code:style.css

.navbar .new-button,

.navbar .brand-icon {

&:hover {

transform: rotate(-2.5turn);

transition: transform 0.5s ease;

}

}

磨りガラス効果

code:style.css

.navbar {

box-shadow: none;

background-color: rgba(0,0,0,0);

backdrop-filter: blur(1rem);

}

枠の色をふわっと変える

code:style.css

.page-list .grid li.page-list-item a,

.related-page-list .grid li.page-list-item a {

transition: border-color 0.15s ease;

}

各要素の調整

コンテナサイズ

code:style.css

.navbar .row:not(.col-search) {

grid-template-columns: minmax(11.5rem, 1fr) minmax(auto, var(--container-max-width)) minmax(46px ,1fr);

}

.navbar .navbar-menu > li > a {

min-width: 46px;

}

.page-column {

display: grid;

grid-template-columns: 46px minmax(200px, var(--container-max-width)) min-content;

grid-template-areas: "spacer page menu" ;

}

.container,

.stream-page-column {

max-width: unset;

}

.container:has(.search-result-list),

.quick-launch,

.page-list,

.stream-page-column {

display: grid;

grid-template-columns: minmax(11.5rem, 1fr) minmax(auto, var(--container-max-width)) minmax(46px ,1fr);

grid-template-areas: "spacer page menu" ;

}

.container:has(.search-result-list),

.quick-launch,

.page-list,

.stream-page-column {

&::before, &::after {

display: block;

content: '';

}

}

@media (max-width: 992px) {

.container:has(.search-result-list),

.page-column,

.quick-launch,

.page-list,

.stream-page-column {

display: block;

}

}

検索欄

code:style.css

& {

padding: 0.5rem 0.25rem;

outline: 0.1875rem solid transparent;

border-radius: 0.25rem;

}

&:focus-within {

outline-color: var(--theme-item-selected);

}

}

.global-menu .project-list-filter a,

.related-page-list .toolbar .related-page-list-search {

& {

border: 0.1878rem solid transparent;

}

&:focus-within {

box-shadow: none;

border-color: var(--theme-item-selected);

}

}

各種ページの調整

ページ

code:style.css

.page {

/* 枠で囲む */

& {

border: 0.5rem solid var(--theme-page-frame);

border-radius: 1.5rem;

box-shadow: none;

padding: 1rem;

}

/* テロメアを枠に埋め込む */

& .line .telomere .telomere-border {

left: -1.5rem;

border-left-width: 0.5rem !important;

}

/* テロメアメニューの色とかを調整する */

& .line .telomere .telomere-border .description,

& .line .telomere .telomere-border .menu-item {

background-color: var(--theme-page-frame);

color: var(--theme-page-foreground);

}

& .line .telomere .telomere-border .menu-item:hover {

background-color: var(--theme-item-selected);

color: var(--theme-page-foreground);

}

}

ページ一覧

code:style.css

.related-page-list ul.grid {

grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));

}

.page-list ul.grid li.page-list-item,

.related-page-list ul.grid li.relation-label,

.related-page-list ul.grid li.page-list-item {

& {

min-width: 10rem;

min-height: 10rem;

max-width: 10rem;

max-height: 10rem;

}

& a {

border: 0.375rem solid var(--theme-page-frame);

border-radius: 1rem;

box-shadow: none;

}

& a:has(div.pin) {

border-radius: 0.5rem ;

}

border-color: var(--theme-item-selected);

box-shadow: none;

}

& a .header {

border-top: none ;

}

& a div.hover, & a div.pin {

display: none;

}

& .arrow {

border-width: 0.5rem;

left: calc(100% - 0.375rem);

top: calc(50% - 0.5rem);

}

}

.related-page-list .grid li.relation-label,

.related-page-list .grid li.relation-label:hover {

--theme-page-frame: var(--theme-page-background);

--relation-label-bg: var(--theme-page-new);

--relation-label-links-bg: var(--theme-item-notified);

}

.related-page-list .grid li.relation-label.links {

--theme-page-frame: var(--theme-page-background);

--relation-label-links-bg: var(--theme-page-exists);

}

.related-page-list .grid li.relation-label.empty-links {

--theme-page-frame: var(--theme-page-background);

--relation-label-empty-bg: var(--theme-page-empty);

}