Skip to content

Old Google Docs UI design (99.9% Accurate) by slimenderyt

Write a review Install Get Stylus

Details

Authorslimenderyt

LicenseNo License

Categorydocs.google.com/document

Created

Updated

Size25 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

This style brings back the normal google docs layout before they made it blue. (fixed URL prefix to only run on google docs and not slides/sheets)

Notes

Userstyle doesn't have notes.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name           Old Google Docs layout
@namespace      github.com/openstyles/stylus
@version        1.2.1
@description    A new userstyle
@author         marklenny242
==/UserStyle== */
@-moz-document url-prefix("https://docs.google.com/document") {
	/* BuxFixUpdate! Fixed Version history ui! fixed share button*/
	
	.docs-grille-gm3 #docs-titlebar-share-client-button .scb-split-button.jfk-button{
		    padding: 9px 16px 10px 12px!important;    
	}
	.docs-grille-gm3 #scb-quick-actions-menu-button.goog-flat-menu-button{
		display: none!important
	}
.docs-grille-version-history .docs-revisions-sidebar-header, .docs-grille-gm3 .docs-revisions-chromecover-content-color-default, .docs-grille-version-history.docs-revisions-sidebar{
		background-color: #fff!important;
	}
	
	.docs-grille-version-history .docs-revisions-sidebar-date-group{
		background-color: #f5f5f5!important;
	}
	
	.docs-revisions-tile-selected{
		background-color: #dbdada!important;
	}
	
	
	
.docs-revisions-chromecover-titlebar-button-action{
		    align-items: center!important;
    border-radius: 3px!important;
    display: flex;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    background-color: #4285f4!important;
    border: none;
    color: #fff;
    cursor: pointer;
    font-family: Google Sans,Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
    font-size: 14px!important;
    font-weight: 500!important;
    height: 36px!important;
    margin: 0 0 0 24px!important;
    outline: none!important;
    padding: 0 16px!important;
    text-transform: uppercase!important;
    white-space: nowrap!important;
    will-change: box-shadow,filter,background-color,color!important;
	}
	
	.docs-grille-version-history .docs-revisions-filter-selector .docs-material-gm-select-outer-box{
		       border: 1px solid #dadce0!important;
    border-radius: 4px!important;
    box-sizing: border-box!important;
    cursor: pointer!important;
    padding: 8px 6px 8px 8px!important;
	 margin: 0 15px 12px!important;
	}
	.docs-grille-version-history .docs-revisions-tile-text-box{
		font-size: 14px!important;
	}
	
	.docs-grille-version-history .docs-revisions-tile-selected .docs-revisions-tile-text-box{
		    color: #1a73e8!important;
		    font-weight: 400;
	}
	.docs-grille-version-history .docs-revisions-chromecover-titlebar-name-label{
		    font-weight: 400!important;
	}
	.docs-grille-version-history .docs-revisions-sidebar-title{
		    font-size: 16px!important;
		padding: 20px 16px!important;
	}
	.javascriptMaterialdesignGm3WizDialogRefactored-dialog--standard, .javascriptMaterialdesignGm3WizDialogRefactored-dialog__surface{
		border-radius: 3px!important
	} 
	
	.javascriptMaterialdesignGm3WizRipple-ripple{
			border-radius: 4px!important
	}
	
	
	
	.docs-grille-gm3 .docs-menubar{
		    font-size: 14px!important;
    font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif!important;
	}
	

	.kix-appview-editor{
		border-top: #e5e0e0 solid 1px
	}
	
	.docs-chat.jfk-button{
		    background-color: #e7e7e7!important;
	}
	
	.docs-grille-gm3 #docs-font-family .goog-toolbar-menu-button-caption, .docs-grille-gm3 #headingStyleSelect .goog-toolbar-menu-button-caption, .docs-grille-gm3 .docs-main-toolbars .docs-toolbar-text-button{
        font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif!important;
		    font-size: 12px!important;
	}
	
	
	#docs-omnibox-toolbar{
		display: none
	}
	.docs-titlebar-buttons{
		background: none!important;
	}	
	
 .docs-titlebar-buttons-view-mode{
		background-color: #ffff!important;
	}
	.docos-anchoreddocoview .docos-docoview-rootreply :only-child.docos-anchoredreplyview{
		padding: 16px 16px 8px!important;
	}
