Open AndydeCleyre opened 6 years ago
Curious -- my code is making use of Firefox's Browser styles stylesheet, which I would have expected to handle that case.
What is the preferred behaviour here? I see two options:
I'll probably be able to get to this sometime in the middle of next week. Thanks for the feedback!
Sorry about my quick and dirty report.
So for a more reproducible, common configuration, I created a blank profile with FF 59.0.2
, and have the "Arc Dark" GTK (2+3) themes enabled. The effect is not as bad, but these two buttons should probably be using the same colors somehow:
Maybe we need more class="browser-style"
somewhere, maybe this is a FF bug, I don't know.
If it helps, here's the current chrome://browser/content/extension.css
:
/* stylelint-disable property-no-vendor-prefix */
/* stylelint-disable property-no-vendor-prefix */
/* Global */
html,
body {
background: transparent;
box-sizing: border-box;
color: #222426;
cursor: default;
display: flex;
flex-direction: column;
font: caption;
margin: 0;
padding: 0;
-moz-user-select: none;
}
body * {
box-sizing: border-box;
text-align: start;
}
.browser-style {
-moz-appearance: none;
margin-bottom: 6px;
text-align: left;
}
/* stylelint-disable property-no-vendor-prefix */
/* Buttons */
button.browser-style,
select.browser-style {
background-color: #fbfbfb;
border: 1px solid #b1b1b1;
box-shadow: 0 0 0 0 transparent;
font: caption;
height: 24px;
outline: 0 !important;
padding: 0 8px 0;
transition-duration: 250ms;
transition-property: box-shadow, border;
}
select.browser-style {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNOCwxMkwzLDcsNCw2bDQsNCw0LTQsMSwxWiIgZmlsbD0iIzZBNkE2QSIgLz4KPC9zdmc+Cg==);
background-position: calc(100% - 4px) center;
background-repeat: no-repeat;
padding-inline-end: 24px;
text-overflow: ellipsis;
}
label.browser-style-label {
font: caption;
}
button.browser-style::-moz-focus-inner {
border: 0;
outline: 0;
}
/* Dropdowns */
select.browser-style {
background-color: #fbfbfb;
border: 1px solid #b1b1b1;
box-shadow: 0 0 0 0 transparent;
font: caption;
height: 24px;
outline: 0 !important;
padding: 0 8px 0;
transition-duration: 250ms;
transition-property: box-shadow, border;
}
select.browser-style {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNOCwxMkwzLDcsNCw2bDQsNCw0LTQsMSwxWiIgZmlsbD0iIzZBNkE2QSIgLz4KPC9zdmc+Cg==);
background-position: calc(100% - 4px) center;
background-repeat: no-repeat;
padding-inline-end: 24px;
text-overflow: ellipsis;
}
select.browser-style:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
select.browser-style:-moz-focusring * {
color: #000;
text-shadow: none;
}
button.browser-style.hover,
select.browser-style.hover {
background-color: #ebebeb;
border: 1px solid #b1b1b1;
}
button.browser-style.pressed,
select.browser-style.pressed {
background-color: #d4d4d4;
border: 1px solid #858585;
}
button.browser-style.disabled,
select.browser-style.disabled {
color: #999;
opacity: .5;
}
button.browser-style.focused,
select.browser-style.focused {
border-color: #fff;
box-shadow: 0 0 0 2px rgba(97, 181, 255, 0.75);
}
button.browser-style.default {
background-color: #0996f8;
border-color: #0670cc;
color: #fff;
}
button.browser-style.default.hover {
background-color: #0670cc;
border-color: #005bab;
}
button.browser-style.default.pressed {
background-color: #005bab;
border-color: #004480;
}
button.browser-style.default.focused {
border-color: #fff;
}
/* Radio Buttons */
.browser-style > input[type="radio"] {
display: none;
}
.browser-style > input[type="radio"] + label {
-moz-user-select: none;
}
.browser-style > input[type="radio"] + label::before {
background-color: #fff;
background-position: center;
border: 1px solid #b1b1b1;
border-radius: 50%;
content: "";
display: inline-block;
height: 16px;
margin-right: 6px;
vertical-align: text-top;
width: 16px;
}
.browser-style > input[type="radio"]:hover + label::before,
.browser-style.hover > input[type="radio"]:not(active) + label::before {
background-color: #fbfbfb;
border-color: #b1b1b1;
}
.browser-style > input[type="radio"]:hover:active + label::before,
.browser-style.pressed > input[type="radio"]:not(active) + label::before {
background-color: #ebebeb;
border-color: #858585;
}
.browser-style > input[type="radio"]:checked + label::before {
background-color: #0996f8;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8Y2lyY2xlIGN4PSI4IiBjeT0iOCIgcj0iNCIgZmlsbD0iI2ZmZiIgLz4KPC9zdmc+Cg==);
border-color: #0670cc;
}
.browser-style > input[type="radio"]:checked:hover + label::before,
.browser-style.hover > input[type="radio"]:checked:not(active) + label::before {
background-color: #0670cc;
border-color: #005bab;
}
.browser-style > input[type="radio"]:checked:hover:active + label::before,
.browser-style.pressed > input[type="radio"]:checked:not(active) + label::before {
background-color: #005bab;
border-color: #004480;
}
.browser-style.disabled > input[type="radio"] + label,
.browser-style.disabled > input[type="radio"]:hover + label,
.browser-style.disabled > input[type="radio"]:hover:active + label {
color: #999;
opacity: .5;
}
.browser-style.focused > input[type="radio"] + label::before {
border-color: #0996f8;
box-shadow: 0 0 0 2px rgba(97, 181, 255, 0.75);
}
.browser-style.focused > input[type="radio"]:checked + label::before {
border-color: #fff;
}
/* Checkboxes */
.browser-style > input[type="checkbox"] {
display: none;
}
.browser-style > input[type="checkbox"] + label {
-moz-user-select: none;
}
.browser-style > input[type="checkbox"] + label::before {
background-color: #fff;
background-position: center;
border: 1px solid #b1b1b1;
content: "";
display: inline-block;
height: 16px;
margin-right: 6px;
vertical-align: text-top;
width: 16px;
}
.browser-style > input[type="checkbox"]:hover + label::before,
.browser-style.hover > input[type="checkbox"]:not(active) + label::before {
background-color: #fbfbfb;
border-color: #b1b1b1;
}
.browser-style > input[type="checkbox"]:hover:active + label::before,
.browser-style.pressed > input[type="checkbox"]:not(active) + label::before {
background-color: #ebebeb;
border-color: #858585;
}
.browser-style > input[type="checkbox"]:checked + label::before {
background-color: #0996f8;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNNy43LDEyLjkgQzcuNCwxMy4zIDYuOCwxMy40IDYuNCwxMyBMMy4yLDkuOCBDMi44LDkuNCAyLjgsOC42IDMuMiw4LjIgQzMuNiw3LjggNC40LDcuOCA0LjgsOC4yIEw2LjksMTAuMyBMMTEuMSw0LjQgQzExLjUsMy45IDEyLjIsMy44IDEyLjcsNC4xIEMxMy4yLDQuNSAxMy4zLDUuMiAxMyw1LjcgTDcuNywxMi45IEw3LjcsMTIuOSBaIiBmaWxsPSIjZmZmIiAvPgo8L3N2Zz4K);
border-color: #0670cc;
}
.browser-style > input[type="checkbox"]:checked:hover + label::before,
.browser-style.hover > input[type="checkbox"]:checked:not(active) + label::before {
background-color: #0670cc;
border-color: #005bab;
}
.browser-style > input[type="checkbox"]:checked:hover:active + label::before,
.browser-style.pressed > input[type="checkbox"]:checked:not(active) + label::before {
background-color: #005bab;
border-color: #004480;
}
.browser-style.disabled > input[type="checkbox"] + label,
.browser-style.disabled > input[type="checkbox"]:hover + label,
.browser-style.disabled > input[type="checkbox"]:hover:active + label {
color: #999;
opacity: .5;
}
.browser-style.focused > input[type="checkbox"] + label::before {
border-color: #0996f8;
box-shadow: 0 0 0 2px rgba(97, 181, 255, 0.75);
}
.browser-style.focused > input[type="checkbox"]:checked + label::before {
border-color: #fff;
}
/* Expander Button */
button.browser-style.expander {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNOCwxMkwzLDcsNCw2bDQsNCw0LTQsMSwxWiIgZmlsbD0iIzZBNkE2QSIgLz4KPC9zdmc+Cg==);
background-position: center;
background-repeat: no-repeat;
height: 24px;
padding: 0;
width: 24px;
}
/* Interactive States */
button.browser-style:hover:not(.pressed):not(.disabled):not(.focused),
select.browser-style:hover:not(.pressed):not(.disabled):not(.focused) {
background-color: #ebebeb;
border: 1px solid #b1b1b1;
}
button.browser-style:hover:active:not(.hover):not(.disabled):not(.focused),
select.browser-style:hover:active:not(.hover):not(.disabled):not(.focused) {
background-color: #d4d4d4;
border: 1px solid #858585;
}
button.browser-style.default:hover:not(.pressed):not(.disabled):not(.focused) {
background-color: #0670cc;
border-color: #005bab;
}
button.browser-style.default:hover:active:not(.hover):not(.disabled):not(.focused) {
background-color: #005bab;
border-color: #004480;
}
button.browser-style:focus:not(.disabled) {
border-color: #fff !important;
box-shadow: 0 0 0 2px rgba(97, 181, 255, 0.75);
}
/* Fields */
.browser-style > input[type="text"],
textarea.browser-style {
background-color: #fff;
border: 1px solid #b1b1b1;
box-shadow: 0 0 0 0 rgba(97, 181, 255, 0);
font: caption;
padding: 0 6px 0;
transition-duration: 250ms;
transition-property: box-shadow;
}
.browser-style > input[type="text"] {
height: 24px;
}
.browser-style > input[type="text"].hover,
textarea.browser-style.hover {
border: 1px solid #858585;
}
.browser-style > input[type="text"].disabled,
textarea.browser-style.disabled {
color: #999;
opacity: .5;
}
.browser-style > input[type="text"].focused,
textarea.browser-style.focused {
border-color: #0996f8;
box-shadow: 0 0 0 2px rgba(97, 181, 255, 0.75);
}
/* Interactive States */
.browser-style > input[type="text"]:not(disabled):hover,
textarea.browser-style:not(disabled):hover {
border: 1px solid #858585;
}
.browser-style > input[type="text"]:focus,
.browser-style > input[type="text"]:focus:hover,
textarea.browser-style:focus,
textarea.browser-style:focus:hover {
border-color: #0996f8;
box-shadow: 0 0 0 2px rgba(97, 181, 255, 0.75);
}
/* stylelint-disable property-no-vendor-prefix */
.panel-section {
display: flex;
flex-direction: row;
}
.panel-section-separator {
background-color: rgba(0, 0, 0, 0.15);
min-height: 1px;
}
/* Panel Section - Header */
.panel-section-header {
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
padding: 16px;
}
.panel-section-header > .icon-section-header {
background-position: center center;
background-repeat: no-repeat;
height: 32px;
margin-right: 16px;
position: relative;
width: 32px;
}
.panel-section-header > .text-section-header {
align-self: center;
font-size: 1.385em;
font-weight: lighter;
}
/* Panel Section - List */
.panel-section-list {
flex-direction: column;
padding: 4px 0;
}
.panel-list-item {
align-items: center;
display: flex;
flex-direction: row;
height: 24px;
padding: 0 16px;
}
.panel-list-item:not(.disabled):hover {
background-color: rgba(0, 0, 0, 0.06);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.panel-list-item:not(.disabled):hover:active {
background-color: rgba(0, 0, 0, 0.1);
}
.panel-list-item.disabled {
color: #999;
}
.panel-list-item > .icon {
flex-grow: 0;
flex-shrink: 0;
}
.panel-list-item > .text {
flex-grow: 10;
}
.panel-list-item > .text-shortcut {
color: #808080;
font-family: "Lucida Grande", caption;
font-size: .847em;
justify-content: flex-end;
}
.panel-section-list .panel-section-separator {
margin: 4px 0;
}
/* Panel Section - Form Elements */
.panel-section-formElements {
display: flex;
flex-direction: column;
padding: 16px;
}
.panel-formElements-item {
align-items: center;
display: flex;
flex-direction: row;
margin-bottom: 12px;
}
.panel-formElements-item:last-child {
margin-bottom: 0;
}
.panel-formElements-item label {
flex-shrink: 0;
margin-right: 6px;
text-align: right;
}
.panel-formElements-item input[type="text"],
.panel-formElements-item select.browser-style {
flex-grow: 1;
}
/* Panel Section - Footer */
.panel-section-footer {
background-color: rgba(0, 0, 0, 0.06);
border-top: 1px solid rgba(0, 0, 0, 0.15);
color: #1a1a1a;
display: flex;
flex-direction: row;
height: 41px;
margin-top: -1px;
padding: 0;
}
.panel-section-footer-button {
flex: 1 1 auto;
height: 100%;
margin: 0 -1px;
padding: 12px;
text-align: center;
}
.panel-section-footer-button > .text-shortcut {
color: #808080;
font-family: "Lucida Grande", caption;
font-size: .847em;
}
.panel-section-footer-button:hover {
background-color: rgba(0, 0, 0, 0.06);
}
.panel-section-footer-button:hover:active {
background-color: rgba(0, 0, 0, 0.1);
}
.panel-section-footer-button.default {
background-color: #0996f8;
box-shadow: 0 1px 0 #0670cc inset;
color: #fff;
}
.panel-section-footer-button.default:hover {
background-color: #0670cc;
box-shadow: 0 1px 0 #005bab inset;
}
.panel-section-footer-button.default:hover:active {
background-color: #005bab;
box-shadow: 0 1px 0 #004480 inset;
}
.panel-section-footer-separator {
background-color: rgba(0, 0, 0, 0.1);
width: 1px;
z-index: 99;
}
/* Panel Section - Tabs */
.panel-section-tabs {
color: #1a1a1a;
display: flex;
flex-direction: row;
height: 41px;
margin-bottom: -1px;
padding: 0;
}
.panel-section-tabs-button {
flex: 1 1 auto;
height: 100%;
margin: 0 -1px;
padding: 12px;
text-align: center;
}
.panel-section-tabs-button:hover {
background-color: rgba(0, 0, 0, 0.06);
}
.panel-section-tabs-button:hover:active {
background-color: rgba(0, 0, 0, 0.1);
}
.panel-section-tabs-button.select.browser-styleed {
box-shadow: 0 -1px 0 #0670cc inset, 0 -4px 0 #0996f8 inset;
color: #0996f8;
}
.panel-section-tabs-button.select.browser-styleed:hover {
color: #0670cc;
}
.panel-section-tabs-separator {
background-color: rgba(0, 0, 0, 0.1);
width: 1px;
z-index: 99;
}
Question: is the highlight visible when you hover? I have custom CSS (not using browser-style
) for that.
Yes, I think so: https://streamable.com/waw10
I was just on IRC, and this stretch of messages suggests that this may not be feasible to solve with browser-style
. In this case, I think Option 1 from the above message is probably the route I will take to make this extension usable in the case of dark GTK theme. Somewhat less than ideal, unfortunately.
Can you please test the current extension from Git master
on your end? I've introduced some CSS that should make it legible. Thank you!
What's the proper way to do so? I cloned, yarn
ed, yarn build
ed, and tried to install from file via about:addons
, but it claims "corruption"
Using the default Firefox theme and a dark GTK theme: