Skip to content

Commit

Permalink
Style improvements (#757)
Browse files Browse the repository at this point in the history 
* Replace colors with existing CSS variables

* Extract code-blocks CSS to a separate file

* Fix the “forward message” icon in dark mode

* Fix message composer icons in light full-vibrancy

* Revert "Fix #173 (#174)"

This reverts commit 67f2353.

This CSS rule is no longer needed.

* Remove unused CSS rules

* Improve contrast on contact name links

* Revert “Vertically align “conversation info” buttons.”

Messenger fixed this on their side. Our fix has now the opposite effect.

* Remove an overreaching CSS rule

* Fix “search in conversation” in dark mode

* Improve the text color in “Delete message” popup

* Improve “Message Reactions” popup in dark mode

* Improve code blocks

* Tweak deleted messages

* Tweak link previews

* Tweak attached files

* Tweak chat bot menu

* Fix variation in brightness of message composer icons
  • Loading branch information
@CvX @sindresorhus
CvX authored and sindresorhus committed Feb 4, 2019
1 parent 50590a7 commit 93d0a1b
Show file tree
Hide file tree
Showing 5 changed files with 232 additions and 173 deletions.
123 changes: 7 additions & 116 deletions css/browser.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,11 +50,6 @@ body {
-webkit-user-drag: none;
}

/* Vertically align `Conversation Info` buttons */
._fl2 ._30yy {
vertical-align: middle;
}

/* Window wrapper */
._4sp8 {
min-width: 0 !important;
Expand Down Expand Up @@ -227,117 +222,6 @@ a,
height: 280px;
}

/* Tomorrow light theme for code blocks */
._wu0 {
--code-block-base: #1d1f21;
--code-block-background: #fff;
--code-block-border: #b9b9b9;
--code-block-primary: #de935f;
--code-block-meta: #969896;
--code-block-tag: #a3685a;
--code-block-quoted: #b5bd68;
--code-block-variable: #c66;
--code-block-special: #8abeb7;
--code-block-attr-value: #139543;
--code-block-keyword: #b294bb;
--code-block-function: #81a2be;
background-color: var(--code-block-background) !important;
border: 1px solid var(--code-block-border) !important;
color: var(--code-block-base) !important;
}
._wu0 .token.punctuation {
color: var(--code-block-base) !important;
}
._wu0 .token.property {
color: var(--code-block-base) !important;
}
._wu0 .token.operator {
color: var(--code-block-base) !important;
}
._wu0 .token.boolean {
color: var(--code-block-primary) !important;
}
._wu0 .token.number {
color: var(--code-block-primary) !important;
}
._wu0 .token.constant {
color: var(--code-block-primary) !important;
}
._wu0 .token.selector {
color: var(--code-block-primary) !important;
}
._wu0 .token.bold {
color: var(--code-block-primary) !important;
font-weight: bold;
}
._wu0 .token.comment {
color: var(--code-block-meta) !important;
}
._wu0 .token.prolog {
color: var(--code-block-meta) !important;
}
._wu0 .token.doctype {
color: var(--code-block-meta) !important;
}
._wu0 .token.cdata {
color: var(--code-block-meta) !important;
}
._wu0 .token.tag {
color: var(--code-block-tag) !important;
}
._wu0 .token.symbol {
color: var(--code-block-quoted) !important;
}
._wu0 .token.string {
color: var(--code-block-quoted) !important;
}
._wu0 .token.char {
color: var(--code-block-quoted) !important;
}
._wu0 .token.inserted {
color: var(--code-block-quoted) !important;
}
._wu0 .token.attr-name {
color: var(--code-block-variable) !important;
}
._wu0 .token.url {
color: var(--code-block-variable) !important;
}
._wu0 .token.entity {
color: var(--code-block-variable) !important;
}
._wu0 .token.variable {
color: var(--code-block-variable) !important;
}
._wu0 .token.deleted {
color: var(--code-block-variable) !important;
}
._wu0 .token.builtin {
color: var(--code-block-special) !important;
}
._wu0 .token.hexcode {
color: var(--code-block-special) !important;
}
._wu0 .token.regex {
color: var(--code-block-special) !important;
}
._wu0 .token.attr-value {
color: var(--code-block-attr-value) !important;
}
._wu0 .token.keyword {
color: var(--code-block-keyword) !important;
}
._wu0 .token.important {
color: var(--code-block-keyword) !important;
}
._wu0 .token.italic {
color: var(--code-block-keyword) !important;
font-style: italic;
}
._wu0 .token.function {
color: var(--code-block-function) !important;
}

/* Hide hidden accessibility elements so they're not included in copy-pasting of chat logs */
.accessible_elem {
display: none !important;
Expand Down Expand Up @@ -399,3 +283,10 @@ a,
.fbPageBanner {
display: none !important;
}

/* Message composer buttons */
a._4rv6, /* "Choose a sticker" */
a._4ce_ { /* "Play a game" */
opacity: 1 !important;
filter: invert(0.66);
}
126 changes: 126 additions & 0 deletions css/code-blocks.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
/* Tomorrow light theme for code blocks */
._wu0 {
--code-block-base: #1d1f21;
--code-block-background: transparent;
--code-block-border: rgba(0, 0, 0, .1);
--code-block-primary: #de935f;
--code-block-meta: #969896;
--code-block-tag: #a3685a;
--code-block-quoted: #b5bd68;
--code-block-variable: #c66;
--code-block-special: #8abeb7;
--code-block-attr-value: #139543;
--code-block-keyword: #b294bb;
--code-block-function: #81a2be;
background-color: var(--code-block-background) !important;
border: 1px solid var(--code-block-border) !important;
color: var(--code-block-base) !important;
}
._wu0 .token.punctuation {
color: var(--code-block-base) !important;
}
._wu0 .token.property {
color: var(--code-block-base) !important;
}
._wu0 .token.operator {
color: var(--code-block-base) !important;
}
._wu0 .token.boolean {
color: var(--code-block-primary) !important;
}
._wu0 .token.number {
color: var(--code-block-primary) !important;
}
._wu0 .token.constant {
color: var(--code-block-primary) !important;
}
._wu0 .token.selector {
color: var(--code-block-primary) !important;
}
._wu0 .token.bold {
color: var(--code-block-primary) !important;
font-weight: bold;
}
._wu0 .token.comment {
color: var(--code-block-meta) !important;
}
._wu0 .token.prolog {
color: var(--code-block-meta) !important;
}
._wu0 .token.doctype {
color: var(--code-block-meta) !important;
}
._wu0 .token.cdata {
color: var(--code-block-meta) !important;
}
._wu0 .token.tag {
color: var(--code-block-tag) !important;
}
._wu0 .token.symbol {
color: var(--code-block-quoted) !important;
}
._wu0 .token.string {
color: var(--code-block-quoted) !important;
}
._wu0 .token.char {
color: var(--code-block-quoted) !important;
}
._wu0 .token.inserted {
color: var(--code-block-quoted) !important;
}
._wu0 .token.attr-name {
color: var(--code-block-variable) !important;
}
._wu0 .token.url {
color: var(--code-block-variable) !important;
}
._wu0 .token.entity {
color: var(--code-block-variable) !important;
}
._wu0 .token.variable {
color: var(--code-block-variable) !important;
}
._wu0 .token.deleted {
color: var(--code-block-variable) !important;
}
._wu0 .token.builtin {
color: var(--code-block-special) !important;
}
._wu0 .token.hexcode {
color: var(--code-block-special) !important;
}
._wu0 .token.regex {
color: var(--code-block-special) !important;
}
._wu0 .token.attr-value {
color: var(--code-block-attr-value) !important;
}
._wu0 .token.keyword {
color: var(--code-block-keyword) !important;
}
._wu0 .token.important {
color: var(--code-block-keyword) !important;
}
._wu0 .token.italic {
color: var(--code-block-keyword) !important;
font-style: italic;
}
._wu0 .token.function {
color: var(--code-block-function) !important;
}

/* Tomorrow dark theme for code blocks */
html.dark-mode ._wu0 {
color: var(--base);
--code-block-base: #c5c8c6;
--code-block-border: var(--base-ten);
}

/* Full-window vibrancy */
html.full-vibrancy ._wu0 {
--code-block-background: #fff;
--code-block-border: transparent;
}
html.full-vibrancy.dark-mode ._wu0 {
--code-block-background: var(--container-color);
}
Loading

0 comments on commit 93d0a1b

Please sign in to comment.