diff --git a/admin/css/screen.css b/admin/css/screen.css index f7c6b6d38..77809933b 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -52,6 +52,17 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, .icon.icon-16.icon-help { background-position: 0 -80px; } /** ----------------------------- CMS Components ------------------------------ */ +/** File: typography.scss Contains the basic typography related styles for the admin interface. */ +.cms h2, .cms h3, .cms h4, .cms h5 { font-weight: bold; margin: 16px 0 16px 0; line-height: 16px; } +.cms h2 { font-size: 18px; line-height: 24px; } +.cms h3 { font-size: 16px; } +.cms h4 { font-size: 14px; } +.cms h5 { font-size: 12px; } +.cms p { line-height: 16px; margin-bottom: 16px; } +.cms ins { background-color: #DFD; border: 1px solid #aaffaa; padding: 2px; text-decoration: none; } +.cms del { background-color: #FDD; padding: 2px; color: #ff4444; border: 1px solid #ffaaaa; } +.cms code { font-family: 'Bitstream Vera Sans Mono','Courier', monospace; } + /** 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. */ .cms .jstree ul { display: block; margin: 0; padding: 0; background: none; list-style-type: none; } .cms .jstree li { display: block; margin: 0; padding: 0; list-style-type: none; display: block; min-height: 18px; line-height: 18px; white-space: nowrap; margin-left: 18px; min-width: 18px; } @@ -271,14 +282,6 @@ html article, html aside, html details, html figcaption, html figure, html foote /** -------------------------------------------- Helpers -------------------------------------------- */ .cms-helper-hide-actions .Actions { display: none; } -/** -------------------------------------------- Typography styles in tabs -------------------------------------------- */ -.ui-tabs-panel h2, .ui-tabs-panel h3, .ui-tabs-panel h4, .ui-tabs-panel h5 { font-weight: bold; margin: 16px 0 16px 0; line-height: 16px; } -.ui-tabs-panel h2 { font-size: 18px; line-height: 24px; } -.ui-tabs-panel h3 { font-size: 16px; } -.ui-tabs-panel h4 { font-size: 14px; } -.ui-tabs-panel h5 { font-size: 12px; } -.ui-tabs-panel p { line-height: 16px; margin-bottom: 16px; } - /** -------------------------------------------- Panels Styles -------------------------------------------- */ .cms-container { height: 100%; background: #f0f3f4 url(../images/textures/bg_cms_main_content.png) repeat top left; } @@ -286,7 +289,7 @@ html article, html aside, html details, html figcaption, html figure, html foote .cms-preview, .cms-menu, .cms-content, .cms-content-header, .cms-content-tools, .cms-content-fields, .cms-edit-form, .cms-preview, .cms-preview iframe, .cms-preview-controls { *display: inline; } .cms-content-header { background-color: #b0bec7; padding: 8px 8px 6px 16px; height: 32px; z-index: 60; border-bottom: 2px solid #8399a7; -moz-box-shadow: #eceff1 0 8px 16px; -webkit-box-shadow: #eceff1 0 8px 16px; -o-box-shadow: #eceff1 0 8px 16px; box-shadow: #eceff1 0 8px 16px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ced7dc), color-stop(100%, #92a5b2)); background-image: -webkit-linear-gradient(#ced7dc, #92a5b2); background-image: -moz-linear-gradient(#ced7dc, #92a5b2); background-image: -o-linear-gradient(#ced7dc, #92a5b2); background-image: -ms-linear-gradient(#ced7dc, #92a5b2); background-image: linear-gradient(#ced7dc, #92a5b2); } -.cms-content-header h2 { float: left; padding: 8px 8px 0 0; font-size: 14px; line-height: 24px; font-weight: bold; text-shadow: #bfcad2 1px 1px 0; width: 176px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; } +.cms-content-header h2 { float: left; padding: 8px 8px 0 0; font-size: 14px; line-height: 24px; font-weight: bold; text-shadow: #bfcad2 1px 1px 0; width: 176px; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; } .cms-content-header > div { width: 9999em; overflow: hidden; } .cms-content-header .cms-content-header-tabs { float: left; } @@ -325,6 +328,7 @@ html article, html aside, html details, html figcaption, html figure, html foote /** -------------------------------------------- Messages -------------------------------------------- */ .message { margin: 0 0 8px 0; padding: 7px 7px; font-weight: bold; border: 1px black solid; } .message.notice { background-color: #ffbe66; border-color: #ff9300; } +.message.notice a { color: #999; } .message.warning { background-color: #ffbe66; border-color: #ff9300; } .message.error { background-color: #ffbe66; border-color: #ff9300; } diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index e9f12e6af..7485cbd15 100644 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -58,39 +58,6 @@ html,body { display: none; } } - -/** -------------------------------------------- - * Typography styles in tabs - * -------------------------------------------- */ -.ui-tabs-panel { - h2, h3, h4, h5 { - font-weight: bold; - margin: $grid-vertical * 2 0 $grid-vertical * 2 0; - line-height: $grid-vertical * 2; - } - - h2 { - font-size: $font-base-size + 6; - line-height: $grid-vertical * 3; - } - - h3 { - font-size: $font-base-size + 4; - } - - h4 { - font-size: $font-base-size + 2; - } - - h5 { - font-size: $font-base-size; - } - - p { - line-height: $grid-vertical * 2; - margin-bottom: $grid-vertical * 2; - } -} /** -------------------------------------------- * Panels Styles @@ -135,7 +102,7 @@ html,body { font-weight: bold; text-shadow: darken($color-widget-bg, 15%) 1px 1px 0; width: $grid-horizontal * 22 /* 24 - (padding on each side + margin) */; - + margin: 0; @include hide-text-overflow(); } @@ -338,7 +305,6 @@ html,body { .message { margin: 0 0 $grid_vertical 0; - // minus one for the borders padding: $grid_vertical - 1 $grid_horizontal - 1; font-weight: bold; @@ -347,6 +313,10 @@ html,body { &.notice { background-color: lighten($color-notice, 20%); border-color: $color-notice; + + a { + color: #999; + } } &.warning { @@ -357,6 +327,10 @@ html,body { background-color: lighten($color-error, 20%); border-color: $color-error; } + + p { + margin: 0; + } } /** -------------------------------------------- diff --git a/admin/scss/_typography.scss b/admin/scss/_typography.scss new file mode 100644 index 000000000..d9686c8ef --- /dev/null +++ b/admin/scss/_typography.scss @@ -0,0 +1,72 @@ +/** + * File: typography.scss + * + * Contains the basic typography related styles for the admin interface. + */ + +.cms { + h2, h3, h4, h5 { + font-weight: bold; + margin: $grid-vertical * 2 0 $grid-vertical * 2 0; + line-height: $grid-vertical * 2; + } + + h2 { + font-size: $font-base-size + 6; + line-height: $grid-vertical * 3; + } + + h3 { + font-size: $font-base-size + 4; + } + + h4 { + font-size: $font-base-size + 2; + } + + h5 { + font-size: $font-base-size; + } + + p { + line-height: $grid-vertical * 2; + margin-bottom: $grid-vertical * 2; + } + + ins { + background-color: #DFD; + padding: 2px; + text-decoration: none; + } + + del { + background-color: #FDD; + padding: 2px; + color: darken(#FDD, 30%); + } + + code { + font-family: 'Bitstream Vera Sans Mono','Courier', monospace; + } + + pre { + + } + + table { + + thead { + + } + } + + ol { + + } + + ul { + + } + +} + diff --git a/admin/scss/screen.scss b/admin/scss/screen.scss index dca4fc3cf..73185a62b 100644 --- a/admin/scss/screen.scss +++ b/admin/scss/screen.scss @@ -40,6 +40,7 @@ /** ----------------------------- * CMS Components * ------------------------------ */ +@import "typography.scss"; @import "tree.scss"; @import "menu.scss"; @import "forms.scss";