css/design40/development/style.css

   1 /* ------------------------------------------------------------- */
   2 /* VARIABLES COLOR (variables_color_gray_standard.less) Standard Grey */
   3 /* ------------------------------------------------------------- */
   4 .bg-body {
   5   background-color: #b0d5bf;
   6 }
   7 .bg-content {
   8   background-image: linear-gradient(to bottom, #eff7f2, #b0d5bf);
   9 }
  10 h1::after {
  11   content: " pine";
  12 }
  13 :root {
  14   --gray-standard: #888888;
  15   --gray-superdark: #000000;
  16   --gray-verydark: #222222;
  17   --gray-darker: #444444;
  18   --gray-dark: #666666;
  19   --gray-light: #aaaaaa;
  20   --gray-lighter: #cccccc;
  21   --gray-verylight: #eeeeee;
  22   --gray-superlight: #ffffff;
  23   --color-standard: #118040;
  24   --color-superlight: #ffffff;
  25   --color-verylight: #eff7f2;
  26   --color-lighter: #cfe6d9;
  27   --color-light: #b0d5bf;
  28   --color-dark: #07331a;
  29   --color-darker: #052211;
  30   --color-verydark: #021109;
  31   --color-superdark: #000000;
  32   --msg-ok-strong: #013717;
  33   --msg-ok-light: #a7fac9;
  34   --msg-error-strong: #8c0713;
  35   --msg-error-light: #f5dadb;
  36   --msg-hint-strong: #1b85a3;
  37   --msg-hint-light: #ecf7fa;
  38   --msg-warning-strong: #725c03;
  39   --msg-warning-light: #e7e4b3;
  40   --color-green-strong: #003c18;
  41   --color-green-light: #3cff8a;
  42   --color-red-strong: #ae0014;
  43   --color-red-light: #ffaeb7;
  44   --color-blue-strong: #209ec8;
  45   --color-blue-light: #ebf8fc;
  46   --color-orange-strong: #8d6a00;
  47   --color-orange-light: #ffe38d;
  48   --spin_60: #115180;
  49   --spin_120: #401180;
  50   --spin_180: #801151;
  51   --spin_240: #804011;
  52   --style-ocean: #2e6ffd;
  53   --style-light_blue: #336699;
  54   --style-aqua: #0f80ff;
  55   --style-turquoise: #21ffff;
  56   --style-pine: #118040;
  57   --style-asparagus: #808004;
  58   --style-petrol: #108080;
  59   --style-salmona: #990033;
  60   --style-salmon: #fc6666;
  61   --style-tangerine: #fd8008;
  62   --style-marascino: #fb0207;
  63   --style-maroon: #800040;
  64   --style-strawberry: #fb0280;
  65   --style-pure_red: #fc7d86;
  66   --style-old_lemon: #e0e00a;
  67   --style-yellow_to_green: #cad008;
  68   --style-eggplant: #400080;
  69   --style-plum: #800080;
  70   --style-grape: #8000ff;
  71   --style-magenta: #fb02ff;
  72   --style-lavender: #cc66ff;
  73   --style-cayenne: #800002;
  74   --style-mocha: #804003;
  75   --style-cantaloupe: #fecc66;
  76   --style-dark_brown: #6d3702;
  77   --style-orange_brown: #cc6600;
  78   --style-smack_brown: #996600;
  79   --style-green_brown: #666633;
  80 }
  81 .color-standard {
  82   color: var(--color-standard);
  83 }
  84 .color-superlight {
  85   color: var(--color-superlight);
  86 }
  87 .color-verylight {
  88   color: var(--color-verylight);
  89 }
  90 .color-lighter {
  91   color: var(--color-lighter);
  92 }
  93 .color-light {
  94   color: var(--color-light);
  95 }
  96 .color-dark {
  97   color: var(--color-dark);
  98 }
  99 .color-darker {
 100   color: var(--color-darker);
 101 }
 102 .color-verydark {
 103   color: var(--color-verydark);
 104 }
 105 .color-superdark {
 106   color: var(--color-superdark);
 107 }
 108 .bg-standard {
 109   background-color: var(--color-standard);
 110 }
 111 .bg-superlight {
 112   background-color: var(--color-superlight);
 113 }
 114 .bg-verylight {
 115   background-color: var(--color-verylight);
 116 }
 117 .bg-lighter {
 118   background-color: var(--color-lighter);
 119 }
 120 .bg-light {
 121   background-color: var(--color-light);
 122 }
 123 .bg-dark {
 124   background-color: var(--color-dark);
 125 }
 126 .bg-darker {
 127   background-color: var(--color-darker);
 128 }
 129 .bg-verydark {
 130   background-color: var(--color-verydark);
 131 }
 132 .bg-superdark {
 133   background-color: var(--color-superdark);
 134 }
 135 .msg-ok {
 136   background-color: var(--msg-ok-light);
 137   color: var(--msg-ok-strong);
 138   border-color: var(--msg-ok-strong);
 139 }
 140 .msg-error {
 141   background-color: var(--msg-error-light);
 142   color: var(--msg-error-strong);
 143   border-color: var(--msg-error-strong);
 144 }
 145 .msg-hint {
 146   background-color: var(--msg-hint-light);
 147   color: var(--msg-hint-strong);
 148   border-color: var(--msg-hint-strong);
 149 }
 150 .msg-warning {
 151   background-color: var(--msg-warning-light);
 152   color: var(--msg-warning-strong);
 153   border-color: var(--msg-warning-strong);
 154 }
 155 .color-ok {
 156   background-color: var(--color-green-light);
 157   color: var(--color-green-strong);
 158   border-color: var(--color-green-strong);
 159 }
 160 .color-error {
 161   background-color: var(--color-red-light);
 162   color: var(--color-red-strong);
 163   border-color: var(--color-red-strong);
 164 }
 165 .color-hint {
 166   background-color: var(--color-blue-light);
 167   color: var(--color-blue-strong);
 168   border-color: var(--color-blue-strong);
 169 }
 170 .color-warning {
 171   background-color: var(--color-orange-light);
 172   color: var(--color-orange-strong);
 173   border-color: var(--color-orange-strong);
 174 }
 175 .style-ocean {
 176   background-color: var(--style-ocean);
 177 }
 178 .style-light_blue {
 179   background-color: var(--style-light_blue);
 180 }
 181 .style-aqua {
 182   background-color: var(--style-aqua);
 183 }
 184 .style-turquoise {
 185   background-color: var(--style-turquoise);
 186 }
 187 .style-pine {
 188   background-color: var(--style-pine);
 189 }
 190 .style-asparagus {
 191   background-color: var(--style-asparagus);
 192 }
 193 .style-petrol {
 194   background-color: var(--style-petrol);
 195 }
 196 .style-salmona {
 197   background-color: var(--style-salmona);
 198 }
 199 .style-salmon {
 200   background-color: var(--style-salmon);
 201 }
 202 .style-tangerine {
 203   background-color: var(--style-tangerine);
 204 }
 205 .style-marascino {
 206   background-color: var(--style-marascino);
 207 }
 208 .style-maroon {
 209   background-color: var(--style-maroon);
 210 }
 211 .style-strawberry {
 212   background-color: var(--style-strawberry);
 213 }
 214 .style-pure_red {
 215   background-color: var(--style-pure_red);
 216 }
 217 .style-old_lemon {
 218   background-color: var(--style-old_lemon);
 219 }
 220 .style-yellow_to_green {
 221   background-color: var(--style-yellow_to_green);
 222 }
 223 .style-eggplant {
 224   background-color: var(--style-eggplant);
 225 }
 226 .style-plum {
 227   background-color: var(--style-plum);
 228 }
 229 .style-grape {
 230   background-color: var(--style-grape);
 231 }
 232 .style-magenta {
 233   background-color: var(--style-magenta);
 234 }
 235 .style-lavender {
 236   background-color: var(--style-lavender);
 237 }
 238 .style-cayenne {
 239   background-color: var(--style-cayenne);
 240 }
 241 .style-mocha {
 242   background-color: var(--style-mocha);
 243 }
 244 .style-cantaloupe {
 245   background-color: var(--style-cantaloupe);
 246 }
 247 .style-dark_brown {
 248   background-color: var(--style-dark_brown);
 249 }
 250 .style-orange_brown {
 251   background-color: var(--style-orange_brown);
 252 }
 253 .style-smack_brown {
 254   background-color: var(--style-smack_brown);
 255 }
 256 .style-green_brown {
 257   background-color: var(--style-green_brown);
 258 }