fix(fe/themes): normalize white theme

This commit is contained in:
hexxa 2022-03-19 14:55:26 +08:00 committed by Hexxa
parent aabde4c3d7
commit 4cdfddc090
15 changed files with 527 additions and 1047 deletions

View file

@ -1,207 +0,0 @@
.blue0-font {
color: #3498db;
}
.blue1-font {
color: #2980b9;
}
.cyan0-font {
color: #1abc9c;
}
.cyan1-font {
color: #16a085;
}
.purple0-font {
color: #9b59b6;
}
.purple1-font {
color: #8e44ad;
}
.red0-font {
color: #e74c3c;
}
.red1-font {
color: #c0392b;
}
.yellow0-font {
color: #f1c40f;
}
.yellow1-font {
color: #f39c12;
}
.yellow2-font {
color: #e67e22;
}
.yellow3-font {
color: #d35400;
}
.green0-font {
color: #2ecc71;
}
.green1-font {
color: #27ae60;
}
.green2-font {
color: #15cd3d;
}
.white-font {
color: #fff;
}
.white0-font {
color: #ecf0f1;
}
.white1-font {
color: #bdc3c7;
}
.grey0-font {
color: #95a5a6;
}
.grey1-font {
color: #7f8c8d;
}
.grey2-font {
color: #ecf0f6;
}
.grey3-font {
color: #697384;
}
.black-font {
color: #000;
}
.black0-font {
color: #34495e;
}
.black1-font {
color: #2c3e50;
}
.blue0-bg {
background-color: #3498db;
}
.blue1-bg {
background-color: #2980b9;
}
.blue2-bg {
background-color: #2f45c5;
}
.cyan0-bg {
background-color: #1abc9c;
}
.cyan1-bg {
background-color: #16a085;
}
.purple0-bg {
background-color: #9b59b6;
}
.purple1-bg {
background-color: #8e44ad;
}
.red0-bg {
background-color: #e74c3c;
}
.red1-bg {
background-color: #c0392b;
}
.yellow0-bg {
background-color: #f1c40f;
}
.yellow1-bg {
background-color: #f39c12;
}
.yellow2-bg {
background-color: #e67e22;
}
.yellow3-bg {
background-color: #15cd3d;;
}
.yellow3-bg {
background-color: #d35400;
}
.green0-bg {
background-color: #2ecc71;
}
.green1-bg {
background-color: #27ae60;
}
.green2-bg {
background-color: #15cd3d;
}
.white-bg {
background-color: #fff;
}
.white0-bg {
background-color: #ecf0f1;
}
.white1-bg {
background-color: #bdc3c7;
}
.grey0-bg {
background-color: #95a5a6;
}
.grey1-bg {
background-color: #7f8c8d;
}
.grey2-bg {
background-color: #ecf0f6;
}
.grey3-bg {
color: #697384;
}
.black-bg {
background-color: #000;
}
.black0-bg {
background-color: #34495e;
}
.black1-bg {
background-color: #2c3e50;
}

View file

@ -0,0 +1,208 @@
@charset "utf-8";
.blue0-font {
color: #3498db;
}
.blue1-font {
color: #2980b9;
}
.cyan0-font {
color: #1abc9c;
}
.cyan1-font {
color: #16a085;
}
.purple0-font {
color: #9b59b6;
}
.purple1-font {
color: #8e44ad;
}
.red0-font {
color: #e74c3c;
}
.red1-font {
color: #c0392b;
}
.yellow0-font {
color: #f1c40f;
}
.yellow1-font {
color: #f39c12;
}
.yellow2-font {
color: #e67e22;
}
.yellow3-font {
color: #d35400;
}
.green0-font {
color: #2ecc71;
}
.green1-font {
color: #27ae60;
}
.green2-font {
color: #15cd3d;
}
.white-font {
color: #fff;
}
.white0-font {
color: #ecf0f1;
}
.white1-font {
color: #bdc3c7;
}
.grey0-font {
color: #95a5a6;
}
.grey1-font {
color: #7f8c8d;
}
.grey2-font {
color: #ecf0f6;
}
.grey3-font {
color: #697384;
}
.black-font {
color: #000;
}
.black0-font {
color: #34495e;
}
.black1-font {
color: #2c3e50;
}
.blue0-bg {
background-color: #3498db;
}
.blue1-bg {
background-color: #2980b9;
}
.blue2-bg {
background-color: #2f45c5;
}
.cyan0-bg {
background-color: #1abc9c;
}
.cyan1-bg {
background-color: #16a085;
}
.purple0-bg {
background-color: #9b59b6;
}
.purple1-bg {
background-color: #8e44ad;
}
.red0-bg {
background-color: #e74c3c;
}
.red1-bg {
background-color: #c0392b;
}
.yellow0-bg {
background-color: #f1c40f;
}
.yellow1-bg {
background-color: #f39c12;
}
.yellow2-bg {
background-color: #e67e22;
}
.yellow3-bg {
background-color: #15cd3d;
}
.yellow3-bg {
background-color: #d35400;
}
.green0-bg {
background-color: #2ecc71;
}
.green1-bg {
background-color: #27ae60;
}
.green2-bg {
background-color: #15cd3d;
}
.white-bg {
background-color: #fff;
}
.white0-bg {
background-color: #ecf0f1;
}
.white1-bg {
background-color: #bdc3c7;
}
.grey0-bg {
background-color: #95a5a6;
}
.grey1-bg {
background-color: #7f8c8d;
}
.grey2-bg {
background-color: #ecf0f6;
}
.grey3-bg {
background-color: #697384;
}
.black-bg {
background-color: #000;
}
.black0-bg {
background-color: #34495e;
}
.black1-bg {
background-color: #2c3e50;
}

