This repository has been archived on 2022-07-28. You can view files and clone it, but cannot push or open issues or pull requests.
md-cms/themes/default/theme.css

228 lines
6.7 KiB
CSS
Raw Normal View History

/**
* Default theme for the backend of md:cms.
*/
/****************************
* Imports
*/
@import 'mdEmbeds.css';
/****************************
* Load fonts
*/
@font-face {
font-family: sourceSansPro;
src: local('Source-Sans-Pro'), local('Source Sans Pro'),
url(./fonts/SourceSansPro-Regular.woff2) format('woff2'),
url(./fonts/SourceSansPro-Regular.ttf) format('truetype');
}
/****************************
* General
*/
html { margin: 0; padding: 0; }
body { margin: 0; padding: 0; font-family: sourceSansPro;
font-size: 1.15em; line-height: 1.5; }
* { box-sizing: border-box; z-index: 1; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { text-align: left; }
a.buttonLike { display: inline-block; }
a.buttonLike,
select,
button,
textarea,
input { padding: .6em .8em; background: #FAFAFA; border: 1px solid #CFD8DC;
font-family: roboto; font-size: inherit;
border-radius: .3em; box-sizing: border-box;
transition: background .1s, box-shadow .1s; }
button { padding: .6em; }
select { padding: .3em .8em; }
textarea { line-height: 1.4em; }
a.buttonLike:hover,
select:hover,
button:hover,
textarea:hover,
input:hover { background: #FFF; box-shadow: 1px 1px 3px #CFD8DC; }
a.buttonLike:focus,
select:focus,
button:focus,
textarea:focus,
input:focus { background: #FFF; box-shadow: 1px 1px 3px #607D8B; }
input[type="range"] { background: inherit; border: 0; }
.mceEditor { min-height: calc(80vh - 10em); }
.mce-container, .mcePanel { box-sizing: border-box !important; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; }
.noPadding { padding: 0 0 0 0 !important; }
.invisible { display: none !important; }
input.h1Input { display: block; width: 100%; font-size: 1.5em; border-radius: 0; }
#inputSection > * { display: block; width: 100%; }
aside > * { display: block; padding: 1em; border: 1px solid #D6D6D6; }
/****************************
* Main Structuring Elements
*/
/************
* Main Header
* Displays current position and offers access
*/
2018-06-15 23:41:25 +02:00
#mainHeader { display: table; width: 100%; padding: 0 5vw; border-bottom: 1px solid #D6D6D6; }
#mainHeader > * { display: block; padding: .5rem 0; color: #666; vertical-align: middle; }
#mainHeader h1 { color: #333; }
#mainHeader input { width: 100%; }
/************
* Banner
*/
body > header:nth-child(2) { margin: 0; padding: 0; }
body > header:nth-child(2) p { margin: 0; padding: 0; }
body > header:nth-child(2) img { width: 100%; height: 20vh; object-fit: cover; margin-bottom: -.4em; }
/************
* Main wrapper
* Contains the navigation and the main part.
*/
div#mainWrapper { display: block; padding-left: 5vw; padding-right: 5vw; }
@media screen and (min-width: 75em) {
div#mainWrapper { display: table; width: 100%; }
div#mainWrapper > * { display: table-cell; vertical-align: top; }
}
/************
* Main navigation
*/
body > nav { display: block; background: #212121; color: #EEE;
border: 1px solid #D6D6D6; border-width: 0; padding: 0 5vw; }
body > nav ul { list-style: none; margin: 0; padding: 0 0; }
body > nav li { position: relative; }
body > nav > ul { display: block; }
body > nav > ul > li { display: inline-block; }
body > nav > ul > li ul { position: absolute; left: 0; top: 100%;
background: #424242; color: #EEE; z-index: 2; animation: fade-in .4s; }
body > nav > ul > li ul ul { left: 100%; top: 0; background: #666; color: #EEE; }
body > nav li ul { display: none; }
body > nav li:hover > ul { display: block; animation: fade-in .4s; }
body > nav > ul > li a { display: block; padding: .6em .8em; transition: background .4s, color .4s; }
body > nav > ul > li a:hover { background: #000; color: #FFF; }
/************
* Main part of the page.
*/
2018-06-15 23:41:25 +02:00
main { padding: 1em 0 1em 0; text-align: justify; }
/************
* Main footer.
*/
body > footer { margin: 1em 5vw 2em 5vw; padding: 1em 0; background: #FFF; color: #666;
border-top: 1px solid #AAA; }
/****************************
* Specialized pages.
*/
/************
* Editing Static Pages
*/
#staticPageOptions > * { display: block; padding: .5em 1rem; }
#staticPageOptions > .labelLine { display: table; width: 100%; }
#staticPageOptions .helpToolTip { width: 2em; text-align: center; }
#staticPageOptions > .labelLine > * { display: table-cell; }
#staticPageOptions label { font-weight: bold; }
#staticPageOptions select { display: block; width: 100%; }
#staticPageOptions button { display: block; width: 100%; background: #0277BD; color: #FFF; transition: background .4s; }
#staticPageOptions button:hover { background: #039BE5; }
#embedGenerator { margin-bottom: 1em; border-bottom: 1px solid #D6D6D6; }
#pageTools > * { padding: 0 1rem; }
/************
* Search pages
*/
#pagesSearchList,
#pagesSearchList li { margin: 0; padding: 0; list-style: none; }
#pagesSearchList li { margin: .5em 0; padding: .5em 0;
border-bottom: 1px solid #D6D6D6; transition: border-bottom .4s; }
#pagesSearchList li:hover { border-bottom-color: #666; }
#pagesSearchList h4 { margin: 0; padding: 0; }
#pagesSearchList dl { color: #666; font-size: .9em; }
#pagesSearchList dt,
#pagesSearchList dd { display: inline-block; margin: 0; padding: 0; }
/************
* Login Page
*/
#loginPage body { position: absolute; left: 50%;
width: 400px; max-width: 100%; transform: translate(-50%); }
#loginPage form > * { display: block; width: 100%; }
#errorMsg { display: block; padding: .8em; text-align: center;
background: #E53935; color: #FFF; box-shadow: 1px 1px 3px #757575; }
/************
* Error page.
*/
#errorPage body { position: absolute; left: 50%; top: 50%;
width: 400px; max-width: 100%; transform: translate(-50%, -50%); }
#errorPage body > * { display: block; padding: 2em; background: #212121; color: #FFF;
font-weight: bold; text-align: center; border-radius: .5em; }
/************
* Larger screens.
*/
@media screen and (min-width: 95em) {
#mainHeader,
body > nav,
div#mainWrapper,
body > footer { margin: 0 0; padding-left: 15rem; padding-right: 15rem; }
2018-06-15 23:41:25 +02:00
aside { width: 300px; margin-right: 3em; }
#mainHeader { display: table; }
#mainHeader > * { display: table-cell; }
#mainHeader form { text-align: right; }
#mainHeader input { width: initial; }
main { padding: .5em 5em 3em 0; }
}
/****************************
* Animations
*/
@keyframes fade-in {
from { opacity: 0.4; }
to { opacity: 1.0; }
}