Cutlery/Kavita
1
0
Fork 0
mirror of https://github.com/Kareadita/Kavita.git synced 2025-07-09 03:04:19 -04:00
Code Issues Packages Projects Releases Wiki Activity

Side Nav UX Changes (#3345)

Browse Source 
Co-authored-by: Christopher <39032787+MrRobotjs@users.noreply.github.com>
Co-authored-by: Robbie Davis <robbie@therobbiedavis.com>
This commit is contained in:
Joe Milazzo 2024-11-07 17:21:14 -06:00 committed by GitHub
parent aa939edf6d
commit 3a0c796c08
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
45 changed files with 1193 additions and 664 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
API.Tests/Parsing/MangaParsingTests.cs
View File

@ -211,6 +211,7 @@ public class MangaParsingTests
[InlineData("หนึ่งความคิด นิจนิรันดร์ เล่ม 2", "หนึ่งความคิด นิจนิรันดร์")]
[InlineData("不安の種\uff0b - 01", "不安の種\uff0b")]
[InlineData("Giant Ojou-sama - Ch. 33.5 - Volume 04 Bonus Chapter", "Giant Ojou-sama")]
[InlineData("[218565]-(C92) [BRIO (Puyocha)] Mika-nee no Tanryoku Shidou - Mika s Guide to Self-Confidence (THE IDOLM@STE", "")]
public void ParseSeriesTest(string filename, string expected)
{
Assert.Equal(expected, API.Services.Tasks.Scanner.Parser.Parser.ParseSeries(filename, LibraryType.Manga));

19
API.Tests/Services/ScannerServiceTests.cs
View File

@ -130,6 +130,25 @@ public class ScannerServiceTests : AbstractDbTest
Assert.NotNull(postLib.Series.First().Volumes.FirstOrDefault(v => v.Chapters.FirstOrDefault(c => c.IsSpecial) != null));
}
[Fact]
public async Task ScanLibrary_SeriesWithUnbalancedParenthesis()
{
const string testcase = "Scan Library Parses as ( - Manga.json";
var library = await GenerateScannerData(testcase);
var scanner = CreateServices();
await scanner.ScanLibrary(library.Id);
var postLib = await _unitOfWork.LibraryRepository.GetLibraryForIdAsync(library.Id, LibraryIncludes.Series);
Assert.NotNull(postLib);
Assert.Single(postLib.Series);
var series = postLib.Series.First();
Assert.Equal("Mika-nee no Tanryoku Shidou - Mika s Guide to Self-Confidence (THE IDOLM@STE", series.Name);
}
/// <summary>
/// This is testing that if the first file is named A and has a localized name of B if all other files are named B, it should still group and name the series A
/// </summary>

4
API.Tests/Services/Test Data/ScannerService/TestCases/Scan Library Parses as ( - Manga.json Normal file
View File

@ -0,0 +1,4 @@
[
"[218565]-(C92) [BRIO (Puyocha)] Mika-nee no Tanryoku Shidou - Mika s Guide to Self-Confidence (THE IDOLM@STE/[218565]-(C92) [BRIO (Puyocha)] Mika-nee no Tanryoku Shidou - Mika s Guide to Self-Confidence (THE IDOLM@STE.zip",
"[218565]-(C92) [BRIO (Puyocha)] Mika-nee no Tanryoku Shidou - Mika s Guide to Self-Confidence (THE IDOLM@STE/[218565]-(C92) [BRIO (Puyocha)] Something Else (THE IDOLM@STE.zip"
]

1
API/Controllers/LibraryController.cs
View File

@ -612,6 +612,7 @@ public class LibraryController : BaseApiController
library.AllowScrobbling = false;
}
_unitOfWork.LibraryRepository.Update(library);
}

22
API/Controllers/OPDSController.cs
View File

@ -946,9 +946,7 @@ public class OpdsController : BaseApiController
var series = await _unitOfWork.SeriesRepository.GetSeriesDtoByIdAsync(seriesId, userId);
var libraryType = await _unitOfWork.LibraryRepository.GetLibraryTypeAsync(series.LibraryId);
var volume = await _unitOfWork.VolumeRepository.GetVolumeAsync(volumeId, VolumeIncludes.Chapters);
// var chapters =
// (await _unitOfWork.ChapterRepository.GetChaptersAsync(volumeId))
// .OrderBy(x => x.MinNumber, _chapterSortComparerDefaultLast);
var feed = CreateFeed(series.Name + " - Volume " + volume!.Name + $" - {_seriesService.FormatChapterName(userId, libraryType)}s ",
$"{apiKey}/series/{seriesId}/volume/{volumeId}", apiKey, prefix);
SetFeedId(feed, $"series-{series.Id}-volume-{volume.Id}-{_seriesService.FormatChapterName(userId, libraryType)}s");
@ -1094,15 +1092,6 @@ public class OpdsController : BaseApiController
};
}
private static FeedAuthor CreateAuthor(PersonDto person)
{
return new FeedAuthor()
{
Name = person.Name,
Uri = "http://opds-spec.org/author/" + person.Id
};
}
private static FeedEntry CreateSeries(SearchResultDto searchResultDto, string apiKey, string prefix, string baseUrl)
{
return new FeedEntry()
@ -1122,6 +1111,15 @@ public class OpdsController : BaseApiController
};
}
private static FeedAuthor CreateAuthor(PersonDto person)
{
return new FeedAuthor()
{
Name = person.Name,
Uri = "http://opds-spec.org/author/" + person.Id
};
}
private static FeedEntry CreateChapter(string apiKey, string title, string? summary, int chapterId, int volumeId, int seriesId, string prefix, string baseUrl)
{
return new FeedEntry()

2
API/Data/ManualMigrations/ManualMigrateRemovePeople.cs
View File

@ -28,7 +28,7 @@ public static class ManualMigrateRemovePeople
logger.LogCritical("Running ManualMigrateRemovePeople migration - Please be patient, this may take some time. This is not an error");
context.Person.RemoveRange(context.Person);
context.Person.RemoveRange(context.Person);
if (context.ChangeTracker.HasChanges())
{

48
API/Data/ManualMigrations/ManualMigrateUnscrobbleBookLibraries.cs Normal file
View File

@ -0,0 +1,48 @@
using System;
using System.Linq;
using System.Threading.Tasks;
using API.Entities;
using API.Entities.Enums;
using Kavita.Common.EnvironmentInfo;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.Logging;
namespace API.Data.ManualMigrations;
/// <summary>
/// When I removed Scrobble support for Book libraries, I forgot to turn the setting off for said libraries.
/// </summary>
public static class ManualMigrateUnscrobbleBookLibraries
{
public static async Task Migrate(DataContext context, ILogger<Program> logger)
{
if (await context.ManualMigrationHistory.AnyAsync(m => m.Name == "ManualMigrateUnscrobbleBookLibraries"))
{
return;
}
logger.LogCritical("Running ManualMigrateUnscrobbleBookLibraries migration - Please be patient, this may take some time. This is not an error");
var libs = await context.Library.Where(l => l.Type == LibraryType.Book).ToListAsync();
foreach (var lib in libs)
{
lib.AllowScrobbling = false;
context.Entry(lib).State = EntityState.Modified;
}
if (context.ChangeTracker.HasChanges())
{
await context.SaveChangesAsync();
}
await context.ManualMigrationHistory.AddAsync(new ManualMigrationHistory()
{
Name = "ManualMigrateUnscrobbleBookLibraries",
ProductVersion = BuildInfo.Version.ToString(),
RanAt = DateTime.UtcNow
});
await context.SaveChangesAsync();
logger.LogCritical("Running ManualMigrateUnscrobbleBookLibraries migration - Completed. This is not an error");
}
}

20
API/Helpers/Builders/LibraryBuilder.cs
View File

@ -20,8 +20,26 @@ public class LibraryBuilder : IEntityBuilder<Library>
Series = new List<Series>(),
Folders = new List<FolderPath>(),
AppUsers = new List<AppUser>(),
AllowScrobbling = type is LibraryType.LightNovel or LibraryType.Manga
AllowScrobbling = type is LibraryType.LightNovel or LibraryType.Manga,
LibraryFileTypes = new List<LibraryFileTypeGroup>()
};
_library.LibraryFileTypes.Add(new LibraryFileTypeGroup()
{
FileTypeGroup = FileTypeGroup.Archive
});
_library.LibraryFileTypes.Add(new LibraryFileTypeGroup()
{
FileTypeGroup = FileTypeGroup.Epub
});
_library.LibraryFileTypes.Add(new LibraryFileTypeGroup()
{
FileTypeGroup = FileTypeGroup.Images
});
_library.LibraryFileTypes.Add(new LibraryFileTypeGroup()
{
FileTypeGroup = FileTypeGroup.Pdf
});
}
public LibraryBuilder(Library library)

1
API/Services/DirectoryService.cs
View File

