Google Docs Tweaks by freeplay

Imported from https://codeberg.org/Freeplay/UserStyles/raw/branch/main/google/Google-Docs-Tweaks.user.css

Google Docs Tweaks screenshot
Homepage Install Get Stylus Write a review

Details

Authorfreeplay

LicenseNo License

Created atSeptember 24, 2021 02:25

Updated atSeptember 25, 2021 02:31

Applies toGoogle Docs

Statistics

Learn how we calculate statistics in the FAQ.

Total views239

Total installs69

Weekly installs11

Weekly updates7

Description

Vertical Toolbar, Hide buttons & borders, Compact Comments, Fill BG, & More!

Notes

Userstyle doesn't have notes.

History

Daily snapshots of style statistics.

2021-09-242021-10-012021-10-072021-10-132021-10-192021-10-252021-11-012021-11-072021-11-132021-11-192021-11-252021-12-01Date0.0015.0030.0045.0060.0075.0090.00105.00120.00Daily countDaily installsDaily updatesDaily views
2021-09-242021-10-012021-10-072021-10-132021-10-192021-10-252021-11-012021-11-072021-11-132021-11-192021-11-252021-12-01Date0.0030.0060.0090.00120.00150.00180.00210.00240.00Total countTotal installsTotal views

Source code

/* ==UserStyle==
@name           Google Docs Tweaks
@version        1.0.1
@description    Vertical Sidebar, Hide buttons & borders, Compact Comments, Fill BG, & More!
@updateURL      https://codeberg.org/Freeplay/UserStyles/raw/branch/main/google/Google-Docs-Tweaks.user.css
@preprocessor   stylus

 -- AUTHOR STUFF --
@namespace      Freeplay
@author         Freeplay (https://freeplay.codeberg.page/)
@homepageURL    https://codeberg.org/Freeplay/UserStyles
@supportURL     https://codeberg.org/Freeplay/UserStyles/issues


@var text     notice           "!! REFRESH AFTER CHANGING SETTINGS !! " '"Okay!"'

@var checkbox collapseMenu     "⤴️ Collapse menubar until hovering header"           1
@var checkbox hideBorders      "➖ Hide Header Borders"                              0
@var checkbox hideUndo         "↩️ Hide Undo Buttons (ctrl+z) & Redo (ctrl+shift+z)" 1
@var checkbox hideOther        "➕ Hide other buttons"                               1

@var range    shadowOpacity    "🔦 Header Shadow Opacity"               [1, 0, 1, 0.1]
@var checkbox centerToolbar    "🔁 Center Align Toolbar"                             1

@var checkbox verticalToolbar  "↕️ Vertical Toolbar"                                 1

@var checkbox bgFill           "💡 Fill Background"  1
@var checkbox compactComments  "💬 Compact Comments" 1

@var checkbox transitions      "💨 More Transitions" 1

@var text     donate           "💸 Donate!" "'https://www.patreon.com/freeplayg'"

==/UserStyle== */

/* Sep 24 / 20
- Quick fix for vertical toolbar on Chromium browsers
*/

@-moz-document domain("docs.google.com") {
    // I started this a while ago, but recently decided to finish it (Also why it's a bit messy...)

    /* Zoom Transitions */
if transitions {
    .kix-zoomdocumentplugin-outer, .kix-zoomdocumentplugin-inner, .kix-discussion-plugin-vertical, 
    .kix-lineview-content {
        transition: all .3s !important;
    }
}

if centerToolbar {
    #docs-toolbar-wrapper {
        display: flex;
    }
    #docs-primary-toolbars {
        display: flex;
        justify-content: center;
        box-sizing: border-box;
        margin: auto;
    }
    #docs-toolbar-wrapper::before {
        content: "";
        flex: 0 100 180px;
    }
	#docs-toolbar-wrapper::after {
		content: "";
		flex: 0 0 180px;
	}
}
	
	/* Header Shadow */
	.kix-document-top-shadow-inner {
		filter: opacity(shadowOpacity);
	}
	
	/* Fill background */
if bgFill {
	#docs-editor-container, #docs-editor, .kix-appview-editor,
    #workspace-container, // Slides
    {
		background: none !important;
	}
	.kix-page-compact-box-shadow, 
	.kix-paginateddocumentplugin-compact-mode-box-shadow {
		box-shadow: none !important;
	}
	.kix-page-paginated {
		box-shadow: 0 0 0 1px rgba(0,0,0,0.07), 0px 0 0 1px rgba(0,0,0,0.07);
	}
}


