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