settings

色とか

code:style.css

/**

* :not(#specificity-hack) は存在しない ID の not を設定することで CSS の詳細度を上げる Hack

html:not(#specificity-hack) {

--card-box-hover-shadow: 0 2px 0 rgba(0, 0, 0, 0.23);

--card-description-code-color: #342d9c;

--tool-bg: rgba(0, 0, 0, 0.1);

--relation-label-bg: #fff;

--relation-label-text: #6d6d6d;

--relation-label-links-bg: #fff;

--relation-label-links-text: #5e8af7;

--relation-label-empty-bg: #fff;

--relation-label-empty-text: #fd7373;

--body-bg: #dcdde0;

--navbar-icon-color: #fff;

--navbar-icon-active-color: rgba(255, 255, 255, 0.5);

--navbar-icon-hovered-color: var(--navbar-icon-active-color);

--search-form-bg: rgba(255, 255, 255, 0.2);

--search-form-text-color: rgba(255, 255, 255, 0.5);

--card-title-color: #444;

--card-title-bg: #f2f2f3;

--card-bg: #fff;

--card-hover-bg: rgba(0, 0, 0, 0.05);

--card-active-bg: rgba(0, 0, 0, 0.1);

--card-description-color: #7a7a7a;

--card-description-link-color: #6e8af3;

--card-box-shadow-color: #b0b1b3;

--card-box-shadow: 0 2px 0 var(--card-box-shadow-color);

--card-title-bg-pinned: #f2f2f3;

--relation-label-bg: #edeeee;

--relation-label-text: #444;

--relation-label-links-bg: #6e8af3;

--relation-label-links-text: #fff;

--relation-label-empty-bg: #fb7476;

--relation-label-empty-text: #fff;

--tool-color: #a0a0a0;

--tool-light-color: #c6c6c6;

--tool-badge-bg: #edeeee;

--tool-bg: #edeeee;

--tool-text-color: #444;

--new-button-bg: #fff;

--new-button-hover-bg: var(--navbar-bg);

--new-button-active-bg: var(--navbar-bg);

--telomere-border: #edeeee;

--telomere-unread: #0085ba;

--page-text-color: #444;

--page-link-color: #6e8af3;

--page-link-hover-color: #3f57b1;

--page-link-color-cursor-line: #8159c3;

--page-bg: #fff;

--empty-page-link-color: #fb7476;

--empty-page-link-hover-color: #cf554d;

--line-title-color: #444;

--search-form-icon-color: #fff;

--search-form-icon-focus-color: #4a4a4a;

--navbar-bg: #9e060c;

--card-backside: #9e060c;

}

logo を変更

code:style.css

html {

--logo-url: url(https://scrapbox.io/files/613a20725a0f94001d053f08.svg) !important;

}

.brand-icon {

background-color: #fff;

background-position: center;

border-radius: 999999px;

background-size: 80%;

background-repeat: no-repeat;

}

検索バー

code:style.css

.navbar .row .col-search {

width: 60%;

}

.navbar .row .col-menu,

.navbar .row .col-brand {

width: 0;

flex-grow: 1;

}

.search-form .form-group input {

border-radius: 999999px;

}

追加ボタン

code:style.css

.new-button {

width: 54px;

height: 54px;

border-radius: 54px;

background-color: var(--navbar-bg);

--new-button-vertical-color: #fff;

--new-button-horizontal-color: #fff;

position: absolute;

top: 0;

right: 0;

box-shadow: 0px 3px 5px -1px rgb(0 0 0 / 20%), 0px 6px 10px 0px rgb(0 0 0 / 14%), 0px 1px 18px 0px rgb(0 0 0 / 12%);

transform: translateY(100vh) translateY(-100%) translate(-3rem, -3rem);

}

.new-button .horizontal-line {

top: 25px;

left: 15px;

}

.new-button .vertical-line {

left: 25px;

top: 15px;

}