View file

@ -1,35 +1,8 @@
.hidden { @charset "utf-8";
display: none;
}
.txt-cap { /* +space */
text-transform: capitalize;
}
.font-xs { /* TODO: generate these */
font-size: 1.2rem;
line-height: 1.8rem;
}
.font-s {
font-size: 1.4rem;
line-height: 2.1rem;
}
.font-m {
font-size: 1.6rem;
line-height: 2.4rem;
}
.font-l {
font-size: 1.8rem;
line-height: 2.7rem;
}
.font-xl {
font-size: 2rem;
line-height: 3rem;
}
.padding-xs { .padding-xs {
padding: 0.25rem; padding: 0.25rem;
@ -231,211 +204,30 @@
margin-bottom: 4rem; margin-bottom: 4rem;
} }
.blue0-font { /* +font */
color: #3498db; .font-xs {
font-size: 1.2rem;
line-height: 3.2rem;
} }
.blue1-font { .font-s {
color: #2980b9; font-size: 1.4rem;
line-height: 3.2rem;
} }
.cyan0-font { .font-m {
color: #1abc9c; font-size: 1.6rem;
line-height: 3.2rem;
} }
.cyan1-font { .font-l {
color: #16a085; font-size: 1.8rem;
line-height: 3.2rem;
} }
.purple0-font { .font-xl {
color: #9b59b6; font-size: 2rem;
} line-height: 3.2rem;
.purple1-font {
color: #8e44ad;
}
.red0-font {
color: #e74c3c;
}
.red1-font {
color: #c0392b;
}
.yellow0-font {
color: #f1c40f;
}
.yellow1-font {
color: #f39c12;
}
.yellow2-font {
color: #e67e22;
}
.yellow3-font {
color: #d35400;
}
.green0-font {
color: #2ecc71;
}
.green1-font {
color: #27ae60;
}
.green2-font {
color: #15cd3d;
}
.white-font {
color: #fff;
}
.white0-font {
color: #ecf0f1;
}
.white1-font {
color: #bdc3c7;
}
.grey0-font {
color: #95a5a6;
}
.grey1-font {
color: #7f8c8d;
}
.grey2-font {
color: #ecf0f6;
}
.grey3-font {
color: #697384;
}
.black-font {
color: #000;
}
.black0-font {
color: #34495e;
}
.black1-font {
color: #2c3e50;
}
.blue0-bg {
background-color: #3498db;
}
.blue1-bg {
background-color: #2980b9;
}
.blue2-bg {
background-color: #2f45c5;
}
.cyan0-bg {
background-color: #1abc9c;
}
.cyan1-bg {
background-color: #16a085;
}
.purple0-bg {
background-color: #9b59b6;
}
.purple1-bg {
background-color: #8e44ad;
}
.red0-bg {
background-color: #e74c3c;
}
.red1-bg {
background-color: #c0392b;
}
.yellow0-bg {
background-color: #f1c40f;
}
.yellow1-bg {
background-color: #f39c12;
}
.yellow2-bg {
background-color: #e67e22;
}
.yellow3-bg {
background-color: #15cd3d;
}
.yellow3-bg {
background-color: #d35400;
}
.green0-bg {
background-color: #2ecc71;
}
.green1-bg {
background-color: #27ae60;
}
.green2-bg {
background-color: #15cd3d;
}
.white-bg {
background-color: #fff;
}
.white0-bg {
background-color: #ecf0f1;
}
.white1-bg {
background-color: #bdc3c7;
}
.grey0-bg {
background-color: #95a5a6;
}
.grey1-bg {
background-color: #7f8c8d;
}
.grey2-bg {
background-color: #ecf0f6;
}
.grey3-bg {
background-color: #697384;
}
.black-bg {
background-color: #000;
}
.black0-bg {
background-color: #34495e;
}
.black1-bg {
background-color: #2c3e50;
} }
.title-l { .title-l {
@ -443,8 +235,6 @@
font-weight: bold; font-weight: bold;
line-height: 3.2rem; line-height: 3.2rem;
overflow: hidden; overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
overflow-wrap: break-word; overflow-wrap: break-word;
display: block; display: block;
} }
@ -462,8 +252,6 @@
font-size: 1.2rem; font-size: 1.2rem;
line-height: 3.2rem; line-height: 3.2rem;
overflow: hidden; overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
overflow-wrap: break-word; overflow-wrap: break-word;
display: block; display: block;
} }
@ -472,8 +260,6 @@
font-size: 1.4rem; font-size: 1.4rem;
line-height: 3.2rem; line-height: 3.2rem;
overflow: hidden; overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
overflow-wrap: break-word; overflow-wrap: break-word;
display: block; display: block;
} }
@ -490,34 +276,24 @@
font-size: 1.2rem; font-size: 1.2rem;
line-height: 3.2rem; line-height: 3.2rem;
overflow: hidden; overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
overflow-wrap: break-word; overflow-wrap: break-word;
display: block; display: block;
} }
/* +utils */
.inline-block {
display: inline-block;
}
.hidden {
display: none;
}
.clickable { .clickable {
cursor: pointer; cursor: pointer;
} }
.v-mid {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: flex-start;
}
.v-mid-r {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: flex-end;
}
.full-width {
width: 100%;
}
.bold { .bold {
font-weight: bold; font-weight: bold;
} }
@ -526,6 +302,44 @@
clear: both; clear: both;
} }
.float-l {
float: left;
}
.txt-align-l {
text-align: left;
}
.txt-align-r {
text-align: right;
}
.work-break-all {
word-break: break-all;
}
.icon-s {
height: 2rem;
padding: 0.6rem 0;
}
.icon-m {
height: 2.4rem;
padding: 0.4rem 0;
}
.icon-l {
height: 3.2rem;
padding: 0;
}
.no-height {
height: 0;
overflow: hidden;
}
/* +animations */
.anm-rotate-s { .anm-rotate-s {
animation: trm-rotate-s 1s infinite linear; animation: trm-rotate-s 1s infinite linear;
} }
@ -591,39 +405,3 @@
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
.float-l {
float: left;
}
.txt-align-l {
text-align: left;
}
.txt-align-r {
text-align: right;
}
.work-break-all {
word-break: break-all;
}
.icon-s {
height: 2rem;
padding: 0.6rem 0;
}
.icon-m {
height: 2.4rem;
padding: 0.4rem 0;
}
.icon-l {
height: 3.2rem;
padding: 0;
}
.no-height {
height: 0;
overflow: hidden;
}

