| OLD | NEW | 
| (Empty) |  | 
 |    1 /*! | 
 |    2  * This file is part of website-defaults | 
 |    3  * Copyright (C) 2016-present eyeo GmbH | 
 |    4  * | 
 |    5  * website-defaults is free software: you can redistribute it and/or | 
 |    6  * modify it under the terms of the GNU General Public License as published by | 
 |    7  * the Free Software Foundation, either version 3 of the License, or | 
 |    8  * (at your option) any later version. | 
 |    9  * | 
 |   10  * website-defaults is distributed in the hope that it will be useful, | 
 |   11  * but WITHOUT ANY WARRANTY; without even the implied warranty of | 
 |   12  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the | 
 |   13  * GNU General Public License for more details. | 
 |   14  * | 
 |   15  * You should have received a copy of the GNU General Public License | 
 |   16  * along with website-defaults.  If not, see <http://www.gnu.org/licenses/>. | 
 |   17  */ | 
 |   18 /******************************************************************************* | 
 |   19  * CSS Reset | 
 |   20  ******************************************************************************/ | 
 |   21 /* Reset margins, paddings, and font globally */ | 
 |   22 html, body, | 
 |   23 h1, h2, h3, h4, h5, h6, | 
 |   24 a, p, span, | 
 |   25 em, small, strong, sub, sup, | 
 |   26 strike, s, mark, del, ins, | 
 |   27 abbr, dfn, | 
 |   28 blockquote, q, cite, | 
 |   29 code, pre, | 
 |   30 kbd, samp, var, output, ruby, | 
 |   31 ol, ul, li, dl, dt, dd, | 
 |   32 div, section, article, | 
 |   33 main, aside, nav, | 
 |   34 header, hgroup, footer, | 
 |   35 img, figure, figcaption, | 
 |   36 address, time, | 
 |   37 audio, video, | 
 |   38 canvas, object, iframe, embed, | 
 |   39 details, summary, | 
 |   40 fieldset, form, label, legend, | 
 |   41 table, caption, | 
 |   42 tbody, tfoot, thead, | 
 |   43 tr, th, td { | 
 |   44   margin: 0px; | 
 |   45   padding: 0px; | 
 |   46   border: 0px; | 
 |   47   font-size: 100%; | 
 |   48   font: inherit; | 
 |   49   vertical-align: baseline; } | 
 |   50  | 
 |   51 /* Add the correct display in IE 9-. */ | 
 |   52 article, | 
 |   53 aside, | 
 |   54 footer, | 
 |   55 header, | 
 |   56 nav, | 
 |   57 section, | 
 |   58 main { | 
 |   59   display: block; } | 
 |   60  | 
 |   61 /* Set default box-sizing (opinionated) */ | 
 |   62 *, | 
 |   63 *:before, | 
 |   64 *:after { | 
 |   65   box-sizing: inherit; } | 
 |   66  | 
 |   67 html { | 
 |   68   box-sizing: border-box; } | 
 |   69  | 
 |   70 /* Remove the margin in all browsers (opinionated). */ | 
 |   71 body { | 
 |   72   margin: 0px; } | 
 |   73  | 
 |   74 /* Remove list styles (opinionated) */ | 
 |   75 ol, | 
 |   76 ul { | 
 |   77   list-style: none; } | 
 |   78  | 
 |   79 /* Remove quotes ("") in most browsers (opinionated) */ | 
 |   80 blockquote, | 
 |   81 q { | 
 |   82   quotes: none; } | 
 |   83  | 
 |   84 /* Remove quotes ("") in Safari (opinionated) */ | 
 |   85 blockquote:before, | 
 |   86 blockquote:after, | 
 |   87 q:before, | 
 |   88 q:after { | 
 |   89   content: ""; | 
 |   90   content: none; } | 
 |   91  | 
 |   92 /* Share borders between adjacent cells (opinionated) */ | 
 |   93 table { | 
 |   94   border-collapse: collapse; | 
 |   95   border-spacing: 0; } | 
 |   96  | 
 |   97 /* Normalize inline content (opinionated) */ | 
 |   98 b, | 
 |   99 strong { | 
 |  100   font-weight: bolder; } | 
 |  101  | 
 |  102 small { | 
 |  103   font-size: smaller; } | 
 |  104  | 
 |  105 abbr { | 
 |  106   text-decoration: underline; | 
 |  107   cursor: help; } | 
 |  108  | 
 |  109 sup { | 
 |  110   position: relative; | 
 |  111   font-size: 75%; | 
 |  112   vertical-align: super; } | 
 |  113  | 
 |  114 a, | 
 |  115 a:visited { | 
 |  116   color: inherit; | 
 |  117   /* Remove the gray background on active links in IE 10. */ | 
 |  118   background-color: transparent; | 
 |  119   text-decoration: none; | 
 |  120   /* Set default pointer regardless of href (opinionated) */ | 
 |  121   cursor: pointer; } | 
 |  122  | 
 |  123 a:hover, | 
 |  124 a:active, | 
 |  125 a:focus { | 
 |  126   text-decoration: underline; } | 
 |  127  | 
 |  128 img { | 
 |  129   /* Make fixed width images responsive */ | 
 |  130   max-width: 100%; | 
 |  131   /* Remove the border on images inside links in IE 10-. */ | 
 |  132   border-style: none; } | 
 |  133  | 
 |  134 /* Set correct display for hidden attribute in IE 10-  */ | 
 |  135 [hidden] { | 
 |  136   display: none; } | 
 |  137  | 
 |  138 /******************************************************************************* | 
 |  139  * Utilities | 
 |  140  ******************************************************************************/ | 
 |  141 /* Responsive widths | 
 |  142  ******************************************************************************/ | 
 |  143 /** | 
 |  144  * Stretch content (e.g. images) full-width | 
 |  145  */ | 
 |  146 .full-width { | 
 |  147   display: block; | 
 |  148   width: 100%; } | 
 |  149  | 
 |  150 /** | 
 |  151  * Center content within a (responsive) fixed width | 
 |  152  */ | 
 |  153 .container { | 
 |  154   width: 1140px; | 
 |  155   max-width: 100%; | 
 |  156   margin-right: auto; | 
 |  157   margin-left: auto; | 
 |  158   padding-right: 1em; | 
 |  159   padding-left: 1em; } | 
 |  160  | 
 |  161 /* Device widths | 
 |  162  ******************************************************************************/ | 
 |  163 .phone-width { | 
 |  164   width: auto; } | 
 |  165  | 
 |  166 .phablet-width { | 
 |  167   width: 540px; } | 
 |  168  | 
 |  169 .tablet-width { | 
 |  170   width: 720px; } | 
 |  171  | 
 |  172 .desktop-width { | 
 |  173   width: 960px; } | 
 |  174  | 
 |  175 .large-desktop-width { | 
 |  176   width: 1140px; } | 
 |  177  | 
 |  178 /* Text alignment | 
 |  179  ******************************************************************************/ | 
 |  180 .text-center { | 
 |  181   text-align: center; } | 
 |  182  | 
 |  183 .text-left { | 
 |  184   text-align: left; } | 
 |  185  | 
 |  186 .text-right { | 
 |  187   text-align: right; } | 
 |  188  | 
 |  189 .text-start { | 
 |  190   text-align: left; } | 
 |  191  | 
 |  192 [dir="rtl"] .text-start { | 
 |  193   text-align: right; } | 
 |  194  | 
 |  195 .text-end { | 
 |  196   text-align: right; } | 
 |  197  | 
 |  198 [dir="rtl"] .text-end { | 
 |  199   text-align: left; } | 
 |  200  | 
 |  201 /* Floats | 
 |  202  ******************************************************************************/ | 
 |  203 .float-start { | 
 |  204   float: left; } | 
 |  205  | 
 |  206 [dir="rtl"] .float-start { | 
 |  207   float: right; } | 
 |  208  | 
 |  209 .float-end { | 
 |  210   float: right; } | 
 |  211  | 
 |  212 [dir="rtl"] .float-end { | 
 |  213   float: left; } | 
 |  214  | 
 |  215 /* Clearfix | 
 |  216  ******************************************************************************/ | 
 |  217 .clearfix:after, .content:after, | 
 |  218 .clearfix:before, | 
 |  219 .content:before { | 
 |  220   display: table; | 
 |  221   content: " "; } | 
 |  222  | 
 |  223 .clearfix:after, .content:after { | 
 |  224   clear: both; } | 
 |  225  | 
 |  226 /* Screen reader only | 
 |  227  ******************************************************************************/ | 
 |  228 .sr-only { | 
 |  229   position: absolute; | 
 |  230   overflow: hidden; | 
 |  231   clip: rect(0, 0, 0, 0); | 
 |  232   width: 1px; | 
 |  233   height: 1px; | 
 |  234   margin: -1px; | 
 |  235   padding: 0; | 
 |  236   border: 0; } | 
 |  237  | 
 |  238 /* Unstyled elements | 
 |  239  ******************************************************************************/ | 
 |  240 .unstyled, | 
 |  241 .unstyled *, | 
 |  242 .content .unstyled, | 
 |  243 .content .unstyled * { | 
 |  244   margin: 0; | 
 |  245   padding: 0; | 
 |  246   border: 0; | 
 |  247   background: none; } | 
 |  248  | 
 |  249 .unstyled ul, | 
 |  250 ul.unstyled, | 
 |  251 .unstyled li, | 
 |  252 li.unstyled { | 
 |  253   list-style: none; } | 
 |  254  | 
 |  255 /* Backgrounds | 
 |  256  ******************************************************************************/ | 
 |  257 .bg-primary { | 
 |  258   color: #fff; | 
 |  259   background-color: #000; } | 
 |  260  | 
 |  261 .bg-secondary { | 
 |  262   color: #eee; | 
 |  263   background-color: #424242; } | 
 |  264  | 
 |  265 .bg-accent { | 
 |  266   color: #e3f2fd; | 
 |  267   background-color: #0d47a1; } | 
 |  268  | 
 |  269 .bg-error { | 
 |  270   color: #ffebee; | 
 |  271   background-color: #b71c1c; } | 
 |  272  | 
 |  273 /* Lead | 
 |  274  ******************************************************************************/ | 
 |  275 .lead { | 
 |  276   font-size: 1.25em; } | 
 |  277  | 
 |  278 @media (max-width: 767px) { | 
 |  279   .lead { | 
 |  280     font-size: 1.125em; } } | 
 |  281  | 
 |  282 /******************************************************************************* | 
 |  283  * Base styles | 
 |  284  ******************************************************************************/ | 
 |  285 html { | 
 |  286   color: #212121; | 
 |  287   background-color: #fff; | 
 |  288   font-family: sans-serif; | 
 |  289   line-height: 1.5; } | 
 |  290  | 
 |  291 /******************************************************************************* | 
 |  292  * Content styles | 
 |  293  ******************************************************************************* | 
 |  294  * 1. Document | 
 |  295  * 2. Headings | 
 |  296  * 3. Body content | 
 |  297  ******************************************************************************/ | 
 |  298 .content { | 
 |  299   /* Clearfixed | 
 |  300    ****************************************************************************/ | 
 |  301   /* Document | 
 |  302   ****************************************************************************/ | 
 |  303   /* Headings | 
 |  304   ****************************************************************************/ | 
 |  305   /* Body content | 
 |  306   ****************************************************************************/ 
     } | 
 |  307   .content p, | 
 |  308   .content ol, | 
 |  309   .content ul, | 
 |  310   .content dl, | 
 |  311   .content pre, | 
 |  312   .content blockquote { | 
 |  313     /* Set consistent margins (opinionated) */ | 
 |  314     margin: 1em 0em; } | 
 |  315   .content h1, | 
 |  316   .content h2, | 
 |  317   .content h3, | 
 |  318   .content h4, | 
 |  319   .content h5, | 
 |  320   .content h6 { | 
 |  321     /* Margin on top **only** (opinionated) */ | 
 |  322     margin: 2em 0em 0.5em 0em; | 
 |  323     /* All headings should be bold (opinionated) */ | 
 |  324     font-weight: 600; } | 
 |  325   .content h1 { | 
 |  326     font-size: 2em; } | 
 |  327   .content h2 { | 
 |  328     font-size: 1.5em; } | 
 |  329   .content h3 { | 
 |  330     font-size: 1.25em; } | 
 |  331   .content h4 { | 
 |  332     font-size: 1em; } | 
 |  333   .content h5 { | 
 |  334     font-size: 0.8em; } | 
 |  335   .content h6 { | 
 |  336     font-size: 0.7em; } | 
 |  337   .content a, | 
 |  338   .content a:visited { | 
 |  339     color: #1565c0; } | 
 |  340   .content hr { | 
 |  341     border: 1px solid #eee; } | 
 |  342   .content blockquote { | 
 |  343     padding-left: 1em; | 
 |  344     border-left: 5px solid #9e9e9e; } | 
 |  345   .content [dir="rtl"] blockquote { | 
 |  346     padding-right: 1em; | 
 |  347     padding-left: 0em; | 
 |  348     border-right: 5px solid #eee; | 
 |  349     border-left: 0px; } | 
 |  350   .content ol, | 
 |  351   .content ul { | 
 |  352     padding-left: 1.5em; } | 
 |  353   .content [dir="rtl"] ol, | 
 |  354   .content [dir="rtl"] ul { | 
 |  355     padding-right: 2em; | 
 |  356     padding-left: 0em; } | 
 |  357   .content ol { | 
 |  358     list-style: decimal; } | 
 |  359   .content ul { | 
 |  360     list-style: disc; } | 
 |  361   .content li { | 
 |  362     margin: 0.25em 0em; } | 
 |  363   .content ol ol, | 
 |  364   .content ul ul, | 
 |  365   .content ol ul, | 
 |  366   .content ul ol { | 
 |  367     /* prevent double spacing lists */ | 
 |  368     margin: 0em; } | 
 |  369   .content ol ol { | 
 |  370     list-style-type: lower-alpha; } | 
 |  371   .content dt { | 
 |  372     /* undo browser default (opinionated)*/ | 
 |  373     font-weight: 600; } | 
 |  374   .content dd { | 
 |  375     margin: 0.25em 0em 1em 0em; } | 
 |  376  | 
 |  377 /******************************************************************************* | 
 |  378  * Grid component | 
 |  379  ******************************************************************************/ | 
 |  380 /** | 
 |  381  * - .row contains one or more .column(s) | 
 |  382  * - .row clears .column(s) | 
 |  383  * - .row negates the left & right padding of it's left-most & right-most | 
 |  384  *   .column(s) while preserving consistent padding between .column(s) | 
 |  385  */ | 
 |  386 .row { | 
 |  387   margin: 0px -1em; } | 
 |  388  | 
 |  389 .row:after { | 
 |  390   display: block; | 
 |  391   clear: both; | 
 |  392   content: ""; } | 
 |  393  | 
 |  394 /** | 
 |  395  * - .column is 100% width by default | 
 |  396  * - Modifier classes are applied to .column to change it's width | 
 |  397  * - Modifier classes behave differently on different device widths | 
 |  398  */ | 
 |  399 .column { | 
 |  400   position: relative; | 
 |  401   width: 100%; | 
 |  402   min-height: 1px; | 
 |  403   padding: 0px 1em; } | 
 |  404  | 
 |  405 /* - .column(s) within .row .reverse appear in reverse order | 
 |  406  * - .column(s) within [dir=rtl] appear in reverse order respectively | 
 |  407  */ | 
 |  408 .column, | 
 |  409 [dir="rtl"] .reverse .column { | 
 |  410   float: left; } | 
 |  411  | 
 |  412 .reverse .column, | 
 |  413 [dir="rtl"] .column { | 
 |  414   float: right; } | 
 |  415  | 
 |  416 @media (min-width: 768px) { | 
 |  417   .one-half, | 
 |  418   .one-fourth { | 
 |  419     width: 50%; } } | 
 |  420  | 
 |  421 @media (min-width: 992px) { | 
 |  422   .one-third { | 
 |  423     width: 33.333333%; } | 
 |  424   .two-thirds { | 
 |  425     width: 66.666667%; } } | 
 |  426  | 
 |  427 @media (min-width: 992px) { | 
 |  428   .one-fourth { | 
 |  429     width: 25%; } | 
 |  430   .three-fourths { | 
 |  431     width: 75%; } } | 
 |  432  | 
 |  433 /******************************************************************************* | 
 |  434  * Basic forms fields | 
 |  435  ******************************************************************************* | 
 |  436  | 
 |  437 /* 1. Reset | 
 |  438  ******************************************************************************/ | 
 |  439 /* Change the font styles in all browsers (opinionated). */ | 
 |  440 input, | 
 |  441 optgroup, | 
 |  442 select, | 
 |  443 textarea { | 
 |  444   font: inherit; } | 
 |  445  | 
 |  446 /* Show the overflow in IE and Edge */ | 
 |  447 input { | 
 |  448   overflow: visible; } | 
 |  449  | 
 |  450 /* Remove the inheritance of text transform in Edge, Firefox, and IE. */ | 
 |  451 select { | 
 |  452   text-transform: none; } | 
 |  453  | 
 |  454 /* Set block display (opinionated) */ | 
 |  455 fieldset { | 
 |  456   display: block; } | 
 |  457  | 
 |  458 /* Correct the text wrapping in Edge and IE. */ | 
 |  459 legend { | 
 |  460   display: table; | 
 |  461   max-width: 100%; | 
 |  462   white-space: normal; } | 
 |  463  | 
 |  464 /* Remove the default vertical scrollbar in IE. */ | 
 |  465 textarea { | 
 |  466   overflow: auto; } | 
 |  467  | 
 |  468 /* Remove the padding in IE 10-. */ | 
 |  469 [type="checkbox"], | 
 |  470 [type="radio"] { | 
 |  471   padding: 0px; } | 
 |  472  | 
 |  473 /******************************************************************************* | 
 |  474  * Adanced forms fields | 
 |  475  ******************************************************************************* | 
 |  476  | 
 |  477 /* 1. Reset | 
 |  478  ******************************************************************************/ | 
 |  479 /* Correct the cursor style of increment and decrement buttons in Chrome. */ | 
 |  480 [type="number"]::-webkit-inner-spin-button, | 
 |  481 [type="number"]::-webkit-outer-spin-button { | 
 |  482   height: auto; } | 
 |  483  | 
 |  484 /* Use `-webkit-appearance: none` to reset inputs in iOS Safari */ | 
 |  485 [type="date"], | 
 |  486 [type="time"], | 
 |  487 [type="datetime"], | 
 |  488 [type="datetime-local"], | 
 |  489 [type="month"], | 
 |  490 [type="week"], | 
 |  491 [type="search"], | 
 |  492 [type="search"]::-webkit-search-cancel-button, | 
 |  493 [type="search"]::-webkit-search-decoration { | 
 |  494   -webkit-appearance: none; } | 
 |  495  | 
 |  496 [type="search"] { | 
 |  497   outline-offset: -2px; } | 
 |  498  | 
 |  499 /******************************************************************************* | 
 |  500  * Buttons | 
 |  501  ******************************************************************************* | 
 |  502  | 
 |  503 /* 1. Reset | 
 |  504  ******************************************************************************/ | 
 |  505 button { | 
 |  506   margin: 0px; | 
 |  507   font: inherit; | 
 |  508   /* Show the overflow in IE and Edge */ | 
 |  509   overflow: visible; | 
 |  510   /* Remove rounded corners in Chrome 62+ */ | 
 |  511   border-radius: 0; | 
 |  512   /* Remove the inheritance of text transform in Edge, Firefox, and IE. */ | 
 |  513   text-transform: none; } | 
 |  514  | 
 |  515 /** | 
 |  516  * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` | 
 |  517  *    controls in Android 4. | 
 |  518  * 2. Correct the inability to style clickable types in iOS and Safari. | 
 |  519  */ | 
 |  520 button, | 
 |  521 html [type="button"], | 
 |  522 [type="reset"], | 
 |  523 [type="submit"] { | 
 |  524   -webkit-appearance: button; } | 
 |  525  | 
 |  526 /* Remove the inner border and padding in Firefox. */ | 
 |  527 button::-moz-focus-inner, | 
 |  528 [type="button"]::-moz-focus-inner, | 
 |  529 [type="reset"]::-moz-focus-inner, | 
 |  530 [type="submit"]::-moz-focus-inner { | 
 |  531   padding: 0px; | 
 |  532   border-style: none; } | 
 |  533  | 
 |  534 /* Restore the focus styles unset by the previous rule. */ | 
 |  535 button:-moz-focusring, | 
 |  536 [type="button"]:-moz-focusring, | 
 |  537 [type="reset"]:-moz-focusring, | 
 |  538 [type="submit"]:-moz-focusring { | 
 |  539   outline: 1px dotted ButtonText; } | 
| OLD | NEW |