zias/wolk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: code cleanup, new features and v2.0

Browse Source 
We're merging this to continue https://github.com/filebrowser/filebrowser/pull/575 and setup translations auto-updating.
This commit is contained in:
Henrique Dias
2019-01-05 16:12:09 +00:00
committed by GitHub
parent 2642333928
commit 39be89780e
155 changed files with 16499 additions and 6583 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/css/_buttons.css Normal file
View File

@@ -0,0 +1,55 @@
.button {
outline: 0;
border: 0;
padding: .5em 1em;
border-radius: .1em;
cursor: pointer;
background: var(--blue);
color: white;
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 {
background-color: var(--dark-blue);
}
.button--block {
margin: 0 0 0.5em;
display: block;
width: 100%;
}
.button--red {
background: var(--red);
}
.button--red:hover {
background: var(--dark-red);
}
.button--flat {
color: var(--dark-blue);
background: transparent;
box-shadow: 0 0 0;
border: 0;
text-transform: uppercase;
}
.button--flat:hover {
background: var(--moon-grey);
}
.button--flat.button--red {
color: var(--dark-red);
}
.button--flat.button--grey {
color: #6f6f6f;
}
.button[disabled] {
opacity: .5;
cursor: not-allowed;
}

35
src/css/_inputs.css Normal file
View File

@@ -0,0 +1,35 @@
.input {
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: rgba(0, 0, 0, 0.2);
}
.input--block {
margin-bottom: .5em;
display: block;
width: 100%;
}
.input--textarea {
line-height: 1.15;
font-family: monospace;
min-height: 10em;
resize: vertical;
}
.input--red {
background: #fcd0cd;
}
.input--green {
background: #c9f2da;
}

29
src/css/_share.css Normal file
View File

@@ -0,0 +1,29 @@
.share__box {
text-align: center;
box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px, rgba(0, 0, 0, 0.12) 0px 1px 2px;
background: #fff;
display: block;
border-radius: 0.2em;
width: 90%;
max-width: 25em;
margin: 6em auto;
}
.share__box__download {
width: 100%;
padding: 1em;
cursor: pointer;
background: #ffffff;
color: rgba(0, 0, 0, 0.5);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.share__box__info {
padding: 2em 3em;
}
.share__box__title {
margin-top: .2em;
overflow: hidden;
text-overflow: ellipsis;
}

53
src/css/_shell.css Normal file
View File

@@ -0,0 +1,53 @@
.shell {
position: fixed;
bottom: 0;
left: 0;
height: 25em;
max-height: calc(100% - 4em);
background: white;
color: #212121;
z-index: 9999;
width: 100%;
font-family: monospace;
overflow: auto;
font-size: 1rem;
cursor: text;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
transition: .2s ease transform;
}
.shell__result {
display: flex;
padding: 0.5em;
align-items: flex-start;
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.shell--hidden {
transform: translateY(105%);
}
.shell__result--hidden {
opacity: 0;
}
.shell__text,
.shell__prompt,
.shell__prompt i {
font-size: inherit;
}
.shell__prompt {
width: 1.2rem;
}
.shell__prompt i {
color: var(--blue);
}
.shell__text {
margin: 0;
font-family: inherit;
white-space: pre-wrap;
width: 100%;
}

7
src/css/_variables.css Normal file
View File

@@ -0,0 +1,7 @@
:root {
--blue: #2196f3;
--dark-blue: #1E88E5;
--red: #F44336;
--dark-red: #D32F2F;
--moon-grey: #f2f2f2;
}

88
src/css/base.css
View File

@@ -29,94 +29,6 @@ video {
width: 100%;
}
pre {
padding: 1em;
border: 1px solid #e6e6e6;
border-radius: 0.5em;
background-color: #f5f5f5;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}
input,
button {
outline: 0 !important;
}
input[type="submit"],
button {
border: 0;
padding: .5em 1em;
margin-left: .5em;
border-radius: .1em;
cursor: pointer;
background: #2196f3;
color: #fff;
border: 1px solid rgba(0, 0, 0, 0.05);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
transition: .1s ease all;
}
input[type="submit"]:hover,
button:hover {
background-color: #1E88E5;
}
input[type="submit"].block,
button.block {
display: block;
width: 100%;
margin: 0 0 1em;
}
button.delete {
background: #F44336;
}
button.delete:hover {
background: #D32F2F;
}
button.cancel {
background-color: #ECEFF1;
color: #37474F;
}
button.cancel:hover {
background-color: #e9eaeb;
}
button.flat,
input[type="submit"].flat {
color: #1E88E5;
background: transparent;
box-shadow: 0 0 0;
border: 0;
margin-left: 0;
text-transform: uppercase;
}
button.flat:hover,
input[type="submit"].flat:hover {
background: rgba(0,0,0,0.05)
}
button.flat.delete {
color: #F44336;
}
button.flat.cancel {
color: #ccc;
}
button.flat[disabled] {
color: #ccc;
cursor: not-allowed;
}
.mobile-only {
display: none !important;
}

58
src/css/dashboard.css
View File

@@ -7,58 +7,6 @@ a {
color: inherit
}
select,
textarea,
input[type="text"],
input[type="password"] {
padding: 0.5em 0;
line-height: 1;
display: block;
border: 0;
border-bottom: 1px solid #dddddd;
transition: .2s ease border;
width: 100%;
background: transparent;
}
textarea {
line-height: 1.15;
padding: .5em;
border: 1px solid #ddd;
font-family: monospace;
min-height: 10em;
resize: none;
border-radius: 2px;
}
.dashboard #locale,
.dashboard #username,
.dashboard #password,
.dashboard #scope {
max-width: 18em;
}
.dashboard #locale {
margin-top: .5em;
}
textarea:focus,
textarea:hover,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="text"]:hover,
input[type="password"]:hover {
border-color: #2979ff;
}
input.red {
border-color: red;
}
input.green {
border-color: green;
}
.dashboard p label {
margin-bottom: .2em;
display: block;
@@ -98,7 +46,7 @@ p code {
}
.dashboard #nav li.active {
border-color: #2196f3
border-color: var(--blue)
}
.dashboard #nav i {
@@ -241,7 +189,7 @@ table tr>*:last-child {
}
.card#share ul li a {
color: #2196F3;
color: var(--blue);
cursor: pointer;
margin-right: auto;
}
@@ -310,7 +258,7 @@ table tr>*:last-child {
}
.file-list li[aria-selected=true] {
background: #2196f3 !important;
background: var(--blue) !important;
color: #fff !important;
transition: .1s ease all;
}

