split/monofile
1
0
Fork 0
mirror of https://github.com/mollersuite/monofile.git synced 2024-11-21 21:36:26 -08:00
Code Issues Actions Packages Projects Releases 1 Wiki Activity

palettes: ok i'm done for the night

Browse source
This commit is contained in:
May 2023-10-16 06:15:16 +00:00
parent 633dc45687
commit 063343fdb1
13 changed files with 80 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
config.json
View file

@ -7,7 +7,7 @@
"maxUploadIdLength":30, "maxUploadIdLength":30,
"accounts": { "accounts": {
"registrationEnabled": true, "registrationEnabled": false,
"requiredForUpload": false "requiredForUpload": false
}, },

36
src/style/_base.scss
View file

@ -39,24 +39,42 @@ $FallbackFonts:
colors colors
*/ */
$Background: #252525; :root {
/* hsl(210,12.9,24.3) */ // Crust (topbar)
$darkish: rgb(54, 62, 70); --crust: rgb(30, 33, 36); // topbar color
--crust-txt: #555555; // buttons
--crust-txt-active: slategrey; // hover
// Background
--background: linear-gradient(#333,#252525); // Used for desktop.
--background-readable: linear-gradient(#303030, #252525); // Used for mobile, where the uploader is backed a gradient.
// Panel (pulldown, upload panel)
--panel: #222222;
--subpanel: #191919;
// Panel banners
--panel-banner-error: #663333;
--panel-banner-warning: #554C33;
--panel-banner-success: #335544;
--panel-banner-info: #334466;
// Text
--text-visible: #FFF; // Use for best possible visibility. Used in button interactives on hover.
--text: #DDD;
--subtext: #999;
}
/* /*
then other stuff then other stuff
*/ */
body { body {
background-color: rgb(30, 33, 36); // this is here so that background-color: var(--crust); // this is here so that
// pulling down to refresh // pulling down to refresh
// on mobile looks good // on mobile looks good
} }
#appContent {
background-color: $Background
}
/* /*
scrollbars scrollbars
*/ */
@ -70,7 +88,7 @@ body {
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background-color:#222222; background-color:var(--panel);
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {

24
src/style/app.scss
View file

@ -3,36 +3,16 @@
@use "app/pulldown"; @use "app/pulldown";
@use "app/uploads"; @use "app/uploads";
.menuBtn {
text-decoration:none;
font-size:16px;
transition-duration: 100ms;
color:#555555;
background-color: #00000000;
border:none;
margin:0 0 0 0;
cursor:pointer;
position:relative;
top:-1px;
&:hover {
color:slategray;
transition-duration: 100ms;
}
}
#appContent { #appContent {
position:absolute; position:absolute;
left:0px; left:0px;
top:40px; top:40px;
width:100%; width:100%;
height: calc( 100% - 40px ); height: calc( 100% - 40px );
background-image: linear-gradient(#333,base.$Background); background: var(--background);
@media screen and (max-width:500px) { @media screen and (max-width:500px) {
background-image: linear-gradient(#303030,base.$Background); background: var(--background-readable);
} }
} }

4
src/style/app/pulldown.scss
View file

@ -21,8 +21,8 @@
position: absolute; position: absolute;
width: 300px; width: 300px;
height: 400px; height: 400px;
background-color: #222222; background-color: var(--panel);
color: #dddddd; color: var(--text);
top:0px; top:0px;
left:50%; left:50%;

8
src/style/app/pulldown/accounts.scss
View file

@ -25,14 +25,14 @@
font-size:16px; font-size:16px;
} }
color:#999999; color:var(--subtext);
margin: 0 0 10px 0; margin: 0 0 10px 0;
} }
button { button {
cursor:pointer; cursor:pointer;
background-color:#393939; background-color:#393939;
color:#DDDDDD; color:var(--text);
border:none; border:none;
outline:none; outline:none;
padding:5px; padding:5px;
@ -67,7 +67,7 @@
width:100%; width:100%;
padding:5px; padding:5px;
background-color:#333333; background-color:#333333;
color:#dddddd; color:var(--text);
outline:none; outline:none;
@media screen and (max-width: 500px) { @media screen and (max-width: 500px) {
@ -83,7 +83,7 @@
width:100%; width:100%;
padding:5px; padding:5px;
background-color:#663333; background-color:#663333;
color:#dddddd; color:var(--text);
outline:none; outline:none;
font-size:14px; font-size:14px;
text-align:left; text-align:left;

8
src/style/app/pulldown/files.scss
View file

@ -9,12 +9,12 @@
.flavor { .flavor {
font-size:16px; font-size:16px;
color:#999999; color:var(--subtext);
margin: 0 0 10px 0; margin: 0 0 10px 0;
} }
button { button {
--col: #999999; --col: var(--subtext);
background-color: #232323; background-color: #232323;
color:var(--col); color:var(--col);
@ -43,7 +43,7 @@
background-color:#212121; background-color:#212121;
width:100%; width:100%;
padding:8px; padding:8px;
color:#dddddd; color:var(--text);
border:none; border:none;
border-bottom: 1px solid #aaaaaa; border-bottom: 1px solid #aaaaaa;
outline: none; outline: none;
@ -52,7 +52,7 @@
&:focus { &:focus {
transition-duration:150ms; transition-duration:150ms;
border-bottom: 1px solid #dddddd; border-bottom: 1px solid var(--text);
} }
@media screen and (max-width: 500px) { @media screen and (max-width: 500px) {

4
src/style/app/pulldown/help.scss
View file

@ -7,13 +7,13 @@
h2 { h2 {
font-weight: 400; font-weight: 400;
color:#DDDDDD; color: var(--text);
font-size:16px; font-size:16px;
margin:0 0 0 0; margin:0 0 0 0;
} }
p { p {
color:#999999; color:var(--subtext);
font-size:16px; font-size:16px;
margin:0 0 0 0; margin:0 0 0 0;
} }

14
src/style/app/pulldown/modals.scss
View file

@ -4,9 +4,9 @@
position:relative; position:relative;
width:100%; width:100%;
height:50px; height:50px;
background-color: #222222; background-color: var(--panel);
border:none; border:none;
border-bottom:1px solid #AAAAAA; border-bottom:1px solid var(--subtext);
transition-duration:150ms; transition-duration:150ms;
img { img {
@ -21,14 +21,14 @@
position:absolute; position:absolute;
top:50%; top:50%;
left:50px; left:50px;
color:#DDDDDD; color:var(--text);
transform:translateY(-50%); transform:translateY(-50%);
font-size:14px; font-size:14px;
background-color:#00000000; background-color:#00000000;
border:none; border:none;
span { span {
color:#777777; color:/*#777777*/ var(--subtext);
font-size:12px; font-size:12px;
} }
} }
@ -75,10 +75,10 @@
} }
.category { .category {
border-bottom: 1px solid #AAAAAA; border-bottom: 1px solid var(--subtext);
p { p {
color: #AAAAAA; color: var(--subtext);
font-size: 14px; font-size: 14px;
margin: 10px 0px 3px 0px; margin: 10px 0px 3px 0px;
text-align:center; text-align:center;
@ -106,7 +106,7 @@
.modal { .modal {
position:absolute; position:absolute;
background-color:#222222; background-color: var(--panel);
width:100%; width:100%;
transform:translateY(-100%); transform:translateY(-100%);
top:100%; top:100%;

20
src/style/app/topbar.scss
View file

@ -19,3 +19,23 @@
column-gap:5px; column-gap:5px;
} }
.menuBtn {
text-decoration:none;
font-size:16px;
transition-duration: 100ms;
color:var(--crust-txt);
background-color: #00000000;
border:none;
margin:0 0 0 0;
cursor:pointer;
position:relative;
top:-1px;
&:hover {
color:var(--crust-txt-active);
transition-duration: 100ms;
}
}

4
src/style/app/uploader/add_new_files.scss
View file

@ -1,6 +1,6 @@
#uploadWindow { #uploadWindow {
#add_new_files { #add_new_files {
background-color:#191919; background-color:var(--subpanel);
border: 1px solid gray; border: 1px solid gray;
padding: 0px 0px 10px 0px; padding: 0px 0px 10px 0px;
@ -47,7 +47,7 @@
button, input[type=text] { button, input[type=text] {
background-color:#333333; background-color:#333333;
color:#DDDDDD; color:var(--text);
border:none; border:none;
border-radius: 0px; border-radius: 0px;
outline:none; outline:none;

4
src/style/app/uploader/file.scss
View file

@ -2,7 +2,7 @@
#uploadWindow { #uploadWindow {
.file { .file {
background-color:#191919; background-color:var(--subpanel);
border: 1px solid gray; border: 1px solid gray;
padding: 10px; padding: 10px;
overflow:clip; overflow:clip;
@ -17,7 +17,7 @@
input[type=text] { input[type=text] {
background-color:#333333; background-color:#333333;
color:#DDDDDD; color:var(--text);
border:none; border:none;
outline:none; outline:none;
padding:5px; padding:5px;

10
src/style/app/uploads.scss
View file

@ -15,7 +15,7 @@
max-height: calc( 100% - 80px ); max-height: calc( 100% - 80px );
} }
background-color:#222222; background:var(--panel);
color:#ddd; color:#ddd;
h1, p, a { h1, p, a {
@ -29,16 +29,16 @@
margin-top: 5px; margin-top: 5px;
img { img {
color: #666666; color: var(--subtext);
} }
&:hover { &:hover {
img { color: #DDD; } img { color: var(--text); }
} }
} }
a { a {
color:#999; color:var(--subtext);
} }
h1 { h1 {
@ -53,7 +53,7 @@
button { button {
cursor:pointer; cursor:pointer;
background-color:#393939; background-color:#393939;
color:#DDDDDD; color:var(--text);
border:none; border:none;
outline:none; outline:none;
padding:5px; padding:5px;

4
src/style/downloads.scss
View file

@ -12,10 +12,10 @@
top:0px; top:0px;
width:100%; width:100%;
height:100%; height:100%;
background-image: linear-gradient(#333,base.$Background); background: var(--background);
@media screen and (max-width:500px) { @media screen and (max-width:500px) {
background-image: linear-gradient(#303030,base.$Background); background: var(--background-readable);
} }
} }