elysium/khufu
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Dunestash Public Frontend 0.0.1-a.1

Browse source
This commit is contained in:
Dunemask 2021-07-24 23:06:32 -06:00
commit fe36970476
67 changed files with 2179 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/stash/scss/Stash.scss Normal file
View file

@ -0,0 +1,17 @@
@import "./global";
.dunestash {
position: fixed;
width: 100%;
height: 100%;
}
.stash {
width: 100%;
height: calc(100% - #{$stashbarHeight});
position: relative;
margin: auto;
display: flex;
overflow-x: hidden;
overflow-y: scroll;
}

35
src/stash/scss/_global.scss Normal file
View file

@ -0,0 +1,35 @@
@import "global/colors", "global/fonts", "global/measurements",
"global/animations";
html,
body {
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 0;
color: $foreground;
background: #eee;
height: 100%;
width: 100%;
}
*::-webkit-scrollbar {
width: 5px;
height: 5px;
}
*::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: $defaultBorderRadius;
}
*::-webkit-scrollbar-thumb {
border-radius: $defaultBorderRadius;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
background-color: lighten($sectionMenuOptions, 40%);
}
*::-webkit-scrollbar-thumb:hover {
background-color: lighten($sectionMenuOptions, 50%);
}
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}

121
src/stash/scss/global/_animations.scss Normal file
View file

