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

add [x] as usercss to write-style in popup

Browse Source
This commit is contained in:
tophf 2022-03-31 12:23:17 +03:00
parent 24aaf2fdb8
commit ea388ea9a7
2 changed files with 27 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
popup.html
View File

@ -197,6 +197,11 @@
<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" class="if-not-blocked"> <div id="write-style" class="if-not-blocked">
<label id="write-as" i18n="title:optionsAdvancedNewStyleAsUsercss">
<input id="newStyleAsUsercss" type="checkbox">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
<div>U</div>
</label>
<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>

36
popup/popup.css
View File

@ -55,8 +55,8 @@ body:not(.blocked) .if-blocked,
font-weight: bold; font-weight: bold;
} }
.style-name:hover .checker:checked, label:hover .checker:checked,
.style-name:hover .checker { label:hover .checker {
border-color: var(--c30); border-color: var(--c30);
background-color: var(--c80); background-color: var(--c80);
} }
@ -438,15 +438,23 @@ a:hover .svg-icon {
} }
/* 'New style' links */ /* 'New style' links */
#write-as {
#write-style { position: absolute;
display: flex; left: var(--outer-padding);
flex-direction: row;
flex-wrap: wrap;
} }
#newStyleAsUsercss {
#write-style-for { position: static;
margin-right: .6ex }
#newStyleAsUsercss ~ div {
font-weight: bold;
margin: -2px -1px 0;
padding-top: 1px;
text-align: center;
border-radius: 3px;
}
#newStyleAsUsercss:checked ~ div {
color: var(--bg);
background-color: var(--accent-2);
} }
.write-style-link { .write-style-link {
@ -502,12 +510,12 @@ a:hover .svg-icon {
display: none; display: none;
} }
#write-for-frames { #write-for-frames:not([hidden]) {
position: absolute; position: relative;
width: 5px; width: 5px;
height: 5px; height: 5px;
margin-left: -12px; display: inline-block;
margin-top: 4px; margin: 0 2px 2px;
--dash: transparent 2px, currentColor 2px, currentColor 3px, transparent 3px; --dash: transparent 2px, currentColor 2px, currentColor 3px, transparent 3px;
background: linear-gradient(var(--dash)), linear-gradient(90deg, var(--dash)); background: linear-gradient(var(--dash)), linear-gradient(90deg, var(--dash));
} }