A clean and modern dark theme for CGPeers.
CGPeers - Modern Dark Clean by Oroel
Details
AuthorOroel
LicenseNo License
Categorycgpeers
Created
Updated
Code size25 kB
Code checksumdf0291ce
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Some parts are broken, like the top 10, as you can see I don't know what I'm doing, if someone wants to use this and fix it feel free to do as you please.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name CGPeers - Modern Clean Dark
@namespace userstyles
@version 1.1.0
@description A clean and modern dark theme for CGPeers.
@author Oroel
==/UserStyle== */
@-moz-document domain("cgpeers.to"),
domain("cgpeers.com") {
/* Typography */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
/* ===== CORE STYLING & VARIABLES ===== */
:root {
--main-bg: #121212; /* Deepest background */
--content-bg: #1a1a1a; /* Main content area background */
--card-bg: #222222; /* Box/Card backgrounds */
--card-bg-alt: #262626; /* Alternate card background (e.g., even rows) */
--card-bg-hover: #3a3a3a; /* Hover background for interactive elements */
--header-bg: #1e1e1e; /* Header/Footer background */
--border-color: #383838; /* Borders */
--input-bg: #2a2a2a; /* Input field background */
--input-border: #444444; /* Input field border */
--input-focus-border: #4caf50; /* Input field focus border (using success color) */
--accent-color: #fff; /* Primary accent color (links, etc.) */
--accent-hover: #5a9ee6; /* Hover for accent color */
--success-color: #4caf50; /* Success/Positive actions (buttons) */
--success-hover: #66bb6a; /* Hover for success color */
--warning-color: #ff9800; /* Warnings */
--error-color: #f44336; /* Errors/Ratio warnings */
--text-primary: #c6c6c6; /* Main text color */
--text-secondary: #aaaaaa; /* Subdued text color */
--text-light: #ffffff; /* White text (e.g., on buttons) */
--font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
--font-size-base: 10pt; /* Base font size from Theme 1 */
--font-weight-normal: 400;
--font-weight-bold: 600; /* Bold weight from Inter */
--border-radius-small: 5px;
--border-radius-medium: 8px;
--border-radius-large: 10px;
}
/* Base styles */
body {
background-color: var(--main-bg) !important;
color: var(--text-primary) !important;
font-family: var(--font-main) !important;
font-size: var(--font-size-base) !important;
line-height: 1.5;
margin: 0;
min-width: unset !important;
}
/* Reset old borders */
table, td, th, tr {
border: none !important;
box-shadow: none !important;
}
/* Improved typography */
h1, h2, h3, h4 {
font-weight: var(--font-weight-bold);
margin: 16px 0;
color: var(--text-primary);
}
a {
color: var(--accent-color);
text-decoration: none;
transition: color 0.2s ease;
}
a:hover {
color: var(--accent-hover);
text-decoration: none;
}
/* ===== LAYOUT ===== */
#wrapper, .thin {
width: 95%;
max-width: 1400px;
margin: 0 auto;
}
#content {
background-color: var(--content-bg);
border-radius: var(--border-radius-medium);
margin-top: 15px;
padding: 15px 0;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* ===== HEADER & NAVIGATION ===== */
#header {
background-color: var(--header-bg);
border-radius: var(--border-radius-large) !important;
padding: 10px 0;
}
#logo {
width: 220px;
height: 50px;
margin: 5px auto;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}
#userinfo { /* Merged styling */
background: var(--header-bg) !important;
color: var(--text-secondary);
padding: 10px 0;
font-size: 12px;
border-bottom: 1px solid var(--border-color) !important;
}
#userinfo ul li { padding: 0 8px; }
#userinfo a { color: var(--text-secondary); }
#userinfo a:hover { color: var(--text-primary); }
#userinfo span.stat { color: var(--text-primary); }
/* Main Navigation */
.site-header-nav, #new_menu { /* Combined selectors */
background-color: var(--card-bg) !important; /* Use card bg for consistency */
border-radius: var(--border-radius-small);
overflow: hidden;
margin: 5px auto 5px auto; /* Add bottom margin */
width: 95%;
max-width: 1400px;
border-bottom: 0px solid var(--border-color) !important; /* From Theme 1 */
text-align: center; /* Center nav items */
}
.site-header-nav li {
margin: 0;
display: inline-block; /* Make them inline */
}
.site-header-nav a,
#new_menu a { /* Merged styling */
color: var(--text-secondary) !important;
padding: 15px 6px !important; /* Adjusted padding */
display: inline-block;
transition: background-color 0.2s ease, color 0.2s ease;
font-weight: var(--font-weight-normal);
text-transform: uppercase;
font-size: 13px;
letter-spacing: 0.5px;
}
.site-header-nav a:hover,
#new_menu a:hover { /* Merged styling */
background-color: var(--card-bg-hover) !important;
color: var(--text-light) !important;
}
/* Active Nav Item Highlighting */
#index #nav_index a, #torrents #nav_torrents a, #requests #nav_requests a,
#forums #nav_forums a, #top10 #nav_top10 a, #rules #nav_rules a,
#wiki #nav_wiki a, #staff #nav_staff a, #collage #nav_collages a, #chat #nav_irc a {
background-color: var(--accent-color) !important;
color: var(--text-light) !important;
border-radius: 3px; /* Subtle highlight */
}
/* Search Bars in Header */
#searchbars {
background-color: transparent !important;
padding: 0 0 15px 0; /* Adjusted padding */
text-align: center; /* Center search elements */
}
#searchbars input[type="text"] {
padding: 8px 12px;
background-color: var(--input-bg) !important;
border: 1px solid var(--input-border) !important;
border-radius: var(--border-radius-small);
color: var(--text-primary) !important;
width: 180px;
font-size: 13px;
transition: all 0.2s ease;
margin: 0 5px; /* Add some spacing */
}
#searchbars input[type="text"]:focus {
border-color: var(--input-focus-border) !important;
outline: none !important;
box-shadow: 0 0 0 2px rgba(79, 140, 201, 0.25); /* Keep subtle glow */
}
/* ===== BOXES (Sidebar & Main Column) ===== */
.box { /* General box styling from Theme 2 */
background-color: var(--card-bg) !important;
border: none !important;
border-radius: var(--border-radius-large) !important;
box-shadow: 0 0px 0px rgba(0, 0, 0, 0.2) !important; /* Adjusted shadow */
margin-bottom: 1px;
overflow: hidden; /* Keep this */
}
.sidebar .box {
background-color: var(--card-bg) !important; /* Consistent background */
}
.main_column .box {
background-color: var(--card-bg) !important; /* Consistent background */
padding: 0; /* Remove default padding, rely on .head/.body */
}
.main_column .box > .head + .body, /* Add padding only if .body follows .head */
.main_column .box > .body:first-child { /* Add padding if .body is the first child */
padding: 15px;
}
.head {
background: var(--header-bg); /* Use header bg for contrast */
color: var(--text-primary);
padding: 5px 15px;
font-weight: var(--font-weight-bold);
font-size: 14px;
border-bottom: 0px solid var(--border-color);
}
blockquote {
margin: 10px;
padding: 10px;
border: 1px dashed #666;
border-radius: var(--border-radius-small) !important;
}
/* ===== TABLES ===== */
table { /* General table styling */
border: none;
border-radius: var(--border-radius-medium);
overflow: hidden;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
width: 100%; /* Ensure tables take full width */
border-collapse: collapse !important; /* Ensure borders collapse */
}
tr { /* General row styling */
background-color: var(--card-bg);
border: none;
border-bottom: 1px solid var(--border-color);
}
tr:last-child { border-bottom: none; }
td, th { /* General cell styling */
border: none;
padding: 12px 15px !important; /* Increased padding slightly */
vertical-align: middle !important;
}
.colhead { /* General header row styling */
background: var(--header-bg) !important;
color: var(--text-primary) !important;
font-weight: var(--font-weight-bold);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.colhead_dark { background: var(--header-bg) !important; } /* Consistency */
/* --- Torrent Table Modernization --- */
.torrent_table {
border-collapse: collapse !important;
border-radius: var(--border-radius-large) !important;
overflow: hidden;
background-color: var(--card-bg) !important;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important; /* Consistent shadow */
}
.torrent_table tr.torrent {
transition: background-color 0.2s ease; /* Smoother hover, removed transform */
border-bottom: 1px solid var(--border-color) !important; /* Ensure row separation */
}
.torrent_table tr.torrent:last-child { border-bottom: none !important; }
.torrent_table tr.torrent:nth-child(even) {
background-color: var(--card-bg-alt) !important; /* Use variable */
}
.torrent_table tr.torrent:nth-child...