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