184
src/css/editor.css
View File

@@ -1,184 +0,0 @@
@import "~codemirror/lib/codemirror.css";
@import "~codemirror/theme/ttcn.css";
#editor {
max-width: 800px;
margin: 0 auto;
}
#editor .CodeMirror {
box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px, rgba(0, 0, 0, 0.12) 0px 1px 2px;
margin: 2em 0;
border-radius: .5em;
}
#editor h2 {
color: rgba(0, 0, 0, 0.3);
font-weight: 500;
}
.CodeMirror {
height: auto;
}
.markdown .CodeMirror {
padding: .75em;
}
.cm-s-markdown .CodeMirror-gutter {
border-right: 1px solid #eff3f5;
padding-right: 5px;
margin-right: 15px;
min-width: 2.5em;
padding-bottom: 30px;
}
.cm-s-markdown .CodeMirror-cursor {
border-right: 2px solid #667880;
}
.cm-s-markdown .CodeMirror-lines {
margin: 0;
}
.cm-s-markdown {
color: #3D494E;
}
.cm-s-markdown span.cm-header {
color: #3D494E;
font-weight: bold;
}
.cm-s-markdown span.cm-variable-2 {
color: #3D494E;
}
.cm-s-markdown span.cm-meta {
color: #516066;
}
.cm-s-markdown span.cm-hr {
color: #516066;
}
.cm-s-markdown span.cm-comment {
color: #868f93;
}
.cm-s-markdown span.cm-qualifier {
color: #868f93;
}
.cm-s-markdown span.cm-number {
color: #197987;
}
.cm-s-markdown span.cm-variable {
color: #197987;
}
.cm-s-markdown span.cm-builtin {
color: #197987;
}
.cm-s-markdown span.cm-link {
color: #197987;
text-decoration: underline;
}
.cm-s-markdown span.cm-tag {
color: #197987;
}
.cm-s-markdown span.cm-string {
color: #48abb9;
}
.cm-s-markdown span.cm-string-2 {
color: #48abb9;
}
.cm-s-markdown span.cm-quote {
color: #48abb9;
}
.cm-s-markdown span.cm-atom {
color: #48abb9;
}
.cm-s-markdown span.cm-property {
color: #82a367;
}
.cm-s-markdown span.cm-operator {
color: #82a367;
}
.cm-s-markdown span.cm-variable-3 {
color: #82a367;
}
.cm-s-markdown span.cm-attribute {
color: #90bb74;
}
.cm-s-markdown span.cm-def {
color: #90bb74;
}
.cm-s-markdown span.cm-keyword {
color: #ec6c45;
}
.cm-s-markdown span.cm-bracket {
color: #ec6c45;
}
.cm-s-markdown span.cm-error {
color: #e45346;
}
.cm-s-markdown span.cm-em {
font-style: italic;
}
.cm-s-markdown span.cm-strong {
font-weight: bold;
}
.cm-s-markdown .cm-header-1 {
font-size: 200%;
line-height: 200%;
}
.cm-s-markdown .cm-header-2 {
font-size: 160%;
line-height: 160%;
}
.cm-s-markdown .cm-header-3 {
font-size: 125%;
line-height: 125%;
}
.cm-s-markdown .cm-header-4 {
font-size: 110%;
line-height: 110%;
}
.cm-s-markdown .cm-comment {
background: rgba(0, 0, 0, .05);
border-radius: 2px;
}
.cm-s-markdown .cm-link {
color: #7f8c8d;
}
.cm-s-markdown .cm-url {
color: #aab2b3;
}
.cm-s-markdown .cm-strikethrough {
text-decoration: line-through;
}

