|
|
|
|
@ -16,6 +16,7 @@
|
|
|
|
|
--theme-white: white;
|
|
|
|
|
|
|
|
|
|
// Misc
|
|
|
|
|
--theme-border: black;
|
|
|
|
|
--theme-animation: 0.2s linear; // Animation style
|
|
|
|
|
--theme-content-width: 1100px; // Max width of clamped content
|
|
|
|
|
--theme-font: Arial, sans-serif;
|
|
|
|
|
@ -47,21 +48,22 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
|
|
|
|
|
|
|
|
|
|
// Optional opinionated styling to clean up CSS defaults
|
|
|
|
|
|
|
|
|
|
.fix-anchor, .fix {
|
|
|
|
|
.fix-anchor, .fix:not(.no-anchor-fix) {
|
|
|
|
|
a, a:not([href]) {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
color: var(--theme-primary);
|
|
|
|
|
&:not(:hover) { text-decoration: none; }
|
|
|
|
|
&:hover { text-decoration: underline; }
|
|
|
|
|
&:not(:hover):not(:focus) { text-decoration: none; }
|
|
|
|
|
&:hover, &:focus { text-decoration: underline; }
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fix-button, .fix {
|
|
|
|
|
.fix-button, .fix:not(.no-button-fix) {
|
|
|
|
|
button:not(:disabled) {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fix-dom, .fix {
|
|
|
|
|
.fix-dom, .fix:not(.no-dom-fix) {
|
|
|
|
|
&, html, body {
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
@ -72,30 +74,20 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
|
|
|
|
|
background-color: var(--theme-backdrop);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
hr {
|
|
|
|
|
border-bottom: 1px solid black;
|
|
|
|
|
width: 100%;
|
|
|
|
|
opacity: 50%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fix-focus, .fix {
|
|
|
|
|
.fix-focus, .fix:not(.no-focus-fix) {
|
|
|
|
|
* {
|
|
|
|
|
outline: inherit;
|
|
|
|
|
-webkit-tap-highlight-color: transparent;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fix-font, .fix {
|
|
|
|
|
.fix-font, .fix:not(.no-font-fix) {
|
|
|
|
|
color: var(--theme-text);
|
|
|
|
|
font-family: var(--theme-font), sans-serif;
|
|
|
|
|
|
|
|
|
|
* {
|
|
|
|
|
font-family: inherit;
|
|
|
|
|
font-size: inherit;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
p, input, select, textarea, button { font-size: 1rem; }
|
|
|
|
|
h1, h2, h3, h4, h5, h6, p { margin: 0 0 0.5rem 0; }
|
|
|
|
|
h1 { font-weight: 500; font-size: 2.5rem; }
|
|
|
|
|
@ -119,7 +111,6 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
|
|
|
|
|
// Clamp (Restrict page width for large screens)
|
|
|
|
|
.clamp { width: min(var(--theme-content-width), calc(100% - map.get($sizes, 3))); }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Utilities ================================================================================================
|
|
|
|
|
|
|
|
|
|
// Anchor
|
|
|
|
|
@ -162,7 +153,7 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
|
|
|
|
|
.bg-black { background-color: var(--theme-black) !important; }
|
|
|
|
|
.bg-white { background-color: var(--theme-white) !important; }
|
|
|
|
|
.bg-transparent { background-color: transparent !important; }
|
|
|
|
|
.bg-clear {
|
|
|
|
|
.bg-container {
|
|
|
|
|
background-color: var(--theme-clear) !important;
|
|
|
|
|
color: var(--theme-text) !important;
|
|
|
|
|
}
|
|
|
|
|
@ -187,7 +178,10 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
|
|
|
|
|
|
|
|
|
|
// Colors - Foreground
|
|
|
|
|
@each $color in ('black', 'clear', 'white', 'text', 'primary', 'accent', 'info', 'success', 'warn', 'danger', 'muted') {
|
|
|
|
|
.fg-#{$color} { color: var(--theme-#{$color}) !important; }
|
|
|
|
|
.fg-#{$color} {
|
|
|
|
|
color: var(--theme-#{$color}) !important;
|
|
|
|
|
text-decoration-color: var(--theme-#{$color}) !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Cursors
|
|
|
|
|
@ -202,8 +196,8 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
|
|
|
|
|
.fs-italic { font-style: italic !important; }
|
|
|
|
|
.fs-none { font-style: normal !important; }
|
|
|
|
|
.fs-lighter { font-weight: lighter !important; }
|
|
|
|
|
.fs-line-through { text-decoration: line-through !important; }
|
|
|
|
|
.fs-no-dec { text-decoration: none !important; }
|
|
|
|
|
.fs-strike { text-decoration: line-through !important; }
|
|
|
|
|
.fs-underline { text-decoration: underline !important; }
|
|
|
|
|
.fs-7 { font-size: 2.5rem !important; }
|
|
|
|
|
.fs-6 { font-size: 2.25rem !important; }
|
|
|
|
|
@ -406,7 +400,7 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
|
|
|
|
|
.hidden#{$bp} { visibility: hidden !important; }
|
|
|
|
|
|
|
|
|
|
@each $s, $size in $sizes {
|
|
|
|
|
.b#{$bp}-#{$s} { border: #{$s}px solid var(--theme-muted) !important; } // Border
|
|
|
|
|
.b#{$bp}-#{$s} { border: #{$s}px solid var(--theme-border) !important; } // Border
|
|
|
|
|
.m#{$bp}-#{$s} { margin: $size !important; } // Margin
|
|
|
|
|
.p#{$bp}-#{$s} { padding: $size !important; } // Padding
|
|
|
|
|
.mx#{$bp}-#{$s} { // Margin
|
|
|
|
|
|
