[PATCH 1/4] Visually grouped Pools in Monitor + Environment's dark skin to light one

Imre Farkas ifarkas at redhat.com
Mon Oct 8 15:31:13 UTC 2012


On 10/08/2012 02:41 PM, jcoufal at redhat.com wrote:
> From: Jaromir Coufal <jcoufal at redhat.com>
>
> ---
>   src/app/stylesheets/layout.scss | 156 +++++++++++++++++++++++-----------------
>   1 file changed, 91 insertions(+), 65 deletions(-)
>
> diff --git a/src/app/stylesheets/layout.scss b/src/app/stylesheets/layout.scss
> index e8e75de..b09ac6a 100644
> --- a/src/app/stylesheets/layout.scss
> +++ b/src/app/stylesheets/layout.scss
> @@ -867,33 +867,33 @@ $dd_icon_padding_right: 4px;
>   $bar_height: 37px;
>
>   div.pool.overview{
> +  background: rgb(230,230,230);
> +  border: 1px solid rgb(210,210,210);
> +  border-radius: 7px;
> +  -webkit-border-radius: 7px;
> +  -moz-border-radius: 7px;
>
>     header{
>       position: relative;
>       height: $bar_height;
>       width: 100%;
> -    background-color: #e5e5e5;
> -    -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;
> -    border: 1px solid #bcbcbc;
> +    border-bottom: 1px solid rgb(195,195,195);
> +    -webkit-border-radius: 5px 5px 0 0;
> +    -moz-border-radius: 5px 5px 0 0;
> +    border-radius: 5px 5px 0 0;
> +
>
> -    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.20);
> -    -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.20);
> -    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.20);
>

You may want to remove the 3 empty lines here.

