diff --git a/frontend/index.html b/frontend/index.html index 02c303ae..7d0b8bc9 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -187,6 +187,6 @@ - + diff --git a/frontend/public/img/icons/download.svg b/frontend/public/img/icons/download.svg new file mode 100644 index 00000000..c28364a3 --- /dev/null +++ b/frontend/public/img/icons/download.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/frontend/public/img/icons/folder.svg b/frontend/public/img/icons/folder.svg new file mode 100644 index 00000000..c6908794 --- /dev/null +++ b/frontend/public/img/icons/folder.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/frontend/public/img/icons/home.svg b/frontend/public/img/icons/home.svg new file mode 100644 index 00000000..2c96a3d2 --- /dev/null +++ b/frontend/public/img/icons/home.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/frontend/public/img/icons/mp4.svg b/frontend/public/img/icons/mp4.svg new file mode 100644 index 00000000..c4e0a0c4 --- /dev/null +++ b/frontend/public/img/icons/mp4.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/public/img/icons/pdf-icon.svg b/frontend/public/img/icons/pdf-icon.svg new file mode 100644 index 00000000..e5f9937d --- /dev/null +++ b/frontend/public/img/icons/pdf-icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/public/index.html b/frontend/public/index.html index b6ed97b2..36326eaf 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -16,8 +16,8 @@ [{[ if .Name -]}][{[ .Name ]}][{[ else ]}]File Browser[{[ end ]}] - - + + div { - width: 18px; - height: 18px; + width: 12px; + height: 12px; background-color: #333; border-radius: 100%; display: inline-block; @@ -181,9 +181,14 @@ - + - [{[ if .CSS -]}] + [{[ if .Theme -]}] + + [{[ end ]}] [{[ if .CSS -]}] [{[ end ]}] diff --git a/frontend/public/themes/dark.css b/frontend/public/themes/dark.css new file mode 100644 index 00000000..ed873be9 --- /dev/null +++ b/frontend/public/themes/dark.css @@ -0,0 +1,556 @@ +:root { + --background: #141D24; + --surfacePrimary: #20292F; + --surfaceSecondary: #3A4147; + --divider: rgba(255, 255, 255, 0.12); + --icon: #ffffff; + /* --textPrimary: rgba(255, 255, 255, 0.87); */ + --textPrimary: #DFDEDF !important; + --textSecondary: rgba(255, 255, 255, 0.6); +} + +body { + background: var(--background); + color: var(--textPrimary); +} + +/* ::-webkit-scrollbar { + display: none!important; + } */ +#listing.mosaic, +.breadcrumbs { + background-color: #38393A !important; +} + +#listing.list { + background-color: transparent !important; +} + +#loading { + background: var(--background); +} + +#loading .spinner div, +main .spinner div { + background: var(--icon); +} + +#login { + background: var(--background); +} + +header { + background: #38393A !important; +} + +#search #input { + background: var(--surfaceSecondary); + border-color: var(--surfacePrimary); +} + +#search #input input::placeholder { + color: var(--textSecondary); +} + +#search.active #input { + background: rgb(71 71 71) !important; +} + +#search.active input { + color: var(--textPrimary); +} + +#search #result { + background: var(--background); + color: var(--textPrimary); +} + +#search .boxes { + /* background: var(--surfaceSecondary); */ +} + +#search #result .boxes { + background: #38393A !important; + border: 0.5px solid #4C4C4C !important; + box-shadow: 0px 36px 100px rgba(0, 0, 0, 0.4), 0px 0px 3px rgba(0, 0, 0, 0.55) !important; + border-radius: 12px !important; +} + +#search .boxes>div>div { + background: #282828 !important; +} + +#search .boxes h3, +#search .boxes>div>div>p { + color: var(--textPrimary) !important; +} + +.action { + color: var(--textPrimary) !important; +} + +.action:hover { + background-color: rgba(255, 255, 255, .1) !important; +} + +.action i { + /* color: var(--icon) !important; */ +} + +.action .counter { + border-color: var(--surfacePrimary); +} + +nav>div { + border-color: var(--divider); +} + +.breadcrumbs { + border-color: var(--divider); + color: var(--textPrimary) !important; +} + +.breadcrumbs span { + color: var(--textPrimary) !important; +} + +.breadcrumbs a:hover { + background: rgba(120, 120, 128, 0.2); +} + +#listing .item { + background: var(--surfacePrimary); + color: var(--textPrimary); + border-color: var(--divider) !important; +} + +#listing .item i { + color: var(--icon); +} + +#listing .item .modified { + color: var(--textSecondary); +} + +#listing h2, +#listing.list .header span { + color: var(--textPrimary) !important; +} + +#listing.list .header span { + color: var(--textPrimary); +} + +#listing.list .header i { + color: var(--icon); +} + +#listing.list .item.header { + background: var(--background); +} + +.message { + color: var(--textPrimary); +} + +.card { + background: #38393A !important; + color: var(--textPrimary) !important; + box-shadow: 0px 36px 100px rgba(0, 0, 0, 0.4), 0px 0px 3px rgba(0, 0, 0, 0.55) !important; + border-radius: 12px !important; +} + +.card-title, +.card-content { + color: var(--textPrimary) !important; +} + +.button--flat:hover { + background: var(--surfaceSecondary); +} + +.dashboard #nav ul li { + color: var(--textSecondary); +} + +.dashboard #nav ul li:hover { + background: var(--surfaceSecondary); +} + +.card h3, +.dashboard #nav, +.dashboard p label { + color: var(--textPrimary); +} + +.card#share input, +.card#share select, +.input { + background: var(--surfaceSecondary); + color: var(--textPrimary); + border: 1px solid rgba(255, 255, 255, 0.05); +} + +.input:hover, +.input:focus { + border-color: rgba(255, 255, 255, 0.15); +} + +.input--red { + background: #73302D; +} + +.input--green { + background: #147A41; +} + +.dashboard #nav .wrapper, +.collapsible { + border-color: var(--divider); +} + +.collapsible>label * { + color: var(--textPrimary); +} + +table th { + color: var(--textSecondary); +} + +.file-list li:hover { + background: var(--surfaceSecondary); +} + +.file-list li:before { + color: var(--textSecondary); +} + +.file-list li[aria-selected=true]:before { + color: var(--icon); +} + +.shell { + background: var(--surfacePrimary); + color: var(--textPrimary); +} + +.shell__divider { + background: rgba(255, 255, 255, 0.1); +} + +.shell__divider:hover { + background: rgba(255, 255, 255, 0.4); +} + +.shell__result { + border-top: 1px solid var(--divider); +} + +#editor-container { + background: var(--background); +} + +#editor-container .bar { + background: var(--surfacePrimary); +} + +@media (max-width: 736px) { + #file-selection { + background: var(--surfaceSecondary) !important; + } + + #file-selection span { + color: var(--textPrimary) !important; + } + + nav { + background: var(--surfaceSecondary) !important; + } + + #dropdown { + background: var(--surfaceSecondary) !important; + } +} + +.share__box { + background: var(--surfacePrimary) !important; + color: var(--textPrimary); +} + +.share__box__element { + border-top-color: var(--divider); +} + +/*----------Custom---------------------------*/ + +body, +#login { + background-color: #303030 !important; +} + +/* header { + background-color: #1b1b1b !important; +} */ + +#search #input { + background-color: #424242 !important; + color: rgba(255, 255, 255, 0.7) !important; +} + +#listing.list .item, +#listing.mosaic .item { + background: rgba(50, 50, 50, 1) !important; + color: rgba(255, 255, 255, 0.7) !important; +} + +#listing.list .item:hover, +#listing.mosaic .item:hover, +#listing .item[aria-selected=true] { + background: linear-gradient(0deg, rgba(30, 30, 30, 0.6), rgba(30, 30, 30, 0.6)), rgba(84, 84, 88, 0.3) !important; +} + +/* #listing.mosaic, +.breadcrumbs { + background-color: #303030 !important; +} */ + + +/*action*/ +.action span { + color: #DFDEDF !important; +} + + +/* listing */ +#listing .item .size, +#listing .item .modified { + color: rgba(223, 222, 223, 0.8) !important; +} + +#listing .item .name { + + color: #DFDEDF !important; +} + +select, +textarea, +input, +.dashboard textarea, +.dashboard #locale, +.dashboard input[type=password], +.dashboard input[type=text] { + background: #212121; + color: rgba(255, 255, 255, 0.9) !important; + border-color: #303030; +} + +.action, +#breadcrumbs, +#breadcrumbs span, +.dashboard #nav, +#login h1 { + color: rgba(255, 255, 255, 0.7) !important; +} + +#search #result { + background-color: #212121 !important; + color: rgba(255, 255, 255, 0.7) !important; +} + +.action:hover { + /* background: rgba(120, 120, 128, 0.2) !important; */ + /* border: 1px solid transparent !important; */ + box-shadow: unset !important; + border-radius: 45px !important; +} + +nav>div:first-of-type:before { + /* color: rgba(255, 255, 255, 0.45)!important; */ +} + +nav.active, +#dropdown.active { + background-color: rgb(51, 51, 51) !important; +} + +button[aria-label="New file"] { + background-image: url('https://evoque-localportal.s3.ap-south-1.amazonaws.com/file-browser/new-file-dark.svg') !important; + background-repeat: no-repeat; + background-position: 4px center; + +} + +button[aria-label="New folder"] { + background-image: url('https://evoque-localportal.s3.ap-south-1.amazonaws.com/file-browser/new-folder-dark.svg') !important; + background-repeat: no-repeat; + background-position: 4px center; +} + +button[aria-label="Download"] { + background-image: url('https://evoque-localportal.s3.ap-south-1.amazonaws.com/file-browser/download-dark.svg') !important; + +} + +button[aria-label="Close"] { + background-image: url('https://evoque-localportal.s3.ap-south-1.amazonaws.com/file-browser/close-dark.svg') !important; + +} + +#dropdown button[aria-label="Rename"] { + background-image: url('https://evoque-localportal.s3.ap-south-1.amazonaws.com/file-browser/edit-dark.svg') !important; + background-repeat: no-repeat; + background-position: center; + width: 36px; + height: 36px; + +} + +/* button[aria-label="Delete"] { + background-image: url('https://evoque-localportal.s3.ap-south-1.amazonaws.com/file-browser/delete-dark.svg') !important; + +} */ + +button[aria-label="Switch view"] { + background-image: url('https://evoque-localportal.s3.ap-south-1.amazonaws.com/file-browser/switch-view-dark.svg') !important; +} + +button[aria-label="Upload"] { + background-image: url('https://evoque-localportal.s3.ap-south-1.amazonaws.com/file-browser/upload-dark.svg') !important; +} + +button[aria-label="My files"] { + background-image: url('https://evoque-localportal.s3.ap-south-1.amazonaws.com/file-browser/files-dark.svg') !important; + background-repeat: no-repeat !important; + background-position: left center !important; +} + +a[aria-label="Home"] { + background-image: url('https://evoque-localportal.s3.ap-south-1.amazonaws.com/file-browser/home-dark.svg') !important; + background-repeat: no-repeat !important; + background-position: 16px center !important; + width: 36px; + height: 36px; + background-size: auto; +} + + +.card .card-action.full .action .title, +.card.floating .card-title>h2 { + color: rgba(255, 255, 255, 1) !important; +} + +.card.floating .card-content>p { + color: rgba(255, 255, 255, 0.8) !important; +} + +.card#download, +.card.floating { + background: #38393A !important; + border: 0.5px solid #4C4C4C !important; + box-shadow: 0px 36px 100px rgba(0, 0, 0, 0.4), 0px 0px 3px rgba(0, 0, 0, 0.55) !important; +} + +.card .card-action.full .action { + background: rgba(40, 40, 40, 1) !important; +} + +.card .card-action.full .action:hover, +#download .card-content .button:hover { + background: linear-gradient(0deg, rgba(30, 30, 30, 0.6), rgba(30, 30, 30, 0.6)), rgba(84, 84, 88, 0.3) !important; +} + +#download .card-content .button { + background: rgba(50, 50, 50, 1) !important; + color: rgba(223, 222, 223, 1) !important; +} + +#previewer { + background-color: rgba(0, 0, 0, 0.9) !important; +} + +#previewer header>title { + color: rgb(255, 255, 255) !important; +} + +#search button[aria-label="Close"] { + background-image: unset !important; +} + +#search.active #input>.action i { + background-color: rgba(255, 255, 255, .5) !important; +} + +#previewer .preview .info { + color: #ffffff !important; +} + +.button--flat.button--grey { + color: #ffff !important; +} + +button[aria-label="Upload"]>i, +button[aria-label="Delete"]>i, +button[aria-label="Move file"]>i, +button[aria-label="Copy file"]>i, +button[aria-label="Share"]>i, +button[aria-label="Rename"]>i +{ + display: none; +} + +button[aria-label="Download"]>i { + display: none; +} + +button[aria-label="Switch view"]>i { + display: none; +} + + +.card .card-action.full .action i { + font-size: 0; +} + +.card .card-action.full .action .title { + margin-top: 10px; +} + + +a[aria-label="Home"]>i.material-icons { + font-size: 0 !important; +} + + +button[aria-label="My files"]>i { + display: none !important; +} +button[aria-label="New file"]>i { + display: none; +} + +button[aria-label="New folder"]>i { + display: none; +} + +#search .boxes i { + color: transparent !important; + font-size: 0 !important; +} +#dropdown.active button[aria-label="Switch view"] { + background-image: unset !important; +} + +#dropdown.active button[aria-label="Switch view"] { + background-image: unset !important; +} + +#dropdown.active button[aria-label="Upload"] { + background-image: unset !important; +} + +#dropdown.active button[aria-label="Download"] { + background-image: unset !important +} +button[aria-label="More"].action:hover { + background-color: transparent !important; +} \ No newline at end of file diff --git a/frontend/src/components/prompts/Upload.vue b/frontend/src/components/prompts/Upload.vue index bb8ec40e..63e74283 100644 --- a/frontend/src/components/prompts/Upload.vue +++ b/frontend/src/components/prompts/Upload.vue @@ -1,111 +1,38 @@ - diff --git a/frontend/src/css/_buttons.css b/frontend/src/css/_buttons.css index cbfc92ae..087c6286 100644 --- a/frontend/src/css/_buttons.css +++ b/frontend/src/css/_buttons.css @@ -1,14 +1,14 @@ .button { outline: 0; border: 0; - padding: 0.5em 1em; - border-radius: 0.1em; + padding: .5em 1em; + border-radius: .1em; cursor: pointer; background: var(--blue); color: white; - border: 1px solid var(--divider); - box-shadow: 0 0 5px var(--divider); - transition: 0.1s ease all; + border: 1px solid rgba(0, 0, 0, 0.05); + box-shadow: 0 0 5px rgba(0, 0, 0, 0.05); + transition: .1s ease all; } .button:hover { @@ -38,7 +38,7 @@ } .button--flat:hover { - background: var(--surfaceSecondary); + background: var(--moon-grey); } .button--flat.button--red { @@ -50,6 +50,6 @@ } .button[disabled] { - opacity: 0.5; + opacity: .5; cursor: not-allowed; } diff --git a/frontend/src/css/_inputs.css b/frontend/src/css/_inputs.css index a0063f83..f07f49d2 100644 --- a/frontend/src/css/_inputs.css +++ b/frontend/src/css/_inputs.css @@ -1,35 +1,35 @@ .input { - background: var(--surfacePrimary); - color: var(--textSecondary); - border: 1px solid var(--borderPrimary); - border-radius: 0.1em; - padding: 0.5em 1em; - transition: 0.2s ease all; + border-radius: .1em; + padding: .5em 1em; + background: white; + border: 1px solid rgba(0, 0, 0, 0.1); + transition: .2s ease all; + color: #333; margin: 0; } .input:hover, .input:focus { - border-color: var(--borderSecondary); + border-color: rgba(0, 0, 0, 0.2); } .input--block { - margin-bottom: 0.5em; + margin-bottom: .5em; display: block; width: 100%; } .input--textarea { line-height: 1.15; - font-family: monospace; + font-family: "Inter", sans-serif; min-height: 10em; resize: vertical; } .input--red { - background: var(--input-red) !important; + background: #fcd0cd; } .input--green { - background: var(--input-green) !important; + background: #c9f2da; } diff --git a/frontend/src/css/_share.css b/frontend/src/css/_share.css index 04034a32..eb8aacb7 100644 --- a/frontend/src/css/_share.css +++ b/frontend/src/css/_share.css @@ -12,11 +12,8 @@ } .share__box { - box-shadow: - rgba(0, 0, 0, 0.06) 0px 1px 3px, - rgba(0, 0, 0, 0.12) 0px 1px 2px; - background: var(--surfacePrimary); - color: var(--textPrimary); + box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px, rgba(0, 0, 0, 0.12) 0px 1px 2px; + background: #fff; border-radius: 0.2em; margin: 5px; overflow: hidden; @@ -42,7 +39,7 @@ .share__box__element { padding: 1em; - border-top: 1px solid var(--borderPrimary); + border-top: 1px solid rgba(0, 0, 0, 0.1); word-break: break-all; } @@ -65,7 +62,7 @@ border-left: 0; border-right: 0; border-bottom: 0; - border-top: 1px solid var(--borderPrimary); + border-top: 1px solid rgba(0, 0, 0, 0.1); } .share__box__items #listing.list .item .name { @@ -79,7 +76,7 @@ .share__wrong__password { background: var(--red); color: #fff; - padding: 0.5em; + padding: .5em; text-align: center; - animation: 0.2s opac forwards; -} + animation: .2s opac forwards; +} \ No newline at end of file diff --git a/frontend/src/css/_shell.css b/frontend/src/css/_shell.css index 3fca2d7d..37956526 100644 --- a/frontend/src/css/_shell.css +++ b/frontend/src/css/_shell.css @@ -3,8 +3,17 @@ bottom: 0; left: 0; max-height: calc(100% - 4em); - background: var(--surfacePrimary); - color: var(--textPrimary); + background: white; + color: #212121; + z-index: 9997; + width: 100%; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); + transition: .2s ease transform; +} + +.shell__divider { + position: relative; + height: 8px; z-index: 9999; background: rgba(127, 127, 127, 0.1); transition: 0.2s ease background; @@ -23,8 +32,6 @@ overflow: auto; font-size: 1rem; cursor: text; - box-shadow: 0 0 5px var(--borderPrimary); - transition: 0.2s ease transform; } .shell__overlay { @@ -45,7 +52,7 @@ body.rtl .shell-content { display: flex; padding: 0.5em; align-items: flex-start; - border-top: 1px solid var(--divider); + border-top: 1px solid rgba(0, 0, 0, 0.05); } .shell--hidden { diff --git a/frontend/src/css/_variables.css b/frontend/src/css/_variables.css index 468b08dd..94e59664 100644 --- a/frontend/src/css/_variables.css +++ b/frontend/src/css/_variables.css @@ -1,8 +1,8 @@ :root { --blue: #2196f3; - --dark-blue: #1e88e5; - --red: #f44336; - --dark-red: #d32f2f; + --dark-blue: #1E88E5; + --red: #F44336; + --dark-red: #D32F2F; --moon-grey: #f2f2f2; --icon-red: #da4453; @@ -11,44 +11,4 @@ --icon-green: #2ecc71; --icon-blue: #1d99f3; --icon-violet: #9b59b6; - - --input-red: rgb(252, 208, 205); - --input-green: rgb(201, 242, 218); - - --item-selected: white; - - --action: rgb(84, 110, 122); - - --background: rgb(250, 250, 250); - --surfacePrimary: rgb(255, 255, 255); - --surfaceSecondary: rgb(230, 230, 230); - --divider: rgba(0, 0, 0, 0.05); - --iconPrimary: var(--icon-blue); - --iconSecondary: rgb(255, 255, 255); - --iconTertiary: rgb(204, 204, 204); - --textPrimary: rgb(111, 111, 111); - --textSecondary: rgb(51, 51, 51); - --hover: rgba(0, 0, 0, 0.1); - --borderPrimary: rgba(0, 0, 0, 0.1); - --borderSecondary: rgba(0, 0, 0, 0.2); -} - -:root.dark { - --input-red: rgb(115, 48, 45); - --input-green: rgb(20, 122, 65); - - --action: rgb(255, 255, 255); - - --background: rgb(20, 29, 36); - --surfacePrimary: rgb(32, 41, 47); - --surfaceSecondary: rgb(58, 65, 71); - --textPrimary: rgba(255, 255, 255, 0.6); - --textSecondary: rgba(255, 255, 255, 0.87); - --divider: rgba(255, 255, 255, 0.12); - --iconPrimary: rgb(255, 255, 255); - --iconSecondary: rgb(255, 255, 255); - --iconTertiary: rgb(255, 255, 255); - --hover: rgba(255, 255, 255, 0.1); - --borderPrimary: rgba(255, 255, 255, 0.05); - --borderSecondary: rgba(255, 255, 255, 0.15); } diff --git a/frontend/src/css/base.css b/frontend/src/css/base.css index 7d90468e..96667a91 100644 --- a/frontend/src/css/base.css +++ b/frontend/src/css/base.css @@ -1,180 +1,154 @@ body { - font-family: "Roboto", sans-serif; - padding-top: 4em; - background: var(--background); - color: var(--textSecondary); + font-family: "Roboto", sans-serif; + padding-top: 4em; + background-color: #fafafa; + color: #333333; +} + +body.rtl { + direction: rtl; } * { - box-sizing: border-box; + box-sizing: border-box; } *, *:hover, *:active, *:focus { - outline: 0; + outline: 0; } a { - text-decoration: none; + text-decoration: none; } img { - max-width: 100%; + max-width: 100%; } audio, video { - width: 100%; + width: 100%; } .mobile-only { - display: none !important; + display: none !important; } .container { - width: 95%; - max-width: 960px; - margin: 1em auto 0; + width: 95%; + max-width: 960px; + margin: 1em auto 0; } i.spin { - animation: 1s spin linear infinite; + animation: 1s spin linear infinite; } #app { - transition: 0.2s ease padding; + transition: 0.2s ease padding; } #app.multiple { - padding-bottom: 4em; + padding-bottom: 4em; } nav { - width: 16em; - position: fixed; - top: 4em; - left: 0; + width: 16em; + position: fixed; + top: 4em; + left: 0; } -html[dir="rtl"] nav { - left: initial; - right: 0; +body.rtl nav { + left: unset; + right: 0; } nav .action { - width: 100%; - display: block; - border-radius: 0; - font-size: 1.1em; - padding: 0.5em; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + width: 100%; + display: block; + border-radius: 0; + font-size: 1.1em; + padding: 0.5em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } -html[dir="rtl"] nav .action { - text-align: right; +body.rtl .action { + direction: rtl; + text-align: right; } -nav > div { - border-top: 1px solid var(--divider); +nav>div { + border-top: 1px solid rgba(0, 0, 0, 0.05); } -nav .action > * { - vertical-align: middle; +nav .action>* { + vertical-align: middle; } main { - min-height: 1em; - margin: 0 1em 1em auto; - width: calc(100% - 19em); + min-height: 1em; + margin: 0 1em 1em auto; + width: calc(100% - 19em); } .breadcrumbs { - height: 3em; - background: var(--background); - border-bottom: 1px solid var(--divider); + height: 3em; + border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .breadcrumbs span, .breadcrumbs { - display: flex; - align-items: center; - color: var(--textPrimary); + display: flex; + align-items: center; + color: #6f6f6f; } .breadcrumbs a { - color: inherit; - transition: 0.1s ease-in; - border-radius: 0.125em; + color: inherit; + transition: 0.1s ease-in; + border-radius: 0.125em; } -html[dir="rtl"] .breadcrumbs a { - transform: translateX(-16em); +body.rtl .breadcrumbs a { + transform: translateX(-16em); } .breadcrumbs a:hover { - background-color: var(--divider); + background-color: rgba(0, 0, 0, 0.05); } .breadcrumbs span a { - padding: 0.2em; + padding: 0.2em; } .files { - position: absolute; - bottom: 30px; - width: 100%; + position: absolute; + bottom: 30px; + width: 100%; } .progress { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 3px; - z-index: 9999999999; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 3px; + z-index: 9999999999; } .progress div { - height: 100%; - background-color: #40c4ff; - width: 0; - transition: 0.2s ease width; + height: 100%; + background-color: #40c4ff; + width: 0; + transition: 0.2s ease width; } .break-word { - word-break: break-all; -} - -.vue-number-input > input { - background: var(--surfacePrimary) !important; - border-color: var(--surfaceSecondary) !important; - color: var(--textSecondary) !important; -} - -.vue-number-input--small > input { - height: 1rem !important; - font-size: 1rem !important; -} - -.vue-number-input :hover, -.vue-number-input :focus { - border-color: var(--borderSecondary) !important; -} - -.vue-number-input__button { - background: var(--surfacePrimary) !important; -} - -.vue-number-input__button--minus, -.vue-number-input__button--plus { - border-color: var(--surfaceSecondary) !important; -} - -.vue-number-input__button::before, -.vue-number-input__button::after { - background: var(--textSecondary) !important; -} + word-break: break-all; +} \ No newline at end of file diff --git a/frontend/src/css/custom.css b/frontend/src/css/custom.css new file mode 100644 index 00000000..21c2233e --- /dev/null +++ b/frontend/src/css/custom.css @@ -0,0 +1,1098 @@ +/* + filebrowser-css - a custom stylesheet for filebrowser + that adds colors and changes some icons + https://github.com/jniggemann/filebrowser-css + + Copyright (C) 2021-2022 Jan Niggemann + With kind contributions of + * Richard Asplin (https://github.com/richneptune) + + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU Affero General Public License as + published by the Free Software Foundation, either version 3 of the + License, or (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU Affero General Public License for more details. + + You should have received a copy of the GNU Affero General Public License + along with this program. If not, see . + +*/ +@import url('https://fonts.googleapis.com/css?family=Inter'); + +/*header*/ +header>div:first-child>.action, +header img { + display: none !important; +} + +button[aria-label="Select multiple"], +button[aria-label="Info"], +button[aria-label="Toggle shell"], +button[aria-label="Settings"], +button[aria-label="Logout"], +.credits { + display: none !important; +} + +button[aria-label="Download"], +button[aria-label="Switch view"], +button[aria-label="Upload"], +/* button[aria-label="Delete"], */ +button[aria-label="Close"] { + background-repeat: no-repeat; + background-position: center; + width: 2.25em; + height: 2.25em; + +} + +button[aria-label="Download"] { + background-image: url('https://evoque-localportal.s3.ap-south-1.amazonaws.com/file-browser/download.svg'); + +} + +button[aria-label="Download"]>i { + display: none; +} + + +/* button[aria-label="Close"] { + background-image: url('https://evoque-localportal.s3.ap-south-1.amazonaws.com/file-browser/close.svg'); + +} */ +#previewer header>.action i { + color: #000000; +} + +button[aria-label="Close"]>i { + padding: 6px; +} + +#search button[aria-label="Close"] { + background-image: unset !important; +} + + +#search button[aria-label="Close"] { + background-image: unset !important; +} + + +#dropdown button[aria-label="Rename"] { + background-image: url('https://evoque-localportal.s3.ap-south-1.amazonaws.com/file-browser/edit.svg'); + background-repeat: no-repeat; + background-position: center; + width: 2.25em; + height: 2.25em; + +} + +/* button[aria-label="Delete"] { + background-image: url('https://evoque-localportal.s3.ap-south-1.amazonaws.com/file-browser/delete.svg'); + +} */ + +button[aria-label="Switch view"] { + background-image: url('https://evoque-localportal.s3.ap-south-1.amazonaws.com/file-browser/switch-view.svg'); +} + +button[aria-label="Switch view"]>i { + display: none; +} + +button[aria-label="Upload"] { + background-image: url('https://evoque-localportal.s3.ap-south-1.amazonaws.com/file-browser/upload.svg'); +} + +button[aria-label="Upload"]>i, +button[aria-label="Delete"]>i, +button[aria-label="Move file"]>i, +button[aria-label="Copy file"]>i, +button[aria-label="Share"]>i, +button[aria-label="Rename"]>i { + display: none; +} + +.card .card-action.full .action i { + font-size: 0; +} + +.card .card-action.full .action .title { + margin-top: 10px; +} + + +button[aria-label="My files"] { + background-image: url('https://evoque-localportal.s3.ap-south-1.amazonaws.com/file-browser/files.svg'); + background-repeat: no-repeat !important; + background-position: left center !important; +} + +a[aria-label="Home"] { + background-image: url('https://evoque-localportal.s3.ap-south-1.amazonaws.com/file-browser/home.svg'); + background-repeat: no-repeat !important; + background-position: center !important; + width: 2.25em; + height: 2.25em; + background-size: auto; + margin-left: 1em; + border: 1px solid transparent; +} + +a[aria-label="Home"]>i.material-icons { + font-size: 0 !important; +} + + +button[aria-label="My files"]>i { + display: none !important; +} + +button[aria-label="My files"] span { + padding-left: 0.875em; +} + +button[aria-label="New file"] { + background-image: url('https://evoque-localportal.s3.ap-south-1.amazonaws.com/file-browser/new-file.svg'); + background-repeat: no-repeat; + background-position: 4px center; + +} + +button[aria-label="New file"]>i { + display: none; +} + +button[aria-label="New folder"] { + background-image: url('https://evoque-localportal.s3.ap-south-1.amazonaws.com/file-browser/new-folder.svg'); + background-repeat: no-repeat; + background-position: 4px center; + margin-bottom: 0.625em; +} + +button[aria-label="New folder"]>i { + display: none; +} + +button[aria-label="New file"] span, +button[aria-label="New folder"] span { + padding-left: 2em !important; +} + + + +/*Side navigation*/ +nav>div { + position: fixed !important; + bottom: 0.625em !important; + left: 0 !important; + border: transparent !important; + width: inherit !important; +} + +button[aria-label="New folder"] { + margin-top: 0.625em !important; + +} + +nav>div:first-of-type:before { + content: "Create"; + font-size: 0.75em; + font-weight: 600; + padding-left: 2em; +} + +/* remove a bit of padding from the file list entries */ +#listing h2 { + font-family: 'Inter', sans-serif !important; + font-weight: 500 !important; + font-size: 0.75em !important; + line-height: 1.15 !important; + letter-spacing: -.02em !important; + -webkit-font-smoothing: antialiased !important; + color: #242424; +} + +#listing.list { + color: #FFEE00 !important; +} + +#listing.list .item { + padding: 0.7em; +} + +/* make folders yellow-ish */ +#listing .item[data-dir=true] div i { + color: #ffc84b; +} + +/* packed files - colorize and change icon */ +#listing .item[aria-label$=".7z"] div i { + color: #a268a1; +} + +#listing .item[aria-label$=".7z"] .material-icons { + visibility: hidden; +} + +#listing .item[aria-label$=".7z"] .material-icons::before { + content: "archive"; + visibility: visible; +} + +#listing .item[aria-label$=".arj"] div i { + color: #a268a1; +} + +#listing .item[aria-label$=".arj"] .material-icons { + visibility: hidden; +} + +#listing .item[aria-label$=".arj"] .material-icons::before { + content: "archive"; + visibility: visible; +} + +#listing .item[aria-label$=".zip"] div i { + color: #a268a1; +} + +#listing .item[aria-label$=".zip"] .material-icons { + visibility: hidden; +} + +#listing .item[aria-label$=".zip"] .material-icons::before { + content: "archive"; + visibility: visible; +} + +#listing .item[aria-label$=".gz"] div i { + color: #a268a1; +} + +#listing .item[aria-label$=".gz"] .material-icons { + visibility: hidden; +} + +#listing .item[aria-label$=".gz"] .material-icons::before { + content: "archive"; + visibility: visible; +} + +#listing .item[aria-label$=".tar"] div i { + color: #a268a1; +} + +#listing .item[aria-label$=".tar"] .material-icons { + visibility: hidden; +} + +#listing .item[aria-label$=".tar"] .material-icons::before { + content: "archive"; + visibility: visible; +} + + +#listing .item[aria-label$=".bz"] div i { + color: #a268a1; +} + +#listing .item[aria-label$=".bz"] .material-icons { + visibility: hidden; +} + +#listing .item[aria-label$=".bz"] .material-icons::before { + content: "archive"; + visibility: visible; +} + +#listing .item[aria-label$=".bz2"] div i { + color: #a268a1; +} + +#listing .item[aria-label$=".bz2"] .material-icons { + visibility: hidden; +} + +#listing .item[aria-label$=".bz2"] .material-icons::before { + content: "archive"; + visibility: visible; +} + +#listing .item[aria-label$=".xz"] div i { + color: #a268a1; +} + +#listing .item[aria-label$=".xz"] .material-icons { + visibility: hidden; +} + +#listing .item[aria-label$=".xz"] .material-icons::before { + content: "archive"; + visibility: visible; +} + +#listing .item[aria-label$=".tbz"] div i { + color: #a268a1; +} + +#listing .item[aria-label$=".tbz"] .material-icons { + visibility: hidden; +} + +#listing .item[aria-label$=".tbz"] .material-icons::before { + content: "archive"; + visibility: visible; +} + + +/* office files */ +/* PDF - colorize and change icon /* +/* Note: This is yellow because I use SumatraPDF */ +#listing .item[aria-label$=".pdf"] div i { + color: #FFEE00; +} + +#listing .item[aria-label$=".pdf"] .material-icons { + visibility: hidden; +} + +#listing .item[aria-label$=".pdf"] .material-icons::before { + content: "picture_as_pdf"; + visibility: visible; +} + +/* word processors - colorize and change icon */ +/* Word */ +#listing .item[aria-label$=".doc"] div i { + color: #185ABD; +} + +#listing .item[aria-label$=".doc"] .material-icons { + visibility: hidden; +} + +#listing .item[aria-label$=".doc"] .material-icons::before { + content: "description"; + visibility: visible; +} + +#listing .item[aria-label$=".docx"] div i { + color: #185ABD; +} + +#listing .item[aria-label$=".docx"] .material-icons { + visibility: hidden; +} + +#listing .item[aria-label$=".docx"] .material-icons::before { + content: "description"; + visibility: visible; +} + +/* OpenOffice Writer */ +#listing .item[aria-label$=".odt"] div i { + color: #185ABD; +} + +#listing .item[aria-label$=".odt"] .material-icons { + visibility: hidden; +} + +#listing .item[aria-label$=".odt"] .material-icons::before { + content: "description"; + visibility: visible; +} + +/* LibreOffice Writer */ +#listing .item[aria-label$=".sxw"] div i { + color: #185ABD; +} + +#listing .item[aria-label$=".sxw"] .material-icons { + visibility: hidden; +} + +#listing .item[aria-label$=".sxw"] .material-icons::before { + content: "description"; + visibility: visible; +} + + +/* PowerPoint */ +#listing .item[aria-label$=".ppt"] div i { + color: #D35230; +} + +#listing .item[aria-label$=".pptx"] div i { + color: #D35230; +} + +#listing .item[aria-label$=".pps"] div i { + color: #D35230; +} + +/* OpenOffice Impress */ +#listing .item[aria-label$=".odp"] div i { + color: #D35230; +} + + +/* Excel */ +#listing .item[aria-label$=".xls"] div i { + color: #107C41; +} + +#listing .item[aria-label$=".xlsx"] div i { + color: #107C41; +} + +#listing .item[aria-label$=".ods"] div i { + color: #107C41; +} + +#listing .item[aria-label$=".sxc"] div i { + color: #107C41; +} + +#listing .item[aria-label$=".wri"] div i { + color: #336eff; +} + + +/* sound files - colorize */ +#listing .item[data-type=audio] div i { + color: #F47900; +} + +/* video files - colorize */ +#listing .item[data-type=video] div i { + color: #F47900; +} + +/* text files - change icon*/ +#listing .item[aria-label$=".txt"] .material-icons { + visibility: hidden; +} + +#listing .item[aria-label$=".txt"] .material-icons::before { + content: "description"; + visibility: visible; +} + +#listing .item[aria-label$=".md"] .material-icons { + visibility: hidden; +} + +#listing .item[aria-label$=".md"] .material-icons::before { + content: "description"; + visibility: visible; +} + +/* various other files*/ +/* iCal - change icon*/ +#listing .item[aria-label$=".ics"] .material-icons { + visibility: hidden; +} + +#listing .item[aria-label$=".ics"] .material-icons::before { + content: "event"; + visibility: visible; +} + +body { + background-color: rgba(225, 225, 224, 0.65); +} + +/* ::-webkit-scrollbar { + display: none!important; + } */ +#listing.mosaic, +#listing.list, +.breadcrumbs { + background-color: rgba(255, 255, 255, 1); +} + +#listing.mosaic { + padding-left: 1em; + padding-right: 1em; + min-height: 100vh; + margin: 0px -0.5em 0 0 !important; + /* overflow-y: hidden!important; */ +} + + +#login { + background-color: rgba(246, 246, 246, 0.84); +} + +header { + background-color: rgba(255, 255, 255, 1); + padding: 0.5em 1em 0.5em 1em !important; +} + +.action, +#breadcrumbs, +#breadcrumbs span, +.dashboard #nav, +#login h1 { + color: #242424; +} + +nav .action { + border-radius: 2.813em; + box-shadow: none; + border: 1px solid transparent; + margin-left: 1em !important; +} + +nav>.action:first-child:hover { + background-color: transparent !important; + box-shadow: unset !important; + border: 1px solid transparent !important; +} + +.action:hover { + /* background: #3B3B3B; */ + /* border: 1px solid transparent; */ + box-shadow: unset; + border-radius: 2.813em; +} + +#search .action:hover { + border: unset !important; +} + +#listing.list .item.header { + color: rgba(255, 255, 255, 0.7); +} + +#listing.list .item, +#listing.mosaic .item { + background: rgba(237, 237, 237, 1); + color: rgba(255, 255, 255, 0.7); + border-radius: 0.375em; +} + +#listing.list .item:hover, +#listing.mosaic .item:hover, +#listing .item[aria-selected=true] { + background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), rgba(246, 246, 246, 0.84) !important; +} + + + +.dashboard { + background: #424242; + color: rgba(255, 255, 255, 1.0); +} + +select, +textarea, +input, +.dashboard textarea, +.dashboard #locale, +.dashboard input[type=password], +.dashboard input[type=text] { + background: rgba(154, 154, 157, 0.12); + color: #242424; + border-color: #303030; +} + + +select, +.dashboard input[type=password], +.dashboard input[type=text], +.dashboard select { + padding: 0.5em; +} + +input[type=submit] { + color: #DFDEDF; +} + + +#search #input { + background-color: rgba(154, 154, 157, 0.12); + color: #242424; +} + +#search #input input { + background: transparent !important; +} + +#search.active #input { + background-color: rgb(255 255 255) !important; +} + +#search.active #input>.action i { + background-color: rgba(232, 232, 231, 1); + border: transparent; +} + +#login input[type=password], +#login input[type=text] { + background-color: rgba(154, 154, 157, 0.12) !important; + color: #242424; +} + +#search #result { + background-color: rgba(246, 246, 246, 0.84); + color: #242424; +} + +#search #result .boxes { + background: #F9F6F6; + box-shadow: 0px 0px 1.5px rgba(0, 0, 0, 0.3), 0px 7px 22px rgba(0, 0, 0, 0.25); + backdrop-filter: blur(40px); + border-radius: 12px; + padding: 0 0.938em 0.938em 0.938em; +} + +#search .boxes>div>div { + background: rgba(236, 236, 236, 1); + padding: 2.125em 1.875em 1.875em; + border-radius: 0.5em; +} + +#search .boxes>div>div>p { + color: rgba(36, 36, 36, 1); + font-weight: 500; + font-size: 0.75em; + margin-top: 0; +} + +.card { + background-color: white; +} + +#search #result .boxes h3 + +/* .card h2, */ +/* .card h3, */ +/* .card p, */ +/* .card-content */ + { + color: #242424; + padding: 0.9em 0 0.5em; + font-weight: 600; + font-size: 0.875em; +} + +#nav li { + padding-top: 1em !important; +} + +nav.active { + background-color: + rgb(236, 236, 236); +} + +#dropdown.active { + background-color: + rgb(236, 236, 236); +} + + +#file-selection { + background: #303030; +} + +/* Icons */ + +/* General */ +.file-icons [data-type=pdf] i::before { + content: url('https://evoque-localportal.s3.ap-south-1.amazonaws.com/file-browser/pdf-icon.svg') !important; +} + +div [aria-label="PDF"] i::before { + content: url('https://evoque-localportal.s3.ap-south-1.amazonaws.com/file-browser/pdf-icon.svg') !important; +} + +div [aria-label="Video"] i::before { + content: url('https://evoque-localportal.s3.ap-south-1.amazonaws.com/file-browser/mp4.svg') !important; +} + +div [aria-label="Music"] i::before { + content: url('https://evoque-localportal.s3.ap-south-1.amazonaws.com/file-browser/mp3.svg') !important; +} + +div [aria-label="Images"] i::before { + content: url('https://evoque-localportal.s3.ap-south-1.amazonaws.com/file-browser/image.svg') !important; +} + +.file-icons [data-type=video] i::before { + content: url('https://evoque-localportal.s3.ap-south-1.amazonaws.com/file-browser/mp4.svg') !important; +} + +.file-icons [data-dir=true] i::before { + content: url('https://evoque-localportal.s3.ap-south-1.amazonaws.com/file-browser/folder.svg') !important; +} + +#search .boxes i { + /* color: transparent !important; */ + font-size: 0 !important; +} + + +/*action*/ +.action span { + font-weight: 500; + font-size: 0.875em; + color: rgba(36, 36, 36, 1); +} + + +/* listing */ +#listing .item .size, +#listing .item .modified { + font-size: 0.625em; + font-weight: 400; + color: rgba(0, 0, 0, 0.7); +} + +#listing .item .size { + padding-top: 0.25; + padding-bottom: 0.25; +} + +#listing .item .name { + font-weight: 500; + font-size: 0.75em; + color: rgba(36, 36, 36, 1); +} + +#listing .item i { + font-size: 2.5em; + margin-right: 0; +} + +#listing .item img { + width: 2.5em; + height: 2.5em; + margin-right: 0; + border-radius: 0.188em; +} + +#listing.mosaic .item { + border-radius: 0.375em; +} + +#listing.mosaic .item div:first-of-type { + width: 2.9em; +} + +#listing.mosaic.gallery .item i { + margin-right: 0.75em +} + + +/*base*/ +main { + margin: 0 0em 0 auto !important; +} + +body { + font-family: "Inter", sans-serif; + overflow-x: hidden !important; +} + +body::-webkit-scrollbar { + display: none !important; +} + +/* body::-webkit-scrollbar-thumb { + background: #d3cccc !important; + border-radius: 2rem !important; +} + +body::-webkit-scrollbar { + width: 0.25rem !important; + display: block !important; +} */ + +.breadcrumbs a { + font-size: 0.75em; + font-weight: 400; + border-radius: 0; +} + +.breadcrumbs a :hover { + border-radius: 6px !important; +} + +/*header*/ +#search { + max-width: 14em; + height: 2.25em; +} + +#search #input { + padding: 0.375em; + border-radius: 0.375em; + font-size: 0.875em; +} + +#search::-webkit-input-placeholder { + font-size: 0.875em; + font-weight: 400; +} + +#search:-moz-placeholder { + opacity: 1; + font-size: 0.875em; + font-weight: 400; +} + +#search::-moz-placeholder { + opacity: 1; + font-size: 0.875em; + font-weight: 400; +} + +#search:-ms-input-placeholder { + font-size: 0.875em; + font-weight: 400; +} + +/*responsiveness*/ +@media (max-width: 736px) { + nav>div { + left: unset !important; + bottom: unset !important; + } + + body { + padding-bottom: 0 !important; + } + + main { + margin: 0 !important; + width: 100% !important; + } + + nav .action { + width: 75%; + } +} + +.action .counter { + background: #844BDC; +} + + +input[type=submit] { + background: #844BDC !important; +} + +#download .card-content .button { + background: rgba(237, 237, 237, 1); + border: unset !important; +} + +#download .card-content .button:hover { + background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), rgba(246, 246, 246, 0.84); +} + +#download button { + color: rgba(36, 36, 36, 1); + font-weight: 500; + font-size: 0.875em; + padding: 0.75em 1em; +} + +.card#download { + max-width: 16.25em !important; +} + +input[type=submit]:hover, +.button--flat:hover { + background: #7539c8 !important; +} + +.button--flat { + /* color: #844BDC !important; */ + border-radius: 36px; + background: rgba(132, 75, 220, 1); + color: #ffff; + font-size: 14px; + padding: 0.75em 1.25em; +} + +.button--flat.button--grey { + background: transparent; + color: #242424; + font-size: 0.875em; +} + +.button--flat.button--grey:hover { + opacity: 0.7; + background: transparent !important; +} + +.breadcrumbs a:hover, +#dropdown .action, +#dropdown .action:hover { + border-radius: 6px !important; + border: 1px solid transparent !important; +} + +#listing.mosaic.gallery .item div:first-of-type { + height: 6em !important; +} + +#listing.mosaic.gallery .item i { + font-size: 4em !important; +} + +#listing.mosaic.gallery .item div:last-of-type { + bottom: 0.5em !important; +} + +#download.card::-webkit-scrollbar { + display: none !important; +} + +.card#download, +.card.floating { + /* font-size: 0.75em !important; */ + background: #F9F6F6; + box-shadow: 0px 0px 1.5px rgba(0, 0, 0, 0.3), 0px 7px 22px rgba(0, 0, 0, 0.25); + backdrop-filter: blur(40px); + border-radius: 12px; +} + +#login h1 { + font-size: 1.8em; +} + +.card .card-action.full .action { + background: #ECECEC; + border-radius: 8px !important; + border: 1px transparent; +} + +.card .card-action.full .action:hover { + background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), rgba(246, 246, 246, 0.84); +} + +.card .card-action.full .action:first-of-type i::before { + content: url('https://evoque-localportal.s3.ap-south-1.amazonaws.com/file-browser/upload-file-icon.svg') !important; +} + +.card .card-action.full .action:nth-child(2) i::before { + content: url('https://evoque-localportal.s3.ap-south-1.amazonaws.com/file-browser/upload-folder-icon.svg') !important; +} + +.card .card-action.full .action .title { + font-size: 0.75em !important; + color: #242424; +} + +.card.floating .card-title>h2 { + font-size: 0.875em !important; + font-weight: 600 !important; + color: rgba(36, 36, 36, 1); +} + +.card.floating .card-content { + padding: 0em 1em 1em !important; +} + +.card.floating .card-content>p { + font-size: 0.75em !important; + color: rgba(36, 36, 36, 0.7); + line-height: 18px !important; +} + +#previewer { + background-color: rgb(242 242 242 / 90%); +} + +#previewer header>title { + color: #242424; +} + +#previewer header .action:hover { + background-color: rgba(0, 0, 0, .1); + border-radius: 6px; +} + +#search.active .action i { + padding: 0.2em !important; +} + +.card .card-title { + padding: 1.5em 1em 0.6em !important; +} + +.action .counter { + + font-size: 8px; + width: 20px; + height: 20px; + padding: 2px; +} + +#previewer .preview .info .button, +#previewer .preview .info { + font-size: 1em; +} + +#previewer .preview .info .title i { + font-size: 3em; +} + +#previewer .preview .info { + color: #242424; +} + +#listing.list.file-icons .item { + border-radius: 0 !important; +} + +#search ul { + font-size: 0.875em; +} + +.message { + font-size: 1.1em; +} + +#search { + background: transparent !important; +} + +#search .boxes i { + color: transparent !important; + font-size: 0 !important; +} + +#dropdown.active .action:hover { + background-color: rgb(221 217 217) !important; +} + +#dropdown.active button[aria-label="Switch view"] { + background-image: unset !important; +} + +#dropdown.active button[aria-label="Switch view"] { + background-image: unset !important; +} + +#dropdown.active button[aria-label="Upload"] { + background-image: unset !important; +} + +#dropdown.active button[aria-label="Download"] { + background-image: unset !important +} + + +button[aria-label="More"].action:hover { + background-color: transparent !important; +} \ No newline at end of file diff --git a/frontend/src/css/dashboard.css b/frontend/src/css/dashboard.css index 48be3ee0..62a6bcca 100644 --- a/frontend/src/css/dashboard.css +++ b/frontend/src/css/dashboard.css @@ -4,17 +4,17 @@ .dashboard .row { display: flex; - margin: 0 -0.5em; + margin: 0 -.5em; flex-wrap: wrap; } -html[dir="rtl"] .dashboard .row { +body.rtl .dashboard .row { margin-right: 16em; } .dashboard .row .column { display: flex; - padding: 0 0.5em; + padding: 0 .5em; width: 50%; } @@ -22,33 +22,33 @@ html[dir="rtl"] .dashboard .row { flex-grow: 1; } -@media (max-width: 1200px) { +@media(max-width: 1200px) { .dashboard .row .column { width: 100%; } } a { - color: inherit; + color: inherit } .dashboard p label { - margin-bottom: 0.2em; + margin-bottom: .2em; display: block; - font-size: 0.8em; + font-size: .8em; font-weight: 500; - color: var(--textPrimary); + color: rgba(0, 0, 0, 0.57); } li code, p code { - background: var(--divider); - padding: 0.1em; - border-radius: 0.2em; + background: rgba(0, 0, 0, 0.05); + padding: .1em; + border-radius: .2em; } .small { - font-size: 0.8em; + font-size: .8em; line-height: 1.5; } @@ -61,21 +61,21 @@ p code { .dashboard #nav .wrapper { display: flex; flex-grow: 1; - border-bottom: 2px solid var(--divider); + border-bottom: 2px solid rgba(0, 0, 0, 0.05); } -html[dir="rtl"] .dashboard #nav .wrapper { +body.rtl #nav .wrapper { margin-right: 16em; } .dashboard #nav ul { list-style: none; display: flex; - color: var(--action); + color: rgb(84, 110, 122); font-weight: 500; padding: 0; margin: 0 0 -2px 0; - font-size: 0.8em; + font-size: .8em; text-align: center; justify-content: left; } @@ -85,11 +85,12 @@ html[dir="rtl"] .dashboard #nav .wrapper { padding: 1.5em 2em; white-space: nowrap; border-bottom: 2px solid transparent; - transition: 0.1s ease-in-out all; + transition: .1s ease-in-out all; + } .dashboard #nav ul li:hover { - background: var(--surfaceSecondary); + background: var(--moon-grey); } .dashboard #nav ul li.active { @@ -119,7 +120,7 @@ table { } table tr { - border-bottom: 1px solid var(--iconTertiary); + border-bottom: 1px solid #ccc; } table tr:last-child { @@ -128,44 +129,40 @@ table tr:last-child { table th { font-weight: 500; - color: var(--textSecondary); + color: #757575; text-align: left; } table th, table td { - padding: 0.5em 0; + padding: .5em 0; } table td.small { width: 1em; } -table tr > *:first-child { +table tr>*:first-child { padding-left: 1em; } -html[dir="rtl"] table tr > * { +body.rtl table tr>* { padding-left: unset; padding-right: 1em; text-align: right; direction: ltr; } -table tr > *:last-child { +table tr>*:last-child { padding-right: 1em; } .card { position: relative; margin: 0 0 1rem 0; - background: var(--surfacePrimary); - color: var(--textSecondary); + background-color: #fff; border-radius: 2px; - box-shadow: - 0 2px 2px 0 rgba(0, 0, 0, 0.14), - 0 1px 5px 0 rgba(0, 0, 0, 0.12), - 0 3px 1px -2px rgba(0, 0, 0, 0.2); + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); overflow: auto; } @@ -174,18 +171,18 @@ table tr > *:last-child { top: 50%; left: 50%; transform: translate(-50%, -50%); + z-index: 99999; max-width: 25em; width: 90%; max-height: 95%; - /* animation-duration: 0.3s; - animation-fill-mode: forwards; */ + animation: .1s show forwards; } -.card > * > *:first-child { +.card>*>*:first-child { margin-top: 0; } -.card > * > *:last-child { +.card>*>*:last-child { margin-bottom: 0; } @@ -194,24 +191,24 @@ table tr > *:last-child { display: flex; } -.card .card-title > *:first-child { +.card .card-title>*:first-child { margin-right: auto; } -html[dir="rtl"] .card .card-title > *:first-child { +body.rtl .card .card-title>*:first-child { margin-right: 0; text-align: right; } -.card > div { +.card>div { padding: 1em 1em; } -.card > div:first-child { +.card>div:first-child { padding-top: 1.5em; } -.card > div:last-child { +.card>div:last-child { padding-bottom: 1.5em; } @@ -237,7 +234,7 @@ body.rtl .card .card-action { } .card h3 { - color: var(--textPrimary); + color: rgba(0, 0, 0, 0.53); font-size: 1em; font-weight: 500; margin: 2em 0 1em; @@ -256,14 +253,6 @@ body.rtl .card .card-action { max-width: 15em; } -.card#share input, -.card#share select, -.card#share input::-webkit-inner-spin-button, -.card#share input::-webkit-outer-spin-button { - background: var(--surfacePrimary); - color: var(--textSecondary); -} - .card#share ul { list-style: none; padding: 0; @@ -288,24 +277,24 @@ body.rtl .card .card-action { .card#share ul li input, .card#share ul li select { - padding: 0.2em; - margin-right: 0.5em; - border: 1px solid var(--borderPrimary); + padding: .2em; + margin-right: .5em; + border: 1px solid #dadada; } .card#share .action.copy-clipboard::after { - content: "Copied!"; + content: 'Copied!'; position: absolute; left: -25%; width: 150%; - font-size: 0.6em; + font-size: .6em; text-align: center; background: #44a6f5; color: #fff; - padding: 0.5em 0.2em; - border-radius: 0.4em; + padding: .5em .2em; + border-radius: .4em; top: -2em; - transition: 0.1s ease opacity; + transition: .1s ease opacity; opacity: 0; } @@ -335,9 +324,10 @@ body.rtl .card .card-action { z-index: 9999; visibility: hidden; opacity: 0; - animation: 0.1s show forwards; + animation: .1s show forwards; } + /* * * * * * * * * * * * * * * * * PROMPT - MOVE * * * * * * * * * * * * * * * * */ @@ -354,33 +344,33 @@ body.rtl .card .card-action { .file-list li { width: 100%; user-select: none; - border-radius: 0.2em; - padding: 0.3em; + border-radius: .2em; + padding: .3em; } -.file-list li[aria-selected="true"] { +.file-list li[aria-selected=true] { background: var(--blue) !important; - color: var(--iconSecondary) !important; - transition: 0.1s ease all; + color: #fff !important; + transition: .1s ease all; } .file-list li:hover { - background: var(--surfaceSecondary); + background-color: #e9eaeb; cursor: pointer; } .file-list li:before { content: "folder"; - color: var(--textPrimary); + color: #6f6f6f; vertical-align: middle; line-height: 1.4; - font-family: "Material Icons"; + font-family: 'Material Icons'; font-size: 1.75em; - margin-right: 0.25em; + margin-right: .25em; } -.file-list li[aria-selected="true"]:before { - color: var(--iconSecondary); +.file-list li[aria-selected=true]:before { + color: white; } .help { @@ -409,11 +399,11 @@ body.rtl .card .card-action { } .collapsible { - border-top: 1px solid var(--borderPrimary); + border-top: 1px solid rgba(0,0,0,0.1); } .collapsible:last-of-type { - border-bottom: 1px solid var(--borderPrimary); + border-bottom: 1px solid rgba(0,0,0,0.1); } .collapsible > input { @@ -431,18 +421,18 @@ body.rtl .card .card-action { .collapsible > label * { margin: 0; - color: var(--textPrimary); + color: rgba(0,0,0,0.57); } .collapsible > label i { - transition: 0.2s ease transform; + transition: .2s ease transform; user-select: none; } .collapsible .collapse { max-height: 0; overflow: hidden; - transition: 0.2s ease all; + transition: .2s ease all; } .collapsible > input:checked ~ .collapse { @@ -452,7 +442,7 @@ body.rtl .card .card-action { } .collapsible > input:checked ~ label i { - transform: rotate(180deg); + transform: rotate(180deg) } .card .collapsible { @@ -478,12 +468,12 @@ body.rtl .card .card-action { flex: 1; padding: 2em; border-radius: 0.2em; - border: 1px solid var(--borderPrimary); + border: 1px solid rgba(0, 0, 0, 0.1); text-align: center; } .card .card-action.full .action { - margin: 0 0.25em 0.5em; + margin: 0 0.25em 0.50em; } .card .card-action.full .action i { @@ -499,7 +489,7 @@ body.rtl .card .card-action { } /*** RTL - Fix disk usage information (in english) ***/ -html[dir="rtl"] .credits { +body.rtl .credits { text-align: right; direction: ltr; -} +} \ No newline at end of file diff --git a/frontend/src/css/header.css b/frontend/src/css/header.css index 7a427b0a..a964a66f 100644 --- a/frontend/src/css/header.css +++ b/frontend/src/css/header.css @@ -1,279 +1,273 @@ header { - z-index: 1000; - background: var(--surfacePrimary); - border-bottom: 1px solid var(--divider); - box-shadow: 0 0 5px var(--borderPrimary); - position: fixed; - top: 0; - left: 0; - height: 4em; - width: 100%; - padding: 0; - display: flex; - padding: 0.5em 0.5em 0.5em 1em; - align-items: center; + z-index: 1000; + background-color: #fff; + border-bottom: 1px solid rgba(0, 0, 0, 0.075); + box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); + position: fixed; + top: 0; + left: 0; + height: 4em; + width: 100%; + padding: 0; + display: flex; + padding: 0.5em 0.5em 0.5em 1em; + align-items: center; } -header > * { - flex: 0 0 auto; +header>* { + flex: 0 0 auto; } header title { - display: block; - flex: 1 1 auto; - padding: 0 1em; - overflow: hidden; - text-overflow: ellipsis; - font-size: 1.2em; + display: block; + flex: 1 1 auto; + padding: 0 1em; + overflow: hidden; + text-overflow: ellipsis; + font-size: 1.2em; } header .overlay { - width: 0; - height: 0; + width: 0; + height: 0; } header a, header a:hover { - color: inherit; + color: inherit; } -header > div:first-child > .action, +header>div:first-child>.action, header img { - margin-right: 1em; + margin-right: 1em; } header img { - height: 2.5em; + height: 2.5em; } header .action span { - display: none; + display: none; } -header > div div { - vertical-align: middle; - position: relative; +header>div div { + vertical-align: middle; + position: relative; } header .search-button, header .menu-button { - display: none; + display: none; } #more { - display: none; + display: none; } #search { - position: relative; - height: 100%; - width: 100%; - max-width: 25em; + position: relative; + height: 100%; + width: 100%; + max-width: 25em; } #search.active { - position: fixed; - top: 0; - right: 0; - width: 100%; - max-width: 100%; - height: 100%; - z-index: 9999; + position: fixed; + top: 0; + right: 0; + width: 100%; + max-width: 100%; + height: 100%; + z-index: 9999; } #search #input { - background: var(--surfaceSecondary); - border-color: var(--surfacePrimary); - display: flex; - height: 100%; - padding: 0em 0.75em; - border-radius: 0.3em; - transition: 0.1s ease all; - align-items: center; - z-index: 2; -} - -#search #input input::placeholder { - color: var(--textSecondary); + background-color: #f5f5f5; + display: flex; + height: 100%; + padding: 0em 0.75em; + border-radius: 0.3em; + transition: .1s ease all; + align-items: center; + z-index: 2; } #search.active #input { - border-bottom: 1px solid var(--borderPrimary); - box-shadow: 0 0 5px var(--borderPrimary); - background: var(--surfacePrimary); - height: 4em; + border-bottom: 1px solid rgba(0, 0, 0, 0.075); + box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); + background-color: #fff; + height: 4em; } -#search.active > div { - border-radius: 0 !important; +#search.active>div { + border-radius: 0 !important; } #search.active i, #search.active input { - color: var(--textPrimary); + color: #212121; } -#search #input > .action, -#search #input > i { - margin-right: 0.3em; - user-select: none; +#search #input>.action, +#search #input>i { + margin-right: 0.3em; + user-select: none; } #search input { - width: 100%; - border: 0; - background-color: transparent; - padding: 0; + width: 100%; + border: 0; + background-color: transparent; + padding: 0; } #search #result { - visibility: visible; - max-height: none; - background: var(--background); - text-align: left; - padding: 0; - color: var(--textPrimary); - height: 0; - transition: - 0.1s ease height, - 0.1s ease padding; - overflow-x: hidden; - overflow-y: auto; - z-index: 1; + visibility: visible; + max-height: none; + background-color: #f8f8f8; + text-align: left; + padding: 0; + color: rgba(0, 0, 0, 0.6); + height: 0; + transition: .1s ease height, .1s ease padding; + overflow-x: hidden; + overflow-y: auto; + z-index: 1; } -html[dir="rtl"] #search #result { - direction: ltr; +body.rtl #search #result { + direction: ltr; } -#search #result > div > *:first-child { - margin-top: 0; +#search #result>div>*:first-child { + margin-top: 0; } -html[dir="rtl"] #search #result { - text-align: right; +body.rtl #search #result { + direction: rtl; + text-align: right; } /*** RTL - Keep search result LTR because it has paths (in english) ***/ -html[dir="rtl"] #search #result ul > * { - direction: ltr; - text-align: left; +body.rtl #search #result ul>* { + direction: ltr; + text-align: left; } #search.active #result { - padding: 0.5em; - height: calc(100% - 4em); + padding: .5em; + height: calc(100%); } #search ul { - padding: 0; - margin: 0; - list-style: none; + padding: 0; + margin: 0; + list-style: none; } #search li { - margin-bottom: 0.5em; + margin-bottom: .5em; } -#search #result > div { - max-width: 45em; - margin: 0 auto; +#search #result>div { + max-width: 45em; + margin: 0 auto; } #search #result #renew { - width: 100%; - text-align: center; - display: none; - margin: 0; - max-width: none; + width: 100%; + text-align: center; + display: none; + margin: 0; + max-width: none; } #search.ongoing #result #renew { - display: block; + display: block; } #search.active #result i { - color: var(--iconTertiary); + color: #ccc; } -#search.active #result > p > i { - text-align: center; - margin: 0 auto; - display: table; +#search.active #result>p>i { + text-align: center; + margin: 0 auto; + display: table; } #search.active #result ul li a { - display: flex; - align-items: center; - padding: 0.3em 0; + display: flex; + align-items: center; + padding: .3em 0; } #search.active #result ul li a i { - margin-right: 0.3em; + margin-right: .3em; } -/* I dont think we need these anymore */ -/* #search::-webkit-input-placeholder { - color: var(--textPrimary); +#search::-webkit-input-placeholder { + color: rgba(255, 255, 255, .5); +} + +#search:-moz-placeholder { + opacity: 1; + color: rgba(255, 255, 255, .5); } #search::-moz-placeholder { - opacity: 1; - color: var(--textPrimary); + opacity: 1; + color: rgba(255, 255, 255, .5); } #search:-ms-input-placeholder { - color: var(--textPrimary); + color: rgba(255, 255, 255, .5); } -#search #input input::placeholder { - color: var(--textPrimary); -} */ - #search .boxes { - border: 1px solid var(--borderPrimary); - box-shadow: 0 0 5px var(--borderPrimary); - background: var(--surfacePrimary); - margin: 1em 0; + border: 1px solid rgba(0, 0, 0, 0.075); + box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); + background: #fff; + margin: 1em 0; } #search .boxes h3 { - margin: 0; - font-weight: 500; - font-size: 1em; - color: var(--textSecondary); - padding: 0.5em; + margin: 0; + font-weight: 500; + font-size: 1em; + color: #212121; + padding: .5em; } -html[dir="rtl"] #search .boxes h3 { - text-align: right; +body.rtl #search .boxes h3 { + text-align: right; } -#search .boxes > div { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - margin-right: -1em; - margin-bottom: -1em; +#search .boxes>div { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin-right: -1em; + margin-bottom: -1em; } -#search .boxes > div > div { - background: var(--blue); - color: #fff; - text-align: center; - width: 10em; - padding: 1em; - cursor: pointer; - margin-bottom: 1em; - margin-right: 1em; - flex-grow: 1; +#search .boxes>div>div { + background: var(--blue); + color: #fff; + text-align: center; + width: 10em; + padding: 1em; + cursor: pointer; + margin-bottom: 1em; + margin-right: 1em; + flex-grow: 1; } #search .boxes p { - margin: 1em 0 0; + margin: 1em 0 0; } #search .boxes i { - color: #fff !important; - font-size: 3.5em; -} + color: #fff !important; + font-size: 3.5em; +} \ No newline at end of file diff --git a/frontend/src/css/listing-icons.css b/frontend/src/css/listing-icons.css index 49db1acb..32c87755 100644 --- a/frontend/src/css/listing-icons.css +++ b/frontend/src/css/listing-icons.css @@ -2,50 +2,30 @@ /* General */ -.file-icons [aria-label^="."] { - opacity: 0.33; -} -.file-icons [aria-label$=".bak"] { - opacity: 0.33; -} +.file-icons [aria-label^="."] { opacity: 0.33 } +.file-icons [aria-label$=".bak"] { opacity: 0.33 } -.file-icons [data-type="audio"] i::before { - content: "volume_up"; -} -.file-icons [data-type="blob"] i::before { - content: "insert_drive_file"; -} -.file-icons [data-type="image"] i::before { - content: "image"; -} -.file-icons [data-type="pdf"] i::before { - content: "description"; -} -.file-icons [data-type="text"] i::before { - content: "description"; -} -.file-icons [data-type="video"] i::before { - content: "movie"; -} -.file-icons [data-type="invalid_link"] i::before { - content: "link_off"; -} +.file-icons [data-type=audio] i::before { content: 'volume_up' } +.file-icons [data-type=blob] i::before { content: 'insert_drive_file' } +.file-icons [data-type=image] i::before { content: 'image' } +.file-icons [data-type=pdf] i::before { content: 'description' } +.file-icons [data-type=text] i::before { content: 'description' } +.file-icons [data-type=video] i::before { content: 'movie' } +.file-icons [data-type=invalid_link] i::before { content: 'link_off' } /* #f90 - Image */ .file-icons [aria-label$=".ai"] i::before, .file-icons [aria-label$=".odg"] i::before, -.file-icons [aria-label$=".xcf"] i::before { - content: "image"; -} +.file-icons [aria-label$=".xcf"] i::before +{ content: 'image' } /* #f90 - Presentation */ .file-icons [aria-label$=".odp"] i::before, .file-icons [aria-label$=".ppt"] i::before, -.file-icons [aria-label$=".pptx"] i::before { - content: "slideshow"; -} +.file-icons [aria-label$=".pptx"] i::before +{ content: 'slideshow' } /* #0f0 - Spreadsheet/Database */ @@ -54,9 +34,8 @@ .file-icons [aria-label$=".odb"] i::before, .file-icons [aria-label$=".ods"] i::before, .file-icons [aria-label$=".xls"] i::before, -.file-icons [aria-label$=".xlsx"] i::before { - content: "border_all"; -} +.file-icons [aria-label$=".xlsx"] i::before +{ content: 'border_all' } /* #00f - Document */ @@ -64,9 +43,8 @@ .file-icons [aria-label$=".docx"] i::before, .file-icons [aria-label$=".log"] i::before, .file-icons [aria-label$=".odt"] i::before, -.file-icons [aria-label$=".rtf"] i::before { - content: "description"; -} +.file-icons [aria-label$=".rtf"] i::before +{ content: 'description' } /* #999 - Code */ @@ -87,9 +65,8 @@ .file-icons [aria-label$=".rs"] i::before, .file-icons [aria-label$=".vue"] i::before, .file-icons [aria-label$=".xml"] i::before, -.file-icons [aria-label$=".yml"] i::before { - content: "code"; -} +.file-icons [aria-label$=".yml"] i::before +{ content: 'code' } /* #999 - Executable */ @@ -98,18 +75,16 @@ .file-icons [aria-label$=".exe"] i::before, .file-icons [aria-label$=".jar"] i::before, .file-icons [aria-label$=".ps1"] i::before, -.file-icons [aria-label$=".sh"] i::before { - content: "web_asset"; -} +.file-icons [aria-label$=".sh"] i::before +{ content: 'web_asset' } /* #999 - Installer */ .file-icons [aria-label$=".deb"] i::before, .file-icons [aria-label$=".msi"] i::before, .file-icons [aria-label$=".pkg"] i::before, -.file-icons [aria-label$=".rpm"] i::before { - content: "archive"; -} +.file-icons [aria-label$=".rpm"] i::before +{ content: 'archive' } /* #999 - Compressed */ @@ -121,9 +96,8 @@ .file-icons [aria-label$=".tar"] i::before, .file-icons [aria-label$=".xz"] i::before, .file-icons [aria-label$=".zip"] i::before, -.file-icons [aria-label$=".zst"] i::before { - content: "folder_zip"; -} +.file-icons [aria-label$=".zst"] i::before +{ content: 'folder_zip' } /* #999 - Disk */ @@ -134,35 +108,25 @@ .file-icons [aria-label$=".vdi"] i::before, .file-icons [aria-label$=".vhd"] i::before, .file-icons [aria-label$=".vmdk"] i::before, -.file-icons [aria-label$=".wim"] i::before { - content: "album"; -} +.file-icons [aria-label$=".wim"] i::before +{ content: 'album' } /* #999 - Font */ .file-icons [aria-label$=".otf"] i::before, .file-icons [aria-label$=".ttf"] i::before, .file-icons [aria-label$=".woff"] i::before, -.file-icons [aria-label$=".woff2"] i::before { - content: "font_download"; -} +.file-icons [aria-label$=".woff2"] i::before +{ content: 'font_download' } /* Colors */ /* General */ -.file-icons [data-type="audio"] i { - color: var(--icon-yellow); -} -.file-icons [data-type="image"] i { - color: var(--icon-orange); -} -.file-icons [data-type="video"] i { - color: var(--icon-violet); -} -.file-icons [data-type="invalid_link"] i { - color: var(--icon-red); -} +.file-icons [data-type=audio] i { color: var(--icon-yellow) } +.file-icons [data-type=image] i { color: var(--icon-orange) } +.file-icons [data-type=video] i { color: var(--icon-violet) } +.file-icons [data-type=invalid_link] i { color: var(--icon-red) } /* #f00 - Adobe/Oracle */ @@ -171,9 +135,8 @@ .file-icons [aria-label$=".jar"] i, .file-icons [aria-label$=".psd"] i, .file-icons [aria-label$=".rb"] i, -.file-icons [data-type="pdf"] i { - color: var(--icon-red); -} +.file-icons [data-type=pdf] i +{ color: var(--icon-red) } /* #f90 - Image/Presentation */ @@ -183,18 +146,16 @@ .file-icons [aria-label$=".ppt"] i, .file-icons [aria-label$=".pptx"] i, .file-icons [aria-label$=".vue"] i, -.file-icons [aria-label$=".xcf"] i { - color: var(--icon-orange); -} +.file-icons [aria-label$=".xcf"] i +{ color: var(--icon-orange) } /* #ff0 - Various */ .file-icons [aria-label$=".css"] i, .file-icons [aria-label$=".js"] i, .file-icons [aria-label$=".json"] i, -.file-icons [aria-label$=".zip"] i { - color: var(--icon-yellow); -} +.file-icons [aria-label$=".zip"] i +{ color: var(--icon-yellow) } /* #0f0 - Spreadsheet/Google */ @@ -203,9 +164,8 @@ .file-icons [aria-label$=".go"] i, .file-icons [aria-label$=".ods"] i, .file-icons [aria-label$=".xls"] i, -.file-icons [aria-label$=".xlsx"] i { - color: var(--icon-green); -} +.file-icons [aria-label$=".xlsx"] i +{ color: var(--icon-green) } /* #00f - Document/Microsoft/Apple/Closed */ @@ -228,26 +188,18 @@ .file-icons [aria-label$=".ps1"] i, .file-icons [aria-label$=".rtf"] i, .file-icons [aria-label$=".vob"] i, -.file-icons [aria-label$=".wim"] i { - color: var(--icon-blue); -} +.file-icons [aria-label$=".wim"] i +{ color: var(--icon-blue) } /* #60f - Various */ .file-icons [aria-label$=".iso"] i, .file-icons [aria-label$=".php"] i, -.file-icons [aria-label$=".rar"] i { - color: var(--icon-violet); -} +.file-icons [aria-label$=".rar"] i +{ color: var(--icon-violet) } /* Overrides */ -.file-icons [data-dir="true"] i { - color: var(--icon-blue); -} -.file-icons [data-dir="true"] i::before { - content: "folder"; -} -.file-icons [aria-selected="true"] i { - color: var(--iconSecondary); -} +.file-icons [data-dir=true] i { color: var(--icon-blue) } +.file-icons [data-dir=true] i::before { content: 'folder' } +.file-icons [aria-selected=true] i { color: var(--item-selected) } diff --git a/frontend/src/css/listing.css b/frontend/src/css/listing.css index 565815a4..61324975 100644 --- a/frontend/src/css/listing.css +++ b/frontend/src/css/listing.css @@ -1,288 +1,571 @@ -html[dir="rtl"] #listing { - margin-right: 16em; +#listing { + --item-selected: white; +} + +body.rtl #listing { + margin-right: 16em; } #listing h2 { - margin: 0 0 0 0.5em; - font-size: 0.9em; - color: var(--textPrimary); - font-weight: 500; + margin: 0 0 0 0.5em; + font-size: .9em; + color: rgba(0, 0, 0, 0.38); + font-weight: 500; } #listing .item div:last-of-type * { - text-overflow: ellipsis; - overflow: hidden; + text-overflow: ellipsis; + overflow: hidden; } -#listing > div { - display: flex; - flex-wrap: wrap; - justify-content: flex-start; +#listing>div { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; } #listing .item { - background: var(--surfacePrimary); - border-color: var(--divider); - position: relative; - display: flex; - flex-wrap: nowrap; - color: var(--textPrimary); - transition: - 0.1s ease background, - 0.1s ease opacity; - align-items: center; - cursor: pointer; - user-select: none; + background-color: #fff; + position: relative; + display: flex; + flex-wrap: nowrap; + color: #6f6f6f; + transition: .1s ease background, .1s ease opacity; + align-items: center; + cursor: pointer; + user-select: none; } #listing .item div:last-of-type { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } #listing .item p { - margin: 0; + margin: 0; } #listing .item .size, #listing .item .modified { - font-size: 0.9em; + font-size: 0.9em; } #listing .item .name { - font-weight: bold; + font-weight: bold; } #listing .item i { - font-size: 4em; - margin-right: 0.1em; - vertical-align: bottom; + font-size: 4em; + margin-right: 0.1em; + vertical-align: bottom; } #listing .item img { - width: 4em; - height: 4em; - object-fit: cover; - margin-right: 0.1em; - vertical-align: bottom; + width: 4em; + height: 4em; + object-fit: cover; + margin-right: 0.1em; + vertical-align: bottom; } .message { - text-align: center; - font-size: 2em; - margin: 1em auto; - display: block !important; - width: 95%; - color: var(--textPrimary); - font-weight: 500; + text-align: center; + font-size: 2em; + margin: 1em auto; + display: block !important; + width: 95%; + color: rgba(0, 0, 0, 0.3); + font-weight: 500; } .message i { - font-size: 2.5em; - margin-bottom: 0.2em; - display: block; + font-size: 2.5em; + margin-bottom: .2em; + display: block; } #listing.mosaic { - padding-top: 1em; - margin: 0 -0.5em; + padding-top: 1em; + margin: 0 -0.5em; } #listing.mosaic .item { - width: calc(33% - 1em); - margin: 0.5em; - padding: 0.5em; - border-radius: 0.2em; - box-shadow: - 0 1px 3px rgba(0, 0, 0, 0.06), - 0 1px 2px rgba(0, 0, 0, 0.12); + width: calc(33% - 1em); + margin: .5em; + padding: 0.5em; + border-radius: 0.2em; + box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .12); } #listing.mosaic .item:hover { - box-shadow: - 0 1px 3px rgba(0, 0, 0, 0.12), - 0 1px 2px rgba(0, 0, 0, 0.24) !important; + box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24) !important; } #listing.mosaic .header { - display: none; + display: none; } #listing.mosaic .item div:first-of-type { - width: 5em; + width: 5em; } #listing.mosaic .item div:last-of-type { - width: calc(100% - 5vw); + width: calc(100% - 5vw); } #listing.mosaic.gallery .item div:first-of-type { - width: 100%; - height: 12em; + width: 100%; + height: 12em; } #listing.mosaic.gallery .item div:last-of-type { - position: absolute; - bottom: 0.5em; - padding: 1em; - width: calc(100% - 1em); - text-align: center; + position: absolute; + bottom: 0.5em; + padding: 1em; + width: calc(100% - 1em); + text-align: center; } -#listing.mosaic.gallery .item[data-type="image"] div:last-of-type { - color: white; - background: linear-gradient(#0000, #0009); +#listing.mosaic.gallery .item[data-type=image] div:last-of-type { + color: white; + background: linear-gradient(#0000, #0009); } #listing.mosaic.gallery .item i { - width: 100%; - margin-right: 0; - font-size: 8em; - text-align: center; + width: 100%; + margin-right: 0; + font-size: 8em; + text-align: center; } #listing.mosaic.gallery .item img { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } #listing.gallery .size, #listing.gallery .modified { - display: none; + display: none; } #listing.list { - flex-direction: column; - width: 100%; - max-width: 100%; - margin: 0; + flex-direction: column; + width: 100%; + max-width: 100%; + margin: 0; } #listing.list .item { - width: 100%; - margin: 0; - border: 1px solid var(--borderPrimary); - padding: 1em; - border-top: 0; + width: 100%; + margin: 0; + border: 1px solid rgba(0, 0, 0, 0.1); + padding: 1em; + border-top: 0; } #listing.list h2 { - display: none; + display: none; } -#listing .item[aria-selected="true"] { - background: var(--blue) !important; - color: var(--iconSecondary) !important; +#listing .item[aria-selected=true] { + /* background: var(--blue) !important; */ + color: var(--item-selected) !important; } #listing.list .item div:first-of-type { - width: 3em; + width: 3em; } #listing.list .item div:first-of-type i { - font-size: 2em; + font-size: 2em; } #listing.list .item div:first-of-type img { - width: 2em; - height: 2em; + width: 2em; + height: 2em; } #listing.list .item div:last-of-type { - width: calc(100% - 3em); - display: flex; - align-items: center; + width: calc(100% - 3em); + display: flex; + align-items: center; } #listing.list .item .name { - width: 50%; + width: 50%; } #listing.list .item .size { - width: 25%; + width: 25%; } #listing .item.header { - display: none !important; - background-color: var(--iconTertiary); + display: none !important; + background-color: #ccc; } #listing.list .header i { - font-size: 1.5em; - vertical-align: middle; - margin-left: 0.2em; + font-size: 1.5em; + vertical-align: middle; + margin-left: .2em; } #listing.list .item.header { - display: flex !important; - background: var(--background); - z-index: 999; - padding: 0.85em; - border: 0; - border-bottom: 1px solid var(--borderPrimary); + display: flex !important; + background: #fafafa; + z-index: 999; + padding: .85em; + border: 0; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); } -#listing.list .item.header > div:first-child { - width: 0; +#listing.list .item.header>div:first-child { + width: 0; } #listing.list .item.header .name { - margin-right: 3em; + margin-right: 3em; } #listing.list .header a { - color: inherit; + color: inherit; } -#listing.list .item.header > div:first-child { - width: 0; +#listing.list .item.header>div:first-child { + width: 0; } #listing.list .name { - font-weight: normal; + font-weight: normal; } #listing.list .item.header .name { - margin-right: 3em; + margin-right: 3em; } #listing.list .header span { - vertical-align: middle; + vertical-align: middle; } #listing.list .header i { - opacity: 0; - transition: 0.1s ease all; + opacity: 0; + transition: .1s ease all; } #listing.list .header p:hover i, #listing.list .header .active i { - opacity: 1; + opacity: 1; } #listing.list .item.header .active { - font-weight: bold; + font-weight: bold; } #listing #multiple-selection { - position: fixed; - bottom: -4em; - left: 0; - z-index: 99999; - width: 100%; - background-color: var(--blue); - height: 4em; - padding: 0.5em 0.5em 0.5em 1em; - justify-content: space-between; - transition: 0.2s ease bottom; + position: fixed; + bottom: -4em; + left: 0; + z-index: 99999; + width: 100%; + background-color: var(--blue); + height: 4em; + padding: 0.5em 0.5em 0.5em 1em; + justify-content: space-between; + transition: .2s ease bottom; } #listing #multiple-selection.active { - bottom: 0; + bottom: 0; } #listing #multiple-selection p, #listing #multiple-selection i { - color: var(--iconSecondary); + color: var(--item-selected); } + + +/* remove a bit of padding from the file list entries */ + +#listing.list .item { + padding: 0.7em; +} + +/* make folders yellow-ish */ +#listing .item[data-dir=true] div i { + color: #ffc84b; +} + +/* packed files - colorize and change icon */ +#listing .item[aria-label$=".7z"] div i { + color: #a268a1; +} + +#listing .item[aria-label$=".7z"] .material-icons { + visibility: hidden; +} + +#listing .item[aria-label$=".7z"] .material-icons::before { + content: "archive"; + visibility: visible; +} + +#listing .item[aria-label$=".arj"] div i { + color: #a268a1; +} + +#listing .item[aria-label$=".arj"] .material-icons { + visibility: hidden; +} + +#listing .item[aria-label$=".arj"] .material-icons::before { + content: "archive"; + visibility: visible; +} + +#listing .item[aria-label$=".zip"] div i { + color: #a268a1; +} + +#listing .item[aria-label$=".zip"] .material-icons { + visibility: hidden; +} + +#listing .item[aria-label$=".zip"] .material-icons::before { + content: "archive"; + visibility: visible; +} + +#listing .item[aria-label$=".gz"] div i { + color: #a268a1; +} + +#listing .item[aria-label$=".gz"] .material-icons { + visibility: hidden; +} + +#listing .item[aria-label$=".gz"] .material-icons::before { + content: "archive"; + visibility: visible; +} + +#listing .item[aria-label$=".tar"] div i { + color: #a268a1; +} + +#listing .item[aria-label$=".tar"] .material-icons { + visibility: hidden; +} + +#listing .item[aria-label$=".tar"] .material-icons::before { + content: "archive"; + visibility: visible; +} + + +#listing .item[aria-label$=".bz"] div i { + color: #a268a1; +} + +#listing .item[aria-label$=".bz"] .material-icons { + visibility: hidden; +} + +#listing .item[aria-label$=".bz"] .material-icons::before { + content: "archive"; + visibility: visible; +} + +#listing .item[aria-label$=".bz2"] div i { + color: #a268a1; +} + +#listing .item[aria-label$=".bz2"] .material-icons { + visibility: hidden; +} + +#listing .item[aria-label$=".bz2"] .material-icons::before { + content: "archive"; + visibility: visible; +} + +#listing .item[aria-label$=".xz"] div i { + color: #a268a1; +} + +#listing .item[aria-label$=".xz"] .material-icons { + visibility: hidden; +} + +#listing .item[aria-label$=".xz"] .material-icons::before { + content: "archive"; + visibility: visible; +} + +#listing .item[aria-label$=".tbz"] div i { + color: #a268a1; +} + +#listing .item[aria-label$=".tbz"] .material-icons { + visibility: hidden; +} + +#listing .item[aria-label$=".tbz"] .material-icons::before { + content: "archive"; + visibility: visible; +} + + +/* office files */ +/* PDF - colorize and change icon /* + /* Note: This is yellow because I use SumatraPDF */ +#listing .item[aria-label$=".pdf"] div i { + color: #FFEE00; +} + +#listing .item[aria-label$=".pdf"] .material-icons { + visibility: hidden; +} + +#listing .item[aria-label$=".pdf"] .material-icons::before { + content: "picture_as_pdf"; + visibility: visible; +} + +/* word processors - colorize and change icon */ +/* Word */ +#listing .item[aria-label$=".doc"] div i { + color: #185ABD; +} + +#listing .item[aria-label$=".doc"] .material-icons { + visibility: hidden; +} + +#listing .item[aria-label$=".doc"] .material-icons::before { + content: "description"; + visibility: visible; +} + +#listing .item[aria-label$=".docx"] div i { + color: #185ABD; +} + +#listing .item[aria-label$=".docx"] .material-icons { + visibility: hidden; +} + +#listing .item[aria-label$=".docx"] .material-icons::before { + content: "description"; + visibility: visible; +} + +/* OpenOffice Writer */ +#listing .item[aria-label$=".odt"] div i { + color: #185ABD; +} + +#listing .item[aria-label$=".odt"] .material-icons { + visibility: hidden; +} + +#listing .item[aria-label$=".odt"] .material-icons::before { + content: "description"; + visibility: visible; +} + +/* LibreOffice Writer */ +#listing .item[aria-label$=".sxw"] div i { + color: #185ABD; +} + +#listing .item[aria-label$=".sxw"] .material-icons { + visibility: hidden; +} + +#listing .item[aria-label$=".sxw"] .material-icons::before { + content: "description"; + visibility: visible; +} + + +/* PowerPoint */ +#listing .item[aria-label$=".ppt"] div i { + color: #D35230; +} + +#listing .item[aria-label$=".pptx"] div i { + color: #D35230; +} + +#listing .item[aria-label$=".pps"] div i { + color: #D35230; +} + +/* OpenOffice Impress */ +#listing .item[aria-label$=".odp"] div i { + color: #D35230; +} + + +/* Excel */ +#listing .item[aria-label$=".xls"] div i { + color: #107C41; +} + +#listing .item[aria-label$=".xlsx"] div i { + color: #107C41; +} + +#listing .item[aria-label$=".ods"] div i { + color: #107C41; +} + +#listing .item[aria-label$=".sxc"] div i { + color: #107C41; +} + +#listing .item[aria-label$=".wri"] div i { + color: #336eff; +} + + +/* sound files - colorize */ +#listing .item[data-type=audio] div i { + color: #F47900; +} + +/* video files - colorize */ +#listing .item[data-type=video] div i { + color: #F47900; +} + +/* text files - change icon*/ +#listing .item[aria-label$=".txt"] .material-icons { + visibility: hidden; +} + +#listing .item[aria-label$=".txt"] .material-icons::before { + content: "description"; + visibility: visible; +} + +#listing .item[aria-label$=".md"] .material-icons { + visibility: hidden; +} + +#listing .item[aria-label$=".md"] .material-icons::before { + content: "description"; + visibility: visible; +} + +/* various other files*/ +/* iCal - change icon*/ +#listing .item[aria-label$=".ics"] .material-icons { + visibility: hidden; +} + +#listing .item[aria-label$=".ics"] .material-icons::before { + content: "event"; + visibility: visible; +} \ No newline at end of file diff --git a/frontend/src/css/login.css b/frontend/src/css/login.css index 14bfd1a5..b97ae7cd 100644 --- a/frontend/src/css/login.css +++ b/frontend/src/css/login.css @@ -1,5 +1,5 @@ #login { - background: var(--surfacePrimary); + background: #fff; position: fixed; top: 0; left: 0; @@ -17,7 +17,7 @@ #login h1 { text-align: center; font-size: 2.5em; - margin: 0.4em 0 0.67em; + margin: .4em 0 .67em; } #login form { @@ -34,15 +34,15 @@ } #login #recaptcha { - margin: 0.5em 0 0; + margin: .5em 0 0; } #login .wrong { background: var(--red); color: #fff; - padding: 0.5em; + padding: .5em; text-align: center; - animation: 0.2s opac forwards; + animation: .2s opac forwards; } @keyframes opac { @@ -61,5 +61,5 @@ text-transform: lowercase; font-weight: 500; font-size: 0.9rem; - margin: 0.5rem 0; + margin: .5rem 0; } diff --git a/frontend/src/css/mobile.css b/frontend/src/css/mobile.css index f8b2a45b..eec18edd 100644 --- a/frontend/src/css/mobile.css +++ b/frontend/src/css/mobile.css @@ -1,12 +1,16 @@ @media (max-width: 1024px) { nav { - width: 10em; + width: 10em + } + /* Mobile Only fix div hidden by bottom navigation bar of mobile browser when using height: 100vh */ + #previewer .preview { + /* height: calc(100% - 4em) !important; */ } } @media (max-width: 1024px) { main { - width: calc(100% - 13em); + width: calc(100% - 13em) } } @@ -21,27 +25,27 @@ width: 60%; } #more { - display: inherit; + display: inherit } header .overlay { width: 100%; height: 100%; - background-color: var(--borderPrimary); + background-color: rgba(0, 0, 0, 0.1); } #dropdown { position: fixed; top: 1em; right: 1em; display: block; - background: var(--surfaceSecondary); - box-shadow: 0 0 5px var(--borderPrimary); + background-color: #fff; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); transform: scale(0); - transition: 0.1s ease-in-out transform; + transition: .1s ease-in-out transform; transform-origin: top right; z-index: 99999; } - html[dir="rtl"] #dropdown { + body.rtl #dropdown { right: unset; left: 1em; transform-origin: top left; @@ -61,7 +65,7 @@ } #dropdown .action span:not(.counter) { display: inline-block; - padding: 0.4em; + padding: .4em; } #dropdown .counter { left: 2.25em; @@ -73,10 +77,8 @@ transform: translateX(-50%); display: flex; align-items: center; - background: var(--surfaceSecondary); - box-shadow: - rgba(0, 0, 0, 0.06) 0px 1px 3px, - rgba(0, 0, 0, 0.12) 0px 1px 2px; + background: #fff; + box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px, rgba(0, 0, 0, 0.12) 0px 1px 2px; width: 95%; max-width: 20em; z-index: 1; @@ -88,7 +90,7 @@ #file-selection > span { display: inline-block; margin-left: 1em; - color: var(--textPrimary); + color: #6f6f6f; margin-right: auto; } #file-selection .action span { @@ -97,15 +99,15 @@ nav { top: 0; z-index: 99999; - background: var(--surfaceSecondary); + background: #fff; height: 100%; width: 16em; - box-shadow: 0 0 5px var(--borderPrimary); - transition: 0.1s ease left; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); + transition: .1s ease left; left: -17em; } - html[dir="rtl"] nav { + body.rtl nav { left: unset; right: -17em; } @@ -113,7 +115,7 @@ left: 0; } - html[dir="rtl"] nav.active { + body.rtl nav.active { left: unset; right: 0; } @@ -133,19 +135,19 @@ margin-bottom: 5em; } - html[dir="rtl"] #listing { + body.rtl #listing { margin-right: unset; } - html[dir="rtl"] .breadcrumbs { + body.rtl .breadcrumbs { transform: translateX(16em); } - html[dir="rtl"] #nav .wrapper { + body.rtl #nav .wrapper { margin-right: unset; } - - html[dir="rtl"] .dashboard .row { + + body.rtl .dashboard .row { margin-right: unset; } @@ -168,4 +170,4 @@ #listing.list .item .name { width: 100%; } -} +} \ No newline at end of file diff --git a/frontend/src/css/styles.css b/frontend/src/css/styles.css index ac95cf43..00442507 100644 --- a/frontend/src/css/styles.css +++ b/frontend/src/css/styles.css @@ -1,6 +1,6 @@ @import "normalize.css/normalize.css"; -@import "vue-toastification/dist/index.css"; -@import "vue-final-modal/style.css"; +@import "noty/lib/noty.css"; +@import "noty/lib/themes/mint.css"; @import "./_variables.css"; @import "./_buttons.css"; @import "./_inputs.css"; @@ -16,23 +16,10 @@ @import "./login.css"; @import "./mobile.css"; -/* For testing only - :focus { - outline: 2px solid crimson !important; - border-radius: 3px !important; -} */ - .link { color: var(--blue); } -#loading { - background: var(--background); -} -#loading .spinner > div { - background: var(--iconPrimary); -} - main .spinner { display: block; text-align: center; @@ -45,7 +32,7 @@ main .spinner > div { height: 0.8em; margin: 0 0.1em; font-size: 1em; - background: var(--iconPrimary); + background-color: rgba(0, 0, 0, 0.3); border-radius: 100%; display: inline-block; animation: sk-bouncedelay 1.4s infinite ease-in-out both; @@ -85,7 +72,7 @@ main .spinner .bounce2 { transition: 0.2s ease all; border: 0; margin: 0; - color: var(--action); + color: #546e7a; border-radius: 50%; background: transparent; padding: 0; @@ -107,7 +94,7 @@ main .spinner .bounce2 { } .action:hover { - background-color: var(--hover); + background-color: rgba(0, 0, 0, 0.1); } .action ul { @@ -128,7 +115,7 @@ main .spinner .bounce2 { } .action ul li:hover { - background-color: var(--divider); + background-color: rgba(0, 0, 0, 0.04); } #click-overlay { @@ -151,7 +138,7 @@ main .spinner .bounce2 { bottom: 0; right: 0; background: var(--blue); - color: var(--iconSecondary); + color: #fff; border-radius: 50%; font-size: 0.75em; width: 1.8em; @@ -159,13 +146,14 @@ main .spinner .bounce2 { text-align: center; line-height: 1.55em; font-weight: bold; - border: 2px solid var(--borderPrimary); + border: 2px solid white; } /* PREVIEWER */ #previewer { - background-color: rgba(0, 0, 0, 0.99); + background-color: rgba(0, 0, 0, 0.9); + padding-top: 4em; position: fixed; top: 0; left: 0; @@ -178,25 +166,15 @@ main .spinner .bounce2 { #previewer header { background: none; color: #fff; - border-bottom: 0px; - box-shadow: 0px 0px 0px; - z-index: 19999; } #previewer header > .action i { color: #fff; - text-shadow: 1px 1px 1px #000000; -} - -#previewer header > title { - white-space: nowrap; - text-shadow: 1px 1px 1px #000000; } @media (min-width: 738px) { #previewer header #dropdown .action i { color: #fff; - text-shadow: 1px 1px 1px #000000; } } @@ -210,7 +188,7 @@ main .spinner .bounce2 { #previewer .preview { text-align: center; - height: 100%; + height: calc(100vh - 4em); } #previewer .preview pre { @@ -225,11 +203,6 @@ main .spinner .bounce2 { margin: 0; } -#previewer .preview audio { - width: 95%; - height: 88%; -} - #previewer .preview video { height: 100%; } @@ -274,7 +247,7 @@ main .spinner .bounce2 { #previewer > button { margin: 0; position: fixed; - top: 50%; + top: calc(50% + 1.85em); transform: translateY(-50%); background-color: rgba(80, 80, 80, 0.5); color: white; @@ -314,7 +287,7 @@ main .spinner .bounce2 { #previewer .spinner > div { width: 18px; height: 18px; - background: var(--iconPrimary); + background-color: white; } /* EDITOR */ @@ -322,21 +295,17 @@ main .spinner .bounce2 { #editor-container { display: flex; flex-direction: column; - background-color: var(--background); + background-color: #fafafa; position: fixed; padding-top: 4em; top: 0; left: 0; height: 100%; width: 100%; - z-index: 9998; + z-index: 9999; overflow: hidden; } -#editor-container .bar { - background: var(--surfacePrimary); -} - #editor-container #editor { flex: 1; } @@ -347,7 +316,7 @@ main .spinner .bounce2 { } /*** RTL - flip and position arrow of path ***/ -html[dir="rtl"] .breadcrumbs .chevron { +body.rtl .breadcrumbs .chevron { transform: scaleX(-1) translateX(16em); } @@ -359,6 +328,22 @@ html[dir="rtl"] .breadcrumbs .chevron { font-size: 1rem; } +/* * * * * * * * * * * * * * * * + * PROMPT * + * * * * * * * * * * * * * * * */ + +.noty_buttons { + text-align: right; + padding: 0 10px 10px !important; +} + +.noty_buttons button { + background: rgba(0, 0, 0, 0.05); + border: 1px solid rgba(0, 0, 0, 0.1); + box-shadow: 0 0 0 0; + font-size: 1rem; +} + /* * * * * * * * * * * * * * * * * FOOTER * * * * * * * * * * * * * * * * */ @@ -436,17 +421,17 @@ html[dir="rtl"] .breadcrumbs .chevron { * RTL overrides * * * * * * * * * * * * * * * * */ -html[dir="rtl"] .card-content textarea { +body.rtl .card-content textarea { direction: ltr; text-align: left; } -html[dir="rtl"] .card-content .small + input { +body.rtl .card-content .small + input { direction: ltr; text-align: left; } -html[dir="rtl"] .card.floating .card-content .file-list { +body.rtl .card.floating .card-content .file-list { direction: ltr; text-align: left; } diff --git a/frontend/src/utils/constants.js b/frontend/src/utils/constants.js new file mode 100644 index 00000000..8992c320 --- /dev/null +++ b/frontend/src/utils/constants.js @@ -0,0 +1,46 @@ +const name = window.FileBrowser.Name || "File Browser"; +const disableExternal = window.FileBrowser.DisableExternal; +const disableUsedPercentage = window.FileBrowser.DisableUsedPercentage; +const baseURL = window.FileBrowser.BaseURL; +const staticURL = window.FileBrowser.StaticURL; +const recaptcha = window.FileBrowser.ReCaptcha; +const recaptchaKey = window.FileBrowser.ReCaptchaKey; +const signup = window.FileBrowser.Signup; +const version = window.FileBrowser.Version; +const logoURL = `${staticURL}/img/logo.svg`; +const Folder=`${staticURL}/img/icons/folder.svg`; +const Home=`${staticURL}/img/icons/home.svg`; +const noAuth = window.FileBrowser.NoAuth; +const authMethod = window.FileBrowser.AuthMethod; +const loginPage = window.FileBrowser.LoginPage; +const theme = window.FileBrowser.Theme; +const enableThumbs = window.FileBrowser.EnableThumbs; +const resizePreview = window.FileBrowser.ResizePreview; +const enableExec = window.FileBrowser.EnableExec; +const tusSettings = window.FileBrowser.TusSettings; +const origin = window.location.origin; +const tusEndpoint = `/api/tus`; + +export { + name, + disableExternal, + disableUsedPercentage, + baseURL, + logoURL, + Folder, + Home, + recaptcha, + recaptchaKey, + signup, + version, + noAuth, + authMethod, + loginPage, + theme, + enableThumbs, + resizePreview, + enableExec, + tusSettings, + origin, + tusEndpoint, +}; diff --git a/frontend/src/views/files/Editor.vue b/frontend/src/views/files/Editor.vue index 1654937e..555b82da 100644 --- a/frontend/src/views/files/Editor.vue +++ b/frontend/src/views/files/Editor.vue @@ -1,129 +1,152 @@ - diff --git a/frontend/src/views/files/Listing.vue b/frontend/src/views/files/Listing.vue new file mode 100644 index 00000000..24115d43 --- /dev/null +++ b/frontend/src/views/files/Listing.vue @@ -0,0 +1,822 @@ +