Download raw (13.6 KB)
/* ========================================================================== Variables ========================================================================== */ :root { --public-color: #8400c8; --editing-color: #d43a00; --links: #ff6600; --backgrounds: #f7c4cc; } /* ========================================================================== Extra resets ========================================================================== */ a { color: inherit; text-decoration: inherit; } a[href^="http"]:after { content: " ↗"; } a:hover { color: var(--links); } li { list-style-type: none; } ::-webkit-scrollbar { width: 6px; height: 6px; background: var(--links); } ::-webkit-scrollbar-thumb { background: var(--public-color); border-radius: 6px; } ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: var(--backgrounds); opacity: 1; /* Firefox */ } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: red; } ::-ms-input-placeholder { /* Microsoft Edge */ color: red; } /* ========================================================================== General ========================================================================== */ .page { font-family: 'Moche'; font-size: 1.1em; line-height: 1.2em; font-weight: 500; color: var(--public-color); } /* ========================================================================== Atoms ========================================================================== */ .button { display: inline-block; padding: 0.25em 0.75em; border: 1px solid var(--links); border-color: white; /* margin: 1.2em 0; */ /* margin-top: 2em; */ /* margin-bottom: 0.5em; */ font-family: inherit; font-size: inherit; color: white; background-color: var(--links); cursor: pointer; } .button:hover { color: var(--links); background-color: var(--backgrounds); } .input { width: 100%; box-sizing: border-box; padding: 4px; border: 2px solid var(--public-color); border-top: none; font-family: inherit; color: inherit; background: transparent; } .input-group + .input-group { margin-top: 1.2em; } h3 + .input-group { margin-top: 0; } .input-group label { display: block; /* display: none; */ margin-bottom: 8px; } .input-group input:focus { border-color: var(--links); outline: none; } select:focus { border-color: var(--links); outline: none; } .form-wrapper { padding: 1.2rem; } .form-wrapper h1 { margin-bottom: .2em; font-size: 2.2em; line-height: 1em; font-family: 'Moche'; font-weight: normal; } .form-wrapper p { margin-bottom: 1.2em; } /* .panel select { */ .select { padding: 0.25em 0.75em; border: 1px solid white; background-color: var(--public-color); color: white; font-family: Mono; font-size: 0.9em; appearance: none; /* this is must */ -webkit-appearance: none; -moz-appearance: none; content: "\27A4"; } /* .panel select::after { */ .select::after { background-color: red; content: "\27A4"; } .select option { font-family: Mono; } .gifs { margin-right: 5px; } /* ========================================================================== Page layout ========================================================================== */ .page__wrapper { display: grid; overflow: hidden; width: 100vw; height: 100vh; grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .page__header { grid-row: 1; grid-column: 1; } .page__main { display: grid; overflow: hidden; grid-row: 2; grid-column: 1; grid-template-columns: 1fr auto; grid-template-rows: 1fr; } .page__index { padding: 1.2rem; column-width: 25em; } .page__content { overflow: auto; grid-row: 1; grid-column: 1 / 2; } .page__panel { overflow: auto; grid-row: 1; grid-column: 2 / 3; } /* ========================================================================== Main header ========================================================================== */ .header { display: flex; justify-content: space-between; padding: 1.2em; border-bottom: 2px solid var(--public-color); color: var(--public-color); } .header__menu { flex: 1; } .header__logo { max-width: 50em; margin-right: 1em; } /* Logo ========================================================================== */ .logo { color: var(--links); } .logo__intro { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* Main nav ========================================================================== */ .main-nav__item { } /* ========================================================================== Side panel ========================================================================== */ .panel { display: grid; overflow: hidden; height: 100%; grid-template-columns: 1fr auto; grid-template-rows: 1fr; } .panel__toggle { /* pointer-events: none; */ border-left: 2px double; grid-row: 1; grid-column: 2; writing-mode: vertical-rl; text-orientation: mixed; user-select: none; } .toggle__label { display: inline-block; padding: 1em .5em; transform: rotate(180deg); cursor: pointer; } .panel__content { overflow: auto; padding: 0 1em 1em 1em; } .panel h3 { margin: 1em 0 0.25em 0; font-size: 0.9em; color: #ffffff8f; } .panel .input { width: 100%; box-sizing: border-box; padding: 4px; border: 2px solid white; border-top: none; font-family: inherit; color: inherit; background: transparent; } .panel h1 { margin-bottom: 0.5em; font-size: 1.5em; } .panel__main { display: grid; overflow: auto; background: var(--public-color); color: white; grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .panel__section { display: none; width: 400px; box-sizing: border-box; padding: 1.2em; } .panel[data-target="create"] [data-target="create"], .panel[data-target="keywords"] [data-target="keywords"], .panel[data-target="help"] [data-target="help"] { color: var(--links); } .panel[data-target="create"] .panel__section--create, .panel[data-target="keywords"] .panel__section--keywords, .panel[data-target="help"] .panel__section--help { display: block; } .panel__section:target { display: block; } /* ========================================================================== Index ========================================================================== */ /* Index intro ========================================================================== */ .intro { padding: 2em; border: 4px solid; border-radius: 2em; } .index { padding: 0em 1.2em 1.2em 0em; } .index__sublist { margin-bottom: 1.1em; } .index__letter { font-family: 'Moche'; font-weight: bold; } .index__keyword { cursor: pointer; } .index__count { font-size: .75em; } /* Index intro ========================================================================== */ .texts__key { margin-left: 2em; color: var(--links); } .article_entry { padding-top: .5em; padding-bottom: .5em; background-repeat: no-repeat; text-shadow: 1px 1px 0px white, -1px 1px 0px white, -1px -1px 0px white, 1px -1px 1px white; } /* .article_entry + .article_entry { margin-top: 1em; } */ .article_entry__title { display: block; margin-bottom: 0.1em; font-family: 'latin_modern_roman10'; font-size: 1.7em; line-height: 1.2em; } .article_entry__type, .article_entry__date, .article_entry__authors, .article_entry__author { display: inline; } .article_entry__path { font-size: .75em; } .article_entry__type { font-family: 'Punknova'; font-size: 1.2em; } .article_entry__type + .article_entry__type { margin-left: 1em; } .article_entry__author + .article_entry__author:before { content: ", "; } .texts { margin-top: 0.4em; break-inside: avoid-column; } .texts + .texts { margin-top: 2em; } /* ========================================================================== Pad Manage ========================================================================== */ /* Breadcrumb ========================================================================== */ .breadcrumb__item { display: inline; } .breadcrumb__item + .breadcrumb__item:before { content: ":: "; } /* manage list ========================================================================== */ .manage_list li { padding: 5px 0px; border-bottom: 1px solid var(--public-color); } .node--folder:before { content: "\1F35E"; } /* manage actions ========================================================================== */ .node__actions { display: none; } .node:hover .node__actions { display: inline-block; } .node__actions .button { font-family: 'Moche'; font-size: 1em; } .node__actions .button:before { font-family: 'Noto'; } .node__actions .button--public:before { content: "\1F64C "; } .node__actions .button--private:before { content: "\1F63C "; } .node__actions .button--rename:before { content: "\1F485 "; } .node__actions .button--delete:before { content: "\1F4A8 "; } .node__actions .button span { display: none; font: inherit; } .node__actions .button:hover span { display: inline; } /* ========================================================================== Article ========================================================================== */ .article { font-size: 1.5em; line-height: 1.2em; font-family: 'latin_modern_roman10'; } .article__wrapper { max-width: 40em; padding: 1.2rem; margin: 0 auto; } .article__header { margin-bottom: 2.4em; text-align: center; } .article__meta { font-family: 'Moche'; font-size: .75em; line-height: 1.2; } .article__title { margin-top: 1em; margin-bottom: .2em; font-size: 2.2em; line-height: 1em; font-family: 'Moche'; font-weight: normal; } .article__body h2 { margin-top: 1.8em; font-size: 1.5em; line-height: 1.2em; font-family: 'Moche'; font-weight: normal; } .article__body h3 { font-size: 1em; font-family: 'Moche'; margin-bottom: 1em; margin-top: 2em; } .article__body h2 + h3 { margin-top: 1em ; } .article__body figure { max-width: 600px; margin: 0 auto; } .article__body figure img { width: 100%; } .article__body figcaption { font-size: .75em; } .article__body p, .article__body ul, .article__body figure { margin-bottom: 1.2em; } .article__body li:before { content: "— "; } .article__body em { font-style: italic; } .article__body strong { font-weight: bold; } .article__body blockquote p { margin-top: 1em; margin-left: 4em; font-size: 0.8em; margin-bottom: 0; line-height: 1.2em; } .article__body blockquote { margin-bottom: 1.2em; } .article__body blockquote blockquote p { margin-left: 6em; margin-top: 1em; } ol li { list-style-type: decimal; } ol li:before { content: " "; } span[property="aa:keyword"] { font-family: monospace; background-color: var(--backgrounds); padding: 0 12px; } span[property="aa:keyword"] { } /* ========================================================================== Pad write ========================================================================== */ .etherpad { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .switch-group { /* position: sticky; */ /* top: 0; */ /* display: flex; */ /* justify-content: flex-start; */ /* border-bottom: 2px double; */ /* margin-bottom: 1em; */ } /* .switch-group--right { justify-content: flex-end; } */ .switch + .switch { margin-left: 16px; } .switch { align-items: center; /* padding: 0 0 1em 0; */ background-color: white; } .switch:last-of-type { flex: 1; } .switch__label { margin-right: 8px; white-space: nowrap; font-size: 0.75em; } .switch__modes { display: flex; } .switch__mode { padding-right: 15px; white-space: nowrap; background-color: white; } .switch__mode.active { color: var(--links); } /* ========================================================================== Cheatsheet ========================================================================== */ .cheatsheet p { margin-top: 0.5em; } .cheatsheet pre { padding: 1em; margin: 1.2em 0; color: var(--links); white-space: pre-wrap; background-color: var(--backgrounds); } .cheatsheet code { font-family: Monospace; font-size: 1.2em; } .cheatsheet h1, .cheatsheet h2, .cheatsheet h3, .cheatsheet h4, .cheatsheet h5 { } .cheatsheet h1 { margin-bottom: 0.5em; font-size: 1.5em; line-height: 1em; } .cheatsheet h2 { margin-top: 1em; margin-bottom: 0.5em; margin-left: 1em; font-size: 1.25; } .cheatsheet h3 { font-weight: bold; } .cheatsheet dt { margin-left: 1em; font-family: monospace; color: var(--links); } .is-hidden { animation: fade_in_show 0.5s; animation-fill-mode: forwards; } @keyframes fade_in_show { from { height: auto; opacity: 1; } to { height: 0; opacity: 0; } } .foo { display: grid; overflow: hidden; width: 100%; height: 100%; box-sizing: padding-box; outline: 1px solid black; grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .baz { position: relative; overflow: auto; } .bar { /* border-bottom: 2px double; */ padding: 1.2rem; } .page__form { padding: 1.2rem; } .manage_list { padding: 1.2rem; } .error { color: var(--links); }