%PDF- %PDF-
| Direktori : /www/varak.net/wiki.varak.net/vendor/oojs/oojs-ui/demos/tutorials/ |
| Current File : /www/varak.net/wiki.varak.net/vendor/oojs/oojs-ui/demos/tutorials/tutorials.css |
body {
background-color: #fcfcfc;
color: #666;
margin: 0;
/* stylelint-disable-next-line font-family-name-quotes */
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen-Sans', Ubuntu, Cantarell, Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 1.8;
}
a {
text-decoration: none;
}
a:hover {
color: #a071ce;
}
/* Start footer link in a new line */
footer a {
clear: left;
float: left;
}
h1,
h2 {
color: #222;
}
h2 {
margin-top: 0;
}
h2.section {
color: #222;
margin-top: 2em;
margin-bottom: 0;
}
legend {
background-color: #fff;
display: inline-block;
margin-top: -1.8em;
margin-left: -0.25em;
margin-bottom: 1em;
}
nav {
padding: 0.5em;
}
p {
margin-top: 1em;
}
pre {
background-color: #fff;
padding: 1em;
box-shadow: 1px 1px 8px #bbb;
}
pre + p {
margin-top: 3em;
}
/* Override PrismJS default */
:not( pre ) > code[ class*='language-' ],
pre[ class*='language-' ] {
background: #fff;
}
/* Override PrismJS default */
pre[ class*='language-' ] {
margin: 2em 0;
}
span.red {
color: #b32424;
font-weight: bold;
}
/*
* Table styles
*/
table {
width: 100%;
margin-top: 2em;
border-collapse: collapse;
box-shadow: 1px 1px 8px #bbb;
}
td,
th {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-image: linear-gradient( to bottom right, #052a74, #a8c1f9 );
background-color: #36c; /* fallback */
color: #fff;
text-transform: uppercase;
}
tr {
background-color: #fefefe;
}
.box-container {
padding-top: 2em;
}
.box {
float: left;
width: 10%;
}
.box-wide {
float: left;
width: 45%;
}
.header {
margin-top: 0;
}
.intro {
background-color: #fff;
color: #222;
margin-top: 3em;
border-radius: 4px;
padding: 2em;
box-shadow: 2px 2px 20px #bbb;
font-size: 120%;
}
.container {
margin-left: 16%;
margin-bottom: 2%;
margin-right: 16%;
}
.inline-code {
background-color: #fff;
color: #b32424;
border: 1px solid #d3d3d3;
padding: 0.25em;
padding-top: 0.1em;
padding-bottom: 0.1em;
}
.embed-app {
background-color: #fff;
width: 60%;
margin: auto;
margin-top: 2.5em;
margin-bottom: 2.5em;
border-radius: 2px;
padding: 0.75em;
box-shadow: 3px 3px 18px #36c;
}
.oo-ui-fieldsetLayout.oo-ui-labelElement > .oo-ui-fieldsetLayout-header {
width: 5.5em;
color: #36c;
box-shadow: 1px 2px 12px;
}
.oo-ui-fieldsetLayout.oo-ui-labelElement > .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label {
margin-bottom: 0;
padding-left: 6px;
}
/* Borrowed from Core Apex CSS */
.oo-ui-selectWidget-depressed .oo-ui-optionWidget-selected {
background-color: #80ccff;
}
/* Borrowed from Core Apex CSS */
.oo-ui-optionWidget-highlighted {
background-color: #b9e3ff;
}
.no-highlights .oo-ui-selectWidget-depressed .oo-ui-optionWidget-selected,
.no-highlights .oo-ui-optionWidget-highlighted {
background-color: #fff;
}
.tutorials-footer {
background-color: #fcfcfc;
margin-top: 6em;
}
.tutorials-footer-content,
.tutorials-footer-top {
padding-left: 16%;
padding-right: 16%;
}
.tutorials-footer-content {
height: 20em;
}
.tutorials-footer h3 {
color: #222;
}
.tutorials-footer-top {
background-image: linear-gradient( to bottom right, #052a74, #a8c1f9 );
background-color: #36c; /* fallback */
color: #f8f9fa;
height: 8em;
padding-top: 2em;
}
.tutorials-footer-top h1 {
color: #fff;
text-align: center;
}
.tutorials-toolbar-tutorials {
top: 14px;
width: 50%;
}
.tutorials-toolbar-tutorials .oo-ui-dropdownWidget {
top: 10px;
left: 0;
width: 16em;
padding: 0;
}
/*
* Back to top button
* Taken from https://codepen.io/desirecode/pen/MJPJqV/
* with minor adjustments.
*/
.scroll {
background-color: #222;
display: none;
position: fixed;
bottom: 10px;
right: 10px;
width: 50px;
height: 50px;
border-radius: 60px;
text-indent: -9999px;
cursor: pointer;
}
.scroll span {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
margin-top: -18px;
margin-left: -12px;
border: 12px solid transparent;
border-bottom-color: #fff;
}
.scroll:hover {
background-color: #b32424;
opacity: 1;
}
/*
* Make footer fit smaller sized screens
*/
@media only screen and ( max-width: 860px ) {
.box,
.box-wide {
width: 100%;
margin-bottom: 2em;
}
.tutorials-footer-top h1 {
margin-top: 1em;
font-size: 165%;
}
}
@media only screen and ( max-width: 462px ) {
.tutorials-footer-top h1 {
font-size: 155%;
}
}