>       h3.name{
>         display: block;
>         float: left;
>         width: 230px;
>         height: $bar_height;
> -      background: transparent url('../../images/pool_bar_name-bg-normal.png') no-repeat 0px 0px;
> -      border-right: 1px solid #a9a9a9;
>         vertical-align: top;
>
>         a{
>           display: block;
> -        text-decoration: none;
> -        padding: 9px;
> -        padding-left: 30px;
> +        padding: 9px 10px 10px 10px;
>           font-family: $font-family-primary;
>           font-size: 17px;
>           color: #666;
> @@ -933,7 +933,6 @@ div.pool.overview{
>       dl.statistics{
>         @include display_inline_block;
>         height: $bar_height;
> -      background: transparent url('../../images/pool_bar_prop-gradient.png') repeat-y 0px 0px;
>       }
>
>       /* statistic group list */
> @@ -1032,13 +1031,21 @@ div.pool.overview{
>
>     }
>
> +  & > .content {
> +    padding: 10px;
> +    margin: 0;
> +    width: auto;
> +    background: rgb(249,249,249);
> +  }
> +
>     ul.actions{
>       list-style: none;
>       display: block;
>       text-align: right;
> -    width: 100%;
> -    margin: 10px 0px 0px 0px;
>       font-size: 11px;
> +    -webkit-border-radius: 0 0 5px 5px;
> +    -moz-border-radius: 0 0 5px 5px;
> +    border-radius: 0 0 5px 5px;
>
>       li{
>         @include display_inline_block;
> @@ -1061,21 +1068,19 @@ div.pool.overview.alert{
>   }
>
>   div.pool.overview.collapsed{
> -
> -  header{
> -    box-shadow: none;
> -    -moz-box-shadow: none;
> -    -webkit-box-shadow: none;
> -    border: 1px solid #ccc;
> +  header {
> +    border-bottom: 0 none;
>
>       a.control{
>         background-position: 0px -0px;
>         &:active{background-position: 0px -28px;}
>         &:hover{color: #333;}
>       }
> +  }
>
> +  .content {
> +    display: none;
>     }
> -  .content{ display: none; }
>   }
>
>   div.pool.overview + div.pool.overview{
> @@ -1244,12 +1249,12 @@ ul.deployment-array.large + ul.deployment-array.large{
>   /************************************************************************** */
>
>   $deployment-small-height: 116px;
> -$deployment-small-width: 174px;
> +$deployment-small-width: 170px;
>   $deployment-small-padding: 8px;
>
>   ul.deployment-array.small{
>
> -  margin-top: 10px;
> +  margin-bottom: 10px;
>     list-style: none;
>     display: table;
>     height: 100%;
> @@ -1259,7 +1264,7 @@ ul.deployment-array.small{
>       display: table-cell;
>       float: left;
>       border: 1px solid #ccc;
> -    background-color: #efefef;
> +    background-color: rgb(240,240,240);
>       -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
>       padding: $deployment-small-padding;
>       width: $deployment-small-width - ($deployment-small-padding * 2);
> @@ -2166,71 +2171,94 @@ table.flat, form.filterable-data table{
>   /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
>   Pool Families Table
>   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
> +

You may want to remove the empty line here.

>   table.pool_families{
> -  a{
> -    color: white;
> -    text-decoration: none;
> -    &:hover{ text-decoration: underline; }
> -  }
>     border-collapse: separate;
>     width: 100%;
> -  color: white;
>     margin-bottom: 20px;
> -  border: 1px solid #343434;
> -  border-top: none;
> -  border-bottom: none;
> -
> -  -webkit-border-radius: 0px 0px 7px 7px;
> -  -moz-border-radius: 0px 0px 7px 7px;
> -  border-radius: 0px 0px 7px 7px;
> +  border: 1px solid #D1D1D1;
> +  border-top: 0 none;
> +  border-bottom: 0 none;
> +  -webkit-border-radius: 0 0 5px 5px;
> +  -moz-border-radius: 0 0 5px 5px;
> +  border-radius: 0 0 5px 5px;
>
>     caption{
>       width: 100%;
> -    background: #686868;
> -    border: 1px solid #343434;
> -    border-bottom: none;
> -    -webkit-border-radius: 7px 7px 0px 0px;
> -    -moz-border-radius: 7px 7px 0px 0px;
> -    border-radius: 7px 7px 0px 0px;
>       box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box;
> +    background: rgb(245, 245, 245);
> +    border: 1px solid #D1D1D1;
> +    -webkit-border-radius: 5px 5px 0 0;
> +    -moz-border-radius: 5px 5px 0 0;
> +    border-radius: 5px 5px 0 0;
> +
> +    h2 {
> +      font-size: 17px;
> +      font-weight: bold;
> +      padding-top: 2px;
> +      margin: 0;
> +    }
> +
> +    a {
> +      color: #666;
> +
> +      &:hover {
> +        color: black;
> +      }
> +    }
>
>       .caption_content{padding: 8px;}
>     }
>
>     th{
> -    background: #686868;
> +    background: rgb(225, 225, 225);
>       padding: 2px 8px;
>       font-size: 10px;
>       font-weight: bold;
> -    border-bottom: 1px solid #343434;
> +    color: #666;
> +    font-weight: bold;
> +    border-bottom: 1px solid #BFBFBF;
> +
> +    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#F3F3F3), to(#D2D2D2));
> +    background-image: -moz-linear-gradient(#F3F3F3, #D2D2D2);
> +    background-image: -o-linear-gradient(#F3F3F3, #D2D2D2);
> +    background-image: linear-gradient(#F3F3F3, #D2D2D2);
>     }
>
>     td{
>       padding: 8px;
> -    border-top: 1px solid #909090;
> -    border-bottom: 1px solid #343434;
>       vertical-align: middle;
> +    border-bottom: 1px solid #D1D1D1;
>
> -    background: #666666; /* Old browsers */
> -    background: -moz-linear-gradient(top, #666666 0%, #535353 100%); /* FF3.6+ */
> -    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#666666), color-stop(100%,#535353)); /* Chrome,Safari4+ */
> -    background: -webkit-linear-gradient(top, #666666 0%,#535353 100%); /* Chrome10+,Safari5.1+ */
> -    background: -o-linear-gradient(top, #666666 0%,#535353 100%); /* Opera11.10+ */
> -    background: -ms-linear-gradient(top, #666666 0%,#535353 100%); /* IE10+ */
> -    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#535353',GradientType=0 ); /* IE6-9 */
> -    background: linear-gradient(top, #666666 0%,#535353 100%); /* W3C */
> +    a:not(.button) {
> +      color: #3286B8;
> +    }
> +  }
> +
> +  tr {
> +    background: #F3F3F3;
> +
> +    &.total {
> +      background: rgb(225, 225, 225);
> +      color: rgb(150, 150, 150);
> +    }
> +  }
> +
> +  tr:nth-child(odd):not(.total) {
> +    background: #FAFAFA;
>     }
>
>     tr:last-child{
> -    td:first-child{
> -      -webkit-border-radius: 0px 0px 0px 7px;
> -      -moz-border-radius: 0px 0px 0px 7px;
> -      border-radius: 0px 0px 0px 7px;
> +    td:first-child {
> +      -webkit-border-radius: 0 0 0 5px;
> +      -moz-border-radius: 0 0 0 5px;
> +      border-radius: 0 0 0 5px;
>       }
> -    td:last-child{
> -      -webkit-border-radius: 0px 0px 7px 0px;
> -      -moz-border-radius: 0px 0px 7px 0px;
> -      border-radius: 0px 0px 7px 0px;
> +
> +    td:last-child {
> +      -webkit-border-radius: 0 0 5px 0;
> +      -moz-border-radius: 0 0 5px 0;
> +      border-radius: 0 0 5px 0;
>       }
>     }
>
> @@ -2248,7 +2276,6 @@ table.pool_families{
>       text-decoration: none;
>       white-space: nowrap;
>       padding: 3px 6px;
> -    -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px;
>       border: 1px solid #343434;
>
>       -webkit-box-shadow: 0px 0px 1px 0px #333;
> @@ -2281,7 +2308,6 @@ table.pool_families{
>       padding: 3px 6px;
>       border: 1px solid #3a3a3a;
>
> -    -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px;
>       -webkit-box-shadow: 0px 0px 1px 0px #333;
>       -moz-box-shadow: 0px 0px 1px 0px #333;
>       box-shadow: 0px 0px 1px 0px #333;
>

2 inline notes which you can change if you agree with them.



More information about the aeolus-devel mailing list