projects / github / shaarli / Shaarli.git / blame
| Commit | Line | Data |
|---|---|---|
| 4ed6d1ba A |
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 | } |