@ -746,7 +746,6 @@ public class DirectoryService : IDirectoryService
public IList<string> ScanFiles(string folderPath, string fileTypes, GlobMatcher? matcher = null,
SearchOption searchOption = SearchOption.AllDirectories)
{
_logger.LogTrace("[ScanFiles] called on {Path}", folderPath);
var files = new List<string>();
if (!Exists(folderPath)) return files;

9
API/Services/Tasks/Scanner/ParseScannedFiles.cs
View File

@ -126,6 +126,13 @@ public class ParseScannedFiles
IDictionary<string, IList<SeriesModified>> seriesPaths, Library library, bool forceCheck = false)
{
var fileExtensions = string.Join("|", library.LibraryFileTypes.Select(l => l.FileTypeGroup.GetRegex()));
// If there are no library file types, skip scanning entirely
if (string.IsNullOrWhiteSpace(fileExtensions))
{
return ArraySegment<ScanResult>.Empty;
}
var matcher = BuildMatcher(library);
var result = new List<ScanResult>();
@ -459,7 +466,7 @@ public class ParseScannedFiles
await _eventHub.SendMessageAsync(MessageFactory.NotificationProgress,
MessageFactory.FileScanProgressEvent("File Scan Starting", library.Name, ProgressEventType.Started));
_logger.LogDebug("[ScannerService] Library {LibraryName} Step 1.A: Process {FolderCount} folders", library.Name, folders.Count());
_logger.LogDebug("[ScannerService] Library {LibraryName} Step 1.A: Process {FolderCount} folders", library.Name, folders.Count);
var processedScannedSeries = new ConcurrentBag<ScannedSeriesResult>();
foreach (var folder in folders)

20
API/Services/Tasks/Scanner/Parser/BasicParser.cs
View File

@ -29,24 +29,12 @@ public class BasicParser(IDirectoryService directoryService, IDefaultParser imag
Format = Parser.ParseFormat(filePath),
Title = Parser.RemoveExtensionIfSupported(fileName)!,
FullFilePath = Parser.NormalizePath(filePath),
Series = string.Empty,
ComicInfo = comicInfo
Series = Parser.ParseSeries(fileName, type),
ComicInfo = comicInfo,
Chapters = Parser.ParseChapter(fileName, type),
Volumes = Parser.ParseVolume(fileName, type),
};
// This will be called if the epub is already parsed once then we call and merge the information, if the
if (Parser.IsEpub(filePath))
{
ret.Chapters = Parser.ParseChapter(fileName, type);
ret.Series = Parser.ParseSeries(fileName, type);
ret.Volumes = Parser.ParseVolume(fileName, type);
}
else
{
ret.Chapters = Parser.ParseChapter(fileName, type);
ret.Series = type == LibraryType.Comic ? Parser.ParseComicSeries(fileName) : Parser.ParseSeries(fileName, type);
ret.Volumes = type == LibraryType.Comic ? Parser.ParseComicVolume(fileName) : Parser.ParseVolume(fileName, type);
}
if (ret.Series == string.Empty || Parser.IsImage(filePath))
{
// Try to parse information out of each folder all the way to rootPath

2
API/Services/Tasks/Scanner/Parser/Parser.cs
View File

@ -271,7 +271,7 @@ public static class Parser
RegexTimeout),
//Knights of Sidonia c000 (S2 LE BD Omake - BLAME!) [Habanero Scans]
new Regex(
@"(?<Series>.*)(\bc\d+\b)",
@"(?<Series>.*?)(?<!\()\bc\d+\b",
MatchOptions, RegexTimeout),
//Tonikaku Cawaii [Volume 11], Darling in the FranXX - Volume 01.cbz
new Regex(

1
API/Startup.cs
View File

@ -275,6 +275,7 @@ public class Startup
await MigrateLowestSeriesFolderPath2.Migrate(dataContext, unitOfWork, logger);
await ManualMigrateRemovePeople.Migrate(dataContext, logger);
await MigrateDuplicateDarkTheme.Migrate(dataContext, logger);
await ManualMigrateUnscrobbleBookLibraries.Migrate(dataContext, logger);
// Update the version in the DB after all migrations are run
var installVersion = await unitOfWork.SettingsRepository.GetSettingAsync(ServerSettingKey.InstallVersion);

5
UI/Web/src/app/app.component.scss
View File

@ -1,4 +1,5 @@
@import '../theme/variables';
.content-wrapper {
padding: 0 0 0 10px;
height: calc(var(--vh)* 100 - var(--nav-offset));
@ -14,6 +15,7 @@
scrollbar-width: thin;
mask-image: linear-gradient(to bottom, transparent, black 0%, black 95%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, transparent, black 0%, black 95%, transparent 100%);
//margin-top: 7px;
// For firefox
@supports (-moz-appearance:none) {
@ -55,7 +57,7 @@
}
.companion-bar-content {
margin-left: 190px;
margin-left: var(--side-nav-width);
}
@media (max-width: $grid-breakpoints-lg) {
@ -82,7 +84,6 @@
margin-left: 0;
padding-left: 0;
width: 100%;
padding: 10px 0 0;
height: calc(var(--vh) * 100 - var(--nav-mobile-offset));
scrollbar-color: rgba(255,255,255,0.3) rgba(0, 0, 0, 0.1);
scrollbar-width: thin;

4
UI/Web/src/app/cards/bulk-operations/bulk-operations.component.html
View File

@ -1,8 +1,8 @@
<ng-container *transloco="let t; read: 'bulk-operations'">
@if (bulkSelectionService.selections$ | async; as selectionCount) {
@if (selectionCount > 0) {
<div class="bulk-select-container">
<div class="bulk-select mb-3 {{modalMode ? '' : 'fixed-top'}}" [ngStyle]="{'margin-top': topOffset + 'px'}">
<div class="bulk-select-container" [ngStyle]="{'margin-left': marginLeft + 'px', 'margin-right': marginRight + 'px'}">
<div class="bulk-select">
<div class="d-flex justify-content-around align-items-center">
<span class="highlight">

5
UI/Web/src/app/cards/bulk-operations/bulk-operations.component.scss
View File

@ -1,6 +1,7 @@
.bulk-select-container {
position: absolute;
width: 100%;
z-index: 1;
top: 0;
position: sticky;
.bulk-select {
background-color: var(--bulk-selection-bg-color);

9
UI/Web/src/app/cards/bulk-operations/bulk-operations.component.ts
View File

@ -37,7 +37,14 @@ export class BulkOperationsComponent implements OnInit {
* Modal mode means don't fix to the top
*/
@Input() modalMode = false;
@Input() topOffset: number = 75;
/**
* On Series Detail this should be 12
*/
@Input() marginLeft: number = 0;
/**
* On Series Detail this should be 12
*/
@Input() marginRight: number = 8;
hasMarkAsRead: boolean = false;
hasMarkAsUnread: boolean = false;
actions: Array<ActionItem<any>> = [];

4
UI/Web/src/app/chapter-detail/chapter-detail.component.html
View File

@ -65,7 +65,7 @@
@if (accountService.isAdmin$ | async) {
<div class="col-auto ms-2">
<button class="btn btn-secondary-outline" id="edit-btn--komf" (click)="openEditModal()" [ngbTooltip]="t('edit-series-alt')">
<button class="btn btn-actions" id="edit-btn--komf" (click)="openEditModal()" [ngbTooltip]="t('edit-series-alt')">
<span><i class="fa fa-pen" aria-hidden="true"></i></span>
</button>
</div>
@ -73,7 +73,7 @@
<div class="col-auto ms-2 d-none d-md-block">
<div class="card-actions" [ngbTooltip]="t('more-alt')">
<app-card-actionables (actionHandler)="performAction($event)" [actions]="chapterActions" [labelBy]="series.name + ' ' + chapter.minNumber" iconClass="fa-ellipsis-h" btnClass="btn-secondary-outline btn"></app-card-actionables>
<app-card-actionables (actionHandler)="performAction($event)" [actions]="chapterActions" [labelBy]="series.name + ' ' + chapter.minNumber" iconClass="fa-ellipsis-h" btnClass="btn-actions btn"></app-card-actionables>
</div>
</div>

4
UI/Web/src/app/chapter-detail/chapter-detail.component.scss
View File

@ -1 +1,5 @@
@use '../../series-detail-common';
:host ::ng-deep .card-actions .btn.btn-actions {
padding: 0.375rem 0.75rem;
}

8
UI/Web/src/app/library-detail/library-detail.component.ts
View File

@ -265,6 +265,14 @@ export class LibraryDetailComponent implements OnInit {
case(Action.GenerateColorScape):
await this.actionService.refreshLibraryMetadata(library, undefined, false);
break;
case (Action.Delete):
await this.actionService.deleteLibrary(library, () => {
this.loadPageSource.next(true);
});
break;
case (Action.AnalyzeFiles):
await this.actionService.analyzeFiles(library);
break;
case(Action.Edit):
this.actionService.editLibrary(library);
break;

3
UI/Web/src/app/nav/_components/events-widget/events-widget.component.scss
View File

@ -20,7 +20,7 @@
.widget-button--indicator {
position: absolute;
top: 30px;
top: 24px;
color: var(--event-widget-activity-bg-color);
&.error {
@ -79,6 +79,7 @@
.dark-menu-item {
&.update-available {
cursor: pointer;
opacity: 1;
i.fa {
color: var(--primary-color) !important;

2
UI/Web/src/app/nav/_components/events-widget/events-widget.component.ts
View File

@ -72,8 +72,6 @@ export class EventsWidgetComponent implements OnInit, OnDestroy {
*/
updateAvailable: boolean = false;
debugMode: boolean = false;
protected readonly EVENTS = EVENTS;

129
UI/Web/src/app/nav/_components/grouped-typeahead/grouped-typeahead.component.scss
View File

@ -1,8 +1,3 @@
form {
max-height: 38px;
}
.search-result img {
width: 100% !important;
}
@ -16,75 +11,89 @@ form {
.typeahead-input {
border: 1px solid transparent;
border-radius: 4px;
padding: 0px 6px;
display: inline-block;
overflow: hidden;
border: 1px solid transparent;
border-radius: 4px;
overflow: hidden;
position: relative;
z-index: 1;
box-sizing: border-box;
box-shadow: none;
cursor: text;
background-color: var(--searchbar-bg-color);
color: var(--body-text-color);
min-height: 32px;
transition-property: all;
transition-duration: 0.3s;
display: block;
width: 50%;
.search {
display: flex;
position: relative;
z-index: 1;
box-sizing: border-box;
box-shadow: none;
cursor: text;
background-color: var(--input-bg-color);
color: var(--body-text-color);
min-height: 38px;
min-height: 32px;
.btn-close {
position: unset;
margin-top: unset;
align-self: center;
margin: 0 8px;
}
}
input {
width: 100%;
padding: 0px 6px;
outline: 0 !important;
border-radius: .28571429rem;
margin: 0px !important;
text-indent: 0 !important;
line-height: inherit !important;
box-shadow: none !important;
transition-property: all;
transition-duration: 0.3s;
display: block;
opacity: 1;
position: relative;
left: 4px;
border: none;
background-color: transparent;
.search {
display: flex;
position: relative;
&:focus-visible {
width: 100%;
}
}
&.focused {
width: 100%;
border-color: var(--primary-color);
input {
outline: 0 !important;
border-radius: .28571429rem;
padding: 0px !important;
min-height: 0px !important;
max-width: 100% !important;
margin: 0px !important;
text-indent: 0 !important;
line-height: inherit !important;
box-shadow: none !important;
width: 300px;
transition-property: all;
transition-duration: 0.3s;
display: block;
opacity: 1;
position: relative;
left: 4px;
border: none;
&:focus-visible {
width: calc(100vw - 180px);
}
&:empty {
padding-top: 6px !important;
}
color: #fff;
}
&.focused {
width: 98.5%;
border-color: var(--input-focused-border-color);
}
}
}
@media only screen and (max-width: 980px) {
.typeahead-input {
width: 65%;
}
}
/* small devices (phones, 650px and down) */
@media only screen and (max-width:650px) {
input {
width: 100%
.typeahead-input {
width: 75%;
margin: 0 auto;
}
}
input:focus-visible {
width: 100% !important;
}
@media only screen and (max-width: 500px) {
.typeahead-input {
width: 100%;
}
}
@ -160,10 +169,10 @@ ul ul {
}
.overlay {
position: absolute;
position: fixed;
top: 0;
left: 0;
background: rgba(0,0,0,0.4);
width: 100%;
height: 100dvh;
}
width: 100vw;
height: 100vh;
}

12
UI/Web/src/app/nav/_components/nav-header/nav-header.component.html
View File

@ -9,12 +9,14 @@
}
<a class="navbar-brand dark-exempt" routerLink="/home" routerLinkActive="active">
<app-image width="28px" height="28px" imageUrl="assets/images/logo-32.png" classes="logo" />
<span class="d-none d-md-inline logo"> Kavita</span>
<app-image width="24px" height="24px" imageUrl="assets/images/logo-32.png" classes="logo-icon" />
<div class="d-none d-md-inline logo">
<span>Kavita</span>
</div>
</a>
<ul class="navbar-nav col me-auto">
@if (accountService.currentUser$ | async; as user) {
<div class="nav-item">
<div class="nav-item search">
<label for="nav-search" class="form-label visually-hidden">{{t('search-series-alt')}}</label>
<div class="ng-autocomplete">
<app-grouped-typeahead
@ -161,8 +163,6 @@
}
</ul>
@if (!searchFocused) {
@if((breakpoint$ | async)! > Breakpoint.Tablet) {
@if (backToTopNeeded) {
<div class="back-to-top">
@ -206,7 +206,7 @@
</div>
}
}
}
</div>
</nav>

205
UI/Web/src/app/nav/_components/nav-header/nav-header.component.scss
View File

@ -1,91 +1,140 @@
.btn:focus, .btn:hover {
.btn:focus {
box-shadow: 0 0 0 0.1rem var(--navbar-btn-hover-outline-color);
}
.navbar {
background-color: var(--navbar-bg-color);
background-color: var(--navbar-bg-color);
.side-nav-toggle {
cursor: pointer;
margin-left: 13px;
font-size: 1.2rem;
i {
color: var(--navbar-fa-icon-color);
}
.navbar-nav {
.nav-item {
&.search {
width: 100%;
}
}
}
.side-nav-toggle {
cursor: pointer;
margin-left: 0.8125rem;
font-size: 1.2rem;
i {
color: var(--navbar-fa-icon-color);
opacity: 0.8;
}
&:hover {
i {
opacity: 1;
}
}
}
.nav-item:not(.search) {
display: unset;
opacity: 0.8;
&:hover {
opacity: 1;
}
}
}
// On Really small screens, hide the server settings wheel and show it in nav
// TODO: Look into doing this with bootstrap 5 (and moving to _utilities.scss)
.xs-only {
display: none;
}
.not-xs-only {
display: inherit;
}
@media only screen and (max-width:300px) {
.xs-only {
display: inherit;
}
.not-xs-only {
display: none;
}
}
.nav-item.dropdown {
position: unset;
}
.navbar-brand {
font-family: var(--brand-font-family);
font-weight: bold;
margin: 0 2rem;
display: flex;
align-items: center;
&:hover {
text-decoration: none;
}
.logo-icon {
align-items: center;
align-self: center;
display: flex;
flex-direction: column;
height: 1.5rem;
width: 1.5rem;
margin-right: 0.5rem;
}
.logo {
vertical-align: text-top;
max-height: 1.75rem;
line-height: 2.0625rem;
margin-left: 0.3125rem;
}
.phone-hidden {
vertical-align: middle;
}
}
.focus-visible:focus {
visibility: visible;
color: var(--nav-header-text-color);
}
.ng-autocomplete {
margin-bottom: 0px;
}
.primary-text {
color: var(--nav-header-text-color);
border: none;
}
.search-result {
width: 1.5rem;
margin-top: 0.3125rem;
}
.scroll-to-top:hover {
animation: MoveUpDown 1s linear infinite;
}
.text-light {
color: var(--search-result-text-lite-color) !important;
}
/* small devices (phones, 650px and down) */
@media only screen and (max-width:650px) {
.navbar-nav {
width: 0;
.navbar-nav {
width: 0;
}
.navbar-brand {
margin: 0 1rem 0 1rem;
.logo-icon {
margin: unset;
}
}
// On Really small screens, hide the server settings wheel and show it in nav
// TODO: Look into doing this with bootstrap 5 (and moving to _utilities.scss)
.xs-only {
display: none;
}
.not-xs-only {
display: inherit;
}
@media only screen and (max-width:300px) {
.xs-only {
display: inherit;
}
.not-xs-only {
display: none;
}
}
.nav-item.dropdown {
position: unset;
}
.navbar-brand {
font-family: var(--brand-font-family);
font-weight: bold;
margin: 0 1rem;
&:hover {
text-decoration: none;
}
.logo {
max-height: 28px;
vertical-align: text-top;
}
.phone-hidden {
vertical-align: middle;
}
}
.focus-visible:focus {
visibility: visible;
color: var(--nav-header-text-color);
}
.ng-autocomplete {
margin-bottom: 0px;
}
.primary-text {
color: var(--nav-header-text-color);
border: none;
}
.search-result {
width: 24px;
margin-top: 5px;
}
.scroll-to-top:hover {
animation: MoveUpDown 1s linear infinite;
}
.text-light {
color: var(--search-result-text-lite-color) !important;
}
}

4
UI/Web/src/app/series-detail/_components/download-button/download-button.component.html
View File

@ -1,7 +1,7 @@
<ng-container *transloco="let t; read: 'download-button'">
@if (canDownload$ | async) {
@if (download$ | async; as download) {
<button class="btn btn-secondary-outline" (click)="downloadClicked()" [ngbTooltip]="t('download-tooltip')" [disabled]="download !== null">
<button class="btn btn-actions" (click)="downloadClicked()" [ngbTooltip]="t('download-tooltip')" [disabled]="download !== null">
@if (download) {
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">{{t('downloading-status')}}</span>
@ -10,7 +10,7 @@
}
</button>
} @else {
<button class="btn btn-secondary-outline" (click)="downloadClicked()" [ngbTooltip]="t('download-tooltip')">
<button class="btn btn-actions" (click)="downloadClicked()" [ngbTooltip]="t('download-tooltip')">
<i class="fa fa-arrow-alt-circle-down" aria-hidden="true"></i>
</button>
}

16
UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.html
View File

@ -1,5 +1,5 @@
<ng-container *transloco="let t; read: 'series-detail'">
<app-bulk-operations [actionCallback]="bulkActionCallback" [topOffset]="56"></app-bulk-operations>
<app-bulk-operations [actionCallback]="bulkActionCallback" [marginLeft]="12" [marginRight]="0"></app-bulk-operations>
@if (series && seriesMetadata && libraryType !== null) {
<div [ngStyle]="{'height': ScrollingBlockHeight}" class="main-container container-fluid" #scrollingBlock>
@ -48,7 +48,7 @@
</div>
<div class="mt-3 mb-3">
<div class="row g-0">
<div class="row g-0" style="align-items: center;">
<div class="col-auto">
<div class="btn-group">
<button type="button" class="btn btn-primary-outline" (click)="read()">
@ -72,7 +72,7 @@
</div>
<div class="col-auto ms-2">
<button class="btn btn-secondary-outline" (click)="toggleWantToRead()" ngbTooltip="{{isWantToRead ? t('remove-from-want-to-read') : t('add-to-want-to-read')}}">
<button class="btn btn-actions" (click)="toggleWantToRead()" ngbTooltip="{{isWantToRead ? t('remove-from-want-to-read') : t('add-to-want-to-read')}}">
<span>
<i class="{{isWantToRead ? 'fa-solid' : 'fa-regular'}} fa-star" aria-hidden="true"></i>
</span>
@ -81,7 +81,7 @@
@if (isAdmin) {
<div class="col-auto ms-2">
<button class="btn btn-secondary-outline" id="edit-btn--komf" (click)="openEditSeriesModal()" [ngbTooltip]="t('edit-series-alt')">
<button class="btn btn-actions" id="edit-btn--komf" (click)="openEditSeriesModal()" [ngbTooltip]="t('edit-series-alt')">
<span><i class="fa fa-pen" aria-hidden="true"></i></span>
</button>
</div>
@ -89,19 +89,19 @@
@if ((accountService.hasValidLicense$ | async) && libraryAllowsScrobbling) {
<div class="col-auto ms-2">
<button class="btn btn-secondary-outline" (click)="toggleScrobbling($event)" [ngbTooltip]="t('scrobbling-tooltip')">
<button class="btn btn-actions" (click)="toggleScrobbling($event)" [ngbTooltip]="t('scrobbling-tooltip')">
<i class="fa-solid fa-tower-{{(isScrobbling) ? 'broadcast' : 'observation'}}" aria-hidden="true"></i>
</button>
</div>
}
<div class="col-auto ms-2 d-none d-md-block">
<div class="card-actions mt-2" [ngbTooltip]="t('more-alt')">
<app-card-actionables (actionHandler)="performAction($event)" [actions]="seriesActions" [labelBy]="series.name" iconClass="fa-ellipsis-h" btnClass="btn-secondary-outline btn"></app-card-actionables>
<div class="card-actions btn-actions" [ngbTooltip]="t('more-alt')">
<app-card-actionables (actionHandler)="performAction($event)" [actions]="seriesActions" [labelBy]="series.name" iconClass="fa-ellipsis-h" btnClass="btn"></app-card-actionables>
</div>
</div>
<div class="col-auto ms-2 d-none d-md-block">
<div class="col-auto ms-2 d-none d-md-block btn-actions">
<app-download-button [download$]="download$" [entity]="series" entityType="series"></app-download-button>
</div>

4
UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.scss
View File

@ -27,4 +27,6 @@
}
}
:host ::ng-deep .card-actions.btn-actions .btn {
padding: 0.375rem 0.75rem;
}

12
UI/Web/src/app/settings/_components/setting-item/setting-item.component.html
View File

@ -1,7 +1,7 @@
<ng-container *transloco="let t;">
<div class="container-fluid">
<div class="row g-0">
<div class="col-10">
<div class="settings-row g-0 row">
<div class="col-10 setting-title">
<h6 class="section-title">
@if (labelId) {
<label class="reset-label" [for]="labelId">{{title}}</label>
@ -15,9 +15,9 @@
</div>
<div class="col-2 text-end align-self-end justify-content-end">
@if (showEdit) {
<button type="button" class="btn btn-text btn-sm" (click)="toggleEditMode()" [disabled]="!canEdit">
{{isEditMode ? t('common.close') : (editLabel || t('common.edit'))}}
</button>
<button type="button" class="btn btn-text btn-sm" (click)="toggleEditMode()" [disabled]="!canEdit">
{{isEditMode ? t('common.close') : (editLabel || t('common.edit'))}}
</button>
}
@if (titleActionsRef) {
<ng-container [ngTemplateOutlet]="titleActionsRef"></ng-container>
@ -25,7 +25,6 @@
</div>
</div>
@if (isEditMode) {
<ng-container [ngTemplateOutlet]="valueEditRef"></ng-container>
} @else {
@ -34,7 +33,6 @@
</span>
}
@if (subtitle) {
<div class="text-muted mt-2" [innerHTML]="subtitle | safeHtml"></div>
}

6
UI/Web/src/app/sidenav/_components/manage-external-sources/manage-external-sources.component.ts
View File

@ -1,21 +1,19 @@
import {ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, inject} from '@angular/core';
import {CommonModule, NgOptimizedImage} from '@angular/common';
import {NgOptimizedImage} from '@angular/common';
import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
import {NgbCollapse, NgbTooltip} from "@ng-bootstrap/ng-bootstrap";
import {translate, TranslocoDirective} from "@jsverse/transloco";
import {AccountService} from "../../../_services/account.service";
import {ToastrService} from "ngx-toastr";
import {EditExternalSourceItemComponent} from "../edit-external-source-item/edit-external-source-item.component";
import {ExternalSource} from "../../../_models/sidenav/external-source";
import {ExternalSourceService} from "../../../_services/external-source.service";
import {FilterPipe} from "../../../_pipes/filter.pipe";
import {SmartFilter} from "../../../_models/metadata/v2/smart-filter";
import {WikiLink} from "../../../_models/wiki";
@Component({
selector: 'app-manage-external-sources',
standalone: true,
imports: [CommonModule, FormsModule, NgOptimizedImage, NgbTooltip, ReactiveFormsModule, TranslocoDirective, NgbCollapse, EditExternalSourceItemComponent, FilterPipe],
imports: [FormsModule, NgOptimizedImage, NgbTooltip, ReactiveFormsModule, TranslocoDirective, NgbCollapse, EditExternalSourceItemComponent, FilterPipe],
templateUrl: './manage-external-sources.component.html',
styleUrls: ['./manage-external-sources.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush

2
UI/Web/src/app/sidenav/_components/side-nav-companion-bar/side-nav-companion-bar.component.html
View File

@ -1,5 +1,5 @@
<ng-container *transloco="let t; read: 'side-nav-companion-bar'">
<div class="mt-0 ms-1 d-flex justify-content-between align-items-center">
<div class="mt-0 d-flex justify-content-between align-items-center">
<div>
<ng-content select="[title]"></ng-content>
<ng-content select="[subtitle]"></ng-content>

156
UI/Web/src/app/sidenav/_components/side-nav-item/side-nav-item.component.scss
View File

@ -1,152 +1,33 @@
@import '../../../../theme/variables';
::ng-deep .side-nav.closed {
::ng-deep .side-nav app-side-nav-item:first-child {
.active-highlight {
border-top-left-radius: 3px;
}
}
::ng-deep .side-nav app-side-nav-item:first-child {
.side-nav-item {
.side-nav-text {
opacity: 0 !important;
}
.card-actions {
opacity: 0 !important;
}
&.active {
color: var(--side-nav-item-active-color);
background-color: unset !important;
}
border-top-left-radius: 3px;
}
}
.side-nav-item {
position: relative;
align-items: center;
display: flex;
justify-content: space-between;
padding: 0 0 0 10px;
width: 100%;
height: auto;
min-height: 40px;
overflow: hidden;
cursor: pointer;
font-size: 0.9rem;
.side-nav-text {
opacity: 1;
min-width: 100px;
word-break: break-all;
-webkit-line-clamp: 1;
text-overflow: ellipsis;
display: -webkit-box !important;
-webkit-box-orient: vertical;
overflow: hidden;
div {
min-width: 102px;
width: 100%
@media (max-width: $grid-breakpoints-lg) {
::ng-deep .side-nav app-side-nav-item:first-child {
.side-nav-item {
border-top-left-radius: 0px;
}
}
span {
display:flex;
&:last-child {
flex-grow: 1;
justify-content: end;
}
div {
align-items: center;
height: 100%;
justify-content: inherit;
min-width: 30px;
width: 100%;
padding-left: 5px;
i {
font-size: 18px;
}
::ng-deep .side-nav app-side-nav-item:last-child {
.side-nav-item {
border-bottom-left-radius: 0px;
}
}
&.closed {
.side-nav-text {
opacity: 0;
}
.card-actions {
opacity: 0;
}
&.active {
color: var(--side-nav-item-active-color);
background-color: unset;
}
i {
color: var(--side-nav-item-closed-color);
}
&:hover {
color: var(--side-nav-hover-text-color);
background-color: var(--side-nav-hover-bg-color);
i {
color: var(--side-nav-item-closed-hover-color);
}
}
}
&:hover {
color: var(--side-nav-hover-text-color);
background-color: var(--side-nav-hover-bg-color);
.card-actions i.fa {
// TODO: The override to white does not work, please fix for light themes
color: var(--side-nav-hover-text-color) !important;
}
}
&.active {
color: var(--side-nav-item-active-color);
background-color: var(--side-nav-active-bg-color);
.active-highlight {
background-color: var(--side-nav-item-active-color);
width: 5px;
height: 100%;
position: absolute;
left: 0;
}
.side-nav-text, i {
color: var(--side-nav-item-active-text-color) !important;
}
&:hover {
color: var(--side-nav-hover-text-color);
background-color: var(--side-nav-hover-bg-color);
.card-actions i.fa {
// TODO: The override to white does not work, please fix for light themes
color: var(--side-nav-hover-text-color) !important;
}
}
}
}
a {
text-decoration: none;
color: var(--side-nav-text-color);
}
@media (max-width: $grid-breakpoints-lg) {
.side-nav-item {
align-items: center;
padding: 0 10px;
height: 55px;
font-size: 1rem;
.side-nav-text {
width: 100%;
@ -155,12 +36,5 @@ a {
span:last-child {
flex-grow: 0;
}
&.closed {
.card-actions {
font-size: inherit;
}
}
}
}

2
UI/Web/src/app/sidenav/preference-nav/preference-nav.component.html
View File

@ -9,7 +9,7 @@
@for(section of sections; track section.title + section.children.length; let idx = $index;) {
@if (hasAnyChildren(user, section)) {
<h5 class="side-nav-header mt-3 mb-2 ms-3" [ngClass]="{'mt-4': idx > 0}">{{t(section.title)}}</h5>
<h5 class="side-nav-header mb-2 ms-3" [ngClass]="{'mt-4': idx > 0}">{{t(section.title)}}</h5>
@for(item of section.children; track item.fragment) {
@if (accountService.hasAnyRole(user, item.roles)) {
<app-side-nav-item [id]="'nav-item-' + item.fragment" [noIcon]="true" link="/settings" [fragment]="item.fragment" [title]="item.fragment | settingFragment" [badgeCount]="item.badgeCount$ | async"></app-side-nav-item>

106
UI/Web/src/app/sidenav/preference-nav/preference-nav.component.scss
View File

@ -1,84 +1,36 @@
@import '../../../theme/variables';
// TODO: Move this to a common file so it applies both ways
.side-nav {
padding-bottom: 10px;
width: 190px;
background-color: var(--side-nav-bg-color);
height: calc((var(--vh)*100) - 75px);
position: fixed;
margin: 0;
left: 10px;
top: 73px;
overflow-y: hidden;
overflow-x: hidden;
border-radius: var(--side-nav-border-radius);
transition: width var(--side-nav-openclose-transition), background-color var(--side-nav-bg-color-transition), border-color var(--side-nav-border-transition);
border: var(--side-nav-border);
scrollbar-gutter: stable both-edges;
scrollbar-width: thin;
// For firefox
@supports (-moz-appearance:none) {
scrollbar-color: transparent transparent;
scrollbar-width: thin;
scrollbar-color: transparent transparent;
scrollbar-width: thin;
}
&::-webkit-scrollbar {
background-color: transparent; /*make scrollbar space invisible */
width: inherit;
display: none;
visibility: hidden;
background: transparent;
background-color: transparent; /*make scrollbar space invisible */
width: inherit;
display: none;
visibility: hidden;
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: transparent; /*makes it invisible when not hovering*/
background: transparent; /*makes it invisible when not hovering*/
}
&:hover {
scrollbar-width: thin;
overflow-y: auto;
// For firefox
@supports (-moz-appearance:none) {
scrollbar-color: rgba(255,255,255,0.3) rgba(0, 0, 0, 0);
}
&::-webkit-scrollbar-thumb {
visibility: visible;
background-color: rgba(255,255,255,0.3); /*On hover, it will turn grey*/
}
}
&.no-donate {
height: calc((var(--vh)*100) - 82px);
}
&.hidden {
display: none;
opacity: 0;
}
&.closed {
width: 50px;
overflow-x: hidden;
scrollbar-width: thin;
overflow-y: auto;
background-color: var(--side-nav-closed-bg-color);
border: var(--side-nav-border-closed);
}
// For firefox
@supports (-moz-appearance:none) {
scrollbar-color: rgba(255,255,255,0.3) rgba(0, 0, 0, 0);
}
.side-nav-item:first {
border-top-left-radius: var(--side-nav-border-radius);
border-top-right-radius: var(--side-nav-border-radius);
}
}
::ng-deep .side-nav-text {
div {
display: flex;
}
span {
font-size: 0.6rem;
&::-webkit-scrollbar-thumb {
visibility: visible;
background-color: rgba(255,255,255,0.3); /*On hover, it will turn grey*/
}
}
}
@ -112,21 +64,6 @@
height: calc((var(--vh)*100) - var(--nav-mobile-offset));
}
}
.side-nav-overlay {
background-color: var(--side-nav-overlay-color);
width: 100vw;
height: calc((var(--vh)*100) - var(--nav-offset));
position: absolute;
left: 0;
z-index: 998;
&.closed {
display: none;
}
}
}
.side-nav-header {
@ -134,12 +71,3 @@
font-weight: bold;
margin-left: 5px;
}
.side-nav-header:first-of-type {
margin-top: 0.5rem !important;
}
// Overrides for this component
::ng-deep .side-nav-item {
padding: 0 0 0 20px !important;
}

2
UI/Web/src/app/volume-detail/volume-detail.component.html
View File

@ -1,6 +1,6 @@
<ng-container *transloco="let t; read: 'series-detail'">
<app-bulk-operations [actionCallback]="bulkActionCallback" [topOffset]="55"></app-bulk-operations>
<app-bulk-operations [actionCallback]="bulkActionCallback" [marginLeft]="12" [marginRight]="0"></app-bulk-operations>
<div [ngStyle]="{'height': ScrollingBlockHeight}" class="main-container container-fluid" #scrollingBlock>

350
UI/Web/src/assets/images/logo.ai Normal file
View File

File diff suppressed because one or more lines are too long

26
UI/Web/src/assets/images/logo.svg Normal file
View File

@ -0,0 +1,26 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M274,0l43.83,7.67c90.55,22.21,163.26,94.54,186.1,184.9,3.71,14.68,5.18,29.62,8.07,44.43v39c-3.06,14.43-4.44,29.07-8.07,43.43-22.71,89.84-94.64,161.78-184.5,184.5-14.68,3.71-29.62,5.18-44.43,8.07h-39c-14.43-3.06-29.07-4.44-43.43-8.07-89.84-22.71-161.78-94.64-184.5-184.5-3.63-14.35-5.01-28.99-8.07-43.43v-40c3.06-14.43,4.44-29.08,8.07-43.43C30.79,102.73,102.71,30.79,192.57,8.07L237,0h37ZM112,136c-8.58.97-23.39-4.03-24,8.5l-.04,238.04c.67,7.25,2.27,8.83,9.5,9.5,37.4,3.46,80-2.74,117.95.05,11.79,1.61,14.73,13.06,23.25,18.75,9.94,6.62,24.73,6.63,34.67,0,9.41-6.27,10.67-17.07,24.28-18.72,36.05-4.38,80.22,3.32,116.93-.07,7.23-.67,8.83-2.25,9.5-9.5l-.04-238.04c-.61-12.53-15.42-7.53-24-8.5-.05-10.65.04-21.35,0-32h-123.5c-5.86,0-15.04,6.99-17.7,12.3l-3.29,6.71c-1.06-6.34-6.02-13.34-11.81-16.21-.98-.49-7.7-2.8-8.2-2.8h-123.5c-.04,10.65.05,21.35,0,32Z" style="fill: #4ac594;"/>
<path d="M112,136c.05-10.65-.04-21.35,0-32h123.5c.5,0,7.22,2.31,8.2,2.8,5.78,2.87,10.74,9.87,11.81,16.21l3.29-6.71c2.66-5.3,11.84-12.3,17.7-12.3h123.5c.04,10.65-.05,21.35,0,32,.36,71.95.56,144.06,0,216h-129.5c-5.19.42-9.52,3.46-12.37,7.64-.92,1.35-.83,4.1-1.64,4.37-1.95.66-1.82-3.33-3.03-4.97-2.87-3.9-7.01-6.63-11.96-7.04H112c-.56-71.94-.36-144.05,0-216ZM176,128h-32v56h32v-56ZM195.5,132l-2.55,4.45c-.06,1.04,2.05,3.55,2.55,3.55h38c.73,0,3.08-3.17,2.55-4.45.06-1.04-2.05-3.55-2.55-3.55h-38ZM278.5,132l-2.55,4.45c-.06,1.04,2.05,3.55,2.55,3.55h91c.73,0,3.08-3.17,2.55-4.45.06-1.04-2.05-3.55-2.55-3.55h-91ZM195.5,156l-2.55,4.45c-.06,1.04,2.05,3.55,2.55,3.55h38c.73,0,3.08-3.17,2.55-4.45.06-1.04-2.05-3.55-2.55-3.55h-38ZM278.5,156l-2.55,4.45c-.06,1.04,2.05,3.55,2.55,3.55h91c.73,0,3.08-3.17,2.55-4.45.06-1.04-2.05-3.55-2.55-3.55h-91ZM195.5,180l-2.55,4.45c-.06,1.04,2.05,3.55,2.55,3.55h38c.73,0,3.08-3.17,2.55-4.45.06-1.04-2.05-3.55-2.55-3.55h-38ZM278.5,180l-2.55,4.45c-.06,1.04,2.05,3.55,2.55,3.55h91c.73,0,3.08-3.17,2.55-4.45.06-1.04-2.05-3.55-2.55-3.55h-91ZM142.5,204l-2.55,4.45c-.06,1.04,2.05,3.55,2.55,3.55h91c.73,0,3.08-3.17,2.55-4.45.06-1.04-2.05-3.55-2.55-3.55h-91ZM278.5,204l-2.55,4.45c-.06,1.04,2.05,3.55,2.55,3.55h91c.73,0,3.08-3.17,2.55-4.45.06-1.04-2.05-3.55-2.55-3.55h-91ZM142.5,228l-2.55,4.45c-.06,1.04,2.05,3.55,2.55,3.55h91c.73,0,3.08-3.17,2.55-4.45.06-1.04-2.05-3.55-2.55-3.55h-91ZM278.5,228l-2.55,4.45c-.06,1.04,2.05,3.55,2.55,3.55h91c.73,0,3.08-3.17,2.55-4.45.06-1.04-2.05-3.55-2.55-3.55h-91ZM142.5,252l-2.55,4.45c-.06,1.04,2.05,3.55,2.55,3.55h91c.5,0,2.61-2.51,2.55-3.55.53-1.28-1.82-4.45-2.55-4.45h-91ZM278.5,252l-2.55,4.45c-.06,1.04,2.05,3.55,2.55,3.55h91c.5,0,2.61-2.51,2.55-3.55.53-1.28-1.82-4.45-2.55-4.45h-91ZM142.5,276l-2.55,4.45c-.06,1.04,2.05,3.55,2.55,3.55h91c.73,0,3.08-3.17,2.55-4.45.06-1.04-2.05-3.55-2.55-3.55h-91ZM278.5,276l-2.55,4.45c-.06,1.04,2.05,3.55,2.55,3.55h91c.73,0,3.08-3.17,2.55-4.45.06-1.04-2.05-3.55-2.55-3.55h-91ZM142.5,300l-2.55,4.45c-.06,1.04,2.05,3.55,2.55,3.55h91c.73,0,3.08-3.17,2.55-4.45.06-1.04-2.05-3.55-2.55-3.55h-91ZM278.5,300l-2.55,4.45c-.06,1.04,2.05,3.55,2.55,3.55h91c.73,0,3.08-3.17,2.55-4.45.06-1.04-2.05-3.55-2.55-3.55h-91ZM142.5,324l-2.55,4.45c-.06,1.04,2.05,3.55,2.55,3.55h91c.73,0,3.08-3.17,2.55-4.45.06-1.04-2.05-3.55-2.55-3.55h-91ZM278.5,324l-2.55,4.45c-.06,1.04,2.05,3.55,2.55,3.55h91c.73,0,3.08-3.17,2.55-4.45.06-1.04-2.05-3.55-2.55-3.55h-91Z" style="fill: #fefefe;"/>
<path d="M112,136c-.36,71.95-.56,144.06,0,216,.04,5.32-.03,10.68,0,16h131.5c.72,0,5.03,2.29,6.01,2.99l6.98,9.02c.32-4.4,7.9-12.01,12.01-12.01h131.5c.03-5.32-.04-10.68,0-16,.56-71.94.36-144.05,0-216,8.58.97,23.39-4.03,24,8.5l.04,238.04c-.67,7.25-2.27,8.83-9.5,9.5-36.7,3.4-80.88-4.3-116.93.07-13.61,1.65-14.87,12.45-24.28,18.72-9.94,6.63-24.73,6.62-34.67,0-8.52-5.68-11.47-17.14-23.25-18.75-37.95-2.79-80.55,3.41-117.95-.05-7.23-.67-8.83-2.25-9.5-9.5l.04-238.04c.61-12.53,15.42-7.53,24-8.5Z" style="fill: #424d72;"/>
<path d="M112,352h129.5c4.94.41,9.09,3.14,11.96,7.04,1.21,1.64,1.08,5.63,3.03,4.97.8-.27.71-3.02,1.64-4.37,2.85-4.18,7.18-7.22,12.37-7.64h129.5c-.04,5.32.03,10.68,0,16h-131.5c-4.11,0-11.69,7.6-12.01,12.01l-6.98-9.02c-.98-.7-5.29-2.99-6.01-2.99H112c-.03-5.32.04-10.68,0-16Z" style="fill: #e2e6ed;"/>
<rect x="144" y="128" width="32" height="56" style="fill: #58d1f6;"/>
<path d="M278.5,132h91c.5,0,2.61,2.51,2.55,3.55.53,1.28-1.82,4.45-2.55,4.45h-91c-.5,0-2.61-2.51-2.55-3.55l2.55-4.45Z" style="fill: #e3e6ee;"/>
<path d="M278.5,156h91c.5,0,2.61,2.51,2.55,3.55.53,1.28-1.82,4.45-2.55,4.45h-91c-.5,0-2.61-2.51-2.55-3.55l2.55-4.45Z" style="fill: #e4e7ee;"/>
<path d="M278.5,180h91c.5,0,2.61,2.51,2.55,3.55.53,1.28-1.82,4.45-2.55,4.45h-91c-.5,0-2.61-2.51-2.55-3.55l2.55-4.45Z" style="fill: #e4e7ee;"/>
<path d="M142.5,204h91c.5,0,2.61,2.51,2.55,3.55.53,1.28-1.82,4.45-2.55,4.45h-91c-.5,0-2.61-2.51-2.55-3.55l2.55-4.45Z" style="fill: #e4e7ee;"/>
<path d="M278.5,204h91c.5,0,2.61,2.51,2.55,3.55.53,1.28-1.82,4.45-2.55,4.45h-91c-.5,0-2.61-2.51-2.55-3.55l2.55-4.45Z" style="fill: #e4e7ee;"/>
<path d="M142.5,228h91c.5,0,2.61,2.51,2.55,3.55.53,1.28-1.82,4.45-2.55,4.45h-91c-.5,0-2.61-2.51-2.55-3.55l2.55-4.45Z" style="fill: #e4e7ee;"/>
<path d="M278.5,228h91c.5,0,2.61,2.51,2.55,3.55.53,1.28-1.82,4.45-2.55,4.45h-91c-.5,0-2.61-2.51-2.55-3.55l2.55-4.45Z" style="fill: #e4e7ee;"/>
<path d="M142.5,252h91c.73,0,3.08,3.17,2.55,4.45.06,1.04-2.05,3.55-2.55,3.55h-91c-.5,0-2.61-2.51-2.55-3.55l2.55-4.45Z" style="fill: #e4e7ee;"/>
<path d="M278.5,252h91c.73,0,3.08,3.17,2.55,4.45.06,1.04-2.05,3.55-2.55,3.55h-91c-.5,0-2.61-2.51-2.55-3.55l2.55-4.45Z" style="fill: #e4e7ee;"/>
<path d="M142.5,276h91c.5,0,2.61,2.51,2.55,3.55.53,1.28-1.82,4.45-2.55,4.45h-91c-.5,0-2.61-2.51-2.55-3.55l2.55-4.45Z" style="fill: #e4e7ee;"/>
<path d="M278.5,276h91c.5,0,2.61,2.51,2.55,3.55.53,1.28-1.82,4.45-2.55,4.45h-91c-.5,0-2.61-2.51-2.55-3.55l2.55-4.45Z" style="fill: #e4e7ee;"/>
<path d="M142.5,300h91c.5,0,2.61,2.51,2.55,3.55.53,1.28-1.82,4.45-2.55,4.45h-91c-.5,0-2.61-2.51-2.55-3.55l2.55-4.45Z" style="fill: #e4e7ee;"/>
<path d="M278.5,300h91c.5,0,2.61,2.51,2.55,3.55.53,1.28-1.82,4.45-2.55,4.45h-91c-.5,0-2.61-2.51-2.55-3.55l2.55-4.45Z" style="fill: #e4e7ee;"/>
<path d="M142.5,324h91c.5,0,2.61,2.51,2.55,3.55.53,1.28-1.82,4.45-2.55,4.45h-91c-.5,0-2.61-2.51-2.55-3.55l2.55-4.45Z" style="fill: #e4e7ee;"/>
<path d="M278.5,324h91c.5,0,2.61,2.51,2.55,3.55.53,1.28-1.82,4.45-2.55,4.45h-91c-.5,0-2.61-2.51-2.55-3.55l2.55-4.45Z" style="fill: #e4e7ee;"/>
<path d="M195.5,132h38c.5,0,2.61,2.51,2.55,3.55.53,1.28-1.82,4.45-2.55,4.45h-38c-.5,0-2.61-2.51-2.55-3.55l2.55-4.45Z" style="fill: #e4e6ee;"/>
<path d="M195.5,156h38c.5,0,2.61,2.51,2.55,3.55.53,1.28-1.82,4.45-2.55,4.45h-38c-.5,0-2.61-2.51-2.55-3.55l2.55-4.45Z" style="fill: #e4e7ee;"/>
<path d="M195.5,180h38c.5,0,2.61,2.51,2.55,3.55.53,1.28-1.82,4.45-2.55,4.45h-38c-.5,0-2.61-2.51-2.55-3.55l2.55-4.45Z" style="fill: #e4e7ee;"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

2
UI/Web/src/index.html
View File

@ -4,7 +4,7 @@
<meta charset="utf-8">
<title>Kavita</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="apple-touch-icon" sizes="180x180" href="assets/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/icons/favicon-16x16.png">

15
UI/Web/src/theme/components/_buttons.scss
View File

@ -37,7 +37,20 @@
box-shadow: inset 0px -2px 0px 0px var(--btn-secondary-outline-text-color);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
.btn-actions {
color: var(--btn-fa-icon-color);
border-radius: var(--btn-actions-border-radius);
&:hover {
background-color: var(--btn-actions-hover-bg);
}
&:active, &:focus {
background-color: rgb(255 255 255 / 28%) !important;
border-color: transparent !important;
}
}
@ -45,7 +58,7 @@
filter: var(--btn-icon-filter) !important;
}
.btn-primary:disabled, .btn-primary.disabled {
.btn-primary:disabled, .btn-primary.disabled, .btn-tertiary.disabled {
background-color: var(--btn-disabled-bg-color);
color: var(--btn-disabled-text-color);
border-color: var(--btn-disabled-border-color);

2
UI/Web/src/theme/components/_input.scss
View File

@ -7,7 +7,7 @@ input:not([type="range"]), .form-control {
border-color: var(--input-focused-border-color);
background-color: var(--input-bg-color);
color: var(--input-text-color);
box-shadow: 0 0 0 0.25rem var(--input-focus-boxshadow-color);
box-shadow: 0 0 0 .25rem var(--input-focus-boxshadow-color);
}
&:read-only {

19
UI/Web/src/theme/components/_navbar.scss
View File

@ -1,7 +1,12 @@
.navbar {
background-color: var(--navbar-bg-color);
color: var(--navbar-text-color);
z-index: 1040;
background-color: var(--navbar-bg-color);
color: var(--navbar-text-color);
z-index: 1040;
border-radius: 4px;
left: 0px;
margin: var(--navbar-header-margin);
padding: 0;
height: 3rem;
}
@ -11,4 +16,10 @@ i.fa.nav {
.nav-tabs .nav-link.active::before {
transform: scaleY(0);
}
}
@media (max-width: $grid-breakpoints-lg) {
.navbar {
margin: 8px 12px;
}
}

4
UI/Web/src/theme/components/_progress.scss
View File

@ -2,6 +2,10 @@
background-color: var(--progress-bg-color);
}
.progress-bar {
background-color: var(--progress-bar-color);
}
.progress-bar.text-bg-success {
background-color: var(--progress-bar-color) !important;
}

549
UI/Web/src/theme/components/_sidenav.scss
View File

@ -1,227 +1,388 @@
@import "../variables";
//START sidebar container
.side-nav-container {
padding-bottom: 10px;
width: 190px;
background-color: var(--side-nav-bg-color);
height: calc((var(--vh) * 100) - 115px);
position: fixed;
margin: 0;
left: 10px;
top: 73px;
border-radius: var(--side-nav-border-radius);
transition:
width var(--side-nav-openclose-transition),
background-color var(--side-nav-bg-color-transition),
border-color var(--side-nav-border-transition);
border: var(--side-nav-border);
width: var(--side-nav-width);
background-color: var(--side-nav-bg-color);
height: calc((var(--vh) * 100) - 7.375rem);
position: fixed;
margin: 0;
left: 0.625rem;
top: 4rem;
border-radius: var(--side-nav-border-radius);
transition: width var(--side-nav-openclose-transition), background-color var(--side-nav-bg-color-transition), border-color var(--side-nav-border-transition);
border: var(--side-nav-border);
&::-webkit-scrollbar {
visibility: hidden;
&::-webkit-scrollbar {
visibility: hidden;
}
&.no-donate {
height: calc((var(--vh) * 100) - 5.125rem);
}
&.hidden {
display: none;
opacity: 0;
}
//START closed state of the sidebar
&.closed {
width: 4.0625rem;
overflow-x: hidden;
overflow-y: hidden;
background-color: var(--side-nav-closed-bg-color);
border: var(--side-nav-border-closed);
height: calc((var(--vh) * 100) - 6.5rem);
border-radius: unset;
.side-nav {
.side-nav-item {
color: var(--side-nav-item-closed-color);
&:hover {
&.active {
color: var(--side-nav-item-active-text-color);
}
}
.active-highlight {
opacity: 0;
}
.side-nav-text {
opacity: 0;
display: none;
}
.card-actions {
opacity: 0;
display: none;
}
}
}
}
//END closed state of the sidebar
//START sidebar
.side-nav {
overflow-y: hidden;
height: 100%;
scrollbar-gutter: stable;
scrollbar-width: thin;
//START sidebar nav item
.side-nav-item {
position: relative;
align-items: center;
display: flex;
justify-content: space-between;
width: 100%;
height: auto;
min-height: 2.6rem;
overflow: hidden;
cursor: pointer;
font-size: 0.9rem;
text-decoration: none;
color: var(--side-nav-text-color);
.phone-hidden {
display: flex;
&:first-of-type {
text-align: center;
width: 2.5rem;
margin-left: 0.3rem;
}
&:last-child {
flex-grow: 1;
justify-content: end;
}
div {
align-items: center;
height: 100%;
justify-content: inherit;
width: 100%;
i {
font-size: var(--side-nav-icon-size);
}
}
}
.active-highlight {
background-color: #2f2f2f;
background-color: rgb(255 255 255 / 9%);
width: 0.25rem;
height: 100%;
position: absolute;
left: 0;
}
.side-nav-text {
opacity: 1;
min-width: 6.25rem;
word-break: break-all;
-webkit-line-clamp: 1;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
div {
min-width: 6.375rem;
width: 100%
}
}
.card-actions {
flex-grow: 1;
justify-content: end;
display: flex;
}
&.active {
background-color: var(--side-nav-active-bg-color);
color: var(--side-nav-item-active-text-color);
.active-highlight {
background-color: var(--side-nav-item-active-color);
}
}
&:hover {
color: var(--side-nav-hover-text-color);
background-color: var(--side-nav-hover-bg-color);
}
}
//END sidebar nav item
// For firefox
@supports (-moz-appearance: none) {
scrollbar-color: transparent transparent;
scrollbar-width: thin;
}
&::-webkit-scrollbar {
background-color: transparent; /*make scrollbar space invisible */
width: inherit;
display: none;
visibility: hidden;
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: transparent; /*makes it invisible when not hovering*/
}
&:hover {
scrollbar-width: thin;
overflow-y: auto;
// For firefox
@supports (-moz-appearance: none) {
scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0);
}
&::-webkit-scrollbar-thumb {
visibility: visible;
background-color: rgba(255, 255, 255, 0.3); /*On hover, it will turn grey*/
}
}
}
//END sidebar
//START preference sidebar
&.preference {
height: calc((var(--vh)*100) - 4.6875rem);
width: 14.875rem;
.side-nav {
overflow-x: hidden;
padding-bottom: 0.625rem;
.side-nav-header {
color: #ffffff;
font-size: 0.9375rem;
&:first-of-type {
margin-top: 0.7rem;
}
}
.side-nav-item {
font-size: 0.9rem;
min-height: 1.875rem;
justify-content: unset;
margin-left: 1.125rem;
&.active {
.side-nav-text {
color: var(--side-nav-item-active-text-color);
}
}
.side-nav-text {
text-align: unset;
margin-left: 0.75rem;
font-size: 0.8125rem;
color: #999999;
}
.card-actions {
display: none;
}
}
}
}
//END preference sidebar
}
//END sidebar container
//START kavita+ subscription bottom heart button
.sidenav-bottom {
position: absolute;
bottom: 0;
width: var(--side-nav-width);
font-size: 0.75rem;
transition: width var(--side-nav-openclose-transition);
z-index: 999;
background-color: var(--side-nav-bg-color);
.donate {
.side-nav-item {
width: 100%;
padding: 0 5rem;
justify-content: center;
align-items: center;
display: flex;
min-height: 3.125rem;
color: var(--side-nav-text-color);
&:hover {
color: var(--side-nav-hover-text-color);
background-color: var(--side-nav-hover-bg-color);
}
.active-highlight {
display: none;
}
.phone-hidden {
div {
i {
font-size: var(--side-nav-icon-size);
}
}
}
.side-nav-text {
display: none !important;
}
.card-actions {
display: none;
}
}
}
//START sidebar closed
&.closed {
width: 3.4375rem;
overflow-x: hidden;
overflow-y: auto;
background-color: unset;
.side-nav-item {
width: 100%;
padding: 0;
display: block;
line-height: 2.5rem;
text-align: center;
min-height: unset;
color: var(--side-nav-item-closed-color);
&:hover {
background-color: unset !important;
}
}
}
//END sidebar closed
}
//END kavita+ subscription bottom heart button
@media (max-width: $grid-breakpoints-lg) {
.side-nav-container {
padding: 0.625rem 0;
padding-left: 0.3125rem;
width: 55vw;
background-color: var(--side-nav-mobile-bg-color);
height: 100dvh;
position: fixed;
margin: 0;
left: 0;
top: 0;
transition: width var(--side-nav-openclose-transition);
z-index: 1050;
overflow-y: auto;
border: var(--side-nav-mobile-border);
border-radius: 0rem;
&.preference {
height: calc((var(--vh) * 100));
background-color: unset;
.side-nav {
.side-nav-header {
font-size: 1.25rem;
}
.side-nav-item {
.active-highlight {
}
.side-nav-text {
div {
font-size: 1rem;
}
}
}
}
}
&.no-donate {
height: calc((var(--vh) * 100) - 82px);
}
&.hidden {
display: none;
opacity: 0;
height: 100dvh;
}
&.closed {
width: 55px;
overflow-x: hidden;
overflow-y: hidden;
background-color: var(--side-nav-closed-bg-color);
border: var(--side-nav-border-closed);
width: 0;
overflow: hidden;
box-shadow: none;
}
.side-nav {
overflow-y: hidden;
height: 100%;
mask-image: linear-gradient(to bottom, transparent, black 0%, black 97%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, transparent, black 0%, black 97%, transparent 100%);
scrollbar-gutter: stable;
scrollbar-width: thin;
// For firefox
@supports (-moz-appearance: none) {
scrollbar-color: transparent transparent;
scrollbar-width: thin;
}
&::-webkit-scrollbar {
background-color: transparent; /*make scrollbar space invisible */
width: inherit;
display: none;
visibility: hidden;
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: transparent; /*makes it invisible when not hovering*/
}
&:hover {
scrollbar-width: thin;
overflow-y: auto;
// For firefox
@supports (-moz-appearance: none) {
scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0);
}
&::-webkit-scrollbar-thumb {
visibility: visible;
background-color: rgba(255, 255, 255, 0.3); /*On hover, it will turn grey*/
}
}
.side-nav-item:first {
border-top-left-radius: var(--side-nav-border-radius);
border-top-right-radius: var(--side-nav-border-radius);
}
}
}
.sidenav-bottom {
position: absolute;
bottom: 0;
width: 190px;
font-size: 12px;
transition: width var(--side-nav-openclose-transition);
z-index: 999;
left: 10px;
.donate {
.side-nav-item {
width: 100%;
padding: 0 80px;
justify-content: center;
align-items: center;
&:hover {
background-color: unset !important;
color: white !important;
i {
color: var(--side-nav-item-closed-color) !important;
&:hover {
color: white !important;
}
}
}
span {
flex-grow: unset !important;
min-width: unset !important;
div {
min-width: unset !important;
i {
font-size: 1rem !important;
}
}
}
&.closed {
span {
&.phone-hidden {
div {
width: 100%;
}
}
.side-nav-text {
div {
width: 0;
}
}
}
}
overflow: auto;
.side-nav-item {
.active-highlight {
border-top-left-radius: 0rem;
border-bottom-left-radius: 0rem;
}
}
}
&.closed {
width: 45px;
overflow-x: hidden;
overflow-y: auto;
.side-nav-item {
width: 100%;
padding: 0;
display: block;
line-height: 40px;
text-align: center;
&:hover {
background-color: unset;
}
}
}
}
@media (max-width: $grid-breakpoints-lg) {
.side-nav-container {
padding: 10px 0;
width: 55vw;
background-color: var(--side-nav-mobile-bg-color);
height: 100dvh;
position: fixed;
margin: 0;
left: 0;
top: 0;
transition: width var(--side-nav-openclose-transition);
z-index: 1050;
overflow-y: auto;
border: var(--side-nav-mobile-border);
&.no-donate {
height: 100dvh;
}
&.closed {
width: 0;
overflow: hidden;
box-shadow: none;
}
.side-nav {
overflow: auto;
}
.side-nav-item {
padding: 0;
}
.side-nav-item:first {
border-top-left-radius: var(--side-nav-border-radius);
border-top-right-radius: var(--side-nav-border-radius);
}
.side-nav-item {
padding: 0;
}
}
.sidenav-bottom {
display: none;
&.closed {
left: 10px;
left: 0.625rem;
}
}
.side-nav-overlay {
background-color: var(--side-nav-overlay-color);
width: 100vw;
height: calc((var(--vh) * 100) - var(--nav-mobile-offset));
height: 100vh;
position: absolute;
left: 0;
top: var(--nav-mobile-offset);
z-index: 998;
top: 0;
z-index: 1041;
&.closed {
display: none;
@ -230,8 +391,8 @@
}
.btn-close {
margin-top: -28px;
margin-top: -1.75rem;
font-size: 0.8rem;
position: absolute;
right: 16px;
right: 1rem;
}

36
UI/Web/src/theme/themes/dark.scss
View File

@ -58,29 +58,32 @@
* match the non-default/alpha on launch.
*/
--colorscape-enabled: true;
/* These are the default background colors for the app. These will be updated on different pages with the generated colors. Must be RGB */
--colorscape-primary-color: rgb(38, 38, 38);
--colorscape-lighter-color: rgb(32, 32, 32);
--colorscape-darker-color: rgb(28, 28, 28);
--colorscape-complementary-color: rgb(51, 51, 51);
/* These need to be an alpha 0 variant. */
--colorscape-primary-alpha-color: rgba(38, 38, 38, 0);
--colorscape-lighter-alpha-color: rgba(32, 32, 32, 0);
--colorscape-darker-alpha-color: rgba(28, 28, 28, 0);
--colorscape-complementary-alpha-color: rgba(51, 51, 51, 0);
/* These are the default background colors. They need to match and cannot be a var reference. They will not be updated. Must be RGB */
--colorscape-primary-default-color: rgb(38, 38, 38);
--colorscape-lighter-default-color: rgb(32, 32, 32);
--colorscape-darker-default-color: rgb(28, 28, 28);
--colorscape-complementary-default-color: rgb(51, 51, 51);
/* Meta and Globals */
--theme-color: #000000;
--color-scheme: dark;
--tile-color: var(--primary-color);
--nav-offset: 60px;
--nav-mobile-offset: 55px;
/* Should we render the series cover as background on mobile */
--mobile-series-img-background: true;
@ -90,22 +93,20 @@
--setting-header-font-weight: bold;
--setting-break-color: rgba(255, 255, 255, 0.2);
/* Table */
--table-header-bg-color: rgba(0,0,0,.15);
--table-header-text-color: hsla(0,0%,100%,.9);
--table-body-bg-color: hsla(0,0%,100%,.02);
--table-body-text-color: hsla(0,0%,100%,.85);
--table-body-striped-bg-color: hsla(0,0%,100%,.25);
--table-body-border: hidden;
--table-body-striped-bg-color: var(--elevation-layer2);
/* Navbar */
--navbar-bg-color: var(--elevation-layer11-dark);
--navbar-bg-color: black;
--navbar-text-color: white;
--navbar-fa-icon-color: white;
--navbar-btn-hover-outline-color: rgba(255, 255, 255, 1);
--navbar-header-margin: 0px; // 8px allows for the Plex navbar + --nav-offset: 56px;
/* Inputs */
--input-bg-color: #343a40;
@ -124,33 +125,27 @@
--btn-primary-hover-text-color: white;
--btn-primary-hover-bg-color: var(--primary-color-darker-shade);
--btn-primary-hover-border-color: var(--primary-color-darker-shade);
--btn-primary-outline-text-color: white;
--btn-primary-outline-bg-color: transparent;
--btn-primary-outline-border-color: var(--primary-color);
--btn-primary-outline-hover-text-color: white;
--btn-primary-outline-hover-bg-color: var(--primary-color-darker-shade);
--btn-primary-outline-hover-border-color: var(--primary-color-darker-shade);
--btn-secondary-text-color: white;
--btn-secondary-bg-color: #6c757d;
--btn-secondary-border-color: #6c757d;
--btn-secondary-hover-bg-color: var(--bs-btn-hover-bg);
--btn-secondary-hover-border-color: var(--bs-btn-hover-border-color);
--btn-secondary-font-weight: bold;
--btn-secondary-outline-text-color: white;
--btn-secondary-outline-bg-color: transparent;
--btn-secondary-outline-border-color: transparent;
--btn-secondary-outline-hover-bg-color: transparent;
--btn-secondary-outline-hover-border-color: transparent;
--btn-secondary-outline-font-weight: bold;
--btn-primary-text-text-color: white;
--btn-secondary-text-text-color: lightgrey;
--btn-danger-text-text-color: var(--error-color);
--btn-alt-bg-color: #424c72;
--btn-alt-border-color: #444f75;
--btn-alt-hover-bg-color: #3b4466;
@ -161,6 +156,8 @@
--btn-disabled-text-color: white;
--btn-disabled-border-color: #6c757d;
--bs-btn-disabled-border-color: transparent;
--btn-actions-border-radius: 0.375rem;
--btn-actions-hover-bg: rgb(255 255 255 / 18%);
/* Nav (Tabs) */
--nav-item-min-width: 150px;
@ -204,7 +201,6 @@
--alert-text-color: #fff3cd;
--alert-bg-color: transparent;
/* Checkboxes/Switch */
--checkbox-checked-bg-color: var(--primary-color);
--checkbox-border-color: var(--input-focused-border-color);
@ -220,6 +216,8 @@
--tagbadge-filled-bg-color: var(--primary-color);
/* Side Nav */
--side-nav-width: 230px;
--side-nav-icon-size: 0.9rem;
--side-nav-bg-color: var(--elevation-layer9-dark);
--side-nav-mobile-bg-color: var(--elevation-layer2-dark-solid);
--side-nav-openclose-transition: 0.15s ease-in-out;
@ -227,8 +225,8 @@
--side-nav-mobile-box-shadow: 3px 0em 5px 10em rgb(0 0 0 / 50%);
--side-nav-hover-text-color: white;
--side-nav-hover-bg-color: black;
--side-nav-text-color: white;
--side-nav-border-radius: 5px;
--side-nav-text-color: hsla(0,0%,100%,.85);
--side-nav-border-radius: 3px;
--side-nav-border: none;
--side-nav-border-closed: none;
--side-nav-border-transition: 0.5s ease-in-out;
@ -236,13 +234,12 @@
--side-nav-bg-color-transition: 0.5s ease-in-out;
--side-nav-closed-bg-color: transparent;
--side-nav-item-active-color: var(--primary-color);
--side-nav-item-active-text-color: white;
--side-nav-item-active-text-color: #fff;
--side-nav-active-bg-color: transparent;
--side-nav-overlay-color: var(--elevation-layer11-dark);
--side-nav-item-closed-color: var(--elevation-layer10);
--side-nav-item-closed-hover-color: white;
/* List items */
--list-group-item-text-color: var(--body-text-color);
--list-group-item-bg-color: transparent;
@ -324,6 +321,7 @@
--grid-breakpoints-xl: $grid-breakpoints-xl;
--body-font-family: "EBGaramond", "Helvetica Neue", sans-serif;
--brand-font-family: "Spartan", sans-serif;
--html-font-size: 16px;
/* Card */
--card-bg-color: var(--elevation-layer3);
@ -334,7 +332,7 @@
--card-border-radius: 5px;
--card-progress-bar-color: var(--primary-color);
--card-overlay-bg-color: rgba(0, 0, 0, 0);
--card-overlay-hover-bg-color: rgba(0, 0, 0, 0.4);
--card-overlay-hover-bg-color: rgba(30,30,30,.6);
--card-progress-triangle-size: 28px;
/* Slider */
@ -375,14 +373,14 @@
--event-widget-update-bg-color: var(--primary-color);
--event-widget-activity-bg-color: var(--primary-color);
/* Search */
--search-result-text-lite-color: initial;
--searchbar-bg-color: rgb(255 255 255 / 12%);
/* Bulk Selection */
--bulk-selection-text-color: var(--navbar-text-color);
--bulk-selection-highlight-text-color: var(--primary-color);
--bulk-selection-bg-color: rgba(39,39,39,1);
--bulk-selection-bg-color: var(--elevation-layer11-dark);
/* List Card Item */
--card-list-item-bg-color: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.15) 1%, rgba(0,0,0,0) 100%);

4
UI/Web/src/theme/utilities/_global.scss
View File

@ -1,5 +1,9 @@
// Global styles for the site. Keep this as small as possible
html {
font-size: var(--html-font-size);
}
html, body { height: 100%; overflow: hidden; }
body {
margin: 0;