Результат получен через нейросеть или доп.информация
Gemini 2.5 Pro Preview 05-06
Промпт на основном языке
You are an expert UI/UX designer and CSS developer, specializing in creating themes for userstyles.org (compatible with Stylish/Stylus browser extensions). Your task is to generate a complete user style to transform a given webpage into a sophisticated "dark modern next-gen" theme, **dynamically adapting its accent colors based on the original site's prominent colors.**
**Core Theme & Aesthetic Guidelines:**
1. **Dark Palette (Primary Base):**
* **Backgrounds:** Utilize a sophisticated, neutral dark color palette for primary page and component backgrounds. This base should be consistent across themes. Options include:
* Deep Grays: e.g., `#1A1A1A`, `#222222`, `#1E1E1E`
* Near-Blacks: e.g., `#121212`, `#0D0D0D`
* **Text & Foreground:** Ensure high contrast for text using light grays (e.g., `#E0E0E0`, `#DEDEDE`), or off-whites (e.g., `#F5F5F5`) for excellent readability.
2. **Accent Color Derivation & Application (CRITICAL):**
* **Analysis of Original Site:** From the provided HTML and any embedded/linked CSS (if discernible), **identify 1-2 prominent colors used by the original website**. These could be brand colors, colors used for primary buttons, headers, or significant UI elements. Prioritize non-grayscale colors.
* **Adapting for Dark Theme:**
* **Primary Accent:** Take the most prominent original site color. If it's a light color, use it directly as a vibrant accent. If it's a dark color, **transform it into a brighter, more saturated, or slightly lighter variant** suitable for an accent on a dark background (e.g., if the site uses dark blue `#003366`, consider a brighter blue like `#007BFF` or `#3498DB` for the accent).
* **Secondary Accent (Optional):** If a second prominent color is identified, adapt it similarly for use as a secondary, less frequent accent, or for subtle highlights.
* **Fallback Accents:** If no clear prominent non-grayscale colors can be identified from the site's HTML/CSS, or if the identified colors are unsuitable even after adaptation, then (and only then) fall back to selecting 1-2 vibrant modern accent colors from the following list:
* Electric Blues: e.g., `#007BFF`
* Futuristic Purples: e.g., `#5e35b1`, `#6A0DAD`
* Vivid Pinks / Magentas: e.g., `#E91E63`
* Bright Reds / Crimson: e.g., `#E53935` (use sparingly)
* Deep Teals / Cyans: e.g., `#1ABC9C`
* Warm Oranges / Ambers: e.g., `#FF9800`
* **Application:** These derived or fallback accent(s) should be used for interactive elements (buttons, links, icons), highlights, borders, important text snippets, and calls to action. They should provide a striking contrast to the dark base.
3. **Modern Design Principles:**
* **Cleanliness & Minimalism:** Emphasize clean lines, minimalism, and generous whitespace. Avoid clutter.
* **Typography:** Select modern, highly legible sans-serif fonts for body text and headings (e.g., Inter, Roboto, Open Sans, Montserrat, or similar). Ensure clear typographic hierarchy using font sizes, weights (e.g., 300, 400, 600, 700), and letter spacing. Graceful fallbacks to common system sans-serif fonts.
* **Layout:** The styles should respect and enhance modern layout techniques.
4. **"Next-Gen" Elements (Subtle & Tasteful):**
* **Interactivity & Feedback:** Smooth CSS transitions (e.g., `transition: all 0.3s ease-in-out;`). Subtle scaling or glow effects on hover (potentially using a desaturated/darker version of the primary accent color for glows).
* **Depth & Elevation:** Soft, subtle CSS box shadows (e.g., `rgba(0,0,0,0.2)` or a very dark, desaturated version of the primary accent like `rgba(ACCENT_BASE_RGB, 0.15)`).
* **Gradients (Optional & Subtle):** Minimalistic use of subtle CSS linear or radial gradients using shades of the derived accent color(s) or the dark base.
* **Glassmorphism/Frosted Glass (Optional & Very Selective):** `backdrop-filter: blur(10px); background-color: rgba(DARK_BASE_RGB, 0.5);` (ensure fallbacks).
* **Rounded Corners:** Consistent `border-radius` (e.g., 4px, 8px, 12px).
* **Thin Borders/Dividers:** Subtle borders (e.g., `1px solid rgba(LIGHT_TEXT_RGB, 0.1)`), potentially using a very desaturated/dark version of the primary accent color for important separators.
**Output Requirements (Strictly for Userstyles.org):**
1. **UserStyle Metadata Block:** The entire output **MUST** begin with the standard UserStyle metadata block.
* **`@name`**: Attempt to infer a suitable name from the HTML's `<title>` tag or primary `<h1>` tag. Prefix it with "Dark Modern Next-Gen for [SiteName]". If a clear site name isn't apparent, use "Dark Modern Next-Gen for [Domain]".
* **`@author`**: Set this to "Gemini AI".
* **`@description`**: Generate a concise description like "A dark, modern, next-generation theme for [SiteName or Domain], adapting [OriginalSiteColorName, e.g., 'purple'] accents." (mention the adapted color if clearly identified).
* **`@version`**: Use the current date and time in `YYYYMMDD.HH.MM` format.
* **`@namespace`**: Use "USO Archive".
* **`@license`**: Use "NONE".
* **`@preprocessor uso`**: Include this line.
```css
/* ==UserStyle==
@name [Generated Style Name - e.g., Dark Modern Next-Gen for ExampleSite]
@namespace USO Archive
@author Gemini AI
@description A dark, modern, next-generation theme for [SiteName or Domain], adapting [OriginalSiteColorName] accents.
@version YYYYMMDD.HH.MM
@license NONE
@preprocessor uso
==/UserStyle== */
```
2. **`@-moz-document` Directive:** All CSS rules **MUST** be enclosed within an `@-moz-document` directive.
* **Target Domain(s):** **Automatically extract the primary domain** from the URL of the provided HTML or from `link` tags or script sources. Include discernible subdomains.
3. **Plain CSS Rules:**
* Inside the `@-moz-document` block, you **MUST** write **standard, plain CSS**.
* **NO Stylus preprocessor syntax.**
* While you cannot use Stylus variables in the output, *internally, during your generation process, think in terms of a consistent dark base, the derived/fallback accent colors, font choices, and spacing units* to ensure a cohesive design. Then, output these as hardcoded CSS values.
4. **Specificity and Overrides:**
* Use selectors specific enough to override site defaults.
* Employ `!important` judiciously.
5. **Structure & Readability (within plain CSS):**
* Organize CSS rules logically.
* Use standard CSS comments (`/* comment */`).
6. **Thorough Site Analysis (from provided HTML):**
* Based on the HTML I provide, **meticulously analyze its structure, class names, IDs, and critically, any inline styles or embedded `<style>` blocks or references to CSS files to identify prominent original site colors.**
* Infer the general structure and common components of the target website from the provided HTML.
**Input Process:**
1. I will provide the **full HTML structure** of a representative page from the target site. This HTML is your SOLE source for deriving original site colors, domain, and site name.
2. You will extract the necessary information (domain(s), site name, prominent original colors) directly from this HTML.
**Your Task:**
Based SOLELY on the HTML I provide next, generate the complete UserStyle CSS code. This includes:
1. Automatically determining the target domain(s) and site name for metadata.
2. **Analyzing the HTML for prominent original site colors and deriving/adapting 1-2 accent colors for the dark theme as described in section 2 ("Accent Color Derivation & Application").**
3. If no suitable original colors are found, use the fallback accent color list.
4. Generating all metadata (with "Gemini AI" as author, and mentioning the adapted color in the description if applicable).
5. Writing all CSS rules to implement the dark theme with the derived/fallback accents.
The style should be functional, visually appealing, and unique to the site by reflecting its original color identity within the dark theme.
Результаты выполнения промпта или варианты промптов
/* ==UserStyle==
@name Dark Modern Next-Gen for Telethon
@namespace USO Archive
@author Gemini AI
@description A dark, modern, next-generation theme for Telethon (readthedocs.io), adapting its original blue accents.
@version 20240317.20.18
@license NONE
@preprocessor uso
==/UserStyle== */
@-moz-document domain("telethon.readthedocs.io") {
/*
================================================================================
CORE PALETTE & VARIABLES (Conceptual - values are hardcoded below)
================================================================================
--dark-bg-primary: #1A1A1A;
--dark-bg-secondary: #1E1E1E;
--dark-bg-tertiary: #222222;
--dark-bg-quaternary: #2C2C2C;
--light-text-primary: #E0E0E0;
--light-text-secondary: #B0B0B0;
--light-text-disabled: #777777;
--accent-primary: #3498DB; /* Derived from RTD theme's blue #2980B9 */
--accent-primary-hover: #5DADE2;
--accent-primary-rgb: 52, 152, 219;
--border-color-soft: #333333;
--border-color-medium: #444444;
--font-family-sans: Inter, Roboto, "Open Sans", "Helvetica Neue", Arial, sans-serif;
--border-radius-small: 4px;
--border-radius-medium: 8px;
--transition-speed: 0.25s;
================================================================================
*/
/* Global Styles */
html, body {
background-color: #1A1A1A !important;
color: #E0E0E0 !important;
font-family: Inter, Roboto, "Open Sans", "Helvetica Neue", Arial, sans-serif !important;
}
* {
scrollbar-color: #444444 #222222; /* For Firefox */
scrollbar-width: thin;
}
/* Webkit Scrollbars */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: #222222;
}
::-webkit-scrollbar-thumb {
background-color: #444444;
border-radius: 5px;
border: 2px solid #222222;
}
::-webkit-scrollbar-thumb:hover {
background-color: #555555;
}
::-webkit-scrollbar-corner {
background: #1A1A1A;
}
/* Links */
a {
color: #3498DB !important;
text-decoration: none !important;
transition: color var(--transition-speed) ease-in-out, background-color var(--transition-speed) ease-in-out;
}
a:hover {
color: #5DADE2 !important;
text-decoration: underline !important;
}
/* Headings */
h1, h2, h3, h4, h5, h6 {
color: #F5F5F5 !important;
border-bottom-color: #444444 !important;
font-weight: 600;
}
h1 { font-size: 2.2em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.5em; }
.headerlink {
color: #3498DB !important;
opacity: 0.7;
transition: opacity var(--transition-speed) ease-in-out;
}
.headerlink:hover {
color: #5DADE2 !important;
background-color: transparent !important;
opacity: 1;
}
/* Main Layout Components */
.wy-grid-for-nav {
background-color: #1A1A1A !important;
}
.wy-nav-side {
background-color: #1E1E1E !important;
border-right: 1px solid #333333;
box-shadow: 2px 0 8px rgba(0,0,0,0.2);
}
.wy-side-nav-search {
background-color: #222222 !important;
border-bottom: 1px solid #333333;
}
.wy-side-nav-search > a, .wy-side-nav-search .wy-dropdown > a {
color: #E0E0E0 !important;
font-weight: 600;
}
.wy-side-nav-search input[type=text] {
background-color: #2C2C2C !important;
color: #D0D0D0 !important;
border: 1px solid #444444 !important;
border-radius: var(--border-radius-small) !important;
box-shadow: none !important;
}
.wy-side-nav-search input[type=text]:focus {
border-color: #3498DB !important;
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.3) !important;
}
.wy-menu-vertical {
background-color: #1E1E1E !important;
}
.wy-menu-vertical p.caption {
color: #A0A0A0 !important;
font-weight: 500;
}
.wy-menu-vertical p.caption span.caption-text {
color: #B0B0B0 !important; /* Override caption text color for better contrast */
font-weight: 600;
}
.wy-menu-vertical li.toctree-l1.current > a {
background: #2C2C2C !important;
border-right: 3px solid #3498DB !important;
}
.wy-menu-vertical li.current > a { /* Current page in nav */
color: #E0E0E0 !important;
background: #2C2C2C !important;
border-right: 3px solid #3498DB !important;
padding-left: 10px !important;
}
.wy-menu-vertical li.current a {
color: #E0E0E0 !important;
font-weight: 500;
}
.wy-menu-vertical li.current > a .toctree-expand { /* Ensure expand icon is visible */
color: #E0E0E0 !important;
}
.wy-menu-vertical a {
color: #C0C0C0 !important;
border: none !important; /* Remove default borders */
transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}
.wy-menu-vertical a:hover {
background-color: #282828 !important;
color: #E0E0E0 !important;
}
.wy-menu-vertical li.on a, .wy-menu-vertical li.current > a {
color: #F5F5F5 !important;
font-weight: bold;
}
/* Content Area */
.wy-nav-content-wrap {
background-color: #1A1A1A !important;
}
.wy-nav-content {
background-color: #1A1A1A !important;
padding: 1.618em 3.236em;
}
.rst-content {
background-color: #1E1E1E !important;
border-radius: var(--border-radius-medium);
padding: 25px 30px !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
border: 1px solid #2a2a2a;
}
.wy-nav-top {
background-color: #222222 !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
color: #E0E0E0 !important;
}
.wy-nav-top a {
color: #E0E0E0 !important;
}
.wy-nav-top i.fa-bars {
color: #E0E0E0 !important;
}
/* Breadcrumbs */
.wy-breadcrumbs {
margin-bottom: 20px;
background-color: #222222;
padding: 10px 15px;
border-radius: var(--border-radius-small);
border: 1px solid #333333;
}
.wy-breadcrumbs li, .wy-breadcrumbs li a {
color: #B0B0B0 !important;
text-shadow: none !important;
}
.wy-breadcrumbs li a:hover {
color: #5DADE2 !important;
}
.wy-breadcrumbs li.active {
color: #E0E0E0 !important;
}
/* Footer Navigation */
.rst-footer-buttons {
margin-top: 25px;
}
.rst-footer-buttons .btn-neutral {
background-color: #2C2C2C !important;
color: #C0C0C0 !important;
border: 1px solid #444444 !important;
box-shadow: none !important;
transition: all var(--transition-speed) ease;
}
.rst-footer-buttons .btn-neutral:hover {
background-color: #3498DB !important;
color: #FFFFFF !important;
border-color: #3498DB !important;
transform: translateY(-2px);
box-shadow: 0 2px 5px rgba(52, 152, 219, 0.2) !important;
}
.rst-footer-buttons .btn-neutral .fa {
color: inherit !important;
}
/* Contentinfo (Footer) */
.rst-content footer {
border-top: 1px solid #333333;
padding-top: 20px;
margin-top: 30px;
}
.rst-content footer p {
color: #A0A0A0 !important;
}
/* Code Blocks (Pygments) */
.highlight, pre, .highlight pre {
background-color: #222222 !important;
border: 1px solid #333333 !important;
border-radius: var(--border-radius-small) !important;
padding: 1em !important;
color: #E0E0E0 !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
div[class*="highlight-"] { /* Covers .highlight-sh, .highlight-python etc */
background-color: #222222 !important;
border: 1px solid #333333 !important;
border-radius: var(--border-radius-small);
padding: 1em;
}
/* Pygments Syntax Highlighting Overrides */
.highlight .c, .highlight .c1, .highlight .cs { color: #848484 !important; font-style: italic; } /* Comment */
.highlight .k, .highlight .kc, .highlight .kd, .highlight .kp, .highlight .kr, .highlight .kt { color: #85A8E0 !important; font-weight: bold; } /* Keyword - Lighter blue for keywords */
.highlight .kn { color: #3498DB !important; font-weight: bold; } /* Keyword.Namespace (accent) */
.highlight .s, .highlight .s1, .highlight .s2, .highlight .sd, .highlight .se, .highlight .sh, .highlight .si, .highlight .sx, .highlight .sr { color: #8CE09A !important; } /* String - Light green */
.highlight .nb, .highlight .bp { color: #5DADE2 !important; } /* Name.Builtin, Name.Builtin.Pseudo - Accent hover blue */
.highlight .nc, .highlight .no { color: #E6A65B !important; } /* Name.Class, Name.Constant - Orange/Amber */
.highlight .nd { color: #3498DB !important; } /* Name.Decorator */
.highlight .nf, .highlight .fm { color: #A6D5FA !important; } /* Name.Function, Name.Function.Magic - Lighter Accent blue */
.highlight .nn { color: #D0D0D0 !important; } /* Name.Namespace */
.highlight .nt { color: #85A8E0 !important; font-weight: bold; } /* Name.Tag - Lighter blue */
.highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm { color: #C0C0C0 !important; } /* Name.Variable */
.highlight .o, .highlight .ow { color: #E0E0E0 !important; } /* Operator, Operator.Word */
.highlight .p { color: #D0D0D0 !important; } /* Punctuation */
.highlight .m, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .mo, .highlight .il { color: #E6A65B !important; } /* Literal.Number - Orange/Amber */
.highlight .ss { color: #8CE09A !important; } /* Literal.String.Symbol */
.highlight .gp, .highlight .go { color: #777777 !important; } /* Generic.Prompt, Generic.Output */
.highlight .gh { color: #F5F5F5 !important; font-weight: bold; } /* Generic.Heading */
.highlight .ge { font-style: italic !important; } /* Generic.Emph */
.highlight .gs { font-weight: bold !important; } /* Generic.Strong */
.highlight .gu { color: #3498DB !important; font-weight: bold; } /* Generic.Subheading */
.highlight .gt { color: #E53935 !important; } /* Generic.Traceback */
.highlight .err { background-color: #402020 !important; color: #F5C5C5 !important; } /* Error */
/* Inline Code `code` */
.rst-content code.literal, .rst-content tt.literal, .rst-content .literal {
color: #8CE09A !important; /* Light green, same as strings */
background-color: #2C2C2C !important;
border: 1px solid #383838 !important;
padding: 0.2em 0.4em !important;
border-radius: var(--border-radius-small) !important;
font-size: 0.9em !important;
}
a code.literal {
color: #3498DB !important; /* Links within code should use accent */
}
a:hover code.literal {
color: #5DADE2 !important;
background-color: #333333 !important;
}
/* Admonitions (note, warning, etc.) */
.admonition, .admonition-note, .note, .attention, .caution, .danger, .error, .hint, .important, .tip, .warning {
background-color: #252525 !important;
border: 1px solid #383838 !important;
border-left-width: 5px !important;
border-radius: var(--border-radius-small) !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
padding: 12px 15px !important;
}
.admonition p:last-child, .note p:last-child {
margin-bottom: 0 !important;
}
.admonition-title, .admonition .admonition-title {
background-color: rgba(52, 152, 219, 0.1) !important; /* Accent with low opacity */
color: #3498DB !important;
border-bottom: 1px solid #333333 !important;
font-weight: 600;
margin: -12px -15px 10px -15px !important; /* Adjust to fit padding */
padding: 8px 15px !important;
border-top-left-radius: calc(var(--border-radius-small) - 1px); /* Adjust for border */
border-top-right-radius: calc(var(--border-radius-small) - 1px);
}
/* Specific Admonition Colors (using accent as base) */
.admonition.note, .note, .admonition-hint, .hint, .admonition-tip, .tip {
border-left-color: #3498DB !important; /* Accent Blue */
}
.admonition.warning, .caution, .attention {
border-left-color: #FF9800 !important; /* Orange */
}
.admonition.warning .admonition-title, .caution .admonition-title, .attention .admonition-title {
background-color: rgba(255, 152, 0, 0.1) !important;
color: #FF9800 !important;
}
.admonition.error, .danger {
border-left-color: #E53935 !important; /* Red */
}
.admonition.error .admonition-title, .danger .admonition-title {
background-color: rgba(229, 57, 53, 0.1) !important;
color: #E53935 !important;
}
/* Tables */
table.docutils {
border: 1px solid #444444 !important;
box-shadow: none !important;
border-collapse: collapse;
width: 100%;
}
table.docutils th, table.docutils td {
border: 1px solid #444444 !important;
padding: 8px 12px !important;
color: #C0C0C0 !important;
}
table.docutils thead th {
background-color: #282828 !important;
color: #E0E0E0 !important;
font-weight: 600;
}
table.docutils tbody tr:nth-child(odd) td {
background-color: #222222 !important;
}
table.docutils tbody tr:nth-child(even) td {
background-color: #252525 !important;
}
table.docutils p { /* Paragraphs within table cells */
color: inherit !important;
}
/* Horizontal Rules */
hr {
border: 0 !important;
border-top: 1px solid #444444 !important;
height: 1px !important;
background: transparent !important;
margin: 2em 0 !important;
}
/* Version Dropdown */
.rst-versions {
background-color: #222222 !important;
border-top: 1px solid #444444 !important;
box-shadow: 0 -2px 8px rgba(0,0,0,0.2) !important;
}
.rst-versions .rst-current-version {
background-color: #2C2C2C !important;
color: #E0E0E0 !important;
}
.rst-versions .rst-current-version .fa-book {
color: #E0E0E0 !important;
}
.rst-versions .rst-other-versions dd a {
color: #C0C0C0 !important;
}
.rst-versions .rst-other-versions dd a:hover {
background-color: #3498DB !important;
color: #FFFFFF !important;
}
/* ReadTheDocs Ethical Ads */
#ethicalads-placeholder .ea-content, #readthedocs-ea-text-footer {
background-color: #222222 !important;
border: 1px solid #333333 !important;
color: #A0A0A0 !important;
border-radius: var(--border-radius-small);
}
#readthedocs-ea-text-footer.raised {
border-top: 1px solid #333333 !important;
}
.ethicalads-text, .ethicalads-text a {
color: #A0A0A0 !important;
}
.ethicalads-text a:hover {
color: #3498DB !important;
}
.readthedocs-project-details .ethicalad { /* If different structure */
background: #222222 !important;
border: 1px solid #333333 !important;
}
.readthedocs-project-details .ethicalad a, .readthedocs-project-details .ethicalad p {
color: #A0A0A0 !important;
}
/* Fix for search results page if it exists */
#search-results dt {
border-top-color: #444444;
color: #E0E0E0;
}
#search-results dt a {
color: #3498DB !important;
}
#search-results .context {
color: #B0B0B0;
}
/* Misc */
img {
border-radius: var(--border-radius-small);
opacity: 0.9;
transition: opacity var(--transition-speed) ease;
}
img:hover {
opacity: 1;
}
/* Specific Font Awesome icon colors if needed, usually inherit works fine */
.wy-nav-content-wrap .wy-nav-top .fa,
.wy-nav-content-wrap .wy-nav-top .fa-bars {
color: #E0E0E0 !important;
}
.icon.icon-home:before {
color: #E0E0E0 !important;
}
.wy-menu-vertical .toctree-expand {
color: #A0A0A0 !important;
}
.wy-menu-vertical .toctree-expand:hover {
color: #E0E0E0 !important;
}
.wy-menu-vertical li.current > a .toctree-expand {
color: #E0E0E0 !important; /* Ensure expand icon in current item is visible */
}
/* Ensure version number in sidebar search area is legible */
.wy-side-nav-search .version {
color: #A0A0A0 !important;
margin-top: 5px;
}
}
Добавить отзыв