30
src/css/fonts.css
View File

@@ -110,32 +110,4 @@
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(../assets/fonts/material/icons.eot);
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(../assets/fonts/material/icons.woff2) format('woff2'),
url(../assets/fonts/material/icons.ttf) format('truetype');
}
.prompt .file-list ul li:before,
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'liga';
}
@import "~material-design-icons/iconfont/material-icons.css";

2
src/css/header.css
View File

@@ -238,7 +238,7 @@ header .search-button {
}
#search .boxes>div>div {
background: #2196F3;
background: var(--blue);
color: #fff;
text-align: center;
width: 10em;

4
src/css/listing.css
View File

@@ -120,7 +120,7 @@
}
#listing .item[aria-selected=true] {
background: #2196f3 !important;
background: var(--blue) !important;
color: #fff !important;
}
@@ -228,7 +228,7 @@
left: 0;
z-index: 99999;
width: 100%;
background-color: #2196f3;
background-color: var(--blue);
height: 4em;
display: none;
padding: 0.5em 0.5em 0.5em 1em;

29
src/css/login.css
View File

@@ -37,14 +37,8 @@
margin: .5em 0 0;
}
#login input {
width: 100%;
width: 100%;
margin: .5em 0 0;
}
#login .wrong {
background: #F44336;
background: var(--red);
color: #fff;
padding: .5em;
text-align: center;
@@ -60,17 +54,12 @@
}
}
#login input[type="text"],
#login input[type="password"] {
padding: .5em 1em;
border: 1px solid #e9e9e9;
transition: .2s ease border;
color: #333;
}
#login input[type="text"]:focus,
#login input[type="password"]:focus,
#login input[type="text"]:hover,
#login input[type="password"]:hover {
border-color: #9f9f9f;
#login p {
cursor: pointer;
text-align: right;
color: var(--blue);
text-transform: lowercase;
font-weight: 500;
font-size: 0.9rem;
margin: .5rem 0;
}

15
src/css/mobile.css
View File

@@ -15,6 +15,12 @@
body {
padding-bottom: 5em;
}
#listing.list .item .size {
display: none;
}
#listing.list .item .name {
width: 60%;
}
#more {
display: inherit
}
@@ -114,3 +120,12 @@
display: block;
}
}
@media (max-width: 450px) {
#listing.list .item .modified {
display: none;
}
#listing.list .item .name {
width: 100%;
}
}

46
src/css/styles.css
View File

@@ -1,14 +1,22 @@
@import "~normalize.css/normalize.css";
@import "~noty/lib/noty.css";
@import "~noty/lib/themes/mint.css";
@import "./_variables.css";
@import "./_buttons.css";
@import "./_inputs.css";
@import "./_shell.css";
@import "./_share.css";
@import "./fonts.css";
@import "./base.css";
@import "./header.css";
@import "./listing.css";
@import "./editor.css";
@import "./dashboard.css";
@import "./login.css";
.link {
color: var(--blue);
}
/* * * * * * * * * * * * * * * *
* ACTION *
* * * * * * * * * * * * * * * */
@@ -84,7 +92,7 @@
position: absolute;
bottom: 0;
right: 0;
background: #2196f3;
background: var(--blue);
color: #fff;
border-radius: 50%;
font-size: .75em;
@@ -203,7 +211,7 @@
color: #a5a5a5;
}
.credits span {
.credits > span {
display: block;
margin: .3em 0;
}
@@ -226,4 +234,36 @@
}
}
/* * * * * * * * * * * * * * * *
* SETTINGS RULES *
* * * * * * * * * * * * * * * */
.rules > div {
display: flex;
align-items: center;
margin: .5rem 0;
}
.rules input[type="checkbox"] {
margin-right: .2rem;
}
.rules input[type="text"] {
border: 1px solid#ddd;
padding: .2rem;
}
.rules label {
margin-right: .5rem;
}
.rules button {
margin-left: auto;
}
.rules button.delete {
padding: .2rem .5rem;
margin-left: .5rem;
}
@import './mobile.css';