Add: Download Popup - Proton like Radio button

This commit is contained in:
alstjr7375 2021-09-24 17:24:44 +09:00
parent 48f4d33d75
commit 137eb4f9ab

View file

@ -568,6 +568,7 @@
background-color: var(--in-content-page-background) !important;
}
/*- Button ---------------------------------------------------------------*/
button {
-moz-appearance: none !important;
color: var(--in-content-button-text-color) !important;
@ -662,6 +663,74 @@
color: var(--in-content-primary-button-text-color) !important;
}
}
/*- Radio Button ---------------------------------------------------------*/
xul|radio {
margin-inline-start: 0 !important;
appearance: none !important;
}
xul|*.radio-check {
appearance: none !important;
width: 16px !important;
height: 16px !important;
padding: 0 !important;
border: 1px solid var(--in-content-box-border-color) !important;
border-radius: 100% !important;
margin-block: 2px !important; /* extend the vertical clicktarget */
margin-inline: 0 6px !important;
background-color: var(--in-content-button-background) !important;
background-position: center !important;
flex-shrink: 0 !important; /* avoid shrinking inside flex container */
}
xul|radio:not([disabled="true"]):hover > xul|*.radio-check {
background-color: var(--in-content-button-background-hover) !important;
color: var(--in-content-button-text-color-hover) !important;
}
xul|radio:not([disabled="true"]):hover:active > xul|*.radio-check {
background-color: var(--in-content-button-background-active) !important;
}
xul|*.radio-check[selected] {
-moz-context-properties: fill !important;
fill: currentColor !important;
color: var(--in-content-primary-button-text-color) !important;
background-color: var(--in-content-primary-button-background) !important;
background-image: url("chrome://global/skin/icons/radio.svg") !important;
border-color: transparent !important;
/* Style the button also when printing with "Print Backgrounds" unchecked */
color-adjust: exact !important;
}
xul|radio:not([disabled="true"])[selected]:hover > xul|*.radio-check {
background-color: var(--in-content-primary-button-background-hover) !important;
color: var(--in-content-primary-button-text-color-hover) !important;
}
xul|radio:not([disabled="true"])[selected]:hover:active > xul|*.radio-check {
background-color: var(--in-content-primary-button-background-active) !important;
}
xul|*.radio-label-box {
margin-inline: 0 8px !important;
padding-inline-start: 0 !important;
}
/* Disabled checkboxes, radios and labels */
xul|checkbox[disabled="true"],
xul|radio[disabled="true"],
xul|label[disabled="true"] {
color: inherit !important;
}
xul|checkbox[disabled="true"],
xul|radio[disabled="true"],
xul|label[disabled="true"] {
opacity: 0.5 !important;
}
}
/** Decoration **************************************************************/