Checkbox-and-radio-redesign-on-Windows (#4609)
Some checks are pending
CI / Build, Upload, Test (push) Waiting to run

This commit is contained in:
windingwind 2024-08-30 19:20:52 +08:00 committed by GitHub
parent 679c99e465
commit a0a8cceda4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
41 changed files with 407 additions and 19 deletions

View file

@ -28,11 +28,11 @@
<groupbox id="zotero-prefpane-advanced-miscellaneous">
<label><html:h2>&zotero.preferences.miscellaneous;</html:h2></label>
<html:div class="pref-row">
<hbox align="center">
<checkbox label="&zotero.preferences.autoUpdate;" preference="extensions.zotero.automaticScraperUpdates" native="true"/>
<button id="updateButton" style="margin-top:0" label="&zotero.preferences.updateNow;"
<button id="updateButton" label="&zotero.preferences.updateNow;"
oncommand="Zotero_Preferences.Advanced.updateTranslators()"/>
</html:div>
</hbox>
<checkbox label="&zotero.preferences.reportTranslationFailure;" preference="extensions.zotero.reportTranslationFailure" native="true"/>
@ -249,19 +249,19 @@
<separator/>
<html:div class="pref-row">
<hbox align="center">
<html:label for="fulltext-maxLength">&zotero.preferences.fulltext.textMaxLength;</html:label>
<html:input id="fulltext-maxLength" type="text" size="10" preference="extensions.zotero.fulltext.textMaxLength"/>
<html:label>(&zotero.preferences.default; 500000)</html:label>
</html:div>
</hbox>
<separator class="thin"/>
<html:div class="pref-row">
<hbox align="center">
<html:label for="fulltext-pdfMaxPages">&zotero.preferences.fulltext.pdfMaxPages;</html:label>
<html:input id="fulltext-pdfMaxPages" type="text" size="5" preference="extensions.zotero.fulltext.pdfMaxPages"/>
<html:label>(&zotero.preferences.default; 100)</html:label>
</html:div>
</hbox>
</groupbox>
<groupbox id="fulltext-stats">

View file

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="14" height="14" rx="3" fill="white" fill-opacity="0.06"/>
<rect x="0.5" y="0.5" width="15" height="15" rx="3.5" stroke="white" stroke-opacity="0.12"/>
</svg>

After

Width:  |  Height:  |  Size: 279 B

View file

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="15" height="15" rx="3.5" stroke="white" stroke-opacity="0.12"/>
</svg>

After

Width:  |  Height:  |  Size: 196 B

View file

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="14" height="14" rx="3" fill="white" fill-opacity="0.06"/>
<rect x="0.5" y="0.5" width="15" height="15" rx="3.5" stroke="white" stroke-opacity="0.55"/>
</svg>

After

Width:  |  Height:  |  Size: 279 B

View file

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="14" height="14" rx="3" fill="white" fill-opacity="0.03"/>
<rect x="0.5" y="0.5" width="15" height="15" rx="3.5" stroke="white" stroke-opacity="0.55"/>
</svg>

After

Width:  |  Height:  |  Size: 279 B

View file

@ -0,0 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="14" height="14" rx="3" fill="#4072E5" fill-opacity="0.8"/>
<rect x="0.5" y="0.5" width="15" height="15" rx="3.5" stroke="#4072E5" stroke-opacity="0.8"/>
<path opacity="0.7" d="M3.00195 8.49805C3.00195 8.36133 3.05078 8.24414 3.14844 8.14648C3.24609 8.04883 3.36328 8 3.5 8C3.63672 8 3.75391 8.04883 3.85156 8.14648L6.5 10.7949L12.1484 5.14648C12.2461 5.04883 12.3633 5 12.5 5C12.5703 5 12.6348 5.01367 12.6934 5.04102C12.7559 5.06445 12.8086 5.09961 12.8516 5.14648C12.8984 5.18945 12.9355 5.24219 12.9629 5.30469C12.9902 5.36328 13.0039 5.42773 13.0039 5.49805C13.0039 5.63477 12.9531 5.75391 12.8516 5.85547L6.85156 11.8555C6.75391 11.9531 6.63672 12.002 6.5 12.002C6.36328 12.002 6.24609 11.9531 6.14844 11.8555L3.14844 8.85547C3.05078 8.75781 3.00195 8.63867 3.00195 8.49805Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 924 B

View file

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="16" height="16" rx="3" fill="white" fill-opacity="0.12"/>
<path d="M3.00195 8.49805C3.00195 8.36133 3.05078 8.24414 3.14844 8.14648C3.24609 8.04883 3.36328 8 3.5 8C3.63672 8 3.75391 8.04883 3.85156 8.14648L6.5 10.7949L12.1484 5.14648C12.2461 5.04883 12.3633 5 12.5 5C12.5703 5 12.6348 5.01367 12.6934 5.04102C12.7559 5.06445 12.8086 5.09961 12.8516 5.14648C12.8984 5.18945 12.9355 5.24219 12.9629 5.30469C12.9902 5.36328 13.0039 5.42773 13.0039 5.49805C13.0039 5.63477 12.9531 5.75391 12.8516 5.85547L6.85156 11.8555C6.75391 11.9531 6.63672 12.002 6.5 12.002C6.36328 12.002 6.24609 11.9531 6.14844 11.8555L3.14844 8.85547C3.05078 8.75781 3.00195 8.63867 3.00195 8.49805Z" fill="white" fill-opacity="0.55"/>
</svg>

After

Width:  |  Height:  |  Size: 823 B

View file

@ -0,0 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="14" height="14" rx="3" fill="#4072E5" fill-opacity="0.9"/>
<rect x="0.5" y="0.5" width="15" height="15" rx="3.5" stroke="#4072E5" stroke-opacity="0.9"/>
<path d="M3.00195 8.49805C3.00195 8.36133 3.05078 8.24414 3.14844 8.14648C3.24609 8.04883 3.36328 8 3.5 8C3.63672 8 3.75391 8.04883 3.85156 8.14648L6.5 10.7949L12.1484 5.14648C12.2461 5.04883 12.3633 5 12.5 5C12.5703 5 12.6348 5.01367 12.6934 5.04102C12.7559 5.06445 12.8086 5.09961 12.8516 5.14648C12.8984 5.18945 12.9355 5.24219 12.9629 5.30469C12.9902 5.36328 13.0039 5.42773 13.0039 5.49805C13.0039 5.63477 12.9531 5.75391 12.8516 5.85547L6.85156 11.8555C6.75391 11.9531 6.63672 12.002 6.5 12.002C6.36328 12.002 6.24609 11.9531 6.14844 11.8555L3.14844 8.85547C3.05078 8.75781 3.00195 8.63867 3.00195 8.49805Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 910 B

View file

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="15" height="15" rx="3.5" fill="#4072E5" stroke="#4072E5"/>
<path d="M3.00195 8.49805C3.00195 8.36133 3.05078 8.24414 3.14844 8.14648C3.24609 8.04883 3.36328 8 3.5 8C3.63672 8 3.75391 8.04883 3.85156 8.14648L6.5 10.7949L12.1484 5.14648C12.2461 5.04883 12.3633 5 12.5 5C12.5703 5 12.6348 5.01367 12.6934 5.04102C12.7559 5.06445 12.8086 5.09961 12.8516 5.14648C12.8984 5.18945 12.9355 5.24219 12.9629 5.30469C12.9902 5.36328 13.0039 5.42773 13.0039 5.49805C13.0039 5.63477 12.9531 5.75391 12.8516 5.85547L6.85156 11.8555C6.75391 11.9531 6.63672 12.002 6.5 12.002C6.36328 12.002 6.24609 11.9531 6.14844 11.8555L3.14844 8.85547C3.05078 8.75781 3.00195 8.63867 3.00195 8.49805Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 820 B

View file

@ -0,0 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="14" height="14" rx="7" fill="white" fill-opacity="0.06"/>
<rect x="0.5" y="0.5" width="15" height="15" rx="7.5" stroke="white" stroke-opacity="0.12"/>
<rect x="3" y="3" width="10" height="10" rx="5" fill="#1E1E1E"/>
</svg>

After

Width:  |  Height:  |  Size: 344 B

View file

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="15" height="15" rx="7.5" stroke="white" stroke-opacity="0.12"/>
</svg>

After

Width:  |  Height:  |  Size: 196 B

View file

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="14" height="14" rx="7" fill="white" fill-opacity="0.06"/>
<rect x="0.5" y="0.5" width="15" height="15" rx="7.5" stroke="white" stroke-opacity="0.55"/>
</svg>

After

Width:  |  Height:  |  Size: 279 B

View file

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="14" height="14" rx="7" fill="white" fill-opacity="0.03"/>
<rect x="0.5" y="0.5" width="15" height="15" rx="7.5" stroke="white" stroke-opacity="0.55"/>
</svg>

After

Width:  |  Height:  |  Size: 279 B

View file

@ -0,0 +1,11 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="14" height="14" rx="7" fill="#4072E5" fill-opacity="0.8"/>
<rect x="0.5" y="0.5" width="15" height="15" rx="7.5" stroke="#4072E5" stroke-opacity="0.8"/>
<rect x="4.5" y="4.5" width="7" height="7" rx="3.5" fill="white" stroke="url(#paint0_linear_5791_46488)"/>
<defs>
<linearGradient id="paint0_linear_5791_46488" x1="8" y1="5" x2="8" y2="11" gradientUnits="userSpaceOnUse">
<stop offset="0.500208" stop-opacity="0.0578"/>
<stop offset="0.954545" stop-opacity="0.1622"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 624 B

View file

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="16" height="16" rx="8" fill="white" fill-opacity="0.12"/>
<rect x="4" y="4" width="8" height="8" rx="4" fill="#1E1E1E"/>
</svg>

After

Width:  |  Height:  |  Size: 237 B

View file

@ -0,0 +1,11 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="14" height="14" rx="7" fill="#4072E5" fill-opacity="0.9"/>
<rect x="0.5" y="0.5" width="15" height="15" rx="7.5" stroke="#4072E5" stroke-opacity="0.9"/>
<rect x="2.5" y="2.5" width="11" height="11" rx="5.5" fill="white" stroke="url(#paint0_linear_5791_46491)"/>
<defs>
<linearGradient id="paint0_linear_5791_46491" x1="8" y1="3" x2="8" y2="13" gradientUnits="userSpaceOnUse">
<stop offset="0.500208" stop-opacity="0.0578"/>
<stop offset="0.954545" stop-opacity="0.1622"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 626 B

View file

@ -0,0 +1,10 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="15" height="15" rx="7.5" fill="#4072E5" stroke="#4072E5"/>
<rect x="3.5" y="3.5" width="9" height="9" rx="4.5" fill="white" stroke="url(#paint0_linear_5791_46494)"/>
<defs>
<linearGradient id="paint0_linear_5791_46494" x1="8" y1="4" x2="8" y2="12" gradientUnits="userSpaceOnUse">
<stop offset="0.500208" stop-opacity="0.0578"/>
<stop offset="0.954545" stop-opacity="0.1622"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 534 B

View file

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="14" height="14" rx="3" fill="black" fill-opacity="0.1"/>
<rect x="0.5" y="0.5" width="15" height="15" rx="3.5" stroke="black" stroke-opacity="0.25"/>
</svg>

After

Width:  |  Height:  |  Size: 278 B

View file

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="15" height="15" rx="3.5" stroke="black" stroke-opacity="0.25"/>
</svg>

After

Width:  |  Height:  |  Size: 196 B

View file

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="14" height="14" rx="3" fill="black" fill-opacity="0.05"/>
<rect x="0.5" y="0.5" width="15" height="15" rx="3.5" stroke="black" stroke-opacity="0.55"/>
</svg>

After

Width:  |  Height:  |  Size: 279 B

View file

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 4C1 2.34315 2.34315 1 4 1H12C13.6569 1 15 2.34315 15 4V12C15 13.6569 13.6569 15 12 15H4C2.34315 15 1 13.6569 1 12V4Z" fill="black" fill-opacity="0.02"/>
<path d="M4 0.5C2.067 0.5 0.5 2.067 0.5 4V12C0.5 13.933 2.067 15.5 4 15.5H12C13.933 15.5 15.5 13.933 15.5 12V4C15.5 2.067 13.933 0.5 12 0.5H4Z" stroke="black" stroke-opacity="0.55"/>
</svg>

After

Width:  |  Height:  |  Size: 451 B

View file

@ -0,0 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="14" height="14" rx="3" fill="#4072E5" fill-opacity="0.8"/>
<rect x="0.5" y="0.5" width="15" height="15" rx="3.5" stroke="#4072E5" stroke-opacity="0.8"/>
<path opacity="0.7" d="M3.00195 8.49805C3.00195 8.36133 3.05078 8.24414 3.14844 8.14648C3.24609 8.04883 3.36328 8 3.5 8C3.63672 8 3.75391 8.04883 3.85156 8.14648L6.5 10.7949L12.1484 5.14648C12.2461 5.04883 12.3633 5 12.5 5C12.5703 5 12.6348 5.01367 12.6934 5.04102C12.7559 5.06445 12.8086 5.09961 12.8516 5.14648C12.8984 5.18945 12.9355 5.24219 12.9629 5.30469C12.9902 5.36328 13.0039 5.42773 13.0039 5.49805C13.0039 5.63477 12.9531 5.75391 12.8516 5.85547L6.85156 11.8555C6.75391 11.9531 6.63672 12.002 6.5 12.002C6.36328 12.002 6.24609 11.9531 6.14844 11.8555L3.14844 8.85547C3.05078 8.75781 3.00195 8.63867 3.00195 8.49805Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 924 B

View file

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="16" height="16" rx="3" fill="black" fill-opacity="0.25"/>
<path d="M3.00195 8.49805C3.00195 8.36133 3.05078 8.24414 3.14844 8.14648C3.24609 8.04883 3.36328 8 3.5 8C3.63672 8 3.75391 8.04883 3.85156 8.14648L6.5 10.7949L12.1484 5.14648C12.2461 5.04883 12.3633 5 12.5 5C12.5703 5 12.6348 5.01367 12.6934 5.04102C12.7559 5.06445 12.8086 5.09961 12.8516 5.14648C12.8984 5.18945 12.9355 5.24219 12.9629 5.30469C12.9902 5.36328 13.0039 5.42773 13.0039 5.49805C13.0039 5.63477 12.9531 5.75391 12.8516 5.85547L6.85156 11.8555C6.75391 11.9531 6.63672 12.002 6.5 12.002C6.36328 12.002 6.24609 11.9531 6.14844 11.8555L3.14844 8.85547C3.05078 8.75781 3.00195 8.63867 3.00195 8.49805Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 803 B

View file

@ -0,0 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="14" height="14" rx="3" fill="#4072E5" fill-opacity="0.9"/>
<rect x="0.5" y="0.5" width="15" height="15" rx="3.5" stroke="#4072E5" stroke-opacity="0.9"/>
<path d="M3.00195 8.49805C3.00195 8.36133 3.05078 8.24414 3.14844 8.14648C3.24609 8.04883 3.36328 8 3.5 8C3.63672 8 3.75391 8.04883 3.85156 8.14648L6.5 10.7949L12.1484 5.14648C12.2461 5.04883 12.3633 5 12.5 5C12.5703 5 12.6348 5.01367 12.6934 5.04102C12.7559 5.06445 12.8086 5.09961 12.8516 5.14648C12.8984 5.18945 12.9355 5.24219 12.9629 5.30469C12.9902 5.36328 13.0039 5.42773 13.0039 5.49805C13.0039 5.63477 12.9531 5.75391 12.8516 5.85547L6.85156 11.8555C6.75391 11.9531 6.63672 12.002 6.5 12.002C6.36328 12.002 6.24609 11.9531 6.14844 11.8555L3.14844 8.85547C3.05078 8.75781 3.00195 8.63867 3.00195 8.49805Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 910 B

View file

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="15" height="15" rx="3.5" fill="#4072E5" stroke="#4072E5"/>
<path d="M3.00195 8.49805C3.00195 8.36133 3.05078 8.24414 3.14844 8.14648C3.24609 8.04883 3.36328 8 3.5 8C3.63672 8 3.75391 8.04883 3.85156 8.14648L6.5 10.7949L12.1484 5.14648C12.2461 5.04883 12.3633 5 12.5 5C12.5703 5 12.6348 5.01367 12.6934 5.04102C12.7559 5.06445 12.8086 5.09961 12.8516 5.14648C12.8984 5.18945 12.9355 5.24219 12.9629 5.30469C12.9902 5.36328 13.0039 5.42773 13.0039 5.49805C13.0039 5.63477 12.9531 5.75391 12.8516 5.85547L6.85156 11.8555C6.75391 11.9531 6.63672 12.002 6.5 12.002C6.36328 12.002 6.24609 11.9531 6.14844 11.8555L3.14844 8.85547C3.05078 8.75781 3.00195 8.63867 3.00195 8.49805Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 820 B

View file

@ -0,0 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="14" height="14" rx="7" fill="black" fill-opacity="0.1"/>
<rect x="0.5" y="0.5" width="15" height="15" rx="7.5" stroke="black" stroke-opacity="0.25"/>
<rect x="5" y="5" width="6" height="6" rx="3" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 339 B

View file

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="15" height="15" rx="7.5" stroke="black" stroke-opacity="0.1"/>
</svg>

After

Width:  |  Height:  |  Size: 195 B

View file

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="14" height="14" rx="7" fill="black" fill-opacity="0.05"/>
<rect x="0.5" y="0.5" width="15" height="15" rx="7.5" stroke="black" stroke-opacity="0.55"/>
</svg>

After

Width:  |  Height:  |  Size: 279 B

View file

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="14" height="14" rx="7" fill="black" fill-opacity="0.02"/>
<rect x="0.5" y="0.5" width="15" height="15" rx="7.5" stroke="black" stroke-opacity="0.55"/>
</svg>

After

Width:  |  Height:  |  Size: 279 B

View file

@ -0,0 +1,11 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="14" height="14" rx="7" fill="#4072E5" fill-opacity="0.8"/>
<rect x="0.5" y="0.5" width="15" height="15" rx="7.5" stroke="#4072E5" stroke-opacity="0.8"/>
<rect x="4.5" y="4.5" width="7" height="7" rx="3.5" fill="white" stroke="url(#paint0_linear_5791_46515)"/>
<defs>
<linearGradient id="paint0_linear_5791_46515" x1="8" y1="5" x2="8" y2="11" gradientUnits="userSpaceOnUse">
<stop offset="0.500208" stop-opacity="0.0578"/>
<stop offset="0.954545" stop-opacity="0.1622"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 624 B

View file

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="16" height="16" rx="8" fill="black" fill-opacity="0.25"/>
<rect x="4" y="4" width="8" height="8" rx="4" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 235 B

View file

@ -0,0 +1,11 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="14" height="14" rx="7" fill="#4072E5" fill-opacity="0.9"/>
<rect x="0.5" y="0.5" width="15" height="15" rx="7.5" stroke="#4072E5" stroke-opacity="0.9"/>
<rect x="2.5" y="2.5" width="11" height="11" rx="5.5" fill="white" stroke="url(#paint0_linear_5791_46518)"/>
<defs>
<linearGradient id="paint0_linear_5791_46518" x1="8" y1="3" x2="8" y2="13" gradientUnits="userSpaceOnUse">
<stop offset="0.500208" stop-opacity="0.0578"/>
<stop offset="0.954545" stop-opacity="0.1622"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 626 B

View file

@ -0,0 +1,10 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="15" height="15" rx="7.5" fill="#4072E5" stroke="#4072E5"/>
<rect x="3.5" y="3.5" width="9" height="9" rx="4.5" fill="white" stroke="url(#paint0_linear_5791_46521)"/>
<defs>
<linearGradient id="paint0_linear_5791_46521" x1="8" y1="4" x2="8" y2="12" gradientUnits="userSpaceOnUse">
<stop offset="0.500208" stop-opacity="0.0578"/>
<stop offset="0.954545" stop-opacity="0.1622"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 534 B

View file

@ -275,8 +275,8 @@
components (e.g. toolbarbutton) and sometimes are too wide (e.g. around textfield on macOS).
Box-shadow is used to be able to set the radius.
*/
@mixin focus-ring($thin: false, $selector: focus-visible) {
&:#{$selector} {
@mixin focus-ring($thin: false, $selector: ":focus-visible") {
&#{$selector} {
@media (-moz-platform: windows) {
outline: var(--color-focus-outer-border) solid var(--width-focus-outer-border);
outline-offset: var(--width-focus-border);

View file

@ -39,6 +39,15 @@
flex-wrap: wrap;
gap: 8px;
flex: 1 auto;
#post-upgrade-density {
@media (-moz-platform: windows) {
radio {
height: 24px;
margin: 0;
}
}
}
}
#post-upgrade-new-features-link {

View file

@ -55,7 +55,7 @@ search-textbox {
}
@media not (-moz-platform: windows) {
@include focus-ring(false, focus);
@include focus-ring(false, ":focus");
}
}

View file

@ -18,7 +18,9 @@
// Components
@import "win/components/button";
@import "win/components/checkbox";
@import "win/components/input";
@import "win/components/menulist";
@import "win/components/menupopup";
@import "win/components/radio";
@import "win/components/tabbox";

View file

@ -300,19 +300,80 @@ label[is=zotero-text-link] {
}
}
.pref-row {
display: flex;
align-items: center;
}
button {
flex-shrink: 0;
}
radiogroup {
margin-bottom: 4px;
@media (-moz-platform: windows) {
// Adjust padding and margin of form elements on Windows
// Assumptions:
// 1. All radio are in radiogroup
// 2. All radiogroup/checkbox are in hbox/vbox/groupbox
// 3. Vertical radiogroup are only in vertical layout
// First and last checkbox in a horizontal layout should not have inline padding and margin
hbox > checkbox[native]{
&:first-child {
padding-inline-start: 0;
margin-inline-start: 0;
}
&:last-child {
padding-inline-end: 0;
margin-inline-end: 0;
}
}
vbox, groupbox {
// Checkbox in a vertical layout should not have inline padding and margin
& > checkbox[native] {
padding-inline: 0;
margin-inline: 0;
}
// Button-like elements in a vertical layout should not have inline margin
& > button,
& > menulist {
margin-inline: 0;
}
// Radiogroup in a vertical layout and radio in a horizontal layout
// First and last radio should not have inline padding and margin
& > radiogroup[orient=horizontal] radio {
&:first-child {
padding-inline-start: 0;
margin-inline-start: 0;
}
&:last-child {
padding-inline-end: 0;
margin-inline-end: 0;
}
}
// In horizontal layout inside vertical layout
// First and last button-like element should not have inline margin
& > hbox > :is(button, menulist) {
&:first-child {
margin-inline-start: 0;
}
&:last-child {
margin-inline-end: 0;
}
}
}
// Radio in a vertical layout should not have inline padding and margin
radiogroup:not([orient=horizontal]) radio {
padding-inline: 0;
margin-inline: 0;
}
}
radio, checkbox {
margin-block: 4px;
@media not (-moz-platform: windows) {
radiogroup {
margin-bottom: 4px;
}
radio, checkbox {
margin-block: 4px;
}
}

View file

@ -0,0 +1,74 @@
@mixin -make-checkbox-icon($state) {
& :is(.checkbox-check) {
@include focus-states using ($color) {
background-image: url('chrome://zotero/skin/win/#{$color}/checkbox-#{$state}.svg');
&[checked=true] {
background-image: url('chrome://zotero/skin/win/#{$color}/checkbox-selected-#{$state}.svg');
}
}
}
}
:is(checkbox[native]) {
appearance: none;
height: 28px;
gap: 8px;
padding-inline: 4px 8px;
border-radius: 4px;
--checkbox-border-color: transparent;
--checkbox-unchecked-bgcolor: transparent;
--checkbox-unchecked-hover-bgcolor: transparent;
--checkbox-unchecked-active-bgcolor: transparent;
--checkbox-checked-border-color: transparent;
--checkbox-checked-bgcolor: transparent;
--checkbox-checked-color: transparent;
--checkbox-checked-hover-bgcolor: transparent;
--checkbox-checked-active-bgcolor: transparent;
.checkbox-check {
appearance: none;
background-position: center;
background-repeat: no-repeat;
width: 16px;
height: 16px;
border-radius: 4px;
margin-inline-end: 0px;
}
@include -make-checkbox-icon("rest");
&:not([disabled]) {
&:hover {
@include -make-checkbox-icon("hover");
}
&:hover:active {
@include -make-checkbox-icon("active");
}
}
&:disabled,
&[disabled] {
@include -make-checkbox-icon("disabled");
}
}
checkbox[native]:focus-visible {
& > .checkbox-label-box {
outline: none;
}
&:not([disabled]) {
&[label] {
@include focus-ring(false, "");
}
&:not([label]) {
& :is(.checkbox-check) {
@include focus-ring(false, "");
}
}
}
}

View file

@ -0,0 +1,70 @@
@mixin -make-radio-icon($state) {
& :is(.radio-check) {
@include focus-states using ($color) {
background-image: url('chrome://zotero/skin/win/#{$color}/radio-#{$state}.svg');
&[selected=true] {
background-image: url('chrome://zotero/skin/win/#{$color}/radio-selected-#{$state}.svg');
}
}
}
}
radio {
appearance: none;
height: 28px;
gap: 8px;
padding-inline: 4px 8px;
border-radius: 4px;
.radio-check {
appearance: none;
background-position: center;
background-repeat: no-repeat;
width: 16px;
height: 16px;
border-radius: 8px;
}
.radio-label-box {
padding-inline-start: 0;
margin-inline-start: 0;
}
@include -make-radio-icon("rest");
&:not([disabled]) {
&:hover {
@include -make-radio-icon("hover");
}
&:hover:active {
@include -make-radio-icon("active");
}
@include focus-ring;
}
&:disabled,
&[disabled] {
@include -make-radio-icon("disabled");
}
}
radiogroup:focus-visible {
& > radio[focused=true] {
& > .radio-label-box {
outline: none;
}
&[label] {
@include focus-ring(false, "");
}
&:not([label]) {
& :is(.radio-check) {
@include focus-ring(false, "");
}
}
}
}

View file

@ -17,7 +17,9 @@
// Components
@import "win/components/button";
@import "win/components/checkbox";
@import "win/components/input";
@import "win/components/menulist";
@import "win/components/menupopup";
@import "win/components/radio";
@import "win/components/tabbox";