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   &:focus {
 105     @include lightDark(background-color, #eee, #222);
 106     outline: 1px dotted #666;
 107     outline-offset: -2px;
 108   }
 109 }
 110
 111 .card.border-card {
 112   border: 1px solid #DDD;
 113 }
 114
 115 .card.drag-card {
 116   border: 1px solid #DDD;
 117   @include lightDark(border-color, #ddd, #000);
 118   @include lightDark(background-color, #fff, #333);
 119   border-radius: 4px;
 120   display: flex;
 121   padding: 0 0 0 ($-s + 28px);
 122   margin: $-s 0;
 123   position: relative;
 124   .drag-card-action {
 125     cursor: pointer;
 126   }
 127   .handle, .drag-card-action {
 128     display: flex;
 129     align-items: center;
 130     text-align: center;
 131     justify-content: center;
 132     width: 28px;
 133     flex-grow: 0;
 134     padding: 0 $-xs;
 135     &:hover {
 136       background-color: #EEE;
 137     }
 138     .svg-icon {
 139       margin-inline-end: 0px;
 140     }
 141   }
 142   .outline input {
 143     margin: $-s 0;
 144     width: 100%;
 145   }
 146   .outline {
 147     position: relative;
 148   }
 149   .handle {
 150     @include lightDark(background-color, #eee, #2d2d2d);
 151     left: 0;
 152     position: absolute;
 153     top: 0;
 154     bottom: 0;
 155   }
 156   > div {
 157     padding: 0 $-s;
 158     max-width: 80%;
 159     flex: 1;
 160   }
 161 }
 162
 163 .grid-card {
 164   display: flex;
 165   flex-direction: column;
 166   border: 1px solid #ddd;
 167   @include lightDark(border-color, #ddd, #000);
 168   margin-bottom: $-l;
 169   border-radius: 4px;
 170   overflow: hidden;
 171   min-width: 100px;
 172   color: $text-dark;
 173   transition: border-color ease-in-out 120ms, box-shadow ease-in-out 120ms;
 174   &:hover {
 175     color: $text-dark;
 176     text-decoration: none;
 177     @include lightDark(box-shadow, $bs-card, $bs-card-dark);
 178   }
 179   h2 {
 180     width: 100%;
 181     font-size: 1.5em;
 182     margin: 0 0 10px;
 183   }
 184   p {
 185     font-size: .7rem;
 186     margin: 0;
 187     line-height: 1.6em;
 188   }
 189   .grid-card-content {
 190     flex: 1;
 191     border-top: 0;
 192     border-bottom-width: 2px;
 193   }
 194   .grid-card-content, .grid-card-footer {
 195     padding: $-l;
 196   }
 197   .grid-card-content + .grid-card-footer {
 198     padding-top: 0;
 199   }
 200 }
 201
 202 .book-grid-item .grid-card-footer {
 203   p.small {
 204     font-size: .8em;
 205     margin: 0;
 206   }
 207 }
 208
 209 .content-wrap.card {
 210   padding: $-m $-xxl;
 211   margin-inline-start: auto;
 212   margin-inline-end: auto;
 213   margin-bottom: $-l;
 214   overflow: initial;
 215   min-height: 60vh;
 216   &.auto-height {
 217     min-height: 0;
 218   }
 219   &.fill-width {
 220     width: 100%;
 221   }
 222 }
 223 @include smaller-than($xxl) {
 224   .content-wrap.card {
 225     padding: $-m $-xl;
 226   }
 227 }
 228 @include smaller-than($m) {
 229   .content-wrap.card {
 230     padding: $-m $-l;
 231   }
 232 }
 233 @include smaller-than($s) {
 234   .content-wrap.card {
 235     padding: $-m $-m;
 236   }
 237 }
 238
 239 .outline-hover {
 240   border: 1px solid transparent !important;
 241   &:hover {
 242     border: 1px solid rgba(0, 0, 0, 0.1) !important;
 243   }
 244 }
 245
 246 .fade-in-when-active {
 247   @include lightDark(opacity, 0.6, 0.7);
 248   transition: opacity ease-in-out 120ms;
 249   &:hover, &:focus-within {
 250     opacity: 1 !important;
 251   }
 252   @media (prefers-contrast: more) {
 253     opacity: 1 !important;
 254   }
 255 }
 256
 257 /**
 258  * Tags
 259  */
 260 .tag-item {
 261   display: inline-flex;
 262   margin-bottom: $-xs;
 263   margin-inline-end: $-xs;
 264   border-radius: 4px;
 265   border: 1px solid;
 266   overflow: hidden;
 267   font-size: 0.85em;
 268   @include lightDark(border-color, #CCC, #666);
 269   a, span, a:hover, a:active {
 270     padding: 4px 8px;
 271     @include lightDark(color, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.8));
 272     transition: background-color ease-in-out 80ms;
 273     text-decoration: none;
 274   }
 275   a:hover {
 276     @include lightDark(background-color, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
 277   }
 278   svg {
 279     @include lightDark(fill, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5));
 280   }
 281   .tag-value {
 282     border-inline-start: 1px solid;
 283     @include lightDark(border-color, #DDD, #666);
 284     @include lightDark(background-color, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2))
 285   }
 286 }
 287
 288 .tag-name.highlight, .tag-value.highlight {
 289   font-weight: bold;
 290 }
 291
 292 .tag-list div:last-child .tag-item {
 293   margin-bottom: 0;
 294 }
 295
 296 .item-list-row .tag-item {
 297   margin-bottom: 0;
 298 }
 299
 300 /**
 301  * API Docs
 302  */
 303 .api-method {
 304   font-size: 0.75rem;
 305   background-color: #888;
 306   padding: $-xs;
 307   line-height: 1.3;
 308   opacity: 0.7;
 309   vertical-align: top;
 310   border-radius: 3px;
 311   color: #FFF;
 312   display: inline-block;
 313   min-width: 60px;
 314   text-align: center;
 315   font-weight: bold;
 316   &[data-method="GET"] { background-color: #077b70 }
 317   &[data-method="POST"] { background-color: #cf4d03 }
 318   &[data-method="PUT"] { background-color: #0288D1 }
 319   &[data-method="DELETE"] { background-color: #ab0f0e }
 320 }
 321
 322 .sticky-sidebar {
 323   position: sticky;
 324   top: $-m;
 325   max-height: calc(100vh - #{$-m});
 326   overflow-y: auto;
 327 }