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

simplify conditional css in popup

Browse Source
This commit is contained in:
tophf 2022-02-21 02:24:34 +03:00
parent bd0e8273c1
commit 6ff68aaa74
2 changed files with 15 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
popup.html
View File

@ -196,7 +196,7 @@
<input id="disableAll" type="checkbox"> <input id="disableAll" type="checkbox">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg> <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
</label> </label>
<div id="write-style"> <div id="write-style" class="if-not-blocked">
<a id="write-for-frames" title="&lsaquo;iframe&rsaquo;..." tabindex="0" hidden></a> <a id="write-for-frames" title="&lsaquo;iframe&rsaquo;..." tabindex="0" hidden></a>
<span id="write-style-for" i18n="writeStyleFor"></span> <span id="write-style-for" i18n="writeStyleFor"></span>
</div> </div>
@ -206,9 +206,9 @@
<div class="split-btn" id="manage-split"> <div class="split-btn" id="manage-split">
<button id="popup-manage-button" i18n="openManage, title:popupManageTooltip" <button id="popup-manage-button" i18n="openManage, title:popupManageTooltip"
data-href="manage.html"></button data-href="manage.html"></button
><button class="split-btn-pedal" i18n="menu-site:popupManageSiteStyles"></button> ><button class="if-not-blocked split-btn-pedal" i18n="menu-site:popupManageSiteStyles"></button>
</div> </div>
<div class="split-btn" id="find-split"> <div class="split-btn if-not-blocked" id="find-split">
<button id="find-styles-btn" i18n="findStyles"></button <button id="find-styles-btn" i18n="findStyles"></button
><button class="split-btn-pedal" ><button class="split-btn-pedal"
menu-usoa="UserStyles Archive" menu-usoa="UserStyles Archive"
@ -217,9 +217,11 @@
menu-gf="GreasyFork"></button> menu-gf="GreasyFork"></button>
</div> </div>
<button id="options-btn" i18n="title:openOptions" class="rel"> <button id="options-btn" i18n="title:openOptions" class="rel">
<svg class="svg-icon config abs"><use xlink:href="#svg-icon-config"></use></svg> <svg class="if-not-blocked abs svg-icon config"><use xlink:href="#svg-icon-config"></use></svg>
<span class="if-not-blocked">&nbsp;</span>
<span class="if-blocked" i18n="openOptions"></span>
</button> </button>
<a href="https://github.com/openstyles/stylus/wiki" target="_blank"> <a class="if-blocked" href="https://github.com/openstyles/stylus/wiki" target="_blank">
<button id="popup-wiki-button" i18n="linkStylusWiki, title:linkGetHelp"></button> <button id="popup-wiki-button" i18n="linkStylusWiki, title:linkGetHelp"></button>
</a> </a>
</div> </div>

28
popup/popup.css
View File

@ -27,8 +27,11 @@ body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
padding-right: var(--outer-padding); padding-right: var(--outer-padding);
} }
body:not(.blocked) .if-blocked,
.blocked .if-not-blocked,
.blocked #installed > :not(.frame),
.firefox .chromium-only { .firefox .chromium-only {
display: none; display: none !important;
} }
#main-actions { #main-actions {
@ -439,12 +442,6 @@ a:hover .svg-icon {
fill: var(--fg); fill: var(--fg);
} }
body.blocked #popup-manage-button + .split-btn-pedal,
body.blocked #installed > :not(.frame),
body.blocked #main-actions > :not(#disableAll-label) {
display: none;
}
/* Never shown, but can be enabled with a style */ /* Never shown, but can be enabled with a style */
.entry .actions > .enable, .entry .actions > .enable,
@ -601,9 +598,11 @@ body.blocked #main-actions > :not(#disableAll-label) {
/* action buttons */ /* action buttons */
#popup-options { #popup-options {
--btn-gap: 4px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding: var(--outer-padding) 1px; padding: var(--outer-padding) 1px;
margin-right: calc(-1 * var(--btn-gap));
} }
#popup-options .split-btn > :first-child { #popup-options .split-btn > :first-child {
width: calc(100% - 16px); width: calc(100% - 16px);
@ -617,8 +616,8 @@ body.blocked #main-actions > :not(#disableAll-label) {
text-overflow: ellipsis; text-overflow: ellipsis;
padding: 2px 4px; padding: 2px 4px;
} }
#popup-options > :nth-last-child(n + 2) { #popup-options > * {
margin-right: 4px; margin-right: var(--btn-gap);
} }
#popup-options > *, #popup-options > *,
#popup-options .split-btn > :first-child { #popup-options .split-btn > :first-child {
@ -626,17 +625,6 @@ body.blocked #main-actions > :not(#disableAll-label) {
flex: 1 1 auto; flex: 1 1 auto;
min-width: 2em; min-width: 2em;
} }
.blocked #find-split,
.blocked #options-btn svg,
body:not(.blocked) #popup-options a[href*="wiki"] {
display: none;
}
#options-btn::after {
content: '\A0';
}
.blocked #options-btn::after {
content: attr(title);
}
#options-btn svg { #options-btn svg {
left: 0; left: 0;
right: 0; right: 0;