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: 30em;
  51   min-width: 240px;
  52   min-height: 3em;
  53   left: 50%; top: 20%;
  54   margin: -3em -15em;
  55   text-align: center;
  56   z-index: 10;
  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 }
  81 .dialog > * { word-spacing: 0; }
  82
  83 .dialog > h1 {
  84   background-color: transparent;
  85   text-align: left;
  86   font-weight: bold;
  87   padding-left: .25em;
  88 }
  89
  90 .dialog > .tab {
  91   display: inline-block;
  92   width: 33%;
  93   padding: .25em;
  94   border: 1px solid black;
  95   border-radius: .5em .5em 0 0;
  96 }
  97 .dialog.modbookmark > .tab {
  98   width: 49.5%;
  99 }
 100 .dialog > label.tab { border-bottom: 0px; }
 101 .dialog > a.tab { background-color: #EEE; }
 102
 103 .newbookmark > label,
 104 .dialog > label:nth-of-type(2),
 105 .dialog > label:nth-of-type(3),
 106 .dialog > select,
 107 .modfolder > input {
 108   display: block;
 109   float: left;
 110   text-align: left;
 111   margin: 1em 0 0 1em;
 112 }
 113 .newbookmark > label,
 114 .dialog > label:nth-of-type(3),
 115 .dialog > label:nth-of-type(2) {
 116   clear: left;
 117   font-weight: bold;
 118 }
 119 .dialog > select {
 120   width: 10em;
 121   max-width: 95%;
 122 }
 123 .dialog > input {
 124   width: 28em;
 125   max-width: 95%;
 126 }
 127 .modbookmark > select,
 128 .dialog > button {
 129   display: inline-block;
 130   float: right;
 131   margin: 1.5em .5em .5em .5em;
 132   padding: 0 .5em;
 133   clear: left;
 134 }
 135
 136 .bookmark {
 137   position: relative;
 138   width: 16em;
 139   display: inline-block;
 140   margin: .5em 1em;
 141   white-space: nowrap;
 142 }
 143
 144 .bookmark > a.modify {
 145   display: inline-block;
 146   color: transparent;
 147   width: .75em;
 148 }
 149 .bookmark > a.modify:before {
 150   content: '\2699';
 151   color: #333;
 152 }
 153 .bookmark > a.bmove {
 154   display: none;
 155   color: transparent;
 156   overflow: hidden;
 157   vertical-align: top;
 158   font-size: 0;
 159 }
 160 .bookmark:hover { left: -1em; padding-left: 1em; }
 161 .bookmark:hover > a.bmove { display: inline-block; }
 162 .bookmark > a.bmove:before { color: #888; font-size: medium; }
 163 .bookmark > a.bmove:nth-last-of-type(2) { position: absolute; left: 0; }
 164 .bookmark > a.bmove:nth-last-of-type(2):before { content: '\25c0'; }
 165 .bookmark > a.bmove:nth-last-of-type(1):before { content: '\25b6'; }
 166
 167 .bookmark img {
 168   height: 1.25em;
 169   vertical-align: text-bottom;
 170   margin: 0 .5ex;
 171 }
 172
 173 footer {
 174   position: absolute; bottom: 0;
 175   display: block;
 176   width: 100%;
 177   padding: 1em;
 178   background-color: white;
 179   border-top: 1px solid black;
 180 }