Skip to content

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

a google docs style that replicates the classic docs look. i may do icons, but that would be a grind

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...

Reviews

No reviews yet.