Skip to content
Snippets Groups Projects

update style.css

Merged update style.css
5915-update-docs into master
Merged Hahn Axel (hahn) requested to merge 5915-update-docs into master
Compare
and
1 file
+ 212
− 121
Compare changes
  • Side-by-side
  • Inline
docs/style.css
+ 212
− 121
/*
/*
override css elements of daux.io blue theme
patch css elements of daux.io blue theme
version 2022-11-30
version 2022-05-13
*/
*/
:root {
/* Axels Overrides */
/* ---------- vars ---------- */
--color-text: #222;
--link-color: #822;
:root{
--brand-color: var(--color-secondary);
--brand-background: var(--body-background);
/* background colors */
--hr-color: none;
--bg:none;
--search-field-background: none;
--bg-body: #fff;
--search-field-border-color: none;
--bg-navlinkactive:#f4f4f4;
--sidebar-background: var(--body-background);
--bg-navlinkactive: linear-gradient(-90deg,rgba(0,0,0,0), rgba(40,60,80,0.05) 30%);
--sidebar-border-color: none;
--bg-pre:#f8f8f8;
--sidebar-link-active-background: #e8f4f6;
--bg-toc: #fff;
--sidebar-link-active-background: #eee;
/* Axels custom values */
/* foreground colors */
--axel_bg-toc: var(--body-background);
--color: #234;
--axel_bg-toc-head: #f8f8f8;
--navlinkactive:#f33;
--axel_brand-background: none;
--title: #aaa;
--axel_brand-pre-background: rgb(255, 0, 51);
;
--link:#12a;
--axel_brand-pre-background-hover: rgb(255, 0, 51);
--toclink:rgba(40,60,80,0.8);
;
--axel_h1_header: none;
--h1: rgba(40,60,80,0.8);
--axel_h1: #345;
--h1-bottom: 1px solid rgba(40,60,80,0.1);
--axel_h1-bg: none;
--h2: #468;
--axel_h1-bottom: 3px solid none;
--h3: #579;
--axel_h2: #156;
--axel_h2-bg: #f8fafb;
 
--axel_h2-bottom: 2px solid #467;
 
--axel_h2-hero-bottom: 2px solid #912;
 
--axel_h3: #278;
 
--axel_h3-bottom: 1px solid #ddd;
 
--axel_hero_bg: #f8f8f8;
 
--axel_nav-bg: #fcfcfc;
 
--axel_nav-buttomborder: #ddd;
 
--axel_pre-background: #f8f8f8;
 
--axel-th-background: #d0e0e8;
 
--axel-article-nav-border-top: 0px dotted #ddd;
}
}
/* ---------- tags ---------- */
.dark {
 
/* Axels Overrides */
 
--color-text: #c0c0c0;
 
--link-color: #b44;
 
--brand-color: var(--color-text);
 
--brand-background: var(--body-background);
 
--hr-color: none;
 
--code-tag-background-color_: #bcc;
 
--search-field-background: none;
 
--search-field-border-color: none;
 
--sidebar-background: var(--body-background);
 
--sidebar-border-color: none;
 
--sidebar-link-active-background: #333;
 
/* Axels custom values */
 
--axel_bg-toc: var(--body-background);
 
--axel_bg-toc-head: #333;
 
--axel_brand-background: none;
 
--axel_brand-pre-background: rgb(255, 0, 51);
 
;
 
--axel_brand-pre-background-hover: rgb(255, 0, 51);
 
;
 
--axel_h1_header: none;
 
--axel_h1: #777;
 
--axel_h1-bg: none;
 
--axel_h1-bottom: none;
 
--axel_h2: #467;
 
--axel_h2-bg: #202020;
 
--axel_h2-bottom: 2px solid #256;
 
--axel_h2-hero-bottom: 2px solid #712;
 
--axel_h3: #589;
 
--axel_h3-bottom: 1px solid #333;
 
--axel_hero_bg: #242424;
 
--axel_nav-bg: #242424;
 
--axel_nav-buttomborder: #555;
 
--axel_pre-background: #bcc;
 
--axel-th-background: #203038;
 
--axel-article-nav-border-top: 0px dotted #234;
 
}
 
