GreasyFork Modern Light 2024

Custom style for GreasyFork with modern light theme, rounded corners, and animations

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

// ==UserScript==
// @name         GreasyFork Modern Light 2024
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Custom style for GreasyFork with modern light theme, rounded corners, and animations
// @author       Your Name
// @match        *://greasyfork.org/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const style = `
        body {
            background-color: #f5f5f5;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: #333;
            transition: background-color 0.3s, color 0.3s;
        }

        .header {
            background-color: #ffffff;
            border-bottom: 1px solid #e0e0e0;
            border-radius: 0 0 10px 10px;
            transition: background-color 0.3s;
        }

        .header a {
            color: #333;
            transition: color 0.3s;
        }

        .header a:hover {
            color: #007bff;
        }

        .content {
            padding: 20px;
            border-radius: 10px;
            background-color: #ffffff;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transition: box-shadow 0.3s, background-color 0.3s;
        }

        .content:hover {
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }

        .footer {
            background-color: #ffffff;
            border-top: 1px solid #e0e0e0;
            border-radius: 10px 10px 0 0;
            transition: background-color 0.3s;
        }

        .button {
            background-color: #007bff;
            color: #ffffff;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.3s;
        }

        .button:hover {
            background-color: #0056b3;
            transform: scale(1.05);
        }

        .button:active {
            background-color: #003d80;
            transform: scale(1);
        }
    `;

    const styleSheet = document.createElement('style');
    styleSheet.type = 'text/css';
    styleSheet.innerText = style;
    document.head.appendChild(styleSheet);
})();