Backup_Repos/filestash
1
0
Fork 0
mirror of https://github.com/mickael-kerjean/filestash synced 2026-01-03 22:33:08 +01:00
Code Issues Projects Releases Wiki Activity

fix (darkmode): better colors for dark mode

Browse source
This commit is contained in:
Mickael Kerjean 2023-04-24 23:29:00 +10:00
parent 67d42b4afe
commit be48e1c855
12 changed files with 43 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/pages/viewerpage.scss
View file

@ -26,7 +26,7 @@
}
.box {
background: white;
box-shadow: rgba(158, 163, 172, 0.3) 3px 3px 10px;
box-shadow: rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px, rgba(0, 0, 0, 0.2) 0px 2px 4px -1px;
}
}
}

5
client/pages/viewerpage/appframe.scss
View file

@ -1,6 +1,9 @@
body:not(.dark-mode) .component_appframe {
background: #525659;
}
.component_appframe {
text-align: center;
background: #525659;
width: 100%;
iframe {

4
client/pages/viewerpage/audioplayer.scss
View file

@ -1,3 +1,6 @@
body:not(.dark-mode) .component_audioplayer > .audioplayer_container {
background: #525659;
}
.component_audioplayer{
display: flex;
flex-direction: column;
@ -10,7 +13,6 @@
flex: 1;
width: 100%;
text-align: center;
background: #525659;
height: 100%;
overflow: hidden;
padding: 20px;

14
client/pages/viewerpage/ebookviewer.js
View file

@ -1,9 +1,13 @@
import React, { useEffect } from "react";
import React, { useEffect, useState } from "react";
import { MenuBar } from "./menubar";
import { Loader } from "../../components/";
import "./ebookviewer.scss";
import ePub, { Book } from "epubjs";
export function EbookViewer({ filename, data }) {
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const book = new Book({ replacements: "blobUrl" });
book.open(data);
@ -11,6 +15,9 @@ export function EbookViewer({ filename, data }) {
width: "100%", height: "100%",
flow: "scrolled-doc",
});
rendition.hooks.render.register(function() {
setIsLoading(false);
});
const displayed = rendition.display();
return () => {
book.destroy();
@ -20,6 +27,11 @@ export function EbookViewer({ filename, data }) {
return (
<div className="component_ebookviewer">
<MenuBar title={filename} download={data} />
{
isLoading && (
<Loader />
)
}
<div className="ebookviewer_container" id="epubjs"></div>
</div>
)

2
client/pages/viewerpage/ebookviewer.scss
View file

@ -10,7 +10,7 @@
flex-grow: 1;
min-height: 0;
.epub-container {
background: white;
background: var(--super-light);
padding-top: 50px;
padding-bottom: 50px;
box-sizing: border-box;

6
client/pages/viewerpage/filedownloader.scss
View file

@ -1,6 +1,6 @@
body:not(.dark-mode) .component_filedownloader {
background: #525659;
.download_button { background: rgba(0,0,0,0.4); }
.download_button a > div { color: var(--light); }
}
.component_filedownloader {
text-align: center;
@ -8,7 +8,7 @@ body:not(.dark-mode) .component_filedownloader {
.download_button{
padding: 15px 20px;
background: rgba(255,255,255,0.05);
background: var(--dark);
border-radius: 3px;
color: inherit;
display: inline-block;
@ -20,7 +20,7 @@ body:not(.dark-mode) .component_filedownloader {
font-size: 17px;
display: inline-block;
text-transform: uppercase;
color: var(--light);
color: var(--super-light);
font-weight: bold;
}
// loading

3
client/pages/viewerpage/formviewer.scss
View file

@ -1,3 +1,6 @@
body:not(.dark-mode) .component_formviewer {
background: #525659;
}
.component_formviewer{
display: flex;
flex-direction: column;

6
client/pages/viewerpage/imageviewer.scss
View file

@ -1,3 +1,6 @@
body:not(.dark-mode) .component_imageviewer .component_image_container {
&, .fullscreen .component_pager .wrapper > span { background: #525659; }
}
.component_imageviewer{
&, .component_image_container > .images_wrapper, .component_image_container > .images_wrapper > span, .component_image_container > .images_wrapper > span > div{
flex: 1;
@ -11,7 +14,7 @@
&.fullscreen{
background: var(--dark);
.component_pager .wrapper > span{
background: #525659;
background: var(--dark);
}
img[srcset]{
background: var(--color);
@ -23,7 +26,6 @@
height: 100%;
width: 100%;
text-align: center;
background: #525659;
overflow: hidden;
padding: 15px 10px 65px 10px;
&.component_image_no_pager { padding-bottom: 15px; }

3
client/pages/viewerpage/org_viewer.scss
View file

@ -1,6 +1,5 @@
.component_modal.todo-modal{
background: var(--super-light);
background: linear-gradient(var(--super-light), var(--bg-color));
background: var(--bg-color);
> div{
width: calc(100% - 20px);

2
client/pages/viewerpage/pdfviewer.js
View file

@ -48,7 +48,7 @@ function PDFEmbedViewer({ src }) {
ref={$embed}
src={`${src}#toolbar=0`}
type="application/pdf"
style={{ height: "100%", width: "100%" }}
style={{ height: "100%", width: "100%", "opacity": (isLoading ? "0": "1") }}
/>
</React.Fragment>
);

8
client/pages/viewerpage/pdfviewer.scss
View file

@ -1,3 +1,7 @@
body:not(.dark-mode) .component_pdfviewer .pdfviewer_container {
background: #525659;
}
.component_pdfviewer{
display: flex;
flex-direction: column;
@ -5,9 +9,8 @@
width: 100%;
flex-grow: 1;
.pdfviewer_container{
.pdfviewer_container {
text-align: center;
background: #525659;
height: 100%;
width: 100%;
flex-grow: 1;
@ -21,6 +24,7 @@
height: 100%;
.react-pdf__Page{
margin-top: 15px;
padding-bottom: 50px;
}
}
}

4
client/pages/viewerpage/videoplayer.scss
View file

@ -1,5 +1,7 @@
.component_videoplayer {
body:not(.dark-mode) .component_videoplayer {
background: #525659;
}
.component_videoplayer {
display: flex;
flex: 1;
flex-direction: column;