Created
February 11, 2014 21:00
-
-
Save designermonkey/8944063 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 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