diff --git a/src/renderer/less/appvars.less b/src/renderer/less/appvars.less new file mode 100644 index 00000000..6c08e323 --- /dev/null +++ b/src/renderer/less/appvars.less @@ -0,0 +1,20 @@ +@colorMixRate: 1%; +@transparencyRate: 50%; + +@keyColor : #fc3c44; +@ciderColor: #ff2654; +@baseColor: #1e1e1e; +@baseColorMix: mix(@baseColor, transparent, @transparencyRate); +@sidebarColor: #2e2e2e; +@sidebarColorMix: mix(@sidebarColor, transparent, @transparencyRate); +@appOpacity: 0.15; + +:root { + --baseColor: @baseColor; + --baseColorMix: @baseColorMix; + --sidebarColor: @sidebarColor; + --sidebarColorMix: @sidebarColorMix; + --ciderColor: @ciderColor; + --appOpacity: @appOpacity; + --transparencyRate: @transparencyRate; +} \ No newline at end of file diff --git a/src/renderer/less/compact.less b/src/renderer/less/compact.less index e29673c9..bdf734f5 100644 --- a/src/renderer/less/compact.less +++ b/src/renderer/less/compact.less @@ -46,7 +46,7 @@ @media (max-width: 951px) { #app-content { - zoom: 0.8; + // zoom: 0.8; } } } @@ -54,6 +54,6 @@ // if page width is less than 951px @media (max-width: 951px) { #app-content { - zoom: 0.8; + // zoom: 0.8; } } \ No newline at end of file diff --git a/src/renderer/less/directives.less b/src/renderer/less/directives.less index c2b97fba..3357e9c5 100644 --- a/src/renderer/less/directives.less +++ b/src/renderer/less/directives.less @@ -1,12 +1,3 @@ -@colorMixRate: 1%; -@transparencyRate: 50%; - -@keyColor : #fc3c44; -@ciderColor: #ff2654; -@baseColor: #1e1e1e; -@baseColorMix: mix(@baseColor, transparent, @transparencyRate); -@sidebarColor: #2e2e2e; -@sidebarColorMix: mix(@sidebarColor, transparent, @transparencyRate); #app.navbar { --navigationBarHeight: 38px; @@ -77,8 +68,9 @@ background: var(--color2); -webkit-app-region: no-drag; height: var(--chromeHeight2); - box-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25); - z-index: 1; + box-shadow: 0px -2px 6px rgb(20 20 20 / 12%), + 0px -1px 0px 0px rgb(200 200 200 / 12%); + z-index: 4; .app-chrome-playback-duration-bottom { width: 100%; diff --git a/src/renderer/less/pages.less b/src/renderer/less/pages.less index 1ccaa34d..2fb5739e 100644 --- a/src/renderer/less/pages.less +++ b/src/renderer/less/pages.less @@ -1425,8 +1425,6 @@ //Home .home-page { - top : 0; - //padding-top: var(--navbarHeight); .md-btn-replay { background-image: linear-gradient(-45deg, #2e2173, #925042); diff --git a/src/renderer/style.less b/src/renderer/style.less index a51642ac..251afdf6 100644 --- a/src/renderer/style.less +++ b/src/renderer/style.less @@ -4,6 +4,7 @@ @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@100;300;400;500;700;900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap"); +@import url("less/appvars.less"); @import url("less/bootstrap-vue.min.less"); @import url("less/ameframework.less"); @import url("less/codicon.css"); @@ -29,7 +30,8 @@ --selected: rgb(130 130 130 / 30%); --selected-click: rgb(80 80 80 / 30%); --hover: rgb(200 200 200 / 10%); - --keyColor: #fa586a; + // --keyColor: #fa586a; + --keyColor: @keyColor; --keyColor-rgb: 250, 88, 106; --keyColor-rollover: #ff8a9c; --keyColor-rollover-rgb: 255, 138, 156; @@ -164,7 +166,7 @@ body.notransparency::before { --chromeHeight: calc(var(--chromeHeight1) + var(--chromeHeight2)); width: 100%; height: 100%; - background: var(--color1); + background: transparent; color: var(--textColor); user-select: none; margin: 0 auto; @@ -383,6 +385,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track { flex-direction: column; opacity: 1; overflow: hidden; + background-color: rgba(20 20 20 / .7); } #app-sidebar { @@ -393,6 +396,9 @@ input[type=range].web-slider::-webkit-slider-runnable-track { flex-direction: column; flex: 0 0 auto; position: relative; + background : var(--sidebarColorMix); + max-width : 260px; + padding-top: var(--chromeHeight1); } #app-navbar { @@ -407,16 +413,21 @@ input[type=range].web-slider::-webkit-slider-runnable-track { } #app-content { - background-color: var(--color3); + --navigationBarHeight: var(--chromeHeight1); + background-color: var(--baseColorMix); height: 100%; width: 100%; overflow-y: scroll; overflow-y: overlay; overflow-x: hidden; - border-radius: 10px 0px 0px 0px; - border-left: 1px solid rgb(0 0 0 / 25%); - border-top: 1px solid rgb(0 0 0 / 25%); + border-radius: 0; + border-left: 1px solid var(--baseColorMix); + // border-top: 1px solid rgb(0 0 0 / 25%); position: relative; + + &::-webkit-scrollbar-track-piece { + margin-top: var(--chromeHeight1); + } } .app-drawer { @@ -424,14 +435,14 @@ input[type=range].web-slider::-webkit-slider-runnable-track { flex: 0 0 auto; position: absolute; right: 16px; - top: 3%; background: var(--color2); border-radius: 12px; z-index: 10; - height: 94%; backdrop-filter: blur(40px) saturate(180%); box-shadow: var(--ciderShadow-Generic); overflow: hidden; + height: calc(calc(100% - 6%) - var(--chromeHeight1)); + top: calc(var(--chromeHeight1) + 3%); .bgArtworkMaterial { display: none; @@ -453,15 +464,16 @@ input[type=range].web-slider::-webkit-slider-runnable-track { width: 100%; padding: 6px; border-radius: 6px; - border: 1px solid rgb(200 200 200 / 10%); + border : 1px solid rgba(100, 100, 100, 0.35); + border-top : 1px solid rgba(100, 100, 100, 0.5); + border-bottom: 1px solid rgb(60 60 60 / 12%); font-family: inherit; font-size: 14px; - background: rgb(100 100 100 / 25%); + background: rgba(100, 100, 100, 0.25);; color: rgb(200 200 200); font-weight: 500; padding-left: 32px; position: relative; - filter: contrast(0.1); } .search-input:focus { @@ -690,7 +702,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track { } .usermenu-container { - top: 0px; + top: var(--chromeHeight1); z-index: 200001 !important; #cmenu.container(); @@ -874,36 +886,61 @@ input[type=range].web-slider::-webkit-slider-runnable-track { cursor: default; } -.app-sidebar-item.active::after { - content: ''; - width: 4px; - height: 16px; - display: block; - position: absolute; - top: calc(100% - 72%); - border-radius: 10px; - left: 0px; - background: var(--keyColor); - // animation: expandIndicator .2s cubic-bezier(0.25, 1, 0.5, 1); - - // @keyframes expandIndicator { - // 0% { - // transform: scaleY(0); - // } - - // 100% { - // transform: scaleY(1); - // } - // } -} - .app-chrome { - background: var(--color1); + background-color: var(--baseColorMix); + box-shadow: 0px 3px 6px rgb(20 20 20 / 12%), + 0px 1px 0px 0px rgb(200 200 200 / 12%); width: 100%; height: var(--chromeHeight1); display: flex; flex-direction: row; -webkit-app-region: drag; + z-index: 1; + + &:not(.chrome-bottom) { + // box-shadow: 0px 0px + z-index: 16; + position: fixed; + backdrop-filter: var(--glassFilter); + + .app-chrome--center { + flex:1; + } +} + +.top-nav-group { + background: var(--baseColor); + border: 1px solid lighten(@baseColor, 8); + border-radius: 10px; + display: flex; + height: 32px; + + .app-sidebar-item { + background-color: var(--baseColor); + border-radius: 10px!important; + border:0px; + min-width: 120px; + padding:6px; + justify-content: center; + align-items: center; + margin: 0px; + height: 100%; + + &:hover { + background-color: lighten(@baseColor, @colorMixRate * 5); + } + + &.active { + background-color: lighten(@baseColor, @colorMixRate * 5); + } + + &.md-btn-primary { + box-shadow: 0px 0px 0px 1px lighten(@baseColor, @colorMixRate * 8); + background-color: lighten(@baseColor, @colorMixRate * 5); + z-index: 1; + } + } +} .vdiv { width: 1px; @@ -971,6 +1008,10 @@ input[type=range].web-slider::-webkit-slider-runnable-track { margin-right: 6px; } +.app-chrome .app-chrome-item.search { + margin-right: 6px; +} + .volume-button { background-image: url("./assets/feather/volume-2.svg"); height: 15px; @@ -1442,8 +1483,11 @@ div[data-type="musicVideo"] .info-rect .title::before { } .app-navigation { + background : transparent; + align-items : center; + justify-content: center; background: var(--color1); - height: calc(100% - var(--chromeHeight)); + height: calc(100% - var(--chromeHeight2)); width: 100%; display: flex; position: relative; @@ -1909,7 +1953,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { background: rgba(200, 200, 200, 0.05); border-radius: 10px; padding: var(--contentInnerPadding); - box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; margin-top: 16px; diff --git a/src/renderer/views/app/chrome-top.ejs b/src/renderer/views/app/chrome-top.ejs index 5bc3e11e..d388c3bc 100644 --- a/src/renderer/views/app/chrome-top.ejs +++ b/src/renderer/views/app/chrome-top.ejs @@ -400,7 +400,7 @@