Joker Theme ChatGPT by adamkbritsch

/* ==UserStyle==
@name       ?
@version    20241016.01.10
@namespace  ?
==/UserStyle== */

@-moz-document url("") {
/* General Theme Adjustments */
body {
    background-color: #121212; /* Dark background for dramatic effect */
    color: #EAEAEA; /* Light text color for readability */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 16px;
    margin: 0;
    padding: 0;
    background-image: url('https://raw.githubusercontent.com/adamkbritsch/personal-fun/main/joker.jpg'); /* Updated Joker background image */
    background-size: cover; /* Cover the entire background */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
}

/* Import Zombified font */
@import url('https://fonts.googleapis.com/css2?family=Zombified&display=swap');

/* Apply Zombified font to specific elements */
h1, h2, h3, h4, h5, h6, .gruesome-font {
    font-family: 'Zombified'; /* Zombified font */
}

/* Input, Button, Select, Textarea Styles */
input, button, select, textarea {
    font-family: inherit; /* Use inherited font family */
    font-size: 100%;
    margin: 0;
    border-radius: 8px; /* Rounded edges similar to macOS buttons */
    padding: 10px;
    border: 1px solid #D1D1D6; /* Default border */
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white for inputs */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Stronger shadow */
    transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

/* Specific Styles for the Text Area */
textarea {
    background-color: #333333; /* Dark background for text area */
    color: #EAEAEA; /* Light text color for visibility */
    border: 1px solid #555555; /* Darker border for contrast */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Stronger shadow */
    outline: none; /* Remove default outline */
}

/* Ensure the text inside the textarea is visible */
textarea::placeholder {
    color: #B0B0B0; /* Lighter color for placeholder text */
}

/* Adjust input and button focus styles */
input:focus, button:focus, select:focus, textarea:focus {
    border-color: #007AFF; /* Focus outline */
    background-color: rgba(255, 255, 255, 0.9); /* Slightly less transparent */
}

/* Button Styles */
button {
    background-color: #005BB5; /* Muted button color */
    color: #FFFFFF; /* Button text color */
    padding: 10px 16px;
    border: none; /* No border by default */
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

/* Special button class for no border */
button.no-border {
    border: none; /* Remove border */
    background-color: transparent; /* Background is transparent */
}

/* Ensure button icon is visible */
button.no-border:hover {
    background-color: rgba(255, 255, 255, 0.2); /* Slight hover effect */
}

/* Button hover effect */
button:hover {
    background-color: #004BA0; /* Darker muted blue on hover */
}

/* Replace ChatGPT logo with Joker */
.logo {
    background-image: url('https://raw.githubusercontent.com/adamkbritsch/personal-fun/main/joker.webp');
    background-size: contain; /* Size the image to fit */
    background-repeat: no-repeat; /* Do not repeat */
    width: 50px; /* Adjust to desired width */
    height: 50px; /* Adjust to desired height */
}

/* Text Shadow for Readability */
h1, h2, h3, h4, h5, h6, p {
    color: #EAEAEA; /* Light text color */
    text-shadow: 2px 2px 4px black; /* Stronger black outline for text */
}

/* Ensure all text in body has a shadow */
body * {
    color: #EAEAEA; /* Light text color */
    text-shadow: 1px 1px 2px black; /* Subtle shadow for all text */
}

/* Dark Gray Gradient Background */
.container {
    background: linear-gradient(to bottom, #222, #121212); /* Dark gray gradient */
}

/* Rest of your CSS... */

}