add preferences and change default opacity to 30%

This commit is contained in:
Manuja Mallikarachchi 2025-05-12 16:24:34 +05:30 committed by GitHub
parent e18dce85bf
commit 6c7a9b4194
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 131 additions and 13 deletions

View file

@ -6,31 +6,48 @@
right: calc(var(--zen-element-separation) * 2) !important;
}
:root[zen-right-side='true'] & {
:root[zen-right-side='true'] & {
left: calc(var(--zen-element-separation) * 2) !important;
}
& .zen-toast {
padding: 6px !important;
& .zen-toast {
padding: 6px !important;
border-radius: 12px !important;
font-weight: 600 !important;
font-size: 12px !important;
box-shadow: 0px !important ;
border: 1px solid rgba(0, 0, 0, 0.2) !important;
background: rgba(255, 255, 255, 0.2) !important;
color: color-mix(in srgb, var(--button-primary-color) 20%, transparent) !important;
& .description {
font-size: 10px !important;
}
}
& .zen-toast:hover {
background: var(--zen-primary-color) !important;
color: var(--button-primary-color) !important;
border: 1px solid rgba(0, 0, 0, 0.0) !important;
transition: 0.3s !important;
&:has(#mod-zentoast[mod-zentoast-background_opacity="0.1"]) { background: rgba(255, 255, 255, 0.1) !important; }
&:has(#mod-zentoast[mod-zentoast-background_opacity="0.2"]) { background: rgba(255, 255, 255, 0.2) !important; }
&:has(#mod-zentoast[mod-zentoast-background_opacity="0.3"]) { background: rgba(255, 255, 255, 0.3) !important; }
&:has(#mod-zentoast[mod-zentoast-background_opacity="0.4"]) { background: rgba(255, 255, 255, 0.4) !important; }
&:has(#mod-zentoast[mod-zentoast-background_opacity="0.5"]) { background: rgba(255, 255, 255, 0.5) !important; }
&:has(#mod-zentoast[mod-zentoast-background_opacity="0.6"]) { background: rgba(255, 255, 255, 0.6) !important; }
&:has(#mod-zentoast[mod-zentoast-border_opacity="0.1"]) { border: 1px solid rgba(0, 0, 0, 0.1) !important; }
&:has(#mod-zentoast[mod-zentoast-border_opacity="0.2"]) { border: 1px solid rgba(0, 0, 0, 0.2) !important; }
&:has(#mod-zentoast[mod-zentoast-border_opacity="0.3"]) { border: 1px solid rgba(0, 0, 0, 0.3) !important; }
&:has(#mod-zentoast[mod-zentoast-border_opacity="0.4"]) { border: 1px solid rgba(0, 0, 0, 0.4) !important; }
&:has(#mod-zentoast[mod-zentoast-border_opacity="0.5"]) { border: 1px solid rgba(0, 0, 0, 0.5) !important; }
&:has(#mod-zentoast[mod-zentoast-border_opacity="0.6"]) { border: 1px solid rgba(0, 0, 0, 0.6) !important; }
&:has(#mod-zentoast[mod-zentoast-text_opacity="0.1"]) { color: rgba(0, 0, 0, 0.1) !important; }
&:has(#mod-zentoast[mod-zentoast-text_opacity="0.2"]) { color: rgba(0, 0, 0, 0.2) !important; }
&:has(#mod-zentoast[mod-zentoast-text_opacity="0.3"]) { color: rgba(0, 0, 0, 0.3) !important; }
&:has(#mod-zentoast[mod-zentoast-text_opacity="0.4"]) { color: rgba(0, 0, 0, 0.4) !important; }
&:has(#mod-zentoast[mod-zentoast-text_opacity="0.5"]) { color: rgba(0, 0, 0, 0.5) !important; }
&:has(#mod-zentoast[mod-zentoast-text_opacity="0.6"]) { color: rgba(0, 0, 0, 0.6) !important; }
&:hover {
background: var(--zen-primary-color) !important;
color: var(--button-primary-color) !important;
border: 1px solid rgba(0, 0, 0, 0.0) !important;
transition: 0.3s !important;
}
}
}

View file

@ -0,0 +1,101 @@
[
{
"property": "mod.zentoast.background_opacity",
"label": "Background opacity",
"type": "dropdown",
"placeholder": "Select background opacity",
"defaultValue": "0.3",
"options": [
{
"label": "10%",
"value": "0.1"
},
{
"label": "20%",
"value": "0.2"
},
{
"label": "30%",
"value": "0.3"
},
{
"label": "40%",
"value": "0.4"
},
{
"label": "50%",
"value": "0.5"
},
{
"label": "60%",
"value": "0.6"
}
]
},
{
"property": "mod.zentoast.border_opacity",
"label": "Border opacity",
"type": "dropdown",
"placeholder": "Select border opacity",
"defaultValue": "0.3",
"options": [
{
"label": "10%",
"value": "0.1"
},
{
"label": "20%",
"value": "0.2"
},
{
"label": "30%",
"value": "0.3"
},
{
"label": "40%",
"value": "0.4"
},
{
"label": "50%",
"value": "0.5"
},
{
"label": "60%",
"value": "0.6"
}
]
},
{
"property": "mod.zentoast.text_opacity",
"label": "Text opacity",
"type": "dropdown",
"placeholder": "Select text opacity",
"defaultValue": "0.3",
"options": [
{
"label": "10%",
"value": "0.1"
},
{
"label": "20%",
"value": "0.2"
},
{
"label": "30%",
"value": "0.3"
},
{
"label": "40%",
"value": "0.4"
},
{
"label": "50%",
"value": "0.5"
},
{
"label": "60%",
"value": "0.6"
}
]
}
]