From f988ae316383772a59641294f40b3d79e5b4177d Mon Sep 17 00:00:00 2001 From: Paul Clarke Date: Tue, 6 Nov 2012 13:23:20 +1300 Subject: [PATCH] ENHANCEMENT Message colours updated --- .gitignore | 2 ++ admin/css/ie7.css | 1 + admin/css/ie8.css | 1 + admin/css/screen.css | 15 ++++++----- admin/scss/_style.scss | 45 +++++++++++++++------------------ admin/scss/themes/_default.scss | 9 ++++--- css/AssetUploadField.css | 4 +-- css/GridField.css | 2 +- css/UploadField.css | 2 +- 9 files changed, 43 insertions(+), 38 deletions(-) diff --git a/.gitignore b/.gitignore index 13d8e5096..d7adb8a7e 100644 --- a/.gitignore +++ b/.gitignore @@ -6,3 +6,5 @@ css/GridField_print.css admin/thirdparty/chosen/node_modules + + diff --git a/admin/css/ie7.css b/admin/css/ie7.css index 9281a3f44..4d372c086 100644 --- a/admin/css/ie7.css +++ b/admin/css/ie7.css @@ -1,5 +1,6 @@ /** This file contains the default theme definitions for the admin interface. Please put mostly SCSS variable definitions in here, and leave the actual styling to _style.scss and auxilliary files. */ /** ----------------------------------------------- Colours ------------------------------------------------ */ +/*$color-optional: #a1d2eb !default; */ /** ----------------------------------------------- Textures ----------------------------------------------- */ /** ----------------------------------------------- Typography. ------------------------------------------------ */ /** ----------------------------------------------- Grid Units (px) We have a vertical rhythm that the grid is based off both x (=horizontal) and y (=vertical). All internal padding and margins are scaled to this and accounting for paragraphs ------------------------------------------------ */ diff --git a/admin/css/ie8.css b/admin/css/ie8.css index 45d71e722..9b8ef454a 100644 --- a/admin/css/ie8.css +++ b/admin/css/ie8.css @@ -1,5 +1,6 @@ /** This file contains the default theme definitions for the admin interface. Please put mostly SCSS variable definitions in here, and leave the actual styling to _style.scss and auxilliary files. */ /** ----------------------------------------------- Colours ------------------------------------------------ */ +/*$color-optional: #a1d2eb !default; */ /** ----------------------------------------------- Textures ----------------------------------------------- */ /** ----------------------------------------------- Typography. ------------------------------------------------ */ /** ----------------------------------------------- Grid Units (px) We have a vertical rhythm that the grid is based off both x (=horizontal) and y (=vertical). All internal padding and margins are scaled to this and accounting for paragraphs ------------------------------------------------ */ diff --git a/admin/css/screen.css b/admin/css/screen.css index e7331152f..ba2c1e7d8 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -24,6 +24,7 @@ If more variables exist in the future, consider creating a variables file.*/ /** ----------------------------- Theme ------------------------------ */ /** This file contains the default theme definitions for the admin interface. Please put mostly SCSS variable definitions in here, and leave the actual styling to _style.scss and auxilliary files. */ /** ----------------------------------------------- Colours ------------------------------------------------ */ +/*$color-optional: #a1d2eb !default; */ /** ----------------------------------------------- Textures ----------------------------------------------- */ /** ----------------------------------------------- Typography. ------------------------------------------------ */ /** ----------------------------------------------- Grid Units (px) We have a vertical rhythm that the grid is based off both x (=horizontal) and y (=vertical). All internal padding and margins are scaled to this and accounting for paragraphs ------------------------------------------------ */ @@ -334,12 +335,14 @@ body.cms { overflow: hidden; } .cms-content-actions { margin: 0; padding: 12px 16px; z-index: 0; border-top: 1px solid rgba(201, 205, 206, 0.8); border-top: 1px solid #FAFAFA; -webkit-box-shadow: #cccccc 0 -1px 1px; -moz-box-shadow: #cccccc 0 -1px 1px; box-shadow: #cccccc 0 -1px 1px; } /** -------------------------------------------- Messages -------------------------------------------- */ -.message { display: block; clear: both; margin: 0 0 8px 0; padding: 7px 7px; font-weight: bold; border: 1px #ccc solid; background: #fff; background: rgba(255, 255, 255, 0.5); -webkit-border-radius: 3px 3px 3px 3px; -moz-border-radius: 3px 3px 3px 3px; -ms-border-radius: 3px 3px 3px 3px; -o-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; } -.message.notice { background: #d9edf7; border-color: #bce8f1; } -.message.warning { background-color: #ffbe66; border-color: #ff9300; } -.message.error, .message.bad, .message.required, .message.validation { background: #f6e7e7; background: rgba(241, 220, 220, 0.5); border-color: #efd4d8; color: #b94a48; } -.message.good { background: #65a839; background: rgba(101, 168, 57, 0.7); border-color: #65a839; color: #fff; text-shadow: 1px -1px 0 #1f9433; } -.message.good a, .message.good .cms .jstree .jstree-wholerow a:hover, .cms .jstree .jstree-wholerow .message.good a:hover, .message.good .cms .jstree .jstree-wholerow #vakata-contextmenu li.vakata-hover > a, .cms .jstree .jstree-wholerow #vakata-contextmenu .message.good li.vakata-hover > a, .message.good .cms #vakata-contextmenu .jstree .jstree-wholerow li.vakata-hover > a, .cms #vakata-contextmenu .jstree .jstree-wholerow .message.good li.vakata-hover > a, .message.good .cms .jstree .jstree-wholerow .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu li.vakata-hover > a, .cms .jstree .jstree-wholerow .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu .message.good li.vakata-hover > a, .message.good .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu .cms .jstree .jstree-wholerow li.vakata-hover > a, .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu .cms .jstree .jstree-wholerow .message.good li.vakata-hover > a, .message.good .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow a:hover, .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow .message.good a:hover, .message.good .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow .cms #vakata-contextmenu li.vakata-hover > a, .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow .cms #vakata-contextmenu .message.good li.vakata-hover > a, .message.good .cms #vakata-contextmenu .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow li.vakata-hover > a, .cms #vakata-contextmenu .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow .message.good li.vakata-hover > a, .message.good .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow #vakata-contextmenu li.vakata-hover > a, .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow #vakata-contextmenu .message.good li.vakata-hover > a, .message.good .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu .jstree .jstree-wholerow li.vakata-hover > a, .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu .jstree .jstree-wholerow .message.good li.vakata-hover > a { text-shadow: none; } +.message { display: block; clear: both; margin: 0 0 8px 0; padding: 10px 12px; font-weight: normal; border: 1px #ccc solid; background: #fff; background: rgba(255, 255, 255, 0.5); text-shadow: none; -webkit-border-radius: 3px 3px 3px 3px; -moz-border-radius: 3px 3px 3px 3px; -ms-border-radius: 3px 3px 3px 3px; -o-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; /* // Orange + background: lighten($color-optional,16%); + border-color: $color-optional; +*/ } +.message.notice { background-color: #f0f8fc; border-color: #93cde8; } +.message.warning { background-color: #fefbde; border-color: #e9d104; } +.message.error, .message.bad, .message.required, .message.validation { background-color: #fae8e9; border-color: #e68288; } +.message.good { background-color: #eaf6e4; border-color: #72c34b; } .message p { margin: 0; } /** -------------------------------------------- Page icons -------------------------------------------- */ diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index 32d869c67..d6c388a07 100644 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -388,41 +388,38 @@ body.cms { * Messages * -------------------------------------------- */ -.message { +.message { // White display: block; clear: both; margin: 0 0 $grid-y 0; - padding: $grid-y - 1 $grid-x - 1; - font-weight: bold; + padding: $grid-y + $grid-x/4 $grid-x + $grid-x/2; + font-weight: normal; border: 1px #ccc solid; - background:#fff; //for browsers that don't understand rgba - background:rgba(#fff,0.5); + background: #fff; // for browsers that don't understand rgba + background: rgba(#fff,0.5); + text-shadow: none; @include border-radius(3px 3px 3px 3px); - &.notice { - background: $color-notice; - border-color: darken(adjust-hue($color-notice, -10), 7%); - } - &.warning { - background-color: lighten($color-warning, 20%); + &.notice { + background-color: lighten($color-notice,22%); // Blue + border-color: $color-notice; + } + &.warning { // Yellow + background-color: lighten($color-warning,47%); border-color: $color-warning; } - &.error, &.bad, &.required, &.validation { - background: lighten($color-error, 43%);//for browsers that don't understand rgba - background: rgba(lighten($color-error, 40%), 0.5); - border-color: lighten(adjust-hue($color-error, -10), 38%); - color:$color-error; + &.error, &.bad, &.required, &.validation { // Red + background-color: lighten($color-error,24%); + border-color: $color-error; } - &.good { - background: $color-good;//for browsers that don't understand rgba - background: rgba($color-good,0.7); + &.good { // Green + background-color: lighten($color-good,40%); border-color: $color-good; - color:#fff; - @include text-shadow(1px -1px 0 $color-button-constructive); - a { - text-shadow:none; - } } + /* // Orange + background: lighten($color-optional,16%); + border-color: $color-optional; + */ p { margin: 0; diff --git a/admin/scss/themes/_default.scss b/admin/scss/themes/_default.scss index e8ab914f9..53f5d3f79 100644 --- a/admin/scss/themes/_default.scss +++ b/admin/scss/themes/_default.scss @@ -54,10 +54,11 @@ $color-button-destructive: #f00 !default; $color-button-disabled: #eeeded !default; -$color-warning: #FF9300 !default; -$color-error: #b94a48 !default; -$color-notice: #d9edf7 !default; -$color-good: #65A839 !default; +$color-notice: #93CDE8 !default; // blue +$color-warning: #E9D104 !default; // yellow +$color-error: #e68288 !default; // red +$color-good: #72c34b !default; // green +/*$color-optional: #a1d2eb !default; */ // orange $color-cms-batchactions-menu-background: #f5f5f5 !default; $color-cms-batchactions-menu-selected-background: #efe999 !default; diff --git a/css/AssetUploadField.css b/css/AssetUploadField.css index 469d082f6..e50d956ca 100644 --- a/css/AssetUploadField.css +++ b/css/AssetUploadField.css @@ -31,12 +31,12 @@ body.cms.ss-uploadfield-edit-iframe .fieldholder-small label, .composite.ss-asse .ss-assetuploadfield .ss-uploadfield-files .ui-state-error .ss-uploadfield-item-info { background-color: #c11f1d; padding-right: 130px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c11f1d), color-stop(4%, #bf1d1b), color-stop(8%, #b71b1c), color-stop(15%, #b61e1d), color-stop(27%, #b11d1d), color-stop(31%, #ab1d1c), color-stop(42%, #a51b1b), color-stop(46%, #9f1b19), color-stop(50%, #9f1b19), color-stop(54%, #991c1a), color-stop(58%, #971a18), color-stop(62%, #911b1b), color-stop(65%, #911b1b), color-stop(88%, #7e1816), color-stop(92%, #771919), color-stop(100%, #731817)); background-image: -webkit-linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); background-image: -moz-linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); background-image: -o-linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); background-image: linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); } .ss-assetuploadfield .ss-uploadfield-files .ui-state-error .ss-uploadfield-item-info .ss-uploadfield-item-name { width: 100%; cursor: default; background: #bcb9b9; background: rgba(201, 198, 198, 0.9); } .ss-assetuploadfield .ss-uploadfield-files .ui-state-error .ss-uploadfield-item-info .ss-uploadfield-item-name .name { text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.7); } -.ss-assetuploadfield .ss-uploadfield-files .ui-state-warning .ss-uploadfield-item-info { background-color: #ff9300; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eba547), color-stop(8%, #e89a30), color-stop(50%, #e68f19), color-stop(54%, #e68e19), color-stop(96%, #e17519), color-stop(100%, #dc6718)); background-image: -webkit-linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); background-image: -moz-linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); background-image: -o-linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); background-image: linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); } +.ss-assetuploadfield .ss-uploadfield-files .ui-state-warning .ss-uploadfield-item-info { background-color: #e09d66; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dbb99e), color-stop(8%, #d4ac8b), color-stop(50%, #ce9f78), color-stop(54%, #cd9d77), color-stop(96%, #d18261), color-stop(100%, #d27154)); background-image: -webkit-linear-gradient(top, #dbb99e 0%, #d4ac8b 8%, #ce9f78 50%, #cd9d77 54%, #d18261 96%, #d27154 100%); background-image: -moz-linear-gradient(top, #dbb99e 0%, #d4ac8b 8%, #ce9f78 50%, #cd9d77 54%, #d18261 96%, #d27154 100%); background-image: -o-linear-gradient(top, #dbb99e 0%, #d4ac8b 8%, #ce9f78 50%, #cd9d77 54%, #d18261 96%, #d27154 100%); background-image: linear-gradient(top, #dbb99e 0%, #d4ac8b 8%, #ce9f78 50%, #cd9d77 54%, #d18261 96%, #d27154 100%); } .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name { position: relative; z-index: 1; margin: 3px 0 3px 50px; width: 50%; color: #5e5e5e; background: #eeeded; background: rgba(255, 255, 255, 0.8); -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; line-height: 24px; height: 22px; padding: 0 5px; text-align: left; cursor: pointer; display: table; table-layout: fixed; } .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .name { text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5); display: inline; float: left; max-width: 50%; font-weight: normal; padding: 0 5px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; } .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status { position: relative; float: right; padding: 0 0 0 5px; max-width: 30%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5); } .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-error-text { max-width: 70%; position: absolute; right: 5px; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.6); color: #cc0000; } -.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-warning-text { color: #cc7600; } +.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-warning-text { color: #d7823c; } .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-success-text { color: #1f9433; } .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions { position: absolute; top: 0; right: 0; left: 0; z-index: 0; color: #f00; } .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button { background: none; border: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-shadow: none; color: white; float: right; } diff --git a/css/GridField.css b/css/GridField.css index c4d328f41..e09446362 100644 --- a/css/GridField.css +++ b/css/GridField.css @@ -38,7 +38,7 @@ .cms table.ss-gridfield-table tbody td.col-buttons { width: 40px; padding: 0 8px; text-align: left; } .cms table.ss-gridfield-table tbody td.col-listChildrenLink { width: 16px; border-right: none; text-indent: -9999em; padding: 0; } .cms table.ss-gridfield-table tbody td.col-listChildrenLink .list-children-link { background: transparent url(../images/sitetree_ss_default_icons.png) no-repeat 3px -4px; display: block; } -.cms table.ss-gridfield-table tbody td.col-getTreeTitle span.item { color: #1556b2; } +.cms table.ss-gridfield-table tbody td.col-getTreeTitle span.item { color: #0073c1; } .cms table.ss-gridfield-table tbody td.col-getTreeTitle span.badge { clear: both; text-transform: uppercase; display: inline-block; padding: 0px 3px; font-size: 0.75em; line-height: 1em; margin-left: 10px; margin-right: 6px; margin-top: -1px; -webkit-border-radius: 2px 2px; -moz-border-radius: 2px / 2px; border-radius: 2px / 2px; } .cms table.ss-gridfield-table tbody td.col-getTreeTitle span.badge.modified { color: #7E7470; border: 1px solid #C9B800; background-color: #FFF0BC; } .cms table.ss-gridfield-table tbody td.col-getTreeTitle span.badge.addedtodraft { color: #7E7470; border: 1px solid #C9B800; background-color: #FFF0BC; } diff --git a/css/UploadField.css b/css/UploadField.css index 41c2dfea0..53bd4b3eb 100644 --- a/css/UploadField.css +++ b/css/UploadField.css @@ -17,7 +17,7 @@ .ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info .ss-uploadfield-item-name .name { font-size: 11px; color: #848484; width: 290px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; display: inline; float: left; } .ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info .ss-uploadfield-item-name .ss-uploadfield-item-status { float: right; padding: 0 0 0 5px; width: 100px; text-align: right; } .ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-error-text { color: red; font-weight: bold; } -.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-warning-text { color: #cc7600; } +.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-warning-text { color: #d7823c; } .ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-success-text { color: #1f9433; } .ss-uploadfield .ss-ui-button { display: block; float: left; margin: 0 10px 0 0; } .ss-uploadfield .ss-ui-button.ss-uploadfield-fromcomputer { position: relative; overflow: hidden; }