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 }
  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 .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 .modfolder:before {
  65   display: block;
  66   content: '';
  67   border: 1px solid black;
  68   border-radius: 0 0 .5em .5em;
  69   border-top: 0px;
  70   top: 1.75em; bottom: .125em; left: .5%; right: .5%;
  71   position: absolute;
  72   background-color: white;
  73   z-index: -1;
  74 }
  75 .modfolder + *: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 .modfolder > * { word-spacing: 0; }
  82
  83 .modfolder > h1 {
  84   background-color: transparent;
  85   text-align: left;
  86   font-weight: bold;
  87   padding-left: .25em;
  88 }
  89
  90 .modfolder > .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 .modfolder > label.tab { border-bottom: 0px; }
  98 .modfolder > a.tab { background-color: #EEE; }
  99
 100 .modfolder > label:nth-of-type(2),
 101 .modfolder > select,
 102 .modfolder > input {
 103   display: block;
 104   float: left;
 105   text-align: left;
 106   margin: 1em 0 0 1em;
 107 }
 108 .modfolder > label:nth-of-type(2){
 109   font-weight: bold;
 110 }
 111 .modfolder > select {
 112   width: 10em;
 113   max-width: 95%;
 114 }
 115 .modfolder > input {
 116   width: 28em;
 117   max-width: 95%;
 118 }
 119 .modfolder > button {
 120   display: inline-block;
 121   float: right;
 122   margin: 1.5em .5em .5em .5em;
 123   padding: 0 .5em;
 124   clear: left;
 125 }
 126
 127 .bookmark {
 128   width: 16em;
 129   display: inline-block;
 130   margin: .5em 1em;
 131 }
 132
 133 .bookmark > a.modify {
 134   display: inline-block;
 135   color: transparent;
 136   width: .75em;
 137 }
 138 .bookmark > a.modify:before {
 139   content: '\2699';
 140   color: #333;
 141 }
 142
 143 .bookmark > a.link >  img {
 144   height: 1.25em;
 145   vertical-align: text-bottom;
 146   margin: 0 .5ex;
 147 }
 148
 149 form.newbookmark,
 150 form.modbookmark {
 151   margin: .5em 1em;
 152   break-inside: avoid;
 153 }