mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-06-29 07:59:31 +02:00
ENHANCEMENT Using SCSS variables for colour definitions in CMS, setting to greyscale theme for now in order to communicate the early status of the UI work
This commit is contained in:
Ingo Schommer
parent
a2b39e55c1
commit
4ddd69f85f
|
|
@ -1,4 +1,5 @@
|
|||
@charset "UTF-8";
|
||||
/** 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. */
|
||||
/* line 14, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.10.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
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; }
|
||||
|
||||
|
|
@ -22,6 +23,7 @@ q:before, q:after, blockquote:before, blockquote:after { content: ""; }
|
|||
/* line 27, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.10.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
a img { border: none; }
|
||||
|
||||
/** This file only contains color definitions. Please put any further formatting into _style.scss. */
|
||||
/** This file defines the structural layout of the CMS interface. Ideally, you should be able to lay out the base elements of the CMS with only this file. Please put any presentational definitions (color, fonts, backgrounds, paddings) into _style.scss or _uitheme.scss instead. */
|
||||
/* line 9, ../scss/_layout.scss */
|
||||
html, body { width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden; }
|
||||
|
|
@ -32,27 +34,27 @@ html, body { width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden;
|
|||
/* line 21, ../scss/_layout.scss */
|
||||
.cms-menu { width: 250px; overflow: auto; }
|
||||
|
||||
/* line 25, ../scss/_layout.scss */
|
||||
/* line 33, ../scss/_layout.scss */
|
||||
.cms-menu, .cms-content, .cms-content-header, .cms-content-tools, .cms-content-form { display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; vertical-align: middle; *vertical-align: auto; }
|
||||
/* line 7, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.10.6/frameworks/compass/stylesheets/compass/css3/_inline-block.scss */
|
||||
.cms-menu, .cms-content, .cms-content-header, .cms-content-tools, .cms-content-form { *display: inline; }
|
||||
|
||||
/* line 29, ../scss/_layout.scss */
|
||||
/* line 37, ../scss/_layout.scss */
|
||||
.cms-content-tools { width: 250px; overflow: auto; }
|
||||
|
||||
/* line 34, ../scss/_layout.scss */
|
||||
/* line 42, ../scss/_layout.scss */
|
||||
.cms-content-form { overflow: auto; }
|
||||
|
||||
/* line 38, ../scss/_layout.scss */
|
||||
/* line 46, ../scss/_layout.scss */
|
||||
.cms-content-header { height: 40px; overflow: hidden; }
|
||||
|
||||
/* line 43, ../scss/_layout.scss */
|
||||
/* line 51, ../scss/_layout.scss */
|
||||
.cms-content-actions { padding: 10px; }
|
||||
|
||||
/* line 47, ../scss/_layout.scss */
|
||||
/* line 55, ../scss/_layout.scss */
|
||||
.cms-logo { height: 30px; overflow: hidden; vertical-align: middle; }
|
||||
|
||||
/* line 53, ../scss/_layout.scss */
|
||||
/* line 61, ../scss/_layout.scss */
|
||||
.cms-login-status { height: 30px; overflow: hidden; vertical-align: middle; }
|
||||
|
||||
/** 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. */
|
||||
|
|
@ -220,107 +222,82 @@ li.jstree-closed > ul { display: none; }
|
|||
/* line 347, ../scss/_tree.scss */
|
||||
.jstree .jstree-wholerow-span { position: absolute; left: 0; margin: 0px; padding: 0; height: 18px; border-width: 0; padding: 0; z-index: 0; }
|
||||
|
||||
/* line 360, ../scss/_tree.scss */
|
||||
.cms .jstree-apple.jstree-focused { background: none; }
|
||||
/* line 363, ../scss/_tree.scss */
|
||||
.cms .jstree-apple > ul { background: none; }
|
||||
|
||||
/* line 1, ../scss/_menu.scss */
|
||||
.cms-menu { z-index: 10; background-color: #b0bfc6; -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 { 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; }
|
||||
/* line 6, ../scss/_menu.scss */
|
||||
.cms-menu a { text-decoration: none; }
|
||||
|
||||
/* line 12, ../scss/_menu.scss */
|
||||
.cms-menu-list li { background-color: #afbdc6; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #afbdc6), color-stop(100%, #8ea4b2)); background-image: -moz-linear-gradient(top, #afbdc6 0%, #8ea4b2 100%); background-image: linear-gradient(top, #afbdc6 0%, #8ea4b2 100%); border-bottom: 1px solid #aaa; }
|
||||
/* line 17, ../scss/_menu.scss */
|
||||
.cms-menu-list li a { display: block; height: 32px; vertical-align: middle; font-size: 14px; text-shadow: #dddddd 1px 1px 1px; color: #333; margin: 5px; }
|
||||
/* line 26, ../scss/_menu.scss */
|
||||
.cms-menu-list li a .icon { display: block; float: left; margin-right: 5px; background: url('../images/icons-32.png?1302929241') no-repeat; width: 32px; height: 32px; overflow: hidden; background-position: 0px 0px; }
|
||||
/* line 34, ../scss/_menu.scss */
|
||||
.cms-menu-list li { 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; }
|
||||
/* line 19, ../scss/_menu.scss */
|
||||
.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; }
|
||||
/* line 28, ../scss/_menu.scss */
|
||||
.cms-menu-list li a .icon { display: block; float: left; margin-right: 5px; background: url('../images/icons-32.png?1303211593') no-repeat; width: 32px; height: 32px; overflow: hidden; background-position: 0px 0px; }
|
||||
/* line 36, ../scss/_menu.scss */
|
||||
.cms-menu-list li a .text { display: block; padding-top: 10px; }
|
||||
/* line 40, ../scss/_menu.scss */
|
||||
.cms-menu-list li.current { background-color: #338dc1; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #338dc1), color-stop(100%, #338dc1)); background-image: -moz-linear-gradient(top, #338dc1 0%, #338dc1 100%); background-image: linear-gradient(top, #338dc1 0%, #338dc1 100%); -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; }
|
||||
/* line 45, ../scss/_menu.scss */
|
||||
/* line 42, ../scss/_menu.scss */
|
||||
.cms-menu-list li.current { 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%); }
|
||||
/* line 48, ../scss/_menu.scss */
|
||||
.cms-menu-list li.current li { 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%); }
|
||||
/* line 55, ../scss/_menu.scss */
|
||||
.cms-menu-list li.current a { color: white; text-shadow: #333333 1px 1px 1px; }
|
||||
/* line 52, ../scss/_menu.scss */
|
||||
.cms-menu-list li li { background-color: #1d76ae; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #1d76ae), color-stop(100%, #1d76ae)); background-image: -moz-linear-gradient(top, #1d76ae 0%, #1d76ae 100%); background-image: linear-gradient(top, #1d76ae 0%, #1d76ae 100%); }
|
||||
/* line 56, ../scss/_menu.scss */
|
||||
/* line 65, ../scss/_menu.scss */
|
||||
.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; }
|
||||
/* line 69, ../scss/_menu.scss */
|
||||
.cms-menu-list li li a { font-size: 12px; text-shadow: #333333 1px 1px 1px; margin: 0; padding-left: 30px; color: white; }
|
||||
/* line 64, ../scss/_menu.scss */
|
||||
/* line 77, ../scss/_menu.scss */
|
||||
.cms-menu-list li li.current a { font-weight: bold; }
|
||||
/* line 71, ../scss/_menu.scss */
|
||||
/* line 84, ../scss/_menu.scss */
|
||||
.cms-menu-list li#Menu-CMSMain a .icon { background-position: 0px 0px; }
|
||||
/* line 72, ../scss/_menu.scss */
|
||||
/* line 85, ../scss/_menu.scss */
|
||||
.cms-menu-list li#Menu-CMSMain.current a .icon, .cms-menu-list li#Menu-CMSMain a:hover .icon { background-position: -32px 0px; }
|
||||
/* line 73, ../scss/_menu.scss */
|
||||
/* line 86, ../scss/_menu.scss */
|
||||
.cms-menu-list li#Menu-AssetAdmin a .icon { background-position: 0px -32px; }
|
||||
/* line 74, ../scss/_menu.scss */
|
||||
.cms-menu-list li#Menu-AssetAdmin.current a .icon, .cms-menu-list li#Menu-AssetAdmin a:hover .icon { background-position: -32px -32px; }
|
||||
|
||||
/* line 3, ../scss/_forms.scss */
|
||||
.cms input, .cms textarea { background-color: #f9f9f9; }
|
||||
/* line 7, ../scss/_forms.scss */
|
||||
.cms input.loading { padding-left: 16px; background: white url(../../images/network-save.gif) no-repeat center left; }
|
||||
/* line 12, ../scss/_forms.scss */
|
||||
.cms .edit-form { padding-bottom: 20px; }
|
||||
/* line 17, ../scss/_forms.scss */
|
||||
.cms .edit-form > fieldset > .ss-tabset > ul { display: none; }
|
||||
/* line 22, ../scss/_forms.scss */
|
||||
.cms .edit-form .Actions { text-align: right; }
|
||||
|
||||
/* line 12, ../scss/_menu.scss */
|
||||
.cms-menu-list li { background-color: #afbdc6; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #afbdc6), color-stop(100%, #8ea4b2)); background-image: -moz-linear-gradient(top, #afbdc6 0%, #8ea4b2 100%); background-image: linear-gradient(top, #afbdc6 0%, #8ea4b2 100%); border-bottom: 1px solid #aaa; }
|
||||
/* line 17, ../scss/_menu.scss */
|
||||
.cms-menu-list li a { display: block; height: 32px; vertical-align: middle; font-size: 14px; text-shadow: #dddddd 1px 1px 1px; color: #333; margin: 5px; }
|
||||
/* line 26, ../scss/_menu.scss */
|
||||
.cms-menu-list li a .icon { display: block; float: left; margin-right: 5px; background: url('../images/icons-32.png?1302933372') no-repeat; width: 32px; height: 32px; overflow: hidden; background-position: 0px 0px; }
|
||||
/* line 34, ../scss/_menu.scss */
|
||||
.cms-menu-list li a .text { display: block; padding-top: 10px; }
|
||||
/* line 40, ../scss/_menu.scss */
|
||||
.cms-menu-list li.current { background-color: #338dc1; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #338dc1), color-stop(100%, #338dc1)); background-image: -moz-linear-gradient(top, #338dc1 0%, #338dc1 100%); background-image: linear-gradient(top, #338dc1 0%, #338dc1 100%); -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; }
|
||||
/* line 45, ../scss/_menu.scss */
|
||||
.cms-menu-list li.current a { color: white; text-shadow: #333333 1px 1px 1px; }
|
||||
/* line 52, ../scss/_menu.scss */
|
||||
.cms-menu-list li li { background-color: #1d76ae; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #1d76ae), color-stop(100%, #1d76ae)); background-image: -moz-linear-gradient(top, #1d76ae 0%, #1d76ae 100%); background-image: linear-gradient(top, #1d76ae 0%, #1d76ae 100%); }
|
||||
/* line 56, ../scss/_menu.scss */
|
||||
.cms-menu-list li li a { font-size: 12px; text-shadow: #333333 1px 1px 1px; margin: 0; padding-left: 30px; color: white; }
|
||||
/* line 64, ../scss/_menu.scss */
|
||||
.cms-menu-list li li.current a { font-weight: bold; }
|
||||
/* line 71, ../scss/_menu.scss */
|
||||
.cms-menu-list li#Menu-CMSMain a .icon { background-position: 0px 0px; }
|
||||
/* line 72, ../scss/_menu.scss */
|
||||
.cms-menu-list li#Menu-CMSMain.current a .icon, .cms-menu-list li#Menu-CMSMain a:hover .icon { background-position: -32px 0px; }
|
||||
/* line 73, ../scss/_menu.scss */
|
||||
.cms-menu-list li#Menu-AssetAdmin a .icon { background-position: 0px -32px; }
|
||||
/* line 74, ../scss/_menu.scss */
|
||||
/* line 87, ../scss/_menu.scss */
|
||||
.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. */
|
||||
/* line 9, ../scss/_forms.scss */
|
||||
.cms input, .cms textarea { background-color: #f9f9f9; }
|
||||
/* line 13, ../scss/_forms.scss */
|
||||
.cms input.loading { padding-left: 16px; background: white url(../../images/network-save.gif) no-repeat center left; }
|
||||
.cms .field { display: block; padding: 10px 0; border-bottom: 1px solid #aaaaaa; }
|
||||
/* line 14, ../scss/_forms.scss */
|
||||
.cms .field label { float: left; width: 10em; }
|
||||
/* line 20, ../scss/_forms.scss */
|
||||
.cms .ui-state-default.ss-ui-action-constructive { background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #77b53f), color-stop(100%, #0c8a44)); background-image: -moz-linear-gradient(top, #77b53f 0%, #0c8a44 100%); background-image: linear-gradient(top, #77b53f 0%, #0c8a44 100%); color: white; }
|
||||
/* line 25, ../scss/_forms.scss */
|
||||
.cms .ui-state-default.ss-ui-action-destructive { color: red; }
|
||||
.cms .field .middleColumn { margin-left: 10em; }
|
||||
/* line 23, ../scss/_forms.scss */
|
||||
.cms .field .middleColumn .field { display: inline; padding: 0; border: none; }
|
||||
/* line 29, ../scss/_forms.scss */
|
||||
.cms .edit-form { padding-bottom: 20px; }
|
||||
/* line 33, ../scss/_forms.scss */
|
||||
.cms .edit-form > fieldset > .ss-tabset > ul { display: none; }
|
||||
/* line 38, ../scss/_forms.scss */
|
||||
.cms .edit-form .Actions { text-align: right; }
|
||||
.cms .field .middleColumn label { float: none; width: auto; }
|
||||
/* line 37, ../scss/_forms.scss */
|
||||
.cms input, .cms 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; }
|
||||
/* line 48, ../scss/_forms.scss */
|
||||
.cms input.loading { padding-left: 16px; background: #ebeff1 url(../../images/network-save.gif) no-repeat center left; }
|
||||
/* line 56, ../scss/_forms.scss */
|
||||
.cms .ss-ui-action-constructive, .cms .ui-widget-content .ss-ui-action-constructive, .cms .ui-widget-header .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; }
|
||||
/* line 67, ../scss/_forms.scss */
|
||||
.cms .ss-ui-action-destructive, .cms .ui-widget-content .ss-ui-action-destructive, .cms .ui-widget-header .ss-ui-action-destructive { color: red; }
|
||||
/* line 71, ../scss/_forms.scss */
|
||||
.cms .cms-edit-form { padding-bottom: 20px; }
|
||||
/* line 75, ../scss/_forms.scss */
|
||||
.cms .cms-edit-form .Actions { text-align: right; }
|
||||
|
||||
/** 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. */
|
||||
/* line 13, ../scss/_uitheme.scss */
|
||||
.cms .ui-widget-content { background-color: #eef2f3; }
|
||||
/* line 17, ../scss/_uitheme.scss */
|
||||
/** 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 */
|
||||
/* line 14, ../scss/_uitheme.scss */
|
||||
.cms .ui-tabs { padding: 0; }
|
||||
/* line 21, ../scss/_uitheme.scss */
|
||||
.cms .ui-widget-content { border: 0; background-color: #eef2f3; }
|
||||
/* line 19, ../scss/_uitheme.scss */
|
||||
.cms .ui-widget-content, .cms .ui-tabs .ui-tabs-panel { color: #444444; font-size: 1em; border: 0; background: none; }
|
||||
/* line 26, ../scss/_uitheme.scss */
|
||||
.cms .cms-content-header .ui-widget-content { background: none; }
|
||||
/* line 30, ../scss/_uitheme.scss */
|
||||
.cms .ui-widget-header { background: none; border: 0; }
|
||||
/* line 31, ../scss/_uitheme.scss */
|
||||
.cms .ss-ui-button { padding: 5px; }
|
||||
|
||||
/** 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. 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). */
|
||||
/** 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). */
|
||||
/* line 18, ../scss/_style.scss */
|
||||
body { font-size: 13px; font-family: Verdana, Arial, sans-serif; }
|
||||
body { font-size: 13px; font-family: Verdana, Arial, sans-serif; color: #444444; }
|
||||
/* line 14, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.10.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
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; }
|
||||
/* line 17, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.10.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
|
|
@ -338,45 +315,62 @@ body q:before, body q:after, body blockquote:before, body blockquote:after { con
|
|||
/* line 27, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.10.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
body a img { border: none; }
|
||||
|
||||
/* line 24, ../scss/_style.scss */
|
||||
/* line 25, ../scss/_style.scss */
|
||||
body * { font-size: 13px; }
|
||||
|
||||
/* line 28, ../scss/_style.scss */
|
||||
/* line 29, ../scss/_style.scss */
|
||||
body .ui-widget { font-size: 1em; }
|
||||
|
||||
/* line 32, ../scss/_style.scss */
|
||||
.cms-content-header { background-color: #a0b2be; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #abbbc4), color-stop(100%, #93a8b6)); background-image: -moz-linear-gradient(top, #abbbc4 0%, #93a8b6 100%); background-image: linear-gradient(top, #abbbc4 0%, #93a8b6 100%); }
|
||||
/* line 36, ../scss/_style.scss */
|
||||
/* line 35, ../scss/_style.scss */
|
||||
.cms-content-header { 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%); }
|
||||
/* line 41, ../scss/_style.scss */
|
||||
.cms-content-header h2 { float: left; padding: 10px; font-size: 14px; font-weight: bold; }
|
||||
/* line 43, ../scss/_style.scss */
|
||||
.cms-content-header .cms-content-header-tabs { float: left; margin-top: 8px; }
|
||||
/* line 48, ../scss/_style.scss */
|
||||
.cms-content-header .cms-content-header-tabs { float: left; }
|
||||
/* line 52, ../scss/_style.scss */
|
||||
.cms-content-header .ui-tabs-nav li { height: 40px; }
|
||||
|
||||
/* line 53, ../scss/_style.scss */
|
||||
.cms-content-tools { background-color: #c6d7df; }
|
||||
/* line 61, ../scss/_style.scss */
|
||||
.cms-content-tools { background-color: #dce3e6; }
|
||||
|
||||
/* line 59, ../scss/_style.scss */
|
||||
.cms-header { padding: 10px; background-color: #002a43; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #002236), color-stop(50%, #003050), color-stop(100%, #002236)); background-image: -moz-linear-gradient(top, #002236 0%, #003050 50%, #002236 100%); background-image: linear-gradient(top, #002236 0%, #003050 50%, #002236 100%); }
|
||||
/* line 64, ../scss/_style.scss */
|
||||
/* line 67, ../scss/_style.scss */
|
||||
.cms-header { padding: 10px; 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%); }
|
||||
/* line 75, ../scss/_style.scss */
|
||||
.cms-header * { color: white; }
|
||||
|
||||
/* line 71, ../scss/_style.scss */
|
||||
/* line 82, ../scss/_style.scss */
|
||||
.cms-logo .version { display: none; }
|
||||
/* line 75, ../scss/_style.scss */
|
||||
/* line 86, ../scss/_style.scss */
|
||||
.cms-logo * { color: #3ebae0; }
|
||||
/* line 79, ../scss/_style.scss */
|
||||
/* line 90, ../scss/_style.scss */
|
||||
.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; }
|
||||
|
||||
/* line 92, ../scss/_style.scss */
|
||||
/* line 103, ../scss/_style.scss */
|
||||
.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; }
|
||||
|
||||
/* line 86, ../scss/_style.scss */
|
||||
/* line 117, ../scss/_style.scss */
|
||||
.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; }
|
||||
|
||||
/* line 100, ../scss/_style.scss */
|
||||
/* line 132, ../scss/_style.scss */
|
||||
.ss-loading-screen .loading-logo { background-url: url(../images/logo.gif); background-repeat: no-repeat; background-color: transparent; background-position: 50% 50%; }
|
||||
/* line 106, ../scss/_style.scss */
|
||||
/* line 138, ../scss/_style.scss */
|
||||
.ss-loading-screen p { width: 100%; text-align: center; position: absolute; bottom: 80px; }
|
||||
/* line 112, ../scss/_style.scss */
|
||||
.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; -moz-box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.1); -o-box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.1); }
|
||||
/* line 130, ../scss/_style.scss */
|
||||
/* line 144, ../scss/_style.scss */
|
||||
.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; }
|
||||
/* line 154, ../scss/_style.scss */
|
||||
.ss-loading-screen .loading-animation { display: none; position: absolute; left: 49%; top: 75%; }
|
||||
|
||||
/** Messages (see sapphire/css/Form.css) */
|
||||
/* line 173, ../scss/_style.scss */
|
||||
.message { margin: 1em 0; padding: 0.5em; font-weight: bold; border: 1px black solid; }
|
||||
/* line 179, ../scss/_style.scss */
|
||||
.message.notice { background-color: #ffbe66; border-color: #ff9300; }
|
||||
/* line 184, ../scss/_style.scss */
|
||||
.message.warning { background-color: #ffbe66; border-color: #ff9300; }
|
||||
/* line 188, ../scss/_style.scss */
|
||||
.message.error { background-color: #ffbe66; border-color: #ff9300; }
|
||||
|
||||
/* line 197, ../scss/_style.scss */
|
||||
.ModelAdmin .cms-content-tools { width: 300px; }
|
||||
/* line 202, ../scss/_style.scss */
|
||||
.ModelAdmin .ResultAssemblyBlock { display: none; }
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
42
admin/scss/_colours.scss
Normal file
42
admin/scss/_colours.scss
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
/**
|
||||
* This file only contains color definitions.
|
||||
* Please put any further formatting into _style.scss.
|
||||
*/
|
||||
|
||||
// colour definitions
|
||||
$color-base: #B0BFC6;
|
||||
$color-widget-bg: lighten($color-base, 20%);
|
||||
$color-dark-bg: #003050;
|
||||
$color-shadow-light: #aaa;
|
||||
$color-shadow-dark: #333;
|
||||
$color-menu-button: #338DC1; // darkened and desaturated as required
|
||||
$color-text: #444;
|
||||
$color-text-light: white;
|
||||
$color-text-light-link: white;
|
||||
$color-text-dark: #333;
|
||||
$color-text-dark-link: #3EBAE0;
|
||||
$color-button-constructive: #77b53f;
|
||||
$color-button-destructive: #f00;
|
||||
$color-warning: #FF9300;
|
||||
$color-error: #FF9300;
|
||||
$color-notice: #FF9300;
|
||||
|
||||
/*
|
||||
// simple grayscale theme
|
||||
$color-base: grayscale(#B0BFC6);
|
||||
$color-widget-bg: grayscale(lighten($color-base, 20%));
|
||||
$color-dark-bg: grayscale(#003050);
|
||||
$color-shadow-light: grayscale(#aaa);
|
||||
$color-shadow-dark: grayscale(#333);
|
||||
$color-menu-button: grayscale(#338DC1);
|
||||
$color-text: grayscale(#444);
|
||||
$color-text-light: white;
|
||||
$color-text-light-link: white;
|
||||
$color-text-dark: grayscale(#333);
|
||||
$color-text-dark-link: grayscale(#3EBAE0);
|
||||
$color-button-constructive: grayscale(#77b53f);
|
||||
$color-button-destructive: grayscale(#f00);
|
||||
$color-warning: grayscale(#FF9300);
|
||||
$color-error: grayscale(#FF9300);
|
||||
$color-notice: grayscale(#FF9300);
|
||||
*/
|
||||
|
|
@ -6,34 +6,71 @@
|
|||
|
||||
// Form fields
|
||||
|
||||
.field {
|
||||
display: block;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid $color-shadow-light;
|
||||
|
||||
label {
|
||||
float: left;
|
||||
width: 10em;
|
||||
}
|
||||
|
||||
// Don't float inner/contained fields
|
||||
.middleColumn {
|
||||
margin-left: 10em;
|
||||
|
||||
.field {
|
||||
display: inline;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
label {
|
||||
float: none;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
background-color: #f9f9f9;
|
||||
@include border-radius(5px);
|
||||
@include linear-gradient(color-stops(
|
||||
$color-widget-bg,
|
||||
lighten($color-widget-bg, 10%),
|
||||
$color-widget-bg
|
||||
));
|
||||
border: 1px solid $color-shadow-light;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
input.loading {
|
||||
padding-left: 16px;
|
||||
background: #fff url(../../images/network-save.gif) no-repeat center left;
|
||||
background: $color-widget-bg url(../../images/network-save.gif) no-repeat center left;
|
||||
}
|
||||
|
||||
// Buttons
|
||||
|
||||
.ui-state-default.ss-ui-action-constructive {
|
||||
@include linear-gradient(color-stops(#77b53f, #0c8a44));
|
||||
color: white;
|
||||
.ss-ui-action-constructive,
|
||||
.ui-widget-content .ss-ui-action-constructive,
|
||||
.ui-widget-header .ss-ui-action-constructive {
|
||||
background: none; // avoid overwritten gradient from jQuery UI styles
|
||||
@include linear-gradient(color-stops(
|
||||
$color-button-constructive,
|
||||
darken($color-button-constructive, 20%)
|
||||
));
|
||||
color: $color-text-light;
|
||||
}
|
||||
|
||||
.ui-state-default.ss-ui-action-destructive {
|
||||
color: red;
|
||||
.ss-ui-action-destructive,
|
||||
.ui-widget-content .ss-ui-action-destructive,
|
||||
.ui-widget-header .ss-ui-action-destructive {
|
||||
color: $color-button-destructive;
|
||||
}
|
||||
|
||||
.edit-form {
|
||||
.cms-edit-form {
|
||||
padding-bottom: 20px;
|
||||
|
||||
// Hide first level tabs for CMS, see CMSEditForm.ss
|
||||
& > fieldset > .ss-tabset > ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// TODO Unclear if "button bar" concept is edit form specific
|
||||
.Actions {
|
||||
text-align: right;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.cms-menu {
|
||||
z-index: 10;
|
||||
background-color: #b0bfc6;
|
||||
@include box-shadow(#aaa, 3px, 0, 3px);
|
||||
background-color: $color-widget-bg;
|
||||
@include box-shadow($color-shadow-light, 3px, 0, 3px);
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
|
@ -10,18 +10,20 @@
|
|||
|
||||
.cms-menu-list {
|
||||
li {
|
||||
background-color: #afbdc6;
|
||||
@include linear-gradient(color-stops(#afbdc6, #8ea4b2));
|
||||
border-bottom: 1px solid #aaa;
|
||||
@include linear-gradient(color-stops(
|
||||
$color-base,
|
||||
darken($color-base, 20%)
|
||||
));
|
||||
border-bottom: 1px solid $color-shadow-light;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
height: 32px;
|
||||
vertical-align: middle;
|
||||
font-size: 14px;
|
||||
@include text-shadow(#ddd);
|
||||
color: #333;
|
||||
margin: 5px;
|
||||
@include text-shadow($color-shadow-light);
|
||||
color: $color-text-dark;
|
||||
padding: 5px;
|
||||
|
||||
.icon {
|
||||
display: block;
|
||||
|
|
@ -38,27 +40,38 @@
|
|||
}
|
||||
|
||||
&.current {
|
||||
background-color: #338dc1;
|
||||
@include linear-gradient(color-stops(#338dc1, #338dc1));
|
||||
@include box-shadow(#333, 0, 4px, 4px);
|
||||
@include linear-gradient(color-stops(
|
||||
$color-menu-button,
|
||||
darken($color-menu-button, 20%)
|
||||
));
|
||||
|
||||
li {
|
||||
@include linear-gradient(color-stops(
|
||||
darken($color-menu-button, 5%),
|
||||
darken($color-menu-button, 10%)
|
||||
));
|
||||
}
|
||||
|
||||
a {
|
||||
color: white;
|
||||
@include text-shadow(#333);
|
||||
color: $color-text-light;
|
||||
@include text-shadow($color-shadow-dark);
|
||||
}
|
||||
}
|
||||
|
||||
// nested elements
|
||||
li {
|
||||
background-color: #1d76ae;
|
||||
@include linear-gradient(color-stops(#1d76ae, #1d76ae));
|
||||
|
||||
|
||||
&:first {
|
||||
@include box-shadow($color-shadow-dark, 0, 4px, 4px);
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 12px;
|
||||
@include text-shadow(#333);
|
||||
@include text-shadow($color-shadow-dark);
|
||||
margin: 0;
|
||||
padding-left: 30px;
|
||||
color: white;
|
||||
color: $color-text-light;
|
||||
}
|
||||
|
||||
&.current a {
|
||||
|
|
|
|||
|
|
@ -7,18 +7,19 @@
|
|||
* 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.
|
||||
* 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).
|
||||
*/
|
||||
|
||||
// main styles
|
||||
// ######################### Base styles #########################
|
||||
|
||||
body {
|
||||
@include global-reset;
|
||||
font-size: 13px;
|
||||
font-family: Verdana, Arial, sans-serif;
|
||||
color: $color-text;
|
||||
}
|
||||
|
||||
body * {
|
||||
|
|
@ -29,9 +30,13 @@ body .ui-widget {
|
|||
font-size: 1em;
|
||||
}
|
||||
|
||||
// ######################### Misc Panels #########################
|
||||
|
||||
.cms-content-header {
|
||||
background-color: #a0b2be;
|
||||
@include linear-gradient(color-stops(#abbbc4, #93a8b6));
|
||||
@include linear-gradient(color-stops(
|
||||
darken($color-widget-bg, 20%),
|
||||
darken($color-widget-bg, 30%)
|
||||
));
|
||||
|
||||
h2 {
|
||||
float: left;
|
||||
|
|
@ -42,7 +47,10 @@ body .ui-widget {
|
|||
|
||||
.cms-content-header-tabs {
|
||||
float: left;
|
||||
margin-top: 8px; // TODO Ingo is too dumb to do bottom vertical position
|
||||
}
|
||||
|
||||
.ui-tabs-nav li {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.cms-content-header-actions {
|
||||
|
|
@ -51,18 +59,21 @@ body .ui-widget {
|
|||
}
|
||||
|
||||
.cms-content-tools {
|
||||
background-color: #c6d7df;
|
||||
background-color: darken($color-widget-bg, 5%);
|
||||
}
|
||||
|
||||
// header and logo
|
||||
// ######################### Header and Logo #########################
|
||||
|
||||
.cms-header {
|
||||
padding: 10px;
|
||||
background-color: #002a43;
|
||||
@include linear-gradient(color-stops(#002236, #003050, #002236));
|
||||
@include linear-gradient(color-stops(
|
||||
darken($color-dark-bg, 10%),
|
||||
$color-dark-bg,
|
||||
darken($color-dark-bg, 10%)
|
||||
));
|
||||
|
||||
* {
|
||||
color: white;
|
||||
color: $color-text-light;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -73,7 +84,7 @@ body .ui-widget {
|
|||
}
|
||||
|
||||
* {
|
||||
color: #3ebae0;
|
||||
color: $color-text-dark-link;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -100,7 +111,7 @@ body .ui-widget {
|
|||
}
|
||||
}
|
||||
|
||||
// loading screen
|
||||
// ######################### Loading Screen #########################
|
||||
|
||||
.ss-loading-screen,
|
||||
.ss-loading-screen .loading-logo {
|
||||
|
|
@ -108,6 +119,7 @@ body .ui-widget {
|
|||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
// TODO Convert to compass gradient include
|
||||
background: #fff;
|
||||
background: -moz-radial-gradient(50% 50% 180deg, circle cover, #FFFFFF, #EFEFEF, #C7C7C7 100%);
|
||||
background: -webkit-gradient(radial, 50% 50%, 350, 50% 50%, 0, from(#E3E3E3), to(white));
|
||||
|
|
@ -135,15 +147,7 @@ body .ui-widget {
|
|||
padding: 10px 20px;
|
||||
color: #dc7f00;
|
||||
border: none;
|
||||
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
-o-border-radius: 5px;
|
||||
|
||||
-moz-box-shadow: 1px 1px 15px rgba(0,0,0, 0.1);
|
||||
-webkit-box-shadow: 1px 1px 15px rgba(0,0,0, 0.1);
|
||||
-o-box-shadow: 1px 1px 15px rgba(0,0,0, 0.1);
|
||||
box-shadow: 1px 1px 15px rgba(0,0,0, 0.1);
|
||||
@include border-radius(5px);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -153,4 +157,49 @@ body .ui-widget {
|
|||
left: 49%;
|
||||
top: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
// ######################### Actions #########################
|
||||
|
||||
.cms-content-actions {
|
||||
|
||||
}
|
||||
|
||||
// ######################### Messages #########################
|
||||
|
||||
/**
|
||||
* Messages (see sapphire/css/Form.css)
|
||||
*/
|
||||
.message {
|
||||
margin: 1em 0;
|
||||
padding: 0.5em;
|
||||
font-weight: bold;
|
||||
border: 1px black solid;
|
||||
|
||||
&.notice {
|
||||
background-color: lighten($color-notice, 20%);
|
||||
border-color: $color-notice;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background-color: lighten($color-warning, 20%);
|
||||
border-color: $color-warning;
|
||||
}
|
||||
&.error {
|
||||
background-color: lighten($color-error, 20%);
|
||||
border-color: $color-error;
|
||||
}
|
||||
}
|
||||
|
||||
// ######################### ModelAdmin #########################
|
||||
|
||||
.ModelAdmin {
|
||||
.cms-content-tools {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
// Disable by default, will be replaced by more intuitive column selection in new data grid
|
||||
.ResultAssemblyBlock {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -6,29 +6,29 @@
|
|||
* 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.
|
||||
* Use _style.scss to add more generic style information,
|
||||
* and read the jQuery UI theming API: http://jqueryui.com/docs/Theming/API
|
||||
*/
|
||||
|
||||
.cms {
|
||||
.ui-widget-content {
|
||||
background-color: $widget-bg;
|
||||
}
|
||||
|
||||
.cms {
|
||||
.ui-tabs {
|
||||
padding: 0
|
||||
}
|
||||
|
||||
.ui-widget-content {
|
||||
.ui-widget-content,
|
||||
.ui-tabs .ui-tabs-panel {
|
||||
color: $color-text;
|
||||
font-size: 1em;
|
||||
border: 0;
|
||||
background-color: #eef2f3;
|
||||
}
|
||||
|
||||
.cms-content-header .ui-widget-content {
|
||||
background: none;
|
||||
background: none; // avoid overwritten background properties from jQuery UI
|
||||
}
|
||||
|
||||
.ui-widget-header {
|
||||
background: none;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.ss-ui-button {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -11,9 +11,7 @@
|
|||
@import "compass/css3";
|
||||
@import "compass/utilities/sprites/sprite-img";
|
||||
|
||||
// colour definitions
|
||||
$widget-bg: #eef2f3;
|
||||
|
||||
@import "colours.scss";
|
||||
@import "layout.scss";
|
||||
@import "tree.scss";
|
||||
@import "menu.scss";
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user