BookStack Code Mirror - bookstack/blob - resources/sass/_blocks.scss

   1
   2 /**
   3  * Callouts
   4  */
   5 .callout {
   6   border-inline-start: 3px solid #BBB;
   7   background-color: #EEE;
   8   padding: $-s $-s $-s $-xl;
   9   display: block;
  10   position: relative;
  11   overflow: auto;
  12   &:before {
  13     background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMwMTUzODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bTEgMTVoLTJ2LTZoMnY2em0wLThoLTJWN2gydjJ6Ii8+PC9zdmc+');
  14     background-repeat: no-repeat;
  15     content: '';
  16     width: 1.2em;
  17     height: 1.2em;
  18     left: $-xs + 2px;
  19     top: 50%;
  20     margin-top: -9px;
  21     display: inline-block;
  22     position: absolute;
  23     line-height: 1;
  24     opacity: 0.8;
  25   }
  26   &.success {
  27     border-left-color: $positive;
  28     @include lightDark(background-color, lighten($positive, 68%), darken($positive, 22%));
  29     @include lightDark(color, darken($positive, 16%), lighten($positive, 5%));
  30   }
  31   &.success:before {
  32     background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMzNzZjMzkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bS0yIDE1bC01LTUgMS40MS0xLjQxTDEwIDE0LjE3bDcuNTktNy41OUwxOSA4bC05IDl6Ii8+PC9zdmc+");
  33   }
  34   &.danger {
  35     border-left-color: $negative;
  36     @include lightDark(background-color, lighten($negative, 56%), darken($negative, 30%));
  37     @include lightDark(color, darken($negative, 20%), lighten($negative, 5%));
  38   }
  39   &.danger:before {
  40     background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiOTE4MTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0xNS43MyAzSDguMjdMMyA4LjI3djcuNDZMOC4yNyAyMWg3LjQ2TDIxIDE1LjczVjguMjdMMTUuNzMgM3pNMTIgMTcuM2MtLjcyIDAtMS4zLS41OC0xLjMtMS4zIDAtLjcyLjU4LTEuMyAxLjMtMS4zLjcyIDAgMS4zLjU4IDEuMyAxLjMgMCAuNzItLjU4IDEuMy0xLjMgMS4zem0xLTQuM2gtMlY3aDJ2NnoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==");
  41   }
  42   &.info {
  43     border-left-color: $info;
  44     @include lightDark(color, darken($info, 20%), lighten($info, 10%));
  45     @include lightDark(background-color, lighten($info, 50%), darken($info, 35%));
  46   }
  47   &.warning {
  48     border-left-color: $warning;
  49     @include lightDark(background-color, lighten($warning, 50%), darken($warning, 36%));
  50     @include lightDark(color, darken($warning, 20%), $warning);
  51   }
  52   &.warning:before {
  53     background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiNjUzMWMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEgMjFoMjJMMTIgMiAxIDIxem0xMi0zaC0ydi0yaDJ2MnptMC00aC0ydi00aDJ2NHoiLz48L3N2Zz4=");
  54   }
  55   a {
  56     color: inherit;
  57     text-decoration: underline;
  58   }
  59 }
  60
  61 /**
  62  * Card-style blocks
  63  */
  64
  65 .card {
  66   @include lightDark(background-color, #FFF, #222);
  67   box-shadow: $bs-card;
  68   border-radius: 3px;
  69   .body, p.empty-text {
  70     padding: $-m;
  71   }
  72   a, p {
  73     word-wrap: break-word;
  74     word-break: break-word;
  75   }
  76 }
  77
  78 .card-title {
  79   padding: $-m $-m $-xs;
  80   margin: 0;
  81   font-size: $fs-m;
  82   color: #222;
  83   fill: #222;
  84   font-weight: 400;
  85 }
  86 .card-title a {
  87   line-height: 1;
  88 }
  89 .card-footer-link, button.card-footer-link  {
  90   display: block;
  91   padding: $-s $-m;
  92   line-height: 1;
  93   border-top: 1px solid;
  94   width: 100%;
  95   text-align: left;
  96   @include lightDark(border-color, #DDD, #555);
  97   border-radius: 0 0 3px 3px;
  98   font-size: 0.9em;
  99   margin-top: $-xs;
 100   &:hover {
 101     text-decoration: none;
 102     @include lightDark(background-color, #f2f2f2, #2d2d2d);
 103   }
 104 }
 105
 106 .card.border-card {
 107   border: 1px solid #DDD;
 108 }
 109
 110 .card.drag-card {
 111   border: 1px solid #DDD;
 112   @include lightDark(border-color, #ddd, #000);
 113   @include lightDark(background-color, #fff, #333);
 114   border-radius: 4px;
 115   display: flex;
 116   padding: 0 0 0 ($-s + 28px);
 117   margin: $-s 0;
 118   position: relative;
 119   .drag-card-action {
 120     cursor: pointer;
 121   }
 122   .handle, .drag-card-action {
 123     display: flex;
 124     align-items: center;
 125     text-align: center;
 126     justify-content: center;
 127     width: 28px;
 128     flex-grow: 0;
 129     padding: 0 $-xs;
 130     &:hover {
 131       background-color: #EEE;
 132     }
 133     .svg-icon {
 134       margin-inline-end: 0px;
 135     }
 136   }
 137   .outline input {
 138     margin: $-s 0;
 139     width: 100%;
 140   }
 141   .outline {
 142     position: relative;
 143   }
 144   .handle {
 145     @include lightDark(background-color, #eee, #2d2d2d);
 146     left: 0;
 147     position: absolute;
 148     top: 0;
 149     bottom: 0;
 150   }
 151   > div {
 152     padding: 0 $-s;
 153     max-width: 80%;
 154     flex: 1;
 155   }
 156 }
 157
 158 .grid-card {
 159   display: flex;
 160   flex-direction: column;
 161   border: 1px solid #ddd;
 162   @include lightDark(border-color, #ddd, #000);
 163   margin-bottom: $-l;
 164   border-radius: 4px;
 165   overflow: hidden;
 166   min-width: 100px;
 167   color: $text-dark;
 168   transition: border-color ease-in-out 120ms, box-shadow ease-in-out 120ms;
 169   &:hover {
 170     color: $text-dark;
 171     text-decoration: none;
 172     @include lightDark(box-shadow, $bs-card, $bs-card-dark);
 173   }
 174   h2 {
 175     width: 100%;
 176     font-size: 1.5em;
 177     margin: 0 0 10px;
 178   }
 179   p {
 180     font-size: .7rem;
 181     margin: 0;
 182     line-height: 1.6em;
 183   }
 184   .grid-card-content {
 185     flex: 1;
 186     border-top: 0;
 187     border-bottom-width: 2px;
 188   }
 189   .grid-card-content, .grid-card-footer {
 190     padding: $-l;
 191   }
 192   .grid-card-content + .grid-card-footer {
 193     padding-top: 0;
 194   }
 195 }
 196
 197 .book-grid-item .grid-card-footer {
 198   p.small {
 199     font-size: .8em;
 200     margin: 0;
 201   }
 202 }
 203
 204 .content-wrap.card {
 205   padding: $-m $-xxl;
 206   margin-inline-start: auto;
 207   margin-inline-end: auto;
 208   margin-bottom: $-l;
 209   overflow: initial;
 210   min-height: 60vh;
 211   &.auto-height {
 212     min-height: 0;
 213   }
 214   &.fill-width {
 215     width: 100%;
 216   }
 217 }
 218 @include smaller-than($xxl) {
 219   .content-wrap.card {
 220     padding: $-m $-xl;
 221   }
 222 }
 223 @include smaller-than($m) {
 224   .content-wrap.card {
 225     padding: $-m $-l;
 226   }
 227 }
 228 @include smaller-than($s) {
 229   .content-wrap.card {
 230     padding: $-m $-m;
 231   }
 232 }
 233
 234 .outline-hover {
 235   border: 1px solid transparent !important;
 236   &:hover {
 237     border: 1px solid rgba(0, 0, 0, 0.1) !important;
 238   }
 239 }
 240
 241 .fade-in-when-active {
 242   @include lightDark(opacity, 0.6, 0.7);
 243   transition: opacity ease-in-out 120ms;
 244   &:hover, &:focus-within {
 245     opacity: 1 !important;
 246   }
 247   @media (prefers-contrast: more) {
 248     opacity: 1 !important;
 249   }
 250 }
 251
 252 /**
 253  * Tags
 254  */
 255 .tag-item {
 256   display: inline-flex;
 257   margin-bottom: $-xs;
 258   margin-inline-end: $-xs;
 259   border-radius: 4px;
 260   border: 1px solid;
 261   overflow: hidden;
 262   font-size: 0.85em;
 263   @include lightDark(border-color, #CCC, #666);
 264   a, span, a:hover, a:active {
 265     padding: 4px 8px;
 266     @include lightDark(color, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.8));
 267     transition: background-color ease-in-out 80ms;
 268     text-decoration: none;
 269   }
 270   a:hover {
 271     @include lightDark(background-color, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
 272   }
 273   svg {
 274     @include lightDark(fill, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5));
 275   }
 276   .tag-value {
 277     border-inline-start: 1px solid;
 278     @include lightDark(border-color, #DDD, #666);
 279     @include lightDark(background-color, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2))
 280   }
 281 }
 282
 283 .tag-name.highlight, .tag-value.highlight {
 284   font-weight: bold;
 285 }
 286
 287 .tag-list div:last-child .tag-item {
 288   margin-bottom: 0;
 289 }
 290
 291 .item-list-row .tag-item {
 292   margin-bottom: 0;
 293 }
 294
 295 /**
 296  * API Docs
 297  */
 298 .api-method {
 299   font-size: 0.75rem;
 300   background-color: #888;
 301   padding: $-xs;
 302   line-height: 1.3;
 303   opacity: 0.7;
 304   vertical-align: top;
 305   border-radius: 3px;
 306   color: #FFF;
 307   display: inline-block;
 308   min-width: 60px;
 309   text-align: center;
 310   font-weight: bold;
 311   &[data-method="GET"] { background-color: #077b70 }
 312   &[data-method="POST"] { background-color: #cf4d03 }
 313   &[data-method="PUT"] { background-color: #0288D1 }
 314   &[data-method="DELETE"] { background-color: #ab0f0e }
 315 }
 316
 317 .sticky-sidebar {
 318   position: sticky;
 319   top: $-m;
 320   max-height: calc(100vh - #{$-m});
 321   overflow-y: auto;
 322 }