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

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