flexi-bot/docs/marlin/_sass/_custom.scss
2023-09-05 20:38:49 +02:00

1199 lines
35 KiB
SCSS

/**
* _custom.scss for marlinfw.org
*/
:root {
--bg-midsection: radial-gradient(circle, rgba(0,0,0, 1) 0%, rgba(0,0,0, 0) 60%, rgba(0,0,0, 0) 100%);
--color-background: #FFF;
--color-color: #000;
--color-nesting: #00000014;
--color-article-border: #888;
--color-bitmap: #118;
--color-bitmap-label-hover: #090;
--color-bitmap-preview-lg: gray;
--color-bitmap-preview-sm: #FFF;
--color-bitmap-input: #ABF;
--color-bitmap-output: #300;
--color-bitmap-output-bg: #F8FFFF;
--color-bitmap-output-border: #077;
--color-bitmap-selector-bg: #EEE;
--color-bitmap-selector-options-bg: #FFF;
--color-bitmap-selector-label: #FDD;
--color-bitmap-err-box: red;
--color-code: #0088CC;
--color-code-bg: #DEF;
--color-data-search: #FFF;
--color-data-search-bg: #BBB;
--color-features: #000;
--color-features-body: #000;
--color-features-bg: rgba(255,255,255,0.8);
--color-features-hover-bg: rgba(255,255,255,0.8);
--color-features-hover: #FFF;
--color-features-body-hover: grey;
--color-features-image-bg: rgba(3,3,3,0.8);
--color-gcode-h5-bg: #CCC;
--color-gcode-h5-code: #FFF;
--color-gcode-h5-code-bg: #444;
--color-gcode-usage: #246;
--color-gcode-usage-bg: #ADF;
--color-gcode-usage-hover: #BEF;
--color-gcode-usage-opt: #624;
--color-gcode-usage-opt-bg: #FAD;
--color-gcode-usage-opt-hover: #FBE;
--color-gcode-examples-bg: #E9F5FF;
--color-gcode-gallery: #601;
--color-gcode-related: #000;
--color-gcode-related-bg: #DDD;
--color-h1-gcode: #B88;
--color-h1-basic: #8B8;
--color-h1-feat: #8BB;
--color-h1-hardware: #88B;
--color-h1-devel: #BB8;
--color-h1-setting: #B8B;
--color-header: #000;
--color-header-bg: #8CF;
--color-article-header: #000;
--color-hr: #333;
--color-highlighter-rouge: #C99;
--color-highlighter-rouge-bg: #300;
--color-iframe-border: #444;
--color-iframe-search: #002;
--color-iframe-search-a: #000;
--color-iframe-search-bg: #FFF;
--color-iframe-search-search: #FCA;
--color-iframe-search-search-bg: #000;
--color-iframe-search-search-border: #000;
--color-iframe-search-submit-bg: #C4E6DB;
--color-iframe-search-submit-border: #000;
--color-iframe-overlay-bg: linear-gradient(0deg, #DDF1EA, #DDF1EA, #FFFFFF);
--color-iframe-overlay-a: #00F;
--color-item-bg: #F0F0FF;
--color-item-code-bg: #E0E0F0;
--color-item-post: #EAEAFC;
--color-jumbo: #000;
--color-jumbo-bg: #EEE;
--color-jumbo-h1: #000;
--color-jumbo-table-bg: #FFF;
--color-jumbo-th-bg: #DDD;
--color-jumbo-th-td: #000;
--color-jumbo-th-th: #EEE;
--color-jumbo-td-td: #FFF;
--color-jumbo-strong: red;
--color-jumbo-h2-bg: transparent;
--color-lcd-th-bg: #DDD;
--color-lcd-td-bg: #0639FF;
--color-lcd-td-border: #000;
--color-lcd-td: #72D5FB;
--color-lcd-td-a: #C2F5FF;
--color-lcd-td-code: #E2D5FB;
--color-lcd-td-code-bg: #3669FF;
--color-lcd-td-strong: #72D5FB;
--color-lcd-code: #C7254E;
--color-lcd-code-bg: #F9F2F4;
--color-list-group-item-border: #CCC;
--color-list-group-item-bg: #EEE;
--color-list-group-item-hover: #DDD;
--color-list-group-item-a: #000;
--color-list-group-item-a-hover: #222;
--color-link: #8492FD;
--color-link-hover: #8492FD;
--color-link-hover-bg: #0002;
--color-logo-fill: #000;
--color-logo-fill-hover: #606;
--color-nav: #AA0;
--color-nav-bg: #F8F8F8;
--color-nav-list: #09B;
--color-navbar-default: #777;
--color-navbar-default-bg: #3A633F;
--color-navbar-bg: #FFF;
--color-navbar-border: #222;
--color-navbar-li: #FFF;
--color-navbar-li-bg: #0088CC;
// Top nav
--color-nav: #FFF;
--color-nav-border: #222;
--color-nav-hover: #000;
--color-nav-hover-bg: #AAA;
--color-nav-active: #FFF;
--color-nav-active-bg: #0088CC;
--color-dropdown: #262626;
--color-dropdown-a: #000;
--color-dropdown-a-hover: #0088CC;
--color-dropdown-a-hover-bg: #F5F5F5;
--color-dropdown-bg: #FFF;
--color-gcode-toc-border: #EEE;
--color-search-bg: #FFF;
--color-search: #000;
// Side nav
--color-toc-hover: #66C;
--color-toc-hover-bg: #DDD;
--color-panel: #FFF;
--color-panel-bg: rgba(255,255,255,0.5);
--color-panel-outer-bg: rgba(0,0,0,0.4);
--color-panel-header: #FFF;
--color-panel-body-bg: rgb(59, 59, 59);
--color-panel-header-border: rgba(255,255,255,0.1);
--color-panel-wrapper-link: #000;
--color-panel-info: #9F9;
--color-panel-info-bg: #044;
--color-panel-info-border: #033;
--color-panel-info-header-bg: #011;
--color-panel-info-h4: #0AA;
--color-panel-info-h4-bg: linear-gradient(90deg, #000, #066, #0AA);
--color-panel-warning: #FF0;
--color-panel-warning-border: #440;
--color-panel-warning-h4: #000;
--color-panel-warning-h4-bg: linear-gradient(90deg, #A80, #540, #000);
--color-post-bg: #EEE;
--color-pre: #000;
--color-pre-bg: #EEE;
--color-highlight-bg: #EEE;
--color-primary: #CCC;
--color-primary-bg: #333;
--color-primary-border: #EEE;
--color-info: #31708F;
--color-info-bg: #D9EDF7;
--color-info-border: #BCE8F1;
--color-warning: #F92;
--color-warning-border: #F92;
--color-warning-bg: #FF0;
--color-warning-code: #FFF;
--color-warning-code-bg: #CC08;
--color-danger: #F92;
--color-danger-bg: #600;
--color-danger-border: #E11;
--color-danger-code: #F00;
--color-danger-code-bg: #C228;
--color-required: #FF0;
--color-tagline: #111;
--color-tagline-bg: #FFF;
--color-tagline-header: #00F;
--color-tagline-id: cadetblue;
--color-tagline-btn: #FFF;
--color-table-header: #FFF;
--color-table-header-bg: #000;
--color-table-striped-bg: #CCC;
}
/* Variable declaration for dark mode */
[data-theme="dark"] {
--bg-midsection: radial-gradient(circle, rgba(255,255,255, 1) 0%, rgba(255,255,255, 0) 60%, rgba(255,255,255, 0) 100%);
--color-background: #000;
--color-color: #B5B5B5;
--color-nesting: #FFFFFF14;
--color-article-border: #888;
--color-bitmap: #CCF;
--color-bitmap-label-hover: #9D9;
--color-bitmap-preview-lg: gray;
--color-bitmap-preview-sm: #FFF;
--color-bitmap-input: #BBF;
--color-bitmap-output: #2D2;
--color-bitmap-output-bg: #444;
--color-bitmap-output: #666;
--color-bitmap-selector-bg: #226;
--color-bitmap-selector-options-bg: #8888;
--color-bitmap-selector-label: #FDD;
--color-bitmap-err-box: red;
--color-code: #AAF;
--color-code-bg: #114;
--color-data-search: #FFF;
--color-data-search-bg: #BBB;
--color-features: #FFF;
--color-features-body: #000;
--color-features-bg: rgba(3,3,3,0.5);
--color-features-hover-bg: rgba(255,255,255,0.8);
--color-features-hover: grey;
--color-features-body-hover: grey;
--color-features-image-bg: rgba(3,3,3,0.8);
--color-gcode-h5: #FFF;
--color-gcode-h5-bg: #444;
--color-gcode-h5-code: #000;
--color-gcode-h5-code-bg: #CCC;
--color-gcode-usage: #ADF;
--color-gcode-usage-bg: #246;
--color-gcode-usage-hover: #358;
--color-gcode-usage-opt: #FAD;
--color-gcode-usage-opt-bg: #624;
--color-gcode-usage-opt-hover: #835;
--color-gcode-examples-bg: #1D262D;
--color-gcode-gallery: #904;
--color-gcode-related: #FFF;
--color-gcode-related-bg: #222;
--color-h1-gcode: #B88;
--color-h1-basic: #8B8;
--color-h1-feat: #8BB;
--color-h1-hardware: #88B;
--color-h1-devel: #BB8;
--color-h1-setting: #B8B;
--color-hr: #FFF;
--color-header-bg: #004466;
--color-header: #FF0;
--color-article-header: #FF0;
// Top nav
--color-nav: #CCC;
--color-nav-border: #333;
--color-nav-bg: #222;
--color-nav-hover: #FFF;
--color-nav-hover-bg: #333;
--color-nav-focus: #444;
--color-nav-focus-bg: #AAA;
--color-nav-active: #FF0;
--color-nav-active-bg: #004466;
--color-dropdown: #333;
--color-dropdown-a: #CCC;
--color-dropdown-a-hover: #FFF;
--color-dropdown-a-hover-bg: #222;
--color-dropdown-bg: #555;
--color-gcode-toc-border: #EEE;
--color-link: #F88;
--color-link-hover: #F88;
--color-link-hover-bg: #FFF2;
--color-logo-fill: #FFF;
--color-logo-fill-hover: #FCF;
--color-search-bg: #333;
--color-search: #EEE;
// Side nav
--color-toc-hover: #FCC;
--color-toc-hover-bg: #222;
--color-panel: #FFF;
--color-panel-bg: rgba(255,255,255,0.5);
--color-panel-outer-bg: rgba(255,255,255,0.6);
--color-panel-header: #FFF;
--color-panel-body-bg: rgb(59, 59, 59);
--color-panel-header-border: rgba(255,255,255,0.1);
--color-panel-wrapper-link: #000;
--color-panel-info: #9F9;
--color-panel-info-bg: #044;
--color-panel-info-border: #033;
--color-panel-info-header-bg: #011;
--color-panel-info-h4: #000;
--color-panel-info-h4-bg: linear-gradient(90deg, #0AA, #066, #000);
--color-panel-body-bg: #022;
--color-panel-warning: #FF0;
--color-panel-warning-border: #440;
--color-panel-warning-h4: #FF0;
--color-panel-warning-h4-bg: linear-gradient(90deg, #000, #540, #A80);
--color-post-bg: #556;
--color-pre: #CCC;
--color-pre-bg: #000;
--color-highlight-bg: #111;
--color-highlighter-rouge: #C99;
--color-highlighter-rouge-bg: #222;
--color-primary: #333;
--color-primary-bg: #CCC;
--color-primary-border: #EEE;
--color-info: #ADD029;
--color-info-bg: #022535;
--color-info-border: #66A98A;
--color-warning: #FF0;
--color-warning-border: #FF0;
--color-warning-bg: #C58A03;
--color-warning-code: #FFF;
--color-warning-code-bg: #CC08;
--color-danger: #F80;
--color-danger-bg: #600;
--color-danger-border: #E11;
--color-danger-code: #F00;
--color-danger-code-bg: #C228;
--color-required: #FF0;
--color-iframe-border: #444;
--color-iframe-search: #FFF;
--color-iframe-search-bg: #111;
--color-iframe-search-a: #C80;
--color-iframe-search-search: #FCA;
--color-iframe-search-search-bg: #000;
--color-iframe-search-search-border: #FC0;
--color-iframe-search-submit-bg: #425FB3;
--color-iframe-search-submit-border: #FFF8;
--color-iframe-overlay-bg: linear-gradient(0deg, #000, #142, #000);
--color-iframe-overlay-a: #FF0;
--color-item-bg: #111;
--color-item-code-bg: #E0E0F0;
--color-item-post: #EAEAFC;
--color-jumbo: #FFF;
--color-jumbo-bg: #202;
--color-jumbo-h1: #F80;
--color-jumbo-table-bg: #614;
--color-jumbo-th-bg: #F404;
--color-jumbo-th-td: #000;
--color-jumbo-th-th: #202;
--color-jumbo-td-td: #201;
--color-jumbo-strong: #FE4;
--color-jumbo-h2-bg: transparent;
--color-lcd-th-bg: #DDD;
--color-lcd-td-bg: #0639FF;
--color-lcd-td-border: #000;
--color-lcd-td: #72D5FB;
--color-lcd-td-a: #C2F5FF;
--color-lcd-td-code: #E2D5FB;
--color-lcd-td-code-bg: #3669FF;
--color-lcd-td-strong: #72D5FB;
--color-lcd-code: #C7254E;
--color-lcd-code-bg: #F9F2F4;
--color-list-group-item-border: #999;
--color-list-group-item-bg: #222;
--color-list-group-item-bg-hover: #333;
--color-list-group-item-a: #EEE;
--color-list-group-item-a-hover: #FFF;
--color-tagline: #EEE;
--color-tagline-bg: #000;
--color-tagline-header: #DDF;
--color-tagline-id: cadetblue;
--color-tagline-btn: #FFF;
--color-table-header: #000;
--color-table-header-bg: #CCC;
--color-table-striped-bg: #333;
}
body { background: var(--color-background); color: var(--color-color); }
h1, h2, h3, h4, h5, h6 {
clear: both;
code { background-color: inherit; }
}
h3, h4, h5, h6 { background: var(--color-header-bg); color: var(--color-header); }
h1+h2 { color: #BBC; }
a, a:hover { color: var(--color-link); }
code { color: var(--color-code); background-color: var(--color-code-bg); }
pre { background-color: var(--color-pre-bg); }
pre, pre>code { color: var(--color-pre); }
pre.highlight{ background-color: var(--color-highlight-bg); }
// Marlin logo SVG
#mflogo {
> g > path { fill: var(--color-logo-fill); }
&:hover > g > path { fill: var(--color-logo-fill-hover); }
}
// Top nav bar
.navbar { background-color: var(--color-nav-bg); border-color: var(--color-nav-border); }
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus{background-color: inherit; }
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus{ background-color: var(--color-nav-hover-bg); color: var(--color-nav-hover); }
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus{ background-color: var(--color-nav-hover-bg); color: var(--color-hover-focus); }
.nav.navbar-nav li.here>a { color: var(--color-nav-active); background: var(--color-nav-active-bg);}
.nav.navbar-nav li.here.open>a { color: var(--color-nav); }
.nav.navbar-nav li:hover { background-color: var(--color-nav-hover-bg); color: var(--color-nav-hover);}
// Nav bar drop down menu
.dropdown-menu { background-color: var(--color-dropdown-bg); color: var(--color-dropdown); }
.dropdown-menu li a { color: var(--color-dropdown-a); }
.dropdown-menu li a:hover, .dropdown-menu>li>a:active { color: var(--color-dropdown-a-hover); background-color: var(--color-dropdown-a-hover-bg); }
// Mav bar search box
li#searchbox input[type="search"]{ background-color: var(--color-search-bg); color: var(--color-search); }
// Mid section
.mid-section { background-image: var(--bg-midsection); }
.custom-tagline { color: var(--color-tagline); background-color: var(--color-tagline-bg);
h1 { color: var(--color-tagline-header); }}
#tagline { color: var(--color-tagline-id); }
.custom-tagline-btn a { color: var(--color-tagline-btn); }
hr.custom-hr{ color: var(--color-hr);
$color: #333;
color: var(--color-hr);
border-image: linear-gradient(
90deg,
rgba($color, 0),
rgba($color, 1) 50%,
rgba($color, 0) 100%) 0 0 100%; }
.features-tile-wrapper:hover, .features-tile-wrapper a:hover {
.features-tile-body {
color: var(--color-features-body-hover);
}
.features-tile-title {
background-color: var(--color-features-hover-bg);
color: var(--color-features-hover);
}
}
.features-tile-title{
color: var(--color-features);
background-color: var(--color-features-bg);
}
.features-tile-body, .features-tile-body a {
color: var(--color-features);
}
.features-tile-image:hover > div { background-color: var(--color-features-image-bg); }
.custom-article, .calipat {
h1, h2, h3, h4, h5, h6 {
color: var(--color-article-header);
}
table { border-top-color: var(--color-article-border); }
th, td { border-color: var(--color-article-border); }
}
.panel { background-color: var(--color-panel-bg); }
.panel-body { background-color: var(--color-panel-body-bg); color: var(--color-panel); }
.panel-heading, a.panel-heading {
border-color: var(--color-panel-border);
h1, h2, h3, h4 { color: var(--color-panel-header); }
}
a.panel-wrapper:hover, a.panel-wrapper:active {
.panel-heading, a.panel-heading {
h1, h2, h3, h4 { color: var(--color-panel-wrapper-link);}
}
}
.post { background-color: var(--color-post-bg); }
[data-search-results]>h1 { color: var(--color-data-search); background: var(--color-data-search-bg); }
h1.gcode { background: var(--color-h1-gcode); }
h1.basics { background: var(--color-h1-basics); }
h1.feat { background: var(--color-h1-feat); }
h1.hardware { background: var(--color-h1-hardware); }
h1.devel { background: var(--color-h1-devel); }
h1.setting { background: var(--color-h1-setting); }
div.panel.panel-info {
background-color: var(--color-panel-info); border-color: var(--color-panel-info-border); color: var(--color-panel-info-bg);
.panel-heading {
background-color: var(--color-panel-info-header-bg);
border-color: var(--color-panel-info-border);
h4 { color: var(--color-panel-info-h4); background: var(--color-panel-info-h4-bg); }
}
}
div.panel.panel-warning {
background-color: var(--color-panel-warning-bg); border-color: var(--color-panel-warning-border); color: var(--color-panel-warning);
.panel-heading {
padding: 0;
background-color: #110;
border-color: var(--color-panel-warning-border);
h4 { color: var(--color-panel-warning-h2); background: var(--color-panel-warning-h4-bg); }
}
}
div.row.alert { margin: 0.5em 0; }
div.alert-primary {
background-color: var(--color-primary-bg); border-color: var(--color-primary-border); color: var(--color-primary);
}
div.alert-info {
background-color: var(--color-info-bg); border-color: var(--color-info-border); color: var(--color-info);
}
div.alert-warning {
background-color: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning);
code { background-color: var(--color-warning-code-bg); color: var(--color-warning-code); }
a { color: var(--color-warning-code); }
}
div.alert-danger {
background-color: var(--color-danger-bg); border-color: var(--color-danger-border); color: var(--color-danger);
code { background-color: var(--color-danger-code-bg); color: var(--color-danger-bg); }
}
.item.odd {
background: var(--color-item-bg);
code, pre, .table>thead>tr>th { background-color: var(--color-item-code-bg); }
.post { background-color: var(--color-item-post); }
}
#lcd_menu-page .col-lg-9 {
th { background-color: var(--color-lcd-th-bg); }
td {
background-color: var(--color-lcd-td-bg);
border-color: var(--color-lcd-td-border);
color: var(--color-lcd-td);
a { color: var(--color-lcd-a); }
code { background-color: var(--color-lcd-td-code-bg); color: var(--color-lcd-td-code); }
strong { color: var(--color-lcd-strong); }
}
td+td code { background-color: var(--color-lcd-code-bg); color: var(--color-lcd-code); }
}
#bitmap-converter {
label:hover { color: var(--color-bitmap-label-hover); }
#preview-lg { border-color: var(--color-bitmap-preview-lg); }
#preview-sm { border-color: var(--color-bitmap-preview-sm); }
input#pasted { color: var(--color-bitmap-input); }
textarea#output {
border-color: var(--color-bitmap-output-border);
background: var(--color-bitmap-output-bg);
color: var(--color-bitmap-output);
}
div.file-selector {
background: var(--color-bitmap-selector-bg);
.options { background-color: var(--color-bitmap-selector-options-bg); }
label.tbd, label.tbd:hover { color: var(--color-bitmap-selector-label) !important; }
}
div#err-box { color: var(--color-bitmap-err-box); }
}
div.container.detail, div.container.config {
div.row {
h4, h5, h6 { background: var(--color-code-bg); color: var(--color-code); }
h5 {
background: var(--color-gcode-h5-bg); color: var(--color-gcode-h5);
code { background: var(--color-gcode-h5-code-bg); color: var(--color-gcode-h5-code); }
}
}
div.row.examples pre { background: var(--color-gcode-examples-bg); }
div.row.gallery p { color: var(--color-gcode-gallery); }
}
.jumbotron {
background-color: var(--color-jumbo-bg);
color: var(--color-jumbo);
h1, h1 strong { color: var(--color-jumbo-h1); }
table { background: var(--color-jumbo-table-bg); }
th, td { border-bottom-color: var(--color-jumbo-th-td); }
th { background: var(--color-jumbo-th-bg); }
th+th { border-left-color: var(--color-jumbo-th-th); }
td+td { border-left-color: var(--color-jumbo-td-td); }
strong em { color: var(--color-jumbo-strong); }
h2 { background: var(--color-jumbo-h2-bg); }
}
iframe.youtube { border-color: var(--color-iframe-border); }
#search.container {
color: var(--color-iframe-search);
background: var(--color-iframe-search-bg);
a { color: var(--color-iframe-search-a); }
input[type="search"] { border-color: var(--color-iframe-search-border); background: var(--color-iframe-search-bg); color: var(--color-iframe-search); }
input[type="submit"] { background: var(--color-iframe-search-submit-bg); border-color: var(--color-iframe-search-submit-border); }
.overlay { background: var(--color-iframe-overlay-bg); }
[data-search-results]>.item:hover a { color: var(--color-iframe-overlay-a); }
}
.table-striped>tbody>tr:nth-of-type(odd) { background: var(--color-table-striped-bg); }
a.list-group-item {
color: var(--color-list-group-item-a);
background-color: var(--color-list-group-item-bg);
border-color: var(--color-list-group-item-border);
&:hover {
color: var(--color-list-group-item-a-hover);
background-color: var(--color-list-group-item-bg-hover);
}
h4 { background: none; margin: 0; padding: 0.25 0; }
.list-group-item-heading { color: var(--color-header); }
}
h1+h2 { margin-top: -0.4em; color: #BBC; }
.row { margin: 0; padding: 0; }
.back-to-top { padding-right: 2em; }
#daynite { visibility: hidden; margin: 6px 0 0 4px; padding-left: 4px; }
#discord-frame { float: right; margin-left: 1em; }
.home-discord { width: 350px; margin: 0 auto; text-align: center; }
#carouselmarlin { background-color: #F8F8F9; .item { height: 320px; img { padding: -50px 0; } } }
.carousel-inner { max-width: 1500px; margin: 0 auto; }
h1, h2, h3, h4, h5, h6 {
font-family: $font-family-heading;
margin-top: 0.2em;
}
h1+h2 { margin-top: -0.4em; }
div.highlight { margin-bottom: 25px; }
.extra-panels {
h1, h2, h3, h4, h5, h6 {
background: none !important;
padding: 0 !important;
margin: 0 !important;
}
}
.container {
h2, h3, h4, h5, h6 {
padding: 0.25em;
border-top-left-radius: 0.25em;
border-top-right-radius: 0.05em;
border-bottom-left-radius: 0.25em;
border-bottom-right-radius: 0.25em;
}
h3, h4, h5, h6 {
margin-top: 1em;
margin-left: 0.25em;
}
}
.container td {
h2, h3, h4, h5, h6 {
background: none !important;
padding: 4px;
margin-top: 0.25em;
}
}
.ctr { text-align: center; }
.custom-border-warning { border-left-color: #F0AD4E; }
.custom-no-margin { margin: 0 !important; }
.custom-no-padding { padding: 0 !important; }
.custom-pl10 { padding-left: 10px; }
.custom-pt5 { padding-top: 5px; }
.custom-pt25 { padding-top: 25px; }
.custom-ptb40 { padding: 40px 0px 40px 0px !important; }
.custom-alert { display: table; }
.custom-alert-icon {
display: table-cell;
vertical-align: middle;
float: none;
.fa-1x { padding: 0.5em 0 0.5em; }
.fa-2x { padding: 0.25em 0 0.25em; }
.fa-4x { padding: 0.125em 0 0.125em; }
}
.custom-alert-text {
display: table-cell;
vertical-align: middle;
float: none;
padding: 1em;
> p { margin: 0; }
}
.param-desc-list p { display: inline; }
td.arg code { white-space: nowrap; }
#search-block-form .button { margin-right: 0.25em; }
/*
* Edit this page Button
*/
.btn-edit { background: #C58A03; }
/*
* Follow Button
*/
.navbar-nav>li>a.btn-follow {
color: rgb(0, 132, 180);
&:hover, &:active {
color: white;
background: rgb(0, 172, 237);
}
}
/*
* Contribute Button
*/
.btn-contribute { background: #B8B; }
/*
* Download Button
*/
.btn-download { background: #5BC0DE; }
/*
* Learn More Button
*/
.btn-learn, .panel-learn { background: rgb(120, 168, 120); }
/*
* Nav bar expand/collapse btn
*/
.navbar-toggle { margin-right: 0; }
/*
* Panels
*/
.highlight-panels {
.panel-heading { height: auto; }
.panel-body {
min-height: inherit;
max-height: inherit;
}
}
.panel-heading, a.panel-heading {
h1, h2, h3, h4 {
margin: 0;
padding: 0;
background-color: transparent !important;
color: #000;
}
}
a.panel-wrapper:hover, a.panel-wrapper:active {
text-decoration: none;
color: gray;
.panel-body, .panel-heading { color: gray; }
.panel-heading, a.panel-heading { h1, h2, h3, h4 { color: white; } }
}
.panel {
background-color: var(--color-panel-outer-bg);
border-radius: 0.75em 0.25em 0.75em 0.75em;
}
.panel-body{
color: #000;
background-color: white;
border-radius: 0 0 0.75em 0.75em;
font-size: 1.2em;
}
.panel-heading {
border-radius: 0.75em 0.25em 0 0;
border-width: 0 0 1px 0;
border-color: white;
}
.panel-github { background: rgb(65, 131, 196); }
.panel-discord { background: rgb(115, 138, 219); }
.panel-svg { padding: 1em; }
/*
* Tagline
*/
.custom-tagline {
text-align: left;
padding-top: 1em;
padding-right: 2em;
padding-left: 2em;
}
#tagline { padding: 0; margin-top: 0; }
/*
* Tiles
*/
.mid-section {
padding-top: 3em;
width: auto;
background-size: 100% 500%;
background-position: 0% 96%;
background-repeat: no-repeat;
}
.features-tile-wrapper {
padding-right: 1em;
padding-left: 1em;
margin: 5em 0 5em 0;
}
hr.custom-hr{
border-width: 0 0 1px;
border-style: solid;
width: 90%;
clear: both;
}
.features-tile-wrapper:hover, .features-tile-wrapper a:hover {
text-decoration: none;
}
.features-tile-image {
margin: 0 0 2em 0;
padding: 0;
height: 300px;
justify-content: center;
}
.row .features-tile-title { margin: 0; padding: 0; }
.features-tile-title {
font-family: $font-family-heading;
font-size: 1.7em;
padding-left: 1em !important;
}
.features-tile-body {
margin-bottom: 2em;
font-size: 1.2em;
}
/*
* Scrolling code blocks
*/
div.language-cpp { overflow: hidden; }
pre {
width: auto;
margin: 0 1px 1em 1em;
code { white-space: pre; }
}
img.floater {
float: right;
margin: 0 0 1em 1em;
}
img.floater.framed { border: 4px solid #000; }
div.custom-article, div.col-md-12>.row.long, div.col-md-12>.row.notes {
padding-top: 0;
margin-top: 0;
table {
margin-bottom: 1.1em;
border-top: 1px solid #888;
}
th, td {
padding: 2px 0.5em;
border: 1px solid #888;
}
.table>thead>tr>th {
color: var(--color-table-header);
background-color: var(--color-table-header-bg);
border-bottom: 1px solid #888;
}
.row, .item { margin-bottom: 0.5em; }
>p, >table { margin-left: 1em; }
}
.col-md-12>.row.long, .col-md-12>.row.notes {
table { margin-left: 2em; }
th { background: #DDD; }
}
.post {
margin: -1em 0 1em;
padding: 0.5em 0.5em 0.25em;
}
.detail-header h1 { margin-bottom: 4px; }
#authors {
height: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0;
img.avatar { float: right; margin: 8px 0 0 2px; background: white; }
}
div.custom-article {
p, ul>li {
font-size: 110%; clear: both;
ul>li p { font-size: 100%; }
img {
display: block;
&.inline { display: inline; }
}
}
>table { margin: 0 auto 1em; }
}
div.container.detail {
div.row {
margin-left: 16px;
h3, h4 { margin-left: -0.5em; }
h4, h5, h6 { margin-left: -0.5em; padding-left: 0.5em; }
font-size: 110%;
}
div.row.examples .post {
margin: -0.25em 0 1em;
p { font-size: 85%; }
}
div.row {
&.related {
margin: 0.5em 0 0;
padding: 5px 0 6px 1em;
border-radius: 6px;
color: var(--color-gcode-related);
background: var(--color-gcode-related-bg);
code { background: #FFFA; color: #000; }
}
&.meta { margin-left: 0; }
&.examples pre { background: var(--color-gcode-examples-bg); }
&.gallery p { font-size: normal; }
&.usage {
>div {
>code {
background: transparent;
>span {
padding: 0 1px;
white-space: nowrap;
color: var(--color-gcode-usage);
background: var(--color-gcode-usage-bg); &:hover { background: var(--color-gcode-usage-hover); }
&.optional { color: var(--color-gcode-usage-opt); background: var(--color-gcode-usage-opt-bg); &:hover { background: var(--color-gcode-usage-opt-hover); } }
}
}
+div {
margin-top: 1px;
border-top: 1px #000 dotted;
}
}
>code {
background: transparent;
>span { white-space: nowrap; }
}
}
&.gallery p { font-size: normal;}
}
img { max-width: 100%; }
div.row.meta { margin-left: 0; }
img { max-width: 100%; }
}
.clear { clear: both; }
.params .table>tbody>tr:first-child>td { border-top: 0; }
.gcode.item, [data-search-results]>.item {
padding-bottom: 1em;
border-top: 2px solid #888;
p { margin-top: 1em; font-size: 120%; padding-left: 1em; }
>span { float: right; margin: 1em 0.5em 0 0; }
h2 { margin-top: 0; }
}
[data-search-results]>.item h2 {
margin-bottom: 0;
padding: 0;
a { display: block; padding: 4px; }
}
[data-search-results]>h1 {
text-transform: capitalize;
color: white;
display: block;
width: 12em;
margin: 0.125em 0 0.25em;
background: #BBB;
padding: 0.25em 0 0.25em 0.25em;
border-top-right-radius: 0.75em;
border-bottom-right-radius: 0.75em;
border-top-left-radius: 0.125em;
border-bottom-left-radius: 0.125em;
}
#lcd_menu-page .col-lg-9 {
td {
white-space: nowrap;
font-family: $font-family-monospace;
strong { display: inline-block; float: right; }
}
td+td {
background-color: inherit;
border-color: inherit;
color: inherit;
white-space: inherit;
font-family: inherit;
}
}
#bitmap-converter {
margin-top: 0.5em;
p { font-size: 120%; }
canvas {
display: block;
padding: 2px;
margin-top: 5px;
}
#preview-lg {
border: 1px solid;
margin: 5px;
}
#preview-sm {
border: 2px solid;
float: right;
}
input#pasted {
margin: 0.5em 0.5em 0.5em 0;
font-family: $font-family-monospace;
}
textarea#output {
width: 100%;
border: 2px solid;
border-radius: 8px;
font-family: $font-family-monospace;
font-size: 90%;
line-height: 1.1;
resize: none;
cursor: default;
}
div.file-selector {
clear: both;
padding: 1em;
margin: 1em 0;
border-radius: 1em;
// noselect
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
-o-user-select: none; /* Opera */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
.options {
clear: both;
border-radius: 1em;
padding: 4px 0.5em 0;
}
}
#file-input { display: inline-block; }
div#err-box {
display: none;
padding: 1em;
font-size: 150%;
font-weight: bold;
}
div#cpp-container,
#stat-sub { display: none; }
}
// Secondary label background color
$brand-requires: #380 !default;
$label-requires-bg: $brand-requires !default;
.label-requires { @include label-variant($label-requires-bg); color: var(--color-required); }
// A table to emulate a list
table.pretty-list {
border: 0;
th, td { border: 0; vertical-align: top; }
td:first-child { text-align: right; }
}
table.pretty-list.headless thead { display: none; }
div[role=main] { padding-bottom: 33vh; }
.jumbotron {
h1, p { text-align: center; }
ul li { display: block; margin: 0.5em auto; width: 20em; }
table { margin: 1em auto; }
th, td { border-bottom: 1px solid; padding: 1em; }
th { font-size: 110%; }
th+th { border-left: 4px solid; }
td+td { border-left: 4px solid; }
td>em { display: block; font-size: x-small; text-align: right; }
strong em { font-size: x-small; font-weight: bold; text-align: left; }
}
li#searchbox {
padding-left: 0.5em;
height: 50px;
overflow: hidden;
form {
display: none;
padding: 12px 0;
}
input[type="search"] {
border: 1px solid;
border-radius: 0.25em;
padding: 2px 0.25em;
font-size: 100%;
width: 7em;
}
}
li#searchbox { &:hover, &:active { background-color: transparent; } }
iframe.youtube {
border: 2px solid;
margin: 0.5em auto;
}
hr { margin-top: 0; margin-bottom: 0; }
summary h3 { display: inline; }
#search.container {
padding-left: 0;
padding-right: 0;
a { text-decoration: none; }
p.found { margin: 0.5em 0 0.5em 1em; }
form { display: block; }
input[type="search"] {
width: 70%;
padding: 4px 0.5em;
border: 1px solid;
font-size: 150%;
}
input[type="submit"] {
border: 1px solid;
border-radius: 4px;
padding: 3px 0.5em;
font-size: 150%;
}
.overlay {
position: fixed;
width: 100%;
padding: 0;
text-align: center;
}
p.excerpt {
font-size: 120%; padding: 0; margin: 0;
a { display: block; padding: 0.5em 0 0.5em 1em; }
}
}
#install_platformio-page .custom-article ol ol,
#install_platformio_sublime-page .custom-article ol ol {
list-style-type: upper-alpha;
}
.navbar-header { min-width: 153px; }
.navbar-brand { padding: 4px 0 0 0; }
footer>.container { display: block; clear: both; width: 100%}
.noshift-footer, .shift-footer { padding: 1em; }
@media (min-width: 991px) {
.shift-footer { padding-left: 342px !important; }
}
@media (min-width: $screen-sm-min) and (max-width: $screen-md-min) {
.highlight-panels {
.panel-heading { height: 70px;}
.panel {
min-height: 280px;
svg { height: 150px; }
}
}
}
@media (min-width: $screen-sm-min) {
#search.container .overlay { width: 750px; }
.navbar-nav>li>a { padding-left: 4px; padding-right: 4px; }
@media (min-width: 768px) {
.navbar-nav { margin: 0 .25em 0 .25em; }
}
}
@media (max-width: $screen-sm-min) {
.highlight-panels, .extra-panels { padding: 0 2em !important;}
li#searchbox input[type="search"] { width: 10em; }
.tocify.bigtoc, .custom-fixed-sidebar .tocify { width: 324px; }
}
@media (min-width: $screen-md-min) {
.highlight-panels {
.panel-body {
min-height: 260px;
max-height: 260px;
}
}
.features-tile-body { margin-bottom: 0; padding: 4em 0 2em 3em; }
hr.custom-hr { width: 70%; }
.features-tile-image { margin: 0; }
li#searchbox input[type="search"] { width: 13em; }
#search.container .overlay { width: 970px; }
#daynite { display: inline; }
.tocify.bigtoc, .custom-fixed-sidebar .tocify { width: 320px; }
.custom-tagline { padding-left: 1em; padding-right: 3em; }
.features-tile-image { height: 300px; }
}
.container {
width: 100%;
max-width: 1400px;
padding: 0 1em;
}
.navbar-fixed-top { padding: 0 1em; }
@media (min-width: $screen-lg-min) {
.highlight-panels {
.panel-body {
min-height: 240px;
max-height: 240px;
}
}
.custom-btn { top: 5em; }
li#searchbox input[type="search"] { width: 14em; }
#search.container .overlay { width: 1170px; }
.navbar-nav>li>a { padding-left: 12px; padding-right: 12px; line-height: inherit; }
.tocify.bigtoc, .custom-fixed-sidebar .tocify { width: 292px; }
}
@media (max-width: $screen-sm-min) {
li#searchbox input[type="search"] { width: 10em; }
.tocify.bigtoc, .custom-fixed-sidebar .tocify { width: 324px; }
//footer>.container { width: 100%; padding-left: 0; }
footer>.container { width: ($screen-lg-min - 30 - 20); padding-left: 312px; }
}
// Fix headings in panels
div.panel.panel-info, div.panel.panel-warning {
>.panel-heading { padding: 0; }
h4 { margin-top: 0; padding: 0.5em; }
}
.label code { background: none; color: #FFF; }
.left-align { margin-left: 1em !important; }
/* Configuration Options Pages */
div.subopt {
clear: both;
padding: 1em 0 0.75em 0.5em;
margin-bottom: 0.5em;
background: var(--color-nesting);
.long { margin-top: 0.75em; }
pre { margin: 0 1px 1em 0; }
.detail-header { h3, h4 { clear: none; } }
}
.main > div.subopt { background: none; border-top: 1px solid var(--color-color); }
div.container.detail div.row div.subopt {
h3, h4, h5, h6 { margin: 0.5em 0 0.5em 0; padding: 0; background: none; }
div.subopt { h3, h4, h5, h6 { margin-top: 0; } }
}
div.settings.item {
padding: 0.25em;
margin-bottom: 1em;
h2 { margin-bottom: 0; padding-bottom: 0; }
p { margin-left: 1em; }
}
div.summ-opts {
a.opt {
padding: 3px 1em;
display: inline-block;
width: 45%;
&:hover, &:active {
background: var(--color-link-hover-bg);
color: var(--color-link-hover);
text-decoration: none;
}
}
}
div.options table {
margin-left: 1em;
th, td { padding: 0 0.5em; }
th { font-family: monospace; }
td { font-size: 90% }
}
.detail-header { position: relative; a[name] { position: absolute; top: -5em; } }
div.brief { font-weight: bolder; }
div.since { float: right; margin-right: 0.25em; }
div.tags { display: inline-block; float: right; margin: 0.5em; }