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   text-align: center;
 102 }
 103
 104 div.slide:after {
 105   position: absolute;
 106   bottom: 0; left: 0;
 107   width: 100%;
 108   font-size: .75em;
 109   line-height: 1.5em;
 110   text-align: left;
 111   content: attr(count) " /";
 112   padding-left: 4em;
 113   background-color: #EEE;
 114   color: #888;
 115 }
 116
 117 div.slide > * {
 118   vertical-align: middle;
 119   text-align: left;
 120 }
 121
 122 div.slide h1 {
 123   left: 0; right: 0;
 124   display: block;
 125   text-align: center;
 126   font-size: 1.5em;
 127   background-color: #EEE;
 128   padding: .25em 1em;
 129   margin-left: -1em;
 130   margin-right: -1em;
 131 }
 132
 133 div.slide ul,
 134 div.slide ol {
 135   width: fit-content;
 136   margin: .25em auto;
 137 }
 138
 139 /* ==== Slide Display ==== */
 140
 141 div.slide:target {
 142   position: fixed;
 143   z-index: 2;
 144   top: 0; bottom: 0; left: 0; right: 0;
 145   width: auto; height: auto;
 146   margin: 0;
 147   border: none;
 148   font-size: 24pt;
 149 }
 150 div.slide:target + a,
 151 div.slide:target + a + a {
 152   position: static;
 153   display: block;
 154   font-size: 18pt;
 155   line-height: 1em;
 156   color: #888;
 157 }
 158 :target + a:before, :target + a + a:before {
 159   display: block;
 160   position: fixed;
 161   bottom: 0;
 162   font-size: 18pt;
 163   color: #888;
 164   padding: 0 1em .25em 1em;
 165   z-index: 3;
 166 }
 167 :target + a:before { left:  0; }
 168 :target + a:before { content: '\22d8'; }
 169 :target + a + a:before { right: 0; }
 170 :target + a + a:before { content: '\22d9'; }
 171
 172 :target .uncover { color: #DDD; }
 173 :target .uncover:hover { color: #000; }
 174 :target .uncover *:first-child { height: 0; }
 175 :target .uncover *:first-child:before,
 176 :target .uncover *:hover:before,
 177 :target .uncover *:active + *:before {
 178   content: ' ';
 179   position: fixed;
 180   top: 0; bottom: 0;
 181   left: 0; right: 0;
 182 }
 183 :target .uncover *:hover ~ * { color: #DDD; }
 184 :target .uncover *:active:before { display: none; }