settings
code:style.css
:root {
--white: #FFFFFF;
--black: #000000;
--gray: #F2F2F7;
--gray-2: #E5E5EA;
--gray-3: #D1D1D6;
--gray-4: #C7C7CC;
--gray-5: #AEAEB2;
--gray-6: #8E8E93;
--blue: #007AFF;
--purple: #AF52DE;
--yellow: #FFCC00;
--orange: #FF9500;
--red: #FF3B30;
--pink: #FF2D55;
--green: #34C759;
--mint: #00C7BE;
--teal: #30B0C7;
--cyan: #32ADE6;
--indigo: #5856D6;
--brown: #A2845E;
--editor-white: #FFFFFF;
--editor-black: #000000;
--editor-gray: #F2F2F7;
--editor-gray-2: #E5E5EA;
--editor-gray-3: #D1D1D6;
--editor-gray-4: #C7C7CC;
--editor-gray-5: #AEAEB2;
--editor-gray-6: #8E8E93;
--shadow: #00000010;
}
* {
--navbar-title-color: #FFFFFF;
--navbar-icon-color: #FFFFFF;
--brand-icon-color: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
:root {
--white: #000000;
--black: #FFFFFF;
--gray: #1C1C1E;
--gray-2: #2C2C2E;
--gray-3: #3A3A3C;
--gray-4: #48484A;
--gray-5: #636366;
--gray-6: #8E8E93;
--blue: #0A84FF;
--purple: #BF5AF2;
--yellow: #FFD60A;
--orange: #FF9F0A;
--red: #FF453A;
--pink: #FF375F;
--green: #30D158;
--mint: #66D4CF;
--teal: #40C8E0;
--cyan: #64D2FF;
--indigo: #5E5CE6;
--brown: #AC8E68;
--shadow: #FFFFFF10;
}
}
body {
width: auto;
height: auto;
min-height: 100vh;
color: var(--black);
margin: 0;
background-color: var(--gray);
background-size: contain;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
}
* {
--brand-icon-color: #FFFFFF;
--navbar-title-color: #FFFFFF;
--navbar-icon-color: #FFFFFF;
}
* {
font-family: 'ui-rounded', 'SF Pro Rounded', "ヒラギノ角ゴシック", system-ui, sans-serif;
font-variant-numeric: tabular-nums !important;
}
.container {
width: auto;
max-width: none;
padding: 0;
margin: 0 20px;
}
ul {
display: flex;
width: 100%;
justify-content: center;
flex-wrap: wrap;
}
hr {
border-top: solid 2px var(--gray-2);
}
.page-list ul.grid {
grid-template-columns: repeat(auto-fill, 200px);
gap: 10px;
justify-content: center;
}
.clearfix {
margin-bottom: 40px;
}
.btn-primary,
data-hover-visible .btn-primary:hover {
color: var(--editor-white);
background-color: var(--blue);
border: none;
}
.navbar {
box-shadow: none;
}
.navbar-default {
background-color: var(--editor-black);
border: none;
border-top: none;
border-color: transparent;
}
.navbar .navbar-brand {
color: var(--editor-white);
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border: none;
border-top: none;
border-color: transparent;
}
.navbar .navbar-menu>li>a {
color: var(--editor-white);
}
.navbar .navbar-menu>li .icon {
border: solid 2px transparent;
}
.global-menu li a.updated,
.global-menu li a.highlight {
border: none;
}
.global-menu.dropdown-menu>li>a .kamon,
.global-menu.dropdown-menu>li.dropdown-header .kamon {
fill: var(--black);
}
.expandable-menu .toggle-button {
opacity: 1;
}
.stream .page .line {
color: var(--editor-black);
}
.stream .page .page-link {
color: var(--blue);
}
.stream .page .link {
color: var(--blue);
}
.stream h1 {
color: var(--gray-6);
background-color: var(--gray);
font-weight: 700;
}
.dropdown-menu {
width: 100%;
background-color: var(--white);
border: none;
border-top: none;
border-radius: 10px;
box-shadow: 0 5px 20px var(--shadow);
padding: 5px;
}
.dropdown-menu>li>a {
color: var(--black);
border-radius: 5px;
}
.project-list-tab>a {
color: var(--black);
}
.dropdown-menu .divider {
background-color: var(--gray);
}
.dropdown-header {
color: var(--gray-6);
}
.project-list-header-line {
border-top: solid;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border: none;
border-top: none;
}
.new-button {
background-color: var(--blue);
}
.new-button .horizontal-line {
color: var(--white);
}
.new-button .vertical-line {
color: var(--white);
}
.search-form .form-group .button-container button {
color: var(--black);
}
.search-form .form-group .button-container button .kamon {
fill: var(--black);
}
.navbar a.mobile-search-toggle.active {
color: var(--blue) !important;
}
.expandable-menu {
background-color: var(--editor-black);
border-radius: 5px 0 0 5px;
}
.expandable-menu .toggle-button {
color: var(--editor-white);
}
.quick-launch {
color: var(--black);
}
.quick-launch .project-home,
.quick-launch .history-back-button {
color: var(--black);
background-color: transparent;
border-radius: 10px;
outline: none;
outline-offset: 0;
}
.global-menu .project-list-filter input::placeholder,
.drawer .project-list-filter input::placeholder {
color: var(--gray-6);
}
.page-sort-menu .tool-btn {
color: var(--black);
background-color: transparent;
outline: solid 5px transparent;
outline-offset: 0;
border-radius: 10px;
}
.btn {
margin: 5px;
padding: 5px;
border: none;
border-top: none;
outline: solid 5px transparent;
outline-offset: 0;
border-radius: 5px;
}
.page-list .grid li {
width: 200px;
height: 235px;
margin: 5px;
}
.page {
color: var(--editor-black);
background-color: var(--editor-white);
padding: 40px;
border: none;
border-radius: 20px;
box-shadow: 0 20px 40px var(--shadow);
}
.editor {
color: var(--editor-black);
}
.grid li.page-list-item a {
color: var(--editor-black);
background-color: var(--editor-white);
box-shadow: 0 10px 20px var(--shadow);
outline: solid 5px transparent;
outline-offset: 0;
border-radius: 20px;
}
.grid li.page-list-item a .header.pinned {
border: none;
border-top: none;
border-color: transparent;
}
.grid li.page-list-item a .header {
border: none;
border-top: none;
border-color: transparent;
padding: 15px 15px 0 15px;
}
.grid li.page-list-item a .title {
color: var(--editor-black);
font-size: 16px;
line-height: 20px;
}
.grid li.page-list-item a .description {
color: var(--gray-6);
font-size: 12px;
line-height: 15px;
}
.grid li.page-list-item a .pin {
display: none;
border-top: none;
}
.grid li.page-list-item a .header {
color: var(--blue);
border: none;
border-top: none;
}
.grid li.page-list-item a .icon {
width: 100%;
padding: 10px;
border-radius: 10px;
margin-inline: 0;
}
.grid li.page-list-item a .icon img {
width: 100%;
border-radius: 10px;
}
.grid li.page-list-item a .content {
height: 250px;
}
.related-page-list .grid li {
width: 200px;
height: 235px;
}
.list li.page-list-item {
color: var(--black);
background-color: var(--white);
border: none;
width: 100%;
box-shadow: 0 10px 20px var(--shadow);
}
.list li.page-list-item a {
width: 100%;
color: var(--black);
}
.list li.page-list-item a .description {
color: var(--gray-6);
}
.list li.page-list-item:last-of-type {
width: 100%;
}
.line .telomere .telomere-border {
border: none;
border-color: transparent;
}
.line .telomere .telomere-border .description,
.line .telomere .telomere-border .menu-item {
color: var(--black);
background-color: var(--gray);
border: none;
border-radius: 0.5em;
padding: 0 0.5em;
box-shadow: 0 5px 10px var(--shadow);
}
a {
color: var(--blue);
font-weight: 700;
text-decoration: none;
}
.line.line-title {
color: var(--editor-black);
font-weight: 700;
}
.line.line-title .text {
border-bottom: solid 5px var(--blue);
margin-bottom: 20px;
padding: 0;
}
.line a.link {
color: var(--blue);
font-weight: 700;
text-decoration: none;
}
.line.cursor-line .link {
color: var(--indigo);
font-weight: normal;
text-decoration: none;
}
.line span.code-block .code-block-start {
background-color: var(--editor-gray);
}
.page-menu ul>li>div {
color: var(--black);
}
.page-menu .tool-btn {
color: var(--gray-6);
}
data-hover-visible .page-menu .tool-btn:hover {
color: var(--gray-5);
background-color: transparent;
}
.page-list-item .description .page-link {
color: var(--blue);
background-color: var(--editor-gray);
padding: 0 0.5em;
border-radius: 0.5em;
}
.status-bar {
display: flex;
position: fixed;
bottom: 10px;
right: 10px;
}
.status-bar>div {
color: var(--black);
background-color: var(--gray-2);
border: none;
border-top: none;
border-bottom: none;
border-radius: 5px;
}
.status-bar>div.offline-mode-status {
color: var(--editor-white);
background-color: var(--cyan);
}
.page-list-item .description .link {
color: var(--blue);
text-decoration: none;
}
.search-form .form-group .button-container button.focus,
.search-form .form-group .button-container button.for-mobile {
color: var(--gray-6);
}
.project-list-tab>a.active {
color: var(--editor-white);
background-color: var(--blue);
}
.search-form .form-group .button-container button.focus .kamon,
.search-form .form-group .button-container button.for-mobile .kamon {
fill: var(--black);
}
.scroll-bar-overlay .unread-bar {
background-color: var(--blue);
}
.dropdown-menu-right {
width: auto !important;
}
.btn-default {
color: var(--black);
background-color: transparent;
}
.project-search .project-search-count {
color: var(--black);
}
.project-list-header-title {
color: var(--white);
background: var(--black);
}
.drawer .drawer-menu {
background-color: var(--white);
}
.drawer .drawer-menu ul li a {
color: var(--black);
}
.drawer .drawer-menu ul li a.selected {
color: var(--blue);
}
.drawer .drawer-menu ul li.list-header {
color: var(--gray-6);
}
.drawer .drawer-menu .divider {
background-color: var(--gray);
}
.drawer .drawer-menu ul li a.updated,
.drawer .drawer-menu ul li a.highlight {
border: none;
}
.btn.disabled,
.btndisabled,
fieldsetdisabled .btn {
opacity: 1;
}
.grid li.page-list-item a .hover {
color: var(--editor-black);
background-color: transparent;
}
.full-content-modal .modal-dialog .modal-content .modal-body a.link .text {
color: var(--blue);
font-weight: 700;
text-decoration: none;
}
.full-content-modal .modal-dialog .modal-content .modal-body a.link .text span {
border: none;
}
.search-form .form-group input {
color: var(--black);
background-color: var(--white);
border: solid 2px var(--editor-white);
border-radius: 10px;
outline: none;
outline-offset: 0;
box-shadow: none;
}
.search-not-found {
color: var(--black);
}
.global-menu.dropdown-menu>li.dropdown-menu-button a {
color: var(--black);
}
.navbar .open .navbar-brand .kamon-caret-down {
color: var(--blue);
}
.user-menu li a.highlight {
color: var(--blue);
}
.user-menu li a.updated,
.user-menu li a.highlight {
border: none;
}
.page-list .create-searched-page .kamon-icon .kamon {
color: var(--gray-6);
}
.global-menu .project-list-filter .kamon,
.drawer .project-list-filter .kamon {
fill: var(--black);
}
.quick-launch .plan-badge,
.quick-launch .private-badge {
color: var(--gray-6);
background-color: transparent;
border-radius: 5px;
padding: 0 5px;
white-space: nowrap;
}
.quick-launch .plan-badge a {
color: var(--gray-6);
}
.stream .project-events .page-short .expand {
color: var(--editor-black);
background: var(--editor-gray);
border-radius: 0 0 20px 20px;
}
.expandable-menu .page-menu .tool-btn {
color: var(--editor-white);
}
data-hover-visible .navbar .navbar-menu>li>a:hover {
color: var(--editor-white);
}
.navbar .navbar-menu>li>a:hover img {
opacity: 1;
}
.global-menu li.guest-project .button-delete,
data-hover-visible .global-menu li.guest-project .button-delete:hover {
color: var(--red);
}
.line a.page-linktype="hashTag",
data-hover-visible .line a.page-linktype="hashTag":hover {
color: var(--editor-white);
background-color: var(--blue);
border-radius: 10px;
padding: 5px 10px;
}
.line a.empty-page-link type="hashTag",
data-hover-visible .line a.empty-page-linktype="hashTag":hover {
color: var(--gray-6);
background-color: var(--gray);
border-radius: 10px;
padding: 5px 10px;
}
.line a.page-link,
data-hover-visible .line a.page-link:hover {
color: var(--blue);
border-radius: 10px;
margin: 0;
}
data-hover-visible .list li.page-list-item a:hover {
background-color: var(--white);
}
.line a.empty-page-linktype="hashTag",
data-hover-visible .line a.empty-page-linktype="hashTag":hover {
color: var(--editor-gray-6);
background-color: var(--editor-gray);
border-radius: 10px;
padding: 5px 10px;
}
data-hover-visible .line a.link:hover {
color: var(--blue);
}
data-hover-visible .new-button:hover {
background-color: var(--blue);
}
.project-list-tab>a:hover {
color: var(--black);
background: var(--gray);
}
data-hover-visible .project-list-tab>a:hover {
color: var(--black);
background: var(--gray);
}
.dropdown-menu>li>a.selected,
data-hover-visible .dropdown-menu>li>a.selected,
.dropdown-menu>li>a.selected:hover,
data-hover-visible .dropdown-menu>li>a.selected:hover {
color: var(--blue);
}
.dropdown-menu>.disabled>a,
.dropdown-menu>.disabled>a:active,
data-hover-visible .dropdown-menu>.disabled>a:hover,
data-focus-visible .dropdown-menu>.disabled>a:focus {
color: var(--gray-6);
}
data-hover-visible .quick-launch .project-home:hover,
data-hover-visible .quick-launch .history-back-button:hover {
color: var(--black);
background-color: transparent;
}
data-hover-visible .page-sort-menu .tool-btn:hover {
color: var(--black);
background-color: transparent;
}
data-hover-visible .grid li.page-list-item a:hover {
color: var(--editor-black);
background-color: var(--editor-white);
box-shadow: 0 10px 20px var(--shadow);
border-radius: 20px;
}
data-hover-visible .project-list-tab>a.active:hover {
color: var(--editor-white);
background-color: var(--blue);
}
a:active,
data-hover-visible a:hover,
data-focus-visible a:focus {
color: var(--blue);
text-decoration: none;
}
.btn:active,
.btn.active,
.btn-primary:active,
.btn-primary.active,
.open>.btn-primary.dropdown-toggle,
.btn-primary:active,
.btn-primary.active,
.open>.btn-primary.dropdown-toggle {
color: var(--editor-white);
background-color: var(--blue);
filter: brightness(0.9);
border: none;
box-shadow: none;
}
data-hover-visible .dropdown-menu>li>a:hover {
color: var(--black);
background-color: var(--gray);
}
data-hover-visible .grid li.page-list-item a:hover {
box-shadow: 0 10px 20px var(--shadow);
}
data-hover-visible .quick-launch .plan-badge:hover,
data-hover-visible .quick-launch .private-badge:hover {
color: var(--gray-6);
background-color: transparent;
}
data-hover-visible .quick-launch .plan-badge a:hover,
data-focus-visible .quick-launch .plan-badge a:focus {
color: var(--gray-6);
background-color: transparent;
}
data-hover-visible .navbar-default .navbar-brand:hover {
color: var(--editor-white);
}
data-focus-visible a:focus,
data-focus-visible .btn:focus,
data-focus-visible .btn:active:focus,
data-focus-visible .btn.active:focus {
box-shadow: none;
border: none;
}
data-focus-visible .btn:focus {
color: var(--black);
background-color: var(--gray-2);
box-shadow: none;
outline: none;
outline-offset: 0;
transition: 500ms ease-out;
}
data-focus-visible .navbar .navbar-menu>li>a:focus {
color: var(--blue);
transition: 500ms ease-out;
}
data-focus-visible .navbar .navbar-menu>li>a:focus .icon {
border: solid 2px var(--blue);
transition: 500ms ease-out;
}
data-focus-visible .new-button:focus {
background-color: var(--white);
}
data-focus-visible .new-button:focus .horizontal-line,
data-focus-visible .new-button:focus .vertical-line {
background-color: var(--blue);
}
data-hover-visible .btn-primary:active:hover,
data-focus-visible .btn-primary:active:focus,
data-hover-visible .btn-primary.active:hover,
data-focus-visible .btn-primary.active:focus,
data-hover-visible .open>.btn-primary.dropdown-toggle:hover,
data-focus-visible .open>.btn-primary.dropdown-toggle:focus {
color: var(--editor-white);
background-color: var(--blue);
border: none;
}
data-hover-visible .btn-primary.disabled:hover,
data-focus-visible .btn-primary.disabled:focus,
data-hover-visible .btn-primarydisabled:hover,
data-focus-visible .btn-primarydisabled:focus,
data-hover-visible fieldsetdisabled .btn-primary:hover,
data-focus-visible fieldsetdisabled .btn-primary:focus {
color: var(--editor-white);
background-color: var(--blue);
border: none;
}
.dropdown-menu>li>a:active,
data-focus-visible .dropdown-menu>li>a:focus {
color: var(--black);
background-color: var(--gray-2);
border: none;
box-shadow: none;
}
data-focus-visible .search-form .form-group input:focus,
.search-form .form-group input.for-mobile {
color: var(--black);
background-color: var(--white);
border: solid 2px var(--blue);
border-radius: 10px;
box-shadow: none;
outline: none;
outline-offset: 0;
transition: 500ms ease-out;
}
.search-form .form-group input:focus,
.search-form .form-group input.for-mobile {
color: var(--black);
background-color: var(--white);
border: solid 2px var(--blue);
border-radius: 10px;
box-shadow: none;
outline: none;
outline-offset: 0;
transition: 500ms ease-out;
}
data-focus-visible .grid li.page-list-item a:focus {
border: none;
box-shadow: none;
outline: solid 5px var(--blue);
outline-offset: 0;
transition: 500ms ease-out;
}
data-focus-visible .project-list-tab>a:focus {
color: var(--black);
background-color: var(--gray-2);
text-decoration: none;
}
data-focus-visible .project-list-tab>a.active:focus {
color: var(--blue);
background-color: var(--gray-2);
text-decoration: none;
}
data-focus-visible .dropdown-menu>li>a.selected:focus {
color: var(--blue);
background-color: var(--gray-2);
}
.navbar-default .navbar-brand:active,
data-focus-visible .navbar-default .navbar-brand:focus {
color: var(--editor-gray-6) !important;
}
data-focus-visible .btn:focus,
data-focus-visible .btn.active:focus {
color: var(--blue);
background-color: var(--gray-2);
}
data-focus-visible .quick-launch .project-home:focus,
data-focus-visible .quick-launch .history-back-button:focus {
color: var(--blue);
background-color: transparent;
}
data-focus-visible .page-sort-menu .tool-btn:focus {
color: var(--blue);
background-color: transparent;
}
.quick-launch .project-home:active,
.quick-launch .history-back-button:active {
color: var(--gray-6) !important;
background-color: transparent;
}
.grid li.page-list-item a:active * {
background-color: var(--editor-gray);
}
.line a.page-linktype="hashTag":active {
color: var(--editor-white);
background-color: var(--blue);
filter: brightness(0.9);
border-radius: 10px;
padding: 5px 10px;
}
.line a.empty-page-linktype="hashTag":active {
color: var(--gray-6);
background-color: var(--gray);
filter: brightness(0.9);
border-radius: 10px;
padding: 5px 10px;
}
.line a.page-link:active {
color: var(--blue);
filter: brightness(0.9);
border-radius: 10px;
}
.list li.page-list-item a:active {
background-color: var(--gray);
}
.line a.empty-page-linktype="hashTag":active {
color: var(--gray-6);
background-color: var(--gray);
filter: brightness(0.9);
border-radius: 10px;
padding: 5px 10px;
}
.new-button:active,
.new-button:active .horizontal-line,
.new-button:active .vertical-line {
filter: brightness(0.9);
}
data-hover-visible .new-button:active,
data-hover-visible .new-button:active {
background-color: var(--blue);
}
.expandable-menu .page-menu .tool-btn:active:not(disabled) {
color: var(--editor-gray-6);
background-color: var(--editor-black);
border: none;
}
.expandable-menu .toggle-button:active {
color: var(--editor-gray-6);
background-color: var(--editor-black);
border: none;
}
.grid li.page-list-item a:active .hover {
background-color: transparent;
}
.search-form .form-group input:active,
.search-form .form-group input.for-mobile {
color: var(--black);
background-color: var(--white);
border-radius: 10px;
box-shadow: none;
outline-offset: 0;
transition: 500ms ease-out;
}
.page-sort-menu .tool-btn:active {
color: var(--gray-6) !important;
background-color: transparent;
}
.quick-launch .plan-badge a:active {
filter: brightness(0.9);
}
.line a.link:active {
filter: brightness(0.9);
}
.navbar .navbar-menu>li>a:active {
color: var(--editor-gray-6) !important;
}
.drawer .drawer-menu ul li a:active {
background-color: var(--gray-2);
}
.new-button:active,
data-hover-visible .new-button:active {
background-color: var(--blue);
}
.dot {
background-color: var(--blue) !important;
}