Keys unlocking/locking
This commit is contained in:
parent
f9dfc8835c
commit
c65f46a17d
13 changed files with 3271 additions and 82 deletions
|
|
@ -19,16 +19,8 @@ body {
|
|||
height: 100%;
|
||||
}
|
||||
h1 {
|
||||
color: #abc837;
|
||||
}
|
||||
.layout-crumbs {
|
||||
grid-template-areas: "header" "crumbs" "child-nodes" "name" "content" "files" "blank";
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: min-content /* header */ min-content /* crumbs */ min-content /* child-nodes */ min-content /* name */ min-content /* content */ min-content /* files */ 1fr;
|
||||
/* blank */
|
||||
}
|
||||
.layout-crumbs #tree {
|
||||
display: none;
|
||||
margin-top: 0px;
|
||||
font-size: 1em;
|
||||
}
|
||||
#blackout {
|
||||
position: absolute;
|
||||
|
|
@ -113,10 +105,21 @@ h1 {
|
|||
#upload .files .progress.done {
|
||||
color: #0a0;
|
||||
}
|
||||
#properties {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #333;
|
||||
background: #fff;
|
||||
border: 2px solid #000;
|
||||
padding: 16px;
|
||||
z-index: 1025;
|
||||
}
|
||||
header {
|
||||
display: grid;
|
||||
grid-area: header;
|
||||
grid-template-columns: min-content 1fr min-content min-content;
|
||||
grid-template-columns: min-content 1fr repeat(3, min-content);
|
||||
align-items: center;
|
||||
padding: 0px;
|
||||
color: #333c11;
|
||||
|
|
@ -149,6 +152,13 @@ header .add {
|
|||
padding-right: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
header .keys {
|
||||
padding-right: 16px;
|
||||
}
|
||||
header .keys img {
|
||||
cursor: pointer;
|
||||
height: 24px;
|
||||
}
|
||||
header .menu {
|
||||
font-size: 1.25em;
|
||||
padding-right: 16px;
|
||||
|
|
@ -341,6 +351,34 @@ header .menu {
|
|||
white-space: nowrap;
|
||||
text-align: right;
|
||||
}
|
||||
#keys {
|
||||
padding: 32px;
|
||||
color: #333;
|
||||
}
|
||||
#keys .key-list {
|
||||
display: grid;
|
||||
grid-template-columns: min-content 1fr;
|
||||
grid-gap: 12px 12px;
|
||||
align-items: end;
|
||||
margin-top: 16px;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
#keys .key-list .status {
|
||||
cursor: pointer;
|
||||
}
|
||||
#keys .key-list .status img {
|
||||
height: 32px;
|
||||
}
|
||||
#keys .key-list .status .locked {
|
||||
color: #a00;
|
||||
}
|
||||
#keys .key-list .status .unlocked {
|
||||
color: #0a0;
|
||||
}
|
||||
#keys .key-list .description {
|
||||
cursor: pointer;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
.layout-tree {
|
||||
display: grid;
|
||||
grid-template-areas: "header header" "tree crumbs" "tree child-nodes" "tree name" "tree content" "tree files" "tree blank";
|
||||
|
|
@ -386,6 +424,36 @@ header .menu {
|
|||
.layout-crumbs #tree {
|
||||
display: none;
|
||||
}
|
||||
.layout-keys {
|
||||
display: grid;
|
||||
grid-template-areas: "header" "keys";
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: min-content /* header */ 1fr;
|
||||
/* blank */
|
||||
color: #fff;
|
||||
height: 100%;
|
||||
}
|
||||
.layout-keys #crumbs {
|
||||
display: none;
|
||||
}
|
||||
.layout-keys .child-nodes {
|
||||
display: none;
|
||||
}
|
||||
.layout-keys .node-name {
|
||||
display: none;
|
||||
}
|
||||
.layout-keys .grow-wrap {
|
||||
display: none;
|
||||
}
|
||||
.layout-keys #file-section {
|
||||
display: none;
|
||||
}
|
||||
.layout-keys #tree {
|
||||
display: none;
|
||||
}
|
||||
.layout-keys #keys {
|
||||
display: block;
|
||||
}
|
||||
#app {
|
||||
display: grid;
|
||||
grid-template-areas: "header header" "tree crumbs" "tree child-nodes" "tree name" "tree content" "tree files" "tree blank";
|
||||
|
|
@ -396,7 +464,6 @@ header .menu {
|
|||
height: 100%;
|
||||
}
|
||||
#app.toggle-tree {
|
||||
/* blank */
|
||||
grid-template-areas: "header" "crumbs" "child-nodes" "name" "content" "files" "blank";
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: min-content /* header */ min-content /* crumbs */ min-content /* child-nodes */ min-content /* name */ min-content /* content */ min-content /* files */ 1fr;
|
||||
|
|
@ -405,12 +472,8 @@ header .menu {
|
|||
#app.toggle-tree #tree {
|
||||
display: none;
|
||||
}
|
||||
#app.toggle-tree #tree {
|
||||
display: none;
|
||||
}
|
||||
@media only screen and (max-width: 932px) {
|
||||
#app {
|
||||
/* blank */
|
||||
grid-template-areas: "header" "crumbs" "child-nodes" "name" "content" "files" "blank";
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: min-content /* header */ min-content /* crumbs */ min-content /* child-nodes */ min-content /* name */ min-content /* content */ min-content /* files */ 1fr;
|
||||
|
|
@ -419,9 +482,6 @@ header .menu {
|
|||
#app #tree {
|
||||
display: none;
|
||||
}
|
||||
#app #tree {
|
||||
display: none;
|
||||
}
|
||||
#app.toggle-tree {
|
||||
display: grid;
|
||||
grid-template-areas: "header" "tree";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue