tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-10-22 14:05:37 +02:00
Code Issues Projects Releases Wiki Activity

MINOR: styles for the top tabs in the main cms. #css

Browse Source
This commit is contained in:
Will Rossiter 2011-06-10 13:37:54 +12:00 committed by Ingo Schommer
parent 177e085a79
commit 92c662e552
6 changed files with 115 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
admin/css/screen.css
View File

@ -143,33 +143,19 @@ li.jstree-closed > ul { display: none; }
.cms-menu.collapsed .cms-menu-list li ul { display: none; } .cms-menu.collapsed .cms-menu-list li ul { display: none; }
.cms-menu.collapsed.cms-panel .cms-panel-content { display: block; } .cms-menu.collapsed.cms-panel .cms-panel-content { display: block; }
.cms-menu-list li a { display: block; height: 30px; line-height: 30px; vertical-align: middle; font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-shadow: #ced7dc 1px 1px 0; color: #1f1f1f; padding: 5px 5px 5px 12px; background-color: #b0bec7; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #b0bec7), color-stop(100%, #8ca1ae)); background-image: -moz-linear-gradient(top, #b0bec7 0%, #8ca1ae 100%); background-image: linear-gradient(top, #b0bec7 0%, #8ca1ae 100%); border-top: 1px solid #ced7dc; border-bottom: 1px solid #748d9d; } .cms-menu-list li a { display: block; height: 30px; line-height: 30px; vertical-align: middle; font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-shadow: #bfcad2 1px 1px 0; color: #1f1f1f; padding: 5px; background-color: #b0bec7; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #b0bec7), color-stop(100%, #98aab6)); background-image: -moz-linear-gradient(top, #b0bec7 0%, #98aab6 100%); background-image: linear-gradient(top, #b0bec7 0%, #98aab6 100%); border-top: 1px solid #ced7dc; border-bottom: 1px solid #748d9d; }
.cms-menu-list li a:hover { text-decoration: none; background-color: #b6c3cb; border-bottom: 1px solid #8399a7; color: #2c2c2c; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #bfcad2), color-stop(100%, #b0bec7)); background-image: -moz-linear-gradient(top, #bfcad2 0%, #b0bec7 100%); background-image: linear-gradient(top, #bfcad2 0%, #b0bec7 100%); } .cms-menu-list li a:hover { text-decoration: none; background-color: #b6c3cb; border-bottom: 1px solid #8399a7; color: #2c2c2c; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #bfcad2), color-stop(100%, #b0bec7)); background-image: -moz-linear-gradient(top, #bfcad2 0%, #b0bec7 100%); background-image: linear-gradient(top, #bfcad2 0%, #b0bec7 100%); }
.cms-menu-list li a:focus { border-top: 1px solid #a1b2bc; text-decoration: none; background-color: #a1b2bc; color: #393939; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #92a5b2), color-stop(100%, #a1b2bc)); background-image: -moz-linear-gradient(top, #92a5b2 0%, #a1b2bc 100%); background-image: linear-gradient(top, #92a5b2 0%, #a1b2bc 100%); } .cms-menu-list li a:focus { border-top: 1px solid #a1b2bc; text-decoration: none; background-color: #a1b2bc; color: #393939; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #92a5b2), color-stop(100%, #a1b2bc)); background-image: -moz-linear-gradient(top, #92a5b2 0%, #a1b2bc 100%); background-image: linear-gradient(top, #92a5b2 0%, #a1b2bc 100%); }
.cms-menu-list li a .icon { display: block; float: left; margin-right: 4px; background: url('../images/icons-32.png') no-repeat; width: 32px; height: 32px; overflow: hidden; background-position: 0px 0px; } .cms-menu-list li a .icon { display: block; float: left; margin-right: 4px; }
.cms-menu-list li a:hover .icon { background-position: -32px 0px; }
.cms-menu-list li a .text { display: block; } .cms-menu-list li a .text { display: block; }
.cms-menu-list li.current a { color: white; text-shadow: #1e5270 0 -1px 0; border-top: 1px solid #55a4d2; border-bottom: 1px solid #1e5270; background-color: #338dc1; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #338dc1), color-stop(100%, #287099)); background-image: -moz-linear-gradient(top, #338dc1 0%, #287099 100%); background-image: linear-gradient(top, #338dc1 0%, #287099 100%); } .cms-menu-list li.current a { color: white; text-shadow: #1e5270 0 -1px 0; border-top: 1px solid #55a4d2; border-bottom: 1px solid #1e5270; background-color: #338dc1; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #338dc1), color-stop(100%, #287099)); background-image: -moz-linear-gradient(top, #338dc1 0%, #287099 100%); background-image: linear-gradient(top, #338dc1 0%, #287099 100%); }
.cms-menu-list li.current ul { border-top: 1px solid #1e5270; } .cms-menu-list li.current ul { border-top: 1px solid #1e5270; }
.cms-menu-list li.current a .icon { background-position: -32px 0px; } .cms-menu-list li.current li { background-color: #287099; }
.cms-menu-list li ul { display: none; } .cms-menu-list li.current li a { font-size: 12px; padding: 0 10px 0 36px; height: 32px; line-height: 32px; color: #e2f0f7; background: none; border-top: 1px solid #338dc1; border-bottom: 1px solid #1e5270; }
.cms-menu-list li.opened ul { display: block; } .cms-menu-list li.current li a.current, .cms-menu-list li.current li a:hover { background: #2e7ead; border-top: 1px solid #2e7ead; color: white; }
.cms-menu-list li li li { background-color: #287099; } .cms-menu-list li.current li a:focus { background: #236184; border-top: 1px solid #1e5270; color: white; }
.cms-menu-list li li li a { font-size: 11px; padding: 0 10px 0 48px; height: 32px; line-height: 32px; color: #e2f0f7; background: none; border-top: 1px solid #338dc1; border-bottom: 1px solid #1e5270; } .cms-menu-list li.current li.current a { font-weight: bold; color: white; }
.cms-menu-list li li li a.current, .cms-menu-list li li li a:hover { background: #2e7ead; border-top: 1px solid #2e7ead; color: white; } .cms-menu-list li.current li.first a { border-top: none; }
.cms-menu-list li li li a:focus { background: #236184; border-top: 1px solid #1e5270; color: white; }
.cms-menu-list li li li.current a { font-weight: bold; color: white; }
.cms-menu-list li li li.first a { border-top: none; }
.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 -96px; }
.cms-menu-list li#Menu-AssetAdmin.current a .icon, .cms-menu-list li#Menu-AssetAdmin a:hover .icon { background-position: -32px -96px; }
.cms-menu-list li#Menu-SecurityAdmin a .icon { background-position: 0px -128px; }
.cms-menu-list li#Menu-SecurityAdmin.current a .icon, .cms-menu-list li#Menu-SecurityAdmin a:hover .icon { background-position: -32px -128px; }
.cms-menu-list li#Menu-CMSPagesController a .icon { background-position: 0px -32px; }
.cms-menu-list li#Menu-CMSPagesController.current a .icon, .cms-menu-list li#Menu-CMSPagesController a:hover .icon { background-position: -32px -32px; }
.cms-menu-list.collapsed li .text { display: none; }
.cms-menu-list.collapsed li > li { display: none; }
/** 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. */ /** 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-width: 2px; border-bottom: 2px groove white; -webkit-border-image: url(../images/textures/bg_fieldset_elements_border.png) 2 stretch stretch; border-image: url(../images/textures/bg_fieldset_elements_border.png) 2 stretch stretch; } .field { display: block; padding: 10px 0; border-bottom-width: 2px; border-bottom: 2px groove white; -webkit-border-image: url(../images/textures/bg_fieldset_elements_border.png) 2 stretch stretch; border-image: url(../images/textures/bg_fieldset_elements_border.png) 2 stretch stretch; }
@ -209,13 +195,17 @@ input.loading, input.ui-state-default.loading, .ui-widget-content input.ui-state
/** 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 */ /** 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 { padding: 0; }
.cms .ui-tabs .ui-widget-header { border: 0; background: none; } .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: transparent; } .cms .ui-tabs .ui-tabs-nav { margin: 0; padding: 0; }
.cms .ui-tabs .ui-tabs-nav li { top: 0; }
.cms .ui-tabs .ui-tabs-nav li a { padding: 0 15px; }
.cms .ui-tabs .ui-tabs-nav.ui-state-active { border-color: gray; }
.cms .ui-widget-content, .cms .ui-tabs .ui-tabs-panel { color: #444444; font-size: 13px; border: 0; background: #eceff1; }
.cms .ui-widget-header { background: #eceff1; border: 0; padding: 0; } .cms .ui-widget-header { background: #eceff1; border: 0; padding: 0; }
.cms .ss-ui-button { padding: 5px; text-decoration: none; } .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). */ /** 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). */
/** ---------------------------------------------------- Core Styles ---------------------------------------------------- */ /** ---------------------------------------------------- Core Styles ---------------------------------------------------- */
html, body { width: 100%; height: 100%; overflow: hidden; font-size: 13px; font-family: Verdana, Arial, sans-serif; color: #444444; } html, body { width: 100%; height: 100%; overflow: hidden; font-size: 13px; font-family: Arial, sans-serif; color: #444444; }
html html, html body, html div, html span, html applet, html object, html iframe, html h1, html h2, html h3, html h4, html h5, html h6, html p, html blockquote, html pre, html a, html abbr, html acronym, html address, html big, html cite, html code, html del, html dfn, html em, html font, html img, html ins, html kbd, html q, html s, html samp, html small, html strike, html strong, html sub, html sup, html tt, html var, html dl, html dt, html dd, html ol, html ul, html li, html fieldset, html form, html label, html legend, html table, html caption, html tbody, html tfoot, html thead, html tr, html th, html td, 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; } html html, html body, html div, html span, html applet, html object, html iframe, html h1, html h2, html h3, html h4, html h5, html h6, html p, html blockquote, html pre, html a, html abbr, html acronym, html address, html big, html cite, html code, html del, html dfn, html em, html font, html img, html ins, html kbd, html q, html s, html samp, html small, html strike, html strong, html sub, html sup, html tt, html var, html dl, html dt, html dd, html ol, html ul, html li, html fieldset, html form, html label, html legend, html table, html caption, html tbody, html tfoot, html thead, html tr, html th, html td, 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; }
html body, body body { line-height: 1; color: black; background: white; } html body, body body { line-height: 1; color: black; background: white; }
html ol, html ul, body ol, body ul { list-style: none; } html ol, html ul, body ol, body ul { list-style: none; }
@ -228,7 +218,7 @@ html a img, body a img { border: none; }
a { color: #3ebae0; text-decoration: none; } a { color: #3ebae0; text-decoration: none; }
a:hover, a:focus { text-decoration: underline; } a:hover, a:focus { text-decoration: underline; }
body .ui-widget { font-size: 13px; } body .ui-widget { font-family: Arial, sans-serif; font-size: 13px; }
.cms-container { height: 100%; } .cms-container { height: 100%; }
@ -237,18 +227,18 @@ body .ui-widget { font-size: 13px; }
strong { font-weight: bold; } strong { font-weight: bold; }
.cms-content-header { background-color: #b1bec6; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #dde3e6), color-stop(100%, #94a5b0)); background-image: -moz-linear-gradient(top, #dde3e6 0%, #94a5b0 100%); background-image: linear-gradient(top, #dde3e6 0%, #94a5b0 100%); border-bottom: 3px solid #5e7280; padding: 8px; height: 32px; } /** -------------------------------------------- Misc Panels -------------------------------------------- */
.cms-content-header h2 { float: left; padding: 8px; font-size: 14px; font-weight: bold; text-shadow: #ced7dc 1px 1px 0; width: 230px; } .cms-content-header { background-color: #b1bec6; padding: 8px 8px 6px 8px; height: 32px; border-bottom: 2px solid #8598a5; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #b1bec6), color-stop(100%, #94a5b0)); background-image: -moz-linear-gradient(top, #b1bec6 0%, #94a5b0 100%); background-image: linear-gradient(top, #b1bec6 0%, #94a5b0 100%); }
.cms-content-header h2 { float: left; padding: 12px 0 0 8px; font-size: 13px; font-weight: bold; width: 230px; }
.cms-content-header > div { width: 9999em; overflow: hidden; } .cms-content-header > div { width: 9999em; overflow: hidden; }
.cms-content-header .cms-content-header-tabs { float: left; } .cms-content-header .cms-content-header-tabs { float: left; }
.ui-tabs .cms-content-header .ui-tabs-nav li { height: 37px; } .ui-tabs .cms-content-header .ui-tabs-nav li a { font-weight: bold; font-size: 13px; padding: 11px 15px 9px; border-bottom: 2px solid #b3b3b3; }
.ui-tabs .cms-content-header .ui-tabs-nav li a { font-weight: bold; font-size: 11px; padding-top: 11px; } .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: #d9d9d9; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #d9d9d9), color-stop(100%, #c0c0c0)); background-image: -moz-linear-gradient(top, #d9d9d9 0%, #c0c0c0 100%); background-image: linear-gradient(top, #d9d9d9 0%, #c0c0c0 100%); border-color: #a6a6a6; margin: 0 3px 0 0; text-shadow: white 0 1px 0; }
.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: #feffff; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #feffff), color-stop(100%, #d6d9da)); background-image: -moz-linear-gradient(top, #feffff 0%, #d6d9da 100%); background-image: linear-gradient(top, #feffff 0%, #d6d9da 100%); border: none; border-bottom: 3px solid #5e7280 !important; margin: 0 2px; } .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: #eceff1; }
.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: transparent url(../images/textures/bg_cms_main_content.png) repeat top left; height: 40px; } .ui-tabs .cms-content-header .ui-state-active a, .ui-tabs .cms-content-header .ui-widget-content .ui-state-active a, .ui-tabs .cms-content-header .ui-widget-header .ui-state-active a { border-bottom: 2px solid #eceff1; }
.cms-content-tools { background-color: #dde3e6; width: 230px; overflow: auto; } .cms-content-tools { background-color: #dde3e6; padding: 8px; width: 230px; overflow: auto; }
.cms-content-tools .cms-panel-header, .cms-content-tools .cms-panel-content { padding: 10px; }
.cms-content.loading { background: url(../images/spinner.gif) no-repeat 50% 50%; } .cms-content.loading { background: url(../images/spinner.gif) no-repeat 50% 50%; }
@ -259,11 +249,12 @@ strong { font-weight: bold; }
.cms-logo { border-bottom: 1px solid #03090c; height: 31px; overflow: hidden; padding: 0 4px; vertical-align: middle; } .cms-logo { border-bottom: 1px solid #03090c; height: 31px; overflow: hidden; padding: 0 4px; vertical-align: middle; }
.cms-logo .version { display: none; } .cms-logo .version { display: none; }
.cms-logo a { display: inline-block; height: 25px; width: 25px; float: left; margin-right: 10px; background: url('../images/logo_small.png?1309939638') no-repeat; text-indent: -9999em; } .cms-logo a { display: inline-block; height: 25px; width: 25px; float: left; margin-right: 10px; background: url('../images/logo_small.png?1306827534') no-repeat; text-indent: -9999em; }
.cms-login-status { border-top: 1px solid #19435c; height: 23px; padding: 8px 4px 0 4px; overflow: hidden; line-height: 16px; font-size: 11px; } .cms-login-status { border-top: 1px solid #19435c; height: 23px; padding: 8px 4px 0 4px; overflow: hidden; line-height: 16px; font-size: 11px; }
.cms-login-status .logout-link { display: inline-block; height: 16px; width: 16px; float: left; margin: 0 15px 0 5px; background: url(../images/logout.png) no-repeat; text-indent: -9999em; } .cms-login-status .logout-link { display: inline-block; height: 16px; width: 16px; float: left; margin: 0 15px 0 5px; background: url(../images/logout.png) no-repeat; text-indent: -9999em; }
/** ----------------------------------------------- Loading Screen ------------------------------------------------ */
.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, .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 .loading-logo { background-url: url(../images/logo.gif); background-repeat: no-repeat; background-color: transparent; background-position: 50% 50%; }

8
admin/scss/_menu.scss
View File

@ -60,7 +60,7 @@
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
text-shadow: lighten($color-base, 10%) 1px 1px 0; text-shadow: lighten($color-base, 5%) 1px 1px 0;
color: $color-text-dark; color: $color-text-dark;
padding: 5px 5px 5px 12px; //left aligning with SS logo at top padding: 5px 5px 5px 12px; //left aligning with SS logo at top
background-color: $color-base; background-color: $color-base;
@ -100,8 +100,8 @@
display: block; display: block;
float: left; float: left;
margin-right: 4px; margin-right: 4px;
@include sprite-background("icons-32.png"); //@include sprite-background("icons-32.png");
@include sprite-position(1, 1); //@include sprite-position(1, 1);
} }
&:hover .icon { &:hover .icon {
@ -150,7 +150,7 @@
background-color: darken($color-menu-button, 10%); background-color: darken($color-menu-button, 10%);
a { a {
font-size: $font-small-size; font-size: $font-base-size - 1;
padding: 0 10px 0 48px; padding: 0 10px 0 48px;
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;

48
admin/scss/_style.scss
View File

@ -39,6 +39,7 @@ a {
} }
} }
body .ui-widget { body .ui-widget {
font-family: $font-family;
font-size: $font-base-size; font-size: $font-base-size;
} }
@ -61,10 +62,16 @@ strong {
font-weight: bold; font-weight: bold;
} }
// ######################### Misc Panels ######################### /** --------------------------------------------
* Misc Panels
* -------------------------------------------- */
.cms-content-header { .cms-content-header {
background-color: darken($color-widget-bg, 20%); background-color: darken($color-widget-bg, 20%);
padding: 8px 8px 6px 8px;
height: 32px;
border-bottom: 2px solid darken($color-widget-bg, 35%);
@include linear-gradient(color-stops( @include linear-gradient(color-stops(
darken($color-widget-bg, 5%), darken($color-widget-bg, 5%),
darken($color-widget-bg, 30%) darken($color-widget-bg, 30%)
@ -77,8 +84,8 @@ strong {
h2 { h2 {
float: left; float: left;
padding: 8px; padding: 12px 0 0 8px;
font-size: 14px; font-size: $font-base-size;
font-weight: bold; font-weight: bold;
text-shadow: lighten($color-base, 10%) 1px 1px 0; text-shadow: lighten($color-base, 10%) 1px 1px 0;
width: 250px - (10px*2); width: 250px - (10px*2);
@ -96,38 +103,42 @@ strong {
.ui-tabs .cms-content-header { .ui-tabs .cms-content-header {
.ui-tabs-nav li { .ui-tabs-nav li {
height: 37px;
a { a {
font-weight: bold; font-weight: bold;
font-size: 11px; font-size: $font-base-size;
padding-top: 11px; padding: 11px 15px 9px;
border-bottom: 2px solid darken($color-tab, 15%);
} }
} }
.ui-state-default, .ui-state-default,
.ui-widget-content .ui-state-default, .ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default { .ui-widget-header .ui-state-default {
background-color: lighten($color-shadow-light, 20%); background-color: $color-tab;
@include linear-gradient(color-stops( @include linear-gradient(color-stops(
lighten($color-shadow-light, 20%), $color-tab,
lighten($color-shadow-light, 5%) darken($color-tab, 10%)
)); ));
border: none;
border-bottom: 3px solid darken($color-widget-bg, 50%) !important; border-color: darken($color-tab, 20%);
margin: 0 2px; margin: 0 3px 0 0;
text-shadow: lighten($color-tab, 60%) 0 1px 0;
} }
.ui-state-active, .ui-state-active,
.ui-widget-content .ui-state-active, .ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active { .ui-widget-header .ui-state-active {
background: transparent url(../images/textures/bg_cms_main_content.png) repeat top left; background: $color-widget-bg;
height: 40px;
a {
border-bottom: 2px solid $color-widget-bg;
}
} }
} }
.cms-content-tools { .cms-content-tools {
background-color: darken($color-widget-bg, 5%); background-color: darken($color-widget-bg, 5%);
padding: 8px;
width: 230px; width: 230px;
overflow: auto; overflow: auto;
@ -202,7 +213,7 @@ strong {
padding: 8px 4px 0 4px; padding: 8px 4px 0 4px;
overflow: hidden; overflow: hidden;
line-height: 16px; line-height: 16px;
font-size: 11px; font-size: $font-base-size - 2;
.logout-link { .logout-link {
display: inline-block; display: inline-block;
@ -215,8 +226,9 @@ strong {
} }
} }
// ######################### Loading Screen ######################### /** -----------------------------------------------
* Loading Screen
* ------------------------------------------------ */
.ss-loading-screen, .ss-loading-screen,
.ss-loading-screen .loading-logo { .ss-loading-screen .loading-logo {
width: 100%; width: 100%;

21
admin/scss/_uitheme.scss
View File

@ -18,16 +18,33 @@
border: 0; border: 0;
background: none; background: none;
} }
.ui-tabs-nav {
margin: 0;
padding: 0;
li {
top: 0;
a {
padding: 0 15px;
}
}
&.ui-state-active {
border-color: $color-medium-separator;
}
}
} }
.ui-widget-content, .ui-widget-content,
.ui-tabs .ui-tabs-panel { .ui-tabs .ui-tabs-panel {
color: $color-text; color: $color-text;
font-size: 1em; font-size: $font-base-size;
border: 0; border: 0;
background: transparent; background: transparent;
} }
.ui-widget-header { .ui-widget-header {
background: $color-widget-bg; background: $color-widget-bg;
border: 0; border: 0;

7
admin/scss/themes/_default.scss
View File

@ -14,6 +14,9 @@ $color-widget-bg: lighten($color-base, 20%);
$color-dark-bg: #003050; $color-dark-bg: #003050;
$color-dark-separator: #19435c; $color-dark-separator: #19435c;
$color-medium-separator: #808080;
$color-tab: #d9d9d9;
$color-shadow-light: rgba(201, 205, 206, 0.8); $color-shadow-light: rgba(201, 205, 206, 0.8);
$color-shadow-dark: rgba(107, 120, 123, 0.5); $color-shadow-dark: rgba(107, 120, 123, 0.5);
@ -37,12 +40,12 @@ $color-warning: #FF9300;
$color-error: #FF9300; $color-error: #FF9300;
$color-notice: #FF9300; $color-notice: #FF9300;
/** ----------------------------------------------- /** -----------------------------------------------
* Typography * Typography
* ------------------------------------------------ */ * ------------------------------------------------ */
$font-family: Verdana, Arial, sans-serif; $font-family: Arial, sans-serif;
$font-base-size: 13px; $font-base-size: 13px;
$font-small-size: 11px;
$font-base-lineheight: 16px; $font-base-lineheight: 16px;
/** ----------------------------------------------- /** -----------------------------------------------

44
admin/scss/themes/_grayscale.scss
View File

@ -9,25 +9,45 @@
/** ----------------------------------------------- /** -----------------------------------------------
* Colours * Colours
* ------------------------------------------------ */ * ------------------------------------------------ */
$color-base: grayscale(#B0BFC6); $color-base: grayscale(#b0bec7);
$color-widget-bg: grayscale(lighten($color-base, 20%)); $color-widget-bg: grayscale(lighten($color-base, 20%));
$color-dark-bg: grayscale(#003050); $color-dark-bg: grayscale(#003050);
$color-shadow-light: grayscale(#aaa); $color-dark-separator: grayscale(#19435c);
$color-shadow-dark: grayscale(#333);
$color-shadow-light: grayscale(rgba(201, 205, 206, 0.8));
$color-shadow-dark: grayscale(rgba(107, 120, 123, 0.5));
$color-highlight: grayscale(#FFFF66); $color-highlight: grayscale(#FFFF66);
$color-menu-button: grayscale(#338DC1);
$color-text: grayscale(#444); $color-menu-button: grayscale(#338DC1);
$color-menu-background: grayscale(#c6d7df);
$color-menu-border: grayscale(#8c99a1);
$color-text: #444;
$color-text-light: white; $color-text-light: white;
$color-text-light-link: white; $color-text-light-link: white;
$color-text-dark: grayscale(#333); $color-text-dark: #1f1f1f;
$color-text-dark-link: grayscale(#3EBAE0); $color-text-dark-link: grayscale(#3EBAE0);
$color-button-constructive: grayscale(#77b53f);
$color-button-destructive: grayscale(#f00); $color-button-constructive: #77b53f;
$color-warning: grayscale(#FF9300); $color-button-destructive: #f00;
$color-error: grayscale(#FF9300);
$color-notice: grayscale(#FF9300); $color-warning: #FF9300;
$color-error: #FF9300;
$color-notice: #FF9300;
/** ----------------------------------------------- /** -----------------------------------------------
* Typography * Typography
* ------------------------------------------------ */ * ------------------------------------------------ */
$default-fonts: Verdana, Arial, sans-serif; $font-family: Arial, sans-serif;
$font-base-size: 13px;
$font-base-lineheight: 16px;
/** -----------------------------------------------
* Application Logo (CMS Logo)
* ------------------------------------------------ */
$application-logo-small: image-url("logo_small.png");
$application-logo-small-ysize: 25px;
$application-logo-small-xsize: 25px;