142 lines
3.1 KiB
Plaintext
142 lines
3.1 KiB
Plaintext
// This is the base .less file for the Crystal skin. Different components are split up into their own parts/ files, for ease of editing. CSS rules in here should only be for site wide elements.
|
|
|
|
@import 'unset.less';
|
|
@import 'colors.less';
|
|
|
|
@import 'parts/site-header.less';
|
|
@import 'parts/site-nav.less';
|
|
@import 'parts/site-footer.less';
|
|
@import 'parts/page-header.less';
|
|
@import 'parts/page-body.less';
|
|
@import 'parts/page-toc.less';
|
|
@import 'parts/infobox.less';
|
|
@import 'parts/sitenotice.less';
|
|
@import 'parts/site-menus.less';
|
|
@import 'parts/specialpage.less';
|
|
@import 'parts/table.less';
|
|
@import 'parts/images.less';
|
|
@import 'parts/versions.less';
|
|
|
|
@font-face {
|
|
font-family: "Libre Caslon";
|
|
src: url('assets/fonts/LibreCaslonText-Regular.ttf');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Shippori Mincho";
|
|
src: url('assets/fonts/ShipporiMincho-Regular.ttf');
|
|
}
|
|
|
|
// The site layout breakpoints are below: >1201px, <1200px and <700px.
|
|
|
|
@media (min-width: 1201px) {
|
|
|
|
.layout-touch {
|
|
display: none;
|
|
}
|
|
|
|
#grid {
|
|
display: grid;
|
|
grid-template-columns:
|
|
[startgap] minmax(var(--space), 1.5fr)
|
|
[navstart] var(--sidebar-width)
|
|
[navgap] minmax(var(--space), .5fr)
|
|
[pagestart] minmax(auto, 78em)
|
|
[pageend] var(--sidebar-width)
|
|
[endgap] minmax(var(--space), 2fr)
|
|
;
|
|
grid-template-rows:
|
|
[topstart] 3.6em
|
|
[sitenotice] auto
|
|
[title] auto
|
|
[toc] auto
|
|
[pagebody] 1fr
|
|
[bottomstart] auto
|
|
;
|
|
height: 100%;
|
|
padding-top: calc(6vw - 6vh);
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
|
|
.layout-mouse {
|
|
display: none;
|
|
}
|
|
|
|
#grid {
|
|
display: grid;
|
|
grid-template-rows:
|
|
[topstart] 7.8em
|
|
[sitenotice] auto
|
|
[title] auto
|
|
[toc] auto
|
|
[pagebody] 1fr
|
|
[bottomstart] auto
|
|
;
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
|
|
}
|
|
|
|
:root {
|
|
--sidebar-width: 12em;
|
|
--space: .6em;
|
|
}
|
|
|
|
#grid {
|
|
margin-bottom: 0;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background-color: var(--0);
|
|
background:
|
|
linear-gradient(100deg, transparent 70%, var(--blue-1)),
|
|
radial-gradient(circle farthest-corner at 160% 100%, var(--0) 90%, var(--blue-1) 120%)
|
|
;
|
|
background-attachment: fixed, local;
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
background:
|
|
linear-gradient(95deg, transparent 70% , var(--0) 140%),
|
|
radial-gradient(circle farthest-corner at 160% 100%, var(--blue-1) 90%, var(--0) 120%)
|
|
;
|
|
}
|
|
}
|
|
|
|
body::selection {
|
|
background-color: var(--blue-4);
|
|
}
|
|
|
|
button {
|
|
cursor: pointer;
|
|
}
|
|
|
|
#t-print, #t-upload {
|
|
display: none;
|
|
}
|
|
|
|
*:focus {
|
|
z-index: 60;
|
|
}
|
|
|
|
// Stuff under here belongs to specific components, but has not been sorted into a /parts file yet.
|
|
|
|
.mwe-popups-extract a:link,
|
|
.mwe-popups-extract a:visited {
|
|
color: black;
|
|
}
|
|
|
|
fieldset {
|
|
margin-top: calc(var(--space) * 3);
|
|
}
|
|
|
|
.mw-list-item.selected {
|
|
display: none;
|
|
} |