0c575a4d68
Updated injectors to be simpler and easier to use. Updated styling to deal with rendering problems and make the loading faster.
218 lines
7.3 KiB
SCSS
218 lines
7.3 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
|
|
*/
|
|
$_include-modal: false;
|
|
$_include-tooltip: false;
|
|
$_include-collapse: false;
|
|
|
|
@import 'core';
|
|
@import 'layout';
|
|
|
|
/*
|
|
Custom elements for card elements.
|
|
*/
|
|
|
|
$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-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);
|
|
|
|
.#{$card-name} > h3.#{$card-section-name}.#{$card-section-double-padded-name} {
|
|
padding: calc(3 * var(#{$universal-padding-var}));
|
|
}
|
|
|
|
|
|
@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);
|
|
|
|
|
|
$_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: 'Roboto', -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: 'Roboto Mono', Menlo, Consolas, monospace !important;
|
|
}
|
|
code, kbd { font-size: 0.8125em; }
|
|
pre code {
|
|
padding: 0; // Should make the first line's left padding the same as all other lines and avoid that annoying little step.
|
|
}
|
|
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;
|
|
}
|
|
|
|
.token.operator,
|
|
.token.entity,
|
|
.token.url,
|
|
.language-css .token.string,
|
|
.style .token.string {
|
|
background: none !important;
|
|
}
|
|
|
|
:root {
|
|
#{$collapse-label-back-color-var}: $collapse-label-back-color;
|
|
#{$collapse-label-fore-color-var}: $collapse-label-fore-color;
|
|
#{$collapse-label-hover-back-color-var}: $collapse-label-hover-back-color;
|
|
#{$collapse-selected-label-back-color-var}: $collapse-selected-label-back-color;
|
|
#{$collapse-border-color-var}: $collapse-border-color;
|
|
#{$collapse-content-back-color-var} : $collapse-content-back-color;
|
|
#{$collapse-selected-label-border-color-var}: $collapse-selected-label-border-color;
|
|
}
|
|
label.#{$collapse-name} {
|
|
width: 100%;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
box-sizing: border-box;
|
|
transition: background 0.3s;
|
|
color: var(#{$collapse-label-fore-color-var});
|
|
background: var(#{$collapse-label-back-color-var});
|
|
border: $__1px solid var(#{$collapse-border-color-var});
|
|
padding: calc(1.5 * var(#{$universal-padding-var}));
|
|
border-radius: var(#{$universal-border-radius-var});
|
|
&:hover, &:focus {
|
|
background: var(#{$collapse-label-hover-back-color-var});
|
|
}
|
|
+ pre {
|
|
box-sizing: border-box;
|
|
height: 1px;
|
|
max-height: 1px;
|
|
overflow: auto;
|
|
margin: 0;
|
|
border: 0;
|
|
padding: 0;
|
|
transition: max-height 0.3s;
|
|
}
|
|
&.toggled {
|
|
background: var(#{$collapse-selected-label-back-color-var});
|
|
border-bottom-color: var(#{$collapse-selected-label-border-color-var});
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
+ pre {
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
position: relative;
|
|
width: 100%;
|
|
height: auto;
|
|
border: $__1px solid var(#{$collapse-border-color-var});
|
|
border-top: 0;
|
|
padding: calc(2 * var(#{$universal-padding-var}));
|
|
max-height: $collapse-content-max-height;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.collapse {
|
|
> label {
|
|
border-top-left-radius: var(--universal-border-radius) !important;
|
|
border-top-right-radius: var(--universal-border-radius) !important;
|
|
}
|
|
:checked + label {
|
|
border-bottom-left-radius: 0 !important;
|
|
border-bottom-right-radius: 0 !important;
|
|
}
|
|
margin: 0;
|
|
width: 100%;
|
|
> div {
|
|
padding: 0 !important;
|
|
> pre {
|
|
margin: 0;
|
|
border: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
button.primary.clipboard-copy {
|
|
width: 100%;
|
|
margin-left: 0;
|
|
> svg {
|
|
vertical-align: bottom;
|
|
}
|
|
}
|