Illegible with dark themes #3

AndydeCleyre · 2018-04-14T22:56:31Z

Using the default Firefox theme and a dark GTK theme:

moosingin3space · 2018-04-14T23:45:26Z

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:

Use the "light theme" that appears in screenshots as the "official" theme and add CSS to make those styles always apply.
Investigate if there's a way I can use Browser Styles to make it fit the dark theme. I'd also probably add light-fill icons so as to make the icons fit the theme.

I'll probably be able to get to this sometime in the middle of next week. Thanks for the feedback!

AndydeCleyre · 2018-04-16T14:04:24Z

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;
}

moosingin3space · 2018-04-16T19:26:09Z

Question: is the highlight visible when you hover? I have custom CSS (not using browser-style) for that.

AndydeCleyre · 2018-04-17T00:16:10Z

Yes, I think so: https://streamable.com/waw10

moosingin3space · 2018-04-18T19:10:16Z

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.

moosingin3space · 2018-04-24T22:05:18Z

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!

AndydeCleyre · 2018-04-26T19:14:06Z

What's the proper way to do so? I cloned, yarned, yarn builded, and tried to install from file via about:addons, but it claims "corruption"

moosingin3space added bug Something isn't working question Further information is requested labels Apr 18, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Illegible with dark themes #3

Illegible with dark themes #3

AndydeCleyre commented Apr 14, 2018

moosingin3space commented Apr 14, 2018 •

edited

Loading

AndydeCleyre commented Apr 16, 2018

moosingin3space commented Apr 16, 2018

AndydeCleyre commented Apr 17, 2018

moosingin3space commented Apr 18, 2018

moosingin3space commented Apr 24, 2018

AndydeCleyre commented Apr 26, 2018

Illegible with dark themes #3

Illegible with dark themes #3

Comments

AndydeCleyre commented Apr 14, 2018

moosingin3space commented Apr 14, 2018 • edited Loading

AndydeCleyre commented Apr 16, 2018

moosingin3space commented Apr 16, 2018

AndydeCleyre commented Apr 17, 2018

moosingin3space commented Apr 18, 2018

moosingin3space commented Apr 24, 2018

AndydeCleyre commented Apr 26, 2018

moosingin3space commented Apr 14, 2018 •

edited

Loading