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

Styling fixes

Browse Source
This commit is contained in:
Fornax
2022-12-05 15:01:04 +01:00
parent 735d58ac9a
commit 81929bb016
9 changed files with 73 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
res/static/style/layout.css
View File

@@ -98,6 +98,10 @@ footer>.footer_content {
background-color: var(--body_background);
color: var(--body_text_color);
display: inline-block;
width: 1000px;
max-width: 100%;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 8px;
margin: 120px 0 60px 0;
}
@@ -155,8 +159,8 @@ footer>.footer_content {
.page_content {
background: var(--body_background);
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
transition: border-top-left-radius 1s, border-bottom-left-radius 1s;
}
@@ -643,9 +647,9 @@ input[type=file] {
/* Webkit Scrollbars */
::-webkit-scrollbar {
width: 18px;
width: 16px;
/* for vertical scrollbars */
height: 18px;
height: 16px;
/* for horizontal scrollbars */
}
@@ -656,7 +660,7 @@ input[type=file] {
::-webkit-scrollbar-thumb {
background-color: var(--scrollbar_foreground_color);
border-radius: 10px;
border: 5px solid var(--body_color);
border: 4px solid var(--body_color);
height: 40px;
width: 40px;
}

18
res/template/fragments/page_wrap.html
View File

@@ -34,14 +34,18 @@ function toggleMenu() {
// Menu is visible, hide it
nav.style.left = -nav.offsetWidth + "px";
body.style.marginLeft = "0";
content.style.borderTopLeftRadius = "0"
content.style.borderBottomLeftRadius = "0"
if (content) {
content.style.borderTopLeftRadius = "0"
content.style.borderBottomLeftRadius = "0"
}
} else {
// Menu is hidden, show it
nav.style.left = "0";
body.style.marginLeft = nav.offsetWidth + "px";
content.style.borderTopLeftRadius = "12px"
content.style.borderBottomLeftRadius = "12px"
if (content) {
content.style.borderTopLeftRadius = "8px"
content.style.borderBottomLeftRadius = "8px"
}
}
}
function resetMenu() {
@@ -54,17 +58,15 @@ function resetMenu() {
{{define "footer"}}
<footer>
<div class="footer_content">
<div style="display: inline-block; margin: 0 8px 0 8px;">
<div style="display: inline-block; margin: 0 8px;">
Pixeldrain is a product by <a href="//fornaxian.tech" target="_blank">Fornaxian Technologies</a>
</div>
<div style="display: inline-block; margin: 0 8px 0 8px;">
(
<div style="display: inline-block; margin: 0 8px;">
<a href="https://www.patreon.com/pixeldrain" target="_blank">{{template `patreon.svg` .}} Patreon</a> |
<a href="https://twitter.com/Fornax96" target="_blank">{{template `twitter.svg` .}} Twitter</a> |
<a href="https://reddit.com/r/pixeldrain" target="_blank">{{template `reddit.svg` .}} Reddit</a> |
<a href="https://github.com/Fornaxian" target="_blank">{{template `github.svg` .}} GitHub</a> |
<a href="https://mastodon.social/web/@fornax" target="_blank">{{template `mastodon.svg` .}} Mastodon</a>
)
</div>
<br/>
<span class="small_footer_text" style="font-size: .75em; line-height: .75em;">

4
svelte/src/file_viewer/FilePicker.svelte
View File

@@ -116,7 +116,7 @@ const keydown = (e) => {
flex-direction: row;
align-items: center;
justify-content: center;
font-size: 1.2em;
font-size: 1em;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
@@ -125,12 +125,14 @@ const keydown = (e) => {
flex-grow: 1;
flex-shrink: 1;
text-align: center;
font-size: 1.2em;
}
.search {
min-width: 100px;
max-width: 300px;
flex-grow: 1;
flex-shrink: 1;
align-self: stretch;
}
@media(max-width: 700px) {
.title {

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

@@ -684,7 +684,7 @@ const keyboard_event = evt => {
transition: left 0.5s;
overflow: auto;
text-align: center;
border-radius: 12px;
border-radius: 8px;
border: 2px solid var(--separator);
}
.file_preview.toolbar_visible { left: 8.2em; }

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

@@ -105,7 +105,7 @@ export const set_item = idx => {
.nav_button{
flex-grow: 0;
flex-shrink: 0;
margin: 6px;
margin: 4px;
}
.list_navigator {
@@ -118,9 +118,9 @@ export const set_item = idx => {
.file_button {
position: relative;
height: 50px;
height: 48px;
width: 220px;
margin: 6px;
margin: 4px 3px;
padding: 0;
overflow: hidden;
border-radius: 6px;

6
svelte/src/layout/Footer.svelte
View File

@@ -8,11 +8,10 @@ import Twitter from "../icons/Twitter.svelte";
<footer>
<div class="footer_content">
<div style="display: inline-block; margin: 0 8px 0 8px;">
<div style="display: inline-block; margin: 0 8px;">
Pixeldrain is a product by <a href="//fornaxian.tech" target="_blank">Fornaxian Technologies</a>
</div>
<div style="display: inline-block; margin: 0 8px 0 8px;">
(
<div style="display: inline-block; margin: 0 8px;">
<a href="https://www.patreon.com/pixeldrain" target="_blank">
<Patreon style="color: var(--body_text_color);"/> Patreon
</a> |
@@ -28,7 +27,6 @@ import Twitter from "../icons/Twitter.svelte";
<a href="https://mastodon.social/web/@fornax" target="_blank">
<Mastodon style="color: var(--body_text_color);"/> Mastodon
</a>
)
</div>
<br/>
<span class="small_footer_text" style="font-size: .75em; line-height: .75em;">

4
svelte/src/user_file_manager/DirectoryElement.svelte
View File

@@ -357,7 +357,7 @@ const node_click = (index) => {
overflow: hidden;
background: var(--body_background);
min-width: 850px;
border-top-left-radius: 16px;
border-top-left-radius: 8px;
border-bottom: 1px solid var(--separator);
}
.sorter_button {
@@ -387,7 +387,7 @@ const node_click = (index) => {
padding: 0;
overflow-x: auto;
background: var(--body_background);
border-bottom-left-radius: 16px;
border-bottom-left-radius: 8px;
}
#node_container {
display: block;

2
svelte/src/util/Modal.svelte
View File

@@ -94,7 +94,7 @@ these padding divs to move it 25% up */
max-height: 100%;
max-width: 100%;
padding: 0;
border-radius: 20px 20px 12px 12px;
border-radius: 20px 20px 8px 8px;
overflow: hidden;
text-align: left;
}

94
webcontroller/style.go
View File

@@ -115,7 +115,7 @@ type styleSheet struct {
Highlight HSL // Links, highlighted buttons, list navigation
HighlightText HSL // Text on buttons
Danger HSL
ScrollbarForeground CSS // Based on Highlight if undefined
ScrollbarForeground CSS // Based on Input if undefined
ScrollbarHover CSS // Based on ScrollbarForeground if undefined
BackgroundColor HSL
@@ -153,7 +153,7 @@ func (s styleSheet) withDefaults() styleSheet {
}
defaultHSL(&s.Link, s.Highlight.Add(0, 0, -.05))
defaultCSS(&s.ScrollbarForeground, s.Input)
defaultCSS(&s.ScrollbarHover, s.Highlight)
defaultCSS(&s.ScrollbarHover, s.InputHover)
defaultHSL(&s.Chart1, s.Highlight)
defaultHSL(&s.Chart2, s.Chart1.Add(120, 0, 0))
defaultHSL(&s.Chart3, s.Chart2.Add(120, 0, 0))
@@ -333,15 +333,13 @@ var purpleDrainStyle = styleSheet{
}
var classicStyle = styleSheet{
Input: HSL{0, 0, .18},
InputHover: HSL{0, 0, .22},
InputText: HSL{0, 0, .9},
InputDisabledText: HSL{0, 0, .4},
Highlight: HSL{89, .60, .45},
HighlightText: HSL{0, 0, 0},
Danger: HSL{339, .65, .31},
ScrollbarForeground: HSL{0, 0, .40},
ScrollbarHover: HSL{0, 0, .50},
Input: HSL{0, 0, .18},
InputHover: HSL{0, 0, .22},
InputText: HSL{0, 0, .9},
InputDisabledText: HSL{0, 0, .4},
Highlight: HSL{89, .60, .45},
HighlightText: HSL{0, 0, 0},
Danger: HSL{339, .65, .31},
BackgroundColor: HSL{0, 0, .08},
BodyColor: HSL{0, 0, .12},
@@ -352,15 +350,13 @@ var classicStyle = styleSheet{
}
var maroonStyle = styleSheet{
Input: HSL{0, .8, .20}, // hsl(0, 87%, 40%)
InputHover: HSL{0, .8, .24},
InputText: HSL{0, 0, 1},
InputDisabledText: HSL{0, 0, .5},
Highlight: HSL{137, 1, .37}, //hsl(137, 100%, 37%)
HighlightText: HSL{0, 0, 0},
Danger: HSL{9, .96, .42}, //hsl(9, 96%, 42%)
ScrollbarForeground: HSL{0, .75, .3},
ScrollbarHover: HSL{0, .75, .4},
Input: HSL{0, .8, .20}, // hsl(0, 87%, 40%)
InputHover: HSL{0, .8, .25},
InputText: HSL{0, 0, 1},
InputDisabledText: HSL{0, 0, .5},
Highlight: HSL{137, 1, .37}, //hsl(137, 100%, 37%)
HighlightText: HSL{0, 0, 0},
Danger: HSL{9, .96, .42}, //hsl(9, 96%, 42%)
BackgroundColor: HSL{0, .7, .05},
BodyColor: HSL{0, .8, .08}, // HSL{0, .8, .15},
@@ -371,15 +367,13 @@ var maroonStyle = styleSheet{
}
var hackerStyle = styleSheet{
Input: HSL{0, 0, .1},
InputHover: HSL{0, 0, .14},
InputText: HSL{0, 0, 1},
InputDisabledText: HSL{0, 0, .5},
Highlight: HSL{120, .8, .5},
HighlightText: HSL{0, 0, 0},
Danger: HSL{0, 1, .4},
ScrollbarForeground: HSL{120, .5, .25},
ScrollbarHover: HSL{120, .5, .35},
Input: HSL{0, 0, .1},
InputHover: HSL{0, 0, .15},
InputText: HSL{0, 0, 1},
InputDisabledText: HSL{0, 0, .5},
Highlight: HSL{120, .8, .5},
HighlightText: HSL{0, 0, 0},
Danger: HSL{0, 1, .4},
BackgroundColor: HSL{0, 0, 0},
BodyColor: HSL{0, 0, .03},
@@ -390,15 +384,13 @@ var hackerStyle = styleSheet{
}
var cantaPixeldrainStyle = styleSheet{
Input: HSL{167, .06, .30}, // hsl(167, 6%, 30%)
InputHover: HSL{167, .06, .34}, // hsl(167, 6%, 30%)
InputText: HSL{0, 0, 1},
InputDisabledText: HSL{0, 0, .5},
Highlight: HSL{165, 1, .40}, // hsl(165, 100%, 40%)
HighlightText: HSL{0, 0, 0},
Danger: HSL{40, 1, .5}, // hsl(40, 100%, 50%)
ScrollbarForeground: HSL{204, .05, .78}, // hsl(204, 5%, 78%)
ScrollbarHover: HSL{204, .05, .88},
Input: HSL{167, .06, .30}, // hsl(167, 6%, 30%)
InputHover: HSL{167, .06, .35}, // hsl(167, 6%, 30%)
InputText: HSL{0, 0, 1},
InputDisabledText: HSL{0, 0, .5},
Highlight: HSL{165, 1, .40}, // hsl(165, 100%, 40%)
HighlightText: HSL{0, 0, 0},
Danger: HSL{40, 1, .5}, // hsl(40, 100%, 50%)
BackgroundColor: HSL{180, .04, .16},
BodyColor: HSL{168, .05, .21},
@@ -409,15 +401,13 @@ var cantaPixeldrainStyle = styleSheet{
}
var skeuosPixeldrainStyle = styleSheet{
Input: HSL{226, .15, .23}, //hsl(226, 15%, 23%)
InputHover: HSL{226, .15, .27},
InputText: HSL{60, .06, .93},
InputDisabledText: HSL{0, 0, .5},
Highlight: HSL{282, .65, .54}, // hsl(282, 65%, 54%)
HighlightText: HSL{0, 0, 1},
Danger: HSL{0, .79, .43}, // hsl(0, 79%, 43%)
ScrollbarForeground: HSL{220, .02, .62}, // hsl(220, 2%, 62%)
ScrollbarHover: HSL{220, .02, .80},
Input: HSL{226, .15, .23}, //hsl(226, 15%, 23%)
InputHover: HSL{226, .15, .28},
InputText: HSL{60, .06, .93},
InputDisabledText: HSL{0, 0, .5},
Highlight: HSL{282, .65, .54}, // hsl(282, 65%, 54%)
HighlightText: HSL{0, 0, 1},
Danger: HSL{0, .79, .43}, // hsl(0, 79%, 43%)
BackgroundColor: HSL{232, .14, .11}, //hsl(232, 14%, 11%)
BodyColor: HSL{229, .14, .16}, // hsl(229, 14%, 16%)
@@ -485,7 +475,7 @@ var nordLightStyle = styleSheet{
var sweetPixeldrainStyle = styleSheet{
Input: HSL{229, .25, .18}, // hsl(229, 25%, 14%)
InputHover: HSL{229, .25, .22}, // hsl(229, 25%, 14%)
InputHover: HSL{229, .25, .23}, // hsl(229, 25%, 14%)
InputText: HSL{223, .13, .79},
InputDisabledText: HSL{0, 0, .5},
Highlight: HSL{296, .88, .44},
@@ -502,7 +492,7 @@ var sweetPixeldrainStyle = styleSheet{
var adwaitaDarkStyle = styleSheet{
Input: RGBA{255, 255, 255, .06},
InputHover: RGBA{255, 255, 255, .1},
InputHover: RGBA{255, 255, 255, .11},
InputText: HSL{0, 0, 1},
InputDisabledText: HSL{0, 0, .5},
Highlight: HSL{152, .62, .39}, // hsl(152, 62%, 39%)
@@ -519,7 +509,7 @@ var adwaitaDarkStyle = styleSheet{
var adwaitaLightStyle = styleSheet{
Input: RGBA{0, 0, 0, .06},
InputHover: RGBA{0, 0, 0, .1},
InputHover: RGBA{0, 0, 0, .11},
InputText: HSL{0, 0, .2},
InputDisabledText: HSL{0, 0, .7},
Highlight: HSL{152, .62, .47}, // hsl(152, 62%, 47%)
@@ -537,7 +527,7 @@ var adwaitaLightStyle = styleSheet{
var solarizedDarkStyle = styleSheet{
Input: HSL{192, .81, .18}, // hsl(194, 14%, 40%)
InputHover: HSL{192, .81, .22}, // hsl(196, 13%, 45%)
InputHover: HSL{192, .81, .23}, // hsl(196, 13%, 45%)
InputText: HSL{180, .07, .80}, // hsl(44, 87%, 94%)
InputDisabledText: HSL{194, .14, .30}, // hsl(194, 14%, 40%)
Highlight: HSL{68, 1, .30}, // hsl(68, 100%, 30%)
@@ -554,7 +544,7 @@ var solarizedDarkStyle = styleSheet{
var solarizedLightStyle = styleSheet{
Input: HSL{46, .42, .84},
InputHover: HSL{46, .42, .82},
InputHover: HSL{46, .42, .80},
InputText: HSL{194, .14, .20}, // hsl(192, 81%, 14%)
InputDisabledText: HSL{44, .87, .94},
Highlight: HSL{68, 1, .30}, // hsl(68, 100%, 30%)