View file

@ -16,8 +16,6 @@ h6 {
} }
html { html {
background-color: #ecf0f1; background-color: #ecf0f1;
/* background: url("bg.jpg") no-repeat left center fixed;
background-size: auto 100%; */
font-family: "Helvetica Neue", "Helvetica", "PingFang SC", "Microsoft YaHei", font-family: "Helvetica Neue", "Helvetica", "PingFang SC", "Microsoft YaHei",
"Arial", sans-serif; "Arial", sans-serif;
font-size: 62.5%; font-size: 62.5%;

View file

@ -1,54 +1,6 @@
.dark-font { @charset "utf-8";
color: #34495e;
}
.light-font {
color: #95a5a6;
}
.normal-font {
color: #697384;
}
.highlight-font {
color: #16a085;
}
.error-font {
color: #f1c40f;
}
.lightest-bg { /* ids */
background-color: white;
}
.light-bg {
background-color: #f6f6f6;
}
.normal-bg {
background-color: #ecf0f6;
}
.highlight-bg {
background-color: #16a085;
}
.dark-bg {
background-color: #2c3e50;
}
button {
background-color: rgba(0, 0, 0, 0.3);
}
::placeholder {
color: #95a5a6;
}
a {
color: #16a085;
}
a:hover {
color: cc#2ecc71;
}
input {
background-color: rgba(0, 0, 0, 0.15);
}
input:focus {
opacity: 0.8;
box-shadow: 0 0.1rem 1rem rgba(22, 160, 133, 0.1);
}
#root-frame { #root-frame {
position: fixed; position: fixed;
@ -58,6 +10,47 @@ input:focus {
bottom: 0; bottom: 0;
} }
.theme-default #breadcrumb {
width: 100%;
}
.theme-default #breadcrumb .location-item {
margin: 0 0.5rem 0 0;
display: inline-block;
line-height: 3rem;
}
.theme-default #breadcrumb .item {
margin: 0 0.5rem 0 0;
max-width: 6rem;
display: inline-block;
line-height: 3rem;
}
.theme-default #breadcrumb .content {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
overflow-wrap: break-word;
display: block;
}
.theme-default #space-used {
text-align: right;
line-height: 3rem;
font-size: 1.4rem;
}
.theme-default #sharing-list .desc {
background-color: #ecf0f1;
font-size: 1.2rem;
margin: 1rem 0;
color: #697384;
padding: 1rem;
border: dashed 1px #95a5a6;
overflow-wrap: break-word;
}
.theme-default #bg { .theme-default #bg {
background: url("/static/img/textured_paper.png") repeat fixed center; background: url("/static/img/textured_paper.png") repeat fixed center;
position: fixed; position: fixed;
@ -91,34 +84,90 @@ input:focus {
background: transparent; background: transparent;
} }
.theme-default #panes { .theme-default .qrcode {
padding: 1rem;
background-color: #ecf0f1;
display: inline-block;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 5px 30px 0 rgb(31 38 135 / 10%);
backdrop-filter: blur(9.5px);
}
.theme-default .qrcode-container {
height: 3rem;
}
.theme-default .qrcode-icon {
height: 3rem;
}
.theme-default .qrcode-child-container {
position: relative;
z-index: 50;
}
.theme-default .qrcode-child {
position: absolute;
}
.theme-default .container-center {
margin: 2rem auto auto auto;
width: 96%;
max-width: 80rem;
z-index: 9;
}
.theme-default .layer {
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
background-color: rgba(0, 0, 0, 0.5); background: url("/static/img/textured_paper.png") repeat fixed center;
z-index: 100;
overflow: scroll; overflow: scroll;
z-index: 100;
} }
.theme-default #root-container { .theme-default #login-layer {
max-width: 80rem; z-index: 200;
width: 96%;
text-align: left;
margin: 3rem auto 8rem auto;
} }
.theme-default #layers { .theme-default #loading-layer {
height: 0; z-index: 201;
z-index: 3;
} }
.theme-default #panes .container { .theme-default #loading-container {
padding: 2rem; background-color: rgba(255, 255, 255, 1);
background-color: white; border-radius: 3rem;
margin: 3rem auto 1rem auto; padding: 0.5rem;
border-radius: 0.6rem; position: fixed;
right: 2rem;
bottom: 2rem;
z-index: 201;
height: 5rem;
width: 5rem;
}
.theme-default #settings-layer {
z-index: 100;
}
.theme-default #tail {
color: #34495e;
font-size: 1.2rem;
text-align: center;
margin: 4rem auto;
}
.theme-default input {
font-size: 1.2rem;
color: #34495e;
background-color: #ecf0f6;
border: solid 1px #95a5a6;
}
.container-padding {
padding: 1.5rem;
} }
.theme-default #panes #title { .theme-default #panes #title {
@ -181,9 +230,21 @@ input:focus {
height: 4rem; height: 4rem;
} }
.theme-default #layers {
height: 0;
z-index: 3;
}
.theme-default #root-container {
max-width: 80rem;
width: 96%;
text-align: left;
margin: 3rem auto 8rem auto;
}
.container { /* +composition */
.theme-default .container {
width: 100%; width: 100%;
color: #34495e; color: #34495e;
background-color: white; background-color: white;
@ -192,142 +253,66 @@ input:focus {
margin: auto auto 2rem auto; margin: auto auto 2rem auto;
} }
.container-padding { .theme-default .info {
padding: 1.5rem; border: dashed 1px #95a5a6;
} font-size: 1.4rem;
/* .theme-default #breadcrumb .item:last-child {
margin-right: 0;
} */
.theme-default #op-bar {
}
.theme-default #browser-op {
margin-bottom: 1rem;
}
.theme-default #browser-op .left {
margin: 0 1rem 0 0;
}
.theme-default #browser {
padding-bottom: 1rem;
}
.theme-default #item-table {
width: 100%;
max-width: 100%;
display: block;
}
.theme-default #item-table thead,
.theme-default #item-table tfoot,
.theme-default #item-table tbody,
.theme-default #item-table tr {
max-width: 100%;
display: block;
padding: 0;
}
.theme-default #item-table td,
.theme-default #item-table th {
display: inline-block;
padding: 0;
}
.theme-default #item-rows {
margin-top: 2rem;
}
/* .theme-default #item-rows .name,
.theme-default #item-rows .name a {
color: #34495e;
font-size: 1.8rem;
line-height: 2rem;
display: block;
word-break: break-all;
} */
.theme-default #item-rows .hr {
height: 1px;
margin: 2rem 0;
background-color: #ecf0f1;
}
/* .theme-default #item-rows .card {
padding: 0.5rem 0;
text-align: left;
} */
.theme-default .qrcode {
padding: 1rem; padding: 1rem;
background-color: #ecf0f1; color: #697384;
display: inline-block; margin: 1rem 0 0 0;
background: rgba(255, 255, 255, 0.8); background-color: #f6f6f6;
box-shadow: 0 5px 30px 0 rgb(31 38 135 / 10%); white-space: nowrap;
backdrop-filter: blur(9.5px); overflow: auto;
} }
.theme-default .qrcode-flat { .theme-default .badge {
padding: 1rem; border: none;
background-color: #ecf0f1;
display: inline-block;
background: rgba(255, 255, 255, 0.8);
}
.theme-default .qrcode-container {
height: 3rem;
}
.theme-default .qrcode-icon {
height: 3rem;
}
.theme-default .qrcode-child-container {
position: relative;
z-index: 50;
}
.theme-default .qrcode-child {
position: absolute;
}
.theme-default .item-cell {
height: 5rem;
}
.theme-default .float-menu {
position: relative;
box-shadow: 0 5px 30px 0 rgba(31, 38, 135, 0.1);
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: white; font-weight: bold;
}
.theme-default #browser .item-info {
padding: 1rem 0;
font-size: 1.2rem; font-size: 1.2rem;
border-top: dashed 1px #7f8c8d; padding: 1rem 1rem;
line-height: 1.2rem;
display: inline-block;
} }
.theme-default #icon-home { .theme-default .progress-grey {
color: black; background-color: #ecf0f6;
margin-right: 1rem; width: 100%;
height: 0.3rem;
} }
.theme-default #browser .error { .theme-default .progress-green {
line-height: 4rem; background-color: #1abc9c;
border: dashed 1px #e74c3c; height: 100%;
background-color: #e74c3c; transition: width 300ms;
border-radius: 0.5rem;
color: white;
margin: 1rem;
padding: 0 1rem;
} }
.theme-default .upload-item { .theme-default .col-l {
padding: 1rem 0 1rem 0; float: left;
width: 70%;
overflow-wrap: break-word;
}
.theme-default .col-r {
float: right;
width: 30%;
text-align: right;
}
.theme-default .error-inline {
font-size: 1.4rem;
padding: 1rem;
color: #f1c40f;
margin: 1rem 0 0 0;
background-color: #2c3e50;
white-space: nowrap;
overflow: auto;
}
.theme-default .label {
font-size: 1.2rem;
line-height: 1.8rem;
color: #7f8c8d;
padding-left: 0.5rem;
} }
.theme-default .error { .theme-default .error {
@ -339,202 +324,65 @@ input:focus {
overflow-wrap: break-word; overflow-wrap: break-word;
} }
.theme-default .sharing-item {
margin: 2rem 0 2rem 0;
}
.theme-default #tabs {
padding: 1rem;
}
.theme-default #upload-op {
padding: 0;
}
.theme-default .red-btn {
background-color: #e74c3c;
color: #fff;
}
.theme-default .blue-btn {
background-color: #3498db;
color: #fff;
}
.theme-default .cyan-btn {
background-color: #1abc9c;
color: #fff;
}
.theme-default .container-center {
margin: 2rem auto auto auto;
width: 96%;
max-width: 80rem;
z-index: 9;
}
.theme-default .float {
display: inline-block;
margin: auto 1rem auto auto;
}
.theme-default .float-r {
display: inline-block;
margin: auto auto 1rem 1rem;
}
.theme-default .float-input {
display: inline-block;
margin: auto 1rem 1rem auto;
}
.theme-default .float-input:last-child {
margin: auto auto auto auto;
}
.theme-default .float-input .label {
font-size: 1.2rem;
line-height: 1.8rem;
color: #7f8c8d;
}
.theme-default #pane-settings {
/* padding: 2rem; */
}
.theme-default .user-form {
font-size: 1.4rem;
padding: 1rem 0;
margin-top: 1rem;
border-bottom: dashed 1px #000;
}
.theme-default .more {
border: dashed 1px #ccc;
}
.theme-default .role-list-item {
margin: 0 auto 1rem 0;
}
.theme-default .wide-input {
width: 20rem;
}
.theme-default .hr { .theme-default .hr {
height: 1px; height: 1px;
margin: 1rem 0; margin: 1rem 0;
background-color: #ecf0f1; background-color: #ecf0f1;
} }
.theme-default .key-value { /* +colors */
margin-top: 0.5rem;
}
.theme-default .layer { .theme-default .dark-font {
position: fixed; color: #34495e;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: url("/static/img/textured_paper.png") repeat fixed center;
overflow: scroll;
z-index: 100;
} }
.theme-default .light-font {
.theme-default #login-layer { color: #95a5a6;
z-index: 200;
} }
.theme-default .normal-font {
.theme-default #loading-layer {
z-index: 201;
}
.theme-default #loading-container {
background-color: rgba(255, 255, 255, 1);
border-radius: 3rem;
padding: 0.5rem;
position: fixed;
right: 2rem;
bottom: 2rem;
z-index: 201;
height: 5rem;
width: 5rem;
}
.theme-default #settings-layer {
z-index: 100;
}
.theme-default .value {
color: #697384; color: #697384;
} }
.theme-default .highlight-font {
.theme-default #tail { color: #16a085;
color: #34495e; }
font-size: 1.2rem; .theme-default .error-font {
text-align: center; color: #f1c40f;
margin: 4rem auto;
} }
.theme-default input { .theme-default .lightest-bg {
font-size: 1.2rem; background-color: white;
color: #34495e; }
.theme-default .light-bg {
background-color: #f6f6f6;
}
.theme-default .normal-bg {
background-color: #ecf0f6; background-color: #ecf0f6;
border: solid 1px #95a5a6;
} }
.theme-default .highlight-bg {
.theme-default .h1, background-color: #16a085;
.theme-default .h2 {
font-size: 2rem;
font-weight: bold;
} }
.theme-default .h3, .theme-default .dark-bg {
.theme-default .h4 { background-color: #2c3e50;
font-size: 1.8rem;
font-weight: bold;
} }
.theme-default .h5, .theme-default button {
.theme-default .h6 { background-color: rgba(0, 0, 0, 0.3);
font-size: 1.6rem;
font-weight: bold;
} }
.theme-default ::placeholder {
.theme-default .font-xs { color: #95a5a6;
font-size: 1.2rem;
line-height: 1.8rem;
} }
.theme-default a {
.theme-default .font-s { color: #16a085;
font-size: 1.4rem;
line-height: 2.1rem;
} }
.theme-default a:hover {
.theme-default .font-m { color: cc#2ecc71;
font-size: 1.6rem;
line-height: 2.4rem;
} }
.theme-default input {
.theme-default .font-l { background-color: rgba(0, 0, 0, 0.15);
font-size: 1.8rem;
line-height: 2.7rem;
} }
.theme-default input:focus {
.theme-default .font-xl { opacity: 0.8;
font-size: 2rem; box-shadow: 0 0.1rem 1rem rgba(22, 160, 133, 0.1);
line-height: 3rem;
} }
.theme-default .button-default { .theme-default .button-default {
color: #697384; color: #697384;
background-color: #ecf0f6; background-color: #ecf0f6;
} }
.item-name-vertical {
width: 14rem;
}
.item-name-horizontal {
width: 48rem;
}

View file

@ -1,150 +0,0 @@
.theme-default .card {
padding: 1rem;
border-radius: 0.8rem;
}
.theme-default #item-rows .column {
width: 50%;
max-width: 100%;
float: left;
}
.theme-default .info {
border: dashed 1px #95a5a6;
font-size: 1.4rem;
padding: 1rem;
color: #697384;
margin: 1rem 0 0 0;
background-color: #f6f6f6;
white-space: nowrap;
overflow: auto;
}
.theme-default #breadcrumb {
width: 100%;
}
.theme-default #breadcrumb .location-item {
margin: 0 0.5rem 0 0;
display: inline-block;
line-height: 3rem;
}
.theme-default #breadcrumb .item {
margin: 0 0.5rem 0 0;
max-width: 6rem;
display: inline-block;
line-height: 3rem;
}
.theme-default #breadcrumb .content {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
overflow-wrap: break-word;
display: block;
}
.theme-default .inline-block {
display: inline-block;
}
.theme-default .select-btn {
width: 8rem;
display: inline-block;
}
.theme-default #space-used {
text-align: right;
line-height: 3rem;
font-size: 1.4rem;
}
.theme-default .badge {
border: none;
border-radius: 0.5rem;
font-weight: bold;
font-size: 1.2rem;
padding: 1rem 1rem;
line-height: 1.2rem;
display: inline-block;
}
.theme-default #upload-list .progress-grey {
background-color: #ecf0f6;
width: 100%;
height: 0.3rem;
}
.theme-default #upload-list .progress-green {
background-color: #1abc9c;
height: 100%;
transition: width 300ms;
}
.theme-default .l-col {
display: inline-block;
width: 70%;
}
.theme-default .r-col {
display: inline-block;
width: 30%;
text-align: right;
}
.theme-default #upload-list .title {
font-size: 1.4rem;
line-height: 3.2rem;
overflow-wrap: break-word;
}
.theme-default #upload-list .desc {
font-size: 1.2rem;
line-height: 3.2rem;
overflow-wrap: break-word;
}
.theme-default #item-rows .desc {
display: block;
word-break: break-all;
}
.theme-default .error-inline {
font-size: 1.4rem;
padding: 1rem;
color: #f1c40f;
margin: 1rem 0 0 0;
background-color: #2c3e50;
white-space: nowrap;
overflow: auto;
}
.theme-default .label {
font-size: 1.2rem;
line-height: 1.8rem;
color: #7f8c8d;
padding-left: 0.5rem;
}
.theme-default #sharing-list .col-l {
float: left;
width: 70%;
overflow-wrap: break-word;
}
.theme-default #sharing-list .col-r {
float: right;
width: 30%;
text-align: right;
}
.theme-default #sharing-list .desc {
background-color: #ecf0f1;
font-size: 1.2rem;
margin: 1rem 0;
color: #697384;
padding: 1rem;
border: dashed 1px #95a5a6;
overflow-wrap: break-word;
}