if hideUndo {
	#undoButton, #redoButton {
		display: none !important;
	}
}
if hideOther {
	#printButton, #spellGrammarCheckButton, #formatPainterButton {
		display: none !important;
	}
}
	
	/* Compact Comments */
if compactComments {
	.docos-anchoredreplyview {
		padding-bottom: 4px !important;
		padding-top: 8px !important;
		
	}
	.docos-anchoreddocoview {
		border: none !important;
    }
	.docos-anchoredreplyview-header {
		height: 6px;
		align-items: center;
		margin-top: 4px !important;
		margin-bottom: 0px !important;
		transition: height .3s;
	}
	
	.docos-anchoredreplyview-author {
		font-size: 12px !important;
		opacity: .8;
	}
	.docos-replyview-timestamp {
		height: 0px;
        opacity: 0;
		transition: height .2s, opacity .2s;
	}
    .docos-docoview-rootreply ~ .docos-replyview-comment {
        padding-left: 8px !important;
        border-top-width: 0px;
        transition: border .1s, padding-left .5s .1s;
    }
	.docos-anchoredreplyview-avatar-holder {
		transform: scale(.45);
		width: 14px !important;
		margin-left: -4px;
		transition: width .5s, transform .3s;
	}
    
    .docos-docoview-active {
        .docos-anchoredreplyview {
            padding-top: 10px !important;
        }
    
        .docos-replyview-timestamp {
            height: 16px !important;
            opacity: 1 !important;
        }
        .docos-anchoredreplyview-header {
            height: 25px !important;
        }
        .docos-anchoredreplyview-avatar-holder {
            transform: scale(.85);
            width: 30px !important;
        }
        .docos-docoview-rootreply ~ .docos-replyview-comment {
            padding-left: 0 !important;
            border-top-width: 1px;
            border-radius: 0 !important;
        }
    }
}
	
	
if hideBorders {
	#docs-toolbar-wrapper, .goog-toolbar {
		border-top: none !important;
        margin-top: -4px;
		transition: margin .5s;
	}
	.docs-butterbar-container-compact ~ #docs-bars #docs-toolbar-wrapper {
		margin-top: 3px;
	}
	#docs-toolbar-wrapper,
	.docs-horizontal-ruler, .docs-vertical-ruler,
	.docs-companion-app-switcher-container, .companion-app-switcher-container,
    .punch-filmstrip-scroll, // Slides
    {
		border: none !important;
	}
    #filmstrip-controls, // Slides
    {
        border-right: 0;
    }
}
	
	/* Hide Header Menu Bar Until Hover Top Header */
if collapseMenu {
    .docs-titlebar-buttons {
        margin-top: 6px;
        height: 31px !important;
        padding-right: 4px !important;
    }
    .docs-titlebar-buttons::before {
        content: none !important;
    }
    .docs-gm span .jfk-button,
    .docs-gm span .goog-flat-menu-button,
    .docs-gm #docs-script-button-bar .jfk-button {
        max-height: 28px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        box-sizing: border-box !important;
        font-size: 13px !important;
    }
    .onegoogle-material-minibar {
        width: 36px;
    }
    .onegoogle-material-minibar a {
        img {
            padding: 2px;
            box-sizing: border-box;
        }
    }
    
    #docs-branding-container {
        height: 42px !important;
        overflow: hidden;
        transition: height .2s .4s;
    }

    #docs-menubars {
        height: 0 !important;
        margin-top: 8px;
        filter: opacity(0) !important;
        transition: height .2s .4s, margin .4s .4s, filter .2s .3s;
    }
    #docs-bars {
        z-index: 2;
        margin-left: 64px;
    }
    #docs-menubar {
        margin-left: 0 !important;
    }
    html[lang] & {
        #docs-chrome-cover-container + div,
        #docs-bars {
            &:hover + #docs-bars #docs-menubars,
            & + #docs-bars #docs-menubars:hover,
            & + #docs-bars #docs-menubars:focus-within {
                height: 31px !important;
                margin-top: 0;
                filter: opacity(1) !important; 
                transition: height .2s .2s, margin .4s .2s, filter .3s .2s;
            }
            &:hover #docs-branding-container {
                transform: none !important;
                transition: transform .2s .2s;
            }
            &:hover #docs-titlebar-container {
                // margin-left: 64px !important;
                transition: margin-left .2s .2s;
            }
            &:hover #docs-branding-container {
                height: 65px !important;
                transition: .2s .2s;
            }
        }
        
    }

    .docs-companion-app-switcher-container {
        top: 41px !important;
        // border: 0;
        z-index: 100;
    }
    #docs-side-toolbar {
        // margin-right: -50px !important;
        right: 0;
    }
}





}


