a google docs style that replicates the classic docs look. i may do icons, but that would be a grind
google docs 2012-2019 style (WIP) by ivyclaw22
Details
Authorivyclaw22
LicenseNo License
Categorydocs.google.com
Created
Updated
Size18 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
update 1: makes everything better. still no icons.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name docs.google.com - 9/1/2023, 4:47:54 PM
@namespace github.com/openstyles/stylus
@version 1.0.0
@description A new userstyle
@author Me
==/UserStyle== */
@-moz-document url-prefix("https://docs.google.com/document/") {
/* the bars (basic) */
.docs-grille-gm3.docs-gm .docs-material #docs-toolbar-wrapper {
background-color: #f5f5f5;
border-radius: 0px;
font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
margin: 0;
min-height: 35px;
padding: 0 44px 0 58px;
-webkit-font-smoothing: antialiased;
width: calc(100% - 102px) !important;
border-top: 1px solid #d9d9d9;
border-bottom: 1px solid #d9d9d9;
box-shadow: inset 0 1px 0 0 #fff;
background-image: linear-gradient(top, #f5f5f5, #eee);
background-image: -moz-linear-gradient(top, #f5f5f5, #eee);
}
.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 {
border-radius: 2px;
-webkit-user-select: none;
background: 0;
background-color: rgba(0, 0, 0, 0);
background-image: none;
border-color: transparent;
border-style: solid;
border-width: 1px;
outline: none;
padding: 0;
height: 24px;
color: #333;
line-height: 24px;
list-style: none;
font-weight: 700;
-webkit-text-decoration: none;
text-decoration: none;
vertical-align: middle;
cursor: default;
min-width: 0px;
margin: 4px 1px
}
.docs-grille-gm3 .trix-palette .goog-toolbar-menu-button-hover, .docs-grille-gm3.docs-gm #docs-align-palette .goog-toolbar-button-hover, .docs-grille-gm3.docs-gm .clean-palette .goog-palette-cell-hover, .docs-grille-gm3.docs-gm .docs-main-toolbars .goog-toolbar-button-hover, .docs-grille-gm3.docs-gm .docs-main-toolbars .goog-toolbar-menu-button-hover, .docs-grille-gm3.docs-gm .docs-toolbar-zoom-combobox.goog-toolbar-combo-button-hover {
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
background-color: #f8f8f8;
background-image: linear-gradient(top, #f8f8f8, #f1f1f1);
background-image: -moz-linear-gradient(top, #f8f8f8, #f1f1f1);
border-color: #c6c6c6 !important;
color: #222;
}
.docs-grille-gm3 .docs-main-toolbars .goog-toolbar-button-inner-box, .docs-grille-gm3 .docs-main-toolbars .goog-toolbar-menu-button-inner-box {
height: 25px;
min-width: 25px;
}
.docs-grille-gm3.docs-gm #docs-toolbar-mode-switcher {
border-radius: 2px;
-webkit-user-select: none;
background: 0;
border-color: transparent;
border-style: solid;
border-width: 1px;
outline: none;
padding: 0;
height: 24px;
color: #333;
line-height: 24px;
list-style: none;
font-weight: 700;
-webkit-text-decoration: none;
text-decoration: none;
vertical-align: middle;
cursor: default;
}
.docs-grille-gm3 .docs-main-toolbars .goog-toolbar-separator.goog-inline-block {
border-color: #d9d9d9;
margin: 0 5px 0 4px;
height: 35px;
}
body.docs-grille-gm3 {
background-color: #fff;
}
.docs-grille-gm3 #docs-chrome:not(.docs-hub-chrome) {
background: #fff;
border-bottom: none;
margin-bottom: 0px;
}
.docs-grille-gm3 #docs-header {
height: inherit !important;
}
.docs-material #docs-branding-container, .docs-material #docs-chrome-cover {
height: 60px;
margin-top: 0;
position: absolute;
width: 40px;
z-index: 1;
background-color: #4285f4;
}
.docs-grille-gm3 .docs-material #docs-branding-container .docs-branding-logo-no-link, .docs-grille-gm3 .docs-material #docs-branding-container a {
margin: 0;
padding: 0;
height: 60px;
width: 40px;
border-radius: 0%;
}
.docs-grille-gm3 .docs-material #docs-branding-container a, .docs-grille-gm3 .docs-material #docs-branding-logo, .docs-grille-gm3 .docs-material .docs-branding-icon {
height: 60px;
width: 40px;
}
.docs-material .docs-branding-icon-img::before {
content: url(https://ssl.gstatic.com/docs/common/branding_sprite1.svg);
}
.docs-material .docs-branding-icon-default, .docs-material .docs-branding-icon-drive, .docs-material .docs-branding-icon-forms, .docs-material .docs-branding-icon-scripts {
left: 0;
top: 0;
}
.docs-material .docs-branding-icon-documents-36 {
left: 0;
top: -180px;
}
.docs-grille-gm3 .docs-title-input:hover {
border-color: #e5e5e5;
}
.docs-grille-gm3 .docs-title-input {
background: none;
border-radius: 2px !important;
padding: 2px 7px;
color: #fff;
}
.docs-grille-gm3 .docs-title .docs-title-untitled, .docs-grille-gm3 .docs-title-input-label.docs-title-untitled {
color: #777;
font-style: italic;
}
.docs-grille-gm3 .docs-menubar .goog-control {
margin-bottom: 0px;
margin-top: 2px;
padding: 3px 7px 5px 7px;
overflow: hidden;
vertical-align: text-bottom;
}
.docs-grille-gm3 .docs-material #docs-menubar, .docs-grille-gm3 .docs-material #docs-titlebar-container {
margin-left: 52px;
height: 30px;
font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
}
.docs-grille-gm3 #docs-menubars {
height: inherit !important;
margin-top: 0px;
transition-duration: .1s;
}
.docs-gm .docs-menubar .goog-control {
border: 1px solid transparent;
border-radius: 0px;
color: inherit;
cursor: pointer;
font-size: 14px;
letter-spacing: normal;
}
.docs-grille-gm3 .docs-menubar .goog-control-hover, .docs-grille-gm3 .docs-menubar .goog-control-open {
background-color: #eee;
border-color: #eee !important;
}
.docs-grille-gm3 .docs-menubar .goog-control-open {
background: #fff;
background-color: rgb(255, 255, 255);
border: 1px solid rgba(0, 0, 0, .2)!important;
}
.docs-gm .goog-menu {
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}
.docs-gm .goog-menuitem {
color: #333;
font-size: 14px;
letter-spacing: normal;
line-height: 20px;
}
.docs-grille-gm3 #docs-titlebar-share-client-button .jfk-button, .docs-grille-gm3 #scb-quick-actions-menu-button.goog-flat-menu-button {
border: 1px solid #3079ed !important;
border-radius: 2px;
box-sizing: unset;
cursor: pointer;
font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 500;
height: 27px;
line-height: 27px;
padding: 0 8px;
white-space: nowrap;
background: #4d90fe;
background-image: none;
color: #fff;
background-image: linear-gradient(top, #4d90fe, #4787ed);
background-image: -moz-linear-gradient(top, #4d90fe, #4787ed);
}
.docs-grille-gm3 .scb-lock-s900/*this is an approximation.*/
{
background-position: 0 -587px;
}
.docs-grille-gm3 #docs-titlebar-share-client-button .jfk-button .scb-button-icon {
margin: -3px 2px 0 -5px;
}
.docs-grille-gm3 #docs-titlebar-share-client-button .jfk-button.jfk-button-hover, .docs-grille-gm3 #scb-quick-actions-menu-button.goog-flat-menu-button.goog-flat-menu-button-hover {
border: 1px solid #2f5bb7 !important;
border-radius: 2px;
box-sizing: unset;
cursor: pointer;
font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 500;
height: 27px;
line-height: 27px;
padding: 0 8px;
white-space: nowrap;
background: #c2e7ff;
color: #fff;
background: #357ae8;
background-image: none;
background-image: linear-gradient(top, #4d90fe, #357ae8);
background-image: -moz-linear-gradient(top, #4d90fe, #357ae8);
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}
.docs-grille-gm3 #docs-titlebar-share-client-button .jfk-button.jfk-button-hover:focus, .docs-grille-gm3 #scb-quick-actions-menu-button.goog-flat-menu-button.goog-flat-menu-button-hover:focus {
border: 1px solid transparent;
border-radius: 2px;
box-sizing: unset;
cursor: pointer;
font-family: Google Sans, Roboto, sans-serif;
font-size: 14px;
font-weight: 500;
height: 27px;
line-height: 27px;
padding: 0 8px;
white-space: nowrap;
color: #fff;
background: #357ae8;
background-image: none;
box-shadow: inset 0 0 0 1px #fff;
background-image: linear-gradient(top, #4d90fe, #357ae8);
background-image: -moz-linear-gradient(top, #4d90fe, #357ae8);
}
.docs-grille-gm3 #docs-titlebar-share-client-button .jfk-button:focus, .docs-grille-gm3 #scb-quick-actions-menu-button.goog-flat-menu-button:focus {
border: 1px solid transparent;
border-radius: 2px;
box-sizing: unset;
cursor: pointer;
font-family: Google Sans, Roboto, sans-serif;
font-size: 14px;
font-weight: 500;
height: 27px;
line-height: 27px;
padding: 0 8px;
white-space: nowrap;
color: #fff;
background: linear-gradient(top, #4d90fe, #4787ed);
box-shadow: inset 0 0 0 1px #fff;
background: -moz-linear-gradient(top, #4d90fe, #4787ed);
background-color: rgba(0, 0, 0, 0);
background-color: #4d90fe;
}
.docs-grille-gm3 .docs-main-toolbars .goog-toolbar-button.goog-toolbar-button-checked, .docs-grille-gm3.docs-gm #docs-align-palette .goog-toolbar-button-checked, .docs-grille-gm3.docs-gm .clean-palette .goog-palette-cell-selected, .docs-grille-gm3.docs-gm .trix-palette .goog-palette-cell-selected {
background-color: #eee;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
background-image: -moz-linear-gradient(top, #eee, #e0e0e0);
border-color: #ccc !important;
background-image: linear-gradient(top, #eee, #e0e0e0);
}
#docs-editor, #docs-editor-container {
background: #EDEDED;
}
.kix-appview-editor {
overflow-y: auto;
position: relative;
outline: none;
white-space: normal;
background-color: #EDEDED !important;
}
.docs-horizontal-ruler {
border-bottom: 1px solid #c4c7c5;
height: 15px;
background-color: #EDEDED !important;
}
.docs-gri...