☰

Google Slides Advanced UI Enhancements

Enhances Google Slides UI with Material Design Lite, custom shapes, tools, and animations inspired by PowerPoint

  1. // ==UserScript==
  2. // @name         Google Slides Advanced UI Enhancements
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.2
  5. // @description  Enhances Google Slides UI with Material Design Lite, custom shapes, tools, and animations inspired by PowerPoint
  6. // @author       You
  7. // @match        https://docs.google.com/presentation/*
  8. // @grant        GM_addStyle
  9. // @run-at       document-start
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // Apply custom styles
  16.     GM_addStyle(`
  17.         /* Make UI elements bigger and rounder */
  18.         .docs-title-input, .docs-title-input-container, .docs-explore-button, .docs-material-button {
  19.             font-size: 1.2em !important;
  20.             border-radius: 8px !important;
  21.             padding: 10px !important;
  22.         }
  23.  
  24.         /* Increase the size of buttons and input fields */
  25.         .docs-material-button, .docs-material-button-content {
  26.             font-size: 1em !important;
  27.         }
  28.  
  29.         /* Make the toolbar more ribbon-like */
  30.         .docs-explore-button-container {
  31.             border-radius: 12px !important;
  32.             box-shadow: 0px 2px 4px rgba(0,0,0,0.2) !important;
  33.             background-color: #ffffff !important;
  34.         }
  35.  
  36.         /* Apply Material Design Lite styles */
  37.         .docs-slide-viewer, .docs-slide-content, .docs-slide-editor {
  38.             border-radius: 8px !important;
  39.             box-shadow: 0px 4px 8px rgba(0,0,0,0.1) !important;
  40.         }
  41.  
  42.         /* Add drawing and PowerPoint-like themes */
  43.         .docs-slide-content {
  44.             background-color: #fafafa !important;
  45.         }
  46.  
  47.         .docs-drawing-editor {
  48.             border: 2px dashed #e0e0e0 !important;
  49.             border-radius: 8px !important;
  50.         }
  51.  
  52.         .docs-powerpoint-theme {
  53.             background-color: #ffffff !important;
  54.             color: #333333 !important;
  55.             border-radius: 12px !important;
  56.         }
  57.  
  58.         /* Add more shapes and tools */
  59.         .docs-shape-button {
  60.             border-radius: 50% !important;
  61.             background-color: #eeeeee !important;
  62.             box-shadow: 0px 2px 4px rgba(0,0,0,0.2) !important;
  63.             padding: 10px !important;
  64.             margin: 5px !important;
  65.         }
  66.  
  67.         .docs-shape-button:hover {
  68.             background-color: #dddddd !important;
  69.             cursor: pointer;
  70.         }
  71.  
  72.         /* Animations for shape and tool interactions */
  73.         .docs-shape-button, .docs-material-button {
  74.             transition: background-color 0.3s ease, transform 0.3s ease;
  75.         }
  76.  
  77.         .docs-shape-button:active, .docs-material-button:active {
  78.             transform: scale(0.95);
  79.         }
  80.  
  81.         /* Style for additional tool panels */
  82.         .docs-tool-panel {
  83.             border: 1px solid #e0e0e0 !important;
  84.             border-radius: 8px !important;
  85.             box-shadow: 0px 2px 4px rgba(0,0,0,0.1) !important;
  86.             background-color: #ffffff !important;
  87.             padding: 10px !important;
  88.             margin: 10px !important;
  89.         }
  90.  
  91.         /* Add specific shapes for the drawing tools */
  92.         .docs-drawing-rectangle {
  93.             border: 2px solid #009688 !important;
  94.             border-radius: 4px !important;
  95.         }
  96.  
  97.         .docs-drawing-circle {
  98.             border: 2px solid #009688 !important;
  99.             border-radius: 50% !important;
  100.         }
  101.  
  102.         .docs-drawing-line {
  103.             border-top: 2px solid #009688 !important;
  104.             width: 100% !important;
  105.         }
  106.     `);
  107.  
  108.     // Add custom JavaScript for advanced functionality
  109.     function addCustomTools() {
  110.         // Add additional shapes or tools to the toolbar or interface
  111.         // This could involve injecting additional HTML/CSS/JS
  112.         console.log('Custom tools and shapes can be added here.');
  113.     }
  114.  
  115.     // Initialize custom tools after the page loads
  116.     window.addEventListener('load', addCustomTools);
  117. })();