@-moz-document url-prefix("https://docs.google.com/document") {
	/* Move toolbar aside */
if verticalToolbar {
    if not hideBorders {
        #docs-chrome {
            border-bottom: 1px solid rgba(100,100,100,0.1) ;
        }
    } else {
        #docs-toolbar-wrapper, .goog-toolbar {
            margin-top: 1px !important;
        }
    }
    
	.jfk-tooltip {
		pointer-events: none !important;
	}
    body > .goog-menu-vertical[style*="user-select: none; visibility: visible;"] {
        
        &[style*=": 6."],
        &[style*="left: 0px;"],
        &[style*="left: -"]{
               margin-left: 60px;
            transition: top .5s ease-out;
        }
    }
    .kix-appview-editor {
        scrollbar-color: rgba(100,100,100,0.5) transparent !important;
    }
	#docs-bars {
		z-index: 900;
        if hideBorders {
            &::before {
                content: "";
                position: fixed;
                left: 0;
                top: 0;
                bottom: 0;
                width: 55px;
                box-shadow: 0 0 6px rgba(0,0,0,0.1) !important;
                pointer-events: none;
            }
        }
        
	}
    if not hideBorders {
        .kix-appview {
            border-left: 1px solid rgba(100,100,100,0.1);
            border-top-left-radius: 8px;
            &::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 10px;
                height: 10px;
                box-shadow: -1px -1px 0 0 rgba(100,100,100,0.1);
                z-index: 99999;
                border-top-left-radius: 8px;
                pointer-events: none;
            }
            .kix-document-top-shadow-inner {
                border-top-left-radius: 8px;
                height: 8px;
            }
        }
        #docs-chrome {
            padding-left: 45px !important;
        }
    }
    
	.kix-document-top-shadow-inner {
		margin-right: -60px;
        if not collapseMenu {
            z-index: 999999;
        }
        if not hideBorders {
            margin-left: 0px !important;
        }
	}

	#docs-toolbar-wrapper {
		--width: 55px;
		position: fixed;
		left: 0px;
        display: flex;
		flex-direction: column !important;
		width: var(--width) !important;
		min-width: unset !important;
		padding: 0 !important;
        border-top-color: transparent !important;
		top: 0px !important;
		bottom: 0 !important;
		overflow: hidden auto;s
		scrollbar-width: none;
        &::-webkit-scrollbar {
            display: none;
        }
		scrollbar-color: rgba(100,100,100,0.2) transparent;
		scroll-snap-type: y proximity;
		scroll-padding: 70px;
		&:hover {
			scrollbar-width: thin;
            &::-webkit-scrollbar {
                display: block;
                width: 4px;
                padding: 0;
            }
            .faq-body::-webkit-scrollbar-track-piece:start {
                background: transparent;
            }

            .faq-body::-webkit-scrollbar-track-piece:end {
                 background: transparent;
            }
            &::-webkit-scrollbar-thumb {
                margin: 0;
                border: 1px solid rgba(100,100,100,0.2);
            }
		}
		&::after {
            content: "";
            flex: 1 0 50vh !important;
		}
		
		#docs-toolbar, #docs-primary-toolbars {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 0;
			z-index: 9999;
			max-width: 100% !important;
			background: inherit;
		}
        #docs-primary-toolbars {
            position: sticky;
            left: 0;
        }
		
		#docs-omnibox-toolbar {
            position: fixed;
            top: -40px;
            left: 60px;
            transition: top .2s;
            &:focus-within {
                top: 4px;
            }
		}
		
		.goog-toolbar-separator {
			width: calc(100% - 30px);
			box-sizing: border-box;
			height: 0;
			margin: 4px auto !important;
			border-top: 1px solid;
			opacity: .1;
		}
        
        .goog-toolbar-button, .docs-toolbar-menu-button,
        .docs-collapsable-toolbar-control:not(.goog-toolbar-separator) {
            margin: 0;
            height: 30px;
            width: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #viewModeButton, .goog-toolbar-menu-button {
            height: 30px !important;
        }
        #viewModeButton {
            height: 15px !important;
            flex-grow: 1;
        }
		#docs-toolbar {
			min-width: var(--width);
			position: sticky;
			left: 0;
            margin: 0 !important;
			& > * {
				scroll-snap-align: start;
			}
			&::after {
				content: "";
				display: flex;
				width: 100%;
				min-height: 0px;
			}
            
            #zoomSelect, .goog-toolbar-combo-button-caption, .goog-toolbar-combo-button-outer-box {
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 0 !important;
            }
            input {
                margin: 0 !important;
                padding: 0 !important;
                max-width: 30px !important;
                width: 30px !important;
                text-align: center;
                overflow: visible !important;
                border-radius: 4px !important;
            }
            .goog-toolbar-combo-button-dropdown {
                display: none;
            }
			
			.goog-toolbar-select {
				min-height: 70px;
				max-width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				& > div {
					margin: 0;
					transform: rotate(-90deg);
				}
				.goog-toolbar-menu-button-caption {
					text-align: center;
					margin: 0 !important;
                    // overflow: visible;
                    margin-top: -2px !important;
                    margin-bottom: -40px !important;
                    height: 100px;
                    font-weight: 400;
				}
			}
			
			#fontSizeDecrement, #fontSizeIncrement {
				border-bottom: 0;
				border-width: 0;
				margin: 0 !important;
				min-width: unset !important;
			}
			#fontSizeDecrement {
				margin-top: 8px !important;
			}
			#fontSizeIncrement {
				margin-bottom: 8px !important;
			}
			#fontSizeSelect, .goog-toolbar-combo-button-caption, #fontSizeSelect input {
				margin: 0 !important;
				border-radius: 4px;
			}
			
			.goog-toolbar-menu-button-outer-box {
				padding: 0 !important;
			}
			.goog-toolbar-menu-button-inner-box {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-start;
			}
			.goog-toolbar-menu-button-dropdown {
				float: unset;
				margin: 0 !important;
				display: contents;
				.docs-icon {
					margin: 0 -7px;
				}
			}
			.docs-toolbar-button-split-left {
				margin-bottom: -1px !important;
			}
			.docs-toolbar-button-split-right {
				margin-top: -1px;
				margin-right: 0 !important;
				padding: 0 !important;
				display: flex;
                height: 20px;
				justify-content: center;
				& > div {
					margin: 0 !important;
					padding: 0 !important;
				}
			}
			
		}
		#docs-side-toolbar {
			top: 0;
			left: 0;
			right: unset;
			order: -1;
			height: max-content !important;
            min-height: 64px !important;
			max-height: unset !important;
			width: var(--width) !important;
            box-sizing: border-box;
            padding-bottom: 4px;
            padding-top: 4px;
			margin: 0 !important;
			margin-bottom: 20px !important;
			position: sticky;
			z-index: 99999;
			display: flex;
			flex-direction: column;
			align-items: center;
			background: inherit;
            border-bottom: 1px solid rgba(100,100,100,0.1);
            
			.goog-toolbar-menu-button-caption {
				width: 24px !important;
				
			}
			.goog-toolbar-menu-button-dropdown {
				margin-left: 0 !important;
			}
			.goog-toolbar-menu-button-label {
				display: none;
			}
			[role="separator"] {
				display: none !important;
			}
            #viewModeButton {
                margin-top: 0;
            }
		}
	}
    #titlebar-mode-indicator-container {
        position: fixed;
        left: 2.5px;
        top: 5px;
        width: 50px;
        height: auto !important;
        margin: 0;
        .docs-material-menu-button-flat-primary {
            display: flex !important;
            flex-direction: column !important;
            padding: 5px 0;
            padding-bottom: 0;
            height: auto !important;
            & > div {
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 0 !important;
                & > div {
                    margin: 0 !important;
                }
            }
        }
    }
    
	#docs-chrome, #docs-editor {
		padding-left: 55px;
	}
}
    
    
    
    
    
    
    
    
    
    
    
    
}

Reviews

No reviews yet.