View file

@ -7,18 +7,19 @@
name="viewport" name="viewport"
content="initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no,uc-fitscreen=yes" content="initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no,uc-fitscreen=yes"
/> />
<link rel="icon" href="static/img/favicon.svg"> <link rel="icon" href="static/img/favicon.svg" />
<link rel=”mask-icon” href=”static/img/favicon.svg” color=”#16a085"> <link rel=”mask-icon” href=”static/img/favicon.svg” color=”#16a085">
<link rel="apple-touch-icon" href="static/img/favicon.png"> <link rel="apple-touch-icon" href="static/img/favicon.png" />
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff" />
<script src="/static/js/react.development.js?v=16.8.6"></script> <script src="/static/js/react.development.js?v=16.8.6"></script>
<script src="/static/js/react-dom.development.js?v=16.8.6"></script> <script src="/static/js/react-dom.development.js?v=16.8.6"></script>
<script src="/static/js/immutable.min.js?v=4.0.0-rc.12"></script> <script src="/static/js/immutable.min.js?v=4.0.0-rc.12"></script>
<link rel="stylesheet" href="/static/css/reset.css"> <link rel="stylesheet" href="/static/css/reset.css" />
<link rel="stylesheet" href="/static/css/default.css"> <link rel="stylesheet" href="/static/css/colors.css" />
<link rel="stylesheet" href="/static/css/white.css"> <link rel="stylesheet" href="/static/css/default.css" />
<link rel="stylesheet" href="/static/css/white_compact.css"> <link rel="stylesheet" href="/static/css/white.css" />
<link rel="stylesheet" href="/static/css/black.css" />
<!-- <link <!-- <link
rel="apple-touch-icon" rel="apple-touch-icon"
sizes="57x57" sizes="57x57"

