message css (colors) + better-messages module

Signed-off-by: bachy <git@g-u-i.net>
This commit is contained in:
bachy 2012-10-27 14:43:22 +02:00
parent c811ffcb26
commit ce04398f78
4 changed files with 255 additions and 21 deletions

File diff suppressed because one or more lines are too long

BIN
images/close.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 198 B

View File

@ -1,4 +1,5 @@
@import 'elements.less'; //@import 'elements.less';
@import "gui.less";
/** table */ /** table */
@grey:#E0E0E0; @grey:#E0E0E0;
@ -152,30 +153,30 @@ li{list-style: none inside url();}
.vertical-tab-button strong, .horizontal-tab-button strong{text-transform: uppercase; font-size:0.8em; font-weight:bold;} .vertical-tab-button strong, .horizontal-tab-button strong{text-transform: uppercase; font-size:0.8em; font-weight:bold;}
div.form-type-checkboxes{ div.form-type-checkboxes{
&>label, &>div.form-checkboxes{.inline-block;} &>label, &>div.form-checkboxes{.inlineblock();}
} }
.form-item-language, .form-type-select{ .form-item-language, .form-type-select{
&>label, &>select{.inline-block;} &>label, &>select{.inlineblock();}
&>label{width:35%;} &>label{width:35%;}
&>select{max-width:60%;} &>select{max-width:60%;}
} }
.form-type-textfield{ .form-type-textfield{
&>label, &>input.form-text{.inline-block; margin:0; vertical-align:middle;} &>label, &>input.form-text{.inlineblock(); margin:0; vertical-align:middle;}
&>label{width:35%;} &>label{width:35%;}
&>input.form-text{max-width:60%;} &>input.form-text{max-width:60%;}
} }
.form-type-link-field{ .form-type-link-field{
&>label, &>input.form-text{.inline-block; margin:0;} &>label, &>input.form-text{.inlineblock(); margin:0;}
&>label{width:35%;} &>label{width:35%;}
div{.inline-block; margin:0; width:100%;} div{.inlineblock(); margin:0; width:100%;}
&>div{width:60%;} &>div{width:60%;}
input.form-text{max-width:100%;} input.form-text{max-width:100%;}
} }
.form-phone-number{ .form-phone-number{
.form-item{.inline-block;} .form-item{.inlineblock();}
input.form-text{width:100%;} input.form-text{width:100%;}
} }
@ -184,7 +185,7 @@ li{list-style: none inside url();}
} }
.addressfield-container-inline{ .addressfield-container-inline{
&>div.form-item{.inline-block; margin:0; width:30%;} &>div.form-item{.inlineblock(); margin:0; width:30%;}
} }
fieldset.filter-wrapper{display:none;} fieldset.filter-wrapper{display:none;}
@ -211,8 +212,8 @@ li{list-style: none inside url();}
.field-widget-term-reference-tree .form-item.form-type-checkbox-tree{ .field-widget-term-reference-tree .form-item.form-type-checkbox-tree{
display: block; display: block;
.term-reference-tree{ .term-reference-tree{
&>ul.term-reference-tree-level{.inline-block; padding:0 2em 0 0; min-width:30%;} &>ul.term-reference-tree-level{.inlineblock(); padding:0 2em 0 0; min-width:30%;}
.term-reference-track-list-container{.inline-block; border-left:1px solid #848484; padding:0 0 2em 1em;} .term-reference-track-list-container{.inlineblock(); border-left:1px solid #848484; padding:0 0 2em 1em;}
} }
} }
@ -258,14 +259,38 @@ li{list-style: none inside url();}
} }
.vertical-tabs-list .summary { font-size:11px; } .vertical-tabs-list .summary { font-size:11px; }
.page-admin table tr.even{
background: #EFEFEF;
}
.page-admin table tr{ .page-admin table tr{
&.even, &.odd{ &.even, &.odd{
td, h3 {background-color: transparent;} td, h3 {background-color: transparent;}
&:hover{ background: #D4EFEE;} &:hover{ background: #D4EFEE;}
} }
&.even{
background: #EFEFEF;
}
&.ok, &.ok:hover{
color: #468847;//#036;
background-color: #dff0d8;//#bdf;
// td{
// border-bottom:3px solid #d6e9c6;//#ace;
// }
}
&.warning, &.warning:hover{
color: #c09853;//#840;
background-color: #fcf8e3;//#fe6;
// td{
// border-bottom: 3px solid #fbeed5;//#ed5;
// }
}
&.error, &.error:hover{
color: #b94a48;//#fff;
background-color: #f2dede;//#e63;
// td{
// border-bottom: 3px solid #eed3d7;
// }
}
// td{ border:0 solid #fff;}
} }
@ -395,7 +420,7 @@ body.admin-vertical.admin-expanded #admin-menu-wrapper{border-left:1px solid #32
.pager{ .pager{
padding:1em 0; margin:0; text-align: right; height:auto; padding:1em 0; margin:0; text-align: right; height:auto;
ul{ ul{
.inline-block; padding:0; .inlineblock(); padding:0;
li{ li{
height:20px; height:20px;
a, span{padding:1px 10px 2px;} a, span{padding:1px 10px 2px;}
@ -409,16 +434,16 @@ body.admin-vertical.admin-expanded #admin-menu-wrapper{border-left:1px solid #32
padding:1em 0; margin:0 0 1em 0; padding:1em 0; margin:0 0 1em 0;
border: 1px solid #CCC; .border-radius(5px,5px,5px,5px); border: 1px solid #CCC; .border-radius(5px,5px,5px,5px);
&>span.title, &>form{.inline-block;width:auto;position:relative;vertical-align: top;} &>span.title, &>form{.inlineblock();width:auto;position:relative;vertical-align: top;}
&>span.title{padding:0.7em 1em;} &>span.title{padding:0.7em 1em;}
fieldset{ fieldset{
.inline-block; padding:0 1em; .inlineblock(); padding:0 1em;
.fieldset-content{padding:0;} .fieldset-content{padding:0;}
legend{display:none;} legend{display:none;}
} }
/* .views-exposed-form{ */ /* .views-exposed-form{ */
label{font-weight:normal; font-size:0.75em;} label{font-weight:normal; font-size:0.75em;}
.form-item{.inline-block; padding:0 0.5em 0 0; .form-item{.inlineblock(); padding:0 0.5em 0 0;
select, input{font-size:0.8em;} select, input{font-size:0.8em;}
} }
/* }*/ /* }*/
@ -429,7 +454,7 @@ body.admin-vertical.admin-expanded #admin-menu-wrapper{border-left:1px solid #32
padding:1em 0; margin:0 0 1em 0; padding:1em 0; margin:0 0 1em 0;
border: 1px solid #CCC; .border-radius(5px,5px,5px,5px); border: 1px solid #CCC; .border-radius(5px,5px,5px,5px);
legend, .fieldset-content{.inline-block;} legend, .fieldset-content{.inlineblock();}
legend{ legend{
width:auto; width:auto;
@ -443,7 +468,7 @@ body.admin-vertical.admin-expanded #admin-menu-wrapper{border-left:1px solid #32
} }
.vbo-fieldset-select-all{ .vbo-fieldset-select-all{
width:50%; text-align:left; width:50%; text-align:left;
.form-item{.inline-block;vertical-align:top;} .form-item{.inlineblock();vertical-align:top;}
em{padding:0 1em;} em{padding:0 1em;}
} }
@ -452,7 +477,7 @@ body.admin-vertical.admin-expanded #admin-menu-wrapper{border-left:1px solid #32
/** media browser */ /** media browser */
.view.inline-block-list{ .view.inline-block-list{
.views-row { .views-row {
.inline-block; vertical-align:top; .inlineblock(); vertical-align:top;
padding: 5px; margin:5px; width:250px; min-height:150px; background-color: #E3E3E3; padding: 5px; margin:5px; width:250px; min-height:150px; background-color: #E3E3E3;
.border-radius(5px,5px,5px,5px); border: 1px solid #ddd; .border-radius(5px,5px,5px,5px); border: 1px solid #ddd;
.drop-shadow; .drop-shadow;
@ -525,3 +550,59 @@ body.admin-vertical.admin-expanded #admin-menu-wrapper{border-left:1px solid #32
} }
/** Messages. */
.messages(){
padding: 9px;
margin: 0.5em 0 0;
color: #3a87ad;//#360;
background: #d9edf7;//#cf8;
border: 1px solid #bce8f1;//#be7;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
&.warning {
color: #c09853;//#840;
background-color: #fcf8e3;//#fe6;
border-color: #fbeed5;//#ed5;
}
&.error {
color: #b94a48;//#fff;
background-color: #f2dede;//#e63;
border-color: #eed3d7;//#d52;
}
&.status {
color: #468847;//#036;
background-color: #dff0d8;//#bdf;
border-color:#d6e9c6;//#ace;
}
}
div.messages {
.messages();
}
#better-messages-wrapper{
background-color: rgba(255,255,255,0.6); .p(10px); .rounded(5px); .drop-shadow(0, 0, 6px, 0.4);
#better-messages-default{
.messages-label{display:none;}
div.messages{
.messages(); margin:0 0 10px 0;
}
.footer{
border:none; padding:0; margin:0;
a.message-close{
background: #fff url('../images/close.png') no-repeat center center;
width:15px; height:15px; .rounded(3px); display:block;
}
}
}
}

View File

@ -0,0 +1,15 @@
<?php
/*
Available variables are:
$content The messages to put inside Better Messages. Drupal originally calls theme_status_messages() to theme this output.
With this module enabled you'll always have to call theme_better_messages_content() instead of theme_status_messages().
*/
?><div id="better-messages-default">
<div id="messages-inner">
<div class="content">
<?php /* If you want to theme further.. theme_better_messages_content() */ ?>
<?php print $content ?>
</div>
<div class="footer"><span class="message-timer"></span><a class="message-close" href="#"></a></div>
</div>
</div>