mirror of
https://github.com/osmarks/mycorrhiza.git
synced 2024-10-30 11:46:16 +00:00
438 lines
15 KiB
CSS
438 lines
15 KiB
CSS
.non-existent-hypha { }
|
|
.non-existent-hypha__ways { display: flex; flex-direction: column; width: 100%; margin: 0 0 1rem 0;}
|
|
.non-existent-hypha__way { border: 1px #999 solid; border-radius: .25rem; padding: .25rem; }
|
|
.non-existent-hypha__title { margin-bottom: 1rem; }
|
|
.non-existent-hypha__subtitle { margin: 0; }
|
|
|
|
.amnt-grid { display: grid; grid-template-columns: 1fr 1fr; }
|
|
#upload-binary__input { display: block; margin: .25rem 0 .25rem 0; }
|
|
|
|
.modal__title { font-size: 2rem; }
|
|
.modal__title_small { font-size: 1.5rem; }
|
|
.modal__confirmation-msg { margin: 0 0 .5rem 0; }
|
|
|
|
.hypha-list { padding-left: 0; }
|
|
.hypha-list__entry { list-style-type: none; }
|
|
.hypha-list__link { text-decoration: none; display: inline-block; padding: .25rem; }
|
|
.hypha-list__link:hover { text-decoration: underline; }
|
|
.hypha-list__amnt-type { font-size: smaller; color: #999; }
|
|
|
|
/* General element positions, from small to big */
|
|
/* Phones and whatnot */
|
|
.layout { display: grid; row-gap: 1rem; }
|
|
header { width: 100%; margin-bottom: 1rem; }
|
|
.header-links__list, .hypha-tabs__flex { margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
|
|
.header-links__entry, .hypha-tabs__tab { list-style-type: none; }
|
|
|
|
.header-links__entry { margin-right: .5rem; }
|
|
.header-links__entry_user, .header-links__entry_register { font-style:italic; }
|
|
.header-links__link { display: inline-block; padding: .25rem; text-decoration: none; }
|
|
|
|
.hypha-tabs { padding: 0; margin: 0; }
|
|
.hypha-tabs__tab { margin-right: .5rem; padding: 0; }
|
|
.hypha-tabs__link { display: inline-block; padding: .25rem; text-decoration: none; }
|
|
.hypha-tabs__selection { display: inline-block; padding: .25rem; font-weight: bold; }
|
|
|
|
.layout-card li { list-style-type: none; }
|
|
.backlinks__list { padding: 0; margin: 0; }
|
|
.backlinks__link { text-decoration: none; display: block; padding: .25rem; padding-left: 1.25rem; }
|
|
|
|
@media screen and (max-width: 800px) {
|
|
.amnt-grid { grid-template-columns: 1fr; }
|
|
.layout { grid-template-columns: auto; grid-template-rows: auto auto auto; }
|
|
.main-width { width: 100%; }
|
|
main { padding: 1rem; margin: 0; }
|
|
}
|
|
|
|
@media screen and (min-width: 500px) {
|
|
.non-existent-hypha__way { flex: 1; margin-right: .5rem; }
|
|
.non-existent-hypha__ways { flex-direction: row; }
|
|
.non-existent-hypha__way:last-child { margin-right: 0; }
|
|
}
|
|
|
|
/* No longer a phone but still small screen: draw normal tabs, center main */
|
|
@media screen and (min-width: 801px) {
|
|
.main-width { padding: 1rem 2rem; width: 800px; margin: 0 auto; }
|
|
main { border-radius: .25rem; }
|
|
.layout-card { width: 800px; margin: 0 auto; }
|
|
|
|
.header-links { padding: 0; }
|
|
.header-links__entry { margin-right: 1.5rem; }
|
|
.header-links__entry_user { margin: 0 2rem 0 auto; }
|
|
.header-links__entry:nth-of-type(1),
|
|
|
|
.hypha-tabs { padding: 0; }
|
|
.hypha-tabs__tab { border-radius: .25rem .25rem 0 0; margin-right: 0; }
|
|
.hypha-tabs__selection, .hypha-tabs__link { padding: .25rem .5rem; }
|
|
|
|
.header-links__entry:nth-of-type(1), .hypha-tabs__tab:nth-of-type(1) { margin-left: 2rem; }
|
|
}
|
|
|
|
|
|
/* Wide enough to fit two columns ok */
|
|
@media screen and (min-width: 1100px) {
|
|
.layout { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; margin: 0 1rem; row-gap: 1rem; }
|
|
.main-width { margin: 0; }
|
|
main { grid-column: 1 / span 1; grid-row: 1 / span 2; }
|
|
.relative-hyphae, .edit-toolbar { grid-column: 2 / span 1; grid-row: 1 / span 1; }
|
|
.layout-card { width: 100%; }
|
|
.edit-toolbar__buttons {display: grid; }
|
|
}
|
|
|
|
@media screen and (min-width: 1150px) {
|
|
.edit-toolbar__buttons { grid-template-columns: 1fr 1fr; grid-column-gap: .125rem; }
|
|
}
|
|
|
|
@media screen and (min-width: 1250px) {
|
|
.layout { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
|
|
.layout-card {max-width: 18rem;}
|
|
.main-width { margin: 0 auto; }
|
|
.backlinks { grid-column: 1 / span 1; margin-right: 0; }
|
|
main { grid-column: 2 / span 1; }
|
|
.relative-hyphae, .edit-toolbar { grid-column: 3 / span 1; margin-left: 0; }
|
|
.edit-toolbar__buttons { grid-template-columns: 1fr; }
|
|
|
|
.backlinks__title { text-align: right; }
|
|
.backlinks__link { text-align: right; padding-right: 1.25rem; padding-left: .25rem; }
|
|
}
|
|
|
|
@media screen and (min-width: 1400px) {
|
|
.edit-toolbar__buttons { grid-template-columns: 1fr 1fr; }
|
|
}
|
|
|
|
*, *::before, *::after {box-sizing: border-box;}
|
|
html { height:100%; padding:0; }
|
|
body { margin: 0; font-size:16px; font-family: 'PT Sans', 'Liberation Sans', sans-serif; color: black; }
|
|
input, kbd { font: inherit; color: inherit; }
|
|
textarea {font-size:16px; font-family: 'PT Sans', 'Liberation Sans', sans-serif;}
|
|
|
|
::-webkit-file-upload-button,
|
|
.btn { line-height: normal; display: inline-block; border: 1px #999 solid; border-radius: .25rem; text-decoration: none; padding: .25rem; font-size: 1rem; margin: 0; }
|
|
.btn_weak { border: 1px #999 dashed; }
|
|
.btn_accent { font-weight: bold; }
|
|
.btn:hover, .btn:active { cursor: pointer; }
|
|
|
|
.edit { min-height: 80vh; }
|
|
.edit__title { margin-top: 0; }
|
|
.edit__preview { border: 2px dashed #ddd; }
|
|
.edit-form { height: calc(100vh - 12rem); }
|
|
.edit-form__textarea { width: 100%; height: calc(100% - 8rem); min-height: 4rem; }
|
|
.edit-form__message { width: 100%; margin: 0.25em 0; }
|
|
.edit-form__save { font-weight: bold; }
|
|
.edit-toolbar__buttons, .edit-toolbar__ad { margin: .5rem; }
|
|
.edit-toolbar__btn { font-size: .75rem; margin-bottom: .125rem; }
|
|
|
|
.icon {margin-right: .25rem; vertical-align: bottom; }
|
|
|
|
main h1:not(.navi-title) {font-size:1.7rem;}
|
|
blockquote { margin: 0; padding-left: .75rem; }
|
|
.wikilink_external::before { display: inline-block; width: 18px; height: 16px; vertical-align: sub; }
|
|
/* .wikilink_external { padding-left: 16px; } */
|
|
.wikilink_gopher::before { content: url("/static/icon/gopher-proto.svg"); }
|
|
.wikilink_http::before, .wikilink_https::before { content: url("/static/icon/http-proto.svg"); }
|
|
/* .wikilink_https { background: transparent url("/static/icon/http-proto.svg") center left no-repeat; } */
|
|
.wikilink_gemini::before { content: url("/static/icon/gemini-proto.svg"); }
|
|
.wikilink_mailto::before { content: url("/static/icon/mailto-proto.svg"); }
|
|
|
|
article { overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; line-height: 150%; }
|
|
main h1, main h2, main h3, main h4, main h5, main h6 { margin: 1.5rem 0 0 0; }
|
|
.heading__link { text-decoration: none; display: inline-block; }
|
|
.heading__link::after { width: 1rem; content: "§"; color: transparent; }
|
|
.heading__link:hover::after, .heading__link:active::after { color: #999; }
|
|
article p { margin: .5rem 0; }
|
|
article ul, ol { padding-left: 1.5rem; margin: .5rem 0; }
|
|
article code { padding: .1rem .3rem; border-radius: .25rem; font-size: 90%; font-family: 'Menlo', 'PT Mono', monospace; }
|
|
article pre.codeblock { padding:.5rem; white-space: pre-wrap; border-radius: .25rem;}
|
|
.codeblock code {padding:0; font-size:15px;}
|
|
.transclusion { border-radius: .25rem; margin-bottom: .25rem; }
|
|
.transclusion_failed { padding: 0 .5rem; }
|
|
.transclusion__content > *:not(.binary-container) {margin: 0.5rem; }
|
|
.transclusion__link {display: block; text-align: right; font-style: italic; margin-top: .5rem; margin-right: .25rem; text-decoration: none;}
|
|
.transclusion__link::before {content: "⇐ ";}
|
|
|
|
/* Derived from https://commons.wikimedia.org/wiki/File:U%2B21D2.svg */
|
|
.launchpad__entry { list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.0' width='25' height='12'%3E%3Cg transform='scale(0.7,0.8) translate(-613.21429,-421)'%3E%3Cpath fill='%23999' d='M 638.06773,429.49751 L 631.01022,436.87675 L 630.1898,436.02774 L 632.416,433.30375 L 613.46876,433.30375 L 613.46876,431.66382 L 633.82089,431.66382 L 635.57789,429.5261 L 633.79229,427.35979 L 613.46876,427.35979 L 613.46876,425.71985 L 632.416,425.71985 L 630.1898,422.99587 L 631.01022,422.08788 L 638.06773,429.49751 z '/%3E%3C/g%3E%3C/svg%3E"); }
|
|
|
|
.binary-container { width: 100%; text-align: center; }
|
|
.binary-container_with-img img,
|
|
.binary-container_with-video video,
|
|
.binary-container_with-audio audio { max-width: 100%; max-height: 30em; width: auto; }
|
|
|
|
.subhyphae__title { padding-bottom: .5rem; clear: both; }
|
|
.navi-title { padding-bottom: .5rem; margin: .25rem 0; }
|
|
.navi-title a {text-decoration:none; }
|
|
.navi-title__separator { margin: 0 .25rem; }
|
|
.navi-title__colon { margin-right: .5rem; }
|
|
.upload-amnt { clear: both; padding: .5rem; border-radius: .25rem; }
|
|
.upload-amnt__unattach { display: block; }
|
|
aside { clear: both; }
|
|
|
|
.img-gallery { text-align: center; margin-top: .25rem; margin-bottom: .25rem; }
|
|
.img-gallery_many-images { border-radius: .25rem; padding: .5rem; }
|
|
.img-gallery img { max-width: 100%; max-height: 50vh; }
|
|
figure { margin: 0; }
|
|
figcaption { padding-bottom: .5rem; }
|
|
|
|
#new-name {width:100%;}
|
|
|
|
|
|
.rc-entry { display: grid; list-style-type: none; padding: .25rem; grid-template-columns: 1fr 1fr; border-radius: .25rem; }
|
|
.rc-entry__time { font-style: italic; }
|
|
.rc-entry__hash { font-style: italic; text-align: right; }
|
|
.rc-entry__links, .rc-entry__msg { grid-column: 1 / span 2; }
|
|
.rc-entry__author { font-style: italic; }
|
|
|
|
.prevnext__el { display: inline-block; min-width: 40%; padding: .5rem; margin-bottom: .25rem; text-decoration: none; border-radius: .25rem; max-width: 49%; }
|
|
.prevnext__prev { float: left; }
|
|
.prevnext__next { float: right; text-align: right; }
|
|
|
|
.page-separator { clear: both; }
|
|
.history__entries { background-color: #eee; margin: 0; padding: 0; border-radius: .25rem; }
|
|
.history__month-anchor { text-decoration: none; color: inherit; }
|
|
.history__entry { list-style-type: none; padding: .25rem; }
|
|
.history-entry { padding: .25rem; }
|
|
.history-entry__time { font-weight: bold; }
|
|
.history-entry__author { font-style: italic; }
|
|
|
|
table { border: #ddd 1px solid; border-radius: .25rem; min-width: 4rem; }
|
|
td { padding: .25rem; }
|
|
caption { caption-side: top; font-size: small; }
|
|
|
|
.subhyphae__list, .subhyphae__list ul { display: flex; padding: 0; margin: 0; flex-wrap: wrap; }
|
|
.subhyphae__list ul { font-size: 90%; }
|
|
.subhyphae__entry { list-style-type: none; border: 1px solid #999; padding: 0; margin: .125rem; border-radius: .25rem; }
|
|
.subhyphae__link { display: block; padding: .25rem; text-decoration: none; }
|
|
.subhyphae__link:hover { background: #eee; }
|
|
|
|
.relative-hyphae__list { padding: 0; margin: 0; }
|
|
.relative-hyphae__entry { clear: both; }
|
|
.relative-hyphae__count { display: inline-block; float: right; }
|
|
.relative-hyphae__entry_this { padding: .25rem .5rem; font-weight: bold; }
|
|
.relative-hyphae__link { text-decoration: none; display: block; padding: .25rem .5rem; }
|
|
|
|
/* Color stuff */
|
|
/* Lighter stuff #eee */
|
|
::-webkit-file-upload-button, .btn { background-color: #eee; color: black; }
|
|
.btn:visited { color: black; }
|
|
.btn_weak { background-color: transparent; }
|
|
|
|
p code,
|
|
article .codeblock,
|
|
.img-gallery_many-images,
|
|
.rc-entry,
|
|
.prevnext__el,
|
|
table,
|
|
.transclusion_stand-out {
|
|
background-color: rgba(220, 220, 220, 0.5);
|
|
}
|
|
.transclusion_failed {
|
|
border: 1px solid #a55858;
|
|
}
|
|
.transclusion_blend .transclusion__link { display: none; }
|
|
|
|
.hypha-tabs__tab { background-color: #eee; }
|
|
.hypha-tabs__tab a { color: black; }
|
|
.hypha-tabs__tab_active { border-bottom: 2px white solid; background: white; }
|
|
|
|
@media screen and (max-width: 800px) {
|
|
.hypha-tabs,
|
|
.hypha-tabs__tab { background-color: white; }
|
|
}
|
|
|
|
@media screen and (min-width: 801px) {
|
|
.hypha-tabs__tab { border: 1px #ddd solid; }
|
|
.hypha-tabs__tab_active { border-bottom: 1px white solid; }
|
|
}
|
|
|
|
.layout-card { border-radius: .25rem; background-color: white; }
|
|
.layout-card__title { font-size: 1rem; margin: 0; padding: .25rem .5rem; border-radius: .25rem .25rem 0 0; }
|
|
.layout-card__title { border-bottom: 1px solid #eee; }
|
|
|
|
/* Other stuff */
|
|
html { background-color: #eee;
|
|
}
|
|
header { background-color: #eee; }
|
|
.header-links__link { color: black; }
|
|
.header-links__link:hover { background-color: #ddd; }
|
|
main { background-color: white; }
|
|
.shy-link { color: black; }
|
|
|
|
blockquote { border-left: 2px #999 solid; }
|
|
.wikilink_new {color:#a55858;}
|
|
.transclusion code, .transclusion .codeblock {background-color:#ddd;}
|
|
.transclusion__link { color: black; }
|
|
.wikilink_new:visited {color:#a55858;}
|
|
.navi-title { border-bottom: #eee 1px solid; }
|
|
.upload-amnt { border: #eee 1px solid; }
|
|
td { border: #ddd 1px solid; }
|
|
|
|
.relative-hyphae__link:hover, .backlinks__link:hover { background-color: #eee; }
|
|
|
|
/* Dark theme! */
|
|
@media (prefers-color-scheme: dark) {
|
|
html { background: #222; color: #ddd; }
|
|
main, article, .hypha-tabs__tab, header, .layout-card { background-color: #343434; color: #ddd; }
|
|
|
|
a, .wikilink_external { color: #f1fa8c; }
|
|
a:visited, .wikilink_external:visited { color: #ffb86c; }
|
|
.wikilink_new, .wikilink_new:visited { color: #dd4444; }
|
|
.subhyphae__link:hover, .relative-hyphae__link:hover, .backlinks__link:hover { background-color: #444; }
|
|
|
|
.header-links__link, .header-links__link:visited,
|
|
.prevnext__el, .prevnext__el:visited { color: #ddd; }
|
|
.header-links__link:hover { background-color: #444; }
|
|
|
|
.hypha-tabs__tab a, .hypha-tabs__tab { color: #ddd; background-color: #232323; border: 0; }
|
|
.layout-card__title, .hypha-tabs__tab_active { background-color: #343434; }
|
|
|
|
.transclusion .transclusion__link, a.shy-link { color: #ddd; }
|
|
|
|
input[type="text"], input[type="password"],
|
|
::-webkit-file-upload-button,
|
|
.btn,
|
|
article code,
|
|
article .codeblock,
|
|
.img-gallery_many-images,
|
|
.rc-entry,
|
|
.history__entry,
|
|
.prevnext__el,
|
|
.upload-amnt,
|
|
textarea,
|
|
table { border: 0; background-color: #444444; color: #ddd; }
|
|
.transclusion_stand-out { background-color: rgba(68, 68, 68, 0.5); }
|
|
.btn:visited { color: #ddd;}
|
|
|
|
.btn { border: #444 solid 1px; border-radius: .25rem; }
|
|
.btn_weak { background-color: transparent; }
|
|
|
|
.transclusion code,
|
|
.transclusion .codeblock { background-color: #454545; }
|
|
mark { background: rgba(130, 80, 30, 5); color: inherit; }
|
|
@media screen and (max-width: 800px) {
|
|
.hypha-tabs { background-color: #232323; }
|
|
}
|
|
}
|
|
|
|
/* handlerug: sorry but I can't write in that unique and very special way */
|
|
/* i have to resort to the BORING way of writing CSS */
|
|
/* bouncepaw: they say that the best codes style is the consistent code style ☝️ */
|
|
kbd {
|
|
display: inline-block;
|
|
min-width: 1.5ch;
|
|
text-align: center;
|
|
}
|
|
|
|
.kbd-or {
|
|
opacity: .4;
|
|
}
|
|
|
|
.dialog {
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
left: 50%;
|
|
width: 100%;
|
|
max-width: 700px;
|
|
margin: 96px auto;
|
|
padding: 24px;
|
|
transform: translate(-50%, 0);
|
|
|
|
background-color: #fff;
|
|
border-radius: 4px;
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.dialog-backdrop {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.dialog__header {
|
|
position: relative;
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.dialog__title {
|
|
margin: 0;
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.dialog__close-button {
|
|
position: absolute;
|
|
display: block;
|
|
top: 0;
|
|
right: 0;
|
|
margin: 0;
|
|
padding: 8px;
|
|
border: none;
|
|
background: url(/static/icon/x.svg) no-repeat 8px 8px / 16px 16px;
|
|
width: 32px;
|
|
height: 32px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dialog__close-button:active {
|
|
opacity: .7;
|
|
}
|
|
|
|
.shortcuts-help .dialog__content {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
grid-column-gap: 32px;
|
|
}
|
|
|
|
.shortcuts-group-heading {
|
|
margin: 1em 0 0.5em;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.shortcuts-list {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.shortcuts-list + .shortcuts-list {
|
|
margin-top: 1.5em;
|
|
}
|
|
|
|
.shortcut-row {
|
|
display: flex;
|
|
margin: 0.5em 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.shortcut-row__description {
|
|
flex: 1;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.dialog {
|
|
background-color: #343434;
|
|
color: #ddd;
|
|
}
|
|
input, kbd {
|
|
color: #ddd;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Tables
|
|
*/
|
|
|
|
.users-table {
|
|
width: 100%;
|
|
}
|
|
|
|
.users-table td {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.table-cell--fill {
|
|
width: 100%;
|
|
}
|