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

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