css/design40/development/kivi-colors.html

   1 <!DOCTYPE html>
   2 <html lang="de">
   3 <head>
   4   <meta charset="utf-8" />
   5   <title>Kivitendo: Entwicklung von Farben</title>
   6   <link type="text/css" href="style.css" rel="stylesheet">
   7   <style type="text/css">
   8
   9
  10     h2 {
  11       clear: both;
  12       margin: 2.0em 0 0 0;
  13       display: block;
  14     }
  15
  16     h3 {
  17       clear: both;
  18       padding: 2.0em 0 0 0;
  19       margin: 0;
  20       display: block;
  21     }
  22
  23
  24
  25     /* ----------------------- */
  26     /* ELEMENTS WITH GREY COLORS */
  27     /* ----------------------- */
  28     div.gray-superdark { background-color: var( --gray-superdark ); }/* Black */
  29     div.gray-verydark { background-color: var( --gray-verydark ); }
  30     div.gray-darker { background-color: var( --gray-darker ); }
  31     div.gray-dark { background-color: var( --gray-dark ); }
  32     div.gray-standard { background-color: var( --gray-standard ); }
  33     div.gray-light { background-color: var( --gray-light ); }
  34     div.gray-lighter { background-color: var( --gray-lighter ); }
  35     div.gray-verylight { background-color: var( --gray-verylight ); }
  36     div.gray-superlight { background-color: var( --gray-superlight ); }/* White */
  37
  38     p.gray-superdark { color: var( --gray-superdark ); } /* Black */
  39     p.gray-verydark { color: var( --gray-verydark ); }
  40     p.gray-darker { color: var( --gray-darker ); }
  41     p.gray-dark { color: var( --gray-dark ); }
  42     p.gray-standard { color: var( --gray-standard ); }
  43     p.gray-light { color: var( --gray-light ); }
  44     p.gray-lighter { color: var( --gray-lighter ); }
  45     p.gray-verylight { color: var( --gray-verylight ); }
  46     p.gray-superlight { color: var( --gray-superlight ); } /* White   */
  47
  48     /* ----------------------- */
  49     /* ELEMENTS WITH BRAND COLORS */
  50     /* ----------------------- */
  51     div.brand-superdark { background-color: var( --color-superdark ); }/* Black */
  52     div.brand-verydark { background-color: var( --color-verydark ); }
  53     div.brand-darker { background-color: var( --color-darker ); }
  54     div.brand-dark { background-color: var( --color-dark ); }
  55     div.brand-standard { background-color: var( --color-standard ); }
  56     div.brand-light { background-color: var( --color-light ); }
  57     div.brand-lighter { background-color: var( --color-lighter ); }
  58     div.brand-verylight { background-color: var( --color-verylight ); }
  59     div.brand-superlight { background-color: var( --color-superlight ); }/* White */
  60
  61
  62     /* ----------------------- */
  63     /* MAIN ELEMENTS WITH BORDERS */
  64     /* ----------------------- */
  65
  66     div.gray-superdark,
  67     div.gray-verydark,
  68     div.gray-darker,
  69     div.gray-dark,
  70     div.gray-standard,
  71     div.gray-light,
  72     div.gray-lighter,
  73     div.gray-verylight,
  74     div.brand-superdark,
  75     div.brand-verydark,
  76     div.brand-darker,
  77     div.brand-dark,
  78     div.brand-standard,
  79     div.brand-light,
  80     div.brand-lighter,
  81     div.brand-verylight {
  82       border: 1px transparent solid ;
  83     }
  84     div.brand-superlight,
  85     div.gray-superlight {
  86       border: 1px #dcdcdc solid;
  87     }
  88
  89     p.brand-superdark { color: var( --color-superdark ); } /* Black */
  90     p.brand-verydark { color: var( --color-verydark ); }
  91     p.brand-darker { color: var( --color-darker ); }
  92     p.brand-dark { color: var( --color-dark ); }
  93     p.brand-standard { color: var( --color-standard ); }
  94     p.brand-light { color: var( --color-light ); }
  95     p.brand-lighter { color: var( --color-lighter ); }
  96     p.brand-verylight { color: var( --color-verylight ); }
  97     p.brand-superlight { color: var( --color-superlight ); } /* White   */
  98
  99     div.tiny-box
 100     {
 101       width: 10%;
 102       height: 16em;
 103       float: left;
 104       display: inline-block;
 105       overflow: hidden;
 106       vertical-align: middle;
 107       text-align: center;
 108       font-size: 70%;
 109       padding: 0;
 110       margin: 0;
 111     }
 112     div.box{
 113       padding: 1.2em;
 114       vertical-align: middle;
 115     }
 116
 117     div.inner
 118     {
 119       display: table-cell;
 120       text-align: center;
 121       vertical-align: middle;
 122       height: 16em;
 123     }
 124
 125     div.tiny-box p { vertical-align: middle; font-size: 120%; }
 126     div.tiny-box p b { font-size: 120%; }
 127
 128     div.main-box{ overflow: hidden; padding: 1.0em ;s}
 129     div.main-box .wrapper{ clear: left ; margin-bottom: 1.0em ; overflow: hidden ; }
 130
 131     .wrapper.lighter  { color: var(--color-dark) ;}
 132     .wrapper.light    { color: var(--color-darker) ;}
 133     .wrapper.standard  { color: var(--color-verydark) ;}
 134     .wrapper.dark      { color: var(--color-verylight) ;}
 135     .wrapper.darker    { color: var(--color-lighter) ;}
 136     .wrapper.verydark  { color: var(--color-light) ;}
 137
 138     div.mbox
 139     {
 140       border-width: 3px;
 141       border-style: solid;
 142       padding: 1.0em;
 143       width: 20% ;
 144       margin: 0 1.0em 0.3em 0 ;
 145       float: left;
 146     }
 147
 148     div.msg,
 149     div.spin,
 150     div.msg_color
 151     {
 152       border-width: 1px;
 153       border-style: solid;
 154       padding: 1.0em;
 155       width: 20% ;
 156       margin: 0 1.0em 0.3em 0 ;
 157       float: left;
 158       border-radius: 6px ;
 159     }
 160     div.msg.ok{        background-color: var(--msg-ok-light);       color: var(--msg-ok-strong) ;  }
 161     div.msg.hint{      background-color: var(--msg-hint-light);     color: var(--msg-hint-strong) ;  }
 162     div.msg.warning{  background-color: var(--msg-warning-light); color: var(--msg-warning-strong) ;  }
 163     div.msg.error{    background-color: var(--msg-error-light);   color: var(--msg-error-strong) ;  }
 164
 165 /*
 166     div.msg_color.ok{        background-color: var(--color-green-light);       color: var(--color-green-strong) ;  }
 167     div.msg_color.hint{      background-color: var(--color-blue-light);     color: var(--color-blue-strong) ;  }
 168     div.msg_color.warning{  background-color: var(--color-orange-light); color: var(--color-orange-strong) ;  }
 169     div.msg_color.error{    background-color: var(--color-red-light);   color: var(--color-red-strong) ;  }
 170  */
 171
 172     div.spin.spin_60{        background-color: var(--spin_60);   color: var(--msg-ok-strong) ;  }
 173     div.spin.spin_120{      background-color: var(--spin_120);   color: var(--msg-hint-strong) ;  }
 174     div.spin.spin_180{      background-color: var(--spin_180);   color: var(--msg-warning-strong) ;  }
 175     div.spin.spin_240{      background-color: var(--spin_240);   color: var(--msg-error-strong) ;  }
 176
 177
 178
 179
 180
 181
 182
 183
 184   </style>
 185
 186 </head>
 187 <body>
 188 <h1>Color Style </h1>
 189 <h2>GREY COLORS</H2>
 190
 191 <div class="gray-superdark tiny-box"><div class="inner"><p class="gray-verylight">Class <b>.gray-superdark</b><br>with .gray-verylight as text</p></div></div>
 192 <div class="gray-verydark tiny-box"><div class="inner"><p class="gray-standard">Class <b>.gray-verydark</b><br>with .gray-standard as text</p></div></div>
 193 <div class="gray-darker tiny-box"><div class="inner"><p class="gray-standard">Class <b>.gray-darker</b><br>with .gray-standard as text</p></div></div>
 194 <div class="gray-dark tiny-box"><div class="inner"><p class="gray-XXX">Class <b>.gray-dark</b><br>with .gray-XXXX as text</p></div></div>
 195
 196 <div class="gray-standard tiny-box"><div class="inner"><p class="gray-superdark">Class <b>.gray-standard</b><br>with .gray-superdark as text</p></div></div>
 197
 198 <div class="gray-light tiny-box"><div class="inner"><p class="gray-XXX">Class <b>.gray-light</b><br>with .gray-XXXX as text</p></div></div>
 199 <div class="gray-lighter tiny-box"><div class="inner"><p class="gray-standard">Class <b>.gray-lighter</b><br>with .gray-standard as text</p></div></div>
 200 <div class="gray-verylight tiny-box"><div class="inner"><p class="gray-standard">Class <b>.gray-verylight</b><br>with .gray-standard as text</p></div></div>
 201 <div class="gray-superlight tiny-box"><div class="inner"><p class="gray-verydark">Class <b>.gray-superlight</b><br>with .gray-verydark as text</p></div></div>
 202
 203
 204 <h2>BRAND COLORS</H2>
 205
 206 <div class="brand-superdark tiny-box"><div class="inner"><p class="brand-verylight">Class <b>.brand-superdark</b><br>with .brand-verylight as text</p></div></div>
 207 <div class="brand-verydark tiny-box"><div class="inner"><p class="brand-standard">Class <b>.brand-verydark</b><br>with .brand-standard as text</p></div></div>
 208 <div class="brand-darker tiny-box"><div class="inner"><p class="brand-standard">Class <b>.brand-darker</b><br>with .brand-standard as text</p></div></div>
 209 <div class="brand-dark tiny-box"><div class="inner"><p class="brand-XXX">Class <b>.brand-dark</b><br>with .brand-XXXX as text</p></div></div>
 210
 211 <div class="brand-standard tiny-box"><div class="inner"><p class="brand-superdark">Class <b>.brand-standard</b><br>with .brand-superdark as text</p></div></div>
 212
 213 <div class="brand-light tiny-box"><div class="inner"><p class="brand-XXX">Class <b>.brand-light</b><br>with .brand-XXXX as text</p></div></div>
 214 <div class="brand-lighter tiny-box"><div class="inner"><p class="brand-standard">Class <b>.brand-lighter</b><br>with .brand-standard as text</p></div></div>
 215 <div class="brand-verylight tiny-box"><div class="inner"><p class="brand-standard">Class <b>.brand-verylight</b><br>with .brand-standard as text</p></div></div>
 216 <div class="brand-superlight tiny-box"><div class="inner"><p class="brand-verydark">Class <b>.brand-superlight</b><br>with .brand-verydark as text</p></div></div>
 217
 218 <h2>LAYOUTS</h2>
 219
 220 <div class="brand-lighter main-box">
 221   <p class="brand-standard">Class <b>.brand-verylight</b><br>with .brand-standard as text</p>
 222   <div class="wrapper lighter">
 223     <div class="mbox" style="background-color:var(--color-lighter);border-color:var(--color-standard);">BG: LIGHTER<br>Border: STANDARD<br>Text: DARK</div>
 224     <div class="mbox" style="background-color:var(--color-lighter);border-color:var(--color-dark);">BG: LIGHTER<br>Border: DARK<br>Text: DARK</div>
 225     <div class="mbox" style="background-color:var(--color-lighter);border-color:var(--color-darker);">BG: LIGHTER<br>Border: DARKER<br>Text: DARK</div>
 226     <div class="mbox" style="background-color:var(--color-lighter);border-color:var(--color-verydark);">BG: LIGHTER<br>Border: VERYDARK<br>Text: DARK</div>
 227   </div>
 228   <div class="wrapper light">
 229     <div class="mbox" style="background-color:var(--color-light);border-color:var(--color-standard);">BG: LIGHT<br>Border: STANDARD<br>Text: DARKER</div>
 230     <div class="mbox" style="background-color:var(--color-light);border-color:var(--color-dark);">BG: LIGHT<br>Border: DARK<br>Text: DARKER</div>
 231     <div class="mbox" style="background-color:var(--color-light);border-color:var(--color-darker);">BG: LIGHT<br>Border: DARKER<br>Text: DARKER</div>
 232     <div class="mbox" style="background-color:var(--color-light);border-color:var(--color-verydark);">BG: LIGHT<br>Border: VERYDARK<br>Text: DARKER</div>
 233   </div>
 234   <div class="wrapper standard">
 235     <div class="mbox" style="background-color:var(--color-standard);border-color:var(--color-standard);">BG: STANDARD<br>Border: STANDARD<br>Text: VERYDARK</div>
 236     <div class="mbox" style="background-color:var(--color-standard);border-color:var(--color-dark);">BG: STANDARD<br>Border: DARK<br>Text: VERYDARK</div>
 237     <div class="mbox" style="background-color:var(--color-standard);border-color:var(--color-darker);">BG: STANDARD<br>Border: DARKER<br>Text: VERYDARK</div>
 238     <div class="mbox" style="background-color:var(--color-standard);border-color:var(--color-verydark);">BG: STANDARD<br>Border: VERYDARK<br>Text: VERYDARK</div>
 239   </div>
 240   <div class="wrapper dark">
 241     <div class="mbox" style="background-color:var(--color-dark);border-color:var(--color-standard);">BG: DARK<br>Border: STANDARD<br>Text: VERYLIGHT</div>
 242     <div class="mbox" style="background-color:var(--color-dark);border-color:var(--color-dark);">BG: DARK<br>Border: DARK<br>Text: VERYLIGHT</div>
 243     <div class="mbox" style="background-color:var(--color-dark);border-color:var(--color-darker);">BG: DARK<br>Border: DARKER<br>Text: VERYLIGHT</div>
 244     <div class="mbox" style="background-color:var(--color-dark);border-color:var(--color-verydark);">BG: DARK<br>Border: VERYDARK<br>Text: VERYLIGHT</div>
 245   </div>
 246   <div class="wrapper darker">
 247     <div class="mbox" style="background-color:var(--color-darker);border-color:var(--color-standard);">BG: DARKER<br>Border: STANDARD<br>Text: LIGHTER</div>
 248     <div class="mbox" style="background-color:var(--color-darker);border-color:var(--color-dark);">BG: DARKER<br>Border: DARK<br>Text: LIGHTER</div>
 249     <div class="mbox" style="background-color:var(--color-darker);border-color:var(--color-darker);">BG: DARKER<br>Border: DARKER<br>Text: LIGHTER</div>
 250     <div class="mbox" style="background-color:var(--color-darker);border-color:var(--color-verydark);">BG: DARKER<br>Border: VERYDARK<br>Text: LIGHTER</div>
 251   </div>
 252   <div class="wrapper verydark">
 253     <div class="mbox" style="background-color:var(--color-verydark);border-color:var(--color-standard);">BG: VERYDARK<br>Border: STANDARD<br>Text: LIGHT</div>
 254     <div class="mbox" style="background-color:var(--color-verydark);border-color:var(--color-dark);">BG: VERYDARK<br>Border: DARK<br>Text: LIGHT</div>
 255     <div class="mbox" style="background-color:var(--color-verydark);border-color:var(--color-darker);">BG: VERYDARK<br>Border: DARKER<br>Text: LIGHT</div>
 256     <div class="mbox" style="background-color:var(--color-verydark);border-color:var(--color-verydark);">BG: VERYDARK<br>Border: VERYDARK<br>Text: LIGHT</div>
 257   </div>
 258 <h3>Messages (Colors mixed with Color Style)</h3>
 259   <div class="wrapper verydark">
 260     <div class="msg msg-ok">This is a OK message</div>
 261     <div class="msg msg-hint">This is a HINT message</div>
 262     <div class="msg msg-warning">This is a WARNING message</div>
 263     <div class="msg msg-error">This is a ERROR message</div>
 264   </div>
 265   <h3>Original Message Colors</h3>
 266   <div class="wrapper verydark">
 267     <div class="msg color-ok">This is a OK message</div>
 268     <div class="msg color-hint">This is a HINT message</div>
 269     <div class="msg color-warning">This is a WARNING message</div>
 270     <div class="msg color-error">This is a ERROR message</div>
 271   </div>
 272 <!--
 273 <h3>Spins (Just Research)</h3>
 274   <div class="wrapper verydark">
 275     <div class="spin spin_60"> This is Spin  60</div>
 276     <div class="spin spin_120">This is Spin 120</div>
 277     <div class="spin spin_180">This is Spin 180</div>
 278     <div class="spin spin_240">This is Spin 240</div>
 279   </div>
 280  -->
 281
 282
 283 </div>
 284
 285
 286 <h2>COLOR STYLES</h2>
 287 <div class="main-box">
 288   <div class="mbox style-ocean"><p><b>ocean</b></p></div>
 289   <div class="mbox style-light_blue"><p><b>light_blue</b></p></div>
 290   <div class="mbox style-aqua"><p><b>aqua</b></p></div>
 291   <h3>Green</h3>
 292   <div class="mbox style-turquoise"><p><b>turquoise</b></p></div>
 293   <div class="mbox style-pine"><p><b>pine</b></p></div>
 294   <div class="mbox style-asparagus"><p><b>asparagus</b></p></div>
 295   <div class="mbox style-petrol"><p><b>petrol</b></p></div>
 296   <h3>Red</h3>
 297   <div class="mbox style-salmona"><p><b>salmona</b></p></div>
 298   <div class="mbox style-salmon"><p><b>salmon</b></p></div>
 299   <div class="mbox style-tangerine"><p><b>tangerine</b></p></div>
 300   <div class="mbox style-marascino"><p><b>marascino</b></p></div>
 301   <div class="mbox style-maroon"><p><b>maroon</b></p></div>
 302   <div class="mbox style-strawberry"><p><b>strawberry</b></p></div>
 303   <div class="mbox style-pure_red"><p><b>pure_red</b></p></div>
 304   <h3>Yellow</h3>
 305   <div class="mbox style-old_lemon"><p><b>old_lemon</b></p></div>
 306   <div class="mbox style-yellow_to_green"><p><b>yellow_to_green</b></p></div>
 307   <h3>Violets & Purple</h3>
 308   <div class="mbox style-eggplant"><p><b>eggplant</b></p></div>
 309   <div class="mbox style-plum"><p><b>plum</b></p></div>
 310   <div class="mbox style-grape"><p><b>grape</b></p></div>
 311   <div class="mbox style-magenta"><p><b>magenta</b></p></div>
 312   <div class="mbox style-lavender"><p><b>lavender</b></p></div>
 313   <h3>Browns</h3>
 314   <div class="mbox style-cayenne"><p><b>cayenne</b></p></div>
 315   <div class="mbox style-mocha"><p><b>mocha</b></p></div>
 316   <div class="mbox style-cantaloupe"><p><b>cantaloupe</b></p></div>
 317   <div class="mbox style-dark_brown"><p><b>dark_brown</b></p></div>
 318   <div class="mbox style-orange_brown"><p><b>orange_brown</b></p></div>
 319   <div class="mbox style-smack_brown"><p><b>smack_brown</b></p></div>
 320   <div class="mbox style-green_brown"><p><b>green_brown</b></p></div>
 321 </div>
 322 </body>
 323 </html>