Changeset 5148


Ignore:
Timestamp:
05/07/14 15:16:07 (10 years ago)
Author:
Twan Goosen
Message:

refactored LESS/CSS a bit:

  • colours defined through variables
  • all common and theme definitions under 'inc', so that only the theme roots get compiled
Location:
vlo/trunk/vlo-web-app
Files:
3 added
3 edited
2 copied
10 moved

Legend:

Unmodified
Added
Removed

  • vlo/trunk/vlo-web-app/pom.xml

    r5146 r5148  
    234234                    <compress>true</compress>
    235235                    <force>true</force>
    236                     <includes>
    237                         <include>**/*</include>
    238                     </includes>
     236                    <excludes>
     237                        <exclude>**/inc/**/*</exclude>
     238                    </excludes>
    239239                </configuration>
    240240                <executions>

  • vlo/trunk/vlo-web-app/src/main/less/eu/clarin/cmdi/vlo/wicket/pages/inc/clarin-d/colour.less

    r5146 r5148  
    1 /*
    2 Palette generated using http://www.cssdrive.com/imagepalette/index.php
    3 with header image as input
     1@body-background: #97adc2;
    42
    5 .color1 { color: #b4c4d3}
    6 .color2 { color: #d1dae4}
    7 .color3 { color: #ecf0f4}
    8 .color4 { color: #d1dbe4}
    9 .color5 { color: #97acc2}
    10 .color6 { color: #d2dbe5}
    11 .color7 { color: #eff2f5}
    12 .color8 { color: #eff2f6}
    13 .color9 { color: #d3dce5}
    14 .color10 { color: #b5c4d4}
    15 .color11 { color: #97adc2}
    16 .color12 { color: #e8eef2}
    17 .color13 { color: #f0f3f6}
    18 .color14 { color: #f1f3f6}
    19 .color15 { color: #b5c5d4}
    20 .color16 { color: #98adc2}
    21 .color17 { color: #b5c4d3}
    22 .color18 { color: #eef1f5}
    23 .color19 { color: #0f4172}
    24 .color20 { color: #eef2f5}
    25 .color21 { color: #e7ecf2}
    26 .color22 { color: #e2e8ee}
    27 .color23 { color: #b8c7d5}
    28 .color24 { color: #b3c3d2}
    29 .color25 { color: #cfd9e3}
    30 .color26 { color: #dfe5ec}
    31 .color27 { color: #e8eef2}
    32 .color28 { color: #d0dae3}
    33 .color29 { color: #b3c3d3}
    34 .color30 { color: #96acc1}
    35 */
     3@main-background: #e8eef2;
    364
    37 blockquote{border-color: #777;}
     5@menu-background: #b3c3d2;
     6@menu-foregrond: #F5F6F0;
     7@menu-border-color: #EEE;
    388
    39 a:hover, div.content a:hover, .facetvalues li a:hover {
    40     color: #000;
    41 }
     9@content-color: #291c16;
    4210
    43 h1
    44 { background: transparent;
    45   color: #4c504d;
    46 }
     11@sidebar-item-background: #d1dae4;
     12@sidebar-item-foreground: #555;
    4713
    48 body{background: #97adc2;}
     14@footer-background: #96acc1;
     15@footer-foreground: #414141;
     16@footer-border-color: #0f4172;
    4917
    50 #main{background: #e8eef2;}
     18@search-result-alternative-background: #f1f3f6;
    5119
    52 #header
    53 { background: #B5B9A7;
    54   color: #777;
    55   border-top-color: #EEE;
    56   border-bottom-color: #ABB197;
    57 }
     20@breadcrumb-hover-background: #d1dae4;
    5821
    59 #logo, #logo h1
    60 { background: transparent;
    61   color: #777;
    62 }
    63 
    64 #menu
    65 { background: #b3c3d2 url(../menu.png);
    66   color: #F5F6F0;
    67   border-color: #EEE;
    68 }
    69 
    70 #menu li a
    71 { background: transparent;
    72   color: #F5F6F0;
    73   border-color: #989898;
    74 }
    75 
    76 #menu li a:hover, #menu li a#selected, #menu li a#selected:hover
    77 { background: #c9b4a8 url(../menu_hover.png);
    78   color: #F5F6F0;
    79   border-color: #989898;
    80 }
    81 
    82 .sidebar, div.content
    83 { background: #e8eef2;
    84   color: #291c16;
    85 }
    86 
    87 .sidebaritem, .topbar
    88 { background: #d1dae4;
    89   color: #555;
    90 }
    91 
    92 .sbilinks li a, .sidebaritem a, .topbar a, .facetvalues a
    93 {
    94     /*background: transparent url(arrow.png) no-repeat left center;*/
    95   color: #555;
    96 }
    97 
    98 .sbilinks li a:hover, .sidebaritem a:hover,  .facetvalues a:hover
    99 {
    100     /*background: transparent url(arrow_select.png) no-repeat left center;*/
    101   color: #936851;
    102   text-decoration: underline;
    103 }
    104 
    105 div.content a
    106 { background: transparent;
    107   color: #666257;
    108 }
    109 
    110 #footer
    111 { background: #96acc1 url(../footer.png) repeat-x;
    112   color: #414141;
    113   border-color: #0f4172;
    114 }
    115 
    116 #address, #footer a, #footer a:hover
    117 { background: transparent;
    118   color: #414141;
    119 }
    120 
    121 #record .attributeValues .searchword, #recordcmdi .searchword {
    122     background: yellow;
    123 }
    124 
    125 li.searchresultitem:nth-child(even), #record .recorddetailstable tr:nth-child(odd) {
    126     background: #f1f3f6;
    127 }
    128 
    129 span.breadcrumbfacet:hover {
    130     background: #d1dae4;
    131 }
    132 
    133 /* Based on Nifty Corners: rounded corners without images */
    134 /* By Alessandro Fulciniti */
    135 /* http://www.html.it/articoli/nifty/index.html */
    136 .rtop, .rbottom{background: #e8eef2;}
    137 .rtop .r1, .rtop .r2, .rtop .r3, .rtop .r4,
    138 .rbottom .r1, .rbottom .r2, .rbottom .r3, .rbottom .r4{background: #d1dae4;}
     22@import "../colour-common";

  • vlo/trunk/vlo-web-app/src/main/less/eu/clarin/cmdi/vlo/wicket/pages/inc/colour-common.less

    r5146 r5148  
    1 /*
    2 Palette generated using http://www.cssdrive.com/imagepalette/index.php
    3 with header image as input
    4 
    5 .color1 { color: #fff6da}
    6 .color2 { color: #fff9e8}
    7 .color3 { color: #fffdf9}
    8 .color4 { color: #ffffff}
    9 .color5 { color: #d4dff0}
    10 .color6 { color: #fff9e7}
    11 .color7 { color: #684639}
    12 .color8 { color: #d3def0}
    13 .color9 { color: #fff9e6}
    14 .color10 { color: #936851}
    15 .color11 { color: #bfc8c1}
    16 .color12 { color: #7f9cab}
    17 .color13 { color: #61230d}
    18 .color14 { color: #fffecb}
    19 .color15 { color: #d6e0f1}
    20 .color16 { color: #fff8e2}
    21 .color17 { color: #fffcf3}
    22 .color18 { color: #fff7e1}
    23 .color19 { color: #fffbf1}
    24 .color20 { color: #fff7df}
    25 .color21 { color: #fffbf0}
    26 .color22 { color: #fffffe}
     1/*
     2 * Applies colour theme to a number of classes and elements.
     3 * Should be included in each colour theme!
    274*/
    285
    29 blockquote{border-color: #777;}
     6body{background: @body-background;}
    307
    31 a:hover, div.content a:hover, .facetvalues li a:hover {
    32     color: #000;
    33 }
    34 
    35 h1
    36 { background: transparent;
    37   color: #4c504d;
    38 }
    39 
    40 body{background: #bfced5;}
    41 
    42 #main{background: #d3def0;}
    43 
    44 #header
    45 { background: #B5B9A7;
    46   color: #777;
    47   border-top-color: #EEE;
    48   border-bottom-color: #ABB197;
    49 }
    50 
    51 #logo, #logo h1
    52 { background: transparent;
    53   color: #777;
    54 }
     8#main{background: @main-background;}
    559
    5610#menu
    57 { background: #898867 url(menu.png);
    58   color: #F5F6F0;
    59   border-color: #EEE;
    60 }
    61 
    62 #menu li a
    63 { background: transparent;
    64   color: #F5F6F0;
    65   border-color: #989898;
    66 }
    67 
    68 #menu li a:hover, #menu li a#selected, #menu li a#selected:hover
    69 { background: #c9b4a8 url(menu_hover.png);
    70   color: #F5F6F0;
    71   border-color: #989898;
     11{ background: @menu-background url(menu.png);
     12  color: @menu-foregrond;
     13  border-color: @menu-border-color;
    7214}
    7315
    7416.sidebar, div.content
    75 { background: #d3def0;
    76   color: #291c16;
     17{ background: @main-background;
     18  color: @content-color;
    7719}
    7820
    7921.sidebaritem, .topbar
    80 { background: #e9eff8;
    81   color: #555;
     22{ background: @sidebar-item-background;
     23  color: @sidebar-item-foreground;
    8224}
    8325
    84 .sbilinks li a, .sidebaritem a, .topbar a, .facetvalues a
    85 {
    86     /*background: transparent url(arrow.png) no-repeat left center;*/
    87     color: #555;
    88 }
    89 
    90 .sbilinks li a:hover, .sidebaritem a:hover,  .facetvalues a:hover
    91 {
    92     /*background: transparent url(arrow_select.png) no-repeat left center;*/
    93     text-decoration: underline;
    94 }
    95 
    96 div.content a
    97 { background: transparent;
    98   color: #666257;
    99 }
    100 
    10126#footer
    102 { background: #bfc8c1 url(footer.png) repeat-x;
    103   color: #414141;
    104   border-color: #4c504d;
    105 }
    106 
    107 #address, #footer a, #footer a:hover
    108 { background: transparent;
    109   color: #414141;
    110 }
    111 
    112 #record .attributeValues .searchword, #recordcmdi .searchword {
    113     background: yellow;
     27{ background: @footer-background url(footer.png) repeat-x;
     28  color: @footer-foreground;
     29  border-color: @footer-border-color;
    11430}
    11531
    11632li.searchresultitem:nth-child(even), #record .recorddetailstable tr:nth-child(odd) {
    117     background: #ccd6e8;
     33    background: @search-result-alternative-background;
    11834}
    11935
    12036span.breadcrumbfacet:hover {
    121     background: #e9eff8;
     37    background: @breadcrumb-hover-background;
    12238}
    12339
    … …  
    12541/* By Alessandro Fulciniti */
    12642/* http://www.html.it/articoli/nifty/index.html */
    127 .rtop, .rbottom{background: #d3def0;}
     43.rtop, .rbottom{background: @main-background;}
    12844.rtop .r1, .rtop .r2, .rtop .r3, .rtop .r4,
    129 .rbottom .r1, .rbottom .r2, .rbottom .r3, .rbottom .r4{background: #e9eff8;}
     45.rbottom .r1, .rbottom .r2, .rbottom .r3, .rbottom .r4{background: @sidebar-item-background;}

  • vlo/trunk/vlo-web-app/src/main/less/eu/clarin/cmdi/vlo/wicket/pages/inc/default/colour.less

    r5146 r5148  
    1 /*
    2 Palette generated using http://www.cssdrive.com/imagepalette/index.php
    3 with header image as input
     1@body-background: #bfced5;
    42
    5 .color1 { color: #fff6da}
    6 .color2 { color: #fff9e8}
    7 .color3 { color: #fffdf9}
    8 .color4 { color: #ffffff}
    9 .color5 { color: #d4dff0}
    10 .color6 { color: #fff9e7}
    11 .color7 { color: #684639}
    12 .color8 { color: #d3def0}
    13 .color9 { color: #fff9e6}
    14 .color10 { color: #936851}
    15 .color11 { color: #bfc8c1}
    16 .color12 { color: #7f9cab}
    17 .color13 { color: #61230d}
    18 .color14 { color: #fffecb}
    19 .color15 { color: #d6e0f1}
    20 .color16 { color: #fff8e2}
    21 .color17 { color: #fffcf3}
    22 .color18 { color: #fff7e1}
    23 .color19 { color: #fffbf1}
    24 .color20 { color: #fff7df}
    25 .color21 { color: #fffbf0}
    26 .color22 { color: #fffffe}
    27 */
     3@main-background: #d3def0;
    284
    29 blockquote{border-color: #777;}
     5@content-color: #291c16;
    306
    31 a:hover, div.content a:hover, .facetvalues li a:hover {
    32     color: #000;
    33 }
     7@menu-background: #898867;
     8@menu-foregrond: #F5F6F0;
     9@menu-border-color: #EEE;
    3410
    35 h1
    36 { background: transparent;
    37   color: #4c504d;
    38 }
     11@sidebar-item-background: #e9eff8;
     12@sidebar-item-foreground: #555;
    3913
    40 body{background: #bfced5;}
     14@footer-background: #bfc8c1;
     15@footer-foreground: #414141;
     16@footer-border-color: #4c504d;
    4117
    42 #main{background: #d3def0;}
     18@search-result-alternative-background: #ccd6e8;
    4319
    44 #header
    45 { background: #B5B9A7;
    46   color: #777;
    47   border-top-color: #EEE;
    48   border-bottom-color: #ABB197;
    49 }
     20@breadcrumb-hover-background: #e9eff8;
    5021
    51 #logo, #logo h1
    52 { background: transparent;
    53   color: #777;
    54 }
    55 
    56 #menu
    57 { background: #898867 url(menu.png);
    58   color: #F5F6F0;
    59   border-color: #EEE;
    60 }
    61 
    62 #menu li a
    63 { background: transparent;
    64   color: #F5F6F0;
    65   border-color: #989898;
    66 }
    67 
    68 #menu li a:hover, #menu li a#selected, #menu li a#selected:hover
    69 { background: #c9b4a8 url(menu_hover.png);
    70   color: #F5F6F0;
    71   border-color: #989898;
    72 }
    73 
    74 .sidebar, div.content
    75 { background: #d3def0;
    76   color: #291c16;
    77 }
    78 
    79 .sidebaritem, .topbar
    80 { background: #e9eff8;
    81   color: #555;
    82 }
    83 
    84 .sbilinks li a, .sidebaritem a, .topbar a, .facetvalues a
    85 {
    86     /*background: transparent url(arrow.png) no-repeat left center;*/
    87     color: #555;
    88 }
    89 
    90 .sbilinks li a:hover, .sidebaritem a:hover,  .facetvalues a:hover
    91 {
    92     /*background: transparent url(arrow_select.png) no-repeat left center;*/
    93     text-decoration: underline;
    94 }
    95 
    96 div.content a
    97 { background: transparent;
    98   color: #666257;
    99 }
    100 
    101 #footer
    102 { background: #bfc8c1 url(footer.png) repeat-x;
    103   color: #414141;
    104   border-color: #4c504d;
    105 }
    106 
    107 #address, #footer a, #footer a:hover
    108 { background: transparent;
    109   color: #414141;
    110 }
    111 
    112 #record .attributeValues .searchword, #recordcmdi .searchword {
    113     background: yellow;
    114 }
    115 
    116 li.searchresultitem:nth-child(even), #record .recorddetailstable tr:nth-child(odd) {
    117     background: #ccd6e8;
    118 }
    119 
    120 span.breadcrumbfacet:hover {
    121     background: #e9eff8;
    122 }
    123 
    124 /* Based on Nifty Corners: rounded corners without images */
    125 /* By Alessandro Fulciniti */
    126 /* http://www.html.it/articoli/nifty/index.html */
    127 .rtop, .rbottom{background: #d3def0;}
    128 .rtop .r1, .rtop .r2, .rtop .r3, .rtop .r4,
    129 .rbottom .r1, .rbottom .r2, .rbottom .r3, .rbottom .r4{background: #e9eff8;}
     22@import "../colour-common";

  • vlo/trunk/vlo-web-app/src/main/less/eu/clarin/cmdi/vlo/wicket/pages/inc/style.less

    r5146 r5148  
    294294  height: 2px
    295295}
     296
     297blockquote{border-color: #777;}
     298
     299a:hover, div.content a:hover, .facetvalues li a:hover {
     300    color: #000;
     301}
     302
     303h1
     304{ background: transparent;
     305  color: #4c504d;
     306}
     307
     308#header
     309{ background: #B5B9A7;
     310  color: #777;
     311  border-top-color: #EEE;
     312  border-bottom-color: #ABB197;
     313}
     314
     315#logo, #logo h1
     316{ background: transparent;
     317  color: #777;
     318}
     319
     320#menu li a
     321{ background: transparent;
     322  color: #F5F6F0;
     323  border-color: #989898;
     324}
     325
     326#menu li a:hover, #menu li a#selected, #menu li a#selected:hover
     327{ background: #c9b4a8 url(menu_hover.png);
     328  color: #F5F6F0;
     329  border-color: #989898;
     330}
     331
     332
     333.sbilinks li a, .sidebaritem a, .topbar a, .facetvalues a
     334{
     335    /*background: transparent url(arrow.png) no-repeat left center;*/
     336    color: #555;
     337}
     338
     339.sbilinks li a:hover, .sidebaritem a:hover,  .facetvalues a:hover
     340{
     341    color: #555;
     342    text-decoration: underline;
     343}
     344
     345div.content a
     346{ background: transparent;
     347  color: #666257;
     348}
     349
     350#address, #footer a, #footer a:hover
     351{ background: transparent;
     352  color: #414141;
     353}
     354
     355#record .attributeValues .searchword, #recordcmdi .searchword {
     356    background: yellow;
     357}
     358

  • vlo/trunk/vlo-web-app/src/main/less/eu/clarin/cmdi/vlo/wicket/pages/inc/vlo-common.less

    r5146 r5148  
    2121*/
    2222
     23/* COMMON STYLES FOR VLO THEMES */
     24
     25/* base style */
    2326@import "style";
    24 @import "colour";
    25 
    26 /* styles for header image */
    27 @import "vlo-header";
    2827
    2928/* styles for static topic section */

  • vlo/trunk/vlo-web-app/src/main/less/eu/clarin/cmdi/vlo/wicket/pages/vlo.less

    r5146 r5148  
    2121*/
    2222
    23 @import "style";
    24 @import "colour";
     23/* STYLE FOR DEFAULT THEME */
     24
     25@import "inc/vlo-common";
     26
     27/* theme specific colours */
     28@import "inc/default/colour";
    2529
    2630/* styles for header image */
    27 @import "vlo-header";
    28 
    29 /* styles for static topic section */
    30 @import "vlo-top";
    31 
    32 /* styles for collection selection */
    33 @import "vlo-collections";
    34 
    35 /* styles for facet panels */
    36 @import "vlo-facets";
    37 
    38 /* styles for search bar */
    39 @import "vlo-search";
    40 
    41 /* styles for record details */
    42 @import "vlo-record";
     31@import "inc/default/vlo-header";

  • vlo/trunk/vlo-web-app/src/main/less/eu/clarin/cmdi/vlo/wicket/pages/vlo_clarin-d.less

    r5146 r5148  
    2323/** STYLE FOR CLARIN-D THEME **/
    2424
    25 @import "style";
    26 @import "colour_clarin-d";
     25@import "inc/vlo-common";
    2726
    28 /* styles for header and static topic section */
    29 @import "vlo-header_clarin-d";
     27/* theme specific colours */
     28@import "inc/clarin-d/colour";
    3029
    31 /* styles for static topic section */
    32 @import "vlo-top";
     30/* styles for header image */
     31@import "inc/clarin-d/vlo-header";
    3332
    34 /* styles for collection selection */
    35 @import "vlo-collections";
    36 
    37 /* styles for facet panels */
    38 @import "vlo-facets";
    39 
    40 /* styles for search bar */
    41 @import "vlo-search";
    42 
    43 /* styles for record details */
    44 @import "vlo-record";
Note: See TracChangeset for help on using the changeset viewer.