From 121ae6605fc73a49f287b7dde445863bd756798b Mon Sep 17 00:00:00 2001
From: Raymond Wang <me@waymondrang.com>
Date: Sun, 4 Dec 2022 10:18:48 -0800
Subject: [PATCH 1/7] fix assignee comment box

---
 src/chrome/docs.css | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/chrome/docs.css b/src/chrome/docs.css
index 96fb86f..0178191 100644
--- a/src/chrome/docs.css
+++ b/src/chrome/docs.css
@@ -98,7 +98,9 @@ textarea,
 .docos-ssd-radio-button-group .jfk-radiobutton-label label,
 .docos-stream-emoji-content .docos-stream-emoji-reply-author .docos-author,
 #docs-embeddedcontentpastedialog-title,
-.docs-embeddedcontentpastedialog-label {
+.docs-embeddedcontentpastedialog-label,
+.docs-gm .docos-assigneeview.docos-assignee-other,
+.docs-gm .docos-anchoredreplyview-header .docos-anchoredreplyview-author {
   color: var(--primary-text-color);
 }
 
@@ -181,7 +183,6 @@ svg.kix-dropdown-item-selection-button-icon {
 .navigation-widget-header,
 .i5S8cc,
 .meet-video-promo-bubble-description,
-.docs-gm .docos-anchoredreplyview-header .docos-anchoredreplyview-author,
 .docs-gm .docos-anchoredreplyview .docos-anchoredreplyview-body>*>*,
 .docos-streamdocoview-body>*>*,
 .docs-gm .docos-anchoreddocoview .docos-input-at-reply-message,
@@ -272,7 +273,8 @@ svg.kix-configure-dropdown-button-add-icon {
 .docs-gm .docos-streamrootreplyview .docos-action-text,
 .docs-gm .docos-streamreplyview .docos-action-text,
 .docos-streamdocoview-timestamp,
-.docos-streamdocoview-comments-off {
+.docos-streamdocoview-comments-off,
+.docs-gm .docos-anchoredreplyview .docos-action-text {
   color: var(--tertiary-text-color);
 }
 
@@ -516,7 +518,8 @@ body,
 .smart-canvas-date-details-icon-button:hover,
 .smart-canvas-date-details-icon-button:focus,
 .smart-canvas-date-details-bubble-pattern-picker-button:hover,
-.smart-canvas-date-details-bubble-pattern-picker-button:focus {
+.smart-canvas-date-details-bubble-pattern-picker-button:focus,
+.docs-gm .docos-assigneeview.docos-assignee-other {
   background-color: var(--hover-background-color) !important;
 }
 
@@ -804,7 +807,8 @@ body,
 .docs-emoji-picker-categories,
 .apps-shortcutshelpcontentimpl-header,
 .apps-actiondatawidget-content-element,
-.docs-gm .docs-tiled-sidebar-header {
+.docs-gm .docs-tiled-sidebar-header,
+.docs-gm .docos-assigneeview {
   border-bottom: 1px solid var(--primary-border-color) !important;
 }
 

From aa9c6b9d2eff4109424a90e237a009931a1e6a5f Mon Sep 17 00:00:00 2001
From: Raymond Wang <me@waymondrang.com>
Date: Sun, 4 Dec 2022 10:22:56 -0800
Subject: [PATCH 2/7] directory sync

---
 src/firefox/docs.css | 14 +++++++++-----
 src/opera/docs.css   | 14 +++++++++-----
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/firefox/docs.css b/src/firefox/docs.css
index 96fb86f..0178191 100644
--- a/src/firefox/docs.css
+++ b/src/firefox/docs.css
@@ -98,7 +98,9 @@ textarea,
 .docos-ssd-radio-button-group .jfk-radiobutton-label label,
 .docos-stream-emoji-content .docos-stream-emoji-reply-author .docos-author,
 #docs-embeddedcontentpastedialog-title,
-.docs-embeddedcontentpastedialog-label {
+.docs-embeddedcontentpastedialog-label,
+.docs-gm .docos-assigneeview.docos-assignee-other,
+.docs-gm .docos-anchoredreplyview-header .docos-anchoredreplyview-author {
   color: var(--primary-text-color);
 }
 
@@ -181,7 +183,6 @@ svg.kix-dropdown-item-selection-button-icon {
 .navigation-widget-header,
 .i5S8cc,
 .meet-video-promo-bubble-description,
-.docs-gm .docos-anchoredreplyview-header .docos-anchoredreplyview-author,
 .docs-gm .docos-anchoredreplyview .docos-anchoredreplyview-body>*>*,
 .docos-streamdocoview-body>*>*,
 .docs-gm .docos-anchoreddocoview .docos-input-at-reply-message,
@@ -272,7 +273,8 @@ svg.kix-configure-dropdown-button-add-icon {
 .docs-gm .docos-streamrootreplyview .docos-action-text,
 .docs-gm .docos-streamreplyview .docos-action-text,
 .docos-streamdocoview-timestamp,
-.docos-streamdocoview-comments-off {
+.docos-streamdocoview-comments-off,
+.docs-gm .docos-anchoredreplyview .docos-action-text {
   color: var(--tertiary-text-color);
 }
 
@@ -516,7 +518,8 @@ body,
 .smart-canvas-date-details-icon-button:hover,
 .smart-canvas-date-details-icon-button:focus,
 .smart-canvas-date-details-bubble-pattern-picker-button:hover,
-.smart-canvas-date-details-bubble-pattern-picker-button:focus {
+.smart-canvas-date-details-bubble-pattern-picker-button:focus,
+.docs-gm .docos-assigneeview.docos-assignee-other {
   background-color: var(--hover-background-color) !important;
 }
 
@@ -804,7 +807,8 @@ body,
 .docs-emoji-picker-categories,
 .apps-shortcutshelpcontentimpl-header,
 .apps-actiondatawidget-content-element,
-.docs-gm .docs-tiled-sidebar-header {
+.docs-gm .docs-tiled-sidebar-header,
+.docs-gm .docos-assigneeview {
   border-bottom: 1px solid var(--primary-border-color) !important;
 }
 
diff --git a/src/opera/docs.css b/src/opera/docs.css
index 96fb86f..0178191 100644
--- a/src/opera/docs.css
+++ b/src/opera/docs.css
@@ -98,7 +98,9 @@ textarea,
 .docos-ssd-radio-button-group .jfk-radiobutton-label label,
 .docos-stream-emoji-content .docos-stream-emoji-reply-author .docos-author,
 #docs-embeddedcontentpastedialog-title,
-.docs-embeddedcontentpastedialog-label {
+.docs-embeddedcontentpastedialog-label,
+.docs-gm .docos-assigneeview.docos-assignee-other,
+.docs-gm .docos-anchoredreplyview-header .docos-anchoredreplyview-author {
   color: var(--primary-text-color);
 }
 
@@ -181,7 +183,6 @@ svg.kix-dropdown-item-selection-button-icon {
 .navigation-widget-header,
 .i5S8cc,
 .meet-video-promo-bubble-description,
-.docs-gm .docos-anchoredreplyview-header .docos-anchoredreplyview-author,
 .docs-gm .docos-anchoredreplyview .docos-anchoredreplyview-body>*>*,
 .docos-streamdocoview-body>*>*,
 .docs-gm .docos-anchoreddocoview .docos-input-at-reply-message,
@@ -272,7 +273,8 @@ svg.kix-configure-dropdown-button-add-icon {
 .docs-gm .docos-streamrootreplyview .docos-action-text,
 .docs-gm .docos-streamreplyview .docos-action-text,
 .docos-streamdocoview-timestamp,
-.docos-streamdocoview-comments-off {
+.docos-streamdocoview-comments-off,
+.docs-gm .docos-anchoredreplyview .docos-action-text {
   color: var(--tertiary-text-color);
 }
 
@@ -516,7 +518,8 @@ body,
 .smart-canvas-date-details-icon-button:hover,
 .smart-canvas-date-details-icon-button:focus,
 .smart-canvas-date-details-bubble-pattern-picker-button:hover,
-.smart-canvas-date-details-bubble-pattern-picker-button:focus {
+.smart-canvas-date-details-bubble-pattern-picker-button:focus,
+.docs-gm .docos-assigneeview.docos-assignee-other {
   background-color: var(--hover-background-color) !important;
 }
 
@@ -804,7 +807,8 @@ body,
 .docs-emoji-picker-categories,
 .apps-shortcutshelpcontentimpl-header,
 .apps-actiondatawidget-content-element,
-.docs-gm .docs-tiled-sidebar-header {
+.docs-gm .docs-tiled-sidebar-header,
+.docs-gm .docos-assigneeview {
   border-bottom: 1px solid var(--primary-border-color) !important;
 }
 

From 93699102e4cb763edab1ade64ef7099edb352636 Mon Sep 17 00:00:00 2001
From: Raymond Wang <me@waymondrang.com>
Date: Sun, 4 Dec 2022 10:39:24 -0800
Subject: [PATCH 3/7] fix dictionary sidebar

---
 src/chrome/docs.css | 53 +++++++++++++++++++++++++++++++++++----------
 1 file changed, 41 insertions(+), 12 deletions(-)

diff --git a/src/chrome/docs.css b/src/chrome/docs.css
index 0178191..8812f9c 100644
--- a/src/chrome/docs.css
+++ b/src/chrome/docs.css
@@ -100,7 +100,10 @@ textarea,
 #docs-embeddedcontentpastedialog-title,
 .docs-embeddedcontentpastedialog-label,
 .docs-gm .docos-assigneeview.docos-assignee-other,
-.docs-gm .docos-anchoredreplyview-header .docos-anchoredreplyview-author {
+.docs-gm .docos-anchoredreplyview-header .docos-anchoredreplyview-author,
+.docs-gm .docs-dictionary-titlebar,
+.docs-gm .docs-explore-dictionaryentry-title,
+.docs-gm .docs-explore-dictionaryentries {
   color: var(--primary-text-color);
 }
 
@@ -274,7 +277,11 @@ svg.kix-configure-dropdown-button-add-icon {
 .docs-gm .docos-streamreplyview .docos-action-text,
 .docos-streamdocoview-timestamp,
 .docos-streamdocoview-comments-off,
-.docs-gm .docos-anchoredreplyview .docos-action-text {
+.docs-gm .docos-anchoredreplyview .docos-action-text,
+.docs-gm .docs-explore-emptylist-body,
+.docs-explore-dictionaryentry-sensefamily-morphunits,
+.docs-explore-dictionaryentry-sense-synonym-prefix,
+.docs-explore-dictionaryentry-sense-antonym-prefix {
   color: var(--tertiary-text-color);
 }
 
@@ -366,7 +373,9 @@ body,
 .docs-gm .docs-sidebar-tile-controls,
 .kix-documentmetrics-widget,
 .docs-docos-activitybox,
-.docs-gm .docos-streampane-header {
+.docs-gm .docos-streampane-header,
+.docs-gm .docs-dictionary-titlebar,
+.docs-dictionary-sidebar {
   background-color: var(--secondary-background-color) !important;
 }
 
@@ -438,7 +447,9 @@ body,
 .docos-search-button .docs-material-button-active.docs-material-button-flat-default,
 .docos-subscription-settings-button .docs-material-button-hover.docs-material-button-flat-default,
 .docos-subscription-settings-button .docs-material-button-focused.docs-material-button-flat-default,
-.docos-subscription-settings-button .docs-material-button-active.docs-material-button-flat-default {
+.docos-subscription-settings-button .docs-material-button-active.docs-material-button-flat-default,
+.docs-explore-searchbar-labelinput:focus,
+.docs-sidebar-gm-titlebar-icon-button:focus {
   /* although not hover elements, some elements may use the
     hover-background-color to differentiate themselves from the
     secondary-background-color */
@@ -555,7 +566,8 @@ body,
 .docos-xeditor .docos-docoview-resolved.docos-docoview-active.docos-streamdocoview .docos-streamdocoview-header-container,
 .docs-gm.docos-xeditor .docos-input-typing>.docos-input-textarea,
 .docs-gm .docs-docos-activity-sidebar .docos-input-typing>.docos-input-textarea,
-.docos-streamdocoview-input-pane .docos-input-textarea {
+.docos-streamdocoview-input-pane .docos-input-textarea,
+.docs-explore-searchbar-labelinput {
   background-color: var(--input-background-color) !important;
 }
 
@@ -741,7 +753,8 @@ body,
 .companion-app-switcher-container,
 .docs-gm .goog-toolbar-separator.goog-inline-block,
 .docs-slidingdialog,
-.docs-gm .docs-revisions-sidebar {
+.docs-gm .docs-revisions-sidebar,
+.docs-gm .docs-dictionary-sidebar {
   border-left: 1px solid var(--primary-border-color) !important;
 }
 
@@ -788,7 +801,8 @@ body,
 .docs-gm .docos-showrepliesbutton,
 .docs-gm .docos-anchoreddocoview-input-pane,
 .docs-gm .docs-sidebar-tile.docs-sidebar-tile-expanded,
-.smart-canvas-date-details-bubble-action-bar {
+.smart-canvas-date-details-bubble-action-bar,
+.docs-gm .docs-dictionary-titlebar {
   border-top: 1px solid var(--primary-border-color);
 }
 
@@ -812,7 +826,10 @@ body,
   border-bottom: 1px solid var(--primary-border-color) !important;
 }
 
-.docs-number-input-container input {
+.docs-number-input-container input,
+.docs-gm .docs-dictionary-titlebar,
+.docs-explore-searchbar-labelinput,
+.docs-explore-searchbar-labelinput:focus {
   border-bottom: 1px solid var(--primary-border-color);
 }
 
@@ -893,7 +910,11 @@ img.kix-smart-summary-onboarding-promo-content-illustration,
 
 .kix-page-paginated .kix-stacked-tile-page-shadow,
 canvas.kix-canvas-tile-content {
-  border-radius: 0em !important;
+  border-radius: 0px !important;
+}
+
+.jfk-textinput {
+  border-radius: 0px;
 }
 
 /* box shadows */
@@ -973,7 +994,8 @@ canvas.kix-canvas-tile-content {
 .docs-gm .docs-revisions-sidebar,
 .left-sidebar-container.pageless-format,
 .docs-gm .docos-emoji-reaction-doco-view.docos-anchoreddocoview:hover,
-.docs-gm .docs-sidebar-tile.docs-sidebar-tile-expanded {
+.docs-gm .docs-sidebar-tile.docs-sidebar-tile-expanded,
+.docs-explore-searchbar-labelinput {
   box-shadow: none;
 }
 
@@ -1272,7 +1294,9 @@ a:link,
 .kix-dropdown-entity-configuration-dialog-add-button-text,
 .docs-gm .docos-filter-settings .docs-material-menu-button-flat-default.filter-applied,
 .docos-show-more,
-.docos-show-less {
+.docos-show-less,
+.docs-explore-dictionaryentry-sense-synonym-clickable,
+.docs-explore-dictionaryentry-sense-antonym-clickable {
   color: var(--accent-text) !important;
 }
 
@@ -1443,7 +1467,8 @@ span.docs-material-gm-checkbox-checked.docs-material-gm-checkbox-focused,
   height: 39px;
 }
 
-.docs-gm .docs-tiled-sidebar-header {
+.docs-gm .docs-tiled-sidebar-header,
+.docs-gm .docs-dictionary-titlebar {
   height: 52px;
 }
 
@@ -1488,6 +1513,10 @@ span.docs-material-gm-checkbox-checked.docs-material-gm-checkbox-focused,
   font-weight: 400;
 }
 
+.docs-gm .docs-explore-dictionaryentry-phonetics {
+  font-weight: normal;
+}
+
 /* Fix for Firefox */
 .kix-canvas-tile-content svg rect {
   fill: transparent !important;

From 123869e1ff9591c63511bd67687017581f2965fe Mon Sep 17 00:00:00 2001
From: Raymond Wang <me@waymondrang.com>
Date: Sun, 4 Dec 2022 14:05:31 -0800
Subject: [PATCH 4/7] directory sync

---
 src/firefox/docs.css | 53 ++++++++++++++++++++++++++++++++++----------
 src/opera/docs.css   | 53 ++++++++++++++++++++++++++++++++++----------
 2 files changed, 82 insertions(+), 24 deletions(-)

diff --git a/src/firefox/docs.css b/src/firefox/docs.css
index 0178191..8812f9c 100644
--- a/src/firefox/docs.css
+++ b/src/firefox/docs.css
@@ -100,7 +100,10 @@ textarea,
 #docs-embeddedcontentpastedialog-title,
 .docs-embeddedcontentpastedialog-label,
 .docs-gm .docos-assigneeview.docos-assignee-other,
-.docs-gm .docos-anchoredreplyview-header .docos-anchoredreplyview-author {
+.docs-gm .docos-anchoredreplyview-header .docos-anchoredreplyview-author,
+.docs-gm .docs-dictionary-titlebar,
+.docs-gm .docs-explore-dictionaryentry-title,
+.docs-gm .docs-explore-dictionaryentries {
   color: var(--primary-text-color);
 }
 
@@ -274,7 +277,11 @@ svg.kix-configure-dropdown-button-add-icon {
 .docs-gm .docos-streamreplyview .docos-action-text,
 .docos-streamdocoview-timestamp,
 .docos-streamdocoview-comments-off,
-.docs-gm .docos-anchoredreplyview .docos-action-text {
+.docs-gm .docos-anchoredreplyview .docos-action-text,
+.docs-gm .docs-explore-emptylist-body,
+.docs-explore-dictionaryentry-sensefamily-morphunits,
+.docs-explore-dictionaryentry-sense-synonym-prefix,
+.docs-explore-dictionaryentry-sense-antonym-prefix {
   color: var(--tertiary-text-color);
 }
 
@@ -366,7 +373,9 @@ body,
 .docs-gm .docs-sidebar-tile-controls,
 .kix-documentmetrics-widget,
 .docs-docos-activitybox,
-.docs-gm .docos-streampane-header {
+.docs-gm .docos-streampane-header,
+.docs-gm .docs-dictionary-titlebar,
+.docs-dictionary-sidebar {
   background-color: var(--secondary-background-color) !important;
 }
 
@@ -438,7 +447,9 @@ body,
 .docos-search-button .docs-material-button-active.docs-material-button-flat-default,
 .docos-subscription-settings-button .docs-material-button-hover.docs-material-button-flat-default,
 .docos-subscription-settings-button .docs-material-button-focused.docs-material-button-flat-default,
-.docos-subscription-settings-button .docs-material-button-active.docs-material-button-flat-default {
+.docos-subscription-settings-button .docs-material-button-active.docs-material-button-flat-default,
+.docs-explore-searchbar-labelinput:focus,
+.docs-sidebar-gm-titlebar-icon-button:focus {
   /* although not hover elements, some elements may use the
     hover-background-color to differentiate themselves from the
     secondary-background-color */
@@ -555,7 +566,8 @@ body,
 .docos-xeditor .docos-docoview-resolved.docos-docoview-active.docos-streamdocoview .docos-streamdocoview-header-container,
 .docs-gm.docos-xeditor .docos-input-typing>.docos-input-textarea,
 .docs-gm .docs-docos-activity-sidebar .docos-input-typing>.docos-input-textarea,
-.docos-streamdocoview-input-pane .docos-input-textarea {
+.docos-streamdocoview-input-pane .docos-input-textarea,
+.docs-explore-searchbar-labelinput {
   background-color: var(--input-background-color) !important;
 }
 
@@ -741,7 +753,8 @@ body,
 .companion-app-switcher-container,
 .docs-gm .goog-toolbar-separator.goog-inline-block,
 .docs-slidingdialog,
-.docs-gm .docs-revisions-sidebar {
+.docs-gm .docs-revisions-sidebar,
+.docs-gm .docs-dictionary-sidebar {
   border-left: 1px solid var(--primary-border-color) !important;
 }
 
@@ -788,7 +801,8 @@ body,
 .docs-gm .docos-showrepliesbutton,
 .docs-gm .docos-anchoreddocoview-input-pane,
 .docs-gm .docs-sidebar-tile.docs-sidebar-tile-expanded,
-.smart-canvas-date-details-bubble-action-bar {
+.smart-canvas-date-details-bubble-action-bar,
+.docs-gm .docs-dictionary-titlebar {
   border-top: 1px solid var(--primary-border-color);
 }
 
@@ -812,7 +826,10 @@ body,
   border-bottom: 1px solid var(--primary-border-color) !important;
 }
 
-.docs-number-input-container input {
+.docs-number-input-container input,
+.docs-gm .docs-dictionary-titlebar,
+.docs-explore-searchbar-labelinput,
+.docs-explore-searchbar-labelinput:focus {
   border-bottom: 1px solid var(--primary-border-color);
 }
 
@@ -893,7 +910,11 @@ img.kix-smart-summary-onboarding-promo-content-illustration,
 
 .kix-page-paginated .kix-stacked-tile-page-shadow,
 canvas.kix-canvas-tile-content {
-  border-radius: 0em !important;
+  border-radius: 0px !important;
+}
+
+.jfk-textinput {
+  border-radius: 0px;
 }
 
 /* box shadows */
@@ -973,7 +994,8 @@ canvas.kix-canvas-tile-content {
 .docs-gm .docs-revisions-sidebar,
 .left-sidebar-container.pageless-format,
 .docs-gm .docos-emoji-reaction-doco-view.docos-anchoreddocoview:hover,
-.docs-gm .docs-sidebar-tile.docs-sidebar-tile-expanded {
+.docs-gm .docs-sidebar-tile.docs-sidebar-tile-expanded,
+.docs-explore-searchbar-labelinput {
   box-shadow: none;
 }
 
@@ -1272,7 +1294,9 @@ a:link,
 .kix-dropdown-entity-configuration-dialog-add-button-text,
 .docs-gm .docos-filter-settings .docs-material-menu-button-flat-default.filter-applied,
 .docos-show-more,
-.docos-show-less {
+.docos-show-less,
+.docs-explore-dictionaryentry-sense-synonym-clickable,
+.docs-explore-dictionaryentry-sense-antonym-clickable {
   color: var(--accent-text) !important;
 }
 
@@ -1443,7 +1467,8 @@ span.docs-material-gm-checkbox-checked.docs-material-gm-checkbox-focused,
   height: 39px;
 }
 
-.docs-gm .docs-tiled-sidebar-header {
+.docs-gm .docs-tiled-sidebar-header,
+.docs-gm .docs-dictionary-titlebar {
   height: 52px;
 }
 
@@ -1488,6 +1513,10 @@ span.docs-material-gm-checkbox-checked.docs-material-gm-checkbox-focused,
   font-weight: 400;
 }
 
+.docs-gm .docs-explore-dictionaryentry-phonetics {
+  font-weight: normal;
+}
+
 /* Fix for Firefox */
 .kix-canvas-tile-content svg rect {
   fill: transparent !important;
diff --git a/src/opera/docs.css b/src/opera/docs.css
index 0178191..8812f9c 100644
--- a/src/opera/docs.css
+++ b/src/opera/docs.css
@@ -100,7 +100,10 @@ textarea,
 #docs-embeddedcontentpastedialog-title,
 .docs-embeddedcontentpastedialog-label,
 .docs-gm .docos-assigneeview.docos-assignee-other,
-.docs-gm .docos-anchoredreplyview-header .docos-anchoredreplyview-author {
+.docs-gm .docos-anchoredreplyview-header .docos-anchoredreplyview-author,
+.docs-gm .docs-dictionary-titlebar,
+.docs-gm .docs-explore-dictionaryentry-title,
+.docs-gm .docs-explore-dictionaryentries {
   color: var(--primary-text-color);
 }
 
@@ -274,7 +277,11 @@ svg.kix-configure-dropdown-button-add-icon {
 .docs-gm .docos-streamreplyview .docos-action-text,
 .docos-streamdocoview-timestamp,
 .docos-streamdocoview-comments-off,
-.docs-gm .docos-anchoredreplyview .docos-action-text {
+.docs-gm .docos-anchoredreplyview .docos-action-text,
+.docs-gm .docs-explore-emptylist-body,
+.docs-explore-dictionaryentry-sensefamily-morphunits,
+.docs-explore-dictionaryentry-sense-synonym-prefix,
+.docs-explore-dictionaryentry-sense-antonym-prefix {
   color: var(--tertiary-text-color);
 }
 
@@ -366,7 +373,9 @@ body,
 .docs-gm .docs-sidebar-tile-controls,
 .kix-documentmetrics-widget,
 .docs-docos-activitybox,
-.docs-gm .docos-streampane-header {
+.docs-gm .docos-streampane-header,
+.docs-gm .docs-dictionary-titlebar,
+.docs-dictionary-sidebar {
   background-color: var(--secondary-background-color) !important;
 }
 
@@ -438,7 +447,9 @@ body,
 .docos-search-button .docs-material-button-active.docs-material-button-flat-default,
 .docos-subscription-settings-button .docs-material-button-hover.docs-material-button-flat-default,
 .docos-subscription-settings-button .docs-material-button-focused.docs-material-button-flat-default,
-.docos-subscription-settings-button .docs-material-button-active.docs-material-button-flat-default {
+.docos-subscription-settings-button .docs-material-button-active.docs-material-button-flat-default,
+.docs-explore-searchbar-labelinput:focus,
+.docs-sidebar-gm-titlebar-icon-button:focus {
   /* although not hover elements, some elements may use the
     hover-background-color to differentiate themselves from the
     secondary-background-color */
@@ -555,7 +566,8 @@ body,
 .docos-xeditor .docos-docoview-resolved.docos-docoview-active.docos-streamdocoview .docos-streamdocoview-header-container,
 .docs-gm.docos-xeditor .docos-input-typing>.docos-input-textarea,
 .docs-gm .docs-docos-activity-sidebar .docos-input-typing>.docos-input-textarea,
-.docos-streamdocoview-input-pane .docos-input-textarea {
+.docos-streamdocoview-input-pane .docos-input-textarea,
+.docs-explore-searchbar-labelinput {
   background-color: var(--input-background-color) !important;
 }
 
@@ -741,7 +753,8 @@ body,
 .companion-app-switcher-container,
 .docs-gm .goog-toolbar-separator.goog-inline-block,
 .docs-slidingdialog,
-.docs-gm .docs-revisions-sidebar {
+.docs-gm .docs-revisions-sidebar,
+.docs-gm .docs-dictionary-sidebar {
   border-left: 1px solid var(--primary-border-color) !important;
 }
 
@@ -788,7 +801,8 @@ body,
 .docs-gm .docos-showrepliesbutton,
 .docs-gm .docos-anchoreddocoview-input-pane,
 .docs-gm .docs-sidebar-tile.docs-sidebar-tile-expanded,
-.smart-canvas-date-details-bubble-action-bar {
+.smart-canvas-date-details-bubble-action-bar,
+.docs-gm .docs-dictionary-titlebar {
   border-top: 1px solid var(--primary-border-color);
 }
 
@@ -812,7 +826,10 @@ body,
   border-bottom: 1px solid var(--primary-border-color) !important;
 }
 
-.docs-number-input-container input {
+.docs-number-input-container input,
+.docs-gm .docs-dictionary-titlebar,
+.docs-explore-searchbar-labelinput,
+.docs-explore-searchbar-labelinput:focus {
   border-bottom: 1px solid var(--primary-border-color);
 }
 
@@ -893,7 +910,11 @@ img.kix-smart-summary-onboarding-promo-content-illustration,
 
 .kix-page-paginated .kix-stacked-tile-page-shadow,
 canvas.kix-canvas-tile-content {
-  border-radius: 0em !important;
+  border-radius: 0px !important;
+}
+
+.jfk-textinput {
+  border-radius: 0px;
 }
 
 /* box shadows */
@@ -973,7 +994,8 @@ canvas.kix-canvas-tile-content {
 .docs-gm .docs-revisions-sidebar,
 .left-sidebar-container.pageless-format,
 .docs-gm .docos-emoji-reaction-doco-view.docos-anchoreddocoview:hover,
-.docs-gm .docs-sidebar-tile.docs-sidebar-tile-expanded {
+.docs-gm .docs-sidebar-tile.docs-sidebar-tile-expanded,
+.docs-explore-searchbar-labelinput {
   box-shadow: none;
 }
 
@@ -1272,7 +1294,9 @@ a:link,
 .kix-dropdown-entity-configuration-dialog-add-button-text,
 .docs-gm .docos-filter-settings .docs-material-menu-button-flat-default.filter-applied,
 .docos-show-more,
-.docos-show-less {
+.docos-show-less,
+.docs-explore-dictionaryentry-sense-synonym-clickable,
+.docs-explore-dictionaryentry-sense-antonym-clickable {
   color: var(--accent-text) !important;
 }
 
@@ -1443,7 +1467,8 @@ span.docs-material-gm-checkbox-checked.docs-material-gm-checkbox-focused,
   height: 39px;
 }
 
-.docs-gm .docs-tiled-sidebar-header {
+.docs-gm .docs-tiled-sidebar-header,
+.docs-gm .docs-dictionary-titlebar {
   height: 52px;
 }
 
@@ -1488,6 +1513,10 @@ span.docs-material-gm-checkbox-checked.docs-material-gm-checkbox-focused,
   font-weight: 400;
 }
 
+.docs-gm .docs-explore-dictionaryentry-phonetics {
+  font-weight: normal;
+}
+
 /* Fix for Firefox */
 .kix-canvas-tile-content svg rect {
   fill: transparent !important;

From 7a587608834ba68d7f047a75fb5b418451248e39 Mon Sep 17 00:00:00 2001
From: Raymond Wang <me@waymondrang.com>
Date: Sun, 12 Mar 2023 00:23:27 -0800
Subject: [PATCH 5/7] update 0.6.0

google material 3 support
---
 src/chrome/docs.css | 435 ++++++++++++++++++++++++++++++++++++++++----
 src/chrome/word.js  |  15 ++
 2 files changed, 418 insertions(+), 32 deletions(-)

diff --git a/src/chrome/docs.css b/src/chrome/docs.css
index 8812f9c..eea47cd 100644
--- a/src/chrome/docs.css
+++ b/src/chrome/docs.css
@@ -5,7 +5,6 @@
   --hover-background-color: #333333;
   --input-background-color: #404040;
 
-  /* buttons */
   --button-background-color: #4d4d4d;
   --button-background-color-hover: #2196f3;
   --button-background-color-focus: #2196f3;
@@ -17,15 +16,20 @@
 
   --primary-border-color: #4d4d4d;
   --secondary-border-color: #404040;
+  --lighter-border-color: #808080;
 
   --primary-text-color: #f2f2f2;
   --secondary-text-color: #cccccc;
   --tertiary-text-color: #999999;
   --disabled-text: #666666;
   --accent-text: #64b5f6;
+  --accent-text-hover: #64b5f608;
 
   --comment-active: #1e88e5;
   --comment-hover: #2196f3;
+
+  --gm3-comment-background: #202427;
+  --gm3-comment-hover: #252D34;
 }
 
 /* text colors */
@@ -115,7 +119,7 @@ input,
 #gb a.gb_1.gb_1,
 #accounts-button,
 #accounts-button :last-child,
-.docs-gm .docos-anchoredreplyview .docos-anchoredreplyview-body *,
+body.docs-gm:not(.docs-grille-gm3) .docos-anchoredreplyview .docos-anchoredreplyview-body *,
 .docos-streamdocoview-body * {
   color: var(--primary-text-color) !important;
 }
@@ -198,7 +202,8 @@ svg.kix-dropdown-item-selection-button-icon {
 .kix-spellcheck-with-explanation-bubble .kix-spellcheck-with-explanation-bubble-explanation-text,
 .docos-ssd-content p,
 .docos-ssd-radio-button-group .jfk-radiobutton-label span,
-.docs-embeddedcontentpastedialog-message {
+.docs-embeddedcontentpastedialog-message,
+.docs-indentationdialoggm-indentation-special-type.docs-indentationdialoggm-control.jfk-select .goog-flat-menu-button-caption {
   color: var(--secondary-text-color) !important;
 }
 
@@ -326,7 +331,7 @@ svg.kix-configure-dropdown-button-add-icon {
 body,
 .docs-gm #docs-editor,
 .docs-gm #docs-editor-container,
-.kix-appview-editor,
+.docs-gm:not(.docs-grille-gm3) .kix-appview-editor,
 .apps-shortcutshelpcontentimpl-container,
 .apps-shortcutshelppopup {
   background: var(--primary-background-color) !important;
@@ -334,10 +339,10 @@ body,
 
 /* secondary background color */
 
-.docs-gm #kix-vertical-ruler,
+body.docs-gm:not(.docs-grille-gm3) #kix-vertical-ruler,
 .docs-ruler-contributed-dragger-container,
 .docs-ruler-contributed-dragger-container,
-.companion-app-switcher-container,
+body.docs-gm:not(.docs-grille-gm3) .companion-app-switcher-container,
 .docs-gm .docs-horizontal-ruler,
 .docs-material #docs-header .docs-titlebar-buttons,
 .jfk-bubble,
@@ -346,7 +351,7 @@ body,
 .docs-omnibox-autocomplete .ac-renderer,
 .docs-material #docs-equationtoolbar,
 .docs-material .docs-printpreview-toolbar,
-.docs-gm .docs-revisions-chromecover-content-color-default,
+body.docs-gm:not(.docs-grille-gm3) .docs-revisions-chromecover-content-color-default,
 .docs-gm .docs-revisions-sidebar-header,
 .docs-gm .docs-revisions-sidebar-date-group,
 .docs-revisions-sidebar,
@@ -364,7 +369,7 @@ body,
 .docos-emoji-counter-button-tooltip,
 .docs-material-menu-button-raised-default,
 .docs-material-button-raised-default,
-.docs-gm .docos-anchoreddocoview,
+body.docs-gm:not(.docs-grille-gm3) .docos-anchoreddocoview,
 .apps-search-popup-menu,
 .goog-char-picker-hovercard,
 .docs-gm .goog-zippy-expanded.docs-sidebar-tile-header,
@@ -385,7 +390,7 @@ body,
 .docs-material.docs-toolbar-more-toolbar,
 .docos-anchoreddocoview .docos-replyview-first.docos-anchoredreplyview,
 .docs-gm .docos-anchoredreplyview,
-.docs-gm .docos-showrepliesbutton,
+body.docs-gm:not(.docs-grille-gm3) .docos-showrepliesbutton,
 .docs-gm .docos-anchoreddocoview-input-pane,
 #docs-meet-in-editors-entrypointbutton,
 .docs-gm .docs-ui-toast,
@@ -449,7 +454,15 @@ body,
 .docos-subscription-settings-button .docs-material-button-focused.docs-material-button-flat-default,
 .docos-subscription-settings-button .docs-material-button-active.docs-material-button-flat-default,
 .docs-explore-searchbar-labelinput:focus,
-.docs-sidebar-gm-titlebar-icon-button:focus {
+.docs-sidebar-gm-titlebar-icon-button:focus,
+.docs-grille-gm3 .docs-navigation-tab-button-hover .docs-navigation-tab-button-outer-box,
+.docs-grille-gm3 .navigation-widget-hat-close.goog-flat-button-hover .navigation-widget-hat-close-button-outer-box,
+.docs-grille .docs-material #docs-docos-commentsbutton.jfk-button.jfk-button-active,
+.docs-grille .docs-material #docs-docos-commentsbutton.jfk-button.jfk-button-checked,
+.docs-grille .docs-material #docs-docos-commentsbutton.jfk-button.jfk-button-focused,
+.docs-grille .docs-material #docs-docos-commentsbutton:focus,
+.docs-grille .docs-material .docs-appbar-circle-button.jfk-button-active,
+.docs-grille .docs-material .docs-appbar-circle-button.jfk-button-checked {
   /* although not hover elements, some elements may use the
     hover-background-color to differentiate themselves from the
     secondary-background-color */
@@ -480,7 +493,7 @@ body,
 .docs-gm .docs-material .docs-toolbar-split-create-button.goog-toolbar-menu-button-active,
 .docs-gm .docs-material .docs-toolbar-split-create-button.goog-toolbar-menu-button-open,
 .docs-gm .docs-material.trix-palette .goog-palette-cell-selected,
-#docs-toolbar-mode-switcher.edit-mode,
+.docs-gm:not(.docs-grille-gm3) #docs-toolbar-mode-switcher.edit-mode,
 .docs-omnibox-material-style .docs-omnibox-input.jfk-textinput,
 .app-switcher-button-hover .app-switcher-button-icon-background,
 .app-switcher-button-open .app-switcher-button-icon-background,
@@ -530,7 +543,10 @@ body,
 .smart-canvas-date-details-icon-button:focus,
 .smart-canvas-date-details-bubble-pattern-picker-button:hover,
 .smart-canvas-date-details-bubble-pattern-picker-button:focus,
-.docs-gm .docos-assigneeview.docos-assignee-other {
+.docs-gm .docos-assigneeview.docos-assignee-other,
+#docs-revisions-appbarbutton.jfk-button-disabled:hover,
+#docs-revisions-appbarbutton.jfk-button-hover,
+.docs-grille .docs-material #docs-docos-commentsbutton.jfk-button.jfk-button-hover {
   background-color: var(--hover-background-color) !important;
 }
 
@@ -568,7 +584,8 @@ body,
 .docs-gm .docs-docos-activity-sidebar .docos-input-typing>.docos-input-textarea,
 .docos-streamdocoview-input-pane .docos-input-textarea,
 .docs-explore-searchbar-labelinput {
-  background-color: var(--input-background-color) !important;
+  background-color: var(--input-background-color);
+  /* omitted !important */
 }
 
 /* header in changes saved to drive popup */
@@ -675,13 +692,13 @@ body,
 .docs-emoji-picker,
 .docs-emoji-picker-search-bar-container,
 .docs-emoji-picker-variants-popup,
-.docs-gm .docos-anchoreddocoview:hover,
+body.docs-gm:not(.docs-grille-gm3) .docos-anchoreddocoview:hover,
 .kix-dropdown-entity-configuration-dialog-title-naming-component-input,
 .docs-dropdown-item-custom-color-menu-cancel-button,
 .docs-dropdown-item-custom-color-menu-okay-button,
 .docs-bubble,
 .docs-material-button-hairline-default.docs-material-button,
-.docs-gm.docos-xeditor .streamdocoview-no-header.docos-streamdocoview,
+body.docs-gm:not(.docs-grille-gm3) .docs-gm.docos-xeditor .streamdocoview-no-header.docos-streamdocoview,
 .docos-ssd-content hr {
   border: 1px solid var(--primary-border-color) !important;
 }
@@ -750,7 +767,7 @@ body,
   border-right: 1px solid var(--primary-border-color) !important;
 }
 
-.companion-app-switcher-container,
+body.docs-gm:not(.docs-grille-gm3) .companion-app-switcher-container,
 .docs-gm .goog-toolbar-separator.goog-inline-block,
 .docs-slidingdialog,
 .docs-gm .docs-revisions-sidebar,
@@ -788,7 +805,6 @@ body,
 .docs-gm #docs-toolbar-wrapper,
 .apps-hoverable-menu-separator-container .apps-hoverable-menu-separator-bottom,
 .docs-gm .goog-menuseparator,
-.docs-gm .docos-showrepliesbutton,
 .docs-gm .docos-anchoreddocoview-input-pane,
 .kix-document-top-shadow.read-mode-titlebar-border,
 .docs-gm .docs-revisions-sidebar-name-filter-switch-container,
@@ -796,13 +812,14 @@ body,
 .docs-emoji-picker-categories,
 .docs-emoji-picker-quick-pick-container,
 .apps-shortcutshelpcontentimpl-tearoff-link-container,
-.docs-gm .docs-tiled-sidebar-header,
+body.docs-gm:not(.docs-grille-gm3) .docs-tiled-sidebar-header,
 .docs-gm .docos-anchoredreplyview,
-.docs-gm .docos-showrepliesbutton,
+body.docs-gm:not(.docs-grille-gm3) .docos-showrepliesbutton,
 .docs-gm .docos-anchoreddocoview-input-pane,
-.docs-gm .docs-sidebar-tile.docs-sidebar-tile-expanded,
+body.docs-gm:not(.docs-grille-gm3) .docs-sidebar-tile.docs-sidebar-tile-expanded,
 .smart-canvas-date-details-bubble-action-bar,
-.docs-gm .docs-dictionary-titlebar {
+.docs-gm .docs-dictionary-titlebar,
+.kix-spellcheck-with-explanation-bubble .kix-spellcheck-with-explanation-bubble-action {
   border-top: 1px solid var(--primary-border-color);
 }
 
@@ -868,7 +885,7 @@ body,
 .docs-parent-collections-container:focus,
 #titlebar-mode-indicator-container>div,
 .docs-gm .docs-save-indicator-popup.jfk-bubble,
-.docs-gm #docs-titlebar-share-client-button .jfk-button,
+.docs-gm:not(.docs-grille-gm3) #docs-titlebar-share-client-button .jfk-button,
 .docs-omnibox-autocomplete .ac-renderer,
 .docs-revisions-chromecover-titlebar-button-action,
 .docs-revisions-chromecover-titlebar-second-button-action,
@@ -972,7 +989,7 @@ canvas.kix-canvas-tile-content {
 .docos-emoji-reaction-doco-view .docs-material-menu-button-raised-default,
 .docos-docoview-active .docos-emoji-reaction-doco-view-emojis :not(.docs-material-button-focused).docs-material-button-flat-primary,
 .apps-search-popup-menu,
-.docs-gm .docos-anchoreddocoview:hover,
+body.docs-gm:not(.docs-grille-gm3) .docos-anchoreddocoview:hover,
 .docs-gm .docos-anchoreddocoview.docos-docoview-active,
 .docs-gm .docos-anchoreddocoview.docos-docoview-active:hover,
 .kix-dropdown-item-selection-bubble,
@@ -984,7 +1001,8 @@ canvas.kix-canvas-tile-content {
   box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
 }
 
-.docs-gm.docos-xeditor .docos-streamdocoview:hover {
+.docs-gm.docos-xeditor .docos-streamdocoview:hover,
+.docs-gm .docs-toolbar-more-bubble {
   box-shadow: 0 14px 28px rgba(0, 0, 0, 0.125), 0 10px 10px rgba(0, 0, 0, 0.11);
 }
 
@@ -994,7 +1012,7 @@ canvas.kix-canvas-tile-content {
 .docs-gm .docs-revisions-sidebar,
 .left-sidebar-container.pageless-format,
 .docs-gm .docos-emoji-reaction-doco-view.docos-anchoreddocoview:hover,
-.docs-gm .docs-sidebar-tile.docs-sidebar-tile-expanded,
+/* .docs-gm .docs-sidebar-tile.docs-sidebar-tile-expanded, */
 .docs-explore-searchbar-labelinput {
   box-shadow: none;
 }
@@ -1296,7 +1314,8 @@ a:link,
 .docos-show-more,
 .docos-show-less,
 .docs-explore-dictionaryentry-sense-synonym-clickable,
-.docs-explore-dictionaryentry-sense-antonym-clickable {
+.docs-explore-dictionaryentry-sense-antonym-clickable,
+.kix-spellcheck-with-explanation-bubble .kix-spellcheck-with-explanation-bubble-action {
   color: var(--accent-text) !important;
 }
 
@@ -1399,7 +1418,7 @@ span.docs-material-gm-checkbox-checked.docs-material-gm-checkbox-focused,
 .docs-gm .modal-dialog .goog-buttonset-action,
 .docs-gm .modal-dialog .jfk-button-action,
 .docs-gm .docs-material-bubble .jfk-button-action,
-.docs-gm #docs-titlebar-share-client-button .jfk-button,
+.docs-gm:not(.docs-grille-gm3) #docs-titlebar-share-client-button .jfk-button,
 .docs-revisions-chromecover-titlebar-button-action,
 .docs-revisions-chromecover-titlebar-second-button-action,
 .docs-dropdown-item-custom-color-menu-cancel-button {
@@ -1467,8 +1486,8 @@ span.docs-material-gm-checkbox-checked.docs-material-gm-checkbox-focused,
   height: 39px;
 }
 
-.docs-gm .docs-tiled-sidebar-header,
-.docs-gm .docs-dictionary-titlebar {
+body.docs-gm:not(.docs-grille-gm3) .docs-tiled-sidebar-header,
+body.docs-gm:not(.docs-grille-gm3) .docs-dictionary-titlebar {
   height: 52px;
 }
 
@@ -1476,7 +1495,7 @@ span.docs-material-gm-checkbox-checked.docs-material-gm-checkbox-focused,
   opacity: 1;
 }
 
-.docs-number-input-container input {
+body.docs-gm:not(.docs-grille-gm3) .docs-number-input-container input {
   padding-left: 10%;
 }
 
@@ -1491,6 +1510,9 @@ span.docs-material-gm-checkbox-checked.docs-material-gm-checkbox-focused,
 
 .kix-appview-editor canvas {
   filter: var(--document_invert);
+}
+
+.docs-gm:not(.docs-grille-gm3) .kix-appview-editor canvas {
   background: var(--document_background) !important;
 }
 
@@ -1508,8 +1530,8 @@ span.docs-material-gm-checkbox-checked.docs-material-gm-checkbox-focused,
   box-shadow: var(--document_border);
 }
 
-.docs-gm .modal-dialog button:hover,
-.docs-gm .modal-dialog .jfk-button-standard.jfk-button-hover {
+.docs-gm:not(.docs-grille-gm3) .modal-dialog button:hover,
+.docs-gm:not(.docs-grille-gm3) .modal-dialog .jfk-button-standard.jfk-button-hover {
   font-weight: 400;
 }
 
@@ -1565,4 +1587,353 @@ span.docs-material-gm-checkbox-checked.docs-material-gm-checkbox-focused,
 /* restore border unset */
 .docs-gm .docos-emoji-reaction-doco-view.docos-anchoreddocoview {
   border: unset !important;
+}
+
+/* material design 3 specific css */
+
+.docs-grille-gm3.docs-gm .docs-material #docs-toolbar-wrapper,
+.docs-grille-gm3 .docos-anchoreddocoview,
+.docs-grille-gm3 .docos-anchoreddocoview-input-pane {
+  border: none !important;
+}
+
+.docs-grille-gm3 .docos-input .docos-input-textarea,
+.docs-grille-gm3 .docos-input .docos-input-textarea:focus,
+.docs-grille-gm3 .docos-streamdocoview-input-pane .docos-input-textarea,
+.docs-grille-gm3 .docos-streamdocoview-input-pane.docos-input .docos-input-textarea:focus {
+  color: var(--primary-text-color);
+}
+
+.docs-grille-gm3 .docos-anchoreddocoview .docos-anchoredreplyview,
+.docs-grille-gm3 .docos-anchoreddocoview-input-pane {
+  border-color: var(--primary-border-color);
+}
+
+.docs-grille-gm3.docs-gm #docs-header:not(.docs-hub-appbar) .docs-titlebar-buttons,
+.docs-grille-gm3 #docs-chrome:not(.docs-hub-chrome),
+.docs-grille-gm3 #kix-horizontal-ruler,
+.docs-grille-gm3 #kix-vertical-ruler.ac-active.docs-grille-gm3 .docs-horizontal-ruler,
+.docs-grille-gm3 .docs-ruler-background-inner,
+.docs-grille-gm3 .docs-vertical-ruler,
+.docs-grille-gm3 .docs-revisions-chromecover-content-color-default.ac-active.docs-gm .docs-linkbubble-bubble,
+.docs-grille-gm3 .docs-multi-linkbubble-bubble,
+.docs-grille-gm3 .docs-link-smartinsertlinkbubble-text-label,
+.docs-grille-gm3 .docs-slidingdialog {
+  background: var(--primary-background-color) !important;
+}
+
+.docs-grille-gm3.docs-gm .docs-material #docs-toolbar-wrapper {
+  background: var(--secondary-background-color) !important;
+}
+
+.docs-grille-gm3.docs-gm #docs-toolbar-mode-switcher,
+.docs-grille-gm3 #docs-align-palette,
+.docs-grille-gm3.docs-body-pageless #docs-align-palette,
+.docs-grille-gm3.docs-body-pageless #docs-align-palette .goog-toolbar-button,
+.docs-grille-gm3.docs-body-pageless .docs-main-toolbars .goog-toolbar-button,
+.docs-grille-gm3.docs-body-pageless .docs-main-toolbars .goog-toolbar-combo-button,
+.docs-grille-gm3.docs-body-pageless .docs-main-toolbars .goog-toolbar-menu-button,
+.docs-grille-gm3.docs-body-pageless .docs-toolbar-more-toolbar,
+.docs-grille-gm3.docs-body-pageless.docs-gm #docs-toolbar-wrapper,
+.docs-grille-gm3.docs-gm.docs-body-pageless #docs-toolbar-mode-switcher {
+  background: var(--secondary-background-color);
+}
+
+.docs-grille-gm3 .docos-stream-emoji-header-container,
+.docs-grille-gm3 .docos-xeditor .docos-streamdocoview-header-container,
+.docs-grille #titlebar-mode-indicator-container>.docs-material-menu-button-flat-primary-focused,
+.docs-grille .titlebar-request-access-button.docs-material-button.docs-material-button-focused {
+  background: var(--hover-background-color);
+}
+
+.docs-grille .docs-titlebar-badge .docs-save-indicator-icon:hover,
+.docs-grille .docs-titlebar-badge:hover,
+.docs-grille #docs-star.docs-titlebar-badge:active,
+.docs-grille .docs-titlebar-badge:active,
+.docs-grille .docs-titlebar-badge:focus,
+.docs-grille .goog-control-active .docs-titlebar-badge .docs-save-indicator-icon,
+.docs-grille .goog-control-focused .docs-titlebar-badge .docs-save-indicator-icon {
+  background-color: var(--hover-background-color);
+}
+
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview,
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview .docos-anchoredreplyview,
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview-input-pane,
+.docs-grille-gm3 .docos-anchoreddocoview .docos-anchoredreplyview,
+.docs-grille-gm3 .docos-anchoreddocoview-input-pane,
+.docs-grille-gm3 .docos-anchoreddocoview,
+.docs-grille-gm3 .docos-anchoreddocoview .docos-anchoredreplyview,
+.docs-grille-gm3 .docos-anchoreddocoview-input-pane,
+.docs-grille-gm3 .docos-anchoreddocoview .docos-show-less,
+.docs-grille-gm3 .docos-anchoreddocoview .docos-show-more,
+.docs-grille-gm3 .docos-replyview-first .docos-show-more,
+.docs-grille-gm3 .docos-showrepliesbutton-collapsed-internal-container,
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview .docos-show-less,
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview .docos-show-more,
+.docs-grille-gm3.docs-body-pageless .docos-replyview-first .docos-show-more,
+.docs-grille-gm3.docs-body-pageless .docos-showrepliesbutton-collapsed-internal-container {
+  background: var(--gm3-comment-background);
+}
+
+.docs-grille-gm3 .docos-anchoreddocoview:hover,
+.docs-grille-gm3 .docos-anchoreddocoview:hover .docos-anchoreddocoview-input-pane,
+.docs-grille-gm3 .docos-anchoreddocoview:hover .docos-anchoredreplyview,
+.docs-grille-gm3 .docos-anchoreddocoview.docos-docoview-tesla-conflict:hover .docos-show-more,
+.docs-grille-gm3 .docos-anchoreddocoview:hover .docos-replyview-first .docos-show-more,
+.docs-grille-gm3 .docos-anchoreddocoview:hover .docos-show-less,
+.docs-grille-gm3 .docos-anchoreddocoview:hover .docos-show-more,
+.docs-grille-gm3 .docos-anchoreddocoview.docos-docoview-active .docos-showrepliesbutton-collapsed-internal-container,
+.docs-grille-gm3 .docos-anchoreddocoview:hover .docos-showrepliesbutton-collapsed-internal-container,
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview:hover,
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview:hover .docos-anchoreddocoview-input-pane,
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview:hover .docos-anchoredreplyview,
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview.docos-docoview-tesla-conflict:hover .docos-show-more,
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview:hover .docos-replyview-first .docos-show-more,
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview:hover .docos-show-less,
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview:hover .docos-show-more,
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview.docos-docoview-active .docos-showrepliesbutton-collapsed-internal-container,
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview:hover .docos-showrepliesbutton-collapsed-internal-container {
+  background: var(--gm3-comment-hover);
+}
+
+.docs-grille-gm3 #kix-vertical-ruler:before,
+.docs-grille-gm3.docs-gm .docos-anchoreddocoview.docos-docoview-active,
+.docs-grille-gm3.docs-gm .docos-anchoreddocoview.docos-docoview-active:hover,
+.docs-grille-gm3.docs-gm .docos-docoview-active .docos-anchoreddocoview-input-pane,
+.docs-grille-gm3.docs-gm .docos-docoview-active .docos-anchoredreplyview,
+.docs-grille-gm3.docs-gm .docos-docoview-active:hover .docos-anchoreddocoview-input-pane,
+.docs-grille-gm3.docs-gm .docos-docoview-active:hover .docos-anchoredreplyview,
+.docs-grille-gm3 .docos-input .docos-input-textarea,
+.docs-grille-gm3 .docos-input .docos-input-textarea:focus,
+.docs-grille-gm3 .docos-streamdocoview-input-pane .docos-input-textarea,
+.docs-grille-gm3 .docos-streamdocoview-input-pane.docos-input .docos-input-textarea:focus,
+.docs-grille-gm3 .docos.docs-gm .jfk-button.jfk-button-standard,
+.docs-grille-gm3.docs-gm .docos-anchoreddocoview.docos-docoview-active .docos-show-less,
+.docs-grille-gm3.docs-gm .docos-anchoreddocoview.docos-docoview-active .docos-show-more,
+.docs-grille-gm3.docs-gm .docos-docoview-active.docos-docoview-tesla-conflict:hover .docos-show-morem,
+.docs-grille-gm3 #docs-instant-bubble,
+.docs-grille-gm3 .left-sidebar-container.pageless-format,
+.docs-grille-gm3.docs-gm .docos-anchoreddocoview.docos-docoview-active .docos-show-less,
+.docs-grille-gm3.docs-gm .docos-anchoreddocoview.docos-docoview-active .docos-show-more,
+.docs-grille-gm3.docs-gm .docos-docoview-active.docos-docoview-tesla-conflict:hover .docos-show-more {
+  background: var(--primary-background-color);
+}
+
+.docs-grille-gm3 .kix-appview-editor,
+body.docs-grille-gm3,
+.docs-grille-gm3.docs-body-pageless .docs-horizontal-ruler,
+.docs-grille-gm3.docs-body-pageless .docs-ruler-background-inner,
+.docs-grille-gm3.docs-body-pageless .docs-vertical-ruler {
+  background-color: var(--primary-background-color) !important;
+}
+
+.docs-grille-gm3.docs-body-pageless .docs-revisions-chromecover-content-color-default,
+.docs-grille-gm3 .docs-revisions-chromecover-content-color-default,
+.companion-collapser-button.app-switcher-button-checked .app-switcher-button-icon-background,
+.companion-theme-light .companion-collapser-button.app-switcher-button-checked .app-switcher-button-icon-background {
+  background-color: var(--primary-background-color);
+}
+
+.right-gutter-resizer-handle-grabber {
+  background-color: var(--primary-border-color);
+}
+
+.docs-grille-gm3.docs-body-pageless .kix-appview-editor[style*="background-image: linear-gradient"] {
+  background-image: linear-gradient(var(--primary-border-color), var(--primary-border-color)), linear-gradient(var(--primary-background-color), var(--primary-background-color)) !important;
+}
+
+.docs-grille-gm3 .docs-horizontal-ruler .docs-ruler-background-inner {
+  border-bottom: 1px solid var(--lighter-border-color);
+}
+
+.right-gutter-resizer-ghost-line,
+.left-sidebar-resizer-ghost-line {
+  background: var(--lighter-border-color);
+}
+
+.docs-grille-gm3 .left-sidebar-container.pageless-format {
+  box-shadow: 1px 0 0 0 var(--primary-border-color);
+}
+
+.right-gutter-resizer-handle-grabber {
+  border: 1px solid var(--lighter-border-color);
+}
+
+.docs-grille-gm3 .kix-page-paginated {
+  outline: var(--gm3_document_border);
+}
+
+.docs-grille-gm3 .docs-gm.docos-xeditor .docos-streamdocoview {
+  outline: 1px solid var(--primary-border-color);
+}
+
+.docs-grille-gm3 #docs-align-palette .goog-toolbar-button,
+.docs-grille-gm3 .docs-main-toolbars .goog-toolbar-button,
+.docs-grille-gm3 .docs-main-toolbars .goog-toolbar-combo-button,
+.docs-grille-gm3 .docs-main-toolbars .goog-toolbar-menu-button,
+.docs-grille-gm3 .trix-palette .goog-toolbar-menu-button {
+  background: transparent;
+}
+
+.docs-grille-gm3 #fontSizeSelect.docs-font-size-inc-dec-combobox.goog-toolbar-combo-button {
+  border: 1px solid var(--secondary-border-color) !important;
+}
+
+.docs-grille-gm3 .docos.docs-gm .jfk-button.jfk-button-standard,
+.docs-grille-gm3 .docos-input .docos-input-textarea,
+.docs-grille-gm3 .docos-input .docos-input-textarea:focus,
+.docs-grille-gm3 .docos-streamdocoview-input-pane .docos-input-textarea,
+.docs-grille-gm3 .docos-streamdocoview-input-pane.docos-input .docos-input-textarea:focus,
+.docs-grille-gm3 .docos.docs-gm .jfk-button.jfk-button-standard.jfk-button-hover {
+  border: 1px solid var(--primary-border-color) !important;
+}
+
+.docos-anchoreddocoview .docos-showrepliesbutton-line {
+  border-top: 1px solid var(--primary-border-color);
+}
+
+.docs-grille-gm3 .docos.docs-gm .jfk-button.jfk-button-standard.jfk-button-hover {
+  background: var(--accent-text-hover);
+}
+
+.docs-grille-gm3 #zoomSelect.docs-toolbar-zoom-combobox.goog-toolbar-combo-button-open,
+.docs-grille-gm3 #fontSizeSelect.docs-font-size-inc-dec-combobox.goog-toolbar-combo-button-open {
+  border: 2px solid var(--accent-text) !important;
+}
+
+.docs-grille-gm3 .docs-main-toolbars .goog-toolbar-button .docs-icon,
+.docs-grille-gm3 .docs-main-toolbars .goog-toolbar-menu-button .docs-icon {
+  filter: brightness(1.6);
+}
+
+.docs-grille-gm3 #docs-toolbar-wrapper .docs-icon-img,
+.docs-grille-gm3 .docs-toolbar-more-toolbar .docs-icon-img {
+  filter: brightness(2);
+}
+
+.docs-grille-gm3 #docs-toolbar-mode-switcher.suggest-mode .docs-icon-img,
+.docs-grille-gm3 #docs-toolbar-mode-switcher.suggest-mode .docs-icon-img:before,
+/* experimental */
+.docs-grille-gm3 #docs-align-palette .goog-toolbar-button-checked .docs-icon-img,
+.docs-grille-gm3 .docs-main-toolbars .goog-toolbar-button-checked .docs-icon-img,
+.docs-grille-gm3 .docs-main-toolbars .goog-toolbar-button.goog-toolbar-button-checked .docs-icon-img,
+.docs-grille-gm3.docs-gm .clean-palette .goog-palette-cell-selected .docs-icon-img,
+.docs-grille-gm3.docs-gm .trix-palette .goog-palette-cell-selected .docs-icon-img {
+  filter: brightness(4);
+}
+
+.docs-grille-gm3 #docs-omnibox-toolbar .docs-omnibox-input::placeholder,
+.docs-gm .docs-link-searchinput-search::placeholder,
+.docs-grille-gm3 .docs-omnibox-input.jfk-textinput::placeholder,
+.docs-grille-gm3 .docs-findinput-input::placeholder,
+.docs-grille-gm3 .docos-input-contenteditable:empty:before,
+.docs-gm .goog-menuitem .docs-display-density-toolbar-menuitem-description,
+.docs-gm .goog-menuitem .docs-toolbar-mode-switcher-menu-description,
+.docs-gm .goog-menuitem .punch-qanda-presenter-view-menu-item-description {
+  color: var(--tertiary-text-color);
+}
+
+.docs-grille .kix-titlebar-approvals-button .docs-material-menu-button-flat-primary-dropdown-icon [fill="#000"],
+.docs-grille .kix-titlebar-mode-switcher .docs-material-menu-button-flat-primary-dropdown-icon [fill="#000"] {
+  fill: var(--primary-border-color);
+}
+
+.docs-grille-gm3 .outline-refresh.navigation-widget-unified-styling .navigation-widget-empty-content {
+  color: var(--tertiary-text-color) !important;
+}
+
+.docs-grille-gm3 #docs-titlebar-share-client-button .jfk-button {
+  background: var(--button-background-color);
+  color: var(--primary-text-color);
+}
+
+.docs-grille-gm3 #docs-titlebar-share-client-button .jfk-button .scb-button-icon {
+  filter: grayscale(100%) invert(100%) brightness(2);
+}
+
+.docs-grille-gm3 #docs-titlebar-share-client-button .jfk-button.jfk-button-hover {
+  color: inherit;
+}
+
+.docs-grille-gm3 #docs-toolbar-mode-switcher .goog-toolbar-menu-button-caption,
+.docs-grille-gm3 .docos-anchoreddocoview .docos-showrepliesbutton-collapsed-internal,
+.docs-grille-gm3 .docos-showrepliesbutton-collapsed {
+  color: var(--secondary-text-color);
+}
+
+.docs-grille-gm3 .docos-anchoredreplyview .docos-anchoredreplyview-body span,
+.docs-grille-gm3 .docos-streamdocoview-body .docos-replyview-body span,
+.docs-grille-gm3 .docos-anchoredreplyview .docos-anchoredreplyview-body [style*="color:#333"] {
+  color: var(--secondary-text-color) !important;
+}
+
+.docs-grille-gm3 .docos-anchoredreplyview .docos-anchoredreplyview-body span[style*="font-weight:bold"],
+.docs-grille-gm3 .docos-streamdocoview-body .docos-replyview-body span[style*="font-weight:bold"] {
+  color: var(--primary-text-color) !important;
+}
+
+.docs-grille-gm3 .docs-smart-link-searchinput-search-container,
+.docs-grille-gm3 .docs-material-bubble .jfk-textinput,
+.docs-grille-gm3 .docs-material-gm-dialog .jfk-textinput,
+.docs-grille-gm3 .modal-dialog .jfk-textinput,
+.docs-gm .docs-findinput-container,
+.docs-gm .docs-gotoinput-container {
+  background-color: inherit !important;
+}
+
+.docs-grille-gm3 #docs-omnibox-toolbar .docs-omnibox-input,
+.docs-grille-gm3 .docs-omnibox-input.jfk-textinput:active,
+.docs-grille-gm3 .docs-omnibox-input.jfk-textinput:focus {
+  background: var(--input-background-color);
+}
+
+.docs-grille-gm3 .docos.docs-gm .jfk-button.jfk-button-standard,
+.docs-grille-gm3 .docos.docs-gm .jfk-button.jfk-button-standard.jfk-button-hover,
+.docs-grille-gm3 .docos-anchoreddocoview.docos-docoview-active .docos-showrepliesbutton-collapsed-internal,
+.docs-grille-gm3 .docos-anchoreddocoview:hover .docos-showrepliesbutton-collapsed-internal,
+.docs-grille-gm3 #docs-toolbar-mode-switcher.suggest-mode .goog-toolbar-menu-button-caption,
+.docs-grille-gm3 .outline-refresh .navigation-item.location-indicator-highlight .navigation-item-content,
+.docs-grille-gm3 .outline-refresh .navigation-item.location-indicator-highlight .navigation-item-content.goog-button-hover {
+  color: var(--accent-text);
+}
+
+.docs-grille-gm3 .docos-anchoreddocoview .docos-showrepliesbutton-collapsed-internal:hover {
+  background-color: var(--accent-text-hover);
+}
+
+.docs-grille-gm3 .docs-material.docs-toolbar-more-bubble .jfk-bubble-arrowup .jfk-bubble-arrowimplafter,
+.docs-grille-gm3 .docs-material.docs-toolbar-more-bubble .jfk-bubble-arrowup .jfk-bubble-arrowimplbefore,
+.docs-grille-gm3 .docs-gm-promo.jfk-bubble.jfk-bubble-promo.docs-promo-bubble .jfk-bubble-arrowimplbefore,
+.docs-grille-gm3 #docs-meet-in-editors-entrypointbutton {
+  border-color: transparent !important;
+}
+
+.docs-grille-gm3 .kix-smart-summary-view-separator {
+  background: var(--primary-border-color);
+}
+
+.docs-grille-gm3 .docos.docs-gm .jfk-button.jfk-button-action.jfk-button-disabled {
+  background: var(--disabled-text);
+}
+
+/* production verbatim */
+.docs-grille-gm3 .docs-gm .docos-streamdocoview.docos-docoview-resolved:hover,
+.docs-grille-gm3 .docs-gm.docos-xeditor .docos-streamdocoview:hover {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 6px 2px rgba(0, 0, 0, .15);
+}
+
+.docs-gm .docs-sidebar-tile.docs-sidebar-tile-expanded {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .15);
+}
+
+.docs-sidebar-tile-header.docs-sidebar-tile-header-disabled {
+  color: var(--disabled-text);
+}
+
+.docs-grille-gm3 #docs-chrome:not(.docs-hub-chrome) {
+  border-color: transparent;
+}
+
+.docs-grille .docs-material #docs-header .docs-titlebar-buttons {
+  height: 64px;
 }
\ No newline at end of file
diff --git a/src/chrome/word.js b/src/chrome/word.js
index 84c2d22..878d50f 100644
--- a/src/chrome/word.js
+++ b/src/chrome/word.js
@@ -10,6 +10,7 @@ const link_color = "#90caf9";
 const invert_value = "invert(1)";
 const grayscale_value = "contrast(79%) grayscale(100%)";
 const page_border = "0 0 0 1px";
+const gm3_page_border = "1px solid #404040";
 const backgrounds = {
   default: "#ffffff",
   shade: "#999999",
@@ -196,11 +197,17 @@ function set_up() {
           ? (grayscale ? grayscale_value + " " : "") + invert_value
           : "none"
       );
+
       document.documentElement.style.setProperty(
         "--document_border",
         show_border ? page_border : "none"
       );
 
+      document.documentElement.style.setProperty(
+        "--gm3_document_border",
+        show_border ? gm3_page_border : "none"
+      );
+
       // Do not create notification if not needed
 
       // Show update notification if data.updates is not set or if it is
@@ -325,6 +332,14 @@ function set_up() {
         changes.show_border.newValue ? page_border : "none"
       );
     }
+
+    // Handle show border option change
+    if (Object.keys(changes).includes("show_border")) {
+      document.documentElement.style.setProperty(
+        "--gm3_document_border",
+        changes.show_border.newValue ? gm3_page_border : "none"
+      );
+    }
   });
 }
 

From 2cd5320774a7df784ef744e048cf23fbc2ebc209 Mon Sep 17 00:00:00 2001
From: Raymond Wang <me@waymondrang.com>
Date: Sun, 12 Mar 2023 00:55:19 -0800
Subject: [PATCH 6/7] update manifest version, access page

---
 src/chrome/default.css   |   2 +-
 src/chrome/docs.css      |  29 ++++++--
 src/chrome/manifest.json |   2 +-
 src/chrome/popup.html    | 153 +++++++++++++++++++++------------------
 src/chrome/word.js       |   2 +-
 5 files changed, 110 insertions(+), 78 deletions(-)

diff --git a/src/chrome/default.css b/src/chrome/default.css
index f423d07..8146424 100644
--- a/src/chrome/default.css
+++ b/src/chrome/default.css
@@ -10,4 +10,4 @@
   padding: 2px 8px;
   z-index: 2500000000;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-}
+}
\ No newline at end of file
diff --git a/src/chrome/docs.css b/src/chrome/docs.css
index eea47cd..3e9b40e 100644
--- a/src/chrome/docs.css
+++ b/src/chrome/docs.css
@@ -107,7 +107,14 @@ textarea,
 .docs-gm .docos-anchoredreplyview-header .docos-anchoredreplyview-author,
 .docs-gm .docs-dictionary-titlebar,
 .docs-gm .docs-explore-dictionaryentry-title,
-.docs-gm .docs-explore-dictionaryentries {
+.docs-gm .docs-explore-dictionaryentries,
+/* generated css classes, volatile */
+.hA3Ymb,
+.vhoiae .hA3Ymb,
+.X9XeLb .hA3Ymb,
+.cWKK1c .hA3Ymb,
+.aJfoSc .hA3Ymb,
+.TOb6Ze .hA3Ymb {
   color: var(--primary-text-color);
 }
 
@@ -120,7 +127,8 @@ input,
 #accounts-button,
 #accounts-button :last-child,
 body.docs-gm:not(.docs-grille-gm3) .docos-anchoredreplyview .docos-anchoredreplyview-body *,
-.docos-streamdocoview-body * {
+.docos-streamdocoview-body *,
+.TBnIgc:not(.VfPpkd-fmcmS-yrriRe-OWXEXe-OWB6Me) .VfPpkd-fmcmS-wGMbrd {
   color: var(--primary-text-color) !important;
 }
 
@@ -380,10 +388,15 @@ body.docs-gm:not(.docs-grille-gm3) .docos-anchoreddocoview,
 .docs-docos-activitybox,
 .docs-gm .docos-streampane-header,
 .docs-gm .docs-dictionary-titlebar,
-.docs-dictionary-sidebar {
+.docs-dictionary-sidebar,
+#innerContainer div[style*="background"] {
   background-color: var(--secondary-background-color) !important;
 }
 
+.yYWAMb {
+  background: var(--primary-background-color);
+}
+
 #docs-chrome,
 .docs-material #docs-toolbar-wrapper,
 #kix-vertical-ruler,
@@ -550,6 +563,10 @@ body.docs-gm:not(.docs-grille-gm3) .docos-showrepliesbutton,
   background-color: var(--hover-background-color) !important;
 }
 
+.fWf7qe:not(.RDPZE):hover .Yalane {
+  background-color: var(--hover-background-color);
+}
+
 /* hover background border */
 
 .docs-gm.docos-xeditor .docos-streamdocoview:hover {
@@ -699,7 +716,8 @@ body.docs-gm:not(.docs-grille-gm3) .docos-anchoreddocoview:hover,
 .docs-bubble,
 .docs-material-button-hairline-default.docs-material-button,
 body.docs-gm:not(.docs-grille-gm3) .docs-gm.docos-xeditor .streamdocoview-no-header.docos-streamdocoview,
-.docos-ssd-content hr {
+.docos-ssd-content hr,
+#innerContainer div[style*="background"] {
   border: 1px solid var(--primary-border-color) !important;
 }
 
@@ -1218,7 +1236,8 @@ body.docs-gm:not(.docs-grille-gm3) .docos-anchoreddocoview:hover,
 }
 
 #request-access-icon,
-.QLUvIe.ihNnYc:before {
+.QLUvIe.ihNnYc:before,
+.QLUvIe.lFiY0b:before {
   background-image: var(--access_denied);
   background-image: image-set(var(--access_denied) 1x,
       var(--access_denied_600) 2x);
diff --git a/src/chrome/manifest.json b/src/chrome/manifest.json
index 8832547..f350031 100644
--- a/src/chrome/manifest.json
+++ b/src/chrome/manifest.json
@@ -1,6 +1,6 @@
 {
     "name": "DocsAfterDark",
-    "version": "0.5.3",
+    "version": "0.6.0",
     "description": "Modern, dark mode for Google Docs",
     "author": "Raymond Wang",
     "manifest_version": 3,
diff --git a/src/chrome/popup.html b/src/chrome/popup.html
index 234439e..d9dc5b6 100644
--- a/src/chrome/popup.html
+++ b/src/chrome/popup.html
@@ -1,77 +1,90 @@
 <!DOCTYPE html>
 <html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="stylesheet" href="popup.css" />
+        <link rel="stylesheet" href="special.css" />
+        <title>DocsAfterDark Settings</title>
+    </head>
 
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="popup.css">
-    <link rel="stylesheet" href="special.css">
-    <title>DocsAfterDark Settings</title>
-</head>
-
-<body>
-    <div id="main">
-        <p>DocsAfterDark Options</p>
-        <p class="menu_bar_label">Global Toggle</p>
-        <div id="on_off" class="menu_bar">
-            <button id="on">On</button>
-            <button id="off">Off</button>
-        </div>
-        <p class="menu_bar_label">Invert Options</p>
-        <div id="invert_container">
-            <div class="input">
-                <input type="checkbox" id="invert" name="invert"><label for="invert">Invert</label>
+    <body>
+        <div id="main">
+            <p>DocsAfterDark Options</p>
+            <p class="menu_bar_label">Global Toggle</p>
+            <div id="on_off" class="menu_bar">
+                <button id="on">On</button>
+                <button id="off">Off</button>
             </div>
-            <div class="input">
-                <input type="checkbox" id="grayscale" name="grayscale"><label for="grayscale">Grayscale</label>
-            </div>
-        </div>
-        <p class="menu_bar_label">Document Background<span class="__firefox-exclude">&nbsp;(May Be Unstable)</span></p>
-        <div id="document_bg" class="menu_bar">
-            <button id="default">
-                <div>
-                    Default
-                </div>
-            </button>
-            <button id="shade">
-                <div>
-                    Shade
-                </div>
-            </button>
-            <button id="dark">
-                <div>
-                    Dark
-                </div>
-            </button>
-            <button id="black">
-                <div>
-                    Black
+            <p class="menu_bar_label">Invert Options</p>
+            <div id="invert_container">
+                <div class="input">
+                    <input type="checkbox" id="invert" name="invert" /><label
+                        for="invert"
+                        >Invert</label
+                    >
                 </div>
-            </button>
-            <button id="custom">
-                <div>
-                    Custom
+                <div class="input">
+                    <input
+                        type="checkbox"
+                        id="grayscale"
+                        name="grayscale" /><label for="grayscale"
+                        >Grayscale</label
+                    >
                 </div>
-            </button>
-        </div>
-        <input id="custom_input" class="hidden" placeholder="Custom Color/CSS">
-        <button id="save_custom" class="hidden">Save</button>
-        <p id="description"></p>
-        <div id="document_border_container">
-            <p class="menu_bar_label">Document Border</p>
-            <input type="checkbox" id="show_border" name="show_border"><label for="show_border">Show Border</label>
-        </div>
-        <div id="toggle_button_container">
-            <p class="menu_bar_label">Toggle Button Options</p>
-            <input type="checkbox" id="raise_button" name="raise_button"><label for="raise_button">Raise Button</label>
+            </div>
+            <p class="menu_bar_label">
+                Document Background<span class="__firefox-exclude"
+                    >&nbsp;(May Be Unstable)</span
+                >
+            </p>
+            <div id="document_bg" class="menu_bar">
+                <button id="default">
+                    <div>Default</div>
+                </button>
+                <button id="shade">
+                    <div>Shade</div>
+                </button>
+                <button id="dark">
+                    <div>Dark</div>
+                </button>
+                <button id="black">
+                    <div>Black</div>
+                </button>
+                <button id="custom">
+                    <div>Custom</div>
+                </button>
+            </div>
+            <input
+                id="custom_input"
+                class="hidden"
+                placeholder="Custom Color/CSS" />
+            <button id="save_custom" class="hidden">Save</button>
+            <p id="description"></p>
+            <div id="document_border_container">
+                <p class="menu_bar_label">Document Border</p>
+                <input
+                    type="checkbox"
+                    id="show_border"
+                    name="show_border" /><label for="show_border"
+                    >Show Border</label
+                >
+            </div>
+            <div id="toggle_button_container">
+                <p class="menu_bar_label">Toggle Button Options</p>
+                <input
+                    type="checkbox"
+                    id="raise_button"
+                    name="raise_button" /><label for="raise_button"
+                    >Raise Button</label
+                >
+            </div>
+            <footer>
+                <p id="version"></p>
+                <a id="donate">Donate</a>
+            </footer>
         </div>
-        <footer>
-            <p id="version"></p>
-            <a id="donate">Donate</a>
-        </footer>
-    </div>
-    <script src="popup.js"></script>
-</body>
-
-</html>
\ No newline at end of file
+        <script src="popup.js"></script>
+    </body>
+</html>
diff --git a/src/chrome/word.js b/src/chrome/word.js
index 878d50f..6815866 100644
--- a/src/chrome/word.js
+++ b/src/chrome/word.js
@@ -19,7 +19,7 @@ const backgrounds = {
 };
 const default_background = "default";
 const update_text_style =
-  "border: 1px solid #4d4d4d; background-color: #212121; padding: 8px 12px; border-radius: 6px; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); font-size: 12px;"; // use fixed font size
+  "border: 1px solid #4d4d4d; background-color: #212121; padding: 8px 12px; border-radius: 6px; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); font-size: 12px; font-family: Google Sans,Roboto,sans-serif;"; // use fixed font size
 const close_button_style =
   "background-color: #4d4d4d; border-radius: 2px; color: #64b5f6; border: none; cursor: pointer; margin-left: 12px; font-size: inherit;";
 const update_notification_style =

From 3914b8ed87834ad63e9fcdaa9e4f5643e328f27a Mon Sep 17 00:00:00 2001
From: Raymond Wang <me@waymondrang.com>
Date: Sun, 12 Mar 2023 00:57:26 -0800
Subject: [PATCH 7/7] directory sync

---
 src/firefox/default.css   |   2 +-
 src/firefox/docs.css      | 464 +++++++++++++++++++++++++++++++++++---
 src/firefox/manifest.json |   2 +-
 src/firefox/popup.html    | 153 +++++++------
 src/firefox/word.js       |  17 +-
 src/opera/default.css     |   2 +-
 src/opera/docs.css        | 464 +++++++++++++++++++++++++++++++++++---
 src/opera/manifest.json   |   2 +-
 src/opera/popup.html      | 153 +++++++------
 src/opera/word.js         |  17 +-
 10 files changed, 1056 insertions(+), 220 deletions(-)

diff --git a/src/firefox/default.css b/src/firefox/default.css
index f423d07..8146424 100644
--- a/src/firefox/default.css
+++ b/src/firefox/default.css
@@ -10,4 +10,4 @@
   padding: 2px 8px;
   z-index: 2500000000;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-}
+}
\ No newline at end of file
diff --git a/src/firefox/docs.css b/src/firefox/docs.css
index 8812f9c..3e9b40e 100644
--- a/src/firefox/docs.css
+++ b/src/firefox/docs.css
@@ -5,7 +5,6 @@
   --hover-background-color: #333333;
   --input-background-color: #404040;
 
-  /* buttons */
   --button-background-color: #4d4d4d;
   --button-background-color-hover: #2196f3;
   --button-background-color-focus: #2196f3;
@@ -17,15 +16,20 @@
 
   --primary-border-color: #4d4d4d;
   --secondary-border-color: #404040;
+  --lighter-border-color: #808080;
 
   --primary-text-color: #f2f2f2;
   --secondary-text-color: #cccccc;
   --tertiary-text-color: #999999;
   --disabled-text: #666666;
   --accent-text: #64b5f6;
+  --accent-text-hover: #64b5f608;
 
   --comment-active: #1e88e5;
   --comment-hover: #2196f3;
+
+  --gm3-comment-background: #202427;
+  --gm3-comment-hover: #252D34;
 }
 
 /* text colors */
@@ -103,7 +107,14 @@ textarea,
 .docs-gm .docos-anchoredreplyview-header .docos-anchoredreplyview-author,
 .docs-gm .docs-dictionary-titlebar,
 .docs-gm .docs-explore-dictionaryentry-title,
-.docs-gm .docs-explore-dictionaryentries {
+.docs-gm .docs-explore-dictionaryentries,
+/* generated css classes, volatile */
+.hA3Ymb,
+.vhoiae .hA3Ymb,
+.X9XeLb .hA3Ymb,
+.cWKK1c .hA3Ymb,
+.aJfoSc .hA3Ymb,
+.TOb6Ze .hA3Ymb {
   color: var(--primary-text-color);
 }
 
@@ -115,8 +126,9 @@ input,
 #gb a.gb_1.gb_1,
 #accounts-button,
 #accounts-button :last-child,
-.docs-gm .docos-anchoredreplyview .docos-anchoredreplyview-body *,
-.docos-streamdocoview-body * {
+body.docs-gm:not(.docs-grille-gm3) .docos-anchoredreplyview .docos-anchoredreplyview-body *,
+.docos-streamdocoview-body *,
+.TBnIgc:not(.VfPpkd-fmcmS-yrriRe-OWXEXe-OWB6Me) .VfPpkd-fmcmS-wGMbrd {
   color: var(--primary-text-color) !important;
 }
 
@@ -198,7 +210,8 @@ svg.kix-dropdown-item-selection-button-icon {
 .kix-spellcheck-with-explanation-bubble .kix-spellcheck-with-explanation-bubble-explanation-text,
 .docos-ssd-content p,
 .docos-ssd-radio-button-group .jfk-radiobutton-label span,
-.docs-embeddedcontentpastedialog-message {
+.docs-embeddedcontentpastedialog-message,
+.docs-indentationdialoggm-indentation-special-type.docs-indentationdialoggm-control.jfk-select .goog-flat-menu-button-caption {
   color: var(--secondary-text-color) !important;
 }
 
@@ -326,7 +339,7 @@ svg.kix-configure-dropdown-button-add-icon {
 body,
 .docs-gm #docs-editor,
 .docs-gm #docs-editor-container,
-.kix-appview-editor,
+.docs-gm:not(.docs-grille-gm3) .kix-appview-editor,
 .apps-shortcutshelpcontentimpl-container,
 .apps-shortcutshelppopup {
   background: var(--primary-background-color) !important;
@@ -334,10 +347,10 @@ body,
 
 /* secondary background color */
 
-.docs-gm #kix-vertical-ruler,
+body.docs-gm:not(.docs-grille-gm3) #kix-vertical-ruler,
 .docs-ruler-contributed-dragger-container,
 .docs-ruler-contributed-dragger-container,
-.companion-app-switcher-container,
+body.docs-gm:not(.docs-grille-gm3) .companion-app-switcher-container,
 .docs-gm .docs-horizontal-ruler,
 .docs-material #docs-header .docs-titlebar-buttons,
 .jfk-bubble,
@@ -346,7 +359,7 @@ body,
 .docs-omnibox-autocomplete .ac-renderer,
 .docs-material #docs-equationtoolbar,
 .docs-material .docs-printpreview-toolbar,
-.docs-gm .docs-revisions-chromecover-content-color-default,
+body.docs-gm:not(.docs-grille-gm3) .docs-revisions-chromecover-content-color-default,
 .docs-gm .docs-revisions-sidebar-header,
 .docs-gm .docs-revisions-sidebar-date-group,
 .docs-revisions-sidebar,
@@ -364,7 +377,7 @@ body,
 .docos-emoji-counter-button-tooltip,
 .docs-material-menu-button-raised-default,
 .docs-material-button-raised-default,
-.docs-gm .docos-anchoreddocoview,
+body.docs-gm:not(.docs-grille-gm3) .docos-anchoreddocoview,
 .apps-search-popup-menu,
 .goog-char-picker-hovercard,
 .docs-gm .goog-zippy-expanded.docs-sidebar-tile-header,
@@ -375,17 +388,22 @@ body,
 .docs-docos-activitybox,
 .docs-gm .docos-streampane-header,
 .docs-gm .docs-dictionary-titlebar,
-.docs-dictionary-sidebar {
+.docs-dictionary-sidebar,
+#innerContainer div[style*="background"] {
   background-color: var(--secondary-background-color) !important;
 }
 
+.yYWAMb {
+  background: var(--primary-background-color);
+}
+
 #docs-chrome,
 .docs-material #docs-toolbar-wrapper,
 #kix-vertical-ruler,
 .docs-material.docs-toolbar-more-toolbar,
 .docos-anchoreddocoview .docos-replyview-first.docos-anchoredreplyview,
 .docs-gm .docos-anchoredreplyview,
-.docs-gm .docos-showrepliesbutton,
+body.docs-gm:not(.docs-grille-gm3) .docos-showrepliesbutton,
 .docs-gm .docos-anchoreddocoview-input-pane,
 #docs-meet-in-editors-entrypointbutton,
 .docs-gm .docs-ui-toast,
@@ -449,7 +467,15 @@ body,
 .docos-subscription-settings-button .docs-material-button-focused.docs-material-button-flat-default,
 .docos-subscription-settings-button .docs-material-button-active.docs-material-button-flat-default,
 .docs-explore-searchbar-labelinput:focus,
-.docs-sidebar-gm-titlebar-icon-button:focus {
+.docs-sidebar-gm-titlebar-icon-button:focus,
+.docs-grille-gm3 .docs-navigation-tab-button-hover .docs-navigation-tab-button-outer-box,
+.docs-grille-gm3 .navigation-widget-hat-close.goog-flat-button-hover .navigation-widget-hat-close-button-outer-box,
+.docs-grille .docs-material #docs-docos-commentsbutton.jfk-button.jfk-button-active,
+.docs-grille .docs-material #docs-docos-commentsbutton.jfk-button.jfk-button-checked,
+.docs-grille .docs-material #docs-docos-commentsbutton.jfk-button.jfk-button-focused,
+.docs-grille .docs-material #docs-docos-commentsbutton:focus,
+.docs-grille .docs-material .docs-appbar-circle-button.jfk-button-active,
+.docs-grille .docs-material .docs-appbar-circle-button.jfk-button-checked {
   /* although not hover elements, some elements may use the
     hover-background-color to differentiate themselves from the
     secondary-background-color */
@@ -480,7 +506,7 @@ body,
 .docs-gm .docs-material .docs-toolbar-split-create-button.goog-toolbar-menu-button-active,
 .docs-gm .docs-material .docs-toolbar-split-create-button.goog-toolbar-menu-button-open,
 .docs-gm .docs-material.trix-palette .goog-palette-cell-selected,
-#docs-toolbar-mode-switcher.edit-mode,
+.docs-gm:not(.docs-grille-gm3) #docs-toolbar-mode-switcher.edit-mode,
 .docs-omnibox-material-style .docs-omnibox-input.jfk-textinput,
 .app-switcher-button-hover .app-switcher-button-icon-background,
 .app-switcher-button-open .app-switcher-button-icon-background,
@@ -530,10 +556,17 @@ body,
 .smart-canvas-date-details-icon-button:focus,
 .smart-canvas-date-details-bubble-pattern-picker-button:hover,
 .smart-canvas-date-details-bubble-pattern-picker-button:focus,
-.docs-gm .docos-assigneeview.docos-assignee-other {
+.docs-gm .docos-assigneeview.docos-assignee-other,
+#docs-revisions-appbarbutton.jfk-button-disabled:hover,
+#docs-revisions-appbarbutton.jfk-button-hover,
+.docs-grille .docs-material #docs-docos-commentsbutton.jfk-button.jfk-button-hover {
   background-color: var(--hover-background-color) !important;
 }
 
+.fWf7qe:not(.RDPZE):hover .Yalane {
+  background-color: var(--hover-background-color);
+}
+
 /* hover background border */
 
 .docs-gm.docos-xeditor .docos-streamdocoview:hover {
@@ -568,7 +601,8 @@ body,
 .docs-gm .docs-docos-activity-sidebar .docos-input-typing>.docos-input-textarea,
 .docos-streamdocoview-input-pane .docos-input-textarea,
 .docs-explore-searchbar-labelinput {
-  background-color: var(--input-background-color) !important;
+  background-color: var(--input-background-color);
+  /* omitted !important */
 }
 
 /* header in changes saved to drive popup */
@@ -675,14 +709,15 @@ body,
 .docs-emoji-picker,
 .docs-emoji-picker-search-bar-container,
 .docs-emoji-picker-variants-popup,
-.docs-gm .docos-anchoreddocoview:hover,
+body.docs-gm:not(.docs-grille-gm3) .docos-anchoreddocoview:hover,
 .kix-dropdown-entity-configuration-dialog-title-naming-component-input,
 .docs-dropdown-item-custom-color-menu-cancel-button,
 .docs-dropdown-item-custom-color-menu-okay-button,
 .docs-bubble,
 .docs-material-button-hairline-default.docs-material-button,
-.docs-gm.docos-xeditor .streamdocoview-no-header.docos-streamdocoview,
-.docos-ssd-content hr {
+body.docs-gm:not(.docs-grille-gm3) .docs-gm.docos-xeditor .streamdocoview-no-header.docos-streamdocoview,
+.docos-ssd-content hr,
+#innerContainer div[style*="background"] {
   border: 1px solid var(--primary-border-color) !important;
 }
 
@@ -750,7 +785,7 @@ body,
   border-right: 1px solid var(--primary-border-color) !important;
 }
 
-.companion-app-switcher-container,
+body.docs-gm:not(.docs-grille-gm3) .companion-app-switcher-container,
 .docs-gm .goog-toolbar-separator.goog-inline-block,
 .docs-slidingdialog,
 .docs-gm .docs-revisions-sidebar,
@@ -788,7 +823,6 @@ body,
 .docs-gm #docs-toolbar-wrapper,
 .apps-hoverable-menu-separator-container .apps-hoverable-menu-separator-bottom,
 .docs-gm .goog-menuseparator,
-.docs-gm .docos-showrepliesbutton,
 .docs-gm .docos-anchoreddocoview-input-pane,
 .kix-document-top-shadow.read-mode-titlebar-border,
 .docs-gm .docs-revisions-sidebar-name-filter-switch-container,
@@ -796,13 +830,14 @@ body,
 .docs-emoji-picker-categories,
 .docs-emoji-picker-quick-pick-container,
 .apps-shortcutshelpcontentimpl-tearoff-link-container,
-.docs-gm .docs-tiled-sidebar-header,
+body.docs-gm:not(.docs-grille-gm3) .docs-tiled-sidebar-header,
 .docs-gm .docos-anchoredreplyview,
-.docs-gm .docos-showrepliesbutton,
+body.docs-gm:not(.docs-grille-gm3) .docos-showrepliesbutton,
 .docs-gm .docos-anchoreddocoview-input-pane,
-.docs-gm .docs-sidebar-tile.docs-sidebar-tile-expanded,
+body.docs-gm:not(.docs-grille-gm3) .docs-sidebar-tile.docs-sidebar-tile-expanded,
 .smart-canvas-date-details-bubble-action-bar,
-.docs-gm .docs-dictionary-titlebar {
+.docs-gm .docs-dictionary-titlebar,
+.kix-spellcheck-with-explanation-bubble .kix-spellcheck-with-explanation-bubble-action {
   border-top: 1px solid var(--primary-border-color);
 }
 
@@ -868,7 +903,7 @@ body,
 .docs-parent-collections-container:focus,
 #titlebar-mode-indicator-container>div,
 .docs-gm .docs-save-indicator-popup.jfk-bubble,
-.docs-gm #docs-titlebar-share-client-button .jfk-button,
+.docs-gm:not(.docs-grille-gm3) #docs-titlebar-share-client-button .jfk-button,
 .docs-omnibox-autocomplete .ac-renderer,
 .docs-revisions-chromecover-titlebar-button-action,
 .docs-revisions-chromecover-titlebar-second-button-action,
@@ -972,7 +1007,7 @@ canvas.kix-canvas-tile-content {
 .docos-emoji-reaction-doco-view .docs-material-menu-button-raised-default,
 .docos-docoview-active .docos-emoji-reaction-doco-view-emojis :not(.docs-material-button-focused).docs-material-button-flat-primary,
 .apps-search-popup-menu,
-.docs-gm .docos-anchoreddocoview:hover,
+body.docs-gm:not(.docs-grille-gm3) .docos-anchoreddocoview:hover,
 .docs-gm .docos-anchoreddocoview.docos-docoview-active,
 .docs-gm .docos-anchoreddocoview.docos-docoview-active:hover,
 .kix-dropdown-item-selection-bubble,
@@ -984,7 +1019,8 @@ canvas.kix-canvas-tile-content {
   box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
 }
 
-.docs-gm.docos-xeditor .docos-streamdocoview:hover {
+.docs-gm.docos-xeditor .docos-streamdocoview:hover,
+.docs-gm .docs-toolbar-more-bubble {
   box-shadow: 0 14px 28px rgba(0, 0, 0, 0.125), 0 10px 10px rgba(0, 0, 0, 0.11);
 }
 
@@ -994,7 +1030,7 @@ canvas.kix-canvas-tile-content {
 .docs-gm .docs-revisions-sidebar,
 .left-sidebar-container.pageless-format,
 .docs-gm .docos-emoji-reaction-doco-view.docos-anchoreddocoview:hover,
-.docs-gm .docs-sidebar-tile.docs-sidebar-tile-expanded,
+/* .docs-gm .docs-sidebar-tile.docs-sidebar-tile-expanded, */
 .docs-explore-searchbar-labelinput {
   box-shadow: none;
 }
@@ -1200,7 +1236,8 @@ canvas.kix-canvas-tile-content {
 }
 
 #request-access-icon,
-.QLUvIe.ihNnYc:before {
+.QLUvIe.ihNnYc:before,
+.QLUvIe.lFiY0b:before {
   background-image: var(--access_denied);
   background-image: image-set(var(--access_denied) 1x,
       var(--access_denied_600) 2x);
@@ -1296,7 +1333,8 @@ a:link,
 .docos-show-more,
 .docos-show-less,
 .docs-explore-dictionaryentry-sense-synonym-clickable,
-.docs-explore-dictionaryentry-sense-antonym-clickable {
+.docs-explore-dictionaryentry-sense-antonym-clickable,
+.kix-spellcheck-with-explanation-bubble .kix-spellcheck-with-explanation-bubble-action {
   color: var(--accent-text) !important;
 }
 
@@ -1399,7 +1437,7 @@ span.docs-material-gm-checkbox-checked.docs-material-gm-checkbox-focused,
 .docs-gm .modal-dialog .goog-buttonset-action,
 .docs-gm .modal-dialog .jfk-button-action,
 .docs-gm .docs-material-bubble .jfk-button-action,
-.docs-gm #docs-titlebar-share-client-button .jfk-button,
+.docs-gm:not(.docs-grille-gm3) #docs-titlebar-share-client-button .jfk-button,
 .docs-revisions-chromecover-titlebar-button-action,
 .docs-revisions-chromecover-titlebar-second-button-action,
 .docs-dropdown-item-custom-color-menu-cancel-button {
@@ -1467,8 +1505,8 @@ span.docs-material-gm-checkbox-checked.docs-material-gm-checkbox-focused,
   height: 39px;
 }
 
-.docs-gm .docs-tiled-sidebar-header,
-.docs-gm .docs-dictionary-titlebar {
+body.docs-gm:not(.docs-grille-gm3) .docs-tiled-sidebar-header,
+body.docs-gm:not(.docs-grille-gm3) .docs-dictionary-titlebar {
   height: 52px;
 }
 
@@ -1476,7 +1514,7 @@ span.docs-material-gm-checkbox-checked.docs-material-gm-checkbox-focused,
   opacity: 1;
 }
 
-.docs-number-input-container input {
+body.docs-gm:not(.docs-grille-gm3) .docs-number-input-container input {
   padding-left: 10%;
 }
 
@@ -1491,6 +1529,9 @@ span.docs-material-gm-checkbox-checked.docs-material-gm-checkbox-focused,
 
 .kix-appview-editor canvas {
   filter: var(--document_invert);
+}
+
+.docs-gm:not(.docs-grille-gm3) .kix-appview-editor canvas {
   background: var(--document_background) !important;
 }
 
@@ -1508,8 +1549,8 @@ span.docs-material-gm-checkbox-checked.docs-material-gm-checkbox-focused,
   box-shadow: var(--document_border);
 }
 
-.docs-gm .modal-dialog button:hover,
-.docs-gm .modal-dialog .jfk-button-standard.jfk-button-hover {
+.docs-gm:not(.docs-grille-gm3) .modal-dialog button:hover,
+.docs-gm:not(.docs-grille-gm3) .modal-dialog .jfk-button-standard.jfk-button-hover {
   font-weight: 400;
 }
 
@@ -1565,4 +1606,353 @@ span.docs-material-gm-checkbox-checked.docs-material-gm-checkbox-focused,
 /* restore border unset */
 .docs-gm .docos-emoji-reaction-doco-view.docos-anchoreddocoview {
   border: unset !important;
+}
+
+/* material design 3 specific css */
+
+.docs-grille-gm3.docs-gm .docs-material #docs-toolbar-wrapper,
+.docs-grille-gm3 .docos-anchoreddocoview,
+.docs-grille-gm3 .docos-anchoreddocoview-input-pane {
+  border: none !important;
+}
+
+.docs-grille-gm3 .docos-input .docos-input-textarea,
+.docs-grille-gm3 .docos-input .docos-input-textarea:focus,
+.docs-grille-gm3 .docos-streamdocoview-input-pane .docos-input-textarea,
+.docs-grille-gm3 .docos-streamdocoview-input-pane.docos-input .docos-input-textarea:focus {
+  color: var(--primary-text-color);
+}
+
+.docs-grille-gm3 .docos-anchoreddocoview .docos-anchoredreplyview,
+.docs-grille-gm3 .docos-anchoreddocoview-input-pane {
+  border-color: var(--primary-border-color);
+}
+
+.docs-grille-gm3.docs-gm #docs-header:not(.docs-hub-appbar) .docs-titlebar-buttons,
+.docs-grille-gm3 #docs-chrome:not(.docs-hub-chrome),
+.docs-grille-gm3 #kix-horizontal-ruler,
+.docs-grille-gm3 #kix-vertical-ruler.ac-active.docs-grille-gm3 .docs-horizontal-ruler,
+.docs-grille-gm3 .docs-ruler-background-inner,
+.docs-grille-gm3 .docs-vertical-ruler,
+.docs-grille-gm3 .docs-revisions-chromecover-content-color-default.ac-active.docs-gm .docs-linkbubble-bubble,
+.docs-grille-gm3 .docs-multi-linkbubble-bubble,
+.docs-grille-gm3 .docs-link-smartinsertlinkbubble-text-label,
+.docs-grille-gm3 .docs-slidingdialog {
+  background: var(--primary-background-color) !important;
+}
+
+.docs-grille-gm3.docs-gm .docs-material #docs-toolbar-wrapper {
+  background: var(--secondary-background-color) !important;
+}
+
+.docs-grille-gm3.docs-gm #docs-toolbar-mode-switcher,
+.docs-grille-gm3 #docs-align-palette,
+.docs-grille-gm3.docs-body-pageless #docs-align-palette,
+.docs-grille-gm3.docs-body-pageless #docs-align-palette .goog-toolbar-button,
+.docs-grille-gm3.docs-body-pageless .docs-main-toolbars .goog-toolbar-button,
+.docs-grille-gm3.docs-body-pageless .docs-main-toolbars .goog-toolbar-combo-button,
+.docs-grille-gm3.docs-body-pageless .docs-main-toolbars .goog-toolbar-menu-button,
+.docs-grille-gm3.docs-body-pageless .docs-toolbar-more-toolbar,
+.docs-grille-gm3.docs-body-pageless.docs-gm #docs-toolbar-wrapper,
+.docs-grille-gm3.docs-gm.docs-body-pageless #docs-toolbar-mode-switcher {
+  background: var(--secondary-background-color);
+}
+
+.docs-grille-gm3 .docos-stream-emoji-header-container,
+.docs-grille-gm3 .docos-xeditor .docos-streamdocoview-header-container,
+.docs-grille #titlebar-mode-indicator-container>.docs-material-menu-button-flat-primary-focused,
+.docs-grille .titlebar-request-access-button.docs-material-button.docs-material-button-focused {
+  background: var(--hover-background-color);
+}
+
+.docs-grille .docs-titlebar-badge .docs-save-indicator-icon:hover,
+.docs-grille .docs-titlebar-badge:hover,
+.docs-grille #docs-star.docs-titlebar-badge:active,
+.docs-grille .docs-titlebar-badge:active,
+.docs-grille .docs-titlebar-badge:focus,
+.docs-grille .goog-control-active .docs-titlebar-badge .docs-save-indicator-icon,
+.docs-grille .goog-control-focused .docs-titlebar-badge .docs-save-indicator-icon {
+  background-color: var(--hover-background-color);
+}
+
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview,
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview .docos-anchoredreplyview,
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview-input-pane,
+.docs-grille-gm3 .docos-anchoreddocoview .docos-anchoredreplyview,
+.docs-grille-gm3 .docos-anchoreddocoview-input-pane,
+.docs-grille-gm3 .docos-anchoreddocoview,
+.docs-grille-gm3 .docos-anchoreddocoview .docos-anchoredreplyview,
+.docs-grille-gm3 .docos-anchoreddocoview-input-pane,
+.docs-grille-gm3 .docos-anchoreddocoview .docos-show-less,
+.docs-grille-gm3 .docos-anchoreddocoview .docos-show-more,
+.docs-grille-gm3 .docos-replyview-first .docos-show-more,
+.docs-grille-gm3 .docos-showrepliesbutton-collapsed-internal-container,
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview .docos-show-less,
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview .docos-show-more,
+.docs-grille-gm3.docs-body-pageless .docos-replyview-first .docos-show-more,
+.docs-grille-gm3.docs-body-pageless .docos-showrepliesbutton-collapsed-internal-container {
+  background: var(--gm3-comment-background);
+}
+
+.docs-grille-gm3 .docos-anchoreddocoview:hover,
+.docs-grille-gm3 .docos-anchoreddocoview:hover .docos-anchoreddocoview-input-pane,
+.docs-grille-gm3 .docos-anchoreddocoview:hover .docos-anchoredreplyview,
+.docs-grille-gm3 .docos-anchoreddocoview.docos-docoview-tesla-conflict:hover .docos-show-more,
+.docs-grille-gm3 .docos-anchoreddocoview:hover .docos-replyview-first .docos-show-more,
+.docs-grille-gm3 .docos-anchoreddocoview:hover .docos-show-less,
+.docs-grille-gm3 .docos-anchoreddocoview:hover .docos-show-more,
+.docs-grille-gm3 .docos-anchoreddocoview.docos-docoview-active .docos-showrepliesbutton-collapsed-internal-container,
+.docs-grille-gm3 .docos-anchoreddocoview:hover .docos-showrepliesbutton-collapsed-internal-container,
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview:hover,
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview:hover .docos-anchoreddocoview-input-pane,
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview:hover .docos-anchoredreplyview,
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview.docos-docoview-tesla-conflict:hover .docos-show-more,
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview:hover .docos-replyview-first .docos-show-more,
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview:hover .docos-show-less,
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview:hover .docos-show-more,
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview.docos-docoview-active .docos-showrepliesbutton-collapsed-internal-container,
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview:hover .docos-showrepliesbutton-collapsed-internal-container {
+  background: var(--gm3-comment-hover);
+}
+
+.docs-grille-gm3 #kix-vertical-ruler:before,
+.docs-grille-gm3.docs-gm .docos-anchoreddocoview.docos-docoview-active,
+.docs-grille-gm3.docs-gm .docos-anchoreddocoview.docos-docoview-active:hover,
+.docs-grille-gm3.docs-gm .docos-docoview-active .docos-anchoreddocoview-input-pane,
+.docs-grille-gm3.docs-gm .docos-docoview-active .docos-anchoredreplyview,
+.docs-grille-gm3.docs-gm .docos-docoview-active:hover .docos-anchoreddocoview-input-pane,
+.docs-grille-gm3.docs-gm .docos-docoview-active:hover .docos-anchoredreplyview,
+.docs-grille-gm3 .docos-input .docos-input-textarea,
+.docs-grille-gm3 .docos-input .docos-input-textarea:focus,
+.docs-grille-gm3 .docos-streamdocoview-input-pane .docos-input-textarea,
+.docs-grille-gm3 .docos-streamdocoview-input-pane.docos-input .docos-input-textarea:focus,
+.docs-grille-gm3 .docos.docs-gm .jfk-button.jfk-button-standard,
+.docs-grille-gm3.docs-gm .docos-anchoreddocoview.docos-docoview-active .docos-show-less,
+.docs-grille-gm3.docs-gm .docos-anchoreddocoview.docos-docoview-active .docos-show-more,
+.docs-grille-gm3.docs-gm .docos-docoview-active.docos-docoview-tesla-conflict:hover .docos-show-morem,
+.docs-grille-gm3 #docs-instant-bubble,
+.docs-grille-gm3 .left-sidebar-container.pageless-format,
+.docs-grille-gm3.docs-gm .docos-anchoreddocoview.docos-docoview-active .docos-show-less,
+.docs-grille-gm3.docs-gm .docos-anchoreddocoview.docos-docoview-active .docos-show-more,
+.docs-grille-gm3.docs-gm .docos-docoview-active.docos-docoview-tesla-conflict:hover .docos-show-more {
+  background: var(--primary-background-color);
+}
+
+.docs-grille-gm3 .kix-appview-editor,
+body.docs-grille-gm3,
+.docs-grille-gm3.docs-body-pageless .docs-horizontal-ruler,
+.docs-grille-gm3.docs-body-pageless .docs-ruler-background-inner,
+.docs-grille-gm3.docs-body-pageless .docs-vertical-ruler {
+  background-color: var(--primary-background-color) !important;
+}
+
+.docs-grille-gm3.docs-body-pageless .docs-revisions-chromecover-content-color-default,
+.docs-grille-gm3 .docs-revisions-chromecover-content-color-default,
+.companion-collapser-button.app-switcher-button-checked .app-switcher-button-icon-background,
+.companion-theme-light .companion-collapser-button.app-switcher-button-checked .app-switcher-button-icon-background {
+  background-color: var(--primary-background-color);
+}
+
+.right-gutter-resizer-handle-grabber {
+  background-color: var(--primary-border-color);
+}
+
+.docs-grille-gm3.docs-body-pageless .kix-appview-editor[style*="background-image: linear-gradient"] {
+  background-image: linear-gradient(var(--primary-border-color), var(--primary-border-color)), linear-gradient(var(--primary-background-color), var(--primary-background-color)) !important;
+}
+
+.docs-grille-gm3 .docs-horizontal-ruler .docs-ruler-background-inner {
+  border-bottom: 1px solid var(--lighter-border-color);
+}
+
+.right-gutter-resizer-ghost-line,
+.left-sidebar-resizer-ghost-line {
+  background: var(--lighter-border-color);
+}
+
+.docs-grille-gm3 .left-sidebar-container.pageless-format {
+  box-shadow: 1px 0 0 0 var(--primary-border-color);
+}
+
+.right-gutter-resizer-handle-grabber {
+  border: 1px solid var(--lighter-border-color);
+}
+
+.docs-grille-gm3 .kix-page-paginated {
+  outline: var(--gm3_document_border);
+}
+
+.docs-grille-gm3 .docs-gm.docos-xeditor .docos-streamdocoview {
+  outline: 1px solid var(--primary-border-color);
+}
+
+.docs-grille-gm3 #docs-align-palette .goog-toolbar-button,
+.docs-grille-gm3 .docs-main-toolbars .goog-toolbar-button,
+.docs-grille-gm3 .docs-main-toolbars .goog-toolbar-combo-button,
+.docs-grille-gm3 .docs-main-toolbars .goog-toolbar-menu-button,
+.docs-grille-gm3 .trix-palette .goog-toolbar-menu-button {
+  background: transparent;
+}
+
+.docs-grille-gm3 #fontSizeSelect.docs-font-size-inc-dec-combobox.goog-toolbar-combo-button {
+  border: 1px solid var(--secondary-border-color) !important;
+}
+
+.docs-grille-gm3 .docos.docs-gm .jfk-button.jfk-button-standard,
+.docs-grille-gm3 .docos-input .docos-input-textarea,
+.docs-grille-gm3 .docos-input .docos-input-textarea:focus,
+.docs-grille-gm3 .docos-streamdocoview-input-pane .docos-input-textarea,
+.docs-grille-gm3 .docos-streamdocoview-input-pane.docos-input .docos-input-textarea:focus,
+.docs-grille-gm3 .docos.docs-gm .jfk-button.jfk-button-standard.jfk-button-hover {
+  border: 1px solid var(--primary-border-color) !important;
+}
+
+.docos-anchoreddocoview .docos-showrepliesbutton-line {
+  border-top: 1px solid var(--primary-border-color);
+}
+
+.docs-grille-gm3 .docos.docs-gm .jfk-button.jfk-button-standard.jfk-button-hover {
+  background: var(--accent-text-hover);
+}
+
+.docs-grille-gm3 #zoomSelect.docs-toolbar-zoom-combobox.goog-toolbar-combo-button-open,
+.docs-grille-gm3 #fontSizeSelect.docs-font-size-inc-dec-combobox.goog-toolbar-combo-button-open {
+  border: 2px solid var(--accent-text) !important;
+}
+
+.docs-grille-gm3 .docs-main-toolbars .goog-toolbar-button .docs-icon,
+.docs-grille-gm3 .docs-main-toolbars .goog-toolbar-menu-button .docs-icon {
+  filter: brightness(1.6);
+}
+
+.docs-grille-gm3 #docs-toolbar-wrapper .docs-icon-img,
+.docs-grille-gm3 .docs-toolbar-more-toolbar .docs-icon-img {
+  filter: brightness(2);
+}
+
+.docs-grille-gm3 #docs-toolbar-mode-switcher.suggest-mode .docs-icon-img,
+.docs-grille-gm3 #docs-toolbar-mode-switcher.suggest-mode .docs-icon-img:before,
+/* experimental */
+.docs-grille-gm3 #docs-align-palette .goog-toolbar-button-checked .docs-icon-img,
+.docs-grille-gm3 .docs-main-toolbars .goog-toolbar-button-checked .docs-icon-img,
+.docs-grille-gm3 .docs-main-toolbars .goog-toolbar-button.goog-toolbar-button-checked .docs-icon-img,
+.docs-grille-gm3.docs-gm .clean-palette .goog-palette-cell-selected .docs-icon-img,
+.docs-grille-gm3.docs-gm .trix-palette .goog-palette-cell-selected .docs-icon-img {
+  filter: brightness(4);
+}
+
+.docs-grille-gm3 #docs-omnibox-toolbar .docs-omnibox-input::placeholder,
+.docs-gm .docs-link-searchinput-search::placeholder,
+.docs-grille-gm3 .docs-omnibox-input.jfk-textinput::placeholder,
+.docs-grille-gm3 .docs-findinput-input::placeholder,
+.docs-grille-gm3 .docos-input-contenteditable:empty:before,
+.docs-gm .goog-menuitem .docs-display-density-toolbar-menuitem-description,
+.docs-gm .goog-menuitem .docs-toolbar-mode-switcher-menu-description,
+.docs-gm .goog-menuitem .punch-qanda-presenter-view-menu-item-description {
+  color: var(--tertiary-text-color);
+}
+
+.docs-grille .kix-titlebar-approvals-button .docs-material-menu-button-flat-primary-dropdown-icon [fill="#000"],
+.docs-grille .kix-titlebar-mode-switcher .docs-material-menu-button-flat-primary-dropdown-icon [fill="#000"] {
+  fill: var(--primary-border-color);
+}
+
+.docs-grille-gm3 .outline-refresh.navigation-widget-unified-styling .navigation-widget-empty-content {
+  color: var(--tertiary-text-color) !important;
+}
+
+.docs-grille-gm3 #docs-titlebar-share-client-button .jfk-button {
+  background: var(--button-background-color);
+  color: var(--primary-text-color);
+}
+
+.docs-grille-gm3 #docs-titlebar-share-client-button .jfk-button .scb-button-icon {
+  filter: grayscale(100%) invert(100%) brightness(2);
+}
+
+.docs-grille-gm3 #docs-titlebar-share-client-button .jfk-button.jfk-button-hover {
+  color: inherit;
+}
+
+.docs-grille-gm3 #docs-toolbar-mode-switcher .goog-toolbar-menu-button-caption,
+.docs-grille-gm3 .docos-anchoreddocoview .docos-showrepliesbutton-collapsed-internal,
+.docs-grille-gm3 .docos-showrepliesbutton-collapsed {
+  color: var(--secondary-text-color);
+}
+
+.docs-grille-gm3 .docos-anchoredreplyview .docos-anchoredreplyview-body span,
+.docs-grille-gm3 .docos-streamdocoview-body .docos-replyview-body span,
+.docs-grille-gm3 .docos-anchoredreplyview .docos-anchoredreplyview-body [style*="color:#333"] {
+  color: var(--secondary-text-color) !important;
+}
+
+.docs-grille-gm3 .docos-anchoredreplyview .docos-anchoredreplyview-body span[style*="font-weight:bold"],
+.docs-grille-gm3 .docos-streamdocoview-body .docos-replyview-body span[style*="font-weight:bold"] {
+  color: var(--primary-text-color) !important;
+}
+
+.docs-grille-gm3 .docs-smart-link-searchinput-search-container,
+.docs-grille-gm3 .docs-material-bubble .jfk-textinput,
+.docs-grille-gm3 .docs-material-gm-dialog .jfk-textinput,
+.docs-grille-gm3 .modal-dialog .jfk-textinput,
+.docs-gm .docs-findinput-container,
+.docs-gm .docs-gotoinput-container {
+  background-color: inherit !important;
+}
+
+.docs-grille-gm3 #docs-omnibox-toolbar .docs-omnibox-input,
+.docs-grille-gm3 .docs-omnibox-input.jfk-textinput:active,
+.docs-grille-gm3 .docs-omnibox-input.jfk-textinput:focus {
+  background: var(--input-background-color);
+}
+
+.docs-grille-gm3 .docos.docs-gm .jfk-button.jfk-button-standard,
+.docs-grille-gm3 .docos.docs-gm .jfk-button.jfk-button-standard.jfk-button-hover,
+.docs-grille-gm3 .docos-anchoreddocoview.docos-docoview-active .docos-showrepliesbutton-collapsed-internal,
+.docs-grille-gm3 .docos-anchoreddocoview:hover .docos-showrepliesbutton-collapsed-internal,
+.docs-grille-gm3 #docs-toolbar-mode-switcher.suggest-mode .goog-toolbar-menu-button-caption,
+.docs-grille-gm3 .outline-refresh .navigation-item.location-indicator-highlight .navigation-item-content,
+.docs-grille-gm3 .outline-refresh .navigation-item.location-indicator-highlight .navigation-item-content.goog-button-hover {
+  color: var(--accent-text);
+}
+
+.docs-grille-gm3 .docos-anchoreddocoview .docos-showrepliesbutton-collapsed-internal:hover {
+  background-color: var(--accent-text-hover);
+}
+
+.docs-grille-gm3 .docs-material.docs-toolbar-more-bubble .jfk-bubble-arrowup .jfk-bubble-arrowimplafter,
+.docs-grille-gm3 .docs-material.docs-toolbar-more-bubble .jfk-bubble-arrowup .jfk-bubble-arrowimplbefore,
+.docs-grille-gm3 .docs-gm-promo.jfk-bubble.jfk-bubble-promo.docs-promo-bubble .jfk-bubble-arrowimplbefore,
+.docs-grille-gm3 #docs-meet-in-editors-entrypointbutton {
+  border-color: transparent !important;
+}
+
+.docs-grille-gm3 .kix-smart-summary-view-separator {
+  background: var(--primary-border-color);
+}
+
+.docs-grille-gm3 .docos.docs-gm .jfk-button.jfk-button-action.jfk-button-disabled {
+  background: var(--disabled-text);
+}
+
+/* production verbatim */
+.docs-grille-gm3 .docs-gm .docos-streamdocoview.docos-docoview-resolved:hover,
+.docs-grille-gm3 .docs-gm.docos-xeditor .docos-streamdocoview:hover {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 6px 2px rgba(0, 0, 0, .15);
+}
+
+.docs-gm .docs-sidebar-tile.docs-sidebar-tile-expanded {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .15);
+}
+
+.docs-sidebar-tile-header.docs-sidebar-tile-header-disabled {
+  color: var(--disabled-text);
+}
+
+.docs-grille-gm3 #docs-chrome:not(.docs-hub-chrome) {
+  border-color: transparent;
+}
+
+.docs-grille .docs-material #docs-header .docs-titlebar-buttons {
+  height: 64px;
 }
\ No newline at end of file
diff --git a/src/firefox/manifest.json b/src/firefox/manifest.json
index 87d585b..3901e26 100644
--- a/src/firefox/manifest.json
+++ b/src/firefox/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "DocsAfterDark",
-  "version": "0.5.3",
+  "version": "0.6.0",
   "description": "Modern, dark mode for Google Docs",
   "author": "Raymond Wang",
   "content_scripts": [
diff --git a/src/firefox/popup.html b/src/firefox/popup.html
index 234439e..d9dc5b6 100644
--- a/src/firefox/popup.html
+++ b/src/firefox/popup.html
@@ -1,77 +1,90 @@
 <!DOCTYPE html>
 <html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="stylesheet" href="popup.css" />
+        <link rel="stylesheet" href="special.css" />
+        <title>DocsAfterDark Settings</title>
+    </head>
 
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="popup.css">
-    <link rel="stylesheet" href="special.css">
-    <title>DocsAfterDark Settings</title>
-</head>
-
-<body>
-    <div id="main">
-        <p>DocsAfterDark Options</p>
-        <p class="menu_bar_label">Global Toggle</p>
-        <div id="on_off" class="menu_bar">
-            <button id="on">On</button>
-            <button id="off">Off</button>
-        </div>
-        <p class="menu_bar_label">Invert Options</p>
-        <div id="invert_container">
-            <div class="input">
-                <input type="checkbox" id="invert" name="invert"><label for="invert">Invert</label>
+    <body>
+        <div id="main">
+            <p>DocsAfterDark Options</p>
+            <p class="menu_bar_label">Global Toggle</p>
+            <div id="on_off" class="menu_bar">
+                <button id="on">On</button>
+                <button id="off">Off</button>
             </div>
-            <div class="input">
-                <input type="checkbox" id="grayscale" name="grayscale"><label for="grayscale">Grayscale</label>
-            </div>
-        </div>
-        <p class="menu_bar_label">Document Background<span class="__firefox-exclude">&nbsp;(May Be Unstable)</span></p>
-        <div id="document_bg" class="menu_bar">
-            <button id="default">
-                <div>
-                    Default
-                </div>
-            </button>
-            <button id="shade">
-                <div>
-                    Shade
-                </div>
-            </button>
-            <button id="dark">
-                <div>
-                    Dark
-                </div>
-            </button>
-            <button id="black">
-                <div>
-                    Black
+            <p class="menu_bar_label">Invert Options</p>
+            <div id="invert_container">
+                <div class="input">
+                    <input type="checkbox" id="invert" name="invert" /><label
+                        for="invert"
+                        >Invert</label
+                    >
                 </div>
-            </button>
-            <button id="custom">
-                <div>
-                    Custom
+                <div class="input">
+                    <input
+                        type="checkbox"
+                        id="grayscale"
+                        name="grayscale" /><label for="grayscale"
+                        >Grayscale</label
+                    >
                 </div>
-            </button>
-        </div>
-        <input id="custom_input" class="hidden" placeholder="Custom Color/CSS">
-        <button id="save_custom" class="hidden">Save</button>
-        <p id="description"></p>
-        <div id="document_border_container">
-            <p class="menu_bar_label">Document Border</p>
-            <input type="checkbox" id="show_border" name="show_border"><label for="show_border">Show Border</label>
-        </div>
-        <div id="toggle_button_container">
-            <p class="menu_bar_label">Toggle Button Options</p>
-            <input type="checkbox" id="raise_button" name="raise_button"><label for="raise_button">Raise Button</label>
+            </div>
+            <p class="menu_bar_label">
+                Document Background<span class="__firefox-exclude"
+                    >&nbsp;(May Be Unstable)</span
+                >
+            </p>
+            <div id="document_bg" class="menu_bar">
+                <button id="default">
+                    <div>Default</div>
+                </button>
+                <button id="shade">
+                    <div>Shade</div>
+                </button>
+                <button id="dark">
+                    <div>Dark</div>
+                </button>
+                <button id="black">
+                    <div>Black</div>
+                </button>
+                <button id="custom">
+                    <div>Custom</div>
+                </button>
+            </div>
+            <input
+                id="custom_input"
+                class="hidden"
+                placeholder="Custom Color/CSS" />
+            <button id="save_custom" class="hidden">Save</button>
+            <p id="description"></p>
+            <div id="document_border_container">
+                <p class="menu_bar_label">Document Border</p>
+                <input
+                    type="checkbox"
+                    id="show_border"
+                    name="show_border" /><label for="show_border"
+                    >Show Border</label
+                >
+            </div>
+            <div id="toggle_button_container">
+                <p class="menu_bar_label">Toggle Button Options</p>
+                <input
+                    type="checkbox"
+                    id="raise_button"
+                    name="raise_button" /><label for="raise_button"
+                    >Raise Button</label
+                >
+            </div>
+            <footer>
+                <p id="version"></p>
+                <a id="donate">Donate</a>
+            </footer>
         </div>
-        <footer>
-            <p id="version"></p>
-            <a id="donate">Donate</a>
-        </footer>
-    </div>
-    <script src="popup.js"></script>
-</body>
-
-</html>
\ No newline at end of file
+        <script src="popup.js"></script>
+    </body>
+</html>
diff --git a/src/firefox/word.js b/src/firefox/word.js
index d763ee0..7d86e8a 100644
--- a/src/firefox/word.js
+++ b/src/firefox/word.js
@@ -10,6 +10,7 @@ const link_color = "#90caf9";
 const invert_value = "invert(1)";
 const grayscale_value = "contrast(79%) grayscale(100%)";
 const page_border = "0 0 0 1px";
+const gm3_page_border = "1px solid #404040";
 const backgrounds = {
   default: "#ffffff",
   shade: "#999999",
@@ -18,7 +19,7 @@ const backgrounds = {
 };
 const default_background = "default";
 const update_text_style =
-  "border: 1px solid #4d4d4d; background-color: #212121; padding: 8px 12px; border-radius: 6px; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); font-size: 12px;"; // use fixed font size
+  "border: 1px solid #4d4d4d; background-color: #212121; padding: 8px 12px; border-radius: 6px; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); font-size: 12px; font-family: Google Sans,Roboto,sans-serif;"; // use fixed font size
 const close_button_style =
   "background-color: #4d4d4d; border-radius: 2px; color: #64b5f6; border: none; cursor: pointer; margin-left: 12px; font-size: inherit;";
 const update_notification_style =
@@ -196,11 +197,17 @@ function set_up() {
           ? (grayscale ? grayscale_value + " " : "") + invert_value
           : "none"
       );
+
       document.documentElement.style.setProperty(
         "--document_border",
         show_border ? page_border : "none"
       );
 
+      document.documentElement.style.setProperty(
+        "--gm3_document_border",
+        show_border ? gm3_page_border : "none"
+      );
+
       // Do not create notification if not needed
 
       // Show update notification if data.updates is not set or if it is
@@ -325,6 +332,14 @@ function set_up() {
         changes.show_border.newValue ? page_border : "none"
       );
     }
+
+    // Handle show border option change
+    if (Object.keys(changes).includes("show_border")) {
+      document.documentElement.style.setProperty(
+        "--gm3_document_border",
+        changes.show_border.newValue ? gm3_page_border : "none"
+      );
+    }
   });
 }
 
diff --git a/src/opera/default.css b/src/opera/default.css
index f423d07..8146424 100644
--- a/src/opera/default.css
+++ b/src/opera/default.css
@@ -10,4 +10,4 @@
   padding: 2px 8px;
   z-index: 2500000000;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-}
+}
\ No newline at end of file
diff --git a/src/opera/docs.css b/src/opera/docs.css
index 8812f9c..3e9b40e 100644
--- a/src/opera/docs.css
+++ b/src/opera/docs.css
@@ -5,7 +5,6 @@
   --hover-background-color: #333333;
   --input-background-color: #404040;
 
-  /* buttons */
   --button-background-color: #4d4d4d;
   --button-background-color-hover: #2196f3;
   --button-background-color-focus: #2196f3;
@@ -17,15 +16,20 @@
 
   --primary-border-color: #4d4d4d;
   --secondary-border-color: #404040;
+  --lighter-border-color: #808080;
 
   --primary-text-color: #f2f2f2;
   --secondary-text-color: #cccccc;
   --tertiary-text-color: #999999;
   --disabled-text: #666666;
   --accent-text: #64b5f6;
+  --accent-text-hover: #64b5f608;
 
   --comment-active: #1e88e5;
   --comment-hover: #2196f3;
+
+  --gm3-comment-background: #202427;
+  --gm3-comment-hover: #252D34;
 }
 
 /* text colors */
@@ -103,7 +107,14 @@ textarea,
 .docs-gm .docos-anchoredreplyview-header .docos-anchoredreplyview-author,
 .docs-gm .docs-dictionary-titlebar,
 .docs-gm .docs-explore-dictionaryentry-title,
-.docs-gm .docs-explore-dictionaryentries {
+.docs-gm .docs-explore-dictionaryentries,
+/* generated css classes, volatile */
+.hA3Ymb,
+.vhoiae .hA3Ymb,
+.X9XeLb .hA3Ymb,
+.cWKK1c .hA3Ymb,
+.aJfoSc .hA3Ymb,
+.TOb6Ze .hA3Ymb {
   color: var(--primary-text-color);
 }
 
@@ -115,8 +126,9 @@ input,
 #gb a.gb_1.gb_1,
 #accounts-button,
 #accounts-button :last-child,
-.docs-gm .docos-anchoredreplyview .docos-anchoredreplyview-body *,
-.docos-streamdocoview-body * {
+body.docs-gm:not(.docs-grille-gm3) .docos-anchoredreplyview .docos-anchoredreplyview-body *,
+.docos-streamdocoview-body *,
+.TBnIgc:not(.VfPpkd-fmcmS-yrriRe-OWXEXe-OWB6Me) .VfPpkd-fmcmS-wGMbrd {
   color: var(--primary-text-color) !important;
 }
 
@@ -198,7 +210,8 @@ svg.kix-dropdown-item-selection-button-icon {
 .kix-spellcheck-with-explanation-bubble .kix-spellcheck-with-explanation-bubble-explanation-text,
 .docos-ssd-content p,
 .docos-ssd-radio-button-group .jfk-radiobutton-label span,
-.docs-embeddedcontentpastedialog-message {
+.docs-embeddedcontentpastedialog-message,
+.docs-indentationdialoggm-indentation-special-type.docs-indentationdialoggm-control.jfk-select .goog-flat-menu-button-caption {
   color: var(--secondary-text-color) !important;
 }
 
@@ -326,7 +339,7 @@ svg.kix-configure-dropdown-button-add-icon {
 body,
 .docs-gm #docs-editor,
 .docs-gm #docs-editor-container,
-.kix-appview-editor,
+.docs-gm:not(.docs-grille-gm3) .kix-appview-editor,
 .apps-shortcutshelpcontentimpl-container,
 .apps-shortcutshelppopup {
   background: var(--primary-background-color) !important;
@@ -334,10 +347,10 @@ body,
 
 /* secondary background color */
 
-.docs-gm #kix-vertical-ruler,
+body.docs-gm:not(.docs-grille-gm3) #kix-vertical-ruler,
 .docs-ruler-contributed-dragger-container,
 .docs-ruler-contributed-dragger-container,
-.companion-app-switcher-container,
+body.docs-gm:not(.docs-grille-gm3) .companion-app-switcher-container,
 .docs-gm .docs-horizontal-ruler,
 .docs-material #docs-header .docs-titlebar-buttons,
 .jfk-bubble,
@@ -346,7 +359,7 @@ body,
 .docs-omnibox-autocomplete .ac-renderer,
 .docs-material #docs-equationtoolbar,
 .docs-material .docs-printpreview-toolbar,
-.docs-gm .docs-revisions-chromecover-content-color-default,
+body.docs-gm:not(.docs-grille-gm3) .docs-revisions-chromecover-content-color-default,
 .docs-gm .docs-revisions-sidebar-header,
 .docs-gm .docs-revisions-sidebar-date-group,
 .docs-revisions-sidebar,
@@ -364,7 +377,7 @@ body,
 .docos-emoji-counter-button-tooltip,
 .docs-material-menu-button-raised-default,
 .docs-material-button-raised-default,
-.docs-gm .docos-anchoreddocoview,
+body.docs-gm:not(.docs-grille-gm3) .docos-anchoreddocoview,
 .apps-search-popup-menu,
 .goog-char-picker-hovercard,
 .docs-gm .goog-zippy-expanded.docs-sidebar-tile-header,
@@ -375,17 +388,22 @@ body,
 .docs-docos-activitybox,
 .docs-gm .docos-streampane-header,
 .docs-gm .docs-dictionary-titlebar,
-.docs-dictionary-sidebar {
+.docs-dictionary-sidebar,
+#innerContainer div[style*="background"] {
   background-color: var(--secondary-background-color) !important;
 }
 
+.yYWAMb {
+  background: var(--primary-background-color);
+}
+
 #docs-chrome,
 .docs-material #docs-toolbar-wrapper,
 #kix-vertical-ruler,
 .docs-material.docs-toolbar-more-toolbar,
 .docos-anchoreddocoview .docos-replyview-first.docos-anchoredreplyview,
 .docs-gm .docos-anchoredreplyview,
-.docs-gm .docos-showrepliesbutton,
+body.docs-gm:not(.docs-grille-gm3) .docos-showrepliesbutton,
 .docs-gm .docos-anchoreddocoview-input-pane,
 #docs-meet-in-editors-entrypointbutton,
 .docs-gm .docs-ui-toast,
@@ -449,7 +467,15 @@ body,
 .docos-subscription-settings-button .docs-material-button-focused.docs-material-button-flat-default,
 .docos-subscription-settings-button .docs-material-button-active.docs-material-button-flat-default,
 .docs-explore-searchbar-labelinput:focus,
-.docs-sidebar-gm-titlebar-icon-button:focus {
+.docs-sidebar-gm-titlebar-icon-button:focus,
+.docs-grille-gm3 .docs-navigation-tab-button-hover .docs-navigation-tab-button-outer-box,
+.docs-grille-gm3 .navigation-widget-hat-close.goog-flat-button-hover .navigation-widget-hat-close-button-outer-box,
+.docs-grille .docs-material #docs-docos-commentsbutton.jfk-button.jfk-button-active,
+.docs-grille .docs-material #docs-docos-commentsbutton.jfk-button.jfk-button-checked,
+.docs-grille .docs-material #docs-docos-commentsbutton.jfk-button.jfk-button-focused,
+.docs-grille .docs-material #docs-docos-commentsbutton:focus,
+.docs-grille .docs-material .docs-appbar-circle-button.jfk-button-active,
+.docs-grille .docs-material .docs-appbar-circle-button.jfk-button-checked {
   /* although not hover elements, some elements may use the
     hover-background-color to differentiate themselves from the
     secondary-background-color */
@@ -480,7 +506,7 @@ body,
 .docs-gm .docs-material .docs-toolbar-split-create-button.goog-toolbar-menu-button-active,
 .docs-gm .docs-material .docs-toolbar-split-create-button.goog-toolbar-menu-button-open,
 .docs-gm .docs-material.trix-palette .goog-palette-cell-selected,
-#docs-toolbar-mode-switcher.edit-mode,
+.docs-gm:not(.docs-grille-gm3) #docs-toolbar-mode-switcher.edit-mode,
 .docs-omnibox-material-style .docs-omnibox-input.jfk-textinput,
 .app-switcher-button-hover .app-switcher-button-icon-background,
 .app-switcher-button-open .app-switcher-button-icon-background,
@@ -530,10 +556,17 @@ body,
 .smart-canvas-date-details-icon-button:focus,
 .smart-canvas-date-details-bubble-pattern-picker-button:hover,
 .smart-canvas-date-details-bubble-pattern-picker-button:focus,
-.docs-gm .docos-assigneeview.docos-assignee-other {
+.docs-gm .docos-assigneeview.docos-assignee-other,
+#docs-revisions-appbarbutton.jfk-button-disabled:hover,
+#docs-revisions-appbarbutton.jfk-button-hover,
+.docs-grille .docs-material #docs-docos-commentsbutton.jfk-button.jfk-button-hover {
   background-color: var(--hover-background-color) !important;
 }
 
+.fWf7qe:not(.RDPZE):hover .Yalane {
+  background-color: var(--hover-background-color);
+}
+
 /* hover background border */
 
 .docs-gm.docos-xeditor .docos-streamdocoview:hover {
@@ -568,7 +601,8 @@ body,
 .docs-gm .docs-docos-activity-sidebar .docos-input-typing>.docos-input-textarea,
 .docos-streamdocoview-input-pane .docos-input-textarea,
 .docs-explore-searchbar-labelinput {
-  background-color: var(--input-background-color) !important;
+  background-color: var(--input-background-color);
+  /* omitted !important */
 }
 
 /* header in changes saved to drive popup */
@@ -675,14 +709,15 @@ body,
 .docs-emoji-picker,
 .docs-emoji-picker-search-bar-container,
 .docs-emoji-picker-variants-popup,
-.docs-gm .docos-anchoreddocoview:hover,
+body.docs-gm:not(.docs-grille-gm3) .docos-anchoreddocoview:hover,
 .kix-dropdown-entity-configuration-dialog-title-naming-component-input,
 .docs-dropdown-item-custom-color-menu-cancel-button,
 .docs-dropdown-item-custom-color-menu-okay-button,
 .docs-bubble,
 .docs-material-button-hairline-default.docs-material-button,
-.docs-gm.docos-xeditor .streamdocoview-no-header.docos-streamdocoview,
-.docos-ssd-content hr {
+body.docs-gm:not(.docs-grille-gm3) .docs-gm.docos-xeditor .streamdocoview-no-header.docos-streamdocoview,
+.docos-ssd-content hr,
+#innerContainer div[style*="background"] {
   border: 1px solid var(--primary-border-color) !important;
 }
 
@@ -750,7 +785,7 @@ body,
   border-right: 1px solid var(--primary-border-color) !important;
 }
 
-.companion-app-switcher-container,
+body.docs-gm:not(.docs-grille-gm3) .companion-app-switcher-container,
 .docs-gm .goog-toolbar-separator.goog-inline-block,
 .docs-slidingdialog,
 .docs-gm .docs-revisions-sidebar,
@@ -788,7 +823,6 @@ body,
 .docs-gm #docs-toolbar-wrapper,
 .apps-hoverable-menu-separator-container .apps-hoverable-menu-separator-bottom,
 .docs-gm .goog-menuseparator,
-.docs-gm .docos-showrepliesbutton,
 .docs-gm .docos-anchoreddocoview-input-pane,
 .kix-document-top-shadow.read-mode-titlebar-border,
 .docs-gm .docs-revisions-sidebar-name-filter-switch-container,
@@ -796,13 +830,14 @@ body,
 .docs-emoji-picker-categories,
 .docs-emoji-picker-quick-pick-container,
 .apps-shortcutshelpcontentimpl-tearoff-link-container,
-.docs-gm .docs-tiled-sidebar-header,
+body.docs-gm:not(.docs-grille-gm3) .docs-tiled-sidebar-header,
 .docs-gm .docos-anchoredreplyview,
-.docs-gm .docos-showrepliesbutton,
+body.docs-gm:not(.docs-grille-gm3) .docos-showrepliesbutton,
 .docs-gm .docos-anchoreddocoview-input-pane,
-.docs-gm .docs-sidebar-tile.docs-sidebar-tile-expanded,
+body.docs-gm:not(.docs-grille-gm3) .docs-sidebar-tile.docs-sidebar-tile-expanded,
 .smart-canvas-date-details-bubble-action-bar,
-.docs-gm .docs-dictionary-titlebar {
+.docs-gm .docs-dictionary-titlebar,
+.kix-spellcheck-with-explanation-bubble .kix-spellcheck-with-explanation-bubble-action {
   border-top: 1px solid var(--primary-border-color);
 }
 
@@ -868,7 +903,7 @@ body,
 .docs-parent-collections-container:focus,
 #titlebar-mode-indicator-container>div,
 .docs-gm .docs-save-indicator-popup.jfk-bubble,
-.docs-gm #docs-titlebar-share-client-button .jfk-button,
+.docs-gm:not(.docs-grille-gm3) #docs-titlebar-share-client-button .jfk-button,
 .docs-omnibox-autocomplete .ac-renderer,
 .docs-revisions-chromecover-titlebar-button-action,
 .docs-revisions-chromecover-titlebar-second-button-action,
@@ -972,7 +1007,7 @@ canvas.kix-canvas-tile-content {
 .docos-emoji-reaction-doco-view .docs-material-menu-button-raised-default,
 .docos-docoview-active .docos-emoji-reaction-doco-view-emojis :not(.docs-material-button-focused).docs-material-button-flat-primary,
 .apps-search-popup-menu,
-.docs-gm .docos-anchoreddocoview:hover,
+body.docs-gm:not(.docs-grille-gm3) .docos-anchoreddocoview:hover,
 .docs-gm .docos-anchoreddocoview.docos-docoview-active,
 .docs-gm .docos-anchoreddocoview.docos-docoview-active:hover,
 .kix-dropdown-item-selection-bubble,
@@ -984,7 +1019,8 @@ canvas.kix-canvas-tile-content {
   box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
 }
 
-.docs-gm.docos-xeditor .docos-streamdocoview:hover {
+.docs-gm.docos-xeditor .docos-streamdocoview:hover,
+.docs-gm .docs-toolbar-more-bubble {
   box-shadow: 0 14px 28px rgba(0, 0, 0, 0.125), 0 10px 10px rgba(0, 0, 0, 0.11);
 }
 
@@ -994,7 +1030,7 @@ canvas.kix-canvas-tile-content {
 .docs-gm .docs-revisions-sidebar,
 .left-sidebar-container.pageless-format,
 .docs-gm .docos-emoji-reaction-doco-view.docos-anchoreddocoview:hover,
-.docs-gm .docs-sidebar-tile.docs-sidebar-tile-expanded,
+/* .docs-gm .docs-sidebar-tile.docs-sidebar-tile-expanded, */
 .docs-explore-searchbar-labelinput {
   box-shadow: none;
 }
@@ -1200,7 +1236,8 @@ canvas.kix-canvas-tile-content {
 }
 
 #request-access-icon,
-.QLUvIe.ihNnYc:before {
+.QLUvIe.ihNnYc:before,
+.QLUvIe.lFiY0b:before {
   background-image: var(--access_denied);
   background-image: image-set(var(--access_denied) 1x,
       var(--access_denied_600) 2x);
@@ -1296,7 +1333,8 @@ a:link,
 .docos-show-more,
 .docos-show-less,
 .docs-explore-dictionaryentry-sense-synonym-clickable,
-.docs-explore-dictionaryentry-sense-antonym-clickable {
+.docs-explore-dictionaryentry-sense-antonym-clickable,
+.kix-spellcheck-with-explanation-bubble .kix-spellcheck-with-explanation-bubble-action {
   color: var(--accent-text) !important;
 }
 
@@ -1399,7 +1437,7 @@ span.docs-material-gm-checkbox-checked.docs-material-gm-checkbox-focused,
 .docs-gm .modal-dialog .goog-buttonset-action,
 .docs-gm .modal-dialog .jfk-button-action,
 .docs-gm .docs-material-bubble .jfk-button-action,
-.docs-gm #docs-titlebar-share-client-button .jfk-button,
+.docs-gm:not(.docs-grille-gm3) #docs-titlebar-share-client-button .jfk-button,
 .docs-revisions-chromecover-titlebar-button-action,
 .docs-revisions-chromecover-titlebar-second-button-action,
 .docs-dropdown-item-custom-color-menu-cancel-button {
@@ -1467,8 +1505,8 @@ span.docs-material-gm-checkbox-checked.docs-material-gm-checkbox-focused,
   height: 39px;
 }
 
-.docs-gm .docs-tiled-sidebar-header,
-.docs-gm .docs-dictionary-titlebar {
+body.docs-gm:not(.docs-grille-gm3) .docs-tiled-sidebar-header,
+body.docs-gm:not(.docs-grille-gm3) .docs-dictionary-titlebar {
   height: 52px;
 }
 
@@ -1476,7 +1514,7 @@ span.docs-material-gm-checkbox-checked.docs-material-gm-checkbox-focused,
   opacity: 1;
 }
 
-.docs-number-input-container input {
+body.docs-gm:not(.docs-grille-gm3) .docs-number-input-container input {
   padding-left: 10%;
 }
 
@@ -1491,6 +1529,9 @@ span.docs-material-gm-checkbox-checked.docs-material-gm-checkbox-focused,
 
 .kix-appview-editor canvas {
   filter: var(--document_invert);
+}
+
+.docs-gm:not(.docs-grille-gm3) .kix-appview-editor canvas {
   background: var(--document_background) !important;
 }
 
@@ -1508,8 +1549,8 @@ span.docs-material-gm-checkbox-checked.docs-material-gm-checkbox-focused,
   box-shadow: var(--document_border);
 }
 
-.docs-gm .modal-dialog button:hover,
-.docs-gm .modal-dialog .jfk-button-standard.jfk-button-hover {
+.docs-gm:not(.docs-grille-gm3) .modal-dialog button:hover,
+.docs-gm:not(.docs-grille-gm3) .modal-dialog .jfk-button-standard.jfk-button-hover {
   font-weight: 400;
 }
 
@@ -1565,4 +1606,353 @@ span.docs-material-gm-checkbox-checked.docs-material-gm-checkbox-focused,
 /* restore border unset */
 .docs-gm .docos-emoji-reaction-doco-view.docos-anchoreddocoview {
   border: unset !important;
+}
+
+/* material design 3 specific css */
+
+.docs-grille-gm3.docs-gm .docs-material #docs-toolbar-wrapper,
+.docs-grille-gm3 .docos-anchoreddocoview,
+.docs-grille-gm3 .docos-anchoreddocoview-input-pane {
+  border: none !important;
+}
+
+.docs-grille-gm3 .docos-input .docos-input-textarea,
+.docs-grille-gm3 .docos-input .docos-input-textarea:focus,
+.docs-grille-gm3 .docos-streamdocoview-input-pane .docos-input-textarea,
+.docs-grille-gm3 .docos-streamdocoview-input-pane.docos-input .docos-input-textarea:focus {
+  color: var(--primary-text-color);
+}
+
+.docs-grille-gm3 .docos-anchoreddocoview .docos-anchoredreplyview,
+.docs-grille-gm3 .docos-anchoreddocoview-input-pane {
+  border-color: var(--primary-border-color);
+}
+
+.docs-grille-gm3.docs-gm #docs-header:not(.docs-hub-appbar) .docs-titlebar-buttons,
+.docs-grille-gm3 #docs-chrome:not(.docs-hub-chrome),
+.docs-grille-gm3 #kix-horizontal-ruler,
+.docs-grille-gm3 #kix-vertical-ruler.ac-active.docs-grille-gm3 .docs-horizontal-ruler,
+.docs-grille-gm3 .docs-ruler-background-inner,
+.docs-grille-gm3 .docs-vertical-ruler,
+.docs-grille-gm3 .docs-revisions-chromecover-content-color-default.ac-active.docs-gm .docs-linkbubble-bubble,
+.docs-grille-gm3 .docs-multi-linkbubble-bubble,
+.docs-grille-gm3 .docs-link-smartinsertlinkbubble-text-label,
+.docs-grille-gm3 .docs-slidingdialog {
+  background: var(--primary-background-color) !important;
+}
+
+.docs-grille-gm3.docs-gm .docs-material #docs-toolbar-wrapper {
+  background: var(--secondary-background-color) !important;
+}
+
+.docs-grille-gm3.docs-gm #docs-toolbar-mode-switcher,
+.docs-grille-gm3 #docs-align-palette,
+.docs-grille-gm3.docs-body-pageless #docs-align-palette,
+.docs-grille-gm3.docs-body-pageless #docs-align-palette .goog-toolbar-button,
+.docs-grille-gm3.docs-body-pageless .docs-main-toolbars .goog-toolbar-button,
+.docs-grille-gm3.docs-body-pageless .docs-main-toolbars .goog-toolbar-combo-button,
+.docs-grille-gm3.docs-body-pageless .docs-main-toolbars .goog-toolbar-menu-button,
+.docs-grille-gm3.docs-body-pageless .docs-toolbar-more-toolbar,
+.docs-grille-gm3.docs-body-pageless.docs-gm #docs-toolbar-wrapper,
+.docs-grille-gm3.docs-gm.docs-body-pageless #docs-toolbar-mode-switcher {
+  background: var(--secondary-background-color);
+}
+
+.docs-grille-gm3 .docos-stream-emoji-header-container,
+.docs-grille-gm3 .docos-xeditor .docos-streamdocoview-header-container,
+.docs-grille #titlebar-mode-indicator-container>.docs-material-menu-button-flat-primary-focused,
+.docs-grille .titlebar-request-access-button.docs-material-button.docs-material-button-focused {
+  background: var(--hover-background-color);
+}
+
+.docs-grille .docs-titlebar-badge .docs-save-indicator-icon:hover,
+.docs-grille .docs-titlebar-badge:hover,
+.docs-grille #docs-star.docs-titlebar-badge:active,
+.docs-grille .docs-titlebar-badge:active,
+.docs-grille .docs-titlebar-badge:focus,
+.docs-grille .goog-control-active .docs-titlebar-badge .docs-save-indicator-icon,
+.docs-grille .goog-control-focused .docs-titlebar-badge .docs-save-indicator-icon {
+  background-color: var(--hover-background-color);
+}
+
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview,
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview .docos-anchoredreplyview,
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview-input-pane,
+.docs-grille-gm3 .docos-anchoreddocoview .docos-anchoredreplyview,
+.docs-grille-gm3 .docos-anchoreddocoview-input-pane,
+.docs-grille-gm3 .docos-anchoreddocoview,
+.docs-grille-gm3 .docos-anchoreddocoview .docos-anchoredreplyview,
+.docs-grille-gm3 .docos-anchoreddocoview-input-pane,
+.docs-grille-gm3 .docos-anchoreddocoview .docos-show-less,
+.docs-grille-gm3 .docos-anchoreddocoview .docos-show-more,
+.docs-grille-gm3 .docos-replyview-first .docos-show-more,
+.docs-grille-gm3 .docos-showrepliesbutton-collapsed-internal-container,
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview .docos-show-less,
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview .docos-show-more,
+.docs-grille-gm3.docs-body-pageless .docos-replyview-first .docos-show-more,
+.docs-grille-gm3.docs-body-pageless .docos-showrepliesbutton-collapsed-internal-container {
+  background: var(--gm3-comment-background);
+}
+
+.docs-grille-gm3 .docos-anchoreddocoview:hover,
+.docs-grille-gm3 .docos-anchoreddocoview:hover .docos-anchoreddocoview-input-pane,
+.docs-grille-gm3 .docos-anchoreddocoview:hover .docos-anchoredreplyview,
+.docs-grille-gm3 .docos-anchoreddocoview.docos-docoview-tesla-conflict:hover .docos-show-more,
+.docs-grille-gm3 .docos-anchoreddocoview:hover .docos-replyview-first .docos-show-more,
+.docs-grille-gm3 .docos-anchoreddocoview:hover .docos-show-less,
+.docs-grille-gm3 .docos-anchoreddocoview:hover .docos-show-more,
+.docs-grille-gm3 .docos-anchoreddocoview.docos-docoview-active .docos-showrepliesbutton-collapsed-internal-container,
+.docs-grille-gm3 .docos-anchoreddocoview:hover .docos-showrepliesbutton-collapsed-internal-container,
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview:hover,
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview:hover .docos-anchoreddocoview-input-pane,
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview:hover .docos-anchoredreplyview,
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview.docos-docoview-tesla-conflict:hover .docos-show-more,
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview:hover .docos-replyview-first .docos-show-more,
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview:hover .docos-show-less,
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview:hover .docos-show-more,
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview.docos-docoview-active .docos-showrepliesbutton-collapsed-internal-container,
+.docs-grille-gm3.docs-body-pageless .docos-anchoreddocoview:hover .docos-showrepliesbutton-collapsed-internal-container {
+  background: var(--gm3-comment-hover);
+}
+
+.docs-grille-gm3 #kix-vertical-ruler:before,
+.docs-grille-gm3.docs-gm .docos-anchoreddocoview.docos-docoview-active,
+.docs-grille-gm3.docs-gm .docos-anchoreddocoview.docos-docoview-active:hover,
+.docs-grille-gm3.docs-gm .docos-docoview-active .docos-anchoreddocoview-input-pane,
+.docs-grille-gm3.docs-gm .docos-docoview-active .docos-anchoredreplyview,
+.docs-grille-gm3.docs-gm .docos-docoview-active:hover .docos-anchoreddocoview-input-pane,
+.docs-grille-gm3.docs-gm .docos-docoview-active:hover .docos-anchoredreplyview,
+.docs-grille-gm3 .docos-input .docos-input-textarea,
+.docs-grille-gm3 .docos-input .docos-input-textarea:focus,
+.docs-grille-gm3 .docos-streamdocoview-input-pane .docos-input-textarea,
+.docs-grille-gm3 .docos-streamdocoview-input-pane.docos-input .docos-input-textarea:focus,
+.docs-grille-gm3 .docos.docs-gm .jfk-button.jfk-button-standard,
+.docs-grille-gm3.docs-gm .docos-anchoreddocoview.docos-docoview-active .docos-show-less,
+.docs-grille-gm3.docs-gm .docos-anchoreddocoview.docos-docoview-active .docos-show-more,
+.docs-grille-gm3.docs-gm .docos-docoview-active.docos-docoview-tesla-conflict:hover .docos-show-morem,
+.docs-grille-gm3 #docs-instant-bubble,
+.docs-grille-gm3 .left-sidebar-container.pageless-format,
+.docs-grille-gm3.docs-gm .docos-anchoreddocoview.docos-docoview-active .docos-show-less,
+.docs-grille-gm3.docs-gm .docos-anchoreddocoview.docos-docoview-active .docos-show-more,
+.docs-grille-gm3.docs-gm .docos-docoview-active.docos-docoview-tesla-conflict:hover .docos-show-more {
+  background: var(--primary-background-color);
+}
+
+.docs-grille-gm3 .kix-appview-editor,
+body.docs-grille-gm3,
+.docs-grille-gm3.docs-body-pageless .docs-horizontal-ruler,
+.docs-grille-gm3.docs-body-pageless .docs-ruler-background-inner,
+.docs-grille-gm3.docs-body-pageless .docs-vertical-ruler {
+  background-color: var(--primary-background-color) !important;
+}
+
+.docs-grille-gm3.docs-body-pageless .docs-revisions-chromecover-content-color-default,
+.docs-grille-gm3 .docs-revisions-chromecover-content-color-default,
+.companion-collapser-button.app-switcher-button-checked .app-switcher-button-icon-background,
+.companion-theme-light .companion-collapser-button.app-switcher-button-checked .app-switcher-button-icon-background {
+  background-color: var(--primary-background-color);
+}
+
+.right-gutter-resizer-handle-grabber {
+  background-color: var(--primary-border-color);
+}
+
+.docs-grille-gm3.docs-body-pageless .kix-appview-editor[style*="background-image: linear-gradient"] {
+  background-image: linear-gradient(var(--primary-border-color), var(--primary-border-color)), linear-gradient(var(--primary-background-color), var(--primary-background-color)) !important;
+}
+
+.docs-grille-gm3 .docs-horizontal-ruler .docs-ruler-background-inner {
+  border-bottom: 1px solid var(--lighter-border-color);
+}
+
+.right-gutter-resizer-ghost-line,
+.left-sidebar-resizer-ghost-line {
+  background: var(--lighter-border-color);
+}
+
+.docs-grille-gm3 .left-sidebar-container.pageless-format {
+  box-shadow: 1px 0 0 0 var(--primary-border-color);
+}
+
+.right-gutter-resizer-handle-grabber {
+  border: 1px solid var(--lighter-border-color);
+}
+
+.docs-grille-gm3 .kix-page-paginated {
+  outline: var(--gm3_document_border);
+}
+
+.docs-grille-gm3 .docs-gm.docos-xeditor .docos-streamdocoview {
+  outline: 1px solid var(--primary-border-color);
+}
+
+.docs-grille-gm3 #docs-align-palette .goog-toolbar-button,
+.docs-grille-gm3 .docs-main-toolbars .goog-toolbar-button,
+.docs-grille-gm3 .docs-main-toolbars .goog-toolbar-combo-button,
+.docs-grille-gm3 .docs-main-toolbars .goog-toolbar-menu-button,
+.docs-grille-gm3 .trix-palette .goog-toolbar-menu-button {
+  background: transparent;
+}
+
+.docs-grille-gm3 #fontSizeSelect.docs-font-size-inc-dec-combobox.goog-toolbar-combo-button {
+  border: 1px solid var(--secondary-border-color) !important;
+}
+
+.docs-grille-gm3 .docos.docs-gm .jfk-button.jfk-button-standard,
+.docs-grille-gm3 .docos-input .docos-input-textarea,
+.docs-grille-gm3 .docos-input .docos-input-textarea:focus,
+.docs-grille-gm3 .docos-streamdocoview-input-pane .docos-input-textarea,
+.docs-grille-gm3 .docos-streamdocoview-input-pane.docos-input .docos-input-textarea:focus,
+.docs-grille-gm3 .docos.docs-gm .jfk-button.jfk-button-standard.jfk-button-hover {
+  border: 1px solid var(--primary-border-color) !important;
+}
+
+.docos-anchoreddocoview .docos-showrepliesbutton-line {
+  border-top: 1px solid var(--primary-border-color);
+}
+
+.docs-grille-gm3 .docos.docs-gm .jfk-button.jfk-button-standard.jfk-button-hover {
+  background: var(--accent-text-hover);
+}
+
+.docs-grille-gm3 #zoomSelect.docs-toolbar-zoom-combobox.goog-toolbar-combo-button-open,
+.docs-grille-gm3 #fontSizeSelect.docs-font-size-inc-dec-combobox.goog-toolbar-combo-button-open {
+  border: 2px solid var(--accent-text) !important;
+}
+
+.docs-grille-gm3 .docs-main-toolbars .goog-toolbar-button .docs-icon,
+.docs-grille-gm3 .docs-main-toolbars .goog-toolbar-menu-button .docs-icon {
+  filter: brightness(1.6);
+}
+
+.docs-grille-gm3 #docs-toolbar-wrapper .docs-icon-img,
+.docs-grille-gm3 .docs-toolbar-more-toolbar .docs-icon-img {
+  filter: brightness(2);
+}
+
+.docs-grille-gm3 #docs-toolbar-mode-switcher.suggest-mode .docs-icon-img,
+.docs-grille-gm3 #docs-toolbar-mode-switcher.suggest-mode .docs-icon-img:before,
+/* experimental */
+.docs-grille-gm3 #docs-align-palette .goog-toolbar-button-checked .docs-icon-img,
+.docs-grille-gm3 .docs-main-toolbars .goog-toolbar-button-checked .docs-icon-img,
+.docs-grille-gm3 .docs-main-toolbars .goog-toolbar-button.goog-toolbar-button-checked .docs-icon-img,
+.docs-grille-gm3.docs-gm .clean-palette .goog-palette-cell-selected .docs-icon-img,
+.docs-grille-gm3.docs-gm .trix-palette .goog-palette-cell-selected .docs-icon-img {
+  filter: brightness(4);
+}
+
+.docs-grille-gm3 #docs-omnibox-toolbar .docs-omnibox-input::placeholder,
+.docs-gm .docs-link-searchinput-search::placeholder,
+.docs-grille-gm3 .docs-omnibox-input.jfk-textinput::placeholder,
+.docs-grille-gm3 .docs-findinput-input::placeholder,
+.docs-grille-gm3 .docos-input-contenteditable:empty:before,
+.docs-gm .goog-menuitem .docs-display-density-toolbar-menuitem-description,
+.docs-gm .goog-menuitem .docs-toolbar-mode-switcher-menu-description,
+.docs-gm .goog-menuitem .punch-qanda-presenter-view-menu-item-description {
+  color: var(--tertiary-text-color);
+}
+
+.docs-grille .kix-titlebar-approvals-button .docs-material-menu-button-flat-primary-dropdown-icon [fill="#000"],
+.docs-grille .kix-titlebar-mode-switcher .docs-material-menu-button-flat-primary-dropdown-icon [fill="#000"] {
+  fill: var(--primary-border-color);
+}
+
+.docs-grille-gm3 .outline-refresh.navigation-widget-unified-styling .navigation-widget-empty-content {
+  color: var(--tertiary-text-color) !important;
+}
+
+.docs-grille-gm3 #docs-titlebar-share-client-button .jfk-button {
+  background: var(--button-background-color);
+  color: var(--primary-text-color);
+}
+
+.docs-grille-gm3 #docs-titlebar-share-client-button .jfk-button .scb-button-icon {
+  filter: grayscale(100%) invert(100%) brightness(2);
+}
+
+.docs-grille-gm3 #docs-titlebar-share-client-button .jfk-button.jfk-button-hover {
+  color: inherit;
+}
+
+.docs-grille-gm3 #docs-toolbar-mode-switcher .goog-toolbar-menu-button-caption,
+.docs-grille-gm3 .docos-anchoreddocoview .docos-showrepliesbutton-collapsed-internal,
+.docs-grille-gm3 .docos-showrepliesbutton-collapsed {
+  color: var(--secondary-text-color);
+}
+
+.docs-grille-gm3 .docos-anchoredreplyview .docos-anchoredreplyview-body span,
+.docs-grille-gm3 .docos-streamdocoview-body .docos-replyview-body span,
+.docs-grille-gm3 .docos-anchoredreplyview .docos-anchoredreplyview-body [style*="color:#333"] {
+  color: var(--secondary-text-color) !important;
+}
+
+.docs-grille-gm3 .docos-anchoredreplyview .docos-anchoredreplyview-body span[style*="font-weight:bold"],
+.docs-grille-gm3 .docos-streamdocoview-body .docos-replyview-body span[style*="font-weight:bold"] {
+  color: var(--primary-text-color) !important;
+}
+
+.docs-grille-gm3 .docs-smart-link-searchinput-search-container,
+.docs-grille-gm3 .docs-material-bubble .jfk-textinput,
+.docs-grille-gm3 .docs-material-gm-dialog .jfk-textinput,
+.docs-grille-gm3 .modal-dialog .jfk-textinput,
+.docs-gm .docs-findinput-container,
+.docs-gm .docs-gotoinput-container {
+  background-color: inherit !important;
+}
+
+.docs-grille-gm3 #docs-omnibox-toolbar .docs-omnibox-input,
+.docs-grille-gm3 .docs-omnibox-input.jfk-textinput:active,
+.docs-grille-gm3 .docs-omnibox-input.jfk-textinput:focus {
+  background: var(--input-background-color);
+}
+
+.docs-grille-gm3 .docos.docs-gm .jfk-button.jfk-button-standard,
+.docs-grille-gm3 .docos.docs-gm .jfk-button.jfk-button-standard.jfk-button-hover,
+.docs-grille-gm3 .docos-anchoreddocoview.docos-docoview-active .docos-showrepliesbutton-collapsed-internal,
+.docs-grille-gm3 .docos-anchoreddocoview:hover .docos-showrepliesbutton-collapsed-internal,
+.docs-grille-gm3 #docs-toolbar-mode-switcher.suggest-mode .goog-toolbar-menu-button-caption,
+.docs-grille-gm3 .outline-refresh .navigation-item.location-indicator-highlight .navigation-item-content,
+.docs-grille-gm3 .outline-refresh .navigation-item.location-indicator-highlight .navigation-item-content.goog-button-hover {
+  color: var(--accent-text);
+}
+
+.docs-grille-gm3 .docos-anchoreddocoview .docos-showrepliesbutton-collapsed-internal:hover {
+  background-color: var(--accent-text-hover);
+}
+
+.docs-grille-gm3 .docs-material.docs-toolbar-more-bubble .jfk-bubble-arrowup .jfk-bubble-arrowimplafter,
+.docs-grille-gm3 .docs-material.docs-toolbar-more-bubble .jfk-bubble-arrowup .jfk-bubble-arrowimplbefore,
+.docs-grille-gm3 .docs-gm-promo.jfk-bubble.jfk-bubble-promo.docs-promo-bubble .jfk-bubble-arrowimplbefore,
+.docs-grille-gm3 #docs-meet-in-editors-entrypointbutton {
+  border-color: transparent !important;
+}
+
+.docs-grille-gm3 .kix-smart-summary-view-separator {
+  background: var(--primary-border-color);
+}
+
+.docs-grille-gm3 .docos.docs-gm .jfk-button.jfk-button-action.jfk-button-disabled {
+  background: var(--disabled-text);
+}
+
+/* production verbatim */
+.docs-grille-gm3 .docs-gm .docos-streamdocoview.docos-docoview-resolved:hover,
+.docs-grille-gm3 .docs-gm.docos-xeditor .docos-streamdocoview:hover {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 6px 2px rgba(0, 0, 0, .15);
+}
+
+.docs-gm .docs-sidebar-tile.docs-sidebar-tile-expanded {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .15);
+}
+
+.docs-sidebar-tile-header.docs-sidebar-tile-header-disabled {
+  color: var(--disabled-text);
+}
+
+.docs-grille-gm3 #docs-chrome:not(.docs-hub-chrome) {
+  border-color: transparent;
+}
+
+.docs-grille .docs-material #docs-header .docs-titlebar-buttons {
+  height: 64px;
 }
\ No newline at end of file
diff --git a/src/opera/manifest.json b/src/opera/manifest.json
index 2a4113e..374b068 100644
--- a/src/opera/manifest.json
+++ b/src/opera/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "DocsAfterDark",
-  "version": "0.5.3",
+  "version": "0.6.0",
   "description": "Modern, dark mode for Google Docs",
   "author": "Raymond Wang",
   "content_scripts": [
diff --git a/src/opera/popup.html b/src/opera/popup.html
index 234439e..d9dc5b6 100644
--- a/src/opera/popup.html
+++ b/src/opera/popup.html
@@ -1,77 +1,90 @@
 <!DOCTYPE html>
 <html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="stylesheet" href="popup.css" />
+        <link rel="stylesheet" href="special.css" />
+        <title>DocsAfterDark Settings</title>
+    </head>
 
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="popup.css">
-    <link rel="stylesheet" href="special.css">
-    <title>DocsAfterDark Settings</title>
-</head>
-
-<body>
-    <div id="main">
-        <p>DocsAfterDark Options</p>
-        <p class="menu_bar_label">Global Toggle</p>
-        <div id="on_off" class="menu_bar">
-            <button id="on">On</button>
-            <button id="off">Off</button>
-        </div>
-        <p class="menu_bar_label">Invert Options</p>
-        <div id="invert_container">
-            <div class="input">
-                <input type="checkbox" id="invert" name="invert"><label for="invert">Invert</label>
+    <body>
+        <div id="main">
+            <p>DocsAfterDark Options</p>
+            <p class="menu_bar_label">Global Toggle</p>
+            <div id="on_off" class="menu_bar">
+                <button id="on">On</button>
+                <button id="off">Off</button>
             </div>
-            <div class="input">
-                <input type="checkbox" id="grayscale" name="grayscale"><label for="grayscale">Grayscale</label>
-            </div>
-        </div>
-        <p class="menu_bar_label">Document Background<span class="__firefox-exclude">&nbsp;(May Be Unstable)</span></p>
-        <div id="document_bg" class="menu_bar">
-            <button id="default">
-                <div>
-                    Default
-                </div>
-            </button>
-            <button id="shade">
-                <div>
-                    Shade
-                </div>
-            </button>
-            <button id="dark">
-                <div>
-                    Dark
-                </div>
-            </button>
-            <button id="black">
-                <div>
-                    Black
+            <p class="menu_bar_label">Invert Options</p>
+            <div id="invert_container">
+                <div class="input">
+                    <input type="checkbox" id="invert" name="invert" /><label
+                        for="invert"
+                        >Invert</label
+                    >
                 </div>
-            </button>
-            <button id="custom">
-                <div>
-                    Custom
+                <div class="input">
+                    <input
+                        type="checkbox"
+                        id="grayscale"
+                        name="grayscale" /><label for="grayscale"
+                        >Grayscale</label
+                    >
                 </div>
-            </button>
-        </div>
-        <input id="custom_input" class="hidden" placeholder="Custom Color/CSS">
-        <button id="save_custom" class="hidden">Save</button>
-        <p id="description"></p>
-        <div id="document_border_container">
-            <p class="menu_bar_label">Document Border</p>
-            <input type="checkbox" id="show_border" name="show_border"><label for="show_border">Show Border</label>
-        </div>
-        <div id="toggle_button_container">
-            <p class="menu_bar_label">Toggle Button Options</p>
-            <input type="checkbox" id="raise_button" name="raise_button"><label for="raise_button">Raise Button</label>
+            </div>
+            <p class="menu_bar_label">
+                Document Background<span class="__firefox-exclude"
+                    >&nbsp;(May Be Unstable)</span
+                >
+            </p>
+            <div id="document_bg" class="menu_bar">
+                <button id="default">
+                    <div>Default</div>
+                </button>
+                <button id="shade">
+                    <div>Shade</div>
+                </button>
+                <button id="dark">
+                    <div>Dark</div>
+                </button>
+                <button id="black">
+                    <div>Black</div>
+                </button>
+                <button id="custom">
+                    <div>Custom</div>
+                </button>
+            </div>
+            <input
+                id="custom_input"
+                class="hidden"
+                placeholder="Custom Color/CSS" />
+            <button id="save_custom" class="hidden">Save</button>
+            <p id="description"></p>
+            <div id="document_border_container">
+                <p class="menu_bar_label">Document Border</p>
+                <input
+                    type="checkbox"
+                    id="show_border"
+                    name="show_border" /><label for="show_border"
+                    >Show Border</label
+                >
+            </div>
+            <div id="toggle_button_container">
+                <p class="menu_bar_label">Toggle Button Options</p>
+                <input
+                    type="checkbox"
+                    id="raise_button"
+                    name="raise_button" /><label for="raise_button"
+                    >Raise Button</label
+                >
+            </div>
+            <footer>
+                <p id="version"></p>
+                <a id="donate">Donate</a>
+            </footer>
         </div>
-        <footer>
-            <p id="version"></p>
-            <a id="donate">Donate</a>
-        </footer>
-    </div>
-    <script src="popup.js"></script>
-</body>
-
-</html>
\ No newline at end of file
+        <script src="popup.js"></script>
+    </body>
+</html>
diff --git a/src/opera/word.js b/src/opera/word.js
index 84c2d22..6815866 100644
--- a/src/opera/word.js
+++ b/src/opera/word.js
@@ -10,6 +10,7 @@ const link_color = "#90caf9";
 const invert_value = "invert(1)";
 const grayscale_value = "contrast(79%) grayscale(100%)";
 const page_border = "0 0 0 1px";
+const gm3_page_border = "1px solid #404040";
 const backgrounds = {
   default: "#ffffff",
   shade: "#999999",
@@ -18,7 +19,7 @@ const backgrounds = {
 };
 const default_background = "default";
 const update_text_style =
-  "border: 1px solid #4d4d4d; background-color: #212121; padding: 8px 12px; border-radius: 6px; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); font-size: 12px;"; // use fixed font size
+  "border: 1px solid #4d4d4d; background-color: #212121; padding: 8px 12px; border-radius: 6px; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); font-size: 12px; font-family: Google Sans,Roboto,sans-serif;"; // use fixed font size
 const close_button_style =
   "background-color: #4d4d4d; border-radius: 2px; color: #64b5f6; border: none; cursor: pointer; margin-left: 12px; font-size: inherit;";
 const update_notification_style =
@@ -196,11 +197,17 @@ function set_up() {
           ? (grayscale ? grayscale_value + " " : "") + invert_value
           : "none"
       );
+
       document.documentElement.style.setProperty(
         "--document_border",
         show_border ? page_border : "none"
       );
 
+      document.documentElement.style.setProperty(
+        "--gm3_document_border",
+        show_border ? gm3_page_border : "none"
+      );
+
       // Do not create notification if not needed
 
       // Show update notification if data.updates is not set or if it is
@@ -325,6 +332,14 @@ function set_up() {
         changes.show_border.newValue ? page_border : "none"
       );
     }
+
+    // Handle show border option change
+    if (Object.keys(changes).includes("show_border")) {
+      document.documentElement.style.setProperty(
+        "--gm3_document_border",
+        changes.show_border.newValue ? gm3_page_border : "none"
+      );
+    }
   });
 }