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

   1 * { /* RESET */
   2   font-size: 12pt;
   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   #column-width: 16em;
  25   #column-rule: 1px solid #BBB;
  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   #column-span: all;
  37 }
  38
  39 .folder > h1 + a {
  40   display: block;
  41   position: relative;
  42   top: -1.5em;
  43   margin-left: 1em;
  44   color: transparent;
  45   background-color: transparent;
  46   width: 0; height: 0;
  47 }
  48 .folder > h1 + a:before {
  49   content: '\2699';
  50   color: #333;
  51 }
  52
  53 .modfolder {
  54   display: block;
  55   position: fixed;
  56   left: 50%; margin: 0 -15em;
  57   vertical-align: middle;
  58   text-align: center;
  59   width: 30em;
  60   min-width: 240px;
  61   z-index: 3;
  62   border-radius: .5em;
  63   border: 1px solid black;
  64   padding: .125em 0;
  65   min-height: 3em;
  66   background-color: #ACF;
  67 }
  68 .modfolder:before {
  69   display: block;
  70   content: '';
  71   border: 1px solid black;
  72   border-radius: 0 0 .5em .5em;
  73   border-top: 0px;
  74   top: 1.75em; bottom: .125em; left: .5%; right: .5%;
  75   position: absolute;
  76   background-color: white;
  77   z-index: -1;
  78 }
  79 .modfolder + *:after {
  80   content: ' ';
  81   position: fixed;
  82   top: 0; bottom: 0; left: 0; right: 0;
  83   background-color: rgba(0,0,0,.5);
  84 }
  85
  86 .modfolder > label,
  87 .modfolder > a {
  88   display: inline-block;
  89   width: 33%;
  90   padding: .25em;
  91   border: 1px solid black;
  92   border-radius: .5em .5em 0 0;
  93 }
  94 .modfolder > label { border-bottom: 0px; }
  95 .modfolder > a { background-color: #EEE; }
  96
  97 .modfolder > input {
  98   display: block;
  99   width: 28em;
 100   max-width: 95%;
 101   margin: 1em;
 102 }
 103 .modfolder > button {
 104   display: inline-block;
 105   float: right;
 106   margin: .5em;
 107   padding: 0 .5em;
 108 }
 109
 110 .bookmark {
 111   width: 16em;
 112   display: inline-block;
 113   margin: .5em 1em;
 114 }
 115
 116 .bookmark > a.modify {
 117   font-size: 0;
 118   color: white;
 119 }
 120 .bookmark > a.modify:before {
 121   content: '\2699';
 122   color: #333;
 123   font-size: initial;
 124 }
 125
 126 .bookmark > a.link >  img {
 127   height: 1.25em;
 128   vertical-align: text-bottom;
 129   margin: 0 .5ex;
 130 }
 131
 132 form.newbookmark,
 133 form.modbookmark {
 134   margin: .5em 1em;
 135   break-inside: avoid;
 136 }