webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-08-09 10:22:51 +03:00
Code Activity

Updated settings view to have dark-mode color options

Browse Source 
Also added link color option, not yet used.
Cleaned up tabbed interface control design as part of this.
This commit is contained in:
Dan Brown
2023-01-28 11:50:46 +00:00
parent d7723b33f3
commit 1f69965c1e
8 changed files with 92 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
resources/sass/_blocks.scss
View File

@@ -237,6 +237,13 @@
}
}
.sub-card {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
border: 1.5px solid;
@include lightDark(border-color, #E2E2E2, #444);
border-radius: 4px;
}
.outline-hover {
border: 1px solid transparent !important;
&:hover {

31
resources/sass/_components.scss
View File

@@ -608,36 +608,39 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
.tab-container .nav-tabs {
display: flex;
align-items: end;
justify-items: start;
text-align: start;
border-bottom: 1px solid #DDD;
@include lightDark(border-color, #ddd, #444);
margin-bottom: $-m;
.tab-item {
padding: $-s;
@include lightDark(color, #666, #999);
&.selected {
border-bottom-width: 3px;
}
}
}
.nav-tabs {
text-align: center;
a, .tab-item {
padding: $-m;
.tab-item {
display: inline-block;
@include lightDark(color, #666, #999);
padding: $-s;
@include lightDark(color, rgba(0, 0, 0, .5), rgba(255, 255, 255, .5));
cursor: pointer;
border-right: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 2px solid transparent;
margin-bottom: -1px;
&.selected {
border-bottom: 2px solid var(--color-primary);
color: var(--color-primary) !important;
border-bottom-color: var(--color-primary) !important;
}
&:last-child {
border-right: 0;
&:hover, &:focus {
@include lightDark(color, rgba(0, 0, 0, .8), rgba(255, 255, 255, .8));
@include lightDark(border-bottom-color, rgba(0, 0, 0, .2), rgba(255, 255, 255, .2));
}
}
}
.nav-tabs.controls-card {
margin-bottom: 0;
border-bottom: 0;
padding: 0 $-xs;
}
.image-picker .none {
display: none;