☰

Google Docs/Slides Enhanced Modern Material Design

Apply an extended modern, rounded Material Design UI to Google Docs and Google Slides with enhanced animations and transitions

  1. // ==UserScript==
  2. // @name         Google Docs/Slides Enhanced Modern Material Design
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2.0
  5. // @description  Apply an extended modern, rounded Material Design UI to Google Docs and Google Slides with enhanced animations and transitions
  6. // @author       Your Name
  7. // @match        https://docs.google.com/document/d/*
  8. // @match        https://docs.google.com/presentation/d/*
  9. // @grant        none
  10. // @run-at       document-end
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     // Extended CSS styles for more comprehensive Material Design
  17.     const styles = `
  18.         /* Base Material Design styles with extended features */
  19.  
  20.         /* Rounded Corners for Containers */
  21.         .docs-titlebar, .docs-title-input, .punch-viewer-nav-container, 
  22.         .kix-appview, .punch-filmstrip-scrollable, .punch-viewer-body, 
  23.         .punch-slide-thumbnail, .docs-material, .goog-control, .docs-butterbar-container {
  24.             border-radius: 12px !important;
  25.         }
  26.  
  27.         /* Material Design Shadows - Deeper and Subtle Shadow Layers */
  28.         .docs-titlebar, .punch-viewer-nav-container, .kix-appview, 
  29.         .punch-filmstrip-scrollable, .punch-slide-thumbnail, .docs-butterbar-container, 
  30.         .goog-toolbar-button, .docs-material-button, .goog-control {
  31.             box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15), 
  32.                         0 3px 6px rgba(0, 0, 0, 0.10);
  33.         }
  34.  
  35.         /* Buttons with Rounded Corners and Animations */
  36.         .goog-toolbar-button, .docs-material-button, .punch-viewer-nav-button, 
  37.         .goog-inline-block, .docs-menu-button, .docs-butterbar-button {
  38.             border-radius: 10px !important;
  39.             transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
  40.             padding: 8px 12px;
  41.             font-weight: bold;
  42.         }
  43.  
  44.         /* Smooth hover animations for buttons */
  45.         .goog-toolbar-button:hover, .docs-material-button:hover, 
  46.         .punch-viewer-nav-button:hover, .docs-butterbar-button:hover {
  47.             background-color: rgba(0, 0, 0, 0.08) !important;
  48.             box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18), 
  49.                         0 4px 8px rgba(0, 0, 0, 0.12);
  50.             transform: translateY(-2px);
  51.         }
  52.  
  53.         /* Active state with Material design press effect */
  54.         .goog-toolbar-button:active, .docs-material-button:active, 
  55.         .punch-viewer-nav-button:active, .docs-butterbar-button:active {
  56.             background-color: rgba(0, 0, 0, 0.15) !important;
  57.             transform: translateY(0);
  58.         }
  59.  
  60.         /* Rounded Input Fields with Padding */
  61.         .docs-title-input, .docs-text-input, .kix-cursor-caret, 
  62.         .punch-filmstrip-scrollable, .goog-inline-block {
  63.             border-radius: 10px !important;
  64.             padding: 12px 16px;
  65.             font-size: 14px;
  66.             font-family: 'Roboto', sans-serif !important;
  67.         }
  68.  
  69.         /* Adding smooth focus transitions to input fields */
  70.         .docs-title-input:focus, .docs-text-input:focus {
  71.             border-color: #6200EE !important;
  72.             box-shadow: 0 4px 8px rgba(98, 0, 238, 0.3) !important;
  73.         }
  74.  
  75.         /* General rounded and padded containers */
  76.         .kix-appview, .punch-viewer-nav-container, 
  77.         .punch-slide-thumbnail-container, .punch-viewer-body, 
  78.         .docs-butterbar-container {
  79.             border-radius: 16px !important;
  80.             padding: 12px;
  81.         }
  82.  
  83.         /* Animation Transitions for all elements */
  84.         * {
  85.             transition: all 0.4s ease-in-out;
  86.         }
  87.  
  88.         /* Material Design Color Scheme */
  89.         body, .docs-titlebar, .punch-viewer-nav-container, 
  90.         .kix-appview, .punch-slide-thumbnail {
  91.             background-color: #FAFAFA !important;
  92.             color: #212121 !important;
  93.         }
  94.  
  95.         /* Accent colors for Material Design */
  96.         .docs-titlebar, .docs-menu-button, .goog-toolbar-button, 
  97.         .punch-viewer-nav-button, .docs-material-button {
  98.             background-color: #6200EE !important;
  99.             color: white !important;
  100.         }
  101.  
  102.         /* Hover state with accent colors */
  103.         .docs-menu-button:hover, .goog-toolbar-button:hover, 
  104.         .punch-viewer-nav-button:hover, .docs-material-button:hover {
  105.             background-color: #3700B3 !important;
  106.         }
  107.  
  108.         /* Smooth Color Transition Effects */
  109.         .docs-menu-button, .goog-toolbar-button, .docs-butterbar-button, 
  110.         .docs-material-button, .punch-viewer-nav-button {
  111.             transition: background-color 0.3s ease, color 0.3s ease;
  112.         }
  113.  
  114.         /* Focused button states */
  115.         .docs-menu-button:focus, .goog-toolbar-button:focus, 
  116.         .punch-viewer-nav-button:focus, .docs-material-button:focus {
  117.             box-shadow: 0 0 10px rgba(98, 0, 238, 0.5) !important;
  118.             outline: none;
  119.         }
  120.  
  121.         /* Font settings with modern typography */
  122.         body, .goog-toolbar-button, .docs-material-button, 
  123.         .docs-title-input, .punch-slide-thumbnail {
  124.             font-family: 'Roboto', sans-serif !important;
  125.             font-size: 16px;
  126.             letter-spacing: 0.5px;
  127.         }
  128.  
  129.         /* Applying rounded edges to document content containers */
  130.         .kix-appview, .docs-editor-container, .docs-material, 
  131.         .docs-butterbar-container, .punch-viewer-body {
  132.             border-radius: 16px !important;
  133.             margin: 12px;
  134.         }
  135.  
  136.         /* Enhanced hover and focus state animations */
  137.         .docs-butterbar-container:hover, .punch-viewer-nav-container:hover, 
  138.         .kix-appview:hover, .docs-titlebar:hover {
  139.             box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15), 
  140.                         0 6px 10px rgba(0, 0, 0, 0.10);
  141.             transform: translateY(-2px);
  142.         }
  143.  
  144.         /* Smooth scrollbars with rounded edges */
  145.         ::-webkit-scrollbar {
  146.             width: 12px;
  147.             height: 12px;
  148.         }
  149.         ::-webkit-scrollbar-thumb {
  150.             background-color: rgba(98, 0, 238, 0.6);
  151.             border-radius: 10px;
  152.             border: 2px solid #FAFAFA;
  153.         }
  154.         ::-webkit-scrollbar-thumb:hover {
  155.             background-color: rgba(98, 0, 238, 0.8);
  156.         }
  157.         ::-webkit-scrollbar-track {
  158.             background-color: #E0E0E0;
  159.             border-radius: 10px;
  160.         }
  161.  
  162.     `;
  163.  
  164.     // Append the extended styles to the document head
  165.     const styleSheet = document.createElement('style');
  166.     styleSheet.type = 'text/css';
  167.     styleSheet.innerText = styles;
  168.     document.head.appendChild(styleSheet);
  169. })();