%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%; } }