View file

@ -7,18 +7,19 @@
name="viewport" name="viewport"
content="initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no,uc-fitscreen=yes" content="initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no,uc-fitscreen=yes"
/> />
<link rel="icon" href="static/img/favicon.svg"> <link rel="icon" href="static/img/favicon.svg" />
<link rel=”mask-icon” href=”static/img/favicon.svg” color=”#16a085"> <link rel=”mask-icon” href=”static/img/favicon.svg” color=”#16a085">
<link rel="apple-touch-icon" href="static/img/favicon.png"> <link rel="apple-touch-icon" href="static/img/favicon.png" />
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff" />
<script src="/static/js/react.production.min.js?v=16.8.6"></script> <script src="/static/js/react.production.min.js?v=16.8.6"></script>
<script src="/static/js/react-dom.production.min.js?v=16.8.6"></script> <script src="/static/js/react-dom.production.min.js?v=16.8.6"></script>
<script src="/static/js/immutable.min.js?v=4.0.0-rc.12"></script> <script src="/static/js/immutable.min.js?v=4.0.0-rc.12"></script>
<link rel="stylesheet" href="/static/css/reset.css"> <link rel="stylesheet" href="/static/css/reset.css" />
<link rel="stylesheet" href="/static/css/default.css"> <link rel="stylesheet" href="/static/css/colors.css" />
<link rel="stylesheet" href="/static/css/white.css"> <link rel="stylesheet" href="/static/css/default.css" />
<link rel="stylesheet" href="/static/css/white_compact.css"> <link rel="stylesheet" href="/static/css/white.css" />
<link rel="stylesheet" href="/static/css/black.css" />
<!-- <link <!-- <link
rel="apple-touch-icon" rel="apple-touch-icon"
sizes="57x57" sizes="57x57"

