BookStack Code Mirror - bookstack/blob - resources/assets/sass/_pages.scss

   1 #page-show {
   2   >.row .col-md-9 {
   3     z-index: 2;
   4   }
   5   >.row .col-md-3 {
   6     z-index: 1;
   7   }
   8 }
   9
  10 .page-editor {
  11   display: flex;
  12   flex-direction: column;
  13   align-items: stretch;
  14   .faded-small {
  15     height: auto;
  16   }
  17   .edit-area {
  18     flex: 1;
  19     flex-direction: column;
  20   }
  21 }
  22
  23 .draft-notification {
  24   pointer-events: none;
  25   transform: scale(0);
  26   transition: transform ease-in-out 120ms;
  27   transform-origin: 50% 50%;
  28   &.visible {
  29     transform: scale(1);
  30   }
  31 }
  32
  33 .page-style.editor {
  34   padding: 0 !important;
  35 }
  36
  37 .page-content {
  38   max-width: 840px;
  39   overflow-wrap: break-word;
  40   .align-left {
  41     text-align: left;
  42   }
  43   img.align-left, table.align-left {
  44     float: left !important;
  45     margin: $-xs $-s $-xs 0;
  46   }
  47   .align-right {
  48     float: right !important;
  49   }
  50   img.align-right, table.align-right {
  51     text-align: right;
  52     margin: $-xs 0 $-xs $-s;
  53   }
  54   .align-center {
  55     text-align: center;
  56   }
  57   img {
  58     max-width: 100%;
  59     height:auto;
  60   }
  61   h1, h2, h3, h4, h5, h6, pre {
  62     clear: left;
  63   }
  64   hr {
  65     clear: both;
  66     margin: $-m 0;
  67   }
  68   table {
  69     hyphens: auto;
  70     table-layout: fixed;
  71     max-width: 100%;
  72     height: auto !important;
  73   }
  74
  75   // diffs
  76   ins,
  77   del {
  78     text-decoration: none;
  79   }
  80   ins {
  81     background: #dbffdb;
  82   }
  83   del {
  84     background: #FFECEC;
  85   }
  86 }
  87
  88 // Page content pointers
  89 .pointer-container {
  90   position: relative;
  91   display: none;
  92   left: 0;
  93   z-index: 10;
  94 }
  95 .pointer {
  96   border: 1px solid #CCC;
  97   display: inline-block;
  98   padding: $-s $-s;
  99   border-radius: 4px;
 100   box-shadow: 0 0 8px 1px rgba(212, 209, 209, 0.35);
 101   position: absolute;
 102   top: -60px;
 103   background-color:#FFF;
 104   width: 272px;
 105   z-index: 55;
 106   &:before {
 107     position: absolute;
 108     left: 50%;
 109     bottom: -9px;
 110     width: 16px;
 111     height: 16px;
 112     margin-left: -8px;
 113     content: '';
 114     display: block;
 115     background-color:#FFF;
 116     transform: rotate(45deg);
 117     transform-origin: 50% 50%;
 118     border-bottom: 1px solid #CCC;
 119     border-right: 1px solid #CCC;
 120     z-index: 56;
 121   }
 122   input {
 123     background-color: #FFF;
 124     border: 1px solid #DDD;
 125     color: #666;
 126     width: 172px;
 127     z-index: 40;
 128   }
 129   input, button {
 130     position: relative;
 131     border-radius: 0;
 132     height: 28px;
 133     font-size: 12px;
 134     vertical-align: top;
 135   }
 136   > i {
 137     color: #888;
 138     font-size: 18px;
 139     padding-top: 4px;
 140   }
 141   .button {
 142     line-height: 1;
 143     margin: 0 0 0 -4px;
 144     box-shadow: none;
 145   }
 146 }
 147
 148 // Attribute form
 149 .floating-toolbox {
 150   background-color: #FFF;
 151   border: 1px solid #DDD;
 152   right: $-xl*2;
 153   z-index: 99;
 154   width: 48px;
 155   overflow: hidden;
 156   align-items: stretch;
 157   flex-direction: row;
 158   display: flex;
 159   transition: width ease-in-out 180ms;
 160   margin-top: -1px;
 161   min-height: 0px;
 162   &.open {
 163     width: 480px;
 164   }
 165   [toolbox-toggle] i {
 166     transition: transform ease-in-out 180ms;
 167   }
 168   [toolbox-toggle] {
 169     transition: background-color ease-in-out 180ms;
 170   }
 171   &.open [toolbox-toggle] {
 172     background-color: rgba(255, 0, 0, 0.29);
 173   }
 174   &.open [toolbox-toggle] i {
 175     transform: rotate(180deg);
 176   }
 177   > div {
 178     flex: 1;
 179     position: relative;
 180   }
 181   .tabs {
 182     display: block;
 183     border-right: 1px solid #DDD;
 184     width: 48px;
 185     flex: 0 1 auto;
 186   }
 187   .tabs i {
 188     color: rgba(0, 0, 0, 0.5);
 189     padding: 0;
 190     margin: 0;
 191   }
 192   .tabs > span {
 193     display: block;
 194     cursor: pointer;
 195     padding: $-s $-m;
 196     font-size: 13.5px;
 197     line-height: 1.6;
 198     border-bottom: 1px solid rgba(255, 255, 255, 0.3);
 199   }
 200   &.open .tabs > span.active {
 201     color: #444;
 202     background-color: rgba(0, 0, 0, 0.1);
 203   }
 204   div[tab-content] {
 205     padding-bottom: 45px;
 206     display: flex;
 207     flex: 1;
 208     flex-direction: column;
 209     min-height: 0px;
 210     overflow-y: scroll;
 211   }
 212   div[tab-content] .padded {
 213     flex: 1;
 214     padding-top: 0;
 215   }
 216   h4 {
 217     font-size: 24px;
 218     margin: $-m 0 0 0;
 219     padding: 0 $-l $-s $-l;
 220   }
 221   .tags input {
 222     max-width: 100%;
 223     width: 100%;
 224     min-width: 50px;
 225   }
 226   .tags td {
 227     padding-right: $-s;
 228     padding-top: $-s;
 229     position: relative;
 230   }
 231   .handle {
 232     user-select: none;
 233     cursor: move;
 234     color: #999;
 235   }
 236   form {
 237     display: flex;
 238     flex: 1;
 239     flex-direction: column;
 240     overflow-y: scroll;
 241   }
 242 }
 243
 244 [tab-content] {
 245   display: none;
 246 }
 247
 248 .tag-display {
 249   margin: $-xl $-m;
 250   border: 1px solid #DDD;
 251   min-width: 180px;
 252   max-width: 320px;
 253   opacity: 0.7;
 254   z-index: 5;
 255   position: relative;
 256   table {
 257     width: 100%;
 258     margin: 0;
 259     padding: 0;
 260   }
 261   .heading th {
 262     padding: $-xs $-s;
 263     color: #333;
 264     font-weight: 400;
 265   }
 266   td {
 267     border: 0;
 268     border-bottom: 1px solid #DDD;
 269     padding: $-xs $-s;
 270     color: #444;
 271   }
 272   .tag-value {
 273     color: #888;
 274   }
 275   tr:last-child td {
 276     border-bottom: none;
 277   }
 278   .tag {
 279     padding: $-s;
 280   }
 281 }
 282
 283 .suggestion-box {
 284   position: absolute;
 285   background-color: #FFF;
 286   border: 1px solid #BBB;
 287   box-shadow: $bs-light;
 288   list-style: none;
 289   z-index: 100;
 290   padding: 0;
 291   margin: 0;
 292   border-radius: 3px;
 293   li {
 294     display: block;
 295     padding: $-xs $-s;
 296     border-bottom: 1px solid #DDD;
 297     &:last-child {
 298       border-bottom: 0;
 299     }
 300     &.active {
 301       background-color: #EEE;
 302     }
 303   }
 304 }