From 39ee81ff157632dc5939df9453394fbe7577f6fd Mon Sep 17 00:00:00 2001 From: jr-k Date: Fri, 5 Jul 2024 01:52:40 +0200 Subject: [PATCH] wip --- data/www/css/compiled/main.css | 2 +- data/www/scss/base/_context.scss | 138 +++++++++++++++++++++++++++++++ data/www/scss/base/_html.scss | 135 ------------------------------ data/www/scss/base/_menu.scss | 1 + data/www/scss/main.scss | 1 + 5 files changed, 141 insertions(+), 136 deletions(-) create mode 100644 data/www/scss/base/_context.scss diff --git a/data/www/css/compiled/main.css b/data/www/css/compiled/main.css index 8848fe8..7a08949 100644 --- a/data/www/css/compiled/main.css +++ b/data/www/css/compiled/main.css @@ -1 +1 @@ -@font-face{font-family:Sixtyfour;src:url(../../webfonts/Sixtyfour-Regular.ttf) format("truetype")}*{font-family:Work Sans,Roboto,Arial,"sans-serif";margin:0;padding:0;box-sizing:border-box}html{background-color:#111}body,html{height:100%;font-family:Arial,sans-serif}.container{display:flex;height:100vh}main{flex:1;display:flex;flex-direction:column}main .context-bar{padding:10px;position:sticky;top:0;z-index:1000;max-height:80px;border-bottom:2px solid rgba(0,0,0,.2);display:flex;flex-direction:row;align-items:center}main .context-bar .context-menu{flex:1}main .context-bar .context-menu .inner{display:flex}main .context-bar .context-menu .inner ul{background:#222;padding:6px 4px 5px;box-shadow:1px 1px .5px .5px inset #0003;border:1px solid #222;border-radius:4px;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;list-style:none;margin:0}main .context-bar .context-menu .inner ul li.divider{margin:0 20px;width:1px;height:100%;background:#333}main .context-bar .context-menu .inner ul li:hover a{opacity:.9}main .context-bar .context-menu .inner ul li a{border-radius:4px;display:flex;flex-direction:row;justify-content:center;align-items:center;color:#fff;overflow:hidden;padding-right:30px;text-align:center;background:#0003;margin-right:5px}main .context-bar .context-menu .inner ul li a span{display:flex;justify-content:center;align-items:center;margin-right:20px;height:32px;background:#0003;width:42px}main .context-bar .context-menu .inner ul li.active{border:none}main .context-bar .context-menu .inner ul li.active a{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;color:#333;background:#fff;font-weight:700}main .context-bar .context-menu .inner ul li.active a span{background:#0003;margin-right:30px;width:42px}main .context-bar .context-menu .inner ul li:last-child a{margin-right:0}main .context-bar .context-divider{width:1px;height:100%;background:#222;margin-left:20px;margin-right:20px}main .context-bar .context-user{display:flex;margin-right:20px}main .context-bar .context-user .trigger{color:#fff}main .context-bar .context-user .trigger .avatar{width:32px;height:32px;border-radius:4px;background:#027bff;margin-right:10px;display:flex;flex-direction:row;justify-content:center;align-items:center;text-align:center;font-weight:700;font-size:14px;border:1px solid #444}main .context-bar .context-user .trigger i{margin-top:-5px;margin-left:10px}main .main-container{display:flex;flex:1;overflow:hidden}main .main-container .main-content{flex:2;overflow-y:auto;padding:20px;background:#111}main .main-container .left-panel{flex:1;overflow-y:auto;padding:20px;background-color:transparent;border-right:2px solid rgba(0,0,0,.2);background:#111}main .main-container .right-panel{flex:1;overflow-y:auto;padding:20px;background-color:transparent;border-left:2px solid rgba(0,0,0,.2);background:#111}menu{width:300px;background:#111;overflow-y:auto;overflow-x:visible;padding:20px;z-index:2000;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;border-right:2px solid rgba(0,0,0,.2)}menu h1.logo{margin:40px 0 0;align-self:stretch;display:flex}menu h1.logo a{text-align:center;text-shadow:0px 0 0 #fff,0px 2px 0 #444,0 0px 0 rgb(14,239,95),-0px 0 0 rgb(2,123,255),0 -0px 0 rgb(239,14,93);text-decoration:none;background:linear-gradient(90deg,#a0a0a0 0,#bebebe 46%,#dcdcdc);-webkit-background-clip:text;color:transparent;flex:1;font-family:Sixtyfour,Work Sans,Arial,"sans-serif";align-self:stretch;padding-right:3px;font-size:20px;text-transform:uppercase;transition:all .55s cubic-bezier(.19,1,.22,1);display:flex;flex-direction:row;justify-content:center;align-items:center;position:relative}menu h1.logo a img{flex-shrink:0;width:30px;margin-right:10px;position:absolute;left:5px;transition:all .55s cubic-bezier(.19,1,.22,1)}menu h1.logo a img.after{opacity:0}menu:hover h1.logo a{text-align:center;text-shadow:3px 0 0 #fff,3px 2px 0 #444,0 3px 0 rgb(14,239,95),-3px 0 0 rgb(2,123,255),0 -3px 0 rgb(239,14,93);text-decoration:none;background:linear-gradient(90deg,#a0a0a0 0,#bebebe 46%,#dcdcdc);-webkit-background-clip:text;color:transparent}menu:hover h1.logo a img.before{opacity:0}menu:hover h1.logo a img.after{animation-duration:.2s;animation-name:logotouch}menu nav{display:flex;align-self:stretch;flex:1}menu nav ul{margin:60px 0 20px;flex:1;align-self:flex-start;display:flex;flex-direction:column;list-style:none}menu nav ul li{align-self:stretch;overflow:hidden;position:relative;transition:all .55s cubic-bezier(.19,1,.22,1);margin:10px 0}menu nav ul li a{color:#ffffffe6;font-size:16px;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;align-self:stretch;flex:1;padding-top:5px;padding-bottom:5px;padding-left:10px}menu nav ul li a i{color:#fff;opacity:.2;background:transparent;display:flex;justify-content:center;align-items:center;align-self:stretch;padding:10px;width:40px;border-radius:4px;text-align:center;margin-right:20px}menu nav ul li:after{background:#fff;content:"";height:195px;left:-200px;opacity:.2;position:absolute;top:-50px;transform:rotate(35deg);transition:all .55s cubic-bezier(.19,1,.22,1);width:50px;z-index:-2;cursor:pointer}menu nav ul li.active a{color:#027bff;font-weight:700}menu nav ul li.active a i{opacity:1;background:#ffffffe6;background:#017bff}menu nav ul li:hover{background:#027bff}menu nav ul li:hover:after{z-index:2;left:120%;transition:all .55s cubic-bezier(.19,1,.22,1)}menu nav ul li:hover a{color:#fff;font-weight:700}menu nav ul li:hover a i{color:#fff;opacity:1}menu footer{background:#ffffff03;padding:20px 0;display:flex;flex-direction:row;align-self:stretch;text-align:center;justify-content:center}menu footer p{color:#444}menu footer p.version a{color:#777;font-weight:700}.invisible{visibility:hidden!important}.hidden{display:none!important}.tac{text-align:center}.tar{text-align:right}a{text-decoration:none}.col{display:flex;flex:1;flex-direction:column;align-self:stretch}.dropdown{position:relative;display:flex;align-self:stretch}.dropdown.dropdown-show ul.dropdown-menu{display:flex;flex-direction:column}.dropdown .trigger{cursor:pointer;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;align-self:stretch;flex:1}.dropdown ul.dropdown-menu{position:absolute;top:100%;left:0;display:none;background-color:#222;box-shadow:0 8px 16px #0003;z-index:1000;list-style-type:none;margin:0;overflow:hidden;border-radius:4px}.dropdown ul.dropdown-menu li{padding:8px 16px;cursor:pointer;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;transition:all .55s cubic-bezier(.19,1,.22,1)}.dropdown ul.dropdown-menu li.danger:hover{background-color:#ef0e5d}.dropdown ul.dropdown-menu li:hover{background-color:#027bff}.dropdown ul.dropdown-menu li a{padding:8px 16px 8px 8px;color:#fff;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;align-self:stretch}.dropdown ul.dropdown-menu li a i{margin-right:15px}@keyframes logotouch{0%{opacity:0}50%{opacity:1}to{opacity:0;left:27px}} +@font-face{font-family:Sixtyfour;src:url(../../webfonts/Sixtyfour-Regular.ttf) format("truetype")}*{font-family:Work Sans,Roboto,Arial,"sans-serif";margin:0;padding:0;box-sizing:border-box}html{background-color:#111}body,html{height:100%;font-family:Arial,sans-serif}.container{display:flex;height:100vh}main{flex:1;display:flex;flex-direction:column}main .main-container{display:flex;flex:1;overflow:hidden}main .main-container .main-content{flex:2;overflow-y:auto;padding:20px;background:#111}main .main-container .left-panel{flex:1;overflow-y:auto;padding:20px;background-color:transparent;border-right:2px solid rgba(0,0,0,.2);background:#111}main .main-container .right-panel{flex:1;overflow-y:auto;padding:20px;background-color:transparent;border-left:2px solid rgba(0,0,0,.2);background:#111}menu{width:300px;background:#111;overflow-y:auto;overflow-x:visible;padding:20px;z-index:2000;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;border-right:2px solid rgba(0,0,0,.2)}menu h1.logo{margin:40px 0 0;align-self:stretch;display:flex}menu h1.logo a{text-align:center;text-shadow:0px 0 0 #fff,0px 2px 0 #444,0 0px 0 rgb(14,239,95),-0px 0 0 rgb(2,123,255),0 -0px 0 rgb(239,14,93);text-decoration:none;background:linear-gradient(90deg,#a0a0a0 0,#bebebe 46%,#dcdcdc);-webkit-background-clip:text;color:transparent;flex:1;font-family:Sixtyfour,Work Sans,Arial,"sans-serif";align-self:stretch;padding-right:3px;font-size:20px;text-transform:uppercase;transition:all .55s cubic-bezier(.19,1,.22,1);display:flex;flex-direction:row;justify-content:center;align-items:center;position:relative}menu h1.logo a img{flex-shrink:0;width:30px;margin-right:10px;position:absolute;left:5px;transition:all .55s cubic-bezier(.19,1,.22,1)}menu h1.logo a img.after{opacity:0}menu:hover h1.logo a{text-align:center;text-shadow:3px 0 0 #fff,3px 2px 0 #444,0 3px 0 rgb(14,239,95),-3px 0 0 rgb(2,123,255),0 -3px 0 rgb(239,14,93);text-decoration:none;background:linear-gradient(90deg,#a0a0a0 0,#bebebe 46%,#dcdcdc);-webkit-background-clip:text;color:transparent}menu:hover h1.logo a img.before{opacity:0}menu:hover h1.logo a img.after{animation-duration:.2s;animation-name:logotouch}menu nav{display:flex;align-self:stretch;flex:1}menu nav ul{margin:60px 0 20px;flex:1;align-self:flex-start;display:flex;flex-direction:column;list-style:none}menu nav ul li{align-self:stretch;overflow:hidden;position:relative;transition:all .55s cubic-bezier(.19,1,.22,1);margin:10px 0;border-radius:4px}menu nav ul li a{color:#ffffffe6;font-size:16px;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;align-self:stretch;flex:1;padding-top:5px;padding-bottom:5px;padding-left:10px}menu nav ul li a i{color:#fff;opacity:.2;background:transparent;display:flex;justify-content:center;align-items:center;align-self:stretch;padding:10px;width:40px;border-radius:4px;text-align:center;margin-right:20px}menu nav ul li:after{background:#fff;content:"";height:195px;left:-200px;opacity:.2;position:absolute;top:-50px;transform:rotate(35deg);transition:all .55s cubic-bezier(.19,1,.22,1);width:50px;z-index:-2;cursor:pointer}menu nav ul li.active a{color:#027bff;font-weight:700}menu nav ul li.active a i{opacity:1;background:#ffffffe6;background:#017bff}menu nav ul li:hover{background:#027bff}menu nav ul li:hover:after{z-index:2;left:120%;transition:all .55s cubic-bezier(.19,1,.22,1)}menu nav ul li:hover a{color:#fff;font-weight:700}menu nav ul li:hover a i{color:#fff;opacity:1}menu footer{background:#ffffff03;padding:20px 0;display:flex;flex-direction:row;align-self:stretch;text-align:center;justify-content:center}menu footer p{color:#444}menu footer p.version a{color:#777;font-weight:700}main .context-bar{padding:10px;position:sticky;top:0;z-index:1000;max-height:80px;border-bottom:2px solid rgba(0,0,0,.2);display:flex;flex-direction:row;align-items:center}main .context-bar .context-menu{flex:1}main .context-bar .context-menu .inner{display:flex}main .context-bar .context-menu .inner ul{background:#222;padding:6px 4px 5px;box-shadow:1px 1px .5px .5px inset #0003;border:1px solid #222;border-radius:4px;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;list-style:none;margin:0}main .context-bar .context-menu .inner ul li.divider{margin:0 20px;width:1px;height:100%;background:#333}main .context-bar .context-menu .inner ul li:hover a{opacity:.9}main .context-bar .context-menu .inner ul li a{border-radius:4px;display:flex;flex-direction:row;justify-content:center;align-items:center;color:#fff;overflow:hidden;padding-right:30px;text-align:center;background:#0003;margin-right:5px}main .context-bar .context-menu .inner ul li a span{display:flex;justify-content:center;align-items:center;margin-right:20px;height:32px;background:#0003;width:42px}main .context-bar .context-menu .inner ul li.active{border:none}main .context-bar .context-menu .inner ul li.active a{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;color:#333;background:#fff;font-weight:700}main .context-bar .context-menu .inner ul li.active a span{background:#0003;margin-right:30px;width:42px}main .context-bar .context-menu .inner ul li:last-child a{margin-right:0}main .context-bar .context-divider{width:1px;height:100%;background:#222;margin-left:20px;margin-right:20px}main .context-bar .context-user{display:flex;margin-right:20px}main .context-bar .context-user .trigger{color:#fff}main .context-bar .context-user .trigger .avatar{width:32px;height:32px;border-radius:4px;background:#027bff;margin-right:10px;display:flex;flex-direction:row;justify-content:center;align-items:center;text-align:center;font-weight:700;font-size:14px;border:1px solid #444}main .context-bar .context-user .trigger i{margin-top:-5px;margin-left:10px}.invisible{visibility:hidden!important}.hidden{display:none!important}.tac{text-align:center}.tar{text-align:right}a{text-decoration:none}.col{display:flex;flex:1;flex-direction:column;align-self:stretch}.dropdown{position:relative;display:flex;align-self:stretch}.dropdown.dropdown-show ul.dropdown-menu{display:flex;flex-direction:column}.dropdown .trigger{cursor:pointer;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;align-self:stretch;flex:1}.dropdown ul.dropdown-menu{position:absolute;top:100%;left:0;display:none;background-color:#222;box-shadow:0 8px 16px #0003;z-index:1000;list-style-type:none;margin:0;overflow:hidden;border-radius:4px}.dropdown ul.dropdown-menu li{padding:8px 16px;cursor:pointer;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;transition:all .55s cubic-bezier(.19,1,.22,1)}.dropdown ul.dropdown-menu li.danger:hover{background-color:#ef0e5d}.dropdown ul.dropdown-menu li:hover{background-color:#027bff}.dropdown ul.dropdown-menu li a{padding:8px 16px 8px 8px;color:#fff;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;align-self:stretch}.dropdown ul.dropdown-menu li a i{margin-right:15px}@keyframes logotouch{0%{opacity:0}50%{opacity:1}to{opacity:0;left:27px}} diff --git a/data/www/scss/base/_context.scss b/data/www/scss/base/_context.scss new file mode 100644 index 0000000..4ec82b4 --- /dev/null +++ b/data/www/scss/base/_context.scss @@ -0,0 +1,138 @@ +main { + + .context-bar { + padding: 10px; + position: sticky; + top: 0; + z-index: 1000; + max-height: 80px; + border-bottom: $layoutBorder; + display: flex; + flex-direction: row; + align-items: center; + + .context-menu { + flex: 1; + + .inner { + display: flex; + + ul { + background: #222; + padding: 6px 4px 5px 4px; + box-shadow: 1px 1px .5px .5px inset rgba(0, 0, 0, 0.2); + border: 1px solid #222; + border-radius: $baseRadius; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + list-style: none; + margin: 0; + + li { + &.divider { + margin: 0 20px; + width: 1px; + height: 100%; + background: #333; + } + + &:hover { + a { + opacity: 0.9; + } + } + + a { + border-radius: $baseRadius; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + color: white; + overflow: hidden; + padding-right: 30px; + text-align: center; + background: rgba(0, 0, 0, 0.2); + margin-right: 5px; + + span { + display: flex; + justify-content: center; + align-items: center; + margin-right: 20px; + height: 32px; + background: rgba(0, 0, 0, 0.2); + width: 42px; + } + } + + &.active { + border: none; + + a { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + color: #333; + background: $white; + font-weight: bold; + + span { + background: rgba(0, 0, 0, 0.2); + margin-right: 30px; + width: 42px; + } + } + } + + &:last-child a { + margin-right: 0; + } + } + } + } + } + + .context-divider { + width: 1px; + height: 100%; + background: #222; + margin-left: 20px; + margin-right: 20px; + } + + .context-user { + display: flex; + margin-right: 20px; + + .trigger { + color: white; + + .avatar { + width: 32px; + height: 32px; + border-radius: $baseRadius; + background: $seaBlue; + margin-right: 10px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + text-align: center; + font-weight: bold; + font-size: 14px; + border: 1px solid #444; + } + + i { + margin-top: -5px; + margin-left: 10px; + } + } + } + } + +} \ No newline at end of file diff --git a/data/www/scss/base/_html.scss b/data/www/scss/base/_html.scss index 1c60263..fa36b46 100644 --- a/data/www/scss/base/_html.scss +++ b/data/www/scss/base/_html.scss @@ -24,141 +24,6 @@ main { display: flex; flex-direction: column; - .context-bar { - padding: 10px; - position: sticky; - top: 0; - z-index: 1000; - max-height: 80px; - border-bottom: $layoutBorder; - display: flex; - flex-direction: row; - align-items: center; - - .context-menu { - flex: 1; - - .inner { - display: flex; - - ul { - background: #222; - padding: 6px 4px 5px 4px; - box-shadow: 1px 1px .5px .5px inset rgba(0, 0, 0, 0.2); - border: 1px solid #222; - border-radius: $baseRadius; - display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: center; - list-style: none; - margin: 0; - - li { - &.divider { - margin: 0 20px; - width: 1px; - height: 100%; - background: #333; - } - - &:hover { - a { - opacity: 0.9; - } - } - - a { - border-radius: $baseRadius; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - color: white; - overflow: hidden; - padding-right: 30px; - text-align: center; - background: rgba(0, 0, 0, 0.2); - margin-right: 5px; - - span { - display: flex; - justify-content: center; - align-items: center; - margin-right: 20px; - height: 32px; - background: rgba(0, 0, 0, 0.2); - width: 42px; - } - } - - &.active { - border: none; - - a { - display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: center; - color: #333; - background: $white; - font-weight: bold; - - span { - background: rgba(0, 0, 0, 0.2); - margin-right: 30px; - width: 42px; - } - } - } - - &:last-child a { - margin-right: 0; - } - } - } - } - } - - .context-divider { - width: 1px; - height: 100%; - background: #222; - margin-left: 20px; - margin-right: 20px; - } - - .context-user { - display: flex; - margin-right: 20px; - - .trigger { - color: white; - - .avatar { - width: 32px; - height: 32px; - border-radius: $baseRadius; - background: $seaBlue; - margin-right: 10px; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - text-align: center; - font-weight: bold; - font-size: 14px; - border: 1px solid #444; - } - - i { - margin-top: -5px; - margin-left: 10px; - } - } - } - } - .main-container { display: flex; flex: 1; diff --git a/data/www/scss/base/_menu.scss b/data/www/scss/base/_menu.scss index dff1b96..8572e7b 100644 --- a/data/www/scss/base/_menu.scss +++ b/data/www/scss/base/_menu.scss @@ -86,6 +86,7 @@ menu { position: relative; transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1); margin: 10px 0; + border-radius: $baseRadius; a { color: rgba(255, 255, 255, 0.9); diff --git a/data/www/scss/main.scss b/data/www/scss/main.scss index 707cee2..1b4781a 100644 --- a/data/www/scss/main.scss +++ b/data/www/scss/main.scss @@ -6,6 +6,7 @@ @import 'base/fonts'; @import 'base/html'; @import 'base/menu'; +@import 'base/context'; @import 'base/tachyons'; // Import layout styles