git.plutz.net Git - serve0/blob - style.css

   1 * {
   2   box-sizing: border-box;
   3   margin: 0; padding: 0;
   4 }
   5 button { padding: .125em .5em; }
   6 a { color: inherit; text-decoration: none;}
   7
   8 body {
   9   color: white;
  10   background-color: black;
  11   min-height: 100%;
  12 }
  13
  14 #prefs, #bookmarks, #multitag {
  15   display: block;
  16   overflow: hidden;
  17   height: 0;
  18   text-align: left;
  19 }
  20 #prefs:target,
  21 #multitag:target,
  22 #bookmarks:target {
  23   height: auto;
  24   overflow: visible;
  25 }
  26
  27 #navigation{
  28   text-align: center;
  29   background-color: #333;
  30   padding: .25em;
  31   border-bottom: 1px solid;
  32 }
  33
  34 #search { display: inline; }
  35
  36 a[href="#prefs"] {
  37   position: absolute;
  38   top: 0; right: .25em;
  39   font-size: 1.5em;
  40 }
  41
  42 a[href="#bookmarks"] {
  43   position: absolute;
  44   top: 0; left: .25em;
  45   font-size: 1.5em;
  46 }
  47
  48 a[href="#advsearch"] {
  49   margin-left: .5em;
  50 }
  51 a[href="#advsearch"]:before {
  52   content: '\25b8';
  53   margin: 0 .5em;
  54 }
  55
  56 #prefs:target {
  57   position: absolute;
  58   right: 0; width: 13em;
  59   margin-left: auto;
  60   margin-top: -1px;
  61   background-color: #333;
  62   border: 1px solid;
  63   border-top: none;
  64   border-right: none;
  65   padding: .5em 1em;
  66   z-index: 1;
  67   overflow: visible;
  68 }
  69
  70 #prefs:target a[href="#"] {
  71   display: block;
  72   position: relative;
  73   top: -1.5em; right: -.5em;
  74   margin-left: 4em;
  75   text-align: right;
  76   font-size: 1.5em;
  77   padding: 0 .25em;
  78   background-color: #333;
  79   z-index: 1;
  80 }
  81
  82 #prefs label[for=prefs_ps] {
  83   font-weight: bold;
  84 }
  85 #prefs #prefs_ps {
  86   max-width: 3em;
  87   margin-bottom: 1em;
  88 }
  89 #prefs button {
  90   margin-top: 1em;
  91 }
  92 #prefs input { vertical-align: top; }
  93 #prefs input[type=radio] + label,
  94 #prefs input[type=checkbox] + label {
  95   display: inline-block;
  96   margin-bottom: .5em;
  97   max-width: 85%;
  98 }
  99
 100 .list {
 101   position: relative;
 102   display: inline-block;
 103   width: 25%;
 104   min-width: 250px;
 105   padding: .25em;
 106   overflow: none;
 107   word-wrap: break-word;
 108   vertical-align: top;
 109   color: black;
 110   overflow: hidden;
 111 }
 112 .list.dir {
 113   padding: .5em 1em;
 114 }
 115
 116 .list:before {
 117   position: absolute;
 118   top: .25em; left: .25em;
 119   bottom: .25em; right: .25em;
 120   z-index: -2;
 121   content: '';
 122 }
 123 .list.dir:before { background-color: #CCF; }
 124 .list.file:before { background-color: #FDD; }
 125 .list.file:first-of-type { clear: left; }
 126
 127 .list.file a img{
 128   display: block;
 129   width: 100%;
 130   min-height: 4em;
 131 }
 132 .list.file a label{
 133   position: absolute;
 134   top: 0; padding: .25em .5em;
 135   color: white;
 136   background-color: rgba(0,0,0,.625);
 137 }
 138
 139 .list.file .time,
 140 .list.file .dim,
 141 .list.file .tag,
 142 .list.file label {
 143   display: inline-block;
 144   margin-top: .125em;
 145 }
 146 .list.file .time,
 147 .list.file .dim {
 148   color: white;
 149   background-color: #004;
 150   padding: .125em .5em;
 151 }
 152 .list.file .tag {
 153   color: white;
 154   background-color: #400;
 155   padding: .125em .5em;
 156 }
 157
 158 .list.file input[type="checkbox"] { display: none; }
 159 .list.file input[type="checkbox"] + label {
 160   border: 1px solid;
 161   border-radius: .125em;
 162   padding: 0 .25em;
 163   background-color: #FBB;
 164 }
 165 .list.file input[type="checkbox"]:checked + label {
 166   background-color: #4F4;
 167 }
 168
 169 .pagination {
 170   display: block;
 171   text-align: center;
 172   margin-top: 1em;
 173 }
 174 .page {
 175   display: inline-block;
 176   padding: .25em .5em;
 177   color: black;
 178   background-color: #FDD;
 179   border: 1px solid;
 180   margin: 0 .125em;
 181 }
 182
 183 #editing {
 184   text-align: left;
 185   width: 100%;
 186   background-color: #333;
 187   border-top: 1px solid;
 188   padding: .25em;
 189 }
 190
 191 #index label:first-of-type { font-weight: bold; }
 192 #index input, #index button { margin-left: 1em;}
 193
 194 #multitag:target a[href="#"] {
 195   position: relative;
 196   top: -1em;
 197   padding-right: 10em;
 198   background-color: #333;
 199 }
 200 #multitag fieldset{
 201   display: inline-block;
 202   width: 25%; min-width: 250px;
 203   vertical-align: top;
 204   padding: 0 .25em;
 205   border: none;
 206 }
 207 #multitag fieldset * { width: 100%; }
 208 #multitag fieldset button { width: 50%; }