tpl/default/css/shaarli.css

   1 body {
   2     background: url(../img/noise.png) #979797;
   3 }
   4
   5 header {
   6
   7 }
   8
   9 /**
  10  * MENU
  11  **/
  12 .pure-menu {
  13     /*position: fixed;*/
  14     background: #16a085;
  15 }
  16
  17 .pure-menu-selected {
  18     background: #049372;
  19 }
  20
  21 .pure-menu-link,
  22 .pure-menu-link:visited,
  23 .pure-menu-selected .pure-menu-link,
  24 .pure-menu-selected .pure-menu-link:visited {
  25     color: #b0ddce;
  26 }
  27
  28 .pure-menu-link:hover,
  29 .pure-menu-selected .pure-menu-link:hover {
  30     color: #fff;
  31     background: transparent;
  32 }
  33
  34 .shaarli-menu {
  35     margin-bottom: 1em;
  36     -webkit-font-smoothing: antialiased;
  37     /* Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919 */
  38     max-height: 2.1em;
  39     transition: max-height 0.5s;
  40     overflow: hidden;
  41 }
  42
  43 .shaarli-menu.open {
  44     max-height: 500px;
  45     transition: max-height 0.75s;
  46 }
  47
  48 .menu-toggle {
  49     width: 34px;
  50     height: 34px;
  51     position: absolute;
  52     top: 0;
  53     right: 0;
  54     display: none;
  55 }
  56
  57 .menu-toggle .bar {
  58     background-color: #b0ddce;
  59     display: block;
  60     width: 20px;
  61     height: 2px;
  62     border-radius: 100px;
  63     position: absolute;
  64     top: 18px;
  65     right: 7px;
  66     transition: all 0.5s;
  67 }
  68
  69 .menu-toggle .bar:first-child {
  70     transform: translateY(-6px);
  71 }
  72
  73 .menu-toggle.x .bar {
  74     transform: rotate(45deg);
  75 }
  76
  77 .menu-toggle.x .bar:first-child {
  78     transform: rotate(-45deg);
  79 }
  80
  81 @media screen and (max-width: 64em) {
  82     .menu-toggle {
  83         display: block;
  84     }
  85 }
  86
  87 /**
  88  * Extends Pure grids responsive to hide items.
  89  * Use xx-0 to hide an item on xx screen.
  90  * Display it at any level with xx-visible.
  91  */
  92 .pure-u-0 { display: none !important; }
  93 @media screen and (min-width: 35.5em) {
  94     .pure-u-sm-0 { display: none !important; }
  95     .pure-u-sm-visible { display: inherit !important; }
  96 }
  97 @media screen and (min-width: 48em) {
  98     .pure-u-md-0 { display: none !important; }
  99     .pure-u-md-visible { display: inherit !important; }
 100 }
 101 @media screen and (min-width: 64em) {
 102     .pure-u-lg-0 { display: none !important; }
 103     .pure-u-lg-visible { display: inherit !important; }
 104 }
 105 @media screen and (min-width: 80em) {
 106     .pure-u-xl-0 { display: none !important; }
 107     .pure-u-xl-visible { display: inherit !important; }
 108 }