diff --git a/static/css/login.css b/static/css/login.css index 50a59ac..cbe85cb 100644 --- a/static/css/login.css +++ b/static/css/login.css @@ -1,33 +1,53 @@ +/* +@theme_gradient: linear-gradient(to right, #009fff, #ec2f4b); +@theme_gradient: linear-gradient(to right, #f5af19, #f12711); +@theme_gradient: linear-gradient(to right, #fdc830, #f37335); +@theme_gradient: linear-gradient(to right, #8a2387, #e94057, #f27121); +@theme_gradient: linear-gradient(to right, #659999, #f4791f); +*/ #login { + height: 100%; + background: #eee; +} +#login .header { + background: linear-gradient(to right, #3e5151, #decba4); + width: 100%; + padding: 16px; + text-align: center; + color: #fff; +} +#login .header h1 { + margin-bottom: 0px; +} +#login .fields { display: grid; justify-items: center; - height: 100%; + padding: 32px; } -#login input { - max-width: 300px; +#login .fields input { margin-bottom: 32px; - width: 100%; border: 0px; - border-bottom: 1px solid #444; - font-size: 18pt; + border: 1px solid #444; + padding: 8px; + width: 100%; + font-size: 1.25em; background-color: #fff; } -#login input:focus { +#login .fields input:focus { outline: none; } -#login button { - max-width: 300px; +#login .fields button { border: 1px solid #666; background: #fff; color: #444; - padding: 16px 32px; - font-size: 1em; + padding: 12px 24px; + font-size: 1.25em; align-self: center; } -#login button:hover { +#login .fields button:hover { background: #ddd; } -#login .auth-failed { +#login .fields .auth-failed { margin-top: 32px; color: #a00; background: #fff; diff --git a/static/css/main.css b/static/css/main.css index 2ce59f2..56ee6a9 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -1,3 +1,10 @@ +/* +@theme_gradient: linear-gradient(to right, #009fff, #ec2f4b); +@theme_gradient: linear-gradient(to right, #f5af19, #f12711); +@theme_gradient: linear-gradient(to right, #fdc830, #f37335); +@theme_gradient: linear-gradient(to right, #8a2387, #e94057, #f27121); +@theme_gradient: linear-gradient(to right, #659999, #f4791f); +*/ html { box-sizing: border-box; } @@ -134,11 +141,6 @@ header { align-items: center; padding: 8px 0px; color: #333c11; - background: linear-gradient(to right, #009fff, #ec2f4b); - background: linear-gradient(to right, #f5af19, #f12711); - background: linear-gradient(to right, #fdc830, #f37335); - background: linear-gradient(to right, #8a2387, #e94057, #f27121); - background: linear-gradient(to right, #659999, #f4791f); background: linear-gradient(to right, #3e5151, #decba4); color: #fff; } @@ -512,7 +514,13 @@ header .menu { .layout-keys #keys { display: block; } -#app { +#app.login { + padding-top: 64px; + display: grid; + grid-template-columns: minmax(min-content, 300px); + justify-content: center; +} +#app.node { display: grid; grid-template-areas: "header header" "tree crumbs" "tree child-nodes" "tree name" "tree content" "tree files" "tree blank"; grid-template-columns: min-content 1fr; @@ -521,26 +529,26 @@ header .menu { color: #fff; height: 100%; } -#app.toggle-tree { +#app.node.toggle-tree { 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 */ } -#app.toggle-tree #tree { +#app.node.toggle-tree #tree { display: none; } @media only screen and (max-width: 932px) { - #app { + #app.node { 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 */ } - #app #tree { + #app.node #tree { display: none; } - #app.toggle-tree { + #app.node.toggle-tree { display: grid; grid-template-areas: "header" "tree"; grid-template-columns: 1fr; @@ -549,22 +557,22 @@ header .menu { color: #fff; height: 100%; } - #app.toggle-tree #crumbs { + #app.node.toggle-tree #crumbs { display: none; } - #app.toggle-tree .child-nodes { + #app.node.toggle-tree .child-nodes { display: none; } - #app.toggle-tree .node-name { + #app.node.toggle-tree .node-name { display: none; } - #app.toggle-tree .grow-wrap { + #app.node.toggle-tree .grow-wrap { display: none; } - #app.toggle-tree #file-section { + #app.node.toggle-tree #file-section { display: none; } - #app.toggle-tree #tree { + #app.node.toggle-tree #tree { display: block; } .node-content { diff --git a/static/css/theme.css b/static/css/theme.css index e69de29..39ea0b1 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -0,0 +1,7 @@ +/* +@theme_gradient: linear-gradient(to right, #009fff, #ec2f4b); +@theme_gradient: linear-gradient(to right, #f5af19, #f12711); +@theme_gradient: linear-gradient(to right, #fdc830, #f37335); +@theme_gradient: linear-gradient(to right, #8a2387, #e94057, #f27121); +@theme_gradient: linear-gradient(to right, #659999, #f4791f); +*/ diff --git a/static/js/app.mjs b/static/js/app.mjs index 02cb7a7..5e8cec3 100644 --- a/static/js/app.mjs +++ b/static/js/app.mjs @@ -28,14 +28,20 @@ class App extends Component { this.setStartNode() }//}}} render() {//{{{ + let app_el = document.getElementById('app') + if(!this.session.initialized) { return html`