mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-26 12:16:07 +00:00
![Dan Brown](/assets/img/avatar_default.png)
Forces browser colorscheme based on BookStack color scheme, via 'color-scheme' css property. Sets proper dark mode colors for some previously missed areas like templates and attachment control buttons. Also fixed search bar icon position for some search inputs.
329 lines
8.1 KiB
SCSS
329 lines
8.1 KiB
SCSS
|
|
/**
|
|
* Callouts
|
|
*/
|
|
.callout {
|
|
border-inline-start: 3px solid #BBB;
|
|
background-color: #EEE;
|
|
padding: $-s $-s $-s $-xl;
|
|
display: block;
|
|
position: relative;
|
|
overflow: auto;
|
|
&:before {
|
|
background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMwMTUzODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bTEgMTVoLTJ2LTZoMnY2em0wLThoLTJWN2gydjJ6Ii8+PC9zdmc+');
|
|
background-repeat: no-repeat;
|
|
content: '';
|
|
width: 1.2em;
|
|
height: 1.2em;
|
|
left: $-xs + 2px;
|
|
top: 50%;
|
|
margin-top: -9px;
|
|
display: inline-block;
|
|
position: absolute;
|
|
line-height: 1;
|
|
opacity: 0.8;
|
|
}
|
|
&.success {
|
|
border-left-color: $positive;
|
|
@include lightDark(background-color, lighten($positive, 68%), darken($positive, 22%));
|
|
@include lightDark(color, darken($positive, 16%), lighten($positive, 5%));
|
|
}
|
|
&.success:before {
|
|
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMzNzZjMzkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bS0yIDE1bC01LTUgMS40MS0xLjQxTDEwIDE0LjE3bDcuNTktNy41OUwxOSA4bC05IDl6Ii8+PC9zdmc+");
|
|
}
|
|
&.danger {
|
|
border-left-color: $negative;
|
|
@include lightDark(background-color, lighten($negative, 56%), darken($negative, 30%));
|
|
@include lightDark(color, darken($negative, 20%), lighten($negative, 5%));
|
|
}
|
|
&.danger:before {
|
|
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiOTE4MTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0xNS43MyAzSDguMjdMMyA4LjI3djcuNDZMOC4yNyAyMWg3LjQ2TDIxIDE1LjczVjguMjdMMTUuNzMgM3pNMTIgMTcuM2MtLjcyIDAtMS4zLS41OC0xLjMtMS4zIDAtLjcyLjU4LTEuMyAxLjMtMS4zLjcyIDAgMS4zLjU4IDEuMyAxLjMgMCAuNzItLjU4IDEuMy0xLjMgMS4zem0xLTQuM2gtMlY3aDJ2NnoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==");
|
|
}
|
|
&.info {
|
|
border-left-color: $info;
|
|
@include lightDark(color, darken($info, 20%), lighten($info, 10%));
|
|
@include lightDark(background-color, lighten($info, 50%), darken($info, 35%));
|
|
}
|
|
&.warning {
|
|
border-left-color: $warning;
|
|
@include lightDark(background-color, lighten($warning, 50%), darken($warning, 36%));
|
|
@include lightDark(color, darken($warning, 20%), $warning);
|
|
}
|
|
&.warning:before {
|
|
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiNjUzMWMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEgMjFoMjJMMTIgMiAxIDIxem0xMi0zaC0ydi0yaDJ2MnptMC00aC0ydi00aDJ2NHoiLz48L3N2Zz4=");
|
|
}
|
|
a {
|
|
color: inherit;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Card-style blocks
|
|
*/
|
|
|
|
.card {
|
|
@include lightDark(background-color, #FFF, #222);
|
|
box-shadow: $bs-card;
|
|
border-radius: 3px;
|
|
.body, p.empty-text {
|
|
padding: $-m;
|
|
}
|
|
a, p {
|
|
word-wrap: break-word;
|
|
word-break: break-word;
|
|
}
|
|
}
|
|
|
|
.card-title {
|
|
padding: $-m $-m $-xs;
|
|
margin: 0;
|
|
font-size: $fs-m;
|
|
color: #222;
|
|
fill: #222;
|
|
font-weight: 400;
|
|
}
|
|
.card-title a {
|
|
line-height: 1;
|
|
}
|
|
.card-footer-link, button.card-footer-link {
|
|
display: block;
|
|
padding: $-s $-m;
|
|
line-height: 1;
|
|
border-top: 1px solid;
|
|
width: 100%;
|
|
text-align: left;
|
|
@include lightDark(border-color, #DDD, #555);
|
|
border-radius: 0 0 3px 3px;
|
|
font-size: 0.9em;
|
|
margin-top: $-xs;
|
|
&:hover {
|
|
text-decoration: none;
|
|
@include lightDark(background-color, #f2f2f2, #2d2d2d);
|
|
}
|
|
&:focus {
|
|
@include lightDark(background-color, #eee, #222);
|
|
outline: 1px dotted #666;
|
|
outline-offset: -2px;
|
|
}
|
|
}
|
|
|
|
.card.border-card {
|
|
border: 1px solid;
|
|
@include lightDark(border-color, #ddd, #000);
|
|
}
|
|
|
|
.card.drag-card {
|
|
border: 1px solid #DDD;
|
|
@include lightDark(border-color, #ddd, #000);
|
|
@include lightDark(background-color, #fff, #333);
|
|
border-radius: 4px;
|
|
display: flex;
|
|
padding: 0 0 0 ($-s + 28px);
|
|
margin: $-s 0;
|
|
position: relative;
|
|
.drag-card-action {
|
|
cursor: pointer;
|
|
}
|
|
.handle, .drag-card-action {
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
flex-grow: 0;
|
|
padding: 0 $-xs;
|
|
&:hover {
|
|
@include lightDark(background-color, #eee, #2d2d2d);
|
|
}
|
|
.svg-icon {
|
|
margin-inline-end: 0px;
|
|
}
|
|
}
|
|
.outline input {
|
|
margin: $-s 0;
|
|
width: 100%;
|
|
}
|
|
.outline {
|
|
position: relative;
|
|
}
|
|
.handle {
|
|
@include lightDark(background-color, #eee, #2d2d2d);
|
|
left: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
}
|
|
> div {
|
|
padding: 0 $-s;
|
|
max-width: 80%;
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
.grid-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: 1px solid #ddd;
|
|
@include lightDark(border-color, #ddd, #000);
|
|
margin-bottom: $-l;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
min-width: 100px;
|
|
color: $text-dark;
|
|
transition: border-color ease-in-out 120ms, box-shadow ease-in-out 120ms;
|
|
&:hover {
|
|
color: $text-dark;
|
|
text-decoration: none;
|
|
@include lightDark(box-shadow, $bs-card, $bs-card-dark);
|
|
}
|
|
h2 {
|
|
width: 100%;
|
|
font-size: 1.5em;
|
|
margin: 0 0 10px;
|
|
}
|
|
p {
|
|
font-size: .7rem;
|
|
margin: 0;
|
|
line-height: 1.6em;
|
|
}
|
|
.grid-card-content {
|
|
flex: 1;
|
|
border-top: 0;
|
|
border-bottom-width: 2px;
|
|
}
|
|
.grid-card-content, .grid-card-footer {
|
|
padding: $-l;
|
|
}
|
|
.grid-card-content + .grid-card-footer {
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
|
|
.book-grid-item .grid-card-footer {
|
|
p.small {
|
|
font-size: .8em;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.content-wrap.card {
|
|
padding: $-m $-xxl;
|
|
margin-inline-start: auto;
|
|
margin-inline-end: auto;
|
|
margin-bottom: $-l;
|
|
overflow: initial;
|
|
min-height: 60vh;
|
|
&.auto-height {
|
|
min-height: 0;
|
|
}
|
|
&.fill-width {
|
|
width: 100%;
|
|
}
|
|
}
|
|
@include smaller-than($xxl) {
|
|
.content-wrap.card {
|
|
padding: $-m $-xl;
|
|
}
|
|
}
|
|
@include smaller-than($m) {
|
|
.content-wrap.card {
|
|
padding: $-m $-l;
|
|
}
|
|
}
|
|
@include smaller-than($s) {
|
|
.content-wrap.card {
|
|
padding: $-m $-m;
|
|
}
|
|
}
|
|
|
|
.outline-hover {
|
|
border: 1px solid transparent !important;
|
|
&:hover {
|
|
border: 1px solid rgba(0, 0, 0, 0.1) !important;
|
|
}
|
|
}
|
|
|
|
.fade-in-when-active {
|
|
@include lightDark(opacity, 0.6, 0.7);
|
|
transition: opacity ease-in-out 120ms;
|
|
&:hover, &:focus-within {
|
|
opacity: 1 !important;
|
|
}
|
|
@media (prefers-contrast: more) {
|
|
opacity: 1 !important;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Tags
|
|
*/
|
|
.tag-item {
|
|
display: inline-flex;
|
|
margin-bottom: $-xs;
|
|
margin-inline-end: $-xs;
|
|
border-radius: 4px;
|
|
border: 1px solid;
|
|
overflow: hidden;
|
|
font-size: 0.85em;
|
|
@include lightDark(border-color, #CCC, #666);
|
|
a, span, a:hover, a:active {
|
|
padding: 4px 8px;
|
|
@include lightDark(color, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.8));
|
|
transition: background-color ease-in-out 80ms;
|
|
text-decoration: none;
|
|
}
|
|
a:hover {
|
|
@include lightDark(background-color, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
|
|
}
|
|
svg {
|
|
@include lightDark(fill, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5));
|
|
}
|
|
.tag-value {
|
|
border-inline-start: 1px solid;
|
|
@include lightDark(border-color, #DDD, #666);
|
|
@include lightDark(background-color, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2))
|
|
}
|
|
}
|
|
|
|
.tag-name.highlight, .tag-value.highlight {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.tag-list div:last-child .tag-item {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.item-list-row .tag-item {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/**
|
|
* API Docs
|
|
*/
|
|
.api-method {
|
|
font-size: 0.75rem;
|
|
background-color: #888;
|
|
padding: $-xs;
|
|
line-height: 1.3;
|
|
opacity: 0.7;
|
|
vertical-align: top;
|
|
border-radius: 3px;
|
|
color: #FFF;
|
|
display: inline-block;
|
|
min-width: 60px;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
&[data-method="GET"] { background-color: #077b70 }
|
|
&[data-method="POST"] { background-color: #cf4d03 }
|
|
&[data-method="PUT"] { background-color: #0288D1 }
|
|
&[data-method="DELETE"] { background-color: #ab0f0e }
|
|
}
|
|
|
|
.sticky-sidebar {
|
|
position: sticky;
|
|
top: $-m;
|
|
max-height: calc(100vh - #{$-m});
|
|
overflow-y: auto;
|
|
}
|