166 lines
8.8 KiB
SCSS
166 lines
8.8 KiB
SCSS
// This is a flavor file. Duplicate it and edit it to create your own flavor. Read instructions carefully.
|
|
// Single-line comments, starting with '//' will not be included in your final CSS file. Multiline comments,
|
|
// structured like the flavor description below, will be included in your final CSS file.
|
|
/*
|
|
Flavor name: Default (mini-default)
|
|
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
|
Maintainers: Angelos Chalaris
|
|
mini.css version: v3.0.0-alpha.2
|
|
*/
|
|
@import 'core';
|
|
@import 'layout';
|
|
|
|
/*
|
|
Custom elements for card elements.
|
|
*/
|
|
$card-small-name: 'small'; // Class name for small cards.
|
|
$card-small-width: 240px; // Width for small cards.
|
|
@include make-card-alt-size ($card-small-name, $card-small-width);
|
|
|
|
$card-large-name: 'large'; // Class name for large cards.
|
|
$card-large-width: 480px; // Width for large cards.
|
|
@include make-card-alt-size ($card-large-name, $card-large-width);
|
|
|
|
$card-fluid-name: 'fluid'; // Class name for fluid cards.
|
|
$card-fluid-width: 100%; // Width for fluid cards.
|
|
@include make-card-alt-size ($card-fluid-name, $card-fluid-width);
|
|
|
|
$card-warning-name: 'warning'; // Class name for card warnging color variant.
|
|
$card-warning-back-color: #ffca28; // Background color for card warnging color variant.
|
|
$card-warning-fore-color: #111; // Text color for card warnging color variant.
|
|
$card-warning-border-color: #e8b825; // Border style for card warnging color variant.
|
|
@include make-card-alt-color ($card-warning-name, $card-warning-back-color, $card-warning-fore-color, $card-warning-border-color);
|
|
|
|
$card-error-name: 'error'; // Class name for card error color variant.
|
|
$card-error-back-color: #b71c1c; // Background color for card error color variant.
|
|
$card-error-fore-color: #f8f8f8; // Text color for card error color variant.
|
|
$card-error-border-color: #a71a1a; // Border style for card error color variant.
|
|
@include make-card-alt-color ($card-error-name, $card-error-back-color, $card-error-fore-color, $card-error-border-color);
|
|
|
|
$card-section-dark-name: 'dark'; // Class name for card dark section variant.
|
|
$card-section-dark-back-color: #e0e0e0; // Background color for card dark section variant.
|
|
$card-section-dark-fore-color: #111; // Text color for card dark section variant.
|
|
@include make-card-section-alt-color ($card-section-dark-name, $card-section-dark-back-color, $card-section-dark-fore-color);
|
|
|
|
$card-section-double-padded-name: 'double-padded'; // Class name for card double-padded section variant.
|
|
$card-section-double-padded-padding: calc(1.5 * var(#{$universal-padding-var})); // Padding for card sectiondouble-padded section variant.
|
|
@include make-card-section-alt-style ($card-section-double-padded-name, $card-section-double-padded-padding);
|
|
|
|
@import 'input_control';
|
|
|
|
/*
|
|
Custom elements for forms and input elements.
|
|
*/
|
|
$button-primary-name: 'primary'; // Class name for primary button color variant.
|
|
$button-primary-back-color: #1976d2; // Background color for primary button color variant.
|
|
$button-primary-hover-back-color:#1565c0; // Background color for primary button color variant (hover).
|
|
$button-primary-fore-color: #f8f8f8; // Text color for primary button color variant.
|
|
@include make-button-alt-color ($button-primary-name, $button-primary-back-color, $button-primary-hover-back-color, $button-primary-fore-color);
|
|
|
|
$button-secondary-name: 'secondary'; // Class name for secondary button color variant.
|
|
$button-secondary-back-color: #d32f2f; // Background color for secondary button color variant.
|
|
$button-secondary-hover-back-color:#c62828; // Background color for secondary button color variant (hover).
|
|
$button-secondary-fore-color: #f8f8f8; // Text color for secondary button color variant.
|
|
@include make-button-alt-color ($button-secondary-name, $button-secondary-back-color, $button-secondary-hover-back-color, $button-secondary-fore-color);
|
|
|
|
$button-tertiary-name: 'tertiary'; // Class name for tertiary button color variant.
|
|
$button-tertiary-back-color: #308732; // Background color for tertiary button color variant.
|
|
$button-tertiary-hover-back-color:#277529; // Background color for tertiary button color variant (hover).
|
|
$button-tertiary-fore-color: #f8f8f8; // Text color for tertiary button color variant.
|
|
@include make-button-alt-color ($button-tertiary-name, $button-tertiary-back-color, $button-tertiary-hover-back-color, $button-tertiary-fore-color);
|
|
|
|
$button-inverse-name: 'inverse'; // Class name for inverse button color variant.
|
|
$button-inverse-back-color: #212121; // Background color for inverse button color variant.
|
|
$button-inverse-hover-back-color:#111; // Background color for inverse button color variant (hover).
|
|
$button-inverse-fore-color: #f8f8f8; // Text color for inverse button color variant.
|
|
@include make-button-alt-color ($button-inverse-name, $button-inverse-back-color, $button-inverse-hover-back-color, $button-inverse-fore-color);
|
|
|
|
$button-small-name: 'small'; // Class name, padding and margin for small button size variant.
|
|
$button-small-padding: calc(0.5 * var(#{$universal-padding-var})) calc(0.75 * var(#{$universal-padding-var}));
|
|
$button-small-margin: var(#{$universal-margin-var});
|
|
@include make-button-alt-size ($button-small-name, $button-small-padding, $button-small-margin);
|
|
|
|
$button-large-name: 'large'; // Class name, padding and margin for large button size variant.
|
|
$button-large-padding: calc(1.5 * var(#{$universal-padding-var})) calc(2 * var(#{$universal-padding-var}));
|
|
$button-large-margin: var(#{$universal-margin-var});
|
|
@include make-button-alt-size ($button-large-name, $button-large-padding, $button-large-margin);
|
|
|
|
|
|
$_drawer-right: false;
|
|
|
|
@import 'navigation';
|
|
@import 'contextual';
|
|
|
|
/*
|
|
Custom elements for contextual background elements, toasts and tooltips.
|
|
*/
|
|
$mark-secondary-name: 'secondary'; // Class name for secondary <mark> color variant.
|
|
$mark-secondary-back-color: #d32f2f; // Background color for secondary <mark> color variant.
|
|
@include make-mark-alt-color ($mark-secondary-name, $mark-secondary-back-color);
|
|
|
|
$mark-tertiary-name: 'tertiary'; // Class name for tertiary <mark> color variant.
|
|
$mark-tertiary-back-color: #308732; // Background color for tertiary <mark> color variant.
|
|
@include make-mark-alt-color ($mark-tertiary-name, $mark-tertiary-back-color);
|
|
|
|
$mark-tag-name: 'tag'; // Class name, padding and border radius for tag <mark> size variant.
|
|
$mark-tag-padding: calc(var(#{$universal-padding-var})/2) var(#{$universal-padding-var});
|
|
$mark-tag-border-radius: 1em;
|
|
@include make-mark-alt-size ($mark-tag-name, $mark-tag-padding, $mark-tag-border-radius);
|
|
|
|
// Website-specific styles
|
|
|
|
html, * { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif; }
|
|
code, pre, kbd, code *, pre *, kbd *, code[class*="language-"], pre[class*="language-"] {
|
|
font-family: 'Inconsolata', Menlo, Consolas, monospace !important;
|
|
}
|
|
code, kbd { font-size: 1em; }
|
|
code { transform: scale(1); } /* Deals with the issue described in #243 */
|
|
pre { font-size: 1rem; border: 0.0625rem solid var(--secondary-border-color); border-radius: var(--universal-border-radius);}
|
|
.group{position:relative;margin-top:2em;margin-bottom:-1em}
|
|
.search{font-size:14px;margin-top:-.1em;display:block;width:100%;border:none;border-bottom:1px solid var(--nav-link-color)}
|
|
.search:focus{outline:none}
|
|
label#search-label{color:var(--nav-link-color);font-size:18px;font-weight:400;position:absolute;left:5px;top:10px}
|
|
.search:focus ~ label#search-label,.search:valid ~ label#search-label{top:-20px;font-size:14px;color:var(--nav-link-color)}
|
|
label#menu-toggle { width: 3.4375rem;}
|
|
|
|
header h1.logo {
|
|
margin-top: -0.8rem;
|
|
text-align:center;
|
|
a {
|
|
text-decoration:none;
|
|
color: #111;
|
|
}
|
|
}
|
|
|
|
header #title {
|
|
position:relative;
|
|
top: -1rem;
|
|
@media screen and (max-width: 500px) { font-size: 1rem; display: block }
|
|
}
|
|
|
|
header h1 small {
|
|
display:block;
|
|
font-size: 0.875rem;
|
|
font-style: italic;
|
|
color: #888;
|
|
margin-top: -0.8rem;
|
|
@media screen and (max-width: 768px) { font-size: 0.75rem; }
|
|
@media screen and (max-width: 600px) { font-size: 0.625rem; }
|
|
@media screen and (max-width: 500px) { font-size: 0.5rem; margin-top: -1.2rem; }
|
|
}
|
|
|
|
label#menu-toggle {
|
|
position: absolute;
|
|
left: 0.5rem;
|
|
top: 0.5rem;
|
|
width: 3.4375rem;
|
|
}
|
|
|
|
.card {
|
|
box-shadow: 0 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.125), 0 0.125rem 0.125rem -0.125rem rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
main {
|
|
padding: 0;
|
|
}
|