git.plutz.net Git - bookman/blob - bookmarks.css

   1 * { /* RESET */
   2   font-size: medium;
   3   margin: 0;
   4   padding: 0;
   5   text-decoration: none;
   6   font-weight: normal;
   7   color: black;
   8   background-color: white;
   9   box-sizing: border-box;
  10 }
  11
  12 html, body { background-color: #DDD; }
  13 body { position: absolute; width: 100%; min-height: 100%; }
  14
  15 .folder, form.newfolder{
  16   display: block;
  17   width: 98%;
  18   border: 1px solid black;
  19   border-radius: .5em;
  20   margin: 1em auto;
  21   padding: 0;
  22   overflow: hidden;
  23 }
  24 form.newfolder{
  25   margin-bottom: 3em;
  26 }
  27
  28 .folder > h1 {
  29   font-size: 1.25em;
  30   font-weight: bold;
  31   padding: .125em 1em .125em 2em;
  32   border-bottom: 1px solid black;
  33   background-color: #ACF;
  34   border-radius: .375em .375em 0 0;
  35   min-height: 1em;
  36 }
  37 .folder > h1 + a {
  38   display: block;
  39   position: relative;
  40   top: -1.5em;
  41   margin-left: 1em;
  42   color: transparent;
  43   width: 0; height: 0;
  44 }
  45 .folder > h1 + a:before {
  46   content: '\2699';
  47   color: #333;
  48 }
  49
  50 .dialog {
  51   display: block;
  52   position: fixed;
  53   width: 30%;
  54   min-width: 320px;
  55   min-height: 3em;
  56   left: 50%;
  57   margin-left: -160px;
  58   text-align: center;
  59   z-index: 2;
  60   border-radius: .5em;
  61   border: 1px solid black;
  62   padding: .125em 0;
  63   background-color: #ACF;
  64   word-spacing: -.5ex;
  65 }
  66 .dialog:before {
  67   display: block;
  68   content: '';
  69   border: 1px solid black;
  70   border-radius: 0 0 .5em .5em;
  71   border-top: 0px;
  72   top: 1.75em; bottom: .125em; left: .5%; right: .5%;
  73   position: absolute;
  74   background-color: white;
  75   z-index: -1;
  76 }
  77 .newbookmark:before { border-top: 1px solid; }
  78 .dialog + *:after {
  79   content: ' ';
  80   position: fixed;
  81   top: 0; bottom: 0; left: 0; right: 0;
  82   background-color: rgba(0,0,0,.5);
  83   z-index: 1;
  84 }
  85 .dialog > * { word-spacing: 0; }
  86
  87 .dialog > h1 {
  88   background-color: transparent;
  89   text-align: left;
  90   font-weight: bold;
  91   padding-left: .25em;
  92 }
  93
  94 .dialog > .tab {
  95   display: inline-block;
  96   width: 33%;
  97   padding: .25em;
  98   border: 1px solid black;
  99   border-radius: .5em .5em 0 0;
 100 }
 101 .dialog.modbookmark > .tab {
 102   width: 49.5%;
 103 }
 104 .dialog > label.tab { border-bottom: 0px; }
 105 .dialog > a.tab { background-color: #EEE; }
 106
 107 .newbookmark > label,
 108 .dialog > label:nth-of-type(2),
 109 .dialog > label:nth-of-type(3),
 110 .dialog > select,
 111 .modfolder > input {
 112   display: block;
 113   float: left;
 114   text-align: left;
 115   margin: 1em 0 0 1em;
 116 }
 117 .newbookmark > label,
 118 .dialog > label:nth-of-type(3),
 119 .dialog > label:nth-of-type(2) {
 120   clear: left;
 121   font-weight: bold;
 122 }
 123 .dialog > select {
 124   width: 10em;
 125   max-width: 95%;
 126 }
 127 .dialog > input {
 128   width: 28em;
 129   max-width: 95%;
 130 }
 131 .modbookmark > select,
 132 .dialog > button {
 133   display: inline-block;
 134   float: right;
 135   margin: 1.5em .5em .5em .5em;
 136   padding: 0 .5em;
 137   clear: left;
 138 }
 139
 140 .bookmark {
 141   position: relative;
 142   width: 16em;
 143   display: inline-block;
 144   margin: .5em 1em;
 145   white-space: nowrap;
 146 }
 147
 148 .bookmark > a.modify {
 149   display: inline-block;
 150   color: transparent;
 151   width: .75em;
 152 }
 153 .bookmark > a.modify:before {
 154   content: '\2699';
 155   color: #333;
 156 }
 157 .bookmark > a.bmove {
 158   display: none;
 159   color: transparent;
 160   overflow: hidden;
 161   vertical-align: top;
 162   font-size: 0;
 163 }
 164 .bookmark:hover { left: -1em; padding-left: 1em; }
 165 .bookmark:hover > a.bmove { display: inline-block; }
 166 .bookmark > a.bmove:before { color: #888; font-size: medium; }
 167 .bookmark > a.bmove:nth-last-of-type(2) { position: absolute; left: 0; }
 168 .bookmark > a.bmove:nth-last-of-type(2):before { content: '\25c0'; }
 169 .bookmark > a.bmove:nth-last-of-type(1):before { content: '\25b6'; }
 170
 171 .bookmark img {
 172   height: 1.25em;
 173   vertical-align: text-bottom;
 174   margin: 0 .5ex;
 175 }
 176
 177 footer {
 178   position: absolute; bottom: 0;
 179   display: block;
 180   width: 100%;
 181   padding: .5em 1em;
 182   background-color: white;
 183   border-top: 1px solid black;
 184 }