md-cms/edit/themes/default/theme.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; }

table.obj_cha_maintable th.sectionTH { padding: 1em 0; font-size: 1.1em; font-weight: bold; }
table.obj_cha_maintable > tbody > tr:first-child th.sectionTH { padding: 0 0 1em 0; }
table.obj_cha_maintable input[type="range"]:only-child { margin: .5em -1em 0 0; }

@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 select           { display: block; width: 100%; }
#staticPageOptions button           { display: block; width: 100%; background: #0277BD; color: #FFF; transition: background .4s; }
#staticPageOptions button:hover     { background: #039BE5; }

#embedGenerator .helpToolTip,
#staticPageOptions .helpToolTip     { width: 2em; text-align: center; }

#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; }
#embedGenerator > .labelLine { margin-bottom: .5em; }

#pageTools > * { padding: 0 1rem; }

#staticPageOptions > .labelLine,
#embedGenerator > .labelLine,
.labelLine     { display: table; width: 100%; }
.labelLine > * { display: table-cell; }
.labelLine label            { font-weight: bold; }

/************
 * Start Page
 */

@media screen and (min-width:75em) {
    section + .startPgTiles { border-top: 1px solid #D6D6D6; }
    .startPgTiles     { display: flex; }
    .startPgTiles > * { flex: 1; display: inline-block; }
}

/************
 * 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; }
}