View file

@ -25,7 +25,7 @@ export const BtnList = (props: Props) => {
const btns = props.btnNames.map((btnName: string, i: number) => { const btns = props.btnNames.map((btnName: string, i: number) => {
const cb = props.btnCallbacks.get(i); const cb = props.btnCallbacks.get(i);
return ( return (
<button key={`rows-${i}`} className="float button-default" onClick={cb}> <button key={`rows-${i}`} className="inline-block margin-r-m button-default" onClick={cb}>
{btnName} {btnName}
</button> </button>
); );

View file

@ -7,7 +7,7 @@ export interface Props {
export const Card = (props: Props) => { export const Card = (props: Props) => {
return ( return (
<div className="card float-l"> <div className="padding-m float-l">
<div className="title-l black0-font">{props.value}</div> <div className="title-l black0-font">{props.value}</div>
<div className="desc-m">{props.name}</div> <div className="desc-m">{props.name}</div>
</div> </div>

View file

@ -211,7 +211,7 @@ export class UserForm extends React.Component<
}; };
return ( return (
<div className="user-form"> <div className="padding-t-m padding-b-m">
<Columns <Columns
rows={List([ rows={List([
List([ List([
@ -394,6 +394,8 @@ export class UserForm extends React.Component<
])} ])}
/> />
</div> </div>
<div className="hr"></div>
</div> </div>
); );
} }
@ -551,7 +553,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
const roleList = this.props.admin.roles.valueSeq().map((role: string) => { const roleList = this.props.admin.roles.valueSeq().map((role: string) => {
return ( return (
<div key={role} className="role-list-item"> <div key={role} className="margin-b-m">
<Flexbox <Flexbox
children={List([ children={List([
<span>{role}</span>, <span>{role}</span>,

View file

@ -561,11 +561,11 @@ export class FilesPanel extends React.Component<Props, State, {}> {
</div> </div>
<div className="column"> <div className="column">
<div className="card margin-l-m"> <div className="card">
<span className="title-m dark-font">{modTimeTitle}</span> <span className="title-m dark-font">{modTimeTitle}</span>
<span className="font-s work-break-all">{modTimeFormatted}</span> <span className="font-s work-break-all">{modTimeFormatted}</span>
</div> </div>
<div className="card margin-l-m"> <div className="card">
<span className="title-m dark-font">{sizeTitle}</span> <span className="title-m dark-font">{sizeTitle}</span>
<span className="font-s work-break-all">{itemSize}</span> <span className="font-s work-break-all">{itemSize}</span>
</div> </div>
@ -756,7 +756,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
); );
const viewType = this.props.ui.control.controls.get(filesViewCtrl); const viewType = this.props.ui.control.controls.get(filesViewCtrl);
const view = ( const view = (
<div id="item-rows"> <div className="margin-t-l">
{this.prepareColumns(this.props.filesInfo.items, showOp)} {this.prepareColumns(this.props.filesInfo.items, showOp)}
</div> </div>
); // TODO: support better views in the future ); // TODO: support better views in the future
@ -800,7 +800,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
</div> </div>
<Container> <Container>
<div id="browser-op" className={`${showOp}`}> <div className={`${showOp} margin-b-m`}>
<Flexbox <Flexbox
children={List([ children={List([
<span> <span>
@ -812,7 +812,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
this.props.filesInfo.dirPath.join("/") this.props.filesInfo.dirPath.join("/")
); );
}} }}
className="red-btn margin-r-m" className="red0-bg white-font margin-r-m"
> >
{this.props.msg.pkg.get("browser.share.del")} {this.props.msg.pkg.get("browser.share.del")}
</button> </button>
@ -833,7 +833,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
<button <button
type="button" type="button"
onClick={() => this.delete()} onClick={() => this.delete()}
className="red-btn margin-r-m" className="red0-bg white-font margin-r-m"
> >
{this.props.msg.pkg.get("browser.delete")} {this.props.msg.pkg.get("browser.delete")}
</button> </button>
@ -869,7 +869,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
<span className={`${showOp}`}> <span className={`${showOp}`}>
<button <button
onClick={() => this.selectAll()} onClick={() => this.selectAll()}
className="select-btn button-default" className="inline-block button-default"
> >
{this.props.msg.pkg.get("browser.selectAll")} {this.props.msg.pkg.get("browser.selectAll")}
</button> </button>

View file

@ -131,7 +131,7 @@ export class SharingsPanel extends React.Component<Props, State, {}> {
); );
const elem = ( const elem = (
<div className="sharing-item" key={dirPath}> <div className="margin-t-m margin-b-m" key={dirPath}>
{row1} {row1}
<div className="desc">{sharingURL}</div> <div className="desc">{sharingURL}</div>
<div className="hr"></div> <div className="hr"></div>

View file

@ -151,10 +151,10 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
); );
const elem = ( const elem = (
<div key={uploading.filePath} className="upload-item"> <div key={uploading.filePath} className="margin-t-m margin-b-m">
<div className={`font-s l-col`}> <div className={`font-s col-l`}>
<span className="title">{fileName}&nbsp;</span> <span className="font-s work-break-all">{`${fileName} - `}</span>
<span className="desc grey0-font"> <span className="font-s work-break-all grey0-font">
{FileSize(uploading.uploaded, { round: 0 })} {FileSize(uploading.uploaded, { round: 0 })}
&nbsp;/&nbsp; &nbsp;/&nbsp;
{FileSize(uploading.size, { {FileSize(uploading.size, {
@ -165,8 +165,8 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
</span> </span>
</div> </div>
<div className="r-col">{operations}</div> <div className="col-r">{operations}</div>
<div className="fix"></div>
{progressBar} {progressBar}
{errorInfo} {errorInfo}
</div> </div>

View file

@ -52,7 +52,8 @@ export class RootFrame extends React.Component<Props, State, {}> {
render() { render() {
const bgStyle = this.makeBgStyle(); const bgStyle = this.makeBgStyle();
const theme = "theme-default"; const themeBlack = "theme-black";
const theme = themeBlack;
const fontSizeClass = "font-m"; const fontSizeClass = "font-m";
const displaying = this.props.ui.control.controls.get(controlName); const displaying = this.props.ui.control.controls.get(controlName);