Skip to content
Snippets Groups Projects

Draft: Style 2021

Closed Draft: Style 2021
style-2021 into master
Closed smtw requested to merge style-2021 into master
Compare
and
22 files
+ 275
− 2840
Compare changes
  • Side-by-side
  • Inline
Files
22
themes/rc3/css/base.css
+ 271
− 119
@font-face {
font-family: 'orbitronregular';
src: url('../fonts/orbitron-variablefont_wght-webfont.woff2') format('woff2'),
url('../fonts/orbitron-variablefont_wght-webfont.woff') format('woff');
font-weight: normal;
font-family: 'changa-semibold';
src: url('../fonts/Changa-SemiBold.woff2') format('woff2');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'montserratbold';
src: url('../fonts/montserrat-bold-webfont.woff2') format('woff2'),
url('../fonts/montserrat-bold-webfont.woff') format('woff');
font-weight: normal;
font-family: 'space-mono-reg';
src: url('../fonts/SpaceMono-Regular-webfont.woff') format('woff2');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'montserratitalic';
src: url('../fonts/montserrat-italic-webfont.woff2') format('woff2'),
url('../fonts/montserrat-italic-webfont.woff') format('woff');
font-weight: normal;
font-family: 'space-mono-bold';
src: url('../fonts/SpaceMono-Bold-webfont.woff') format('woff2');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'montserratregular';
src: url('../fonts/montserrat-regular-webfont.woff2') format('woff2'),
url('../fonts/montserrat-regular-webfont.woff') format('woff');
font-family: 'space-mono-bold-ital';
src: url('../fonts/SpaceMono-BoldItalic-webfont.woff') format('woff2');
font-weight: 700;
font-style: italic;
}
/* @font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
} */
:root {
--primary-c1: rgba(255, 255, 255, 1);
--primary-c2: rgba(76, 76, 76, 1);
--primary-c3: rgba(0, 0, 0, 1);
--bg-color: rgba(0, 0, 0, 0.2);
--font-space: 0.075em;
--font-lineheight: 1.5;
--font-base: 1rem;
--primary-c1: #f00efa;
--primary-c2: rgba(104, 0, 231, 1);
--primary-c3: #4ce9f8;
@@ -55,7 +68,14 @@
--secondary-c3: rgba(255, 235, 216, 1);
--secondary-c4: rgba(1, 2, 42, 1);
--border-radius: 0;
/* font Vars */
--font-h: 'changa-semibold';
--font-reg: 'space-mono-reg';
--font-bold: 'space-mono-bold';
--font-bold-ital: 'space-mono-bold-ital';
/* --font-icon: 'FontAwesome'; */
}
@@ -64,17 +84,17 @@ html {
/* The nav header is 3.5rem high, plus 20px for the margin-top of the
main container. */
scroll-padding-top: calc(3.5rem + 20px);
background-color: var(--primary-c4);
font-size: 100%;
background-color: var(--primary-c3);
font-size: 16px;
/* csslint ignore:end */
}
body {
font-size: 100%;
line-height: 1.7rem;
font-family: "montserratregular";
background-color: var(--primary-c4);
color: var(--secondary-c3);
font-size: 16px;
line-height: 1.7;
font-family: var(--font-reg);
background-color: var(--primary-c3);
color: var(--primary-c1);
}
/* Replacement for `body { background-attachment: fixed; }`, which has
@@ -92,27 +112,30 @@ body {
z-index: -1;
}
*/
body > .container {
body>.container {
margin-top: 20px;
min-height: 400px;
}
a {
color: var(--secondary-c3);
color: var(--primary-c1);
text-decoration: underline;
}
[role="main"] a {
color: var(--primary-c3 );
color: var(--primary-c1);
/*text-decoration: underline;*/
}
a:hover, a:focus {
color: var(--primary-c3);
a:hover,
a:focus {
color: var(--primary-c1);
text-decoration: underline;
}
.navbar.fixed-top { /* csslint allow: adjoining-classes */
.navbar.fixed-top {
/* csslint allow: adjoining-classes */
/* csslint ignore:start */
position: -webkit-sticky;
position: sticky;
@@ -124,43 +147,80 @@ a:hover, a:focus {
}
video {
width: 100% !important;
height: auto !important;
width: 100% !important;
height: auto !important;
}
.col-md-9 img {
.col-md-8 img {
max-width: 100%;
display: inline-block;
padding: 4px;
line-height: 1.428571429;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
border-radius: var(--border-radius);
margin: 20px auto 30px auto;
}
h1 {
color: #444;
font-weight: 400;
font-size: 42px;
font-family: "orbitronregular";
text-transform: uppercase;
color: var(--primary-c3);
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
color: var(--primary-c1);
font-family: var(--font-reg);
/* font-weight: 700; */
/* letter-spacing: var(--font-space); */
/* text-transform: lowercase; */
}
h1,
.h1 {
font-size: calc(var(--font-base) * 2.5);
}
h2,
.h2 {
font-size: calc(var(--font-base) * 1.2);
}
h3,
.h3 {
font-size: calc(var(--font-base) * 1);
}
h2, h3, h4, h5, h6 {
color: #444;
font-weight: 300;
font-family: "orbitronregular";
text-transform: uppercase;
color: var(--primary-c3);
h4,
.h4 {
font-size: calc(var(--font-base) * 1);
}
h5,
.h5 {
font-size: calc(var(--font-base) * 1);
}
h6,
.h6 {
font-size: calc(var(--font-base) * 1);
}
p, .p {
font-size: var(--font-base);
}
hr {
border-top: 1px solid #aaa;
}
pre, .rst-content tt {
pre,
.rst-content tt {
max-width: 100%;
background: #fff;
border: solid 1px #e1e4e5;
@@ -168,15 +228,16 @@ pre, .rst-content tt {
overflow-x: auto;
}
code.code-large, .rst-content tt.code-large {
font-size: 90%;
code.code-large,
.rst-content tt.code-large {
font-size: 0.9em;
}
code {
padding: 2px 5px;
background: black;
border: solid 1px #8102fd;
color: white;
background: var(--primary-c2);
border: solid 1px var(--primary-c1);
color: var(--primary-c1);
white-space: pre-wrap;
word-wrap: break-word;
}
@@ -187,25 +248,26 @@ pre code {
border: none;
white-space: pre;
word-wrap: normal;
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 12px;
font-family: var(--font-reg);
font-size: 0.9em;
}
kbd {
padding: 2px 4px;
font-size: 90%;
font-size: 0.9em;
color: #fff;
background-color: #333;
border-radius: 3px;
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
border-radius: var(--border-radius);
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
}
a code {
color: #2FA4E7;
}
a:hover code, a:focus code {
a:hover code,
a:focus code {
color: #157AB5;
}
@@ -216,14 +278,14 @@ footer {
font-weight: 200;
}
footer > hr {
footer>hr {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--primary-c1), rgba(0, 0, 0, 0));
/* background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--primary-c1), rgba(0, 0, 0, 0)); */
}
footer a {
color: var(--primary-c3-s1);
color: var(--primary-c1);
text-decoration: none;
}
@@ -237,26 +299,90 @@ footer a:hover {
}
.rc-content-box {
padding: 0 !important;
}
.rc-content-box > * {
margin-left: 15px;
margin-right: 15px;
}
.rc-content-box > h1,
.rc-content-box > h2 {
margin-bottom: 1.5rem;
font-family: var(--font-bold);
font-size: calc(var(--font-base) * 1.2);
}
.rc-content-box > p,
.rc-content-box > ul {
margin-bottom: 1.5rem;
font-family: var(--font-reg);
}
.rc-content-box > h3 {
font-family: var(--font-bold);
}
.rc-content-box > h3,
.rc-content-box > h4 {
margin-left: 3rem;
}
.rc-content-box > h3::before,
.rc-content-box > h4::before {
content: "//";
margin-right: 0.3rem;
display: inline-block;
}
.rc-content-box>h1:first-of-type,
.rc3-block-head {
background-color: var(--primary-c1);
color: var(--primary-c2);
text-decoration: none;
text-transform: lowercase;
font-size: 1.25rem;
font-family: var(--font-h);
width: 100%;
text-align: center !important;
margin: 0;
padding: 0.02rem 0.95rem;
line-height: 1.5;
margin-bottom: 0.9rem;
letter-spacing: var(--font-space);
}
.navbar .navbar-nav .nav-link,
.navbar .navbar-nav .show >.nav-link
, .navbar .navbar-nav .active >.nav-link
, .navbar .navbar-nav .nav-link.show
, .navbar .navbar-nav .nav-link.active {
.navbar .navbar-nav .show>.nav-link,
.navbar .navbar-nav .nav-link.show,
.navbar .navbar-nav .nav-link.active {
color: var(--primary-c1);
}
.navbar .navbar-nav .nav-link:hover
, .navbar .navbar-nav .nav-link:focus {
color: var(--primary-c3-s1);
.navbar .navbar-nav .active>.nav-link,
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus {
color: var(--primary-c1);
text-decoration: underline;
}
.navbar .navbar-nav .nav-link.disabled:hover,
.navbar .navbar-nav .nav-link.disabled:focus {
color: var(--primary-c2);
text-decoration: none;
}
.bg-secondary {
/*background-color: var(--primary-c2-s2) !important;*/
background-color: transparent !important;
background-color: var(--bg-color) !important;
}
.card {
border: 1px solid var(--primary-c3);
border: 1px solid var(--primary-c1);
border-radius: var(--border-radius);
}
.navbar-brand img {
@@ -265,17 +391,20 @@ footer a:hover {
}
#toc-collapse .nav-link:hover {
color: var(--primary-c3);
color: var(--primary-c1);
}
.navbar {
font-family: "orbitronregular";
text-transform: uppercase;
font-family: var(--font-h);
text-transform: lowercase;
border-bottom: 1px solid var(--primary-c1);
font-size: calc(var(--font-base) * 1.1);
letter-spacing: var(--font-space);
}
.bg-primary {
background-color: var(--primary-c4) !important; /*its !important in bootstrap min... sorry for that*/
background-color: var(--primary-c3) !important;
/*its !important in bootstrap min... sorry for that*/
background-image: none;
}
@@ -286,7 +415,8 @@ footer a:hover {
* sections of docs content.
*/
.bs-sidebar.affix { /* csslint allow: adjoining-classes */
.bs-sidebar.affix {
/* csslint allow: adjoining-classes */
/* csslint ignore:start */
position: -webkit-sticky;
position: sticky;
@@ -296,7 +426,8 @@ footer a:hover {
top: calc(3.5rem + 20px);
}
.bs-sidebar.card { /* csslint allow: adjoining-classes */
.bs-sidebar.card {
/* csslint allow: adjoining-classes */
padding: 0;
max-height: 90%;
overflow-y: auto;
@@ -311,7 +442,8 @@ footer a:hover {
transform: scale(1, -1);
}
.bs-sidebar .navbar-toggler.collapsed span { /* csslint allow: adjoining-classes */
.bs-sidebar .navbar-toggler.collapsed span {
/* csslint allow: adjoining-classes */
-moz-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
-o-transform: scale(1, 1);
@@ -320,55 +452,70 @@ footer a:hover {
}
/* First level of nav */
.bs-sidebar > .navbar-collapse > .nav {
padding-top: 10px;
padding-bottom: 10px;
border-radius: 5px;
.bs-sidebar>.navbar-collapse>.nav {
padding-top: 0;
padding-bottom: 0.9rem;
border-radius: var(--border-radius);
width: 100%;
}
/* All levels of nav */
.bs-sidebar .nav > li > a {
.bs-sidebar .nav>li>a {
display: block;
padding: 5px 10px 5px 20px;
z-index: 1;
overflow-wrap: anywhere;
line-height: 1.3em;
line-height: 1.7;
color: var(--primary-c1);
}
.bs-sidebar .nav > li > a:hover,
.bs-sidebar .nav > li > a:focus {
text-decoration: none;
border-right: 2px solid var(--primary-c3);
.bs-sidebar .nav>li>a:hover,
.bs-sidebar .nav>li>a:focus {
text-decoration: underline;
border-right: 2px solid var(--primary-c1);
color: var(--primary-c1);
}
.bs-sidebar .nav > li > a.active,
.bs-sidebar .nav > li > a.active:hover,
.bs-sidebar .nav > li > a.active:focus {
font-weight: bold;
.bs-sidebar .nav>li>a.active,
.bs-sidebar .nav>li>a.active:hover,
.bs-sidebar .nav>li>a.active:focus {
background-color: transparent;
border-right: 2px solid var(--primary-c3);
border-right: 3px solid var(--primary-c1);
color: var(--primary-c1);
}
.bs-sidebar .nav .nav .nav {
margin-left: 1em;
.bs-sidebar .nav li > ul {
padding-left: 2rem;
}
.bs-sidebar .nav > li > a {
font-weight: bold;
.bs-sidebar .nav li > ul a::before{
content: "//";
display: inline-block;
margin-right: 0.3rem;
}
.bs-sidebar .nav .nav > li > a {
font-weight: normal;
.bs-sidebar .nav a {
font-family: var(--font-bold);
}
.bs-sidebar .nav li > ul a, .bs-sidebar .nav li > ul a::before {
font-family: var(--font-reg);
}
.headerlink {
font-family: FontAwesome;
font-size: 14px;
font-family: var(--font-icon);
font-size: calc(var(--font-base) * 1.5);
display: none;
padding-left: .5em;
}
h1:hover .headerlink, h2:hover .headerlink, h3:hover .headerlink, h4:hover .headerlink, h5:hover .headerlink, h6:hover .headerlink{
display:inline-block;
h1:hover .headerlink,
h2:hover .headerlink,
h3:hover .headerlink,
h4:hover .headerlink,
h5:hover .headerlink,
h6:hover .headerlink {
display: inline-block;
}
@@ -377,23 +524,26 @@ h1:hover .headerlink, h2:hover .headerlink, h3:hover .headerlink, h4:hover .head
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
border-radius: var(--border-radius);
text-align: left;
}
.admonition.note { /* csslint allow: adjoining-classes */
.admonition.note {
/* csslint allow: adjoining-classes */
color: #3a87ad;
background-color: #d9edf7;
border-color: #bce8f1;
}
.admonition.warning { /* csslint allow: adjoining-classes */
.admonition.warning {
/* csslint allow: adjoining-classes */
color: #c09853;
background-color: #fcf8e3;
border-color: #fbeed5;
}
.admonition.danger { /* csslint allow: adjoining-classes */
.admonition.danger {
/* csslint allow: adjoining-classes */
color: #b94a48;
background-color: #f2dede;
border-color: #eed3d7;
@@ -405,24 +555,26 @@ h1:hover .headerlink, h2:hover .headerlink, h3:hover .headerlink, h4:hover .head
}
@media (max-width: 991.98px) {
.navbar-collapse.show { /* csslint allow: adjoining-classes */
.navbar-collapse.show {
/* csslint allow: adjoining-classes */
overflow-y: auto;
max-height: calc(100vh - 3.5rem);
}
}
.dropdown-item.open { /* csslint allow: adjoining-classes */
.dropdown-item.open {
/* csslint allow: adjoining-classes */
color: #fff;
background-color: #2FA4E7;
}
.dropdown-submenu > .dropdown-menu {
.dropdown-submenu>.dropdown-menu {
margin: 0 0 0 1.5rem;
padding: 0;
border-width: 0;
}
.dropdown-submenu > a::after {
.dropdown-submenu>a::after {
display: block;
content: " ";
float: right;
@@ -436,12 +588,11 @@ h1:hover .headerlink, h2:hover .headerlink, h3:hover .headerlink, h4:hover .head
margin-right: -10px;
}
.dropdown-submenu:hover > a::after {
border-left-color: #fff;
.dropdown-submenu:hover>a::after {
border-left-color: var(--primary-c1);
}
@media (min-width: 992px) {
.dropdown-menu {
overflow-y: auto;
@@ -452,7 +603,7 @@ h1:hover .headerlink, h2:hover .headerlink, h3:hover .headerlink, h4:hover .head
position: relative;
}
.dropdown-submenu > .dropdown-menu {
.dropdown-submenu>.dropdown-menu {
/* csslint ignore:start */
position: fixed !important;
/* csslint ignore:end */
@@ -462,13 +613,14 @@ h1:hover .headerlink, h2:hover .headerlink, h3:hover .headerlink, h4:hover .head
padding: 0.5rem 0;
}
.dropdown-submenu.pull-left { /* csslint allow: adjoining-classes */
.dropdown-submenu.pull-left {
/* csslint allow: adjoining-classes */
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu { /* csslint allow: adjoining-classes */
.dropdown-submenu.pull-left>.dropdown-menu {
/* csslint allow: adjoining-classes */
left: -100%;
margin-left: 10px;
}
}
}
\ No newline at end of file

Impressum - Datenschutzerklärung