git.plutz.net Git - clickslide/blob - autoslide.css

   1 * {
   2   box-sizing: border-box;
   3   margin: 0; padding: 0;
   4 }
   5
   6 body {
   7   padding: 2em 1em 6em 1em;
   8   background-color: #555;
   9   text-align: center;
  10   overflow-x: hidden;
  11 }
  12 body * { text-align: left; }
  13
  14 body:after {
  15   position: fixed;
  16   bottom: 0; left: 0;
  17   width: 100%;
  18   background-color: #EEE;
  19   height: 30pt;
  20   content: ' ';
  21 }
  22
  23 a.previous, a.next ,a.toplevel {
  24   text-decoration: none;
  25 }
  26
  27 footer {
  28   position: fixed;
  29   bottom: 0; left: 0;
  30   width: 100%;
  31   font-size: 14pt; line-height: 14pt;
  32   padding: .5em 4em .5em 12em;
  33   text-align: center;
  34   #background-color: #EEE;
  35   color: #888;
  36   z-index: 3;
  37 }
  38 footer:before {
  39   content: ' ';
  40   position: absolute;
  41   top: 0; left: 0;
  42   bottom: 28pt;
  43   width: 100%;
  44   background-color: #EEE;
  45   z-index: -1;
  46 }
  47
  48 body a.toplevel {
  49   position: fixed;
  50   bottom: 0; left: 8em;
  51   width: 2ex; overflow: hidden;
  52   font-size: 18pt;
  53   padding-bottom: .25em;
  54   color: #EEE;
  55   z-index: 4;
  56 }
  57 body a.toplevel:before {
  58   color: #888;
  59   content: '\2ba4'
  60 }
  61
  62 body span.count {
  63   position: fixed;
  64   bottom: 0; left: 6.25em;
  65   font-size: 18pt;
  66   padding-bottom: .125em;
  67   color: #888;
  68   z-index: 4;
  69 }
  70
  71 /* ==== Overview Screen ==== */
  72
  73 div.slide {
  74   position: relative;
  75   display: inline-block;
  76   overflow: hidden;
  77   width: 20em; height: 15em;
  78   margin-left: -20em;
  79   border: 1px solid black;
  80   font-size: 6pt;
  81 }
  82
  83 div.slide + a { display: none; }
  84 a.nextslide {
  85   display: inline-block;
  86   position: relative;
  87   vertical-align: top;
  88   #margin-left: 2em;
  89   font-size: 6pt;
  90   width: 20em; line-height: 15em;
  91   color: rgba(0, 0, 0, 0);
  92   z-index: 1;
  93 }
  94 div.slide:nth-of-type(1) { margin-right: .5em; }
  95
  96 /* ==== Slide Appearance ==== */
  97
  98 div.slide {
  99   padding: 0 1em;
 100   background-color: #FFF;
 101 }
 102
 103 div.slide:after {
 104   position: absolute;
 105   bottom: 0; width: 100%;
 106   font-size: .75em;
 107   line-height: 1.5em;
 108   content: attr(count) " /";
 109   padding-left: 4em;
 110   margin-left: -1.25em;
 111   margin-right: -1.25em;
 112   background-color: #EEE;
 113   color: #888;
 114 }
 115
 116 h1 {
 117   left: 0; right: 0;
 118   display: block;
 119   text-align: center;
 120   font-size: 1.5em;
 121   background-color: #EEE;
 122   padding: .25em 1em;
 123   margin-left: -1em;
 124   margin-right: -1em;
 125 }
 126
 127 div.slide ul li, div.slide ol {
 128   indent: 20em;
 129 }
 130
 131 /* ==== Slide Display ==== */
 132
 133 div.slide:target {
 134   position: fixed;
 135   z-index: 2;
 136   top: 0; bottom: 0; left: 0; right: 0;
 137   width: auto; height: auto;
 138   margin: 0;
 139   border: none;
 140   font-size: 24pt;
 141 }
 142 div.slide:target + a,
 143 div.slide:target + a + a {
 144   position: static;
 145   display: block;
 146   font-size: 18pt;
 147   line-height: 1em;
 148   color: #888;
 149 }
 150 :target + a:before, :target + a + a:before {
 151   display: block;
 152   position: fixed;
 153   bottom: 0;
 154   font-size: 18pt;
 155   color: #888;
 156   padding: 0 1em .25em 1em;
 157   z-index: 3;
 158 }
 159 :target + a:before { left:  0; }
 160 :target + a:before { content: '\22d8'; }
 161 :target + a + a:before { right: 0; }
 162 :target + a + a:before { content: '\22d9'; }
 163
 164 :target .uncover { color: #DDD; }
 165 :target .uncover:hover { color: #000; }
 166 :target .uncover *:first-child { height: 0; }
 167 :target .uncover *:first-child:before,
 168 :target .uncover *:hover:before,
 169 :target .uncover *:active + *:before {
 170   content: ' ';
 171   position: fixed;
 172   top: 0; bottom: 0;
 173   left: 0; right: 0;
 174 }
 175 :target .uncover *:hover ~ * { color: #DDD; }
 176 :target .uncover *:active:before { display: none; }