tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-09-29 12:49:06 +02:00
Code Issues Projects Releases Wiki Activity

BUGFIX: colour Adjustments

Browse Source 
Change the constructive button colour to match the colour used in the
designs, and fixed up calculations to produce the correct button colour.
This commit is contained in:
Naomi Guyer 2012-05-08 14:15:09 +12:00
parent ddd5c402b0
commit 181ea6cbea
4 changed files with 58 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
admin/css/screen.css
View File

@ -185,9 +185,9 @@ form.small .field input.text, form.small .field textarea, form.small .field sele
.cms .ss-ui-button.buttonset { margin: 0 -1px; }
.cms .ss-ui-button.ui-state-hover, .cms .ss-ui-button:hover { text-decoration: none; background-color: white; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U2ZTZlNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: -webkit-linear-gradient(#ffffff, #e6e6e6); background: -moz-linear-gradient(#ffffff, #e6e6e6); background: -o-linear-gradient(#ffffff, #e6e6e6); background: -ms-linear-gradient(#ffffff, #e6e6e6); background: linear-gradient(#ffffff, #e6e6e6); -moz-box-shadow: 0 0 5px #b3b3b3; -webkit-box-shadow: 0 0 5px #b3b3b3; -o-box-shadow: 0 0 5px #b3b3b3; box-shadow: 0 0 5px #b3b3b3; }
.cms .ss-ui-button:active, .cms .ss-ui-button:focus, .cms .ss-ui-button.ui-state-active, .cms .ss-ui-button.ui-state-focus { border: 1px solid #b3b3b3; background-color: white; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U2ZTZlNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: -webkit-linear-gradient(#ffffff, #e6e6e6); background: -moz-linear-gradient(#ffffff, #e6e6e6); background: -o-linear-gradient(#ffffff, #e6e6e6); background: -ms-linear-gradient(#ffffff, #e6e6e6); background: linear-gradient(#ffffff, #e6e6e6); -moz-box-shadow: 0 0 5px #b3b3b3 inset; -webkit-box-shadow: 0 0 5px #b3b3b3 inset; -o-box-shadow: 0 0 5px #b3b3b3 inset; box-shadow: 0 0 5px #b3b3b3 inset; }
.cms .ss-ui-button.ss-ui-action-constructive { font-weight: bold; color: white; border-color: #78a127; border-bottom-color: #59781d; background-color: #669933; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwYmY0MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5ODYyZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #80bf40), color-stop(100%, #59862d)); background: -webkit-linear-gradient(#80bf40, #59862d); background: -moz-linear-gradient(#80bf40, #59862d); background: -o-linear-gradient(#80bf40, #59862d); background: -ms-linear-gradient(#80bf40, #59862d); background: linear-gradient(#80bf40, #59862d); text-shadow: #4d7326 0 1px 1px; }
.cms .ss-ui-button.ss-ui-action-constructive.ui-state-hover, .cms .ss-ui-button.ss-ui-action-constructive:hover { border-color: #59781d; background-color: #80bf40; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhjYzY1MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzY2OTkzMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8cc653), color-stop(100%, #669933)); background: -webkit-linear-gradient(#8cc653, #669933); background: -moz-linear-gradient(#8cc653, #669933); background: -o-linear-gradient(#8cc653, #669933); background: -ms-linear-gradient(#8cc653, #669933); background: linear-gradient(#8cc653, #669933); }
.cms .ss-ui-button.ss-ui-action-constructive:active, .cms .ss-ui-button.ss-ui-action-constructive:focus, .cms .ss-ui-button.ss-ui-action-constructive.ui-state-active, .cms .ss-ui-button.ss-ui-action-constructive.ui-state-focus { background-color: #619130; -moz-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); -webkit-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); -o-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); }
.cms .ss-ui-button.ss-ui-action-constructive { text-shadow: none; font-weight: bold; color: white; border-color: #1f9433; border-bottom-color: #166a24; background-color: #1f9433; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzkzYmU0MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzFmOTQzMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #93be42), color-stop(100%, #1f9433)); background: -webkit-linear-gradient(#93be42, #1f9433); background: -moz-linear-gradient(#93be42, #1f9433); background: -o-linear-gradient(#93be42, #1f9433); background: -ms-linear-gradient(#93be42, #1f9433); background: linear-gradient(#93be42, #1f9433); text-shadow: #1c872f 0 -1px -1px; }
.cms .ss-ui-button.ss-ui-action-constructive.ui-state-hover, .cms .ss-ui-button.ss-ui-action-constructive:hover { border-color: #166a24; background-color: #1f9433; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E0Y2EzYSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzIzYTkzYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a4ca3a), color-stop(100%, #23a93a)); background: -webkit-linear-gradient(#a4ca3a, #23a93a); background: -moz-linear-gradient(#a4ca3a, #23a93a); background: -o-linear-gradient(#a4ca3a, #23a93a); background: -ms-linear-gradient(#a4ca3a, #23a93a); background: linear-gradient(#a4ca3a, #23a93a); }
.cms .ss-ui-button.ss-ui-action-constructive:active, .cms .ss-ui-button.ss-ui-action-constructive:focus, .cms .ss-ui-button.ss-ui-action-constructive.ui-state-active, .cms .ss-ui-button.ss-ui-action-constructive.ui-state-focus { background-color: #1d8c30; -moz-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); -webkit-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); -o-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); }
.cms .ss-ui-button.ss-ui-action-destructive { color: red; background-color: #e6e6e6; }
.cms .ss-ui-button.ss-ui-button-small { padding: 4px 4px; }
.cms .ss-ui-button.ui-state-highlight { background-color: #e6e6e6; border: 1px solid #708284; }
@ -317,12 +317,13 @@ body.cms { overflow: hidden; }
.message.notice a { color: #999; }
.message.warning { background-color: #ffbe66; border-color: #ff9300; }
.message.error, .message.bad, .message.required { background-color: #ffbe66; border-color: #ff9300; }
.message.good { background-color: #99cc66; border-color: #669933; }
.message.good { background-color: rgba(101, 168, 57, 0.7); border-color: #65a839; color: #fff; text-shadow: 1px -1px 0 #1f9433; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; -o-border-radius: 3px 3px 3px 3px; -ms-border-radius: 3px 3px 3px 3px; -khtml-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; }
.message p { margin: 0; }
/** -------------------------------------------- "Add page" dialog -------------------------------------------- */
.cms-page-add-form-dialog { display: none; }
.cms-add-form .step-label { opacity: 0.9; }
.cms-add-form .step-label .flyout { height: 17px; padding-top: 5px; }
.cms-add-form .step-label .title { padding-top: 5px; font-weight: bold; text-shadow: 1px 1px 0 white; }
.cms-add-form ul.SelectionGroup { padding-left: 28px; }
@ -477,7 +478,7 @@ form.member-profile-form .ui-tabs-nav .ui-corner-all, form.member-profile-form .
.cms-panel .collapsed-flyout { display: block !important; left: 41px; margin-top: -40px; position: fixed; width: 191px; }
.cms-panel .collapsed-flyout li a span { display: block !important; }
.cms .cms-panel-padded { padding: 16px 16px; }
.cms .cms-panel-padded { padding: 16px 16px; margin: 0; }
/** ------------------------------------------------------------------
* Dialog
@ -595,6 +596,12 @@ form.import-form label.left { width: 250px; }
.cms-container .CMSMain.CMSPageSettingsController .tab#Root_Settings .fieldgroup .fieldgroup-field { width: 216px; padding-left: 0; }
.cms-container .CMSMain.CMSPageSettingsController .tab#Root_Settings .TreeDropdownField .treedropdownfield-toggle-panel-link { border-left: none; background: none; background-image: none; }
/** -------------------------------------------- Buttons for FileUpload -------------------------------------------- */
span.toggle-details .toggle-details-icon { background: url('../images/sprites-32x32-sa4e142f7f0.png') 0 -727px no-repeat; }
.fileOverview span.toggle-details .toggle-details-icon { background: url('../images/sprites-32x32-sa4e142f7f0.png') 0 -695px no-repeat; }
span.toggle-details .toggle-details-icon.opened { background: url('../images/sprites-32x32-sa4e142f7f0.png') 0 -743px no-repeat; }
.fileOverview span.toggle-details .toggle-details-icon.opened { background: url('../images/sprites-32x32-sa4e142f7f0.png') 0 -711px no-repeat; }
/** 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, .TreeDropdownField .treedropdownfield-panel .jstree ul { display: block; margin: 0; padding: 0; background: none; list-style-type: none; }
.cms .jstree li, .TreeDropdownField .treedropdownfield-panel .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; }

21
admin/scss/_forms.scss
View File

@ -322,6 +322,7 @@ form.small .field, .field.small {
/* constructive */
&.ss-ui-action-constructive {
text-shadow:none;
font-weight: bold;
color: $color-text-light;
border-color: $color-button-constructive-border;
@ -329,19 +330,19 @@ form.small .field, .field.small {
background-color: $color-button-constructive;
@include background(
linear-gradient(color-stops(
lighten($color-button-constructive, 10%),
darken($color-button-constructive, 5%)
scale-color(lighten($color-button-constructive, 10%), $red:50%),
$color-button-constructive
))
);
@include text-shadow(darken($color-button-constructive, 10%) 0 1px 1px);
@include text-shadow(darken($color-button-constructive, 3%) 0 -1px -1px);
&.ui-state-hover, &:hover {
border-color: darken($color-button-constructive-border, 10%);
background-color: lighten($color-button-constructive, 10%);
background-color: $color-button-constructive;
@include background(
linear-gradient(color-stops(
lighten($color-button-constructive, 15%),
$color-button-constructive
scale-color(saturate(lighten($color-button-constructive, 10%), 10%), $red:60%),
lighten($color-button-constructive, 5%)
))
);
}
@ -505,3 +506,9 @@ input.radio {
.action-hidden {
display: none;
}

30
admin/scss/_style.scss
View File

@ -418,8 +418,11 @@ body.cms {
}
&.good {
background-color: lighten($color-good, 20%);
background-color: rgba($color-good,0.7);
border-color: $color-good;
color:#fff;
@include text-shadow(1px -1px 0 $color-button-constructive);
@include border-radius(3px 3px 3px 3px);
}
p {
@ -438,6 +441,7 @@ body.cms {
.cms-add-form {
.step-label {
opacity:0.9;
.flyout {
height:17px; //centres number within the grey arrow
padding-top:5px;
@ -1241,6 +1245,7 @@ form.member-profile-form {
.cms {
.cms-panel-padded {
padding: $grid-y*2 $grid-x*2;
margin:0;
}
}
@ -1783,3 +1788,26 @@ form.import-form {
}
}
}
/** --------------------------------------------
* Buttons for FileUpload
* -------------------------------------------- */
span.toggle-details{
.toggle-details-icon {
background: sprite($sprites32, menu-arrow-down) no-repeat;
.fileOverview &{
background: sprite($sprites32, menu-arrow-deselected-down) no-repeat;
}
&.opened {
background: sprite($sprites32, menu-arrow-up) no-repeat;
.fileOverview &{
background: sprite($sprites32, menu-arrow-deselected-up) no-repeat;
}
}
}
}

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

@ -45,8 +45,8 @@ $color-button-generic-border: #c0c0c2 !default;
$color-button-highlight: #e6e6e6 !default;
$color-button-highlight-border: #708284 !default;
$color-button-constructive: #669933 !default;
$color-button-constructive-border: #78a127 !default;
$color-button-constructive: #1F9433 !default;
$color-button-constructive-border: #1F9433 !default;
$color-button-destructive: #f00 !default;
@ -55,7 +55,7 @@ $color-button-disabled: #eeeded !default;
$color-warning: #FF9300 !default;
$color-error: #FF9300 !default;
$color-notice: #FF9300 !default;
$color-good: $color-button-constructive !default;
$color-good: #65A839 !default;
$color-cms-batchactions-menu-background: #f5f5f5 !default;
$color-cms-batchactions-menu-selected-background: #efe999 !default;