bookclub-advr

DSLC Advanced R Book Club
git clone https://git.eamoncaddigan.net/bookclub-advr.git
Log | Files | Refs | README | LICENSE

menu.css (8192B)

      1 .slide-menu-wrapper {
      2   font-family: 'Source Sans Pro', Helvetica, sans-serif;
      3 }
      4 
      5 .slide-menu-wrapper .slide-menu {
      6   background-color: #333;
      7   z-index: 200;
      8   position: fixed;
      9   top: 0;
     10   width: 300px;
     11   height: 100%;
     12   /*overflow-y: scroll;*/
     13   transition: transform 0.3s;
     14   font-size: 16px;
     15   font-weight: normal;
     16 }
     17 
     18 .slide-menu-wrapper .slide-menu.slide-menu--wide {
     19   width: 500px;
     20 }
     21 
     22 .slide-menu-wrapper .slide-menu.slide-menu--third {
     23   width: 33%;
     24 }
     25 
     26 .slide-menu-wrapper .slide-menu.slide-menu--half {
     27   width: 50%;
     28 }
     29 
     30 .slide-menu-wrapper .slide-menu.slide-menu--full {
     31   width: 95%;
     32 }
     33 
     34 /*
     35  * Slides menu
     36  */
     37 
     38 .slide-menu-wrapper .slide-menu-items {
     39   margin: 0;
     40   padding: 0;
     41   width: 100%;
     42   border-bottom: solid 1px #555;
     43 }
     44 
     45 .slide-menu-wrapper .slide-menu-item,
     46 .slide-menu-wrapper .slide-menu-item-vertical {
     47   display: block;
     48   text-align: left;
     49   padding: 10px 18px;
     50   color: #aaa;
     51   cursor: pointer;
     52 }
     53 
     54 .slide-menu-wrapper .slide-menu-item-vertical {
     55   padding-left: 30px;
     56 }
     57 
     58 .slide-menu-wrapper .slide-menu--wide .slide-menu-item-vertical,
     59 .slide-menu-wrapper .slide-menu--third .slide-menu-item-vertical,
     60 .slide-menu-wrapper .slide-menu--half .slide-menu-item-vertical,
     61 .slide-menu-wrapper .slide-menu--full .slide-menu-item-vertical,
     62 .slide-menu-wrapper .slide-menu--custom .slide-menu-item-vertical {
     63   padding-left: 50px;
     64 }
     65 
     66 .slide-menu-wrapper .slide-menu-item {
     67   border-top: solid 1px #555;
     68 }
     69 
     70 .slide-menu-wrapper .active-menu-panel li.selected {
     71   background-color: #222;
     72   color: white;
     73 }
     74 
     75 .slide-menu-wrapper .active-menu-panel li.active {
     76   color: #eee;
     77 }
     78 
     79 .slide-menu-wrapper .slide-menu-item.no-title .slide-menu-item-title,
     80 .slide-menu-wrapper .slide-menu-item-vertical.no-title .slide-menu-item-title {
     81   font-style: italic;
     82 }
     83 
     84 .slide-menu-wrapper .slide-menu-item-number {
     85   color: #999;
     86   padding-right: 6px;
     87 }
     88 
     89 .slide-menu-wrapper .slide-menu-item i.far,
     90 .slide-menu-wrapper .slide-menu-item i.fas,
     91 .slide-menu-wrapper .slide-menu-item-vertical i.far,
     92 .slide-menu-wrapper .slide-menu-item-vertical i.fas,
     93 .slide-menu-wrapper .slide-menu-item svg.svg-inline--fa,
     94 .slide-menu-wrapper .slide-menu-item-vertical svg.svg-inline--fa {
     95   padding-right: 12px;
     96   display: none;
     97 }
     98 
     99 .slide-menu-wrapper .slide-menu-item.past i.fas.past,
    100 .slide-menu-wrapper .slide-menu-item-vertical.past i.fas.past,
    101 .slide-menu-wrapper .slide-menu-item.active i.fas.active,
    102 .slide-menu-wrapper .slide-menu-item-vertical.active i.fas.active,
    103 .slide-menu-wrapper .slide-menu-item.future i.far.future,
    104 .slide-menu-wrapper .slide-menu-item-vertical.future i.far.future,
    105 .slide-menu-wrapper .slide-menu-item.past svg.svg-inline--fa.past,
    106 .slide-menu-wrapper .slide-menu-item-vertical.past svg.svg-inline--fa.past,
    107 .slide-menu-wrapper .slide-menu-item.active svg.svg-inline--fa.active,
    108 .slide-menu-wrapper .slide-menu-item-vertical.active svg.svg-inline--fa.active,
    109 .slide-menu-wrapper .slide-menu-item.future svg.svg-inline--fa.future,
    110 .slide-menu-wrapper .slide-menu-item-vertical.future svg.svg-inline--fa.future {
    111   display: inline-block;
    112 }
    113 
    114 .slide-menu-wrapper .slide-menu-item.past i.fas.past,
    115 .slide-menu-wrapper .slide-menu-item-vertical.past i.fas.past,
    116 .slide-menu-wrapper .slide-menu-item.future i.far.future,
    117 .slide-menu-wrapper .slide-menu-item-vertical.future i.far.future,
    118 .slide-menu-wrapper .slide-menu-item.past svg.svg-inline--fa.past,
    119 .slide-menu-wrapper .slide-menu-item-vertical.past svg.svg-inline--fa.past,
    120 .slide-menu-wrapper .slide-menu-item.future svg.svg-inline--fa.future,
    121 .slide-menu-wrapper .slide-menu-item-vertical.future svg.svg-inline--fa.future {
    122   opacity: 0.4;
    123 }
    124 
    125 .slide-menu-wrapper .slide-menu-item.active i.fas.active,
    126 .slide-menu-wrapper .slide-menu-item-vertical.active i.fas.active,
    127 .slide-menu-wrapper .slide-menu-item.active svg.svg-inline--fa.active,
    128 .slide-menu-wrapper .slide-menu-item-vertical.active svg.svg-inline--fa.active {
    129   opacity: 0.8;
    130 }
    131 
    132 .slide-menu-wrapper .slide-menu--left {
    133   left: 0;
    134   -webkit-transform: translateX(-100%);
    135   -ms-transform: translateX(-100%);
    136   transform: translateX(-100%);
    137 }
    138 
    139 .slide-menu-wrapper .slide-menu--left.active {
    140   -webkit-transform: translateX(0);
    141   -ms-transform: translateX(0);
    142   transform: translateX(0);
    143 }
    144 
    145 .slide-menu-wrapper .slide-menu--right {
    146   right: 0;
    147   -webkit-transform: translateX(100%);
    148   -ms-transform: translateX(100%);
    149   transform: translateX(100%);
    150 }
    151 
    152 .slide-menu-wrapper .slide-menu--right.active {
    153   -webkit-transform: translateX(0);
    154   -ms-transform: translateX(0);
    155   transform: translateX(0);
    156 }
    157 
    158 .slide-menu-wrapper {
    159   transition: transform 0.3s;
    160 }
    161 
    162 /*
    163  * Toolbar
    164  */
    165 .slide-menu-wrapper .slide-menu-toolbar {
    166   height: 60px;
    167   width: 100%;
    168   font-size: 12px;
    169   display: table;
    170   table-layout: fixed; /* ensures equal width */
    171   margin: 0;
    172   padding: 0;
    173   border-bottom: solid 2px #666;
    174 }
    175 
    176 .slide-menu-wrapper .slide-menu-toolbar > li {
    177   display: table-cell;
    178   line-height: 150%;
    179   text-align: center;
    180   vertical-align: middle;
    181   cursor: pointer;
    182   color: #aaa;
    183   border-radius: 3px;
    184 }
    185 
    186 .slide-menu-wrapper .slide-menu-toolbar > li.toolbar-panel-button i,
    187 .slide-menu-wrapper
    188   .slide-menu-toolbar
    189   > li.toolbar-panel-button
    190   svg.svg-inline--fa {
    191   font-size: 1.7em;
    192 }
    193 
    194 .slide-menu-wrapper .slide-menu-toolbar > li.active-toolbar-button {
    195   color: white;
    196   text-shadow: 0 1px black;
    197   text-decoration: underline;
    198 }
    199 
    200 .slide-menu-toolbar > li.toolbar-panel-button:hover {
    201   color: white;
    202 }
    203 
    204 .slide-menu-toolbar
    205   > li.toolbar-panel-button:hover
    206   span.slide-menu-toolbar-label,
    207 .slide-menu-wrapper
    208   .slide-menu-toolbar
    209   > li.active-toolbar-button
    210   span.slide-menu-toolbar-label {
    211   visibility: visible;
    212 }
    213 
    214 /*
    215  * Panels
    216  */
    217 .slide-menu-wrapper .slide-menu-panel {
    218   position: absolute;
    219   width: 100%;
    220   visibility: hidden;
    221   height: calc(100% - 60px);
    222   overflow-x: hidden;
    223   overflow-y: auto;
    224   color: #aaa;
    225 }
    226 
    227 .slide-menu-wrapper .slide-menu-panel.active-menu-panel {
    228   visibility: visible;
    229 }
    230 
    231 .slide-menu-wrapper .slide-menu-panel h1,
    232 .slide-menu-wrapper .slide-menu-panel h2,
    233 .slide-menu-wrapper .slide-menu-panel h3,
    234 .slide-menu-wrapper .slide-menu-panel h4,
    235 .slide-menu-wrapper .slide-menu-panel h5,
    236 .slide-menu-wrapper .slide-menu-panel h6 {
    237   margin: 20px 0 10px 0;
    238   color: #fff;
    239   line-height: 1.2;
    240   letter-spacing: normal;
    241   text-shadow: none;
    242 }
    243 
    244 .slide-menu-wrapper .slide-menu-panel h1 {
    245   font-size: 1.6em;
    246 }
    247 .slide-menu-wrapper .slide-menu-panel h2 {
    248   font-size: 1.4em;
    249 }
    250 .slide-menu-wrapper .slide-menu-panel h3 {
    251   font-size: 1.3em;
    252 }
    253 .slide-menu-wrapper .slide-menu-panel h4 {
    254   font-size: 1.1em;
    255 }
    256 .slide-menu-wrapper .slide-menu-panel h5 {
    257   font-size: 1em;
    258 }
    259 .slide-menu-wrapper .slide-menu-panel h6 {
    260   font-size: 0.9em;
    261 }
    262 
    263 .slide-menu-wrapper .slide-menu-panel p {
    264   margin: 10px 0 5px 0;
    265 }
    266 
    267 .slide-menu-wrapper .slide-menu-panel a {
    268   color: #ccc;
    269   text-decoration: underline;
    270 }
    271 
    272 .slide-menu-wrapper .slide-menu-panel a:hover {
    273   color: white;
    274 }
    275 
    276 .slide-menu-wrapper .slide-menu-item a {
    277   text-decoration: none;
    278 }
    279 
    280 .slide-menu-wrapper .slide-menu-custom-panel {
    281   width: calc(100% - 20px);
    282   padding-left: 10px;
    283   padding-right: 10px;
    284 }
    285 
    286 .slide-menu-wrapper .slide-menu-custom-panel .slide-menu-items {
    287   width: calc(100% + 20px);
    288   margin-left: -10px;
    289   margin-right: 10px;
    290 }
    291 
    292 /*
    293  * Theme and Transitions buttons
    294  */
    295 
    296 .slide-menu-wrapper div[data-panel='Themes'] li,
    297 .slide-menu-wrapper div[data-panel='Transitions'] li {
    298   display: block;
    299   text-align: left;
    300   cursor: pointer;
    301   color: #848484;
    302 }
    303 
    304 /*
    305  * Menu controls
    306  */
    307 .reveal .slide-menu-button {
    308   position: fixed;
    309   left: 30px;
    310   bottom: 30px;
    311   z-index: 30;
    312   font-size: 24px;
    313 }
    314 
    315 /*
    316  * Menu overlay
    317  */
    318 
    319 .slide-menu-wrapper .slide-menu-overlay {
    320   position: fixed;
    321   z-index: 199;
    322   top: 0;
    323   left: 0;
    324   overflow: hidden;
    325   width: 0;
    326   height: 0;
    327   background-color: #000;
    328   opacity: 0;
    329   transition: opacity 0.3s, width 0s 0.3s, height 0s 0.3s;
    330 }
    331 
    332 .slide-menu-wrapper .slide-menu-overlay.active {
    333   width: 100%;
    334   height: 100%;
    335   opacity: 0.7;
    336   transition: opacity 0.3s;
    337 }
    338 
    339 /*
    340  * Hide menu for pdf printing
    341  */
    342 body.print-pdf .slide-menu-wrapper .slide-menu,
    343 body.print-pdf .reveal .slide-menu-button,
    344 body.print-pdf .slide-menu-wrapper .slide-menu-overlay {
    345   display: none;
    346 }