tpl/default/css/shaarli.css

   1 /**
   2  * General
   3  */
   4 body {
   5
   6 }
   7
   8 .strong {
   9     font-weight: bold;
  10 }
  11
  12 .clear {
  13     clear: both;
  14 }
  15
  16 /**
  17  * Extends Pure grids responsive to hide items.
  18  * Use xx-0 to hide an item on xx screen.
  19  * Display it at any level with xx-visible.
  20  */
  21 .pure-u-0 { display: none !important; }
  22 @media screen and (min-width: 35.5em) {
  23     .pure-u-sm-0 { display: none !important; }
  24     .pure-u-sm-visible { display: inherit !important; }
  25 }
  26 @media screen and (min-width: 48em) {
  27     .pure-u-md-0 { display: none !important; }
  28     .pure-u-md-visible { display: inherit !important; }
  29 }
  30 @media screen and (min-width: 64em) {
  31     .pure-u-lg-0 { display: none !important; }
  32     .pure-u-lg-visible { display: inherit !important; }
  33 }
  34 @media screen and (min-width: 80em) {
  35     .pure-u-xl-0 { display: none !important; }
  36     .pure-u-xl-visible { display: inherit !important; }
  37 }
  38
  39 /**
  40  * MENU
  41  **/
  42 .shaarli-menu {
  43     position: fixed;
  44     top: 0;
  45     width: 100%;
  46     background: #1b926c;
  47     -webkit-font-smoothing: antialiased;
  48     /* Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919 */
  49     max-height: 2.1em;
  50     transition: max-height 0.5s;
  51     overflow: hidden;
  52     z-index: 999;
  53 }
  54
  55 .shaarli-menu.open {
  56     max-height: 500px;
  57     transition: max-height 0.75s;
  58 }
  59
  60 .pure-menu-selected {
  61     background: #1A694C;
  62 }
  63
  64 .pure-menu-link,
  65 .pure-menu-link:visited,
  66 .pure-menu-selected .pure-menu-link,
  67 .pure-menu-selected .pure-menu-link:visited {
  68     color: #b0ddce;
  69 }
  70
  71 .pure-menu-link:hover,
  72 .pure-menu-selected .pure-menu-link:hover {
  73     color: #d1fff0;
  74     background: transparent;
  75 }
  76
  77 .menu-toggle {
  78     width: 34px;
  79     height: 34px;
  80     position: absolute;
  81     top: 0;
  82     right: 0;
  83     display: none;
  84 }
  85
  86 .menu-toggle .bar {
  87     background-color: #b0ddce;
  88     display: block;
  89     width: 20px;
  90     height: 2px;
  91     border-radius: 100px;
  92     position: absolute;
  93     top: 18px;
  94     right: 7px;
  95     transition: all 0.5s;
  96 }
  97
  98 .menu-toggle .bar:first-child {
  99     transform: translateY(-6px);
 100 }
 101
 102 .menu-toggle.x .bar {
 103     transform: rotate(45deg);
 104 }
 105
 106 .menu-toggle.x .bar:first-child {
 107     transform: rotate(-45deg);
 108 }
 109
 110 @media screen and (max-width: 64em) {
 111     .menu-toggle {
 112         display: block;
 113     }
 114 }
 115
 116 /**
 117  * Header
 118  */
 119 #header {
 120     width: 100%;
 121     height: 150px;
 122     background: url(../img/noise.png), #1fa67a url(../img/logo.png) no-repeat fixed center 2.5em;
 123 }
 124
 125 #header h1 {
 126     position: fixed;
 127     float: left;
 128     margin: 45px 0 0 0;
 129     width: 44%;
 130     height: 100px;
 131     text-align: right;
 132 }
 133
 134 #header h1 a, #header h1 a:visited {
 135     /* https://css-tricks.com/centering-css-complete-guide/#vertical-inline-multiple */
 136     display: -ms-flexbox;
 137     display: flex;
 138     flex-direction: column;
 139     justify-content: center;
 140
 141     overflow: hidden;
 142     height: 100px;
 143     color: #b0ddce;
 144     text-decoration: none;
 145     z-index: 1;
 146
 147     /* TODO: font? */
 148 }
 149
 150 #header h1 a:hover {
 151     color: #d1fff0;
 152 }
 153
 154 #linkcount {
 155     position: fixed;
 156     top: 40px;
 157     right: 10px;
 158     color: #b0ddce;
 159     font-size: 0.8em;
 160 }
 161
 162 #search {
 163     position: fixed;
 164     top: 55px;
 165     right: 10px;
 166     width: 44%;
 167     text-align: right;
 168 }
 169
 170 #content {
 171     position: relative;
 172     box-shadow: 0 -2px 1em #797979;
 173     z-index: 2;
 174     background: url(../img/noise.png) #979797;
 175 }