From bda7e621fdd087b7292e09f8327607b2c9b8a2c5 Mon Sep 17 00:00:00 2001 From: booploops <49113086+booploops@users.noreply.github.com> Date: Fri, 27 May 2022 19:22:13 -0700 Subject: [PATCH] tabs --- src/renderer/less/directives.less | 290 ++++++++++++++++-------------- 1 file changed, 160 insertions(+), 130 deletions(-) diff --git a/src/renderer/less/directives.less b/src/renderer/less/directives.less index a1d95720..15dfc561 100644 --- a/src/renderer/less/directives.less +++ b/src/renderer/less/directives.less @@ -1,4 +1,3 @@ - #app.navbar { --navigationBarHeight: 38px; } @@ -6,57 +5,87 @@ #app.twopanel { --chromeHeight1: 46px; --chromeHeight2: 90px; - --chromeHeight: calc(var(--chromeHeight1) + var(--chromeHeight2)); + --chromeHeight : calc(var(--chromeHeight1) + var(--chromeHeight2)); + .modular-fs .app-drawer .lyric-footer { bottom: var(--chromeHeight2); } + .app-chrome { &:not(.chrome-bottom) { .app-chrome--center { flex: 1; - .top-nav-group { - background: @baseColor; - border: 1px solid lighten(@baseColor, 8); - border-radius: 10px; - display: flex; - height: 32px; - - .app-sidebar-item { - background-color: @baseColor; - border-radius: 10px!important; - border:0px; - min-width: 120px; - padding:6px; - justify-content: center; - align-items: center; - margin: 0px; - height: 100%; - &:after { - display: none; + .top-nav-group { + background : @baseColor; + border : 1px solid lighten(@baseColor, 8); + border-radius: 12px; + display : flex; + height : 32px; + + .app-sidebar-item { + background-color: @baseColor; + border-radius : 10px !important; + border : 0px; + min-width : 120px; + padding : 6px; + justify-content : center; + align-items : center; + margin : 0px; + height : 100%; + position : relative; + + &:before { + --dist : 1px; + content : ''; + position : absolute; + top : var(--dist); + left : var(--dist); + right : var(--dist); + bottom : var(--dist); + background-color: #fff; + opacity : 0; + border-radius : 10px; + transform : scale(0.5); + transition : transform 0.2s ease-in-out, opacity 0.2s ease-in-out; + } + + &:after { + display: none; + } + + &:hover { + background-color: transparent; + + &:before { + transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out; + opacity : .1; + transform : scale(1); } - - &: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; + } + + &.active { + background-color: transparent; + + &:before { + opacity : .2; + transform: scale(1); } + } + + &.md-btn-primary { + box-shadow : 0px 0px 0px 1px lighten(@baseColor, @colorMixRate * 8); + background-color: lighten(@baseColor, @colorMixRate * 5); + z-index : 1; + } } - } + } } } .app-mainmenu { - width: 30px; + width : 30px; height: 30px; } @@ -67,11 +96,11 @@ height: var(--chromeHeight1); &.chrome-bottom { - background: var(--color2); + background : var(--color2); -webkit-app-region: no-drag; - height: var(--chromeHeight2); - box-shadow: 0px -2px 6px rgb(20 20 20 / 12%), - 0px -1px 0px 0px rgb(200 200 200 / 12%); + height : var(--chromeHeight2); + 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 { @@ -82,33 +111,33 @@ } .col-sm-auto { - width: 4em; - display: flex; + width : 4em; + display : flex; justify-content: center; - align-items: center; - font-size: 0.8em; + align-items : center; + font-size : 0.8em; } input[type=range] { - appearance: none; - width: 100%; - height: 5px; + appearance : none; + width : 100%; + height : 5px; background-color: rgb(200 200 200 / 10%); - border-radius: 6px; - box-shadow: 0px 0px 0px 1px rgba(0 0 0 / 10%); - align-self: center; + border-radius : 6px; + box-shadow : 0px 0px 0px 1px rgba(0 0 0 / 10%); + align-self : center; &::-webkit-slider-thumb { - opacity: 0; - transform: scale(1); + opacity : 0; + transform : scale(1); -webkit-appearance: none; - appearance: none; - width: 16px; - height: 16px; - border-radius: 100%; - background: var(--keyColor); - cursor: default; - transition: opacity .10s var(--appleEase), transform .10s var(--appleEase); + appearance : none; + width : 16px; + height : 16px; + border-radius : 100%; + background : var(--keyColor); + cursor : default; + transition : opacity .10s var(--appleEase), transform .10s var(--appleEase); } &:hover { @@ -134,38 +163,38 @@ .playback-button.play, .playback-button.pause, - .playback-button.stop{ - width: 42px; - height: 42px; + .playback-button.stop { + width : 42px; + height : 42px; border-radius: 50%; - margin: 6px; + margin : 6px; } .app-chrome--center { - display: flex; + display : flex; flex-direction: column; .app-chrome-playback-controls { - display: flex; - z-index: 1; + display : flex; + z-index : 1; // margin-bottom: 12px; } .app-chrome-playback-duration { - position: relative; - width: 80%; + position : relative; + width : 80%; -webkit-app-region: no-drag; - height: 16px; + height : 16px; .song-progress { - @bgColor: transparent; - height: 16px; - position: absolute; - bottom: 4px; - left: 0px; - right: 4px; + @bgColor : transparent; + height : 16px; + position : absolute; + bottom : 4px; + left : 0px; + right : 4px; background: @bgColor; - z-index: 0; + z-index : 0; .song-duration { @@ -174,41 +203,41 @@ .song-duration p { font-weight: 400; - font-size: 10px; - height: 1.2em; + font-size : 10px; + height : 1.2em; line-height: 1.3em; - overflow: hidden; - margin: 0 0 0 0.25em; + overflow : hidden; + margin : 0 0 0 0.25em; } &:hover { - > input[type=range] { + >input[type=range] { &::-webkit-slider-thumb { - opacity: 1; + opacity : 1; transform: scale(1); - z-index: 1; + z-index : 1; } } } input[type=range] { - appearance: none; - width: 100%; - height: 4px; + appearance : none; + width : 100%; + height : 4px; background-color: rgb(200 200 200 / 10%); - border-radius: 2px; + border-radius : 2px; &::-webkit-slider-thumb { - opacity: 0; - transform: scale(0.5); + opacity : 0; + transform : scale(0.5); -webkit-appearance: none; - appearance: none; - width: 12px; - height: 12px; - border-radius: 100%; - background: var(--keyColor); - cursor: default; - transition: opacity .10s var(--appleEase), transform .10s var(--appleEase); + appearance : none; + width : 12px; + height : 12px; + border-radius : 100%; + background : var(--keyColor); + cursor : default; + transition : opacity .10s var(--appleEase), transform .10s var(--appleEase); } } } @@ -217,21 +246,21 @@ } .app-chrome--left { - width: 30%; - justify-content: flex-start; - align-items: flex-start; + width : 30%; + justify-content : flex-start; + align-items : flex-start; -webkit-app-region: no-drag !important; .playback-controls { -webkit-app-region: no-drag !important; .artwork { - --offset: 20px; + --offset : 20px; --marginOffset: 2; - --size: calc(var(--chromeHeight2) - var(--offset)); - width: var(--size); - height: var(--size); - margin: 0 calc(var(--offset) / var(--marginOffset)) 0 calc(var(--offset) / var(--marginOffset)); + --size : calc(var(--chromeHeight2) - var(--offset)); + width : var(--size); + height : var(--size); + margin : 0 calc(var(--offset) / var(--marginOffset)) 0 calc(var(--offset) / var(--marginOffset)); .mediaitem-artwork, img { @@ -241,20 +270,21 @@ .playback-info { align-items: flex-start; - margin: 6px; + margin : 6px; .song-name { - text-align: left; - font-size: 0.98em; - font-weight: 500; - width: 100%; + text-align : left; + font-size : 0.98em; + font-weight : 500; + width : 100%; -webkit-mask-image: linear-gradient(-90deg, transparent 0%, transparent 10%, black 20%); } - .song-artist, .song-album { + .song-artist, + .song-album { font-size: 0.75em; - opacity: 0.8; - cursor: pointer; + opacity : 0.8; + cursor : pointer; &:hover { text-decoration: underline; @@ -267,23 +297,23 @@ .song-artist-album-content { text-align: left; - font-size: 12px; + font-size : 12px; } } - width: 100%; - height: 100%; + width : 100%; + height : 100%; max-width: 100%; - border: 0px; + border : 0px; } flex: 0 0 auto; } .app-chrome--right { - width: 30%; - flex: 0 0 auto; + width : 30%; + flex : 0 0 auto; padding-right: 8px; } } @@ -299,30 +329,30 @@ // screen width is less than 768px @media (max-width: 1100px) { #app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center { - flex: unset; + flex: unset; } #app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item { - min-width: 110px; - font-size: 0em; + min-width: 110px; + font-size: 0em; - .sidebar-icon { - margin: 0px; - } + .sidebar-icon { + margin: 0px; + } } } @media (max-width: 1000px) { #app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center { - flex: unset; + flex: unset; } #app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item { - min-width: 60px; - font-size: 0em; + min-width: 60px; + font-size: 0em; - .sidebar-icon { - margin: 0px; - } + .sidebar-icon { + margin: 0px; + } } } \ No newline at end of file