/* ---------- left side ---------- */
a.Brand::before {
a.Brand::before {
background: rgb(255,0,51);
background: var(--axel_brand-pre-background);
color: #fff;
color: #fff;
font-family: arial;
font-family: arial;
font-weight: bold;
font-weight: bold;
padding: 0.5em 0.3em;
padding: 0.5em 0.3em;
content: 'IML';
content: 'IML';
margin-right: 0.4em;
margin-right: 0.4em;
 
float: left;
}
}
body, *{color: var(--color);}
a.Brand:hover::before {
body{background: var(--bg-body);}
background: var(--axel_brand-pre-background-hover);
a{color: var(--link);}
a:hover{opacity: 0.7;}
h1>a{ color:var(--title);}
_h1:nth-child(1){position: fixed; background: var(--bg); box-shadow: 0 0 1em #ccc; padding: 0 1em}
h1:nth-child(1)>a{ color:var(--navlinkactive); }
.s-content h1{color: var(--h1); font-size: 200%; font-weight:bold; margin-top: 2em; border-bottom: var(--h1-bottom);}
.s-content h2{color: var(--h2); font-size: 160%; }
.s-content h3{color: var(--h3); font-size: 140%; }
.s-content h4{margin: 0; font-size: 100%; text-align: center; background-color: rgba(0,0,0,0.05);padding: 0.3em;}
.s-content pre{
background: var(--bg-pre);
}
}
/* ---------- classes ---------- */
a.Brand {
background: var(--axel_brand-background);
.required{color:#a42;}
font-size: 200%;
.optional{color:#888;}
height: 4em;
 
}
 
/* ---------- page header: breadcrumb ---------- */
 
.Page__header {
 
border: none;
 
}
/* ----- top left */
.Page__header a {
.Brand,
color: var(--axel_h1_header);
.Columns__left {
background: var(--bg);
border-right: 0px solid #e7e7e9;
color: var(--color);
}
}
.Brand{font-size: 200%;
background_: linear-gradient(-10deg,#fff 50%, #ddd);
.Page__header h1 {
background: var(--bg);
font-size: 1.3em;
}
}
.Columns__right__content {
background: var(--bg);
/* ---------- page content ---------- */
 
.s-content {
 
padding-top: 1em;
}
}
/* ----- Navi left */
.s-content h1 {
 
background: var(--axel_h1-bg);
 
color: var(--axel_h1);
 
font-size: 200%;
 
font-weight: bold;
 
margin-bottom: 2em;
 
margin-top: 2em;
 
border-bottom: var(--axel_h1-bottom);
 
}
.Nav a:hover{
.s-content h2 {
background: none;
background: var(--axel_h2-bg);
color: var(--navlinkactive) !important;
color: var(--axel_h2);
 
font-size: 180%;
 
font-weight: bold;
 
margin-top: 4em;
 
border-bottom: var(--axel_h2-bottom);
}
}
.Nav__item--active {
h1:first-of-type {
border-right_: 0.3em solid var(--navlinkactive);
margin-top: 0em;
}
}
.Nav__item--active > a{
background: var(--bg-navlinkactive);
h2:first-of-type {
color: var(--navlinkactive);
margin-top: 0em;
}
}
.Nav .Nav .Nav__item--active a {
color: var(--navlinkactive);
.s-content h3 {
 
background: var(--axel_h3-bg);
 
color: var(--axel_h3);
 
font-size: 150%;
 
font-weight: bold;
 
margin-top: 3em;
 
border-bottom: var(--axel_h3-bottom);
}
}
.Nav .Nav .Nav__item a {
opacity: 1;
.s-content h4 {
 
margin: 0;
 
font-size: 100%;
 
text-align: center;
 
background-color: rgba(0, 0, 0, 0.05);
 
padding: 0.3em;
}
}
.Nav__item--open > a {
background-color: var(--bg);
.s-content pre {
 
background: var(--axel_pre-background);
}
}
.Nav a[href*="__Welcome"]{
/* FIX smaller fnt size in tables */
background: url("/icons/house.png") no-repeat 10px 4px ;
.s-content table {
padding-left: 40px;
font-size: 1em;
}
}
.Nav a[href*="__How_does_it_work"]{
background: url("/icons/light-bulb.png") no-repeat 10px 4px ;
.s-content table th {
padding-left: 40px;
background: var(--axel-th-background);
}
}
 
.s-content h3 code {
 
border: none;
 
background: none;
 
}
 
article nav {
 
border-top: var(--axel-article-nav-border-top);
 
margin: 8em 0 5em;
 
}
 
.Pager li>a {
 
padding: 1em 2em;
 
}
/* ---------- classes ---------- */
/* ---------- classes ---------- */
 
.required {
 
color: #a42;
 
}
/* FIX smaller fnt size in tables */
.optional {
.s-content table {
color: #888;
font-size: 1em;
}
 
 
div.hero {
 
background: var(--axel_hero_bg);
 
border-radius: 2em;
 
padding: 5em 2em;
 
text-align: center;
 
margin-bottom: 1.5em;
}
}
 
div.hero h2 {
 
color: var(--color-text);
 
background: none;
 
border-bottom: var(--axel_h2-hero-bottom);
 
font-size: 300%;
 
margin: 0 0 2em;
 
}
/* TOC */
/* ---------- TOC ---------- */
@media(min-width:1700px){
@media(min-width:1700px) {
.TableOfContentsContainer{
.TableOfContentsContainer {
position: fixed;
position: fixed;
right: 2em;
right: 2em;
top: 1em;
top: 1em;
}
}
}
}
.TableOfContentsContainer{
.TableOfContentsContainer {
border-top-left-radius: 1em;
background-color: var(--axel_bg-toc);
background-color: var(--bg-toc);
padding: 0.5em;
border-left: 2px solid rgba(0,0,0,0.05);
padding: 0em;
}
}
.TableOfContentsContainer__content {
border: none;
.s-content .TableOfContentsContainer h4 {
font-size: 0.5em;
background-color: var(--axel_bg-toc-head);
 
border-top-left-radius: 1em;
 
font-size: 1.1em;
 
margin: 0;
 
padding: 0;
 
}
 
.TableOfContentsContainer__content {
 
border-width: 1px;
 
font-size: 0.5em;
}
}
ul.TableOfContents ul{
list-style-type: none;
ul.TableOfContents ul {
 
list-style-type: none;
padding-left: 1em;
padding-left: 1em;
}
}
.TableOfContentsContainer a{ color:var(--toclink);}
.TableOfContentsContainer__content > .TableOfContents > li + li {
/* ----- Icons on links --- */
border-top: none;
}
.TableOfContentsContainer__content > .TableOfContents > li {
border-bottom: 1px dashed #ddd;
}
/* pager - prev .. next */
.EditOn a::before{
.s-content{
content: '✏️ ';
margin-bottom: 6em;
}
}
.Pager{
border-top: 1px dashed #aaa; margin: 0; padding: 1em;
.Links a[href^="https://github.com/"]::before {
 
content: '🌐 ';
}
}
.Pager a{
color:var(--navlinkactive);
.Links a[href^="https://git-repo.iml.unibe.ch/"]::before {
 
content: '🌐 ';
}
}
 
 
.Links a[href^="https://os-docs.iml.unibe.ch"]::before {
 
content: '📗 ';
 
}
 
\ No newline at end of file