Animated popups

This commit is contained in:
mauro-balades
2024-04-03 23:23:41 +02:00
parent 559a352aa5
commit d3c8a55976
6 changed files with 32 additions and 17 deletions

View File

@@ -1,4 +0,0 @@
<?xml version="1.0"?>
<updates>
<addons/>
</updates>

View File

@@ -5,7 +5,7 @@
"binaryName": "zen",
"version": {
"product": "firefox",
"version": "124.0.2",
"version": "125.0.2",
"displayVersion": "1.0.0"
},
"buildOptions": {

View File

@@ -71,24 +71,24 @@
}
#PanelUI-zen-profiles-list .PanelUI-zen-profiles-item-avatar {
width: 30px;
height: 30px;
width: 20px;
height: 20px;
border-radius: 50%;
margin: 0 0.7em 0 1px;
margin: 1px 0.5em 1px 1px;
}
#PanelUI-zen-profiles-list .PanelUI-zen-profiles-item-name {
font-weight: normal;
font-size: 17px;
font-size: 15px;
margin-left: 5px;
}
#PanelUI-zen-profiles-current-info {
margin-top: 40px;
margin-top: 50px;
}
#PanelUI-zen-profiles-current-name {
font-size: 1.7em;
font-size: 1.4em;
font-weight: 500;
line-height: 0.5;
padding: 5px 10px;
@@ -124,7 +124,7 @@
}
#PanelUI-zen-profiles-current-profile-current {
font-size: 15px;
font-size: 13px;
opacity: 0.5;
margin-left: 15px;
margin-bottom: 5px;

View File

@@ -27,3 +27,22 @@ html#main-window > body {
margin-top: 0;
}
panel[type="arrow"][animate][animate="open"] {
animation: zen-jello-animation 0.2s ease-in-out;
}
@keyframes zen-jello-animation {
0% {
transform: scale3d(0.9, 0.9, 0.9);
}
50% {
transform: scale3d(1.01, 1.01, 1.01);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}

View File

@@ -1,5 +1,5 @@
diff --git a/toolkit/themes/shared/popup.css b/toolkit/themes/shared/popup.css
index ddc41a66ed0e3688ce34052652bef1fe33a08d49..f0078c84db054436440804a4ff3ae2f443f76018 100644
index ddc41a66ed0e3688ce34052652bef1fe33a08d49..ee6acc414a86626ac15b5a744ebcb867c85fe536 100644
--- a/toolkit/themes/shared/popup.css
+++ b/toolkit/themes/shared/popup.css
@@ -2,6 +2,8 @@
@@ -22,7 +22,7 @@ index ddc41a66ed0e3688ce34052652bef1fe33a08d49..f0078c84db054436440804a4ff3ae2f4
--panel-padding: var(--panel-padding-block) 0;
--panel-border-radius: 4px;
- --panel-border-color: ThreeDShadow;
+ --panel-border-color: transparent /* var(--arrowpanel-border-color) */ !important;
+ --panel-border-color: light-dark(rgba(0,0,0,.2), rgba(255,255,255,.1)) /* var(--arrowpanel-border-color) */ !important;
--panel-width: initial;
--panel-shadow-margin: 0px;

View File

@@ -2,10 +2,10 @@
:root {
--panel-subview-body-padding: 2px 0 !important;
--arrowpanel-border-radius: 8px !important;
--arrowpanel-menuitem-border-radius: 4px !important;
--arrowpanel-menuitem-border-radius: 5px !important;
--arrowpanel-menuitem-margin: var(--uc-arrowpanel-menuitem-margin-block) var(--uc-arrowpanel-menuitem-margin-inline) !important;
--arrowpanel-menuitem-padding-block: 6px !important;
--arrowpanel-menuitem-padding-inline: 10px !important;
--arrowpanel-menuitem-padding-block: 8px !important;
--arrowpanel-menuitem-padding-inline: 9px !important;
--uc-arrowpanel-menuicon-margin-inline: 14px;
--uc-arrowpanel-menuitem-margin-inline: 4px;
--uc-arrowpanel-menuitem-margin-block: 2px;