pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace some shadows with borders

Browse Source
This commit is contained in:
Fornax
2022-06-21 14:00:03 +02:00
parent 75f56decbb
commit 467e92c7a3
13 changed files with 275 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
svelte/src/file_viewer/FileViewer.svelte
View File

@@ -429,7 +429,7 @@ const keyboard_event = evt => {
<div id="toolbar" class="toolbar" class:toolbar_visible>
{#if view === "file"}
<FileStats file={file}></FileStats>
<hr/>
<div class="separator"></div>
{/if}
{#if file.abuse_type === "" && view === "file"}
@@ -514,7 +514,7 @@ const keyboard_event = evt => {
</button>
{/if}
<hr/>
<div class="separator"></div>
{#if file.can_edit || list.can_edit}
<button
@@ -690,8 +690,8 @@ const keyboard_event = evt => {
}
.file_preview {
position: absolute;
left: 4px;
right: 4px;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: block;
@@ -700,8 +700,8 @@ const keyboard_event = evt => {
transition: left 0.5s;
overflow: auto;
text-align: center;
box-shadow: inset 0 0 3px -1px var(--shadow_color);
border-radius: 16px;
border-radius: 12px;
border: 2px solid var(--separator);
}
.file_preview.toolbar_visible { left: 8em; }
.file_preview.skyscraper_visible { right: 160px; }
@@ -737,4 +737,10 @@ const keyboard_event = evt => {
.toolbar_button > span {
vertical-align: middle;
}
.toolbar > .separator {
height: 2px;
width: 100%;
margin: 10px 0;
background-color: var(--separator);
}
</style>

12
svelte/src/file_viewer/GalleryView.svelte
View File

@@ -162,7 +162,6 @@ const drop = (e, index) => {
<style>
.gallery{
padding: 16px;
width: 100%;
max-height: 100%;
overflow: auto;
@@ -171,15 +170,12 @@ const drop = (e, index) => {
justify-content: center;
}
.file{
position: relative;
width: 200px;
max-width: 45%;
max-width: 42%;
height: 200px;
margin: 8px;
padding: 0;
overflow: hidden;
border-radius: 8px;
box-shadow: 1px 1px 3px -1px var(--shadow_color);
background: var(--input_background);
word-break: break-all;
text-align: center;
@@ -194,13 +190,15 @@ const drop = (e, index) => {
.file:hover {
background: var(--input_hover_background);
}
.highlight {
box-shadow: 0 0 2px 2px var(--highlight_color);
text-decoration: none;
}
.icon_container {
width: 100%;
height: 136px;
margin: 3px;
height: 154px;
border-radius: 6px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;

51
svelte/src/file_viewer/ListNavigator.svelte
View File

@@ -81,9 +81,9 @@ export const set_item = idx => {
<a
href="#item={index}"
title="Open {file.name}"
class="list_item file_button"
class="file_button"
class:file_selected={file.selected}>
<img src={file.icon_href+"?width=48&height=48"} alt={file.name} class="list_item_thumbnail" loading="lazy"/>
<img src={file.icon_href+"?width=64&height=64"} alt={file.name} class="list_item_thumbnail" loading="lazy"/>
{file.name}
</a>
{/each}
@@ -97,7 +97,7 @@ export const set_item = idx => {
display: flex;
position: relative;
width: 100%;
border-top: 1px solid var(--separator);
border-top: 2px solid var(--separator);
text-align: center;
line-height: 1em;
@@ -105,13 +105,9 @@ export const set_item = idx => {
.nav_button{
flex-grow: 0;
flex-shrink: 0;
margin-top: 8px;
margin: 6px;
}
.list_item {
height: 2.6em !important;
width: 220px !important;
}
.list_navigator {
flex-grow: 1;
flex-shrink: 1;
@@ -120,8 +116,43 @@ export const set_item = idx => {
white-space: nowrap;
}
.file_selected {
box-shadow: 0 0 2px 2px var(--highlight_color);
.file_button {
position: relative;
height: 50px;
width: 220px;
margin: 6px;
padding: 0;
overflow: hidden;
border-radius: 6px;
background: var(--input_background);
color: var(--body_text_color);
word-break: break-all;
text-align: left;
line-height: 1.2em;
display: inline-block;
transition: background 0.2s;
white-space: normal;
text-decoration: none;
vertical-align: top;
cursor: pointer;
border-width: 2px;
border-style: solid;
border-color: var(--input_background);
}
.file_button:hover {
text-decoration: none;
background: var(--input_hover_background);
}
.file_button>img {
height: 100%;
margin-right: 5px;
float: left;
display: block;
}
.file_selected {
text-decoration: none;
border-color: var(--highlight_color);
}
</style>

2
svelte/src/file_viewer/viewers/Image.svelte
View File

@@ -85,7 +85,7 @@ const mouseup = (e) => {
top: 50%;
cursor: pointer;
transform: translateY(-50%);
box-shadow: 1px 1px 6px var(--shadow_color);
box-shadow: 0 0 4px var(--shadow_color);
}
.image.zoom {
max-width: none;

6
svelte/src/file_viewer/viewers/Text.svelte
View File

@@ -104,13 +104,9 @@ const code = async file => {
<style>
.container {
background: var(--body_color);
border: 2px solid var(--separator);
border-radius: 16px;
position: relative;
text-align: left;
height: 100%;
width: 100%;
font-size: 0.9em;
line-height: 1.5em;
overflow-y: auto;
overflow-x: hidden;
@@ -121,10 +117,12 @@ const code = async file => {
white-space: pre-wrap;
overflow: hidden;
border: none;
font-size: 0.9em;
}
.container > .md {
display: block;
padding: 10px;
margin: auto;
text-align: justify;
}
</style>

3
svelte/src/file_viewer/viewers/Video.svelte
View File

@@ -194,7 +194,6 @@ h1 {
display: flex;
flex-direction: row;
background-color: var(--shaded_background);
box-shadow: 1px 1px 6px var(--shadow_color);
padding: 0 2px 2px 2px;
align-items: center;
}
@@ -212,7 +211,7 @@ h1 {
max-height: 100%;
top: 50%;
transform: translateY(-50%);
box-shadow: 1px 1px 6px var(--shadow_color);
box-shadow: 0 0 4px var(--shadow_color);
}
.video_icon {
display: inline-block;