silverstripe-framework/admin/css/screen.css

/** This file is the central collection of included modules, links to custom SCSS files, and any global SCSS variable definitions.  DO NOT ADD stylesheet rules to this file directly!  Note: By prefixing files with an underscore, they won't create individual CSS files. */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }

body { line-height: 1; color: black; background: white; }

ol, ul { list-style: none; }

table { border-collapse: separate; border-spacing: 0; vertical-align: middle; }

caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }

q, blockquote { quotes: "" ""; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; }

a img { border: none; }

@charset "UTF-8";
/** This file only contains color definitions. Please put any further formatting into _style.scss. */
/** This file defines the jstree base styling (see http://jstree.com), as well as any customizations (see bottom of file).  The styles are usually added through jstree.js on DOM load,  but we need it earlier in order to correctly display the uninitialized tree. */
.jstree ul { display: block; margin: 0 0 0 0; padding: 0 0 0 0; list-style-type: none; }
.jstree li { display: block; margin: 0 0 0 0; padding: 0 0 0 0; list-style-type: none; display: block; min-height: 18px; line-height: 18px; white-space: nowrap; margin-left: 18px; min-width: 18px; }
.jstree ins { display: inline-block; text-decoration: none; width: 18px; height: 18px; margin: 0 0 0 0; padding: 0; }
.jstree a { display: inline-block; line-height: 16px; height: 16px; color: black; white-space: nowrap; text-decoration: none; padding: 1px 2px; margin: 0; }
.jstree a:focus { outline: none; }
.jstree a > ins { height: 16px; width: 16px; }
.jstree a > .jstree-icon { margin-right: 3px; }
.jstree li.jstree-open > ul { display: block; }
.jstree li.jstree-closed > ul { display: none; }
.jstree li.disabled a { color: #aaaaaa; }

.jstree-rtl a > .jstree-icon { margin-left: 3px; margin-right: 0; }
.jstree-rtl li { margin-left: 0; margin-right: 18px; }

.jstree-rtl > ul > li { margin-right: 0px; }

.jstree > ul > li { margin-left: 0px; }

#vakata-dragged { display: block; margin: 0 0 0 0; padding: 4px 4px 4px 24px; position: absolute; top: -2000px; line-height: 16px; z-index: 10000; }

#vakata-contextmenu { display: block; visibility: hidden; left: 0; top: -200px; position: absolute; margin: 0; padding: 0; min-width: 180px; background: #ebebeb; border: 1px solid silver; z-index: 10000; *width: 180px; }

#vakata-contextmenu ul { min-width: 180px; *width: 180px; }

#vakata-contextmenu ul, #vakata-contextmenu li { margin: 0; padding: 0; list-style-type: none; display: block; }

#vakata-contextmenu li { line-height: 20px; min-height: 20px; position: relative; padding: 0px; }

#vakata-contextmenu li a { padding: 1px 6px; line-height: 17px; display: block; text-decoration: none; margin: 1px 1px 0 1px; }

#vakata-contextmenu li ins { float: left; width: 16px; height: 16px; text-decoration: none; margin-right: 2px; }

#vakata-contextmenu li a:hover, #vakata-contextmenu li.vakata-hover > a { background: gray; color: white; }

#vakata-contextmenu li ul { display: none; position: absolute; top: -2px; left: 100%; background: #ebebeb; border: 1px solid gray; }

#vakata-contextmenu .right { right: 100%; left: auto; }

#vakata-contextmenu .bottom { bottom: -1px; top: auto; }

#vakata-contextmenu li.vakata-separator { min-height: 0; height: 1px; line-height: 1px; font-size: 1px; overflow: hidden; margin: 0 2px; background: silver; /* border-top:1px solid #fefefe; */ padding: 0; }

.jstree ul, .jstree li { display: block; margin: 0 0 0 0; padding: 0 0 0 0; list-style-type: none; }

.jstree li { display: block; min-height: 18px; line-height: 18px; white-space: nowrap; margin-left: 18px; min-width: 18px; }

.jstree-rtl li { margin-left: 0; margin-right: 18px; }

.jstree > ul > li { margin-left: 0px; }

.jstree-rtl > ul > li { margin-right: 0px; }

.jstree ins { display: inline-block; text-decoration: none; width: 18px; height: 18px; margin: 0 0 0 0; padding: 0; }

.jstree a { display: inline-block; line-height: 16px; height: 16px; color: black; white-space: nowrap; text-decoration: none; padding: 1px 2px; margin: 0; }

.jstree a:focus { outline: none; }

.jstree a > ins { height: 16px; width: 16px; }

.jstree a > .jstree-icon { margin-right: 3px; }

.jstree-rtl a > .jstree-icon { margin-left: 3px; margin-right: 0; }

li.jstree-open > ul { display: block; }

li.jstree-closed > ul { display: none; }

#vakata-dragged ins { display: block; text-decoration: none; width: 16px; height: 16px; margin: 0 0 0 0; padding: 0; position: absolute; top: 4px; left: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-border-radius: 4px; }

#vakata-dragged .jstree-ok { background: green; }

#vakata-dragged .jstree-invalid { background: red; }

#jstree-marker { padding: 0; margin: 0; font-size: 12px; overflow: hidden; height: 12px; width: 8px; position: absolute; top: -30px; z-index: 10001; background-repeat: no-repeat; display: none; background-color: transparent; text-shadow: 1px 1px 1px white; color: black; line-height: 10px; }

#jstree-marker-line { padding: 0; margin: 0; line-height: 0%; font-size: 1px; overflow: hidden; height: 1px; width: 100px; position: absolute; top: -30px; z-index: 10000; background-repeat: no-repeat; display: none; background-color: #456c43; cursor: pointer; border: 1px solid #eeeeee; border-left: 0; -moz-box-shadow: 0px 0px 2px #666; -webkit-box-shadow: 0px 0px 2px #666; box-shadow: 0px 0px 2px #666; -moz-border-radius: 1px; border-radius: 1px; -webkit-border-radius: 1px; }

.jstree .jstree-real-checkbox { display: none; }

.jstree-themeroller .ui-icon { overflow: visible; }

.jstree-themeroller a { padding: 0 2px; }

.jstree-themeroller .jstree-no-icon { display: none; }

.jstree .jstree-wholerow-real { position: relative; z-index: 1; }

.jstree .jstree-wholerow-real li { cursor: pointer; }

.jstree .jstree-wholerow-real a { border-left-color: transparent !important; border-right-color: transparent !important; }

.jstree .jstree-wholerow { position: relative; z-index: 0; height: 0; }

.jstree .jstree-wholerow ul, .jstree .jstree-wholerow li { width: 100%; }

.jstree .jstree-wholerow, .jstree .jstree-wholerow ul, .jstree .jstree-wholerow li, .jstree .jstree-wholerow a { margin: 0 !important; padding: 0 !important; }

.jstree .jstree-wholerow, .jstree .jstree-wholerow ul, .jstree .jstree-wholerow li { background: transparent !important; }

.jstree .jstree-wholerow ins, .jstree .jstree-wholerow span, .jstree .jstree-wholerow input { display: none !important; }

.jstree .jstree-wholerow a, .jstree .jstree-wholerow a:hover { text-indent: -9999px !important; width: 100%; padding: 0 !important; border-right-width: 0px !important; border-left-width: 0px !important; }

.jstree .jstree-wholerow-span { position: absolute; left: 0; margin: 0px; padding: 0; height: 18px; border-width: 0; padding: 0; z-index: 0; }

.cms .jstree-apple.jstree-focused { background: none; }
.cms .jstree-apple > ul { background: none; }

.cms-menu { z-index: 10; background-color: #ebeff1; -moz-box-shadow: #aaaaaa 3px 0 3px 0; -webkit-box-shadow: #aaaaaa 3px 0 3px 0; -o-box-shadow: #aaaaaa 3px 0 3px 0; box-shadow: #aaaaaa 3px 0 3px 0; }
.cms-menu a { text-decoration: none; }

.cms-menu-list li { background-color: #b0bfc6; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #b0bfc6), color-stop(100%, #758f9b)); background-image: -moz-linear-gradient(top, #b0bfc6 0%, #758f9b 100%); background-image: linear-gradient(top, #b0bfc6 0%, #758f9b 100%); border-bottom: 1px solid #aaaaaa; }
.cms-menu-list li a { display: block; height: 32px; vertical-align: middle; font-size: 14px; text-shadow: #aaaaaa 1px 1px 1px; color: #333333; padding: 5px; }
.cms-menu-list li a .icon { display: block; float: left; margin-right: 5px; background: url('../images/icons-32.png?1303987682') no-repeat; width: 32px; height: 32px; overflow: hidden; background-position: 0px 0px; }
.cms-menu-list li a .text { display: block; padding-top: 10px; }
.cms-menu-list li.current { background-color: #338dc1; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #338dc1), color-stop(100%, #1e5270)); background-image: -moz-linear-gradient(top, #338dc1 0%, #1e5270 100%); background-image: linear-gradient(top, #338dc1 0%, #1e5270 100%); }
.cms-menu-list li.current li { background-color: #2e7ead; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #2e7ead), color-stop(100%, #287099)); background-image: -moz-linear-gradient(top, #2e7ead 0%, #287099 100%); background-image: linear-gradient(top, #2e7ead 0%, #287099 100%); }
.cms-menu-list li.current a { color: white; text-shadow: #333333 1px 1px 1px; }
.cms-menu-list li li:first { -moz-box-shadow: #333333 0 4px 4px 0; -webkit-box-shadow: #333333 0 4px 4px 0; -o-box-shadow: #333333 0 4px 4px 0; box-shadow: #333333 0 4px 4px 0; }
.cms-menu-list li li a { font-size: 12px; text-shadow: #333333 1px 1px 1px; margin: 0; padding-left: 30px; color: white; }
.cms-menu-list li li.current a { font-weight: bold; }
.cms-menu-list li#Menu-CMSMain a .icon { background-position: 0px 0px; }
.cms-menu-list li#Menu-CMSMain.current a .icon, .cms-menu-list li#Menu-CMSMain a:hover .icon { background-position: -32px 0px; }
.cms-menu-list li#Menu-AssetAdmin a .icon { background-position: 0px -32px; }
.cms-menu-list li#Menu-AssetAdmin.current a .icon, .cms-menu-list li#Menu-AssetAdmin a:hover .icon { background-position: -32px -32px; }

/** This file defines common styles for form elements used throughout the CMS interface. It is an addition to the base styles defined in sapphire/css/Form.css. */
.field { display: block; padding: 10px 0; border-bottom: 1px solid #aaaaaa; }
.field label { float: left; width: 10em; }
.field .middleColumn { margin-left: 10em; }
.field .middleColumn .field { display: inline; padding: 0; border: none; }
.field .middleColumn label { float: none; width: auto; }

form.nostyle .field { display: inline; padding: 0; border: 0; }
form.nostyle label { float: none; width: auto; }
form.nostyle .middleColumn { margin-left: 0; }

.field.nolabel .middleColumn { margin-left: 0; }

input, textarea { -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #ebeff1), color-stop(50%, #ffffff), color-stop(100%, #ebeff1)); background-image: -moz-linear-gradient(top, #ebeff1 0%, #ffffff 50%, #ebeff1 100%); background-image: linear-gradient(top, #ebeff1 0%, #ffffff 50%, #ebeff1 100%); border: 1px solid #aaaaaa; padding: 3px; }

input.loading, input.ui-state-default.loading, .ui-widget-content input.ui-state-default.loading, .ui-widget-header input.ui-state-default.loading { padding-left: 16px; background: #ebeff1 url(../../images/network-save.gif) no-repeat center left; }

.ss-ui-button.ss-ui-action-constructive, .ui-widget-content .ss-ui-button.ss-ui-action-constructive, .ui-widget-header .ss-ui-button.ss-ui-action-constructive { background: none; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #77b53f), color-stop(100%, #456925)); background-image: -moz-linear-gradient(top, #77b53f 0%, #456925 100%); background-image: linear-gradient(top, #77b53f 0%, #456925 100%); color: white; }

.ss-ui-button.ss-ui-action-destructive, .ui-widget-content .ss-ui-button.ss-ui-action-destructive, .ui-widget-header .ss-ui-button.ss-ui-action-destructive { color: red; }

.ss-ui-button.ss-ui-action-minor, .ui-widget-content .ss-ui-button.ss-ui-action-minor .ui-widget-header .ss-ui-button.ss-ui-action-minor { background: none; padding: 0; border: 0; color: #333333; text-decoration: underline; }

.cms-edit-form { padding-bottom: 20px; }
.cms-edit-form .text input, .cms-edit-form textarea { width: 300px; }
.cms-edit-form .Actions { text-align: right; }

.cms-content-tools .field label { float: none; width: auto; }
.cms-content-tools .field .middleColumn { margin-left: 0; }

.field#ViewerGroups label, .field#EditorGroups label, .field#CreateTopLevelGroups label { display: none; }

/** This file defines CMS-specific customizations to the jQuery UI theme. Every rule in this file should be wrapped in the '.cms' selector (to make it more specific), and contain ONLY overwritten jQuery UI rules (with 'ui-' prefix).  This file should be fairly short, as we're using our own custom jQuery UI theme already. TODO Add theme reference  Use _style.scss to add more generic style information, and read the jQuery UI theming API: http://jqueryui.com/docs/Theming/API */
.cms .ui-tabs { padding: 0; }
.cms .ui-tabs .ui-widget-header { border: 0; background: none; }
.cms .ui-widget-content, .cms .ui-tabs .ui-tabs-panel { color: #444444; font-size: 1em; border: 0; background: #ebeff1; }
.cms .ui-widget-header { background: #ebeff1; border: 0; }
.cms .ss-ui-button { padding: 5px; text-decoration: none; }

/** This file defines the 'theme' of the CMS: Colors, fonts, backgrounds, and detailed alignments. Together with _layout.css it provides the presentational backbone to the CMS. Ideally a developer should be able to exchange this file with his own theme easily.  Please don't put any dimension, display or float information on major structural components like '.cms-container' or '.cms-header' in here, use the _layout.scss file instead.  Use SCSS variable definitions in screen.css to avoid repeating styles like background colours or padding dimensions. See _colours.scss to get started.  To avoid this file getting too large and complicated, it is encouraged to create new SCSS files for larger components like the CMS menu or tree (see _tree.scss and _menu.scss). */
body { font-size: 13px; font-family: Verdana, Arial, sans-serif; color: #444444; }
body html, body body, body div, body span, body applet, body object, body iframe, body h1, body h2, body h3, body h4, body h5, body h6, body p, body blockquote, body pre, body a, body abbr, body acronym, body address, body big, body cite, body code, body del, body dfn, body em, body font, body img, body ins, body kbd, body q, body s, body samp, body small, body strike, body strong, body sub, body sup, body tt, body var, body dl, body dt, body dd, body ol, body ul, body li, body fieldset, body form, body label, body legend, body table, body caption, body tbody, body tfoot, body thead, body tr, body th, body td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
body body { line-height: 1; color: black; background: white; }
body ol, body ul { list-style: none; }
body table { border-collapse: separate; border-spacing: 0; vertical-align: middle; }
body caption, body th, body td { text-align: left; font-weight: normal; vertical-align: middle; }
body q, body blockquote { quotes: "" ""; }
body q:before, body q:after, body blockquote:before, body blockquote:after { content: ""; }
body a img { border: none; }

body * { font-size: 13px; }

body .ui-widget { font-size: 1em; }

strong { font-weight: bold; }

.cms-content-header { background-color: #afbfc7; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #afbfc7), color-stop(100%, #91a7b2)); background-image: -moz-linear-gradient(top, #afbfc7 0%, #91a7b2 100%); background-image: linear-gradient(top, #afbfc7 0%, #91a7b2 100%); }
.cms-content-header h2 { float: left; padding: 10px; font-size: 14px; font-weight: bold; }
.cms-content-header .cms-content-header-tabs { float: left; }

.ui-tabs .cms-content-header .ui-tabs-nav li { height: 40px; }
.ui-tabs .cms-content-header .ui-tabs-nav li a { font-weight: bold; font-size: 11px; padding-top: 1em; }
.ui-tabs .cms-content-header .ui-state-default, .ui-tabs .cms-content-header .ui-widget-content .ui-state-default, .ui-tabs .cms-content-header .ui-widget-header .ui-state-default { background-color: #dddddd; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(100%, #b7b7b7)); background-image: -moz-linear-gradient(top, #dddddd 0%, #b7b7b7 100%); background-image: linear-gradient(top, #dddddd 0%, #b7b7b7 100%); }
.ui-tabs .cms-content-header .ui-state-active, .ui-tabs .cms-content-header .ui-widget-content .ui-state-active, .ui-tabs .cms-content-header .ui-widget-header .ui-state-active { background: #ebeff1; }

.cms-content-tools { background-color: #dce3e6; padding: 10px; }

.cms-header { background-color: #00111d; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #00111d), color-stop(50%, #003050), color-stop(100%, #00111d)); background-image: -moz-linear-gradient(top, #00111d 0%, #003050 50%, #00111d 100%); background-image: linear-gradient(top, #00111d 0%, #003050 50%, #00111d 100%); }
.cms-header * { color: white; }

.cms-logo .version { display: none; }
.cms-logo * { color: #3ebae0; }
.cms-logo a { display: inline-block; height: 25px; width: 25px; float: left; margin-right: 10px; background: url(../images/logo_small.png) no-repeat; text-indent: -9999em; }

.cms-login-status .logout-link { display: inline-block; height: 25px; width: 25px; float: left; margin-right: 10px; background: url(../images/logout.png) no-repeat; text-indent: -9999em; }

.ss-loading-screen, .ss-loading-screen .loading-logo { width: 100%; height: 100%; overflow: hidden; position: absolute; background: #fff; background: -moz-radial-gradient(50% 50% 180deg, circle cover, white, #efefef, #c7c7c7 100%); background: -webkit-gradient(radial, 50% 50%, 350, 50% 50%, 0, from(#e3e3e3), to(white)); z-index: 100000; margin: 0; padding: 0; }

.ss-loading-screen .loading-logo { background-url: url(../images/logo.gif); background-repeat: no-repeat; background-color: transparent; background-position: 50% 50%; }
.ss-loading-screen p { width: 100%; text-align: center; position: absolute; bottom: 80px; }
.ss-loading-screen p span.notice { display: inline-block; font-size: 14px; padding: 10px 20px; color: #dc7f00; border: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; }
.ss-loading-screen .loading-animation { display: none; position: absolute; left: 49%; top: 75%; }

/** Messages (see sapphire/css/Form.css) */
.message { margin: 1em 0; padding: 0.5em; font-weight: bold; border: 1px black solid; }
.message.notice { background-color: #ffbe66; border-color: #ff9300; }
.message.warning { background-color: #ffbe66; border-color: #ff9300; }
.message.error { background-color: #ffbe66; border-color: #ff9300; }

.ModelAdmin .cms-content-tools { width: 300px; }
.ModelAdmin .ResultAssemblyBlock { display: none; }

.cms-page-add-form-dialog #PageType li { clear: left; height: 40px; border-bottom: 1px solid #333333; }
.cms-page-add-form-dialog #PageType li:hover, .cms-page-add-form-dialog #PageType li.selected { background-color: #ffff99; }
.cms-page-add-form-dialog #PageType li input, .cms-page-add-form-dialog #PageType li label, .cms-page-add-form-dialog #PageType li .icon, .cms-page-add-form-dialog #PageType li .title { float: left; }
.cms-page-add-form-dialog #PageType li .icon { width: 20px; }
.cms-page-add-form-dialog #PageType li .title { width: 100px; font-weight: bold; }
.cms-page-add-form-dialog #PageType li .description { font-style: italic; }

.cms-content-toolbar > * { display: inline-block; }
.cms-content-toolbar .cms-tree-view-modes * { display: inline-block; }
.cms-content-toolbar .cms-content-batchactions form > * { display: inline-block; }

.cms-preview-header { background-color: #FFBE66; padding: 10px; font-weight: bold; }

form.member-profile-form #CsvFile .middleColumn { background: none !important; }
form.member-profile-form .advanced h4 { margin-bottom: .5em; }
form.member-profile-form .Actions { text-align: left; border: 0; }
form.member-profile-form input.customFormat { border: 1px solid #ccc !important; padding: 3px; margin-left: 2px; }
form.member-profile-form .formattingHelpToggle { font-size: 11px; padding: 3px; }
form.member-profile-form .formattingHelpText { margin: 5px auto; color: #333; padding: 5px 10px; width: 90%; background: #fff; border: 1px solid #ccc; }
form.member-profile-form .formattingHelpText ul { padding: 0; }
form.member-profile-form .formattingHelpText li { font-size: 11px; color: #333; margin-bottom: 2px; }

.cms-preview { background-color: #b0bfc6; }
.cms-preview .cms-preview-toggle { cursor: pointer; }
.cms-preview .cms-preview-toggle a { color: white; font-weight: bold; text-decoration: none; }

.cms-switch-view a { padding-right: 1em; }