YunoHost/doc
1
0
Fork 0
mirror of https://github.com/YunoHost/doc.git synced 2024-09-03 20:06:26 +02:00
Code Issues Projects Releases Packages Wiki Activity
doc/themes/learn2-git-sync/css/styles/navy_sunrise.css
tituspijean 7b447ac5ae Grav-ification 
Creating the pages hierarchy for transitioning to Grav
2020-11-10 17:34:30 +01:00

1189 lines
No EOL
28 KiB
CSS
Raw Blame History

@charset "UTF-8";
@import url(//fonts.googleapis.com/css?family=Montserrat:400|Muli:300,400|Inconsolata);
#top-github-link, #body #breadcrumbs {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%); }
.button, .button-secondary {
display: inline-block;
padding: 7px 12px; }
.button:active, .button-secondary:active {
margin: 2px 0 -2px 0; }
/*
The Ultimate Hover Color Function
@author Gray Gilmore - http://code.graygilmore.com
The goal of this Sass function is provide a hover color that works
with any color on any background. No longer do we need to bundle
hover color options with our themes, let Sassy McSasserson take care
of that for you.
The hover color, seen in this demo as "After" text, must be visible in
all situations and, hopefully, pass the WCAG 2.0 contrast ratio [1]
formula (4.5:1).
[1] http://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast
contrast-ratio() help from @davidkaneda
## Usage ##
a {
color: $link-color;
&:hover {
color: hover($background-color, $link-color);
}
}
button {
background: $button-background;
color: $button-color;
&:hover {
background: hover($background-color, $button-background);
}
}
## End Usage ##
*/
/**
* Calculate the luminance for a color.
* See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
*/
/**
* Calculate the contrast ratio between two colors.
* See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
*/
/**
* Determine whether to use dark or light text on top of given color.
* Returns black for dark text and white for light text.
*/
/*
WCAG color contrast formula
https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G18#G18-procedure
@see https://codepen.io/giana/project/full/ZWbGzD
This pen uses the non-standard Sass pow() function
https://css-tricks.com/snippets/sass/power-function/
Using it outside of CodePen requires you provide your own pow() function with support for decimals
To generate random colors, we're also using a two-variable random() function includded with compass.
*/
.ratio::after {
content: "21"; }
.balance::after {
content: "49"; }
.color-block .color1 {
background: #058569;
color: #fff; }
.color-block .color1::after {
content: "#058569"; }
.color-block .color2 {
background: #6b99a0;
color: #fff; }
.color-block .color2::after {
content: "#6b99a0"; }
.fix-color .color:nth-child(2) {
background: #000;
color: #fff; }
.fix-color .color:nth-child(2)::after {
content: "#000"; }
.fix-color .color:nth-child(3) {
background: #fff;
color: #000; }
.fix-color .color:nth-child(3)::after {
content: "#fff"; }
.fix-contrast .color:nth-child(2) {
background: #000;
color: #fff; }
.fix-contrast .color:nth-child(2)::after {
content: "#000"; }
.fix-contrast .color:nth-child(3) {
background: #fff;
color: #000; }
.fix-contrast .color:nth-child(3)::after {
content: "#fff"; }
.best-contrast .color:nth-child(2) {
background: #89e1c7;
color: #000; }
.best-contrast .color:nth-child(2)::after {
content: "#89e1c7"; }
.best-contrast .color:nth-child(3) {
background: #e1ffff;
color: #000; }
.best-contrast .color:nth-child(3)::after {
content: "#e1ffff"; }
.scale-luminance .color:nth-child(2) {
background: #08a585;
color: #fff; }
.scale-luminance .color:nth-child(2)::after {
content: "#08a585"; }
.check-contrast .result::after {
content: "false"; }
.luminance .result::after {
content: "0.17824, 0.28507"; }
body #sidebar ul li.active > a {
color: #333333 !important; }
body {
background: #F4F4F4;
color: #333333;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
a {
color: black; }
a:link, a:visited {
color: black; }
a:hover, a:active {
color: black; }
#body-inner a {
text-decoration: underline;
text-decoration-style: dotted; }
#body-inner a:hover {
text-decoration-style: solid; }
pre {
position: relative; }
.bg {
background: #fff;
border: 1px solid #eaeaea; }
b,
strong,
label,
th {
font-weight: 600; }
.default-animation, #header #logo-svg, #header #logo-svg path, #sidebar, #sidebar ul, #body, #body .padding, #body .nav {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease; }
fieldset {
border: 1px solid #ddd; }
textarea, input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"], select[multiple=multiple] {
background-color: white;
border: 1px solid #ddd;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06); }
textarea:hover, input[type="email"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="text"]:hover, input[type="url"]:hover, input[type="color"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="month"]:hover, input[type="time"]:hover, input[type="week"]:hover, select[multiple=multiple]:hover {
border-color: #c4c4c4; }
textarea:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, select[multiple=multiple]:focus {
border-color: #1694CA;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 5px rgba(19, 131, 179, 0.7); }
#header {
background: #EAC67A;
color: #fbf4e4;
text-align: center;
padding: 1rem; }
#header a {
display: inline-block; }
#header #logo-svg {
width: 8rem;
height: 2rem; }
#header #logo-svg path {
fill: #fff; }
.searchbox {
margin-top: 0.5rem;
position: relative;
border: 1px solid #e7bd64;
background: #edcf90;
border-radius: 4px; }
.searchbox label {
color: rgba(255, 255, 255, 0.8);
position: absolute;
left: 10px;
top: 3px; }
.searchbox span {
color: rgba(255, 255, 255, 0.6);
position: absolute;
right: 10px;
top: 3px;
cursor: pointer; }
.searchbox span:hover {
color: rgba(255, 255, 255, 0.9); }
.searchbox input {
display: inline-block;
color: #fbf5e9;
width: 100%;
height: 30px;
background: transparent;
border: 0;
padding: 0 25px 0 30px;
margin: 0;
font-weight: 400; }
.searchbox input::-webkit-input-placeholder {
color: #faf2e0; }
.searchbox input::-moz-placeholder {
color: #faf2e0; }
.searchbox input:-moz-placeholder {
color: #faf2e0; }
.searchbox input:-ms-input-placeholder {
color: #faf2e0; }
#sidebar-toggle {
display: none; }
@media only all and (max-width: 47.938em) {
#sidebar-toggle {
display: inline-block; } }
#sidebar {
background-color: #984B43;
position: fixed;
top: 0;
width: 300px;
bottom: 0;
left: 0;
font-weight: 500;
font-size: 15px;
border-right: 1px solid #b1574e; }
#sidebar a,
#sidebar i {
color: white; }
#sidebar a:hover,
#sidebar i:hover {
color: #f3ebe9; }
#sidebar a.subtitle,
#sidebar i.subtitle {
color: rgba(255, 255, 255, 0.6); }
#sidebar hr {
border-bottom: 1px solid #8d463e; }
#sidebar a.padding {
padding: 0 1rem; }
#sidebar h5 {
margin: 2rem 0 0;
position: relative;
line-height: 2; }
#sidebar h5 a {
display: block;
margin-left: 0;
margin-right: 0;
padding-left: 1rem;
padding-right: 1rem; }
#sidebar h5 i {
color: rgba(255, 255, 255, 0.6);
position: absolute;
right: 0.6rem;
top: 0.7rem;
font-size: 80%; }
#sidebar h5.parent a {
background: #7f3f38;
color: white !important; }
#sidebar h5.active a {
background: #fff;
color: #333333 !important; }
#sidebar h5.active i {
color: #333333 !important; }
#sidebar h5 + ul.topics {
display: none;
margin-top: 0; }
#sidebar h5.parent + ul.topics,
#sidebar h5.active + ul.topics {
display: block; }
#sidebar ul {
list-style: none;
padding: 0;
margin: 0; }
#sidebar ul.searched a {
color: white; }
#sidebar ul.searched .search-match a {
color: white; }
#sidebar ul.searched .search-match a:hover {
color: white; }
#sidebar ul.topics {
margin: 0 1rem; }
#sidebar ul.topics.searched ul {
display: block; }
#sidebar ul.topics ul {
display: none;
padding-bottom: 1rem; }
#sidebar ul.topics ul ul {
padding-bottom: 0; }
#sidebar ul.topics li.parent ul,
#sidebar ul.topics > li.active ul {
display: block; }
#sidebar ul.topics > li > a {
line-height: 2rem;
font-size: 1.1rem; }
#sidebar ul.topics > li > a b {
color: white;
font-weight: normal; }
#sidebar ul.topics > li > a .fa {
margin-top: 9px; }
#sidebar ul.topics > li.parent, #sidebar ul.topics > li.active {
background: #86423b;
margin-left: -1rem;
margin-right: -1rem;
padding-left: 1rem;
padding-right: 1rem; }
#sidebar ul.topics > li.parent > a b, #sidebar ul.topics > li.active > a b {
color: white; }
#sidebar ul li.active > a {
background: #fff;
color: #333333 !important;
margin-left: -1rem;
margin-right: -1rem;
padding-left: 1rem;
padding-right: 1rem; }
#sidebar ul li.active > a b {
color: #333333 !important; }
#sidebar ul li {
padding: 0; }
#sidebar ul li.visited + span {
margin-right: 16px; }
#sidebar ul li a {
display: block;
padding: 2px 0; }
#sidebar ul li a span {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: block; }
#sidebar ul li > a {
padding: 4px 0; }
#sidebar ul li .fa {
display: none;
float: right;
font-size: 13px;
min-width: 16px;
margin: 4px 0 0 0;
text-align: right; }
#sidebar ul li.visited > a .read-icon {
display: inline;
color: white; }
#sidebar ul li.visited > a .read-icon:hover {
color: #f3ebe9; }
#sidebar ul li.active > a .read-icon, #sidebar ul li.active.visited > a .read-icon {
display: inline;
color: #333333; }
#sidebar ul li.active > a .read-icon:hover, #sidebar ul li.active.visited > a .read-icon:hover {
color: black; }
#sidebar ul li li {
padding-left: 1rem;
text-indent: 0.2rem; }
#body #navigation .nav .fa {
color: #1c0e0c; }
#body #navigation .nav .fa:active, #body #navigation .nav .fa:focus, #body #navigation .nav .fa:hover, #body #navigation .nav .fa:visited {
color: #512824; }
#main {
background: #f7f7f7;
margin: 0 0 1.563rem 0; }
#body {
position: relative;
margin-left: 300px;
min-height: 100%; }
#body img,
#body .video-container {
margin: 3rem auto;
display: block;
text-align: center; }
#body img.border,
#body .video-container.border {
border: 2px solid #e6e6e6 !important;
padding: 2px; }
#body img.shadow,
#body .video-container.shadow {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); }
#body .bordered {
border: 1px solid #ccc; }
#body .padding {
padding: 3rem 6rem; }
@media only all and (max-width: 59.938em) {
#body .padding {
position: static;
padding: 15px 3rem; } }
@media only all and (max-width: 47.938em) {
#body .padding {
padding: 5px 1rem; } }
#body h1 + hr {
margin-top: -1.7rem;
margin-bottom: 3rem; }
@media only all and (max-width: 59.938em) {
#body #navigation {
position: static;
margin-right: 0 !important;
width: 100%;
display: table; } }
#body .nav {
position: fixed;
top: 0;
bottom: 0;
width: 4rem;
font-size: 0;
height: 100%;
cursor: pointer;
display: table;
text-align: center; }
#body .nav > i {
display: table-cell;
vertical-align: middle;
text-align: center; }
@media only all and (max-width: 59.938em) {
#body .nav {
display: table-cell;
position: static;
top: auto;
width: 50%;
text-align: center;
height: 100px;
line-height: 100px;
padding-top: 0; }
#body .nav > i {
display: inline-block; } }
#body .nav i {
font-size: 50px; }
#body .nav:hover {
background: #dbdbdb; }
#body .nav.nav-pref {
left: 0; }
#body .nav.nav-next {
right: 0; }
#body-inner {
margin-bottom: 5rem; }
#chapter {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 2rem 0; }
#chapter #body-inner {
padding-bottom: 3rem;
max-width: 80%; }
#chapter h3 {
font-family: "Muli", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
font-weight: 400;
text-align: center; }
#chapter h1 {
font-size: 5rem;
border-bottom: 4px solid #F0F2F4; }
#chapter p {
text-align: center;
font-size: 1.2rem; }
#footer {
padding: 3rem 1rem;
color: #e6e6e6;
font-size: 13px; }
#footer p {
margin: 0; }
body {
font-family: "Muli", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
letter-spacing: -0.03rem;
font-weight: 400;
font-size: 1.05rem;
line-height: 1.7; }
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Montserrat", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
font-weight: 400;
text-rendering: optimizeLegibility;
line-height: 150%;
letter-spacing: -0px;
overflow-wrap: break-word;
overflow: visible;
word-break: break-word;
white-space: normal;
margin: 0.425rem 0 0.85rem 0; }
h1 {
text-align: center;
letter-spacing: -3px;
font-size: 2.55rem; }
h2 {
letter-spacing: -2px;
font-size: 2.15rem; }
h3 {
letter-spacing: -1px;
font-size: 1.8rem; }
h4 {
font-size: 1.4rem; }
h5 {
font-size: 0.9rem; }
h6 {
font-size: 0.7rem; }
p {
margin: 1.7rem 0; }
ul,
ol {
margin-top: 1.7rem;
margin-bottom: 1.7rem; }
ul ul,
ul ol,
ol ul,
ol ol {
margin-top: 0;
margin-bottom: 0; }
blockquote {
border-left: 10px solid #F0F2F4;
margin: 1.7rem 0;
padding-left: 0.85rem; }
blockquote p {
font-size: 1.1rem;
color: #666666; }
blockquote cite {
display: block;
text-align: right;
color: #333333;
font-size: 0.925rem; }
blockquote cite:before {
content: "\2014 \0020"; }
pre {
margin: 1.7rem 0;
padding: 0.938rem; }
code {
vertical-align: bottom; }
small {
font-size: 0.925rem; }
hr {
border-left: none;
border-right: none;
border-top: none;
margin: 1.7rem 0; }
blockquote {
position: relative; }
blockquote blockquote {
position: static; }
blockquote > blockquote > blockquote {
margin: 0; }
blockquote > blockquote > blockquote p {
padding: 15px;
display: block;
font-size: 1rem;
margin-top: 0rem;
margin-bottom: 0rem;
color: #666; }
blockquote > blockquote > blockquote p:first-child:before {
position: absolute;
top: 2px;
color: #fff;
font-family: FontAwesome;
content: '';
left: 10px; }
blockquote > blockquote > blockquote p:first-child:after {
position: absolute;
top: 2px;
color: #fff;
left: 2rem;
font-weight: bold;
content: 'Info'; }
blockquote > blockquote > blockquote > p {
margin-left: -71px;
border-top: 30px solid #F0B37E;
background: #FFF2DB; }
blockquote > blockquote > blockquote > blockquote > p {
margin-left: -94px;
border-top: 30px solid rgba(217, 83, 79, 0.8);
background: #FAE2E2; }
blockquote > blockquote > blockquote > blockquote > p:first-child:after {
content: 'Warning'; }
blockquote > blockquote > blockquote > blockquote > blockquote > p {
margin-left: -118px;
border-top: 30px solid #6AB0DE;
background: #E7F2FA; }
blockquote > blockquote > blockquote > blockquote > blockquote > p:first-child:after {
content: 'Note'; }
blockquote > blockquote > blockquote > blockquote > blockquote > blockquote > p {
margin-left: -142px;
border-top: 30px solid rgba(92, 184, 92, 0.8);
background: #E6F9E6; }
blockquote > blockquote > blockquote > blockquote > blockquote > blockquote > p:first-child:after {
content: 'Tip'; }
code,
kbd,
pre,
samp {
font-family: "Inconsolata", monospace; }
code {
background: #f9f2f4;
color: #9c1d3d;
padding: .2rem .4rem;
border-radius: 3px; }
pre {
padding: 1rem;
margin: 2rem 0;
background: #f6f6f6;
border: 1px solid #ddd;
border-radius: 2px;
line-height: 1.15;
font-size: 1rem; }
pre code {
color: #237794;
background: inherit;
font-size: 1rem; }
hr {
border-bottom: 4px solid #F0F2F4; }
.page-title {
margin-top: -25px;
padding: 25px;
float: left;
clear: both;
background: #233237;
color: #fff; }
#body a.anchor-link {
color: #ccc; }
#body a.anchor-link:hover {
color: #233237; }
.scrollbar-inner > .scroll-element .scroll-element_track {
background-color: rgba(255, 255, 255, 0.3); }
.scrollbar-inner > .scroll-element .scroll-bar {
background-color: #b5d1eb; }
.scrollbar-inner > .scroll-element:hover .scroll-bar {
background-color: #ccc; }
.scrollbar-inner > .scroll-element.scroll-draggable .scroll-bar {
background-color: #ccc; }
table {
border: 1px solid #eaeaea;
table-layout: auto; }
th {
background: #f7f7f7;
padding: 0.5rem; }
td {
padding: 0.5rem;
border: 1px solid #eaeaea; }
.button {
background: #233237 !important;
color: white !important;
box-shadow: 0 3px 0 #172124 !important; }
.button:hover {
background: #172124 !important;
box-shadow: 0 3px 0 #0b1012 !important;
color: white !important; }
.button:active {
box-shadow: 0 1px 0 #0b1012 !important; }
.button i {
color: white !important; }
.button-secondary {
background: #050808 !important;
color: white !important;
box-shadow: 0 3px 0 black !important; }
.button-secondary:hover {
background: black !important;
box-shadow: 0 3px 0 black !important;
color: white !important; }
.button-secondary:active {
box-shadow: 0 1px 0 black !important; }
.button-secondary i {
color: white !important; }
.bullets {
margin: 1.7rem 0;
margin-left: -0.85rem;
margin-right: -0.85rem;
overflow: auto; }
.bullet {
float: left;
padding: 0 0.85rem; }
.two-column-bullet {
width: 50%; }
@media only all and (max-width: 47.938em) {
.two-column-bullet {
width: 100%; } }
.three-column-bullet {
width: 33.33333%; }
@media only all and (max-width: 47.938em) {
.three-column-bullet {
width: 100%; } }
.four-column-bullet {
width: 25%; }
@media only all and (max-width: 47.938em) {
.four-column-bullet {
width: 100%; } }
.bullet-icon {
float: left;
background: #1694CA;
padding: 0.875rem;
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
color: #fff;
font-size: 1.75rem;
text-align: center; }
.bullet-icon-1 {
background: #1694CA; }
.bullet-icon-2 {
background: #16cac4; }
.bullet-icon-3 {
background: #b2ca16; }
.bullet-content {
margin-left: 4.55rem; }
.tooltipped {
position: relative; }
.tooltipped:after {
position: absolute;
z-index: 1000000;
display: none;
padding: 5px 8px;
font: normal normal 11px/1.5 "Muli", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
color: #fff;
text-align: center;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-wrap: break-word;
white-space: pre;
pointer-events: none;
content: attr(aria-label);
background: rgba(0, 0, 0, 0.8);
border-radius: 3px;
-webkit-font-smoothing: subpixel-antialiased; }
.tooltipped:before {
position: absolute;
z-index: 1000001;
display: none;
width: 0;
height: 0;
color: rgba(0, 0, 0, 0.8);
pointer-events: none;
content: "";
border: 5px solid transparent; }
.tooltipped:hover:before, .tooltipped:hover:after,
.tooltipped:active:before,
.tooltipped:active:after,
.tooltipped:focus:before,
.tooltipped:focus:after {
display: inline-block;
text-decoration: none; }
.tooltipped-s:after,
.tooltipped-se:after,
.tooltipped-sw:after {
top: 100%;
right: 50%;
margin-top: 5px; }
.tooltipped-s:before,
.tooltipped-se:before,
.tooltipped-sw:before {
top: auto;
right: 50%;
bottom: -5px;
margin-right: -5px;
border-bottom-color: rgba(0, 0, 0, 0.8); }
.tooltipped-se:after {
right: auto;
left: 50%;
margin-left: -15px; }
.tooltipped-sw:after {
margin-right: -15px; }
.tooltipped-n:after,
.tooltipped-ne:after,
.tooltipped-nw:after {
right: 50%;
bottom: 100%;
margin-bottom: 5px; }
.tooltipped-n:before,
.tooltipped-ne:before,
.tooltipped-nw:before {
top: -5px;
right: 50%;
bottom: auto;
margin-right: -5px;
border-top-color: rgba(0, 0, 0, 0.8); }
.tooltipped-ne:after {
right: auto;
left: 50%;
margin-left: -15px; }
.tooltipped-nw:after {
margin-right: -15px; }
.tooltipped-s:after,
.tooltipped-n:after {
transform: translateX(50%); }
.tooltipped-w:after {
right: 100%;
bottom: 50%;
margin-right: 5px;
transform: translateY(50%); }
.tooltipped-w:before {
top: 50%;
bottom: 50%;
left: -5px;
margin-top: -5px;
border-left-color: rgba(0, 0, 0, 0.8); }
.tooltipped-e:after {
bottom: 50%;
left: 100%;
margin-left: 5px;
transform: translateY(50%); }
.tooltipped-e:before {
top: 50%;
right: -5px;
bottom: 50%;
margin-top: -5px;
border-right-color: rgba(0, 0, 0, 0.8); }
/*************** SCROLLBAR BASE CSS ***************/
.highlightable {
padding: 25px 0 15px; }
.scroll-wrapper {
overflow: hidden !important;
padding: 0 !important;
position: relative; }
.scroll-wrapper > .scroll-content {
border: none !important;
box-sizing: content-box !important;
height: auto;
left: 0;
margin: 0;
max-height: none;
max-width: none !important;
overflow: scroll !important;
padding: 0;
position: relative !important;
top: 0;
width: auto !important; }
.scroll-wrapper > .scroll-content::-webkit-scrollbar {
height: 0;
width: 0; }
.scroll-element {
display: none; }
.scroll-element, .scroll-element div {
box-sizing: content-box; }
.scroll-element.scroll-x.scroll-scrollx_visible,
.scroll-element.scroll-y.scroll-scrolly_visible {
display: block; }
.scroll-element .scroll-bar,
.scroll-element .scroll-arrow {
cursor: default; }
.scroll-textarea > .scroll-content {
overflow: hidden !important; }
.scroll-textarea > .scroll-content > textarea {
border: none !important;
box-sizing: border-box;
height: 100% !important;
margin: 0;
max-height: none !important;
max-width: none !important;
overflow: scroll !important;
outline: none;
padding: 2px;
position: relative !important;
top: 0;
width: 100% !important; }
.scroll-textarea > .scroll-content > textarea::-webkit-scrollbar {
height: 0;
width: 0; }
/*************** SIMPLE INNER SCROLLBAR ***************/
.scrollbar-inner > .scroll-element,
.scrollbar-inner > .scroll-element div {
border: none;
margin: 0;
padding: 0;
position: absolute;
z-index: 10; }
.scrollbar-inner > .scroll-element div {
display: block;
height: 100%;
left: 0;
top: 0;
width: 100%; }
.scrollbar-inner > .scroll-element.scroll-x {
bottom: 2px;
height: 8px;
left: 0;
width: 100%; }
.scrollbar-inner > .scroll-element.scroll-y {
height: 100%;
right: 2px;
top: 0;
width: 8px; }
.scrollbar-inner > .scroll-element .scroll-element_outer {
overflow: hidden; }
.scrollbar-inner > .scroll-element .scroll-element_outer,
.scrollbar-inner > .scroll-element .scroll-element_track,
.scrollbar-inner > .scroll-element .scroll-bar {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px; }
.scrollbar-inner > .scroll-element .scroll-element_track,
.scrollbar-inner > .scroll-element .scroll-bar {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3; }
/* update scrollbar offset if both scrolls are visible */
.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track {
left: -12px; }
.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track {
top: -12px; }
.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size {
left: -12px; }
.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size {
top: -12px; }
.lightbox-active #body {
overflow: visible; }
.lightbox-active #body .padding {
overflow: visible; }
#github-contrib i {
vertical-align: middle; }
.featherlight img {
margin: 0 !important; }
.lifecycle #body-inner ul {
list-style: none;
margin: 0;
padding: 2rem 0 0;
position: relative; }
.lifecycle #body-inner ol {
margin: 1rem 0 1rem 0;
padding: 2rem;
position: relative; }
.lifecycle #body-inner ol li {
margin-left: 1rem; }
.lifecycle #body-inner ol strong, .lifecycle #body-inner ol label, .lifecycle #body-inner ol th {
text-decoration: underline; }
.lifecycle #body-inner ol ol {
margin-left: -1rem; }
.lifecycle #body-inner h3[class*='level'] {
font-size: 20px;
position: absolute;
margin: 0;
padding: 4px 10px;
right: 0;
z-index: 1000;
color: #fff;
background: #1ABC9C; }
.lifecycle #body-inner ol h3 {
margin-top: 1rem !important;
right: 2rem !important; }
.lifecycle #body-inner .level-1 + ol {
background: #f6fefc;
border: 4px solid #1ABC9C;
color: #16A085; }
.lifecycle #body-inner .level-1 + ol h3 {
background: #2ECC71; }
.lifecycle #body-inner .level-2 + ol {
background: #f7fdf9;
border: 4px solid #2ECC71;
color: #27AE60; }
.lifecycle #body-inner .level-2 + ol h3 {
background: #3498DB; }
.lifecycle #body-inner .level-3 + ol {
background: #f3f9fd;
border: 4px solid #3498DB;
color: #2980B9; }
.lifecycle #body-inner .level-3 + ol h3 {
background: #34495E; }
.lifecycle #body-inner .level-4 + ol {
background: #e4eaf0;
border: 4px solid #34495E;
color: #2C3E50; }
.lifecycle #body-inner .level-4 + ol h3 {
background: #34495E; }
#top-bar {
background: #F4F4F4;
border-radius: 2px;
margin: 0rem -1rem 2rem;
padding: 0 1rem;
height: 0;
min-height: 3rem;
color: #333333; }
#top-bar a {
color: #1a1a1a; }
#top-bar a:hover {
color: #0d0d0d; }
#top-github-link {
position: relative;
z-index: 1;
float: right;
display: block; }
#body #breadcrumbs {
height: auto;
display: block;
margin-bottom: 0;
padding-left: 0;
line-height: 1.4; }
#body #breadcrumbs span {
padding: 0 0.1rem; }
@media only all and (max-width: 59.938em) {
#sidebar {
width: 230px; }
#body {
margin-left: 230px; } }
@media only all and (max-width: 47.938em) {
#sidebar {
width: 230px;
left: -230px; }
#body {
margin-left: 0;
width: 100%; }
.sidebar-hidden {
overflow: hidden; }
.sidebar-hidden #sidebar {
left: 0; }
.sidebar-hidden #body {
margin-left: 230px;
overflow: hidden; }
.sidebar-hidden #overlay {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 10;
background: rgba(255, 255, 255, 0.5);
cursor: pointer; } }
.copy-to-clipboard {
background-image: url(../images/clippy.svg);
background-position: 50% 50%;
background-size: 16px 16px;
background-repeat: no-repeat;
width: 27px;
height: 1.45rem;
top: -1px;
display: inline-block;
vertical-align: middle;
position: relative;
color: #1a1a1a;
background-color: #f9f2f4;
margin-left: -.2rem;
cursor: pointer;
border-radius: 0 2px 2px 0; }
.copy-to-clipboard:hover {
background-color: #f1e1e5; }
pre .copy-to-clipboard {
position: absolute;
right: 4px;
top: 4px;
background-color: #eee;
border-color: #ddd;
border-radius: 2px; }
pre .copy-to-clipboard:hover {
background-color: #d9d9d9; }
.parent-element {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d; }
/*# sourceMappingURL=navy_sunrise.css.map */
Reference in a new issue View git blame Copy permalink