Joshua Ramon Enslin
a49746ab10
Added editing pages for footer, banner, aside. Added page overview. Added public page. Added settings page. Added generator for embed pseudocodes.
280 lines
10 KiB
CSS
280 lines
10 KiB
CSS
/**
|
|
* Default theme for the backend of md:cms.
|
|
*/
|
|
|
|
/****************************
|
|
* 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; }
|
|
|
|
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; transition: background .1s, box-shadow .1s; box-sizing: border-box; }
|
|
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%; }
|
|
|
|
.withAside { display: table; width: 100%; }
|
|
.withAside > * { display: table-cell; vertical-align: top; }
|
|
.withAside > aside { width: 300px; border: 1px solid #D6D6D6; border-width: 0 0 1px 1px; }
|
|
|
|
fieldset { margin: 1em 0 0 0; padding: 1em; border: 1px solid #D6D6D6; }
|
|
fieldset > legend { color: #AAA; font-style: italic; }
|
|
fieldset:empty { display: none; }
|
|
|
|
/************
|
|
* Tables for providing an overview.
|
|
*/
|
|
|
|
table.overviewtable { height: auto; }
|
|
table.overviewtable thead { position: sticky; top: 0px; border-bottom: 3px solid #D6D6D6; }
|
|
|
|
table.overviewtable th,
|
|
table.overviewtable td { padding: .35em; }
|
|
table.overviewtable tr th:first-child,
|
|
table.overviewtable tr td:first-child { padding-left: .7em; }
|
|
table.overviewtable tr th:last-child,
|
|
table.overviewtable tr td:last-child { padding-right: .7em; text-align: right; }
|
|
|
|
table.overviewtable tr { transition: background .4s; }
|
|
|
|
table.secondRowShaded tr:nth-child(2n):hover,
|
|
table.overviewtable tr:hover { background: #E0E0E0; }
|
|
|
|
table.overviewtable tr:nth-child(2n) { background: #F2F2F2; }
|
|
|
|
table.fullwidth { width: auto; table-layout: fixed; }
|
|
|
|
/************
|
|
* Tables for adding something.
|
|
*/
|
|
|
|
table.obj_cha_maintable { width: 100%; margin: 2em 0; }
|
|
.withAside .obj_cha_maintable { width: calc(100%); margin: 0px; }
|
|
table.obj_cha_maintable th { width: 100px; padding-top: .5em; padding-right: .8em; color: #424242; vertical-align: top; font-weight: normal; text-align: left; }
|
|
table.obj_cha_maintable td > label { padding-top: .5em; }
|
|
table.obj_cha_maintable td { vertical-align: top; }
|
|
|
|
table.obj_cha_maintable td:last-child { text-align: center; padding-top: .5em; }
|
|
|
|
table.obj_cha_maintable td.twoInputs input { width: 50%; }
|
|
table.obj_cha_maintable select:only-child,
|
|
table.obj_cha_maintable button:only-child,
|
|
table.obj_cha_maintable input:only-child { width: 100%; }
|
|
table.obj_cha_maintable textarea:only-child { width: 100%; height: 14em; }
|
|
|
|
@media screen and (min-width:65em) {
|
|
table.obj_cha_maintable th { width: 16em; }
|
|
}
|
|
|
|
table.obj_cha_maintable td.shortInputLong input { width: 8em; }
|
|
table.obj_cha_maintable td.shortInputLong input:nth-child(2) { width: calc(100% - 9em); float: right; }
|
|
|
|
.obj_cha_maintable td:last-child { width: 3em; }
|
|
|
|
.helpToolTip { display: inline-block; padding: .1em .5em;
|
|
background: #DDD; border-radius: .2em; transition: background .4s, color .4s; }
|
|
.helpToolTip:before { content: "?"; }
|
|
.helpToolTip:hover { background: #C0CA33; color: #FFF; }
|
|
|
|
/************
|
|
* Indented lists.
|
|
*/
|
|
#indentedList ul { margin: 0; padding: 0; list-style: none; }
|
|
#indentedList li a { display: block; width: 100%; padding: .7em 1.2em;
|
|
border-bottom: 1px solid #D6D6D6; transition: background .4s; }
|
|
|
|
#indentedList li a:hover { background: #F2F2F2; }
|
|
#indentedList ul ul li > *:first-child { padding-left: 2.4em; }
|
|
#indentedList ul ul ul li > *:first-child { padding-left: 3.6em; }
|
|
|
|
.notPublic { background: linear-gradient(to left, #666 5%, white , white, white, white, white, white 90%); }
|
|
|
|
/************
|
|
* Edit line
|
|
*/
|
|
|
|
p.editLine { animation: fade-in-and-vanish 2.4s; position: fixed; left: 0; top: 0;
|
|
display: block; width: 100%;
|
|
margin: 0; text-align: center; font-weight: bold; opacity: 0;
|
|
box-sizing: border-box; box-shadow: 0 1.5px 2px rgba(0,0,0,.06),0 1.5px 1.5px rgba(0,0,0,.06); z-index: 0; }
|
|
p.editLine.massiveEditLine { animation: fade-in-and-vanish-massive 2.4s; }
|
|
|
|
p.changesStored { background: #7CB342; color: #FFF; }
|
|
p.changesDeleted { background: #E53935; color: #FFF; }
|
|
p.changesAborted { background: #C62828; color: #FFF; }
|
|
|
|
/****************************
|
|
* Main Structuring Elements
|
|
*/
|
|
|
|
/************
|
|
* Main Header
|
|
* Displays current position and offers access
|
|
*/
|
|
|
|
#mainHeader { display: table; width: 100%; border-bottom: 1px solid #D6D6D6; box-shadow: 2px 2px 4px #D6D6D6; }
|
|
#mainHeader > * { display: table-cell; padding: .5rem; color: #666; vertical-align: middle; }
|
|
#mainHeader h1 { color: #333; }
|
|
|
|
#mainHeader > *:last-child { text-align: right; }
|
|
#mainHeader > *:last-child > * { display: inline-block; margin: 0 .5em; padding: .5rem 1rem;
|
|
background: #1976D2; color: #FFF; border-radius: .2em; transition: background .4s; }
|
|
|
|
#mainHeader #toggleNavigation { width: 3em; text-align: center; }
|
|
#mainHeader #toggleNavigation:before { content:'\2630'; }
|
|
|
|
#mainHeader #uploadFile:before { content:'\2630'; }
|
|
#mainHeader #logoutLink:before { content:'\01F6B6'; }
|
|
|
|
/************
|
|
* Main wrapper
|
|
* Contains the navigation and the main part.
|
|
*/
|
|
|
|
div#mainWrapper { display: block; }
|
|
|
|
@media screen and (min-width: 75em) {
|
|
div#mainWrapper { display: table; width: 100%; }
|
|
div#mainWrapper > * { vertical-align: top; }
|
|
}
|
|
|
|
/************
|
|
* Main navigation
|
|
*/
|
|
|
|
#mainNav { display: block; background: #FCFCFC; border: 1px solid #D6D6D6; border-width: 0; }
|
|
#mainNav > * { display: block; border-bottom: 1px solid #D6D6D6; }
|
|
|
|
#mainNav > * > span { display: block; padding: .7em 1em; font-weight: bold; transition: background .2s; }
|
|
#mainNav > * > span:hover { background: #F2F2F2; }
|
|
#mainNav > * > div { position: relative; }
|
|
|
|
#mainNav > * > div > *:not(:first-child) { position: absolute; right: 1em; top: 50%; transform: translate(0, -50%);
|
|
display: block; padding: .1em .5em; background: #EEE; color: #888; border-radius: 100%;
|
|
transition: background .4s, color .4s; }
|
|
#mainNav > * > div > *:not(:first-child):hover { background: #AAA; color: #000; }
|
|
|
|
#mainNav > * > div > *:nth-child(2) { right: 1em; }
|
|
#mainNav > * > div > *:nth-child(3) { right: 3em; }
|
|
|
|
#mainNav > * > div > *:first-child { position: relative; display: block; padding: .7em 1em; transition: background .2s; }
|
|
#mainNav > * > div > *:first-child:hover { background: #F2F2F2; }
|
|
|
|
@media screen and (min-width: 75em) {
|
|
#mainNav { display: table-cell; width: 250px; border-width: 0 1px 1px 0; }
|
|
}
|
|
|
|
/************
|
|
* Main part of the page.
|
|
*/
|
|
|
|
main { padding: .5em 5em 3em 3em; }
|
|
|
|
/************
|
|
* 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; }
|
|
|
|
#pageTools > #embedGenerator { display: block;
|
|
margin-bottom: 1em; padding-bottom: 1em;
|
|
box-sizing: content-box; border-bottom: 1px solid #D6D6D6; }
|
|
#embedGenerator > * { display: block; width: 100%; }
|
|
#embedGenerator .buttonLike { cursor: pointer; }
|
|
|
|
#pageTools > * { padding: 0 1rem; }
|
|
|
|
/************
|
|
* 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; }
|
|
|
|
/************
|
|
* Overlays (activated with JS)
|
|
*/
|
|
.overlay { position: fixed; left: 0; top: 0; display: table; width: 100%; height: 100%;
|
|
background: rgba(0, 0, 0, .8); color: #FFF;
|
|
animation: fade-in .4s; }
|
|
.overlay > * { display: table-cell; padding: 0 5em; vertical-align: middle; }
|
|
|
|
form[action="files.php"] > * { display: block; }
|
|
|
|
/****************************
|
|
* Animations
|
|
*/
|
|
|
|
@keyframes fade-in {
|
|
from { opacity: 0.4; }
|
|
to { opacity: 1.0; }
|
|
}
|
|
|