okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change to context menu css

Browse source 
- easier targets for touch screen devices, while also being shorter
- changed hover
This commit is contained in:
booploops 2022-04-29 03:04:26 -07:00
parent 4f93124416
commit e19df51838
1 changed files with 242 additions and 208 deletions
Download patch file Download diff file Expand all files Collapse all files

450
src/renderer/less/helpers.less
View file

@ -1,6 +1,6 @@
.notyf__toast { .notyf__toast {
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
cursor: pointer; cursor : pointer;
} }
.notyf-info { .notyf-info {
@ -9,142 +9,141 @@
.tooltip-inner { .tooltip-inner {
background: #2f2f2f; background: #2f2f2f;
opacity: 1; opacity : 1;
border: 1px solid rgb(0 0 0 / 35%); border : 1px solid rgb(0 0 0 / 35%);
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25); box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
} }
.modal-fullscreen { .modal-fullscreen {
display: flex; display : flex;
justify-content: center; justify-content: center;
align-items: center; align-items : center;
position: fixed; position : fixed;
top: 0; top : 0;
left: 0; left : 0;
width: 100%; width : 100%;
height: 100%; height : 100%;
background: rgba(0, 0, 0, 0.3); background : rgba(0, 0, 0, 0.3);
z-index: 1000; z-index : 1000;
.modal-window { .modal-window {
background: #333; background : #333;
border-radius: 10px; border-radius: 10px;
box-shadow: var(--mediaItemShadow-Shadow); box-shadow : var(--mediaItemShadow-Shadow);
display: flex; display : flex;
flex-flow: column; flex-flow : column;
max-height: 500px; max-height : 500px;
max-width: 360px; max-width : 360px;
background: #121212; background : #121212;
width: 100%; width : 100%;
position: relative; position : relative;
&:after { &:after {
content: ""; content : "";
position: absolute; position : absolute;
top: 0; top : 0;
left: 0; left : 0;
width: 100%; width : 100%;
height: 100%; height : 100%;
pointer-events: none; pointer-events: none;
box-shadow: var(--mediaItemShadow); box-shadow : var(--mediaItemShadow);
z-index: 1; z-index : 1;
border-radius: inherit; border-radius : inherit;
} }
.modal-header { .modal-header {
width: 100%; width : 100%;
padding: 6px; padding: 6px;
} }
.modal-content { .modal-content {
width: 100%; width : 100%;
height: 100%; height : 100%;
overflow: hidden; overflow : hidden;
overflow-y: overlay; overflow-y: overlay;
} }
.modal-footer { .modal-footer {}
}
} }
} }
.spatialproperties-panel { .spatialproperties-panel {
.modal-window { .modal-window {
height: 700px; height : 700px;
max-height: 700px; max-height: 700px;
width: 800px; width : 800px;
max-width: 800px; max-width : 800px;
overflow: hidden; overflow : hidden;
.info-header { .info-header {
padding-left: 12px; padding-left: 12px;
} }
.visual-container { .visual-container {
display: flex; display : flex;
justify-content: center; justify-content: center;
align-items: center; align-items : center;
overflow: hidden; overflow : hidden;
} }
.visual { .visual {
position: relative; position : relative;
height: 250px; height : 250px;
width: 300px; width : 300px;
display: inline-flex; display : inline-flex;
align-items: flex-end; align-items : flex-end;
justify-content: center; justify-content: center;
filter: drop-shadow(2px 12px 6px rgb(0 0 0 / 25%)); filter : drop-shadow(2px 12px 6px rgb(0 0 0 / 25%));
margin: 0 auto; margin : 0 auto;
.face { .face {
position: absolute; position : absolute;
width: calc(12px * 6); width : calc(12px * 6);
height: calc(12px * 6); height : calc(12px * 6);
border-radius: 6px; border-radius: 6px;
transform: rotateX(60deg) rotateZ(-45deg); transform : rotateX(60deg) rotateZ(-45deg);
transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear; transition : transform 0.2s linear, width 0.2s linear, height 0.2s linear;
} }
.listener { .listener {
position: absolute; position : absolute;
width: 32px; width : 32px;
height: 32px; height : 32px;
border-radius: 6px; border-radius: 6px;
transform: rotateX(60deg) rotateZ(-45deg); transform : rotateX(60deg) rotateZ(-45deg);
transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear; transition : transform 0.2s linear, width 0.2s linear, height 0.2s linear;
background: white; background : white;
color: black; color : black;
z-index: 2; z-index : 2;
} }
.audiosource { .audiosource {
position: absolute; position : absolute;
width: 32px; width : 32px;
height: 32px; height : 32px;
border-radius: 6px; border-radius: 6px;
transform: rotateX(60deg) rotateZ(-45deg); transform : rotateX(60deg) rotateZ(-45deg);
transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear; transition : transform 0.2s linear, width 0.2s linear, height 0.2s linear;
background: yellow; background : yellow;
z-index: 2; z-index : 2;
} }
.face:nth-of-type(1) { .face:nth-of-type(1) {
background: linear-gradient(45deg, #28223a, #1f2038); background: linear-gradient(45deg, #28223a, #1f2038);
z-index: 1; z-index : 1;
} }
.face:nth-of-type(2) { .face:nth-of-type(2) {
background: linear-gradient(45deg, #7d53ad, #5763ff); background: linear-gradient(45deg, #7d53ad, #5763ff);
transform: rotateX(60deg) rotateZ(-45deg) translateZ(30px); transform : rotateX(60deg) rotateZ(-45deg) translateZ(30px);
opacity: 0.7; opacity : 0.7;
z-index: 3; z-index : 3;
} }
} }
.modal-header { .modal-header {
padding: 16px; padding : 16px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@ -153,18 +152,18 @@
} }
.close-btn { .close-btn {
width: 50px; width : 50px;
height: 100%; height : 100%;
background-image: var(--gfx-closeBtn); background-image : var(--gfx-closeBtn);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat : no-repeat;
-webkit-app-region: no-drag; -webkit-app-region : no-drag;
appearance: none; appearance : none;
border: 0; border : 0;
background-color: transparent; background-color : transparent;
position: absolute; position : absolute;
top: 0; top : 0;
right: 0; right : 0;
&:hover { &:hover {
background-color: rgb(196, 43, 28) background-color: rgb(196, 43, 28)
@ -176,14 +175,14 @@
.addtoplaylist-panel { .addtoplaylist-panel {
.modal-window { .modal-window {
max-height: 600px; max-height : 600px;
max-width: 400px; max-width : 400px;
background: rgb(18 18 18 / 90%); background : rgb(18 18 18 / 90%);
overflow: hidden; overflow : hidden;
backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
.modal-header { .modal-header {
padding: 16px; padding : 16px;
position: relative; position: relative;
.modal-title { .modal-title {
@ -191,18 +190,18 @@
} }
.close-btn { .close-btn {
width: 50px; width : 50px;
height: 100%; height : 100%;
background-image: var(--gfx-closeBtn); background-image : var(--gfx-closeBtn);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat : no-repeat;
-webkit-app-region: no-drag; -webkit-app-region : no-drag;
appearance: none; appearance : none;
border: 0; border : 0;
background-color: transparent; background-color : transparent;
position: absolute; position : absolute;
top: 0; top : 0;
right: 0; right : 0;
&:hover { &:hover {
background-color: rgb(196, 43, 28) background-color: rgb(196, 43, 28)
@ -211,34 +210,34 @@
} }
.modal-search { .modal-search {
width: 100%; width : 100%;
padding: 0px 16px; padding : 0px 16px;
position: relative; position: relative;
} }
.playlist-item { .playlist-item {
appearance: none; appearance : none;
border: 0px; border : 0px;
text-align: left; text-align : left;
width: 100%; width : 100%;
margin: 0; margin : 0;
display: flex; display : flex;
background: rgba(32, 32, 32, 0.46); background : rgba(32, 32, 32, 0.46);
color: #eee; color : #eee;
font-family: inherit; font-family: inherit;
font-size: 0.98em; font-size : 0.98em;
padding: 6px 12px; padding : 6px 12px;
align-items: center; align-items: center;
flex-flow: row; flex-flow : row;
.icon { .icon {
pointer-events: none; pointer-events : none;
width: 32px; width : 32px;
height: 32px; height : 32px;
display: flex; display : flex;
justify-content: center; justify-content: center;
align-items: center; align-items : center;
margin-right: 6px; margin-right : 6px;
} }
.name { .name {
@ -265,35 +264,35 @@
} }
.menu-panel { .menu-panel {
width: 100%; width : 100%;
height: 100%; height : 100%;
position: fixed; position : fixed;
top: 0; top : 0;
left: 0; left : 0;
z-index: 100001; z-index : 100001;
display: flex; display : flex;
justify-content: center; justify-content : center;
align-items: center; align-items : center;
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
.menu-header-body { .menu-header-body {
padding: 6px; padding : 6px;
display: flex; display : flex;
background: rgb(200 200 200 / 10%); background: rgb(200 200 200 / 10%);
.menu-option-header { .menu-option-header {
width: 40px; width : 40px;
height: 40px; height : 40px;
display: flex; display : flex;
justify-content: center; justify-content: center;
align-items: center; align-items : center;
border-radius: var(--mediaItemRadius); border-radius : var(--mediaItemRadius);
appearance: none; appearance : none;
border: 0; border : 0;
background: transparent; background : transparent;
&.active { &.active {
.sidebar-icon > .svg-icon { .sidebar-icon>.svg-icon {
--color: var(--keyColor); --color: var(--keyColor);
} }
} }
@ -309,36 +308,63 @@
} }
.menu-panel-body { .menu-panel-body {
display: flex; display : flex;
flex-flow: column; flex-flow : column;
background: rgb(30 30 30 / 45%); background : rgb(30 30 30 / 45%);
backdrop-filter : blur(32px) saturate(180%); backdrop-filter: blur(32px) saturate(180%);
position: relative; position : relative;
min-width: 200px; min-width : 200px;
box-shadow: var(--ciderShadow-Generic); box-shadow : var(--ciderShadow-Generic);
border-radius: var(--panelRadius); border-radius : var(--panelRadius);
overflow: hidden; overflow : hidden;
font-size: 13px; font-size : 13px;
.menu-option { .menu-option {
text-align: left; text-align: left;
display: flex; display : flex;
width: calc(100% - 4px);
padding: 8px 10px;
appearance: none; appearance: none;
border: 0px; border : 0px;
font: inherit; font : inherit;
background: transparent; background: transparent;
color: inherit; color : inherit;
margin: 0 auto; margin : 0 auto;
border-radius: 5px; position : relative;
width : 100%;
padding : 9px 14px;
&::before {
background : var(--hover);
border-radius: 6px;
content : "";
--sizeY : 3px;
--sizeX : 4px;
top : var(--sizeY);
left : var(--sizeX);
bottom : var(--sizeY);
right : var(--sizeX);
position : absolute;
opacity : 0;
transform : scale(0.98);
z-index : -1;
transition : transform .25s ease-out, opacity .25s ease-out;
}
&:hover { &:hover {
background: var(--selected); &::before {
transition: transform .1s ease-in, opacity .1s ease-in;
opacity : 1;
transform : scale(1);
}
} }
&:active { &:active {
background: var(--selected-click); &::before {
transition: transform .1s ease-in-out, opacity .1s ease-in-out;
opacity : 1;
transform : scale(0.98);
background: var(--selected-click);
}
} }
} }
} }
@ -348,18 +374,18 @@
margin: 18px 6px; margin: 18px 6px;
.close-btn { .close-btn {
width: 50px; width : 50px;
height: 42px; height : 42px;
background-image: var(--gfx-closeBtn); background-image : var(--gfx-closeBtn);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat : no-repeat;
-webkit-app-region: no-drag; -webkit-app-region : no-drag;
appearance: none; appearance : none;
border: 0; border : 0;
background-color: transparent; background-color : transparent;
position: absolute; position : absolute;
top: 0; top : 0;
right: 0; right : 0;
&:hover { &:hover {
background-color: rgb(196, 43, 28) background-color: rgb(196, 43, 28)
@ -368,24 +394,25 @@
} }
.menu-body { .menu-body {
overflow: overlay; overflow : overlay;
height: 100%; height : 100%;
display: flex; display : flex;
flex-flow: column; flex-flow: column;
gap: 4px; gap : 0px;
padding: 6px 4px; padding : 0px;
position : relative;
} }
.menu-footer { .menu-footer {
width: 100%; width : 100%;
padding: 12px; padding: 12px;
} }
} }
.queue-panel { .queue-panel {
height: 100%; height : 100%;
width: 100%; width : 100%;
display: flex; display : flex;
flex-flow: column; flex-flow: column;
.queue-header-text { .queue-header-text {
@ -394,59 +421,66 @@
.queue-body { .queue-body {
overflow: overlay; overflow: overlay;
height: 100%; height : 100%;
} }
.queue-footer { .queue-footer {
width: 100%; width : 100%;
padding: 12px; padding: 12px;
} }
.autoplay { .autoplay {
background: rgb(200 200 200 / 15%); background : rgb(200 200 200 / 15%);
display: flex; display : flex;
justify-content: center; justify-content: center;
appearance: none; appearance : none;
border: 0; border : 0;
border-radius: 6px; border-radius : 6px;
height: 32px; height : 32px;
width: 32px; width : 32px;
} }
.infinity { .infinity {
content: url("./assets/infinity.svg"); content: url("./assets/infinity.svg");
margin: auto; margin : auto;
} }
} }
.moreinfo-modal { .moreinfo-modal {
.modal-window{ .modal-window {
height: 70%; height : 70%;
max-height: 100%; max-height : 100%;
width: 45%; width : 45%;
max-width: 100%; max-width : 100%;
overflow: hidden; overflow : hidden;
line-height: 1.25; line-height: 1.25;
} }
.modal-content{
padding: 1em; .modal-content {
padding : 1em;
font-size: 0.8rem; font-size: 0.8rem;
br { br {
display: block; /* makes it have a width */ display : block;
content: ""; /* clears default height */ /* makes it have a width */
margin: 2em; content : "";
/* clears default height */
margin : 2em;
margin-bottom: -0.6rem; margin-bottom: -0.6rem;
} }
} }
.modal-header{
.modal-header {
flex-direction: column; flex-direction: column;
.modal-title{
.modal-title {
text-align: unset !important; text-align: unset !important;
width: 100%; width : 100%;
&:not(.modal-subtitle){
&:not(.modal-subtitle) {
font-size: 25px; font-size: 25px;
} }
} }
} }
} }