Refactor download video styles

This commit is contained in:
the1812 2019-09-01 23:19:41 +08:00
parent c3d9d0561d
commit e30d3395c2
14 changed files with 452 additions and 401 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1795,6 +1795,12 @@ Resource.manifest = {
vDropdown: '下拉框组件',
},
},
vCheckbox: {
path: 'v-checkbox.vue.min.js',
displayNames: {
vCheckbox: '复选框组件',
},
},
doubleClickFullscreen: {
path: 'double-click-fullscreen.min.js',
displayNames: {

View File

@ -1795,6 +1795,12 @@ Resource.manifest = {
vDropdown: '下拉框组件',
},
},
vCheckbox: {
path: 'v-checkbox.vue.min.js',
displayNames: {
vCheckbox: '复选框组件',
},
},
doubleClickFullscreen: {
path: 'double-click-fullscreen.min.js',
displayNames: {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

1
min/v-checkbox.vue.min.js vendored Normal file
View File

@ -0,0 +1 @@
(()=>{return(e,c)=>{const i=`<div class=v-checkbox v-on:click=toggleCheck() v-bind:class="{checked: checked}"><i class="mdi mdi-checkbox-blank-circle-outline"><i class="mdi mdi-checkbox-marked-circle"></i></i><span class=content>{{title}}</span></div>`;c.applyStyleFromText(`.v-checkbox{font-size:10pt;cursor:pointer;display:flex;align-items:center}.v-checkbox .mdi{font-size:15pt;line-height:1}.v-checkbox .content{flex-grow:1;text-align:left;padding:0 8px}.v-checkbox .mdi-checkbox-marked-circle{color:var(--theme-color);position:absolute;top:0;left:0;transform:scale(0);transition-timing-function:cubic-bezier(.6,-.28,.74,.05)}.v-checkbox .mdi-checkbox-blank-circle-outline{color:#8884;position:relative}.v-checkbox.checked .mdi-checkbox-blank-circle-outline{color:var(--theme-color)}.v-checkbox.checked .mdi-checkbox-marked-circle{transform:scale(1);transition-timing-function:cubic-bezier(.18,.89,.32,1.28)}`,"v-checkbox-style");return{export:Object.assign({template:i},{props:["checked","title"],methods:{toggleCheck(){this.$emit("update:checked",!this.checked)}}})}}})();

View File

@ -1 +1 @@
(()=>{return(o,e)=>{const n=`<div class=v-dropdown @click=toggleDropdown()><span class=selected>{{ value }}</span><ul class=dropdown-menu :class="{ opened: dropdownOpen }"><li v-for="item in items":key=item :data-value=item @click=select(item)>{{ item }}</li></ul><i class="mdi mdi-chevron-down"></i></div>`;e.applyStyleFromText(`.v-dropdown{position:relative;background-color:#8884;cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-width:100px}.v-dropdown .dropdown-menu{transform-origin:top;transform:scaleY(0) translateX(-50%);position:absolute;top:calc(100% + 2px);left:50%;background-color:var(--download-video-background);z-index:1;transition:.2s cubic-bezier(.6,-.28,.74,.05);box-shadow:rgba(0,0,0,.2) 0 4px 8px 0}.v-dropdown .dropdown-menu.opened{transform:scaleY(1) translateX(-50%);transition-timing-function:cubic-bezier(.18,.89,.32,1.28)}.v-dropdown .dropdown-menu li{padding:4px 8px;white-space:nowrap;min-width:80px;text-align:center;cursor:pointer;color:var(--download-video-foreground);background-color:transparent}.v-dropdown .dropdown-menu li:hover{background-color:rgba(0,0,0,.16)}.v-dropdown .mdi-chevron-down{font-size:16pt;line-height:1;transform:rotate(0)}.v-dropdown .dropdown-menu.opened~.mdi-chevron-down{transform:rotate(180deg)}.v-dropdown .selected{user-select:none;padding:4px 8px}`,"v-dropdown-style");return{export:Object.assign({template:n},{props:["items","value"],data(){return{dropdownOpen:false}},methods:{toggleDropdown(){this.dropdownOpen=!this.dropdownOpen},select(o){this.$emit("update:value",o);this.$emit("change",o)}}})}}})();
(()=>{return(o,e)=>{const n=`<div class=v-dropdown @click=toggleDropdown()><span class=selected>{{ value }}</span><ul class=dropdown-menu :class="{ opened: dropdownOpen }"><li v-for="item in items":key=item :data-value=item @click=select(item)>{{ item }}</li></ul><i class="mdi mdi-chevron-down"></i></div>`;e.applyStyleFromText(`.v-dropdown{position:relative;background-color:#8884;cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-width:100px}.v-dropdown .dropdown-menu{transform-origin:top;transform:scaleY(0) translateX(-50%);position:absolute;top:calc(100% + 2px);left:50%;background-color:var(--download-video-background);z-index:1;transition:.2s cubic-bezier(.6,-.28,.74,.05);box-shadow:rgba(0,0,0,.2) 0 4px 8px 0}.v-dropdown .dropdown-menu.opened{transform:scaleY(1) translateX(-50%);transition-timing-function:cubic-bezier(.18,.89,.32,1.28)}.v-dropdown .dropdown-menu li{padding:4px 8px;white-space:nowrap;min-width:80px;text-align:center;cursor:pointer;color:var(--download-video-foreground);background-color:transparent}.v-dropdown .dropdown-menu li:hover{background-color:rgba(0,0,0,.16)}.v-dropdown .mdi-chevron-down{font-size:16pt;line-height:1;transform:rotate(0)}.v-dropdown .dropdown-menu.opened~.mdi-chevron-down{transform:rotate(180deg)}.v-dropdown .selected{user-select:none;padding:4px 8px}.round-corner .v-dropdown,.round-corner .v-dropdown .dropdown-menu,.round-corner .v-dropdown .dropdown-menu li{border-radius:var(--corner-radius)}`,"v-dropdown-style");return{export:Object.assign({template:n},{props:["items","value"],data(){return{dropdownOpen:false}},methods:{toggleDropdown(){this.dropdownOpen=!this.dropdownOpen},select(o){this.$emit("update:value",o);this.$emit("change",o)}}})}}})();

View File

@ -694,6 +694,12 @@ Resource.manifest = {
vDropdown: '下拉框组件',
},
},
vCheckbox: {
path: 'v-checkbox.vue.min.js',
displayNames: {
vCheckbox: '复选框组件',
},
},
doubleClickFullscreen: {
path: 'double-click-fullscreen.min.js',
displayNames: {

View File

@ -1,374 +0,0 @@
.download-video.opened
{
pointer-events: initial;
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.download-video
{
--download-video-background: white;
--download-video-foreground: black;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.95);
background: var(--download-video-background);
color: var(--download-video-foreground);
box-shadow: rgba(0,0,0,0.2) 0 4px 8px 0px;
z-index: 10001;
pointer-events: none;
opacity: 0;
padding: 16px;
width: 300px;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: space-between;
}
body.dark .download-video {
--download-video-background: #222;
--download-video-foreground: #eee;
}
.round-corner .download-video,
.round-corner .download-video .episode-list .v-checkbox,
.round-corner .download-video .rpc-settings {
border-radius: var(--large-corner-radius);
}
.round-corner .download-video .title,
.round-corner .download-video .cover,
.round-corner .v-dropdown,
.round-corner .v-dropdown .dropdown-menu,
.round-corner .v-dropdown .dropdown-menu li,
.round-corner .download-video button,
.round-corner .download-video .button,
.round-corner .download-video .direct-download .progress .background,
.round-corner .download-video .direct-download .progress .foreground,
.round-corner .download-video .rpc-settings input[type="text"] {
border-radius: var(--corner-radius);
}
.download-video,
.download-video * {
transition: all .2s ease-out;
-webkit-tap-highlight-color: transparent !important;
}
.download-video .cover {
width: 240px;
min-height: 135px;
background-color: #8882;
}
.download-video .header {
display: flex;
justify-content: space-between;
align-items: center;
}
.download-video h1 {
font-size: 16pt;
font-weight: bold;
color: var(--download-video-foreground);
}
.download-video .header .mdi-close {
font-size: 16pt;
color: var(--download-video-foreground);
cursor: pointer;
}
.download-video .header .mdi-close:hover {
color: var(--theme-color);
}
.download-video .info {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 12px;
}
.download-video .title {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
margin-top: 12px;
}
.download-video .bold {
color: var(--download-video-foreground);
font-weight: bold;
font-size: 12pt;
}
.download-video .title .bold {
width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
}
.download-video .title .size {
font-size: 10pt;
color: var(--download-video-foreground);
align-self: center;
display: flex;
align-items: center;
height: 24px;
}
.download-video .option-item {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 12px;
font-size: 10pt;
}
.download-video .tabs {
display: flex;
padding-top: 12px;
font-size: 10pt;
}
.download-video .tabs .tab {
padding: 6px 12px;
border-bottom: 2px solid transparent;
cursor: pointer;
}
.download-video .tab.active {
color: var(--theme-color);
border-bottom-color: var(--theme-color);
}
.download-video .separator {
height: 1px;
background: #8884;
width: 100%;
margin: 12px 0;
}
.download-video h2 {
font-size: 12pt;
font-weight: bold;
color: var(--download-video-foreground);
}
.download-video .direct-download {
display: flex;
flex-direction: column;
align-items: start;
justify-content: space-between;
}
.download-video button,
.download-video .button {
border: none;
outline: none !important;
padding: 6px 16px;
font-size: 10pt;
cursor: pointer;
background: #8884;
color: var(--download-video-foreground);
}
.download-video button:hover,
.download-video .button:hover {
background: #8886;
}
.download-video .primary {
background: var(--theme-color);
color: var(--foreground-color);
align-self: center;
}
.download-video .primary:hover {
background: var(--theme-color-90);
}
.download-video button:disabled,
.download-video .busy button,
.download-video .busy .button,
.download-video .busy .primary {
background-color: #0001;
color: #8884;
cursor: not-allowed;
}
.download-video .busy button,
.download-video .busy .button {
cursor: wait !important;
}
.download-video .direct-download .progress {
align-self: stretch;
display: flex;
align-items: center;
margin-top: 8px;
}
.download-video .direct-download .progress .background {
flex-grow: 1;
height: 4px;
background: #8884;
margin-right: 4px;
position: relative;
}
.download-video .direct-download .progress .foreground {
position: absolute;
top: 0;
left: 0;
height: 4px;
background: linear-gradient(to right, var(--theme-color), var(--theme-color-60));
}
body.dark .download-video .direct-download .progress .foreground {
background: linear-gradient(to right, var(--theme-color-70), var(--theme-color));
}
.download-video .direct-download .progress .percent {
width: 50px;
text-align: right;
}
.download-video .actions {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 8px -4px 0 -4px;
}
.download-video .actions>* {
margin: 4px;
flex-grow: 1;
flex-basis: calc(50% - 16px);
display: flex;
justify-content: center;
align-items: center;
}
.download-video i.mdi-alert-circle {
font-size: 14pt;
color: #FF9800;
}
.download-video .size-warning {
position: relative;
padding: 0 8px;
}
.download-video .size-warning-tip {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: var(--download-video-background);
color: var(--download-video-foreground);
border: 1px dashed var(--theme-color);
z-index: 2;
font-size: 10pt;
width: 300px;
padding: 8px;
box-shadow: rgba(0,0,0,0.2) 0 4px 8px 0px;
pointer-events: none;
opacity: 0;
}
.download-video .size-warning:hover .size-warning-tip {
opacity: 1;
}
.download-video .episode-list .v-checkbox {
padding: 4px 8px;
margin: 4px 0;
position: relative;
background-color: transparent;
}
.download-video .episode-list .v-checkbox.checked {
background-color: #8882;
}
.v-checkbox {
font-size: 10pt;
cursor: pointer;
display: flex;
align-items: center;
}
.v-checkbox .mdi {
font-size: 15pt;
line-height: 1;
}
.v-checkbox .content {
flex-grow: 1;
text-align: left;
padding: 0 8px;
}
.v-checkbox .mdi-checkbox-marked-circle {
color: var(--theme-color);
position: absolute;
top: 0;
left: 0;
transform: scale(0);
transition-timing-function: cubic-bezier(0.6, -0.28, 0.74, 0.05);
}
.v-checkbox .mdi-checkbox-blank-circle-outline {
color: #8884;
position: relative;
}
.v-checkbox.checked .mdi-checkbox-blank-circle-outline {
color: var(--theme-color);
}
.v-checkbox.checked .mdi-checkbox-marked-circle {
transform: scale(1);
transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.download-video .episode-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.download-video .episode-list {
overflow: auto;
max-height: 320px;
}
.download-video button.list-tool {
padding: 4px;
line-height: 1;
font-size: 12pt;
margin: 0 4px;
}
.download-video .episode-header h2 {
flex-grow: 1;
}
.download-video .selected-count {
width: 64px;
text-align: right;
}
.download-video .aria2-rpc .mdi {
margin-left: 8px;
font-size: 14pt;
line-height: 1;
}
.download-video .aria2-rpc {
position: relative;
}
.download-video .rpc-settings {
position: absolute;
display: flex;
flex-direction: column;
align-items: stretch;
color: var(--download-video-foreground);
background: var(--download-video-background);
bottom: 120%;
left: 50%;
cursor: initial;
box-shadow: rgba(0,0,0,0.2) 0 4px 8px 0px;
transform-origin: bottom;
transform: translateX(-50%);
opacity: 0;
pointer-events: none;
padding: 8px;
z-index: 3;
}
.download-video .rpc-settings>* {
margin: 8px;
}
.download-video .rpc-settings.show {
opacity: 1;
pointer-events: initial;
}
.download-video .rpc-settings-item {
display: flex;
align-items: center;
justify-content: space-between;
white-space: nowrap;
}
.download-video .rpc-settings input[type="text"] {
background: transparent;
color: var(--download-video-foreground);
border: 1px solid #8884;
padding: 4px;
margin-left: 8px;
}
.download-video .rpc-settings input[type="text"]:focus {
border-color: var(--theme-color);
}
.download-video button.start-download,
.download-video button.cancel-download {
margin-top: 8px;
}
.download-video .direct-download-header {
align-self: stretch;
display: flex;
justify-content: space-between;
align-items: center;
}

View File

@ -0,0 +1,342 @@
.download-video {
--download-video-background: white;
--download-video-foreground: black;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.95);
background: var(--download-video-background);
color: var(--download-video-foreground);
box-shadow: rgba(0, 0, 0, 0.2) 0 4px 8px 0px;
z-index: 10001;
pointer-events: none;
opacity: 0;
padding: 16px;
width: 300px;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: space-between;
max-height: 90%;
overflow: auto;
&,
* {
transition: all 0.2s ease-out;
-webkit-tap-highlight-color: transparent !important;
}
&.opened {
pointer-events: initial;
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
body.dark & {
--download-video-background: #222;
--download-video-foreground: #eee;
}
.round-corner & {
border-radius: var(--large-corner-radius);
.episode-list .v-checkbox,
.rpc-settings {
border-radius: var(--large-corner-radius);
}
.title,
.cover,
button,
.button,
.direct-download .progress .background,
.direct-download .progress .foreground,
.rpc-settings input[type="text"] {
border-radius: var(--corner-radius);
}
}
.cover {
width: 240px;
min-height: 135px;
background-color: #8882;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
}
h1 {
font-size: 16pt;
font-weight: bold;
color: var(--download-video-foreground);
}
.header .mdi-close {
font-size: 16pt;
color: var(--download-video-foreground);
cursor: pointer;
}
.header .mdi-close:hover {
color: var(--theme-color);
}
.info {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 12px;
}
.title {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
margin-top: 12px;
.bold {
width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
}
.size {
font-size: 10pt;
color: var(--download-video-foreground);
align-self: center;
display: flex;
align-items: center;
height: 24px;
}
}
.bold {
color: var(--download-video-foreground);
font-weight: bold;
font-size: 12pt;
}
.option-item {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 12px;
font-size: 10pt;
}
.tabs {
display: flex;
padding-top: 12px;
font-size: 10pt;
.tab {
padding: 6px 12px;
border-bottom: 2px solid transparent;
cursor: pointer;
&.active {
color: var(--theme-color);
border-bottom-color: var(--theme-color);
}
}
}
.separator {
height: 1px;
background: #8884;
width: 100%;
margin: 12px 0;
flex-shrink: 0;
}
h2 {
font-size: 12pt;
font-weight: bold;
color: var(--download-video-foreground);
}
.direct-download {
display: flex;
flex-direction: column;
align-items: start;
justify-content: space-between;
}
button,
.button {
border: none;
outline: none !important;
padding: 6px 16px;
font-size: 10pt;
cursor: pointer;
background: #8884;
color: var(--download-video-foreground);
}
button:hover,
.button:hover {
background: #8886;
}
.primary {
background: var(--theme-color);
color: var(--foreground-color);
align-self: center;
}
.primary:hover {
background: var(--theme-color-90);
}
button:disabled,
.busy button,
.busy .button,
.busy .primary {
background-color: #0001;
color: #8884;
cursor: not-allowed;
}
.busy button,
.busy .button {
cursor: wait !important;
}
.direct-download .progress {
align-self: stretch;
display: flex;
align-items: center;
margin-top: 8px;
.background {
flex-grow: 1;
height: 4px;
background: #8884;
margin-right: 4px;
position: relative;
.foreground {
position: absolute;
top: 0;
left: 0;
height: 4px;
background: linear-gradient(to right, var(--theme-color), var(--theme-color-60));
}
}
}
.direct-download .progress .percent {
width: 50px;
text-align: right;
}
.actions {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 8px -4px 0 -4px;
}
.actions > * {
margin: 4px;
flex-grow: 1;
flex-basis: calc(50% - 16px);
display: flex;
justify-content: center;
align-items: center;
}
i.mdi-alert-circle {
font-size: 14pt;
color: #ff9800;
}
.size-warning {
position: relative;
padding: 0 8px;
}
.size-warning-tip {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: var(--download-video-background);
color: var(--download-video-foreground);
border: 1px dashed var(--theme-color);
z-index: 2;
font-size: 10pt;
width: 300px;
padding: 8px;
box-shadow: rgba(0, 0, 0, 0.2) 0 4px 8px 0px;
pointer-events: none;
opacity: 0;
}
.size-warning:hover .size-warning-tip {
opacity: 1;
}
.episode-list .v-checkbox {
padding: 4px 8px;
margin: 4px 0;
position: relative;
background-color: transparent;
}
.episode-list .v-checkbox.checked {
background-color: #8882;
}
.episode-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.episode-list {
overflow: auto;
max-height: 320px;
}
button.list-tool {
padding: 4px;
line-height: 1;
font-size: 12pt;
margin: 0 4px;
}
.episode-header h2 {
flex-grow: 1;
}
.selected-count {
width: 64px;
text-align: right;
}
.aria2-rpc .mdi {
margin-left: 8px;
font-size: 14pt;
line-height: 1;
}
.aria2-rpc {
position: relative;
}
.rpc-settings {
position: absolute;
display: flex;
flex-direction: column;
align-items: stretch;
color: var(--download-video-foreground);
background: var(--download-video-background);
bottom: 120%;
left: 50%;
cursor: initial;
box-shadow: rgba(0, 0, 0, 0.2) 0 4px 8px 0px;
transform-origin: bottom;
transform: translateX(-50%);
opacity: 0;
pointer-events: none;
padding: 8px;
z-index: 3;
}
.rpc-settings > * {
margin: 8px;
}
.rpc-settings.show {
opacity: 1;
pointer-events: initial;
}
.rpc-settings-item {
display: flex;
align-items: center;
justify-content: space-between;
white-space: nowrap;
}
.rpc-settings input[type="text"] {
background: transparent;
color: var(--download-video-foreground);
border: 1px solid #8884;
padding: 4px;
margin-left: 8px;
}
.rpc-settings input[type="text"]:focus {
border-color: var(--theme-color);
}
button.start-download,
button.cancel-download {
margin-top: 8px;
}
.direct-download-header {
align-self: stretch;
display: flex;
justify-content: space-between;
align-items: center;
}
}
body.dark .download-video .direct-download .progress .foreground {
background: linear-gradient(to right, var(--theme-color-70), var(--theme-color));
}

View File

@ -497,22 +497,7 @@ async function loadWidget() {
}
async function loadPanel() {
const VueDropDown = await import((() => './v-dropdown.vue')())
Vue.component('v-checkbox', {
template: /*html*/`
<div class="v-checkbox" v-on:click="toggleCheck()" v-bind:class="{checked: checked}">
<i class="mdi mdi-checkbox-blank-circle-outline">
<i class="mdi mdi-checkbox-marked-circle"></i>
</i>
<span class="content">{{title}}</span>
</div>
`,
props: ['checked', 'title'],
methods: {
toggleCheck() {
this.$emit('update:checked', !this.checked)
},
},
})
const VueCheckBox = await import((() => './v-checkbox.vue')())
let workingDownloader: VideoDownloader
const sizeCache = new Map<VideoFormat, number>()
type ExportType = 'copyLink' | 'aria2' | 'aria2RPC' | 'copyVLD' | 'exportVLD'
@ -527,6 +512,7 @@ async function loadPanel() {
el: '.download-video',
components: {
'v-dropdown': VueDropDown,
'v-checkbox': VueCheckBox,
},
data: {
downloadSingle: true,

View File

@ -0,0 +1,55 @@
<template>
<div class="v-checkbox" v-on:click="toggleCheck()" v-bind:class="{checked: checked}">
<i class="mdi mdi-checkbox-blank-circle-outline">
<i class="mdi mdi-checkbox-marked-circle"></i>
</i>
<span class="content">{{title}}</span>
</div>
</template>
<script lang="ts">
export default {
props: ['checked', 'title'],
methods: {
toggleCheck() {
this.$emit('update:checked', !this.checked)
}
}
}
</script>
<style lang="scss">
.v-checkbox {
font-size: 10pt;
cursor: pointer;
display: flex;
align-items: center;
.mdi {
font-size: 15pt;
line-height: 1;
}
.content {
flex-grow: 1;
text-align: left;
padding: 0 8px;
}
.mdi-checkbox-marked-circle {
color: var(--theme-color);
position: absolute;
top: 0;
left: 0;
transform: scale(0);
transition-timing-function: cubic-bezier(0.6, -0.28, 0.74, 0.05);
}
.mdi-checkbox-blank-circle-outline {
color: #8884;
position: relative;
}
&.checked .mdi-checkbox-blank-circle-outline {
color: var(--theme-color);
}
&.checked .mdi-checkbox-marked-circle {
transform: scale(1);
transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
}
</style>

View File

@ -75,5 +75,14 @@ export default {
user-select: none;
padding: 4px 8px;
}
.round-corner & {
border-radius: var(--corner-radius);
.dropdown-menu,
.dropdown-menu li {
border-radius: var(--corner-radius);
}
}
}
</style>