Google Docs Neumorphic Redesign by AIP21

Details

AuthorAIP21
LicenseNo License
CategoryGoogle Docs
Created1 year, 3 weeks ago
Updated11 months, 3 weeks ago
Size246 kB
Statistics

Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description

Redesigned google docs to have a more skeuomorphic felt background but also modern UI styling with small bits of shading.
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           docs.google.com - Nov 2023
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
@var checkbox useSepia "Sepia" 0
==/UserStyle== */
@-moz-document url-prefix("https://docs.google.com/document/d") {
    @media (prefers-color-scheme: light) {
        .docs-grille-gm3 #docs-chrome:not(.docs-hub-chrome) {
            border: none !important;
            /*             padding-bottom: 10px !important; */
            /*         margin-left: 10px;
            margin-right: 10px;
            margin-bottom: 10px; */
            /*         margin-top: 10px; */
            background: linear-gradient(hsl(0, 0%, 100%) 50%, hsla(0, 0%, 0%, 0) 100%) !important;
        }

        .docs-grille-gm3.docs-gm .docs-material #docs-toolbar-wrapper {
            background-color: #edf2fa !important;

            box-shadow: 0px 5px 10px 0px #00000078;
            border: 1px solid hsl(0, 0%, 74%);
        }

        .docos-anchoreddocoview-internal {
            background-color: white !important;
        }
        .docs-grille-gm3 .docos-anchoreddocoview, .docs-grille-gm3 .docos-anchoreddocoview .docos-anchoredreplyview, .docs-grille-gm3 .docos-anchoreddocoview-input-pane {
            background-color: white !important;
        }

        .docs-gm {
            color: hsl(225, 6%, 13%) !important;
        }

        .docs-title-input {
            text-shadow: none !important;
            /*             color: transparent !important; */
        }

        .docs-title-input:hover,
        .docs-title-input:focus {
            text-shadow: none !important;
            /*             color: hsl(36, 6%, 59%) !important; */
            border: 2px solid hsl(217, 62%, 43%) !important;
        }

        .docs-grille-gm3 #docs-titlebar-share-client-button .jfk-button,
        .docs-grille-gm3 #scb-quick-actions-menu-button.goog-flat-menu-button {
            background-color: hsl(217, 77%, 81%) !important;

            color: black !important;

            cursor: pointer !important;
        }

        .docs-grille-gm3 #docs-titlebar-share-client-button .jfk-button div {
            color: black !important;
        }

        .docs-grille-gm3 .docos-anchoreddocoview .docos-show-less,
        .docs-grille-gm3 .docos-anchoreddocoview .docos-show-more,
        .docs-grille-gm3 .docos-replyview-first .docos-show-more {
            background-color: hsl(0, 0%, 100%) !important;
            color: hsl(224, 69%, 60%) !important;
            font-weight: 700;
        }

        #docs-texteventtargetbrailleoffsetcalculator {
            filter: brightness(78%) contrast(300%);
        }

        :root {
            --scroll-bg: hsla(195, 6%, 60%, 0);
            --scroll-thumb: hsl(202, 5%, 59%);
            --scroll-thumb-hover: hsl(202, 5%, 59%);
            
            --border: #3c3c3c !important;

            --bg-color: white !important;

            --text-color: black !important;
            
            --sepiaBrightness: calc(max(1 - var(--useSepia), 0.9 * var(--useSepia)));
            --sepiaValue: calc(0.2 * var(--useSepia));
            --sepiaValueBG: calc(0.25 * var(--useSepia));
            
            --bgFilter: brightness(80%) contrast(300%) saturate(30%);
            
            --shadow: #000000ad !important; 
                        
            --shading-normal: 0px 4px 8px -4px rgba(0, 0, 0, 0.16), inset 0px -1px 0px rgba(0, 0, 0, 0.04), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.12), inset 0px 2px 0.75px rgba(255, 255, 255, 0.24), inset 0px -3px 4px rgba(0, 0, 0, .14);

            --shading-hover: 0px 4px 8px -4px rgba(0, 0, 0, 0.16), inset 0px -1px 0px rgba(0, 0, 0, 0.04), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.12), inset 0px 2px 0.75px rgba(255, 255, 255, 0.24), inset 0px -3px 4px rgba(0, 0, 0, 0.24);

            --shading-active: 0px 4px 8px -4px rgba(0, 0, 0, .08), inset 0px -1px 0px rgba(0, 0, 0, .035), inset 0px 0px 0px 1px rgba(0, 0, 0, .17), inset 0px 3px 4px rgba(0, 0, 0, .21), inset 0px -2px 0.75px rgba(255, 255, 255, .44);
        }

        :root {
            --bg-img: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA9CUAAITRAABtXwAA6GwAADyLAAAbWIPnB3gAAQ2LSURBVHjadL1btiVbqiQGTI8s9b8t+tKfWqW6GT5BH2Bg+Iq6Uo3MPCdi77Xc5wMMe+j//f/8v3Gvi5mJ+xURE1WViBCREPcQs/xn7i7nOXLvFRERCRdRk1N/N0JEVEVCxEzknCPu+TNEQqT+tbuLiIrZ6X927xXV/DnnPPLeVzR/i6hq/1yR6M93zpFzVP73//4f+fPnT/+zv3+vnGPiHvU96OdIiJnW71d531vfL+R9r4ioPI/JvSIRLqr4c95/Hz8bP8fdRXV+Rz5Hkfu62DkiqnLM5N4rZvnZtf5CPQpxz3fwHJOIkHu9v7ep1DMUMbP5d/Q8I/j7HXqm8+fy+bqckz8jROTUd89nJf098H94fJEfMz/DOSIREpG/N3/eFff8Xqoh5/xH3veviGi9ryvnnPy9Ifkc8AtURXuFiIS7/F//6z/y378vfYaov3/lz59HPETCI5dFrbf3uphafi688/79IefgPebvMpVeH7n+vZ7VqWcn9Pl9Hg4eSr3XCOm/a1bvVEQ8XI4difo0UXvp3it2TLSe6N+/f+WcI2raD8HMxMzkffMZ/OfPI//9+7eelebPDJdznlxr1+UcrXeQz+AclXtFVPEdn14THvmsnnxh+G5Wf1hrced3DQmxWlwS3g+BF0w+SMNTr382G+7eELP552pYmCGi+L35Z8xCTuQPmoXdR0h+ploU7iYiJhcbJPJl780/h09ESERuMrMjIXVwiYqozedTkRAVVavno5/v2lskf2a9To8Qqe993UXN8lmp1QacrZQ/Mw9dU+kFsdaY5EPOQyNqcXm95NzUZlafAQtexFTFzeq95YLKwxN/Pj9G/nuVY/We7cwvl6j37/msHBsrF/J7pd7XEXcRtVxU+ftUzrHaQCbuuZHsqEQdkPhufECrhFy8LNHaUF5r08SsvrOIuN5aC5HvrN4NnkMIH/547tFfz0XzDqvnGr2mvTaYioj3ulbRuhSi1oUJfdT873ZEIy+zo7WmojaleR3OmhteQkJC3I88zxGzOngsD/3cN1rvLT+n2cnPIFif8+wi8ieq1K1Szw/fK8LFTOT2QSfyzL/EC/e6VXLbeLicOlHyxor80abz3+uB4HaeBaDyvrUR+xarDxkqLi4auQnyM0W/rHtF3G8dGpYvQq2rDgmX6yrHrrzvX3n0T56E8tYXDvrMXpvqSMQV0ZBce5H/rh4i/nt41Pfz/LNy6jlIHh71USOmUlKxesAqLioSKuc8tEiiT2qrZ5cvcw5Fs6CNTXdYLYa86fKmcs/N4xHSx2NorlmJXLY6m7hPfneJ0K7CxFBF5PNCdaGaN3R4iGiIh/eNWyetiOBn5eFkQt9V85/nJqwFGzqHLX5MPQs+qOcEDLk3f3ZWRbc2jKwDCusyP4eLBzbrrMeIkOcRqtz6J9QansvmHBW5uDG0/x2Olu93WB+9PhCqQHz258mqzj2fcVYHKtdDwq/cq/0OxFXkqJjSIaYqIllNhk+9hEu4L/K6FLCvcRHmpSDikUcjPv+DFz1lntFJIr24sJDxMPNl4kTdN9Q59TOwAWM/Katb1eoBWJ/s9QHtiB1ZZVLeALkB81MdMcvb5Xn+yJ/noc/41kbJv5ufByWwdAmvanXSWh82qtY3iNEJb7UIUDqJSldO987Cz9spn54d6xIRP+MqynetxW/UnvD/KS1y7QMSpXrkiqytXpVa3HpGpysBtAXusxinRI5uQYI3oaqEO+9DUYuuoGYNRJfH+N+9KO/FHdWfob+VKm04E9W33/F8hiOqXjdw3sqoNPA8sf64OhMxOfQoVU8fcGomdqbSeh4T91xX2cY+2XKZiZn275sDO5/Tddzk3j/rel6aeN9mQVXxFarncl+Eyb0x+6PWldeBK/W5pNqLv39vHoAR4v52mZ+V3RERz5s9psXKikGqncXe9XViPVk6oWy0WiQ4Jax7xzw1sTiCSh8VOlCrfLb65U/1TvmgpleuE0hVVC6393XozGLp/kumEmiMok5I9IEiXl+cyz7r36mmomGievKlUPuTL9vrps0WpbGO/rIi1geDd+8qGrSZtW5tr24pahObiPruq6nywiELvASLKE99q/8+5TtuwawysyJyP/39pyIziXruqFb4eME/V426OYWK5/j8Ge3bBO9k2iHrA2YemWVL1OUzV5pcevP7iqzSxPsW5QNxbrI5gOdnRh+YgxXdLpvDa+2qF3ajcm8eMnFOb0izKLwmuoUFFubuXKfkdxYVv1ntXJ9nM9VHXoiiIcdUwqxam6wCzaYF7HdXFYf3z4rCo/JZY59lRXJlXq3V/wt6rrjGrd9d1F59RHhROpVX1QtF9kBePUS4rhMkXEXqxs+SUBocMnOJePPB14tFGXhOnydUaeRnCMENFqvHyaN8XnqCKtF92b6ZpiTMz6Nikifoe6P2nMu9r4Q8IhG5WK/VsTuL/rqLXxc7RjedikYs0Cx+Nnc0qCrCL7iOQC0Azb1KzTxovdsBpW522hl8n17s7l12qj5dNudi9qpcontkfD6PqBtrSsTp2V0W1NE3uVMbNPiEKR0Q9TOFoD0lIJN/hqmvch5VHd431kE12PUsTI6J3AgZbE770JuKdfrncwbslF5b8akgnGreqWjdYx1QDFmi+u3KSmW1RgA7o06/69MtqCb28oqLyOkWA+fdc0z8nr7p1XAIxVzI1ErlYRarmrwO3I4rkZgqiIt/PjkBZgEHMLfukVDy9QsO9INOZRwDgQNazYFjA6pRP5P1aAyYEzjJriT47FRS4jNL/ycWMRZ1LjwlNLyOmyr9c3qQ/zvuTASy1BpUF2UbPi/aA+8X66Li/TnQewEZjwgJxakfdYrns9Xu2qfUxwGi6ut4BNiT/bzMz6pbOP/+9L94X8d0VwAFpOXnzs2VIB/eq9cG5U01/bQCZKrDooChPOg9b7o8RWshRhSGoLRuqgfud5X/OycFta7U6/1hLXj9vN9phVZl1muhqrk8SKwBPRwYP7gDHXKmfJhHtyx4tvhPgGx7YmAE8mphRwBMTa7crNo8W50/f/50S5jrO1tfs0fOCXHPtuSc/PvnmUnAcxKcdVyqwiAzJif7IAfQKSLyoM9BORyRAJ9eoLK64A6n8oYBGEb95yHJAuLy3+cIQqrVmX5ubjU6GUQLbBL57T9ztGSrnHSgwqLyAZmphI3+TBh94nAbpF27P+sqpX6W1cGSt6eLq64yOEv16Jc+ZTR+LFD7XS4D8MsNHt1ODHg2B1gUEAuEPyKBJUxzRArMkvkAKlPNYYE/xwZcrAXyPCZ/3+iFO99bxdU+o0KnSys3Pm4iHP6YAvVmMqwprRvtHRBLVa7usa0Q4p2tlK4RHmMWQsB1VxzucmNGnjxZasCsbsiQbBNwiDBUOO2K0kE7IKZ71CUlfdhguoBn5WHi17tKFhF539vfH2tZNdvQ9337gLn3ipxTFWNu4kuXJ37mVDS65rj9nQiof7DoVUwEPRxt3i530Xd9FrN+kdQ6CDw+R7RMzyZhcupJJUgTMxqMkOfM6CT7MYyWTvIEzORaljZZGln3R3h4/EW7rIsBZqaXVXo5IuJWD3dmpahGGlkNEcOfp7J/bqLoTetUokbcHqdqAW/Zj2n/7HPyFnT37nUjrD4LAEefk7x6yahbVn1KVdycXgsmfKoJVxrbNq6Cz54rPQq3MbO+KxPHmWoKayIxSUb08T03WIjDVFaLZ4MPaOyWyrV/WpbjVVXgM4V3mxBVsaI6w3DWP63M3GhT8R7VBP573cS0agvkjwKMrQ4P/UfFe2l6kwBhYiCW60kHa7C64LAP8FyyxDe6tBJDagykLpyaP1VLCYwM2JxKNIfB6gDEZZmf5Xlvoov94KP6s/pLA4z5ug5wysVn9n8wrlLrRWXdE9apFzMLZgTb3+nl7i3w8OYDxUkbceW69Uw2QuW+V14zQmS9S9dZxHN7NJhkWpMCFdVHFOVXTwNC/jx/qre2HsWdc5p0lOWiyY3owwJkoIjkAeTGjbqVmWiFQ9WaZKWick7kDScqp25W4zGja754FcIJRJ7zFHo9fSKXno4+HGSSkG4nwH2oHdDkr968TK1ZB2s0V8JqdeIyTgRa+7IARmJ8Nku+X0xfjpl4be5zjkTxJPDzciNoV19aXayH0HMXqvIG9W9cRKlSrIP3+u1JCapAs2oN6xnhZsUsvy9P3UDm8FyUquLdTuzvP1MN3ODXQx7x4mZYf+6eTBAQ+3MR1QdyaiUjblVW0RXaK488Jyl7cixLi+sYYRQgRS09FtQvN2z3SKoblZ2bYE7WL1YgYlWyYmxnqzSOEHmeI++r8jwJjFwHc+4/SazAC445IAZIGvJR9uyxXgx6cREv0pJLuBebzfugcJqAvDeSuFIIsFj0xgOTTKPQdQ0C56I34rQ5Ra4qLsaeV2tPEtx3zxk0qzOTrlTAUqzrkjZv7LFWler5UaLbMuaEzA1MZbzOBnIN+ixCpa33u5fQtWS8uBZWC9h65BUSnu/Arze2kp/j6cNYQPaSKKYk2htfrd9UX8BIfFUX02pNz55VQo0gwxanJHkk1ksHpDI8L4B5xus7ov8Kt7E8qvxWkWAOepYPzVm59w5uFEn6CeKLuIeI38QEunJTagMJmzgqD5epqibHanxXRcY5fxqZnfEGE1WkASiAJ7mhmkHQs/5BTuNnxCTCjCWAaip2ihYrUuQgl/dqL4C/PiSR/L4zbmQQJ0KLdDSchiRhFHmk2Wb5Z94bct83H6LiGVVlAgT3FOgF0ko1idf1g4lUdXS0fx7K7mEGOh14sVsZ6rfzH52+lQ2ALXgGd7pmEHkGtKqbsiYeJnM7u/uQflxX25TMuPkqeZgmiMWfU2uO22NXHdBydgwmwHusN79Am59xaXIyFwpXcIO7JFAm4lcWnoD1lZWREK4Su/KRD15UoNwxk/fOSC2rWZ1xsTKj0hrZ5++v+Hf1fLJ6BOZzmkG5Ko+iXP/5c5qzMqW9fYBH29WHmhzlC6RwHuV2OJ/Bk4squl/qcUaj2NmjHguiStrm18dQMOcUy9MQT05t5ttS/HquCkBCKuZsgzx+7zDdhNuUIKaXi+rzD1QYQJ/07ei3gJq6gYTAqHyx+XCPqehD31W9FwBztnnJJACGwZ1QHz6jIvd3zZWnFQhRdzlnnrP07az93HAQ96am0RTQ3VViKt9uUWNUE9Pb/wzPKiuws/QSaoEGfzM9VcSbhzEMw6aBz0mwR7mL9KSfMlinAgpZTL4GlrEuPKr0japOrog+iXPUZgE2IsWp8LCulhLH0TWV2vwEF7Wnx8G8kZrXQaRjKaxh2qovucupavZqY1EFer7/avsYQMeFI82o1H4GXZmF93Rs1v1U3tjDWgQxaRKyyfO+t/p7WQdAouNZyj56JNuGGsFcGueJEVJSX6xIJbkoon7OIPdSJ7yIDi/5w0Fwnn5FELCW5fupa8PpVovVC0WP7/IAMKJ1RvfKNy7dvFvMoWr9GUwANEYDmM8DZtotZDuafcV98Hx2W6Aqf1YjrsDcdkyOGdo1ynpQqvXLp9fvNGHaNy3iST4Do9/DoC/NuJ3qCdBhafbd4xwCeT0aFWyi1hwEQVRaHnfqqtryOWtRk+cgbBxPracUWIuD6nuyIXVrAlQGpFb5BXBVT42msjxuDoLaZ6I0FxWOoAjGGnbrMZyQqrYCVB2RKOzBjEBbzPDvrAOeQIDxl4dO...
Reviews

No reviews yet.