Skip to content

Instantly share code, notes, and snippets.

@designermonkey
Created February 11, 2014 21:00
Show Gist options
  • Select an option

  • Save designermonkey/8944063 to your computer and use it in GitHub Desktop.

Select an option

Save designermonkey/8944063 to your computer and use it in GitHub Desktop.
/**
* Style definition for the Symphony backend
*/
/*--------------------------------------------------------------------------
Structure
--------------------------------------------------------------------------*/
#wrapper {
background: #fff;
position: relative;
}
/* Header */
#header {
margin: 0 0 0;
color: #fff;
position: relative;
z-index: 9000;
border-bottom: 1px solid #e6e6e6;
}
#header h1 {
background: #282828;
padding: 1.8rem;
text-shadow: -0.1rem 0.2rem 0.3rem #111;
font-weight: normal;
font-size: 1.5rem;
line-height: 1;
z-index: 10;
position: relative;
}
#header h1 a, #session a {
border: none;
color: #e6e6e6;
color: rgba(255, 255, 255, 0.85);
}
#header h1 a:hover, #header h1 a:focus,
#session a:hover, #session a:focus {
color: rgba(255, 255, 255, 0.99);
}
#header h1 a:focus,
#session a:focus {
border-bottom: 0.1rem solid white;
}
/* Session */
#session {
margin: -3.1rem 0 0;
padding: 0 0.9rem;
float: right;
position: relative;
z-index: 11;
}
#session li {
display: inline;
padding: 0 0.9rem;
}
/* Navigation */
#nav {
display: block;
margin: 0;
padding: 0 0.8rem 0;
min-height: 3.1rem;
list-style: none;
background-image: -webkit-gradient(linear, left top, left bottom, from(#efefed), color-stop(33%, #efefed), to(#d7d7d2));
background-image: -webkit-linear-gradient(top, #efefed 0%, #efefed 33%, #d7d7d2 67%);
background-image: linear-gradient(to bottom, #efefed 0%, #efefed 33%, #d7d7d2 67%);
font-size: 12px;
z-index: 3;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-bottom: 0.1rem solid #bbbbb7;
}
#nav ul {
margin: 0;
padding: 0;
float: left;
}
#nav.wide ul.structure {
float: right;
}
#nav > ul > li {
display: block;
color: #555;
float: left;
height: 3.1rem;
line-height: 3.1rem;
padding: 0 1rem;
position: relative;
text-shadow: 0 0.1rem 0 rgba(255, 255, 255, 0.3);
border-left: 0.1rem solid transparent;
border-right: 0.1rem solid transparent;
z-index: 3;
cursor: default;
white-space: nowrap;
}
#nav > ul > li.active {
color: #fff;
background-color: #4d78b4;
background-image: -webkit-gradient(linear, left top, left bottom, from(#6f92c2), color-stop(35%, #6f92c2), color-stop(65%, #4d78b4), to(#4d78b4));
background-image: -webkit-linear-gradient(top, #6f92c2 0%, #6f92c2 35%, #4d78b4 65%, #4d78b4 100%);
background-image: linear-gradient(to bottom, #6f92c2 0%, #6f92c2 35%, #4d78b4 65%, #4d78b4 100%);
height: 3.1rem;
text-shadow: 0.1rem 0.1rem 0 rgba(0, 0, 0, 0.2);
z-index: 2;
}
#nav > ul > li:hover, #nav > ul > li.active:hover {
color: #555;
background: #fff;
height: 3.1rem;
text-shadow: none;
z-index: 10000;
}
#nav > ul > li:hover:after {
content: "";
width: 100%;
max-width: 11.8rem;
height: 0.3re,;
background: #fff;
position: absolute;
bottom: 0;
left: -0.1rem;
padding: 0 0.1rem;
}
/* Dropdown */
#nav li ul {
background: #fff;
margin: 0;
padding: 0;
display: none;
-webkit-box-shadow: 0 0.4rem 0.5rem rgba(0, 0, 0, 0.03), 0 7px 15px -5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0.4rem 0.5rem rgba(0, 0, 0, 0.03), 0 7px 15px -5px rgba(0, 0, 0, 0.15);
list-style: none;
min-width: 12rem;
position: absolute;
top: 3.1rem;
left: -0.2rem;
text-shadow: none;
border: 0.1rem solid rgba(187, 187, 187, 0.5);
border-top: none;
border-bottom-right-radius: 0.4rem;
border-bottom-left-radius: 0.4rem;
}
#nav.wide ul.structure li ul {
left: auto;
right: -0.2rem;
}
#nav li:hover ul {
display: block;
}
#nav ul a {
color: #555;
display: block;
font-weight: normal;
padding: 0 0.9rem;
border: 0.1rem solid transparent;
cursor: pointer;
-webkit-font-smoothing: subpixel-antialiased !important;
}
#nav ul a:hover {
color: #fff;
background: #888888;
border: 0.1rem solid #fff;
text-shadow: 0.1rem 0.1rem 0 #807d79;
}
#nav ul ul li:last-child a {
border-bottom-right-radius: 0.3rem;
border-bottom-left-radius: 0.3rem;
}
/* Context */
#context {
clear: both;
margin: 0;
padding: 2.5rem 1.8rem 0;
position: relative;
color: #000;
background-color: #f4f4f4;
min-height: 3.8rem;
}
#context:after {
content: " ";
display: block;
visibility: hidden;
clear: both;
}
#context h2 {
border-bottom: 0;
padding: 0;
float: left;
font-size: 127.28%;
line-height: 1.35;
font-weight: normal;
}
#context .actions {
margin: 0;
padding: 0;
position: absolute;
right: 1.8rem;
top: 2.1rem;
}
#context .actions li {
float: right;
}
/* Breadcrumbs */
#breadcrumbs nav,
#breadcrumbs p {
margin: 0;
padding: 0;
float: left;
}
#breadcrumbs:after {
content: ' ';
visibility: hidden;
display: block;
font-size: 0;
clear: both;
}
#breadcrumbs a, #breadcrumbs span {
padding: 0;
font: 127.28%/1.35 'Lucida Grande', Leelawadee, Tahoma, Verdana, sans-serif;
color: #2E2E2E;
text-shadow: 0 0 0.1rem #fff;
float: left;
}
#breadcrumbs a {
border-bottom: 0.1rem solid rgba(0, 0, 0, 0.05);
}
#breadcrumbs a:hover, #breadcrumbs a:focus {
border-bottom-color: #a9a9a9;
color: #2E2E2E;
color: rgba(0, 0, 0, 0.8);
}
#breadcrumbs span {
padding: 0 0.4rem;
}
/* Contents */
#contents {
clear: both;
position: relative;
background: #fff;
padding: 0 0 5rem;
border-top: 0.1rem solid rgba(191, 191, 183, 0.65);
-webkit-box-shadow: 0 -0.2rem 0.3rem rgba(0, 0, 0, 0.05);
box-shadow: 0 -0.2rem 0.3rem rgba(0, 0, 0, 0.05);
min-height: 100%;
}
#contents h2 {
padding: 2rem 1.8rem 1.7rem;
}
#contents h2 span {
float: left;
}
#contents h2:after {
content: "";
display: block;
clear: both;
height: 0;
}
#contents h2 .button {
margin-top: -0.3rem;
margin-bottom: -0.2rem;
}
/*--------------------------------------------------------------------------
Settings
--------------------------------------------------------------------------*/
fieldset.settings {
position: relative;
padding: 1rem 0 1rem 27.5rem;
margin: 0 1.8rem 1rem;
border-top: 0.1rem solid rgba(0, 0, 0, 0.1);
}
fieldset.settings > legend {
position: absolute;
text-indent: -27.5rem;
line-height: 1.5;
}
fieldset.settings select {
width: 100%;
}
fieldset.settings p.help {
margin: -0.5rem 0 1.5rem;
}
fieldset.settings input + p.help,
fieldset.settings select + p.help {
margin-top: 1rem;
}
fieldset.settings li .label {
margin: 1rem 0 1.25rem;
}
fieldset.settings:first-of-type {
margin-top: 0.5rem;
border-top: none;
}
fieldset.settings > legend + .help {
position: absolute;
margin: 1.75rem 0 0 -27.5rem;
width: 22rem;
}
fieldset.settings > legend + .help p {
margin: 0 0 1.5rem;
}
fieldset.settings > *:first-child {
margin-top: 0;
}
fieldset.settings fieldset {
margin-top: 0.5rem;
padding-bottom: 0;
border-top: 0.1rem solid #ddc;
}
fieldset.settings fieldset legend {
display: inline;
margin: 0;
padding: 0;
font-weight: normal;
line-height: 1.5;
text-indent: 0;
background: #fff;
color: #665;
}
@media screen and (max-width: 700px) {
fieldset.settings {
padding-left: 0;
}
fieldset.settings:first-of-type {
margin: 1.5rem 1.8rem 1rem;
border-top: 0.1rem solid rgba(0, 0, 0, 0.1);
}
fieldset.settings > legend {
position: relative;
text-indent: 0;
padding: 0 1rem 0 0;
}
fieldset.settings > legend + .help {
position: relative;
margin: 0 0 1.5rem;
width: auto;
}
}
/* Condensed, pickable settings, e. g. email gateways */
.active .settings.condensed:not(.pickable) {
margin-bottom: 0.5rem;
}
.active .settings.condensed:not(.pickable) label {
margin-bottom: 0;
}
.active .settings.pickable.condensed {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.active .settings.pickable.condensed {
border-top: 0;
padding-top: 0;
}
.active .settings.pickable.condensed legend {
display: none;
}
/*--------------------------------------------------------------------------
Password
--------------------------------------------------------------------------*/
#password {
border: none;
padding: 0;
margin: 0 0 0 -1.5rem;
}
#password legend {
padding: 0 0 0 1.5rem;
margin: 0 !important;
color: #222;
line-height: 1.5;
text-shadow: none;
}
#password i {
position: absolute;
top: -1rem;
right: 0;
}
div.password {
position: absolute;
left: 0;
width: 100%;
padding: 0 0 0 27.5rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index: 1000;
}
@media screen and (max-width: 700px) {
div.password {
padding: 0;
}
}
/*--------------------------------------------------------------------------
Index page
--------------------------------------------------------------------------*/
.page-index h2,
.index h2 {
border: none;
}
.page-index form,
.index form {
margin: 0;
padding: 0;
}
.page-index .actions,
.index .actions {
text-align: right;
padding: 3rem 1.8rem 0;
height: 3.8rem;
}
.page-index .actions + ul.page,
.index .actions + ul.page {
margin-top: -5.8rem;
}
/* Pagination */
ul.page {
margin: -6.1rem 0 0;
padding: 2.3rem 5rem 0 1.9rem;
height: 3.6rem;
color: #9e9e9e;
cursor: default;
}
ul.page li {
display: inline;
margin-right: 0.75rem;
}
ul.page a {
margin: 0 -0.67rem;
padding: 0.67rem;
border-bottom: none;
}
ul.page form {
display: inline-block;
border: 0.1rem solid transparent;
padding: 0;
min-height: 2rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 0.4rem;
}
ul.page:hover form {
border-color: #dedede;
}
ul.page form:hover,
ul.page form.active {
border-color: rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0 0 0.7rem rgba(0, 0, 0, 0.1);
box-shadow: 0 0 0.7rem rgba(0, 0, 0, 0.1);
}
ul.page form.invalid {
background-color: #fff9a2;
border-color: rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0 0 0.7rem rgba(0, 0, 0, 0.1);
box-shadow: 0 0 0.7rem rgba(0, 0, 0, 0.1);
}
ul.page form.invalid input {
background-color: #fff9a2;
}
ul.page input {
text-align: center !important;
height: 20px;
border: none;
outline: none;
line-height: 1;
color: #666;
border-radius: 0.4rem;
padding: 0;
-webkit-box-shadow: none;
box-shadow: none;
font-size: 1rem;
margin: 0;
}
ul.page form:hover input {
color: #9e9e9e;
}
ul.page form.active input,
ul.page input:focus {
color: #000;
}
ul.page form span {
visibility: hidden;
}
/* Data Sources */
#blueprints-datasources table td.pages {
width: 30%;
}
/*--------------------------------------------------------------------------
Single page
--------------------------------------------------------------------------*/
.field {
min-height: 4.7rem;
margin-bottom: 1.5rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Checkboxes */
div.field-checkbox {
min-height: 1.6rem;
}
div.field-checkbox:first-child {
margin-top: 2rem;
margin-bottom: 2.6rem;
}
/* File uploads */
.file input {
margin: -0.3rem 0;
font: inherit;
}
.file span.frame {
text-align: left;
margin-top: 0.1rem;
}
.file span.frame span {
float: left;
max-width: 50%;
overflow: hidden;
}
.file a {
word-wrap: break-word;
overflow-wrap: break-word;
}
.file a,
.file a:hover {
color: #3f69a5;
}
.file em {
float: right;
color: #998;
border-bottom: 0.1rem solid rgba(153, 153, 136, 0.3);
font-style: normal;
cursor: pointer;
}
.file em:hover {
color: #d42;
border-bottom-color: rgba(221, 68, 34, 0.3);
}
/* Actions */
.page-single #contents .actions,
.single #contents .actions {
clear: both;
border-top: 0.1rem solid rgba(0, 0, 0, 0.1);
padding: 1.75rem 0 0;
margin: 0 1.8rem;
}
.page-single #contents .columns .actions,
.single #contents .columns .actions {
margin: 0;
}
.page-single #contents .actions input,
.single #contents .actions input {
float: right;
margin-left: 1rem;
}
.page-single #contents .actions button,
.single #contents .actions button {
float: left;
margin-left: 0;
}
/*--------------------------------------------------------------------
Misc
--------------------------------------------------------------------*/
#utilities > li {
min-height: 3rem;
line-height: 3rem;
padding: 0 1rem;
}
#utilities > li:nth-child(2n) {
background: #FFF;
}
#utilities > li.selected {
background: #668abe;
}
#version {
color: #9E9E9E;
margin: 3.3rem 0 0 1.9rem;
float: left;
}
.actions #version {
margin: 0.5rem 0 0;
}
#fields p.help.toggle a {
color: #808080;
font-weight: normal;
}
/* JavaScript interactions */
.js-animate {
pointer-events: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment