Symphony CMS Backend CSS override for use with backend-assets extension

custom.css

/* backend CSS-overrides */

/* most recent Version here —> https://gitlab.com/animaux/kickstart/-/blob/master/workspace/backend-assets/custom.css */

/* colors */
:root {
--farbeA: 240,200,120; /* rather bright */
--farbeB: 0,30,60;     /* rather dark */
}

/* Lucida Grande dash-fix */
@font-face {
font-family: 'Ndash';
src: local('Arial');
unicode-range: U+2013-2014, U+002D;
}

body, html, input, option, textarea, button, input, optgroup, select {
font-family: 'Ndash', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 'Lucida Grande', Leelawadee, Tahoma, Verdana, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* reset Symphony font-sizes */
body,
html,
body > div,
body > form { 
font-size: 12px;
line-height: 1.35em;
}

/* basics */
body {
display: flex;
flex-flow: row wrap;
background: rgb(240,240,240);
}

#wrapper {
flex: 0 1 100%;
background: transparent;
}

#context {
display: flex;
flex-flow: row wrap;
background: transparent;
padding: 1.8em;
min-height: auto;
}

#context .actions {
display: flex;
flex-flow: row nowrap;
position: static;
margin: 0 0 0 auto;
}

.index .actions,
.page-index .actions {
height: auto;
}

#contents {
background: transparent;
border-top: none;
box-shadow: none;
min-height: auto;
}

a,
span.dok,
button,
input {
transition: color 250ms ease-in, background 250ms ease-in, box-shadow 500ms ease-out, border 500ms ease-out;
}

a {
color: black;
border-bottom: 1px solid rgb(var(--farbeA));
}

a:hover {
color: rgb(var(--farbeA));
border-bottom-color: transparent;
}

/* index links to entry */
td:first-child a.content {
border: none;
color: white;
font-weight: bold;
background: rgb(var(--farbeB));
display: inline-block;
padding: .2em .4em .15em .4em;
}

td:first-child a.content:hover {
color: rgb(var(--farbeB));
background: rgb(var(--farbeA));
box-shadow: .3em .3em 0 rgba(var(--farbeB),.1);
}

/* inactive links */
a.inaktiv,
td:first-child > a.content.inaktiv {
pointer-events: none;
background: rgba(230,200,30,0.3);
}

/* rows */
td {
background-color: rgba(255,255,255,.5);
}

tr:nth-child(even) td {
background-color: rgba(255,255,255,1);
}

#header {
display: flex;
flex-flow: row wrap;
padding: 0;
background: rgb(var(--farbeB));
border-bottom: none;
}

.notifier {
flex: 1 0 100%;
border-bottom: none;
}

.notice.success {
color: rgba(0,0,0,.8);
background: rgb(190,220,40);
}

.notice.success.dimmed {
color: rgba(255,255,255,.6);
background: rgb(140,180,20);
}

.notice.success a {
color: rgba(0,0,0,.8);
}

.notice.success.dimmed a {
color: rgba(255,255,255,.6);
}

#header h1 {
flex: 1 0 auto;
font-size: 1.25em;
background: transparent;
padding: 1.4em 1.4em .7em 1.4em;
}

#header h1 a {
font-weight: bold;
font-style: normal;
}

#header h1 a,
#session a {
color: rgb(var(--farbeA));
text-shadow: none;
}

#header h1 a:hover,
#session a:hover {
color: rgba(255,255,255,0.8);
}

#session {
position: static;
float: none;
margin: 0;
padding: 1.4em 1.4em .7em 1.4em;
}

#nav {
background: transparent;
border-bottom: none;
display: flex;
flex-flow: row wrap;
float: none;
min-height: auto;
font-size: inherit;
}

#nav>ul>li {
color: rgba(255,255,255,.9);
text-shadow: none;
border-bottom: .3em solid transparent;
}

#nav ul a:hover {
color: white;
background: rgba(var(--farbeB));
text-shadow: none;
}

#nav li ul {
left: 0;
border: none;
}

#nav.wide ul.structure li ul {
left: auto;
right: 0;
}

#nav ul.structure {
margin-left: auto;
}

#nav>ul>li.active {
color: white;
font-weight: bold;
background: rgba(var(--farbeB));
text-shadow: none;
border-bottom-color: white;
}

#nav>ul>li:hover:after {
content: none;
}

#context .actions li,
#login button,
#nav.wide ul.structure,
.frame .actions button,
ul.actions .entry-nav {
float: none !important;
}

/* list selection */
td {
border: none !important;
vertical-align: middle;
}

tr.selected td {
border: none;
background-color: rgba(var(--farbeB),.2);
color: black;
}

tr:nth-child(odd).selected td {
background-color: rgba(var(--farbeB),.1);
}


/* checkboxes */
div.field-checkbox {
padding: 8px 10px;
background: white;
margin-top: 2rem
}

div.field-checkbox:first-child {
margin-top: 1.8rem
}

div.field.field-checkbox label {
margin-bottom: 0;
}

/* actions */
.index div.actions,
.page-index div.actions,
.single #contents div.actions {
display: flex;
flex-flow: row wrap;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: auto;
margin: 0;
background-color: rgba(230,230,230,.95);
border-top: none;
padding: 1rem 1.8rem;
z-index: 1000;
box-shadow: none;
}

.index div.actions,
.page-index div.actions {
justify-content: flex-end;
}

.single #contents div.actions input,
.single #contents div.actions button {
float: none;
}

