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: $-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   &.auto-height {
 159     min-height: 0;
 160   }
 161   &.fill-width {
 162     width: 100%;
 163   }
 164 }
 165 @include smaller-than($xxl) {
 166   .content-wrap.card {
 167     padding: $-m $-xl;
 168   }
 169 }
 170 @include smaller-than($m) {
 171   .content-wrap.card {
 172     padding: $-m $-l;
 173   }
 174 }
 175 @include smaller-than($s) {
 176   .content-wrap.card {
 177     padding: $-m $-m;
 178   }
 179 }
 180
 181 .sub-card {
 182   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
 183   border: 1.5px solid;
 184   @include lightDark(border-color, #E2E2E2, #444);
 185   border-radius: 4px;
 186 }
 187
 188 .outline-hover {
 189   border: 1px solid transparent !important;
 190   &:hover {
 191     border: 1px solid rgba(0, 0, 0, 0.1) !important;
 192   }
 193 }
 194
 195 .fade-in-when-active {
 196   @include lightDark(opacity, 0.6, 0.7);
 197   transition: opacity ease-in-out 120ms;
 198   &:hover, &:focus-within {
 199     opacity: 1 !important;
 200   }
 201   @media (prefers-contrast: more) {
 202     opacity: 1 !important;
 203   }
 204 }
 205
 206 /**
 207  * Tags
 208  */
 209 .tag-item {
 210   display: inline-flex;
 211   margin-bottom: $-xs;
 212   margin-inline-end: $-xs;
 213   border-radius: 4px;
 214   border: 1px solid;
 215   overflow: hidden;
 216   font-size: 0.85em;
 217   @include lightDark(border-color, #CCC, #666);
 218   a, span, a:hover, a:active {
 219     padding: 4px 8px;
 220     @include lightDark(color, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.8));
 221     transition: background-color ease-in-out 80ms;
 222     text-decoration: none;
 223   }
 224   a:hover {
 225     @include lightDark(background-color, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
 226   }
 227   svg {
 228     @include lightDark(fill, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5));
 229   }
 230   .tag-value {
 231     border-inline-start: 1px solid;
 232     @include lightDark(border-color, #DDD, #666);
 233     @include lightDark(background-color, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2))
 234   }
 235 }
 236
 237 .tag-name.highlight, .tag-value.highlight {
 238   font-weight: bold;
 239 }
 240
 241 .tag-list div:last-child .tag-item {
 242   margin-bottom: 0;
 243 }
 244
 245 .item-list-row .tag-item {
 246   margin-bottom: 0;
 247 }
 248
 249 /**
 250  * API Docs
 251  */
 252 .api-method {
 253   font-size: 0.75rem;
 254   background-color: #888;
 255   padding: $-xs;
 256   line-height: 1.3;
 257   opacity: 0.7;
 258   vertical-align: top;
 259   border-radius: 3px;
 260   color: #FFF;
 261   display: inline-block;
 262   min-width: 60px;
 263   text-align: center;
 264   font-weight: bold;
 265   &[data-method="GET"] { background-color: #077b70 }
 266   &[data-method="POST"] { background-color: #cf4d03 }
 267   &[data-method="PUT"] { background-color: #0288D1 }
 268   &[data-method="DELETE"] { background-color: #ab0f0e }
 269 }
 270
 271 .sticky-sidebar {
 272   position: sticky;
 273   top: $-m;
 274   max-height: calc(100vh - #{$-m});
 275   overflow-y: auto;
 276 }