aboutsummaryrefslogtreecommitdiff
path: root/static/css/default.css
diff options
context:
space:
mode:
Diffstat (limited to 'static/css/default.css')
-rw-r--r--static/css/default.css1629
1 files changed, 1629 insertions, 0 deletions
diff --git a/static/css/default.css b/static/css/default.css
new file mode 100644
index 0000000..5feedfa
--- /dev/null
+++ b/static/css/default.css
@@ -0,0 +1,1629 @@
+/* ###### Semantic Pact CSS ###### */
+
+/* ----- Selection ----- */
+
+::selection {
+ color: #fff;
+ background-color: #000;
+ text-shadow: 0 0 currentColor;
+}
+
+::-webkit-selection {
+ color: #fff;
+ background-color: #000;
+ text-shadow: 0 0 currentColor;
+}
+
+::-moz-selection {
+ color: #fff;
+ background-color: #000;
+ text-shadow: 0 0 currentColor;
+}
+
+/* ----- Colors ----- */
+
+:root {
+ color-scheme: light dark;
+ --active-alternate: #cce1ff;
+ --background-bolder: #fff;
+ --background-transparent: rgba(255, 255, 255, 0.9);
+ --background: #fefefe;
+ --border-darker: #ccc;
+ --border-lighter: #eee;
+ --button-background: #fff;
+ --danger-background: #fcd2cf;
+ --danger: #8f0000;
+ --disabled: #999;
+ --fade: #555;
+ --foreground: #111;
+ --hover-alternate: #ebf3ff;
+ --hover: #eee;
+ --input-background: #eff3f4;
+ --link: #0149bc;
+ --shadow: #999;
+ --spoiler: #333;
+ --success-background: #d5f3c4;
+ --success: #1d3c0c;
+ --target-background: #fffdeb;
+ --warning-background: #ffe699;
+ --warning: #332600;
+ --widget-background: #f9f9f9;
+ --table-row-odd-background: #f3f3f3;
+ --table-row-even-background: #f9f9f9;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --active-alternate: var(--hover-alternate);
+ --background-bolder: #111;
+ --background-transparent: rgba(28, 28, 28, 0.9);
+ --background: #1c1c1c;
+ --border-darker: #555;
+ --border-lighter: #262626;
+ --button-background: #333;
+ --danger-background: #220402;
+ --danger: #ff9494;
+ --disabled: #999;
+ --fade: #aaa;
+ --foreground: #ddd;
+ --hover-alternate: #1c263a;
+ --hover: #303030;
+ --input-background: #333;
+ --link: #8cb4ff;
+ --shadow: #000;
+ --spoiler: #333;
+ --success-background: #2d3e0f;
+ --success: #d5f3c4;
+ --target-background: #2e2c00;
+ --warning-background: #3d3d00;
+ --warning: #ffe699;
+ --widget-background: #262626;
+ --table-row-odd-background: #2e3838;
+ --table-row-even-background: #273030;
+ }
+ img {
+ filter: brightness(75%);
+ }
+ code-block {
+ filter: invert(90%);
+ display: block;
+ }
+}
+
+/* ----- Psuedo ----- */
+
+*,
+::before,
+::after {
+ box-sizing: border-box;
+}
+
+::before,
+::after {
+ text-decoration: inherit;
+ vertical-align: inherit;
+}
+
+:target::before {
+ content: "";
+ display: block;
+ height: 4rem;
+ margin-top: -4rem;
+ visibility: hidden;
+}
+
+:not(#main):target micro-summary,
+:not(#main):target micro-summary:hover {
+ background-color: #fffdeb;
+ background-color: var(--target-background);
+ outline: 1px dashed #ccc;
+ outline: 1px dashed var(--border-darker);
+ outline-offset: -1px;
+}
+
+:focus:not(html):not(body):not(svg) {
+ outline: 0.15rem solid;
+ outline-offset: -0.15rem;
+ text-decoration: none;
+}
+
+:focus:not(html):not(body):not(pre):not(svg) {
+ background-color: #ffe699;
+ background-color: var(--warning-background);
+}
+
+/* ----- Skip link ----- */
+
+skip-link a {
+ position: absolute;
+ left: -9999em;
+}
+
+skip-link a:focus {
+ z-index: 200;
+ position: fixed;
+ left: 50%;
+ transform: translate(-50%, 0);
+ top: 0.5rem;
+ padding: 0.75rem;
+ border-radius: 0.25rem;
+}
+
+/* ----- Elements ----- */
+
+html {
+ font-size: 95%;
+ line-height: 1.5;
+ word-break: break-word;
+ text-rendering: optimizeSpeed;
+ margin-left: calc(100vw - 100%);
+ margin-right: 0;
+}
+
+html,
+samp {
+ font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
+ Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
+ "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+ "Segoe UI Symbol";
+}
+
+body,
+dl dl,
+dl ol,
+dl ul,
+ol dl,
+ul dl,
+ol ol,
+ol ul,
+ul ol,
+ul ul,
+button,
+input,
+select,
+textarea {
+ margin: 0;
+}
+
+ol {
+ counter-reset: ol;
+ padding-left: 2.5rem;
+}
+
+ol li {
+ overflow-wrap: break-word;
+ word-break: break-word;
+ list-style: none;
+}
+
+ol li:before {
+ border-radius: 100%;
+ border: 1px solid;
+ content: counter(ol);
+ counter-increment: ol;
+ margin-left: -2rem;
+ font-size: 85%;
+ padding: 0 0.35rem;
+ position: absolute;
+}
+
+ol li + li {
+ margin-top: 0.5rem;
+}
+
+main,
+details,
+code-block,
+diagram-container {
+ display: block;
+}
+
+summary {
+ display: list-item;
+}
+
+cite {
+ font-style: normal;
+}
+
+ul {
+ list-style: none;
+ padding-left: 1rem;
+}
+
+nav ol,
+nav ul {
+ list-style: none;
+ display: inline-block;
+ padding: 0;
+}
+
+footer {
+ text-align: center;
+ color: #444;
+ color: var(--fade);
+ margin: 1rem 0;
+ font-size: 85%;
+}
+
+figcaption a {
+ color: inherit;
+}
+
+q a {
+ color: inherit;
+}
+
+q:before {
+ content: "\201C";
+}
+
+q:after {
+ content: "\201D";
+}
+
+object {
+ width: 100%;
+ border: 1px solid #ccc;
+ border: 1px solid var(--border-lighter);
+ min-height: 16rem;
+ border-radius: 0.5rem;
+}
+
+details {
+ cursor: pointer;
+}
+
+details:hover summary span {
+ text-decoration: underline;
+}
+
+a {
+ color: #0149bc;
+ color: var(--link);
+ text-decoration: underline;
+ text-underline-offset: 0.05rem;
+}
+
+a:hover {
+ color: #000;
+ color: var(--foreground);
+ text-decoration-thickness: 0.15rem !important;
+}
+
+a:hover img {
+ box-shadow: 0 8px 32px #999;
+ box-shadow: 0 8px 32px var(--shadow);
+ filter: unset;
+}
+
+a:active,
+button:active {
+ position: relative;
+ top: 1px;
+}
+
+column-left nav {
+ position: sticky;
+ position: -webkit-sticky;
+ align-self: flex-start;
+ top: 0.5rem;
+ text-align: right;
+}
+
+column-left nav a {
+ align-items: center;
+ color: inherit;
+ color: var(--foreground);
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-end;
+ padding: 0.5rem;
+ text-decoration: none;
+ border-radius: 0.5rem;
+}
+
+column-left nav li {
+ margin-bottom: 0.25rem;
+}
+
+column-left nav li:hover a {
+ background-color: #eee;
+ background-color: var(--hover);
+ border-radius: 0.5rem;
+}
+
+column-left nav li:hover svg {
+ fill: #ffe699;
+ fill: var(--warning-background);
+}
+
+column-left nav a span {
+ padding: 0 1rem;
+}
+
+pre,
+kbd,
+code,
+svg text,
+item-list a span:last-child,
+item-list a span:first-child {
+ font-family: "Fira Code", "Lucida Console", "Andale Mono", "Roboto Mono",
+ "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace,
+ "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+abbr[title] {
+ cursor: help;
+ border-bottom: 1px dashed;
+ text-decoration: none;
+}
+
+abbr[title]:hover {
+ border-bottom: 2px dashed;
+}
+
+samp {
+ font-variant: all-small-caps;
+ letter-spacing: 0.05rem;
+}
+
+b,
+strong {
+ font-weight: 700;
+}
+
+small {
+ font-size: 80%;
+ opacity: 0.85;
+}
+
+audio,
+canvas,
+iframe,
+img,
+svg,
+video {
+ vertical-align: middle;
+}
+
+video,
+audio {
+ width: 100%;
+}
+
+audio {
+ margin: 0.75rem 0;
+}
+
+figure {
+ text-align: center;
+}
+
+iframe {
+ width: 100%;
+ border: 1px solid #ccc;
+ border: 1px solid var(--border-darker);
+ background-color: #fefefe;
+ border-radius: 0.75rem !important;
+ min-height: 16rem;
+}
+
+self-embed iframe {
+ min-height: 16rem;
+ max-height: 16rem;
+}
+
+img {
+ height: auto;
+ max-width: 100%;
+ border: 1px solid #ccc;
+ border: 1px solid var(--border-darker);
+ border-radius: 0.75rem;
+ object-fit: cover;
+ display: block;
+}
+
+img,
+iframe {
+ user-select: none;
+}
+
+p {
+ line-height: 1.35;
+}
+
+svg {
+ stroke-width: 0.08rem;
+}
+
+svg:not([fill]) {
+ fill: currentColor;
+}
+
+svg:not(:root) {
+ overflow: hidden;
+}
+
+button,
+input {
+ overflow: visible;
+}
+
+button,
+select {
+ text-transform: none;
+}
+
+button,
+[type="reset"],
+[type="button"],
+[type="submit"],
+paginator-navigation a,
+micro-author micro-summary > a {
+ align-items: center;
+ appearance: button;
+ background-color: #fff;
+ background-color: var(--button-background);
+ border-radius: 0.5rem;
+ border: 1px solid #ccc;
+ border: 1px solid var(--border-lighter);
+ box-shadow: 0 1px 1px #999;
+ color: inherit;
+ cursor: pointer;
+ display: flex;
+ font-size: 100%;
+ height: 1.95rem;
+ padding: 0.25rem 0.5rem;
+ text-decoration: none;
+}
+
+button svg,
+micro-author micro-summary > a svg {
+ height: 1.25rem;
+ margin: 0 0.25rem;
+}
+
+hr {
+ border-top: 1px solid;
+}
+
+/* ----- Tables ----- */
+
+table {
+ border-radius: 0.5rem;
+ border-spacing: 0;
+ border: 1px solid #ccc;
+ border: 1px solid var(--border-darker);
+ padding: 0.5rem 0 0 0;
+ width: 100%;
+ background-color: #fefefe;
+ background-color: var(--background);
+}
+
+th {
+ border-bottom: 1px solid #ccc;
+ border-bottom: 1px solid var(--border-darker);
+ padding: 0 0.5rem 0.5rem 0.5rem;
+ text-align: left;
+}
+
+td {
+ padding: 0.5rem 0 0.5rem 0.5rem;
+ border-right: 1px solid #ccc;
+ border-right: 1px solid var(--border-darker);
+ border-bottom: 1px solid #ccc;
+ border-bottom: 1px solid var(--border-darker);
+}
+
+td:last-child {
+ padding-right: 0.5rem;
+ border-right: none;
+}
+
+tr:last-child td {
+ border-bottom: none;
+}
+
+tbody tr:nth-child(odd) td {
+ background-color: #f3f3f3;
+ background-color: var(--table-row-odd-background);
+}
+
+tbody tr:nth-child(even) td {
+ background-color: #f9f9f9;
+ background-color: var(--table-row-even-background);
+}
+
+tbody tr:hover td {
+ background-color: #eee;
+ background-color: var(--hover);
+}
+
+tr:last-child td:first-child {
+ border-bottom-left-radius: 0.5rem;
+}
+
+tr:last-child td:last-child {
+ border-bottom-right-radius: 0.5rem;
+}
+
+/* ----- Print ----- */
+
+@media print {
+ a[href^="http"]::after {
+ content: " (" attr(href) ")";
+ }
+
+ abbr[title]::after {
+ content: " (" attr(title) ")";
+ }
+}
+
+/* ----- Base ----- */
+
+body {
+ background-color: #fefefe;
+ background-color: var(--background);
+ color: #000;
+ color: var(--foreground);
+ display: flex;
+ margin: 0 auto;
+ max-width: 1250px;
+ min-height: 100%;
+ overflow-x: hidden;
+ -webkit-text-size-adjust: none;
+}
+
+column-left {
+ display: flex;
+ flex: 1;
+ justify-content: flex-end;
+}
+
+column-right {
+ flex: 2;
+ max-width: 400px;
+}
+
+column-left,
+column-right {
+ margin: 0.5rem 2rem;
+}
+
+column-middle {
+ flex: 6;
+ border-left: 1px solid;
+ border-right: 1px solid;
+ border-color: #eee;
+ border-color: var(--border-lighter);
+ max-width: 600px;
+ min-height: 100vh;
+ width: 100%;
+}
+
+micro-card,
+micro-tags,
+micro-expires,
+micro-article {
+ display: block;
+}
+
+message-archive h1 {
+ text-align: center;
+ font-weight: 400;
+ font-size: 150%;
+}
+
+micro-tags {
+ margin-bottom: -0.5rem;
+ margin-top: 0.5rem;
+}
+
+micro-tags a {
+ border-radius: 0.5rem;
+ padding-top: 0.125rem;
+ padding-bottom: 0.125rem;
+ display: inline-block;
+ padding-left: 0.5rem;
+ text-decoration: none;
+ padding-right: 0.5rem;
+ box-shadow: 0 1px 1px #999;
+ margin: 0 0.25rem 0.5rem 0;
+}
+
+micro-summary,
+micro-article {
+ border-bottom: 1px solid;
+ border-color: #eee;
+ border-color: var(--border-lighter);
+ display: flex;
+ padding: 1rem;
+ position: relative;
+}
+
+micro-summary:hover,
+micro-summary:focus-within {
+ background-color: #f5f9ff;
+ background-color: var(--hover-alternate);
+}
+
+micro-author micro-summary {
+ justify-content: start;
+ align-items: center;
+ border: none;
+}
+
+micro-author micro-thumbnail {
+ flex: none;
+}
+
+micro-author micro-header {
+ line-height: 1;
+ margin: 0 1.25rem 0 0.5rem;
+ flex: 1;
+ height: 3rem;
+ padding: 0 0.5rem;
+}
+
+micro-thumbnail a {
+ display: block;
+}
+
+micro-thumbnail figure {
+ margin: 0 0.75rem 0 0;
+}
+
+micro-thumbnail figure img {
+ border-radius: 100%;
+ min-width: 3.5rem;
+ min-height: 3.5rem;
+ max-width: 3.5rem;
+ max-height: 3.5rem;
+}
+
+micro-content {
+ flex: 8;
+ width: 0;
+}
+
+micro-metadata {
+ color: #444;
+ color: var(--fade);
+ line-height: 1.25;
+ display: flex;
+ align-items: center;
+}
+
+micro-metadata h2 {
+ margin-right: 0.5rem;
+}
+
+micro-metadata a {
+ color: inherit;
+}
+
+micro-metadata expiry-date,
+micro-metadata word-limit em,
+micro-metadata draft-label em {
+ color: #8f0000;
+ color: var(--danger);
+ font-style: normal;
+}
+
+micro-metadata draft-label em {
+ font-variant: all-small-caps;
+}
+
+micro-header footer svg,
+micro-metadata expiry-date svg,
+micro-metadata anchored-entry svg,
+micro-metadata unlisted-entry svg {
+ height: 1rem;
+ width: 1rem;
+ stroke-width: 0.1rem;
+}
+
+micro-metadata unlisted-entry {
+ background-color: #ffe699;
+ background-color: var(--warning-background);
+ color: #332600;
+ color: var(--warning);
+ border-radius: 0.25rem;
+ padding: 0 0.25rem;
+}
+
+micro-metadata read-time,
+micro-metadata word-limit,
+micro-metadata expiry-date,
+micro-metadata unlisted-entry {
+ cursor: help;
+}
+
+anchored-entry {
+ display: flex;
+ align-items: center;
+ margin-bottom: 0.25rem;
+ margin-top: -0.5rem;
+}
+
+anchored-entry svg {
+ margin-right: 0.25rem;
+}
+
+anchored-entry span {
+ margin-right: 0.25rem;
+}
+
+anchored-entry span:not(:last-child):after {
+ content: "\00B7";
+ margin-left: 0.25rem;
+}
+
+anchored-pinned svg {
+ fill: #9ed1fa;
+}
+
+anchored-liked svg {
+ fill: #cd5c5c;
+}
+
+micro-header micro-header-image img {
+ height: 12rem;
+ width: 100%;
+ border-radius: 0;
+}
+
+micro-header micro-header-picture img {
+ height: 8rem;
+ width: 8rem;
+ border-radius: 100%;
+ margin: -4rem 2rem 0 2rem;
+ background-color: #fff;
+ padding: 0.35rem;
+ position: relative;
+}
+
+micro-header section {
+ margin: 1rem 2rem 0 2rem;
+ line-height: 1;
+ display: flex;
+ align-items: baseline;
+}
+
+micro-header-title {
+ margin-right: 1rem;
+ flex: 1;
+}
+
+micro-header-description {
+ flex: 6;
+}
+
+micro-header h1 {
+ margin-bottom: 0.25rem;
+}
+
+micro-header h2 {
+ font-weight: 400;
+ color: #444;
+ color: var(--fade);
+ margin: 0;
+}
+
+micro-header footer,
+micro-header footer code {
+ color: #444;
+ color: var(--fade);
+}
+
+micro-header footer {
+ margin: 1.25rem 2rem 0.25rem 2rem;
+ text-align: center;
+ font-size: 95%;
+}
+
+micro-header footer p {
+ margin: 0.75rem 0.5rem 0.25em 0;
+ display: inline;
+}
+
+micro-nsfw-content * {
+ visibility: hidden;
+ opacity: 0;
+ pointer-events: none;
+}
+
+micro-nsfw details svg {
+ stroke-width: 0.1rem;
+ margin-right: 0.15rem;
+}
+
+micro-nsfw details summary {
+ font-variant: all-small-caps;
+ letter-spacing: 0.025rem;
+ line-height: 1.25;
+ color: #8f0000;
+ color: var(--danger);
+ list-style: none;
+}
+
+micro-nsfw details > summary::-webkit-details-marker {
+ display: none;
+}
+
+micro-nsfw-content {
+ border-radius: 0.25rem;
+ display: block;
+ background: repeating-linear-gradient(
+ 180deg,
+ #ff9999,
+ #ff9999 1rem,
+ #eee 1rem,
+ #eee 2rem
+ );
+}
+
+micro-nsfw details[open] + micro-nsfw-content * {
+ filter: none;
+ transition: 1s;
+ visibility: visible;
+ opacity: 1;
+ background: none;
+ outline: none;
+ pointer-events: auto;
+}
+
+micro-nsfw details[open] + micro-nsfw-content {
+ background: none;
+}
+
+@supports (filter: blur(2rem)) {
+ micro-nsfw-content * {
+ filter: blur(2rem);
+ visibility: unset;
+ opacity: unset;
+ }
+ micro-nsfw-content {
+ outline: none;
+ background: unset;
+ }
+}
+
+tab-list {
+ display: flex;
+ justify-content: center;
+ border-bottom: 1px solid;
+ border-color: #ddd;
+ border-color: var(--border-darker);
+}
+
+tab-list a:not(:last-child) {
+ margin-right: 0.5rem;
+}
+
+tab-list a {
+ border-left: 1px solid;
+ border-right: 1px solid;
+ border-top-left-radius: 0.5rem;
+ border-top-right-radius: 0.5rem;
+ border-top: 1px solid;
+ border-color: #ddd;
+ border-color: var(--border-darker);
+ color: #333;
+ color: var(--foreground);
+ margin-top: 0.5rem;
+ padding: 0.5rem 1rem;
+ position: relative;
+ text-decoration: none;
+ top: 1px;
+ border-bottom: 2px solid var(--background);
+}
+
+tab-list a:hover {
+ background-color: #eee;
+ background-color: var(--hover);
+ color: inherit;
+}
+
+column-middle nav {
+ align-items: center;
+ backdrop-filter: blur(0.1rem);
+ background-color: rgba(255, 255, 255, 0.9);
+ background-color: var(--background-transparent);
+ border-bottom: 1px solid;
+ border-color: #eee;
+ border-color: var(--border-lighter);
+ display: flex;
+ height: 4rem;
+ position: sticky;
+ position: -webkit-sticky;
+ top: 0;
+ width: 100%;
+ z-index: 100;
+}
+
+column-middle nav section h1,
+column-middle nav section small {
+ margin: 0;
+}
+
+micro-author micro-header,
+column-middle nav section h1,
+column-middle nav section small {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+column-middle nav section {
+ line-height: 1.25;
+ padding: 0 0.5rem;
+}
+
+icon-button a {
+ color: inherit;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 4rem;
+ flex-wrap: wrap;
+ text-decoration: none;
+ height: 100%;
+ padding: 0.5rem 0;
+}
+
+icon-button a:hover {
+ background-color: #eee;
+ background-color: var(--hover);
+}
+
+icon-button svg {
+ width: 100%;
+}
+
+icon-button p {
+ margin: 0;
+}
+
+code-block pre code {
+ display: inline-block;
+ min-width: 100%;
+ border-top: 1px solid #bbb;
+ padding: 0.75rem;
+}
+
+code-block[data-lines] pre code {
+ padding: 0.1rem 0.75rem;
+}
+
+code-block header {
+ position: relative;
+ top: 1.85rem;
+ margin-top: -1rem;
+ height: 1rem;
+ padding: 0 0.5rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+code-block header language-label {
+ padding: 0.125rem 1rem;
+ font-variant: all-small-caps;
+}
+
+code-block pre {
+ border-radius: 0.5rem;
+ border: 1px solid #ccc;
+ border: 1px solid var(--border-darker);
+ display: block;
+ font-size: 95%;
+ margin: 0;
+ overflow-x: auto;
+ overflow-y: hidden;
+ padding: 2.65rem 0 0 0;
+ tab-size: 2;
+ word-break: break-word;
+ white-space: pre;
+}
+
+paginator-navigation {
+ padding: 1rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+paginator-navigation a,
+paginator-navigation button {
+ margin: 0 0.25rem;
+ font-size: 85%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+paginator-navigation svg {
+ height: 1.316rem;
+}
+
+web-ring,
+author-list,
+gallery-images {
+ padding-bottom: 2rem;
+ display: block;
+}
+
+web-ring > h1,
+author-list > h1,
+gallery-images > h1 {
+ text-align: center;
+ margin-bottom: 1rem;
+ font-variant: all-small-caps;
+ font-size: 110%;
+}
+
+gallery-images section {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+gallery-images img {
+ width: 33.333%;
+ border-radius: 0;
+ height: 6rem;
+}
+
+gallery-images img:first-child {
+ border-top-left-radius: 0.5rem;
+}
+
+gallery-images img:nth-child(3) {
+ border-top-right-radius: 0.5rem;
+}
+
+gallery-images img:nth-child(4) {
+ border-bottom-left-radius: 0.5rem;
+}
+
+gallery-images img:last-child {
+ border-bottom-right-radius: 0.5rem;
+}
+
+web-ring {
+ border-radius: 1rem;
+ position: sticky;
+ position: -webkit-sticky;
+ top: 1rem;
+}
+
+web-ring a {
+ text-decoration: none;
+}
+
+web-ring time {
+ font-variant: small-caps;
+ color: #444;
+ color: var(--fade);
+}
+
+web-ring header {
+ font-weight: 700;
+}
+
+web-ring p {
+ margin-bottom: 0 !important;
+}
+
+web-ring-item:not(:last-child) {
+ margin-bottom: 2rem;
+ display: block;
+}
+
+micro-tags a,
+web-ring section,
+author-list section {
+ background-color: #f9f9f9;
+ background-color: var(--widget-background);
+}
+
+web-ring section {
+ border-radius: 1rem;
+ padding: 1rem;
+}
+
+author-list section {
+ display: block;
+ border-radius: 1rem;
+}
+
+search-entry {
+ display: inherit;
+ width: 100%;
+}
+
+search-entry:focus-within {
+ position: absolute;
+}
+
+search-entry:focus-within form {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+}
+
+search-entry form {
+ background-color: #fefefe;
+ background-color: var(--background);
+ border-radius: 0.5rem;
+ border: 1px solid;
+ border: 1px solid;
+ border-color: #ccc;
+ border-color: var(--border-darker);
+ display: inline-flex;
+ margin: 0 0.5rem;
+ width: 100%;
+}
+
+search-entry form button {
+ background-color: transparent;
+ border: none;
+ box-shadow: none;
+ cursor: pointer;
+ display: block;
+ padding: 0;
+ border-radius: 0;
+ border-top-right-radius: 0.5rem;
+ border-bottom-right-radius: 0.5rem;
+ min-width: 4rem;
+ max-width: 4rem;
+ height: 2.85rem;
+ line-height: 1;
+}
+
+search-entry form input {
+ -webkit-appearance: none;
+ background-color: #fefefe;
+ background-color: var(--background);
+ border-bottom-left-radius: 0.5rem;
+ border-top-left-radius: 0.5rem;
+ border: none;
+ font-size: 100%;
+ line-height: 1.5;
+ padding-left: 1rem;
+ padding-right: 1rem;
+ width: 100%;
+}
+
+search-entry form button svg {
+ stroke-width: 0.1rem;
+}
+
+search-entry form input:focus {
+ outline: none;
+ background-color: #fefefe !important;
+ background-color: var(--background) !important;
+}
+
+search-entry ul {
+ position: absolute;
+ background-color: inherit;
+ padding-top: 3rem;
+ border: 1px solid #ccc;
+ border: 1px solid var(--border-darker);
+ border-radius: 0.5rem;
+ z-index: -1;
+ margin-right: 0.5rem;
+ margin-left: -0.05rem;
+}
+
+search-entry ul li a span {
+ font-weight: 400;
+}
+
+search-entry ul li a {
+ font-weight: 700;
+ color: inherit;
+ text-decoration: none;
+ display: block;
+ padding: 0.25rem 0.75rem;
+}
+
+search-entry ul li:first-child a {
+ background-color: #ebf3ff;
+ background-color: var(--hover-alternate);
+}
+
+search-entry ul li a:hover {
+ background-color: #eee;
+ background-color: var(--hover);
+}
+
+item-list {
+ font-size: 100%;
+}
+
+item-list h1 {
+ padding: 1rem;
+}
+
+item-list ul {
+ padding: 0 0.5rem 0 0.5rem;
+}
+
+item-list a span:first-child {
+ text-transform: uppercase;
+}
+
+item-list a span:first-child,
+item-list a span:last-child {
+ flex: 1;
+ color: #444;
+ color: var(--fade);
+}
+
+item-list a span:nth-child(2) {
+ flex: 3;
+ margin: 0 0.5rem;
+}
+
+item-list li a {
+ display: flex;
+ text-decoration: none;
+ align-items: baseline;
+ margin: 0.25rem 0;
+ padding: 0.5rem;
+}
+
+item-list li:hover {
+ background-color: #eee;
+ background-color: var(--hover);
+}
+
+item-list li:hover span:last-child {
+ text-decoration: underline;
+}
+
+source-array footer {
+ padding: 0 1rem;
+}
+
+source-array li a {
+ padding: 0.25rem 0.5rem;
+}
+
+context-menu {
+ background-color: #fff;
+ background-color: var(--background-bolder);
+ border: 1px solid;
+ border-color: #ddd;
+ border-color: var(--border-lighter);
+ border-radius: 4px;
+ box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1),
+ 0 0 0 1px rgba(10, 10, 10, 0.02);
+ padding-bottom: 0.5rem;
+ padding-top: 0.5rem;
+ min-width: 6.25rem;
+ position: absolute;
+ z-index: 101;
+ max-width: 15rem;
+ visibility: hidden;
+ opacity: 0;
+}
+
+context-profile context-menu {
+ padding: 1rem;
+ display: block;
+ text-align: left;
+}
+
+context-profile a {
+ display: inline;
+}
+
+context-profile h2 {
+ color: #333;
+ color: var(--fade);
+ font-weight: 400;
+}
+
+context-profile section {
+ display: flex;
+ align-items: center;
+}
+
+context-profile aside:nth-child(2) {
+ line-height: 1.25;
+}
+
+micro-thumbnail figure:hover context-menu {
+ visibility: visible;
+ opacity: 1;
+}
+
+diagram-container svg {
+ border: 1px solid;
+ border-radius: 0.5rem;
+ border-color: #ccc;
+ border-color: var(--border-darker);
+ margin: 0.5rem 0;
+ background-color: #fefefe;
+ background-color: var(--background);
+}
+
+twitter-tweet {
+ min-height: 20rem;
+ max-height: 20rem;
+ display: block;
+ overflow-y: auto;
+}
+
+twitter-tweet iframe {
+ border: none;
+}
+
+/* ----- Typography ----- */
+
+h1,
+h2,
+h3 {
+ font-size: 100%;
+ margin: 0;
+}
+
+p,
+ul,
+dd,
+dl,
+ol,
+figure,
+blockquote {
+ margin: 0;
+}
+
+p,
+dl,
+table,
+figure {
+ margin-top: 0.25rem;
+}
+
+p:not(:last-child),
+ol:not(:last-child),
+ul:not(:last-child),
+dl:not(:last-child),
+table:not(:last-child),
+figure:not(:last-child),
+code-block:not(:last-child),
+blockquote:not(:last-child) {
+ margin-bottom: 0.75rem;
+}
+
+figcaption {
+ font-size: 85%;
+ margin-top: 0.5rem;
+ text-align: center;
+ color: #444;
+ color: var(--fade);
+}
+
+sup {
+ vertical-align: super;
+ font-size: 85%;
+}
+
+sub {
+ vertical-align: sub;
+ font-size: 85%;
+}
+
+s,
+del,
+mark,
+ins {
+ padding: 0 0.15rem;
+ line-height: 1.5;
+}
+
+mark {
+ background-color: #ffe699;
+ background-color: var(--warning-background);
+ color: #332600;
+ color: var(--warning);
+}
+
+ins {
+ background-color: #d5f3c4;
+ background-color: var(--success-background);
+ color: #1d3c0c;
+ color: var(--success);
+ text-decoration: none;
+}
+
+del {
+ background-color: #fcd2cf;
+ background-color: var(--danger-background);
+ color: #8f0000;
+ color: var(--danger);
+}
+
+s {
+ text-decoration: none;
+ background-color: #333;
+ background-color: var(--spoiler);
+ color: transparent;
+}
+
+s label {
+ cursor: help;
+}
+
+[type="checkbox"]:checked ~ s {
+ background-color: inherit;
+ color: inherit;
+}
+
+blockquote {
+ color: var(--fade);
+ padding-left: 2rem;
+}
+
+video {
+ border-radius: 0.75rem;
+}
+
+kbd {
+ background-color: #eee;
+ border-radius: 3px;
+ border: 1px solid #b4b4b4;
+ box-shadow: 0 1px 1px #737373, 0 2px 0 0 #f2f2f2 inset;
+ color: #333;
+ display: inline-block;
+ font-size: 0.85em;
+ font-weight: 700;
+ line-height: 1;
+ padding: 2px 4px;
+ white-space: nowrap;
+}
+
+/* ----- Attributes ----- */
+
+[tabindex="-1"]:focus {
+ outline: none;
+}
+
+[hidden] {
+ display: none;
+}
+
+[disabled] {
+ cursor: not-allowed;
+ border-color: #ddd;
+ border-color: var(--border-lighter);
+ color: #999;
+ color: var(--disabled);
+}
+
+[id^="imgur-embed-iframe-pub"] {
+ min-width: 100%;
+}
+
+[role="doc-endnotes"] {
+ margin-bottom: 0.75rem;
+}
+
+[role="doc-endnotes"] hr {
+ border-top: 1px solid #ccc;
+ margin-bottom: 0.75rem;
+}
+
+a[href^="http"]:hover {
+ text-decoration: underline;
+}
+
+/* ----- Responsive ----- */
+
+@media screen and (max-width: 1220px) {
+ column-left {
+ flex: none;
+ margin: 0.5rem;
+ }
+ column-left nav a {
+ flex-direction: column-reverse;
+ justify-content: center;
+ white-space: nowrap;
+ overflow: hidden;
+ }
+ column-left nav a span {
+ padding-top: 0.5rem;
+ }
+}
+
+@media screen and (max-width: 1055px) {
+ column-left,
+ search-entry,
+ column-middle nav section {
+ display: none;
+ }
+ column-middle nav {
+ justify-content: space-between;
+ overflow-x: auto;
+ overflow-y: hidden;
+ }
+ icon-navigator {
+ display: inline !important;
+ }
+}
+
+@media screen and (max-width: 925px) {
+ column-right {
+ display: none;
+ }
+ micro-metadata {
+ line-height: inherit;
+ }
+ tab-list a {
+ font-size: 80%;
+ }
+ micro-header section {
+ display: block;
+ }
+ column-middle {
+ display: block;
+ max-width: 100%;
+ }
+ column-middle nav {
+ position: fixed;
+ }
+ navigation-separator hr[hidden] {
+ border-color: transparent;
+ display: flex;
+ height: 0;
+ margin: 0;
+ padding-top: 4rem;
+ border: none;
+ }
+ micro-card {
+ max-width: 600px;
+ margin: 0 auto;
+ }
+ html {
+ overflow-y: scroll;
+ margin: 0;
+ }
+ body {
+ display: block;
+ }
+ nav {
+ box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2);
+ }
+ nav:active,
+ nav:hover,
+ nav:focus,
+ nav:focus-within,
+ nav:focus-visible {
+ box-shadow: 15px 0 15px -15px inset, -15px 0 15px -15px inset;
+ }
+}
+
+@media screen and (max-width: 460px) {
+ micro-card micro-summary > micro-thumbnail {
+ display: none;
+ }
+ micro-metadata micro-thumbnail[hidden] {
+ display: block;
+ }
+}
+
+/* ----- Self Frames ----- */
+
+@media (max-height: 16rem) {
+ micro-card {
+ width: 100vw;
+ }
+ footer,
+ column-middle nav,
+ navigation-separator hr[hidden] {
+ display: none;
+ }
+}
generated by cgit v1.2.3 (git 2.39.0) at 2024-05-02 10:12:36 +0000