.single #contents div.actions input[type=submit] {
margin-left: auto;
order: 100;
}

.dirty div.actions {
background: rgba(240,160,80,.95) !important;
}


/* buttons */
input {
height: auto;
border-radius: .2em;
}

.apply-button-left,
.apply-button-right,
.apply-label-left,
.apply-label-right,
.button,
button,
input[type=submit] {
display: inline-block;
color: black;
background: rgba(0,0,0,.1);
background-image: none;
border: none;
cursor: pointer;
min-height: auto;
font-weight: bold;
line-height: 1em;
padding: .5em 1em;
box-sizing: content-box;
border-radius: .2em;
}

.button:active, .button:focus, .button:hover, button:active, button:focus, button:hover, input[type=submit]:active, input[type=submit]:focus, input[type=submit]:hover {
color: black;
background: rgb(var(--farbeA));
border: none;
background-image: none;
cursor: pointer;
}

.button.selected,
button.selected,
input[type=submit].selected {
color: white;
background: rgb(var(--farbeB));
text-shadow: none;
}

.button.delete:active,
.button.delete:focus,
.button.delete:hover,
button.delete:active,
button.delete:focus,
button.delete:hover {
background-image: none !important;
background-color: rgb(180,0,0);
border: none;
}

.button.create, 
button.create {
background-image: none;
background-color: rgb(0,180,0);
border: none;
}

.button.create:active,
.button.create:focus,
.button.create:hover,
button.create:active,
button.create:focus,
button.create:hover {
color: white;
background-image: none;
background-color: rgb(0,160,0);
border: none;
}

.dirty div.actions input,
.dirty div.actions button {
background: rgba(255,255,255,.8);
}


.apply select {
margin: .275rem 0 0 0;
}

.apply button, .apply-button-left, .apply-button-right {
height: auto;
line-height: 1em;
}

.apply div {
background-position: right -1rem;
}

.apply:hover div {
background-position: right -1rem;
}

/* forms */

/* FF-Fix */
input::-moz-focus-inner { 
border: 0;
padding: 0;
}

form.columns {
padding-top: 0;
}

form.columns .column.primary,
form.columns .column.secondary,
fieldset.settings:first-of-type {
margin-top: 0;
border-top: .1em solid rgba(0,0,0,.25);
padding-top: 2em;
}

.frame {
background: white;
border-radius: .2em;
}

.main::before, 
.sidebar::before {
margin: .125rem .7rem 0 0;
}


/* documenter */
#drawer-documenter em {
font-family: 'Cambria', 'MS Gothic', 'Arial Unicode MS', 'Helvetica';
font-style: normal;
font-weight: bold;
background: Magenta;
color: White;
font-size: 12px;
padding: 0 3px 1px 3px;
-webkit-box-decoration-break: clone;
-moz-box-decoration-break: clone;
box-decoration-break: clone;
}

#documenter-drawer .documenter-content h1.open, #documenter-drawer .documenter-content h2.open, #documenter-drawer .documenter-content h3.open {
background: rgba(255, 255, 255, 0.4);
}

#documenter-drawer h2 {
font-size: 12px;
}

#documenter-drawer .documenter-content h3 {
font-weight: bold;
}

#documenter-drawer .documenter-content h4 {
color: white;
border-bottom: 1px solid darkgrey;
padding: 0.5em 0 0.25em 0;
margin: 0 0 0.5em 0;
}

kbd {
color: black;
font-family: inherit;
font-size: 10px;
border: 1px solid #aaa;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 1px 2px 2px #999;
-webkit-box-shadow: 1px 2px 2px #999;
box-shadow: 1px 2px 2px #999;
background-color: #f9f9f9;
background-image: linear-gradient(top, #eee, #f9f9f9, #eee);
padding: 0 3px 1px 3px;
}

/* AU-Editor Materie Overrides */
[data-interface^="aui-selector"] .selectize-control,
.aui-editor-create {
background: rgba(230,230,230,.95);
}

[data-interface^="aui-selector"] .selectize-input input {
border-top: none;
background-position: right 6px top 11px;
}

/* Publish Tabs Overrides */
#context ul.tabs {
flex: 1 0 100%;
margin: 1em 0 0 0;
height: auto;
}

ul.tabs .selected:before,
ul.tabs .selected:after {
display: none;
}

ul.tabs li,
ul.tabs li:hover,
ul.tabs .invalid.selected, ul.tabs .invalid.selected:hover, ul.tabs .selected {
border: none;
height: auto;
padding: .4em 1em;
border-radius: .2em;
}

ul.tabs .selected,
ul.tabs .selected:hover {
font-weight: bold;
background: rgb(240,240,240)
}

/* double-/triple-fields */
/* 
div#field-9999 {
display: inline-block;
width: calc((100% / 3) - 8px);
}

div#field-9999 {
display: inline-block;
width: calc(50% - 8px);
}

div#field-11 {
margin-right: .5em;
}
*/


/* join fields */
/* 
div#field-9999 {
margin-bottom: 0;
}

div#field-9999 {
margin-top: 0;
}

div#field-9999 {
padding: .5em .75em;
background: whiteSmoke;
}
*/

/* hide association drawer and button */
#drawer-section-associations,
a[href="#drawer-section-associations"] {
display: none;
}

/* hide elements */
/* 
.id-9999 button.button.confirm.delete {
display: none;
}
*/
 
/* deactivate elements */
/* 
div#field-9999 input {
pointer-events: none;
opacity: .5;
}
*/