@ -0,0 +1,121 @@
/*Shimmer for links*/
@-webkit-keyframes glowingShimmer {
0% {
background-position: -4rem top;
/*50px*/
}
70% {
background-position: 12.5rem top;
/*200px*/
}
100% {
background-position: 12.5rem top;
/*200px*/
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes toastify-notification-fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
visibility: hidden;
}
}
@keyframes toast-notification-fade-in {
0% {
opacity: 0;
}
100% {
opacity: 0.9;
visibility: visible;
}
}
@mixin animation-breathe($b1, $b2, $f1, $f2) {
@keyframes breathe {
0% {
background-color: $b1;
color: $f1;
}
50% {
background-color: $b2;
color: $f2;
}
100% {
background-color: $b1;
color: $f1;
}
}
}
@mixin animation-bounce($f1, $f2) {
@keyframes bounce {
0% {
color: $f1;
}
50% {
color: $f2;
}
100% {
color: $f1;
}
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes file-watcher-fade {
0% {
opacity: 1;
}
40% {
opacity: 0;
visibility: hidden;
}
80% {
background: $successColor;
}
100% {
opacity: 0;
visibility: hidden;
}
}
@keyframes upload-dialog-expand {
0% {
height: 50px;
}
100% {
height: 100%;
}
}
@keyframes upload-dialog-minimize {
0% {
height: 50%;
}
100% {
height: 50px;
}
}

16
src/stash/scss/global/_colors.scss Normal file
View file

@ -0,0 +1,16 @@
/*Status Colors*/
$successColor: limegreen;
$errorColor: #e20006;
$informationColor: #0095ff;
/*Background & Foreground colors*/
$background: rgba(20, 20, 20, 1);
$backgroundGradientStart: $background;
$backgroundGradientEnd: #848486;
$foreground: white;
$sectionForeground: $foreground;
/*Visual "components" (divs, etc)*/
$sectionBackground: rgba($background, 0.95);
$sectionMenu: darken(rgba($background, 0.8), 10%);
$sectionMenuOptions: rgba(lighten($sectionMenu, 16%), 98%);
$borderColor: #13120e;
/*Unique Components*/

48
src/stash/scss/global/_fonts.scss Normal file
View file

@ -0,0 +1,48 @@
h1 {
font-family: "Dejavu Sans";
font-size: 33px;
font-style: normal;
font-variant: normal;
font-weight: 700;
}
h2, label {
font-family: "Dejavu Sans";
font-size: 28px;
font-style: normal;
font-variant: normal;
font-weight: 700;
}
h3 {
font-family: "Dejavu Sans";
font-size: 24px;
font-style: normal;
font-variant: normal;
font-weight: 700;
}
p, a {
font-family: "Dejavu Sans";
font-size: 18px;
font-style: normal;
font-variant: normal;
font-weight: 400;
}
blockquote {
font-family: "Dejavu Sans";
font-size: 21px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 30px; }
pre {
font-family: "Dejavu Sans";
font-size: 13px;
font-style: normal;
font-variant: normal;
font-weight: 400;
}

13
src/stash/scss/global/_measurements.scss Normal file
View file

@ -0,0 +1,13 @@
/*Spacing*/
$contentTopGap: 0px;
/*Size*/
$pageMinWidth: 300px;
$pageMaxWidth: 780px;
$defaultBoxPadding: 15px;
/*Components*/
$stashbarHeight: 4rem;
$fileFiltersHeight: 1.5rem;
$toastMinWidth: calc(#{$pageMinWidth} - 100px);
$toastMaxWidth: calc(50% - 20px);
/*Misc*/
$defaultBorderRadius: 2px;

61
src/stash/scss/stash/FileBox.scss Normal file
View file

@ -0,0 +1,61 @@
@import "../global";
.filebox {
margin: 0.4rem 0.4rem;
display: flex;
max-height: 4rem;
height: 100%;
max-width: 25em;
padding: 0.4rem 0;
width: 100%;
align-self: flex-start;
position: relative;
background: $sectionMenuOptions;
box-shadow: 1px 3px 2px $sectionMenuOptions;
}
.filebox:hover {
cursor: pointer;
background: lighten($sectionMenuOptions, 3%);
}
.filebox.selected {
background: $informationColor;
box-shadow: 1px 3px 2px darken($informationColor, 20%);
}
.filebox.selected:hover {
background: lighten($informationColor, 3%);
}
.file {
color: white;
justify-content: center;
text-align: center;
max-height: 4rem;
height: 100%;
max-width: 25em;
padding: 0.4rem 0;
width: 100%;
}
.file-details {
display: flex;
overflow: hidden;
white-space: nowrap;
width: 100%;
height: 50%;
margin: auto;
justify-content: center;
}
.file-info-details {
overflow: hidden;
white-space: nowrap;
width: 100%;
padding: 0.125rem 0;
max-width: 39ch;
}
.file-subinfo-details {
padding: 0 5px;
}

23
src/stash/scss/stash/FileDisplay.scss Normal file
View file

@ -0,0 +1,23 @@
@import "../global";
.file-display {
height: 100%;
}
.box-display{
display: flex;
flex-flow: row;
flex-wrap: wrap;
flex-grow: 1;
align-items: flex-start;
justify-content: center;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
.file-display-spacer {
width: 100%;
height: 2rem;
}

120
src/stash/scss/stash/Searchbar.scss Normal file
View file

@ -0,0 +1,120 @@
@import "../global";
$searchIndent: 0.125rem;
.file-searchbar {
width: 100%;
display: flex;
flex-wrap: wrap;
background: darken(#eee, 5%);
box-shadow: 0.25px 1px 0.5px darken(#eee, 8%);
}
.file-searchbox {
margin: 0 auto;
display: inline-flex;
background: inherit;
color: $sectionMenuOptions;
width: 100%;
border-bottom: 1px darken(#eee, 22%) solid;
}
.file-searchbar svg {
margin: auto 0;
height: 100%;
padding: 0 0.15rem 0 0.5rem;
}
#file-search {
width: 100%;
font-size: 1.125rem;
background: inherit;
text-indent: $searchIndent;
border: none;
}
#file-search::placeholder {
color: $sectionMenuOptions;
}
.file-searchbox-action {
padding: 0 0.325rem;
height: inherit;
display: block;
}
.file-searchbox-action svg {
margin: auto;
height: 100%;
}
#file-searchbox-hashtag {
padding-right: calc(0.325rem + #{$searchIndent} * 4);
}
.file-searchbox-action:hover {
cursor: pointer;
}
.file-searchbar-extensions {
width: 100%;
}
.file-filters {
background: darken(#eee, 10%);
width: 100%;
display: inline-flex;
flex-grow: nowrap;
justify-content: flex-start;
align-items: flex-start;
overflow-x: auto;
border-bottom: 1px darken(#eee, 12%) solid;
}
.file-filter {
justify-content: center;
text-align: center;
display: inline-flex;
margin: auto 0.5rem;
padding: 2px;
width: 5rem;
background: $informationColor;
box-shadow: 0.375px 1.125px 0.75px darken($informationColor, 20%);
}
.file-filter svg {
margin: auto 0;
width: 0.8rem;
height: 0.8rem;
}
.file-filter svg:hover {
cursor: pointer;
}
.query-filters {
width: 100%;
background: darken(#eee, 10%);
border-bottom: 1px darken(#eee, 20%) solid;
}
.query-filter-list {
width: 100%;
height: 1.5rem;
display: inline-flex;
flex-grow: nowrap;
justify-content: flex-start;
align-items: flex-start;
overflow-x: auto;
overflow-y: hidden;
}
.query-filter {
display: inline-flex;
align-items: center;
color: $sectionMenuOptions;
width: 100%;
height: 100%;
justify-content: center;
text-align: center;
display: inline-flex;
border: 1px darken(#eee, 22%) solid;
}
.query-filter-list span:first-child {
border-left: 0px;
}

48
src/stash/scss/stash/StashContextMenu.scss Normal file
View file

@ -0,0 +1,48 @@
@import "../global";
//Context Menu
.drive-context-menu {
position: fixed;
display: flex;
background: lighten($sectionMenuOptions, 10%);
box-shadow: 1px 3px 2px lighten ($sectionMenuOptions, 5%);
color: $foreground;
z-index: 300;
width: 100%;
max-width: inherit;
font-size: 1rem;
max-width: 18em;
min-height: 11em;
}
.drive-context-menu ul {
list-style-type: none;
padding: 0;
width: 100%;
}
.drive-context-menu li:hover {
opacity: 0.85;
cursor: pointer;
}
.drive-context-menu li {
width: inherit;
text-align: left;
padding: 0 0.5rem;
}
.drive-context-menu svg {
min-width: 1rem;
padding: 0 0.5rem;
height: 100%;
}
.drive-context-menu li:not(:last-child) {
margin-bottom: 0.85rem;
}
.drive-context-menu a {
color: $foreground;
text-decoration: none;
font-size: inherit;
}

6
src/stash/scss/stash/StashDropzone.scss Normal file
View file

@ -0,0 +1,6 @@
@import "../global";
.stash-dropzone {
position: absolute;
height: 100%;
width: inherit;
}

161
src/stash/scss/stash/StashUploadDialog.scss Normal file
View file

@ -0,0 +1,161 @@
@import "../global";
//Variables
$watcherIndicatorSize: 18px;
$watcherActionSize: 14px;
$uploadBoxesSize: 50px;
$actionButtonSize: 25px;
/*File Upload Dialog Styling*/
.fud {
position: fixed;
bottom: 0;
left: 0;
background-color: $sectionMenuOptions;
width: 100%;
height: 100%;
max-width: 540px;
max-height: 250px;
overflow: hidden;
-webkit-transform: translate3d(0, 0, 0);
z-index: 100;
display: block;
visibility: hidden;
}
.fud-fade {
visibility: visible;
animation: file-watcher-fade 2s forwards;
}
.fud-maximized {
visibility: visible;
animation: upload-dialog-expand 1.2s forwards;
animation-timing-function: ease-out;
}
.fud-minimized {
visibility: visible;
animation: upload-dialog-minimize 0.4s forwards;
animation-timing-function: ease-out;
}
#fud-header {
display: inline-flex;
height: $uploadBoxesSize;
font-size: $watcherIndicatorSize;
background-color: darken($sectionMenuOptions, 10%);
width: 100%;
}
.fud-header-title-wrapper {
margin: auto;
padding: 10px;
width: 100%;
overflow: hidden;
text-align: center;
padding-left: 10px;
}
#fud-header-title {
margin-left: 40px;
}
#fud-header-title:hover {
opacity: 0.8;
cursor: pointer;
}
#fud-minimize {
padding: 10px;
}
#header-actions {
margin-right: 5px;
}
.fud-actions {
//width: calc(#{$actionButtonSize} * 3);
display: inline-flex;
margin: auto;
align-items: center;
text-align: center;
height: $uploadBoxesSize;
}
.fud-action {
min-width: $actionButtonSize;
padding: 0 5px;
font-size: $watcherActionSize;
}
.fud-action svg,
i {
margin: auto;
}
.fud-actions span:hover {
opacity: 0.8;
cursor: pointer;
}
#fud-header-status {
font-size: calc(#{$watcherIndicatorSize - 2px});
min-width: $uploadBoxesSize;
min-height: $uploadBoxesSize;
max-width: $uploadBoxesSize;
max-height: $uploadBoxesSize;
display: flex;
}
/*Error and status icon Start with errors displaying as none*/
#fud-status-icon {
margin: auto;
font-size: 18px;
}
.fud-error-wrapper {
display: none;
position: absolute;
top: 9px;
left: 32px;
font-size: 18px;
}
.fud-error-wrapper {
color: $errorColor;
max-width: 18px;
max-height: 18px;
}
#fud-error-count {
font-size: 14px;
color: $foreground;
position: absolute;
top: 0;
width: 100%;
}
.fud-status-error {
margin-top: 10px;
}
#fud-queued-files {
max-height: 200px;
height: 100%;
height: 100%;
width: 100%;
overflow-y: scroll;
}
#fud-queued-files::-webkit-scrollbar {
width: 5px;
}
#fud-queued-files::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: $defaultBorderRadius;
}
#fud-queued-files::-webkit-scrollbar-thumb {
border-radius: $defaultBorderRadius;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
background-color: lighten($sectionMenuOptions, 40%);
}
#fud-queued-files::-webkit-scrollbar-thumb:hover {
background-color: lighten($sectionMenuOptions, 50%);
}

79
src/stash/scss/stash/StashUploadWatcher.scss Normal file
View file

@ -0,0 +1,79 @@
@import "./StashUploadDialog.scss";
/*File Watcher Styling*/
.file-watcher {
height: 100%;
width: 100%;
display: inline-flex;
max-height: $uploadBoxesSize;
overflow: hidden;
word-wrap: break-word;
padding: none;
}
.file-watcher-progressbar {
min-width: $uploadBoxesSize;
min-height: $uploadBoxesSize;
max-width: $uploadBoxesSize;
max-height: $uploadBoxesSize;
display: flex;
max-height: $uploadBoxesSize;
background-color: lighten($sectionMenuOptions, 20%);
}
.file-watcher.active {
background-color: lighten($sectionMenuOptions, 10%);
}
.file-watcher.success {
animation: file-watcher-fade 2s forwards;
}
.file-watcher-progressbar-fill {
height: 100%;
width: 0%;
background: $successColor;
display: flex;
font-weight: bold;
//align-items: center;
transition: width 0.22s;
}
.file-watcher-progressbar-fill.error {
background: $errorColor;
}
.file-watcher-progressbar-indicator {
min-width: $uploadBoxesSize;
min-height: $uploadBoxesSize;
max-width: $uploadBoxesSize;
max-height: $uploadBoxesSize;
color: $foreground;
display: flex;
font-size: $watcherIndicatorSize;
}
.file-watcher-progressbar-indicator svg,
span {
margin: auto;
}
.file-watcher-name {
margin: auto;
overflow: hidden;
word-wrap: break-word;
padding-left: 10px;
align-self: center;
width: 100%;
}
.file-watcher-action {
width: calc(#{$uploadBoxesSize} / 2);
height: $uploadBoxesSize;
display: flex;
font-weight: bold;
align-items: center;
padding: 0px 5px;
float: right;
}
.file-watcher-action svg {
margin: auto;
font-size: $watcherActionSize;
}
.file-watcher-action:hover {
opacity: 0.8;
cursor: pointer;
}

34
src/stash/scss/stash/Stashbar.scss Normal file
View file

@ -0,0 +1,34 @@
@import "../global";
.stashbar {
width: 100%;
z-index: 200;
}
.stashbar-menu {
width: 100%;
height: $stashbarHeight;
display: inline-flex;
background-color: rgba($sectionMenu, 1);
}
.stashbar-action {
font-size: 1.25rem;
width: 100%;
}
.stashbar-action svg {
height: 100%;
width: 100%;
}
.stashbar-action label {
font-size: inherit;
}
.stashbar-action label:hover {
cursor: pointer;
}
.stashbar-action:hover {
opacity: 0.85;
cursor: pointer;
}