open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

make action buttons in popup auto-fit contents

Browse Source 
several languages have labels of wildly different lengths so we try to maintain the proportion
This commit is contained in:
tophf 2017-12-29 20:27:10 +03:00
parent 16f98ed250
commit 441de984b0
1 changed files with 15 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
popup/popup.css
View File

@ -5,6 +5,7 @@
--name-padding-right: 40px; --name-padding-right: 40px;
--actions-width: 75px; --actions-width: 75px;
--onoffswitch-width: 60px; --onoffswitch-width: 60px;
--outer-padding: 9px;
} }
html, body { html, body {
@ -25,8 +26,8 @@ body {
} }
body > div:not(#installed):not(#message-box):not(.colorpicker-popup) { body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
margin-left: 9px; margin-left: var(--outer-padding);
margin-right: 9px; margin-right: var(--outer-padding);
} }
.firefox .chromium-only { .firefox .chromium-only {
@ -81,7 +82,7 @@ body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
#installed .style-name .svg-icon.checked { #installed .style-name .svg-icon.checked {
position: absolute; position: absolute;
top: 7px; top: 7px;
left: 9px; left: var(--outer-padding);
pointer-events: none; pointer-events: none;
} }
@ -102,7 +103,7 @@ body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
} }
#no-styles { #no-styles {
padding: 4px 9px 6px; padding: 4px var(--outer-padding) 6px;
font-weight: bold; font-weight: bold;
} }
@ -435,19 +436,23 @@ body.blocked .actions > .main-controls {
#popup-options { #popup-options {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; padding: var(--outer-padding) 1px;
padding: 1.2em 1px;
} }
#popup-options button { #popup-options button {
width: 32%;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
padding: 2px 4px;
margin-right: 4px;
/* several languages have labels of wildly different lengths so we try to maintain the proportion */
flex: 1 1 auto;
min-width: 4em;
} }
.firefox #popup-options button { .firefox #popup-options button:nth-last-child(2),
width: 49%; #popup-options button:last-child {
margin-right: 0;
} }
/* confirm */ /* confirm */
@ -532,7 +537,7 @@ body.blocked .actions > .main-controls {
} }
.blocked-info p { .blocked-info p {
padding: 1px 0 9px; padding: 1px 0 var(--outer-padding);
display: block; display: block;
font-size: 90%; font-size: 90%;
margin: 0; margin: 0;