.docos-anchoreddocoview-internal, .docos-anchoreddocoview,  .docos-anchoreddocoview-internal,  .docos-anchoreddocoview.docos-docoview-active{
	border-radius: 8px!important;
	}
	.docos-input .docos-input-textarea, .jfk-button.jfk-button-action.jfk-button, .docos-input-cancel{
				border-radius: 4px!important;
	}
	
	[aria-roledescription="sidebar"]{
  	border-radius: 0!important;
	outline: none!important;
    position: absolute!important;
    background-color: #fff!important;
		 margin: 0px 0px 0px!important;
    box-shadow: -3px 0 6px -3px rgba(60,64,67,.15), 3px 0 6px -3px rgba(60,64,67,.15)!important;
		 border-bottom: 1px solid #dadce0!important;
    border-top: 1px solid #dadce0!important;
}
	
	.oWBWHf.sj692e {
		background-color: rgb(26, 115, 232)!important;
		border-radius: 4px!important;
	}
	.xFWpbf .VfPpkd-Jh9lGc {
		border-radius: inherit!important;
	}
	.vhoiae .xFWpbf.CZCFtc-bMElCd,
	.X9XeLb .xFWpbf.CZCFtc-bMElCd,
	.cWKK1c .xFWpbf.CZCFtc-bMElCd,
	.aJfoSc .xFWpbf.CZCFtc-bMElCd,
	.TOb6Ze .xFWpbf.CZCFtc-bMElCd {
		border-radius: 4px!important;
		border-color: #e5e0e0!important
	}
	.vhoiae .FCIEcc .VfPpkd-StrnGf-rymPhb,
	.X9XeLb .FCIEcc .VfPpkd-StrnGf-rymPhb,
	.cWKK1c .FCIEcc .VfPpkd-StrnGf-rymPhb,
	.aJfoSc .FCIEcc .VfPpkd-StrnGf-rymPhb,
	.TOb6Ze .FCIEcc .VfPpkd-StrnGf-rymPhb {
		background-color: #fff!important;
	}
	.docs-grille-gm3.docs-gm .docs-material #docs-toolbar-wrapper {
		background-color: #fff;

		color: #000;
		font-weight: 400;
		font-size: 13px;
		font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
		margin: 0;
		border-top: 1px solid #dadce0;
		border-bottom: 1px solid #dadce0;
		border-radius: 0px;


		min-height: 40px;
		padding: 0 8px;
		-webkit-font-smoothing: antialiased;
	}

	.docs-grille-gm3 .docs-main-toolbars .goog-toolbar-combo-button-input {
		color: rgba(0, 0, 0, .7);
		box-sizing: border-box;
		height: 20px!important;
		width: 48px!important;
		background: transparent;
		border: 1px solid transparent!important;

		font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif!important;
		font-size: 12px!important;
		font-weight: 500!important;

		overflow: hidden!important;
	}

	.docs-grille #headingStyleSelect .goog-toolbar-menu-button-caption {
		font-size: 12px;
		width: 80px;
	}


	#docs-font-family .goog-toolbar-menu-button-caption {
		font-size: 12px!important;
	}


	.docs-grille-gm3 .jfk-tooltip-arrow {
		display: block;
	}
	.docs-grille-gm3 .jfk-tooltip {
		border: 1px solid #fff;
		border-radius: 0px;
		font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
		font-weight: 400;
		font-size: 13px;
	}
	.docs-grille-gm3 .jfk-butterBar,
	.docs-grille-gm3 .jfk-butterBar-error,
	.docs-grille-gm3 .jfk-butterBar-info,
	.docs-grille-gm3 .jfk-butterBar-warning {
		background-color: #e8f0fe;
		align-items: center;
		border-radius: 4px;
		border-style: none;
		display: flex;
		color: #202124;
		white-space: normal;
		height: fit-content;
		min-height: 48px;
		padding: 0 24px;
	}
	.docs-grille-gm3.docs-grille-gm3.docs-gm .docs-butterbar-wrap .docs-butterbar-dismiss,
	.docs-grille-gm3.docs-grille-gm3.docs-gm .docs-butterbar-wrap .docs-butterbar-link {
		color: #1a73e8;
		padding-left: 6px;
		cursor: pointer;
		text-decoration: underline;
		font-size: var(--docs-material-font-size-normal, 13px);
		border-radius: 0px;
	}
	.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,
	.docs-grille-gm3 .trix-palette .goog-toolbar-menu-button-open,
	.docs-grille-gm3.docs-gm .docs-main-toolbars .goog-toolbar-button-active,
	.docs-grille-gm3.docs-gm .docs-main-toolbars .goog-toolbar-button:focus,
	.docs-grille-gm3.docs-gm .docs-main-toolbars .goog-toolbar-menu-button-active,
	.docs-grille-gm3.docs-gm .docs-main-toolbars .goog-toolbar-menu-button.goog-toolbar-menu-button-open,
	.docs-grille-gm3.docs-gm .docs-main-toolbars .goog-toolbar-menu-button:focus {
		filter: sepia(100%) hue-rotate(185deg) saturate(500%);
	}


	.docs-grille-gm3 .docs-main-toolbars .goog-toolbar-separator.goog-inline-block {
		border-color: #dadce0;
		margin: 10px 3px;
	}
	

	.docs-grille #docs-titlebar-share-client-button .jfk-button .scb-button-icon {
		margin: 0 3px 0px -4px;
	}
	.docs-grille-gm3 #zoomSelect.docs-toolbar-zoom-combobox.goog-toolbar-combo-button-open {
		border: 2px solid #0b57d0!important;
		border-radius: 4px!important;
		margin: 0!important;
	}

	.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: rgb(232, 240, 254);
		border-radius: 3px
	}

	.docs-grille-gm3 #docs-meet-in-editors-entrypointbutton {
		border: 1px solid rgba(0, 0, 0, .13);
	}


.docs-grille-gm3 .docs-menubar .goog-control-open {
		background-color: #dfe9fbeb!important;
	}
	
.docs-grille-gm3 .docs-menubar .goog-control-active {
		background-color: #bdd4ffeb!important;
	}

	.docs-grille-gm3 .navigation-widget-header {

		text-transform: uppercase;
		font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
		color: #5f6368;
	}

	


	.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,
	.docs-grille-gm3 #docs-align-palette,
	.docs-grille-gm3 .docs-revisions-chromecover-content-color-default {
		background-color: #fff;
	}
	.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,
	.d...

Reviews

No reviews yet.