MediaWiki:Timeless.css: Difference between revisions

From Helbreath Portal
(Created page with "→‎=== DARK MODE THEME (ChatGPT-like) ===: →‎Dark mode wrapper: body.dark-mode { background-color: #1e1f20 !important; color: #e6e6e6 !important; } →‎Headings: body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 { color: #ffffff !important; } →‎Links: body.dark-mode a { color: #10a37f !important; } body.dark-mode a:visited { color: #8be9c9 !important; } body.dark-mode a.new { colo...")
 
No edit summary
Line 1: Line 1:
/* === DARK MODE THEME (ChatGPT-like) === */
/* === Dark Mode for Timeless (ChatGPT-like, always on) === */


/* Dark mode wrapper */
/* GLOBAL BACKGROUND & TEXT */
body.dark-mode {
body {
   background-color: #1e1f20 !important;
   background-color: #1e1f20 !important;
   color: #e6e6e6 !important;
   color: #e6e6e6 !important;
}
}
 
h1, h2, h3, h4, h5, h6 {
/* Headings */
body.dark-mode h1,  
body.dark-mode h2,  
body.dark-mode h3,  
body.dark-mode h4,  
body.dark-mode h5,  
body.dark-mode h6 {
   color: #ffffff !important;
   color: #ffffff !important;
}
}


/* Links */
/* LINKS */
body.dark-mode a {
a {
   color: #10a37f !important;
   color: #10a37f !important;
}
}
body.dark-mode a:visited {
a:visited {
   color: #8be9c9 !important;
   color: #8be9c9 !important;
}
}
body.dark-mode a.new {
a.new {
   color: #ff6b6b !important;
   color: #ff6b6b !important;
}
}


/* Header & nav */
/* HEADER & NAVIGATION */
body.dark-mode #mw-header {
#mw-header {
   background-color: #2a2b2d !important;
   background-color: #2a2b2d !important;
   border-bottom: 1px solid #3a3b3d !important;
   border-bottom: 1px solid #3a3b3d !important;
}
}
body.dark-mode #mw-site-navigation,
#mw-site-navigation,
body.dark-mode #mw-related-navigation,
#mw-related-navigation,
body.dark-mode #mw-personaltools {
#mw-personaltools {
   background-color: #252627 !important;
   background-color: #252627 !important;
   border-right: 1px solid #3a3b3d !important;
   border-right: 1px solid #3a3b3d !important;
}
}
body.dark-mode #mw-site-navigation a,
#mw-site-navigation a,
body.dark-mode #mw-related-navigation a,
#mw-related-navigation a,
body.dark-mode #mw-personaltools a {
#mw-personaltools a {
   color: #d0d0d0 !important;
   color: #d0d0d0 !important;
}
}
body.dark-mode #mw-site-navigation a:hover,
#mw-site-navigation a:hover,
body.dark-mode #mw-related-navigation a:hover,
#mw-related-navigation a:hover,
body.dark-mode #mw-personaltools a:hover {
#mw-personaltools a:hover {
   color: #ffffff !important;
   color: #ffffff !important;
   background-color: #323334 !important;
   background-color: #323334 !important;
Line 52: Line 45:
}
}


/* Content area */
/* CONTENT AREA */
body.dark-mode #mw-content {
#mw-content {
   background-color: #1e1f20 !important;
   background-color: #1e1f20 !important;
   border: none !important;
   border: none !important;
Line 60: Line 53:
   box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
   box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
}
}
body.dark-mode #contentSub,  
#contentSub, .mw-indicators {
body.dark-mode .mw-indicators {
   color: #aaa !important;
   color: #aaa !important;
}
}


/* Footer */
/* FOOTER */
body.dark-mode #mw-footer {
#mw-footer {
   background-color: #2a2b2d !important;
   background-color: #2a2b2d !important;
   border-top: 1px solid #3a3b3d !important;
   border-top: 1px solid #3a3b3d !important;
Line 72: Line 64:
}
}


/* Tables */
/* TABLES */
body.dark-mode table {
table {
   background-color: #2a2b2d !important;
   background-color: #2a2b2d !important;
   color: #e6e6e6 !important;
   color: #e6e6e6 !important;
   border: 1px solid #3a3b3d !important;
   border: 1px solid #3a3b3d !important;
}
}
body.dark-mode th {
th {
   background-color: #333435 !important;
   background-color: #333435 !important;
   color: #ffffff !important;
   color: #ffffff !important;
}
}
body.dark-mode td {
td {
   border: 1px solid #3a3b3d !important;
   border: 1px solid #3a3b3d !important;
}
}


/* Forms */
/* FORMS */
body.dark-mode input[type="text"],
input[type="text"],
body.dark-mode input[type="password"],
input[type="password"],
body.dark-mode input[type="number"],
input[type="number"],
body.dark-mode input[type="email"],
input[type="email"],
body.dark-mode textarea,
textarea,
body.dark-mode select {
select {
   background-color: #2a2b2d !important;
   background-color: #2a2b2d !important;
   color: #ffffff !important;
   color: #ffffff !important;
Line 99: Line 91:
   padding: 6px;
   padding: 6px;
}
}
body.dark-mode input:focus,
input:focus,
body.dark-mode textarea:focus,
textarea:focus,
body.dark-mode select:focus {
select:focus {
   outline: none;
   outline: none;
   border-color: #10a37f !important;
   border-color: #10a37f !important;
Line 107: Line 99:
}
}


/* Buttons */
/* BUTTONS */
body.dark-mode input[type="submit"],
input[type="submit"],
body.dark-mode button,
button,
body.dark-mode .mw-ui-button {
.mw-ui-button {
   background-color: #10a37f !important;
   background-color: #10a37f !important;
   color: #ffffff !important;
   color: #ffffff !important;
Line 118: Line 110:
   cursor: pointer;
   cursor: pointer;
}
}
body.dark-mode input[type="submit"]:hover,
input[type="submit"]:hover,
body.dark-mode button:hover,
button:hover,
body.dark-mode .mw-ui-button:hover {
.mw-ui-button:hover {
   background-color: #0d8c6b !important;
   background-color: #0d8c6b !important;
}
}


/* Diff view */
/* DIFF VIEW */
body.dark-mode td.diff-context {
td.diff-context {
   background: #252627 !important;
   background: #252627 !important;
}
}
body.dark-mode td.diff-addedline {
td.diff-addedline {
   background: #1e332d !important;
   background: #1e332d !important;
   color: #9ef5c3 !important;
   color: #9ef5c3 !important;
}
}
body.dark-mode td.diff-deletedline {
td.diff-deletedline {
   background: #331e1e !important;
   background: #331e1e !important;
   color: #ff9a9a !important;
   color: #ff9a9a !important;
}
}
body.dark-mode td.diff-marker {
td.diff-marker {
   background: #2a2b2d !important;
   background: #2a2b2d !important;
}
}


/* Code blocks */
/* CODE BLOCKS */
body.dark-mode pre,  
pre, code, .mw-code {
body.dark-mode code,  
body.dark-mode .mw-code {
   background-color: #2a2b2d !important;
   background-color: #2a2b2d !important;
   color: #dcdcdc !important;
   color: #dcdcdc !important;
Line 153: Line 143:
}
}


/* Tooltips & popups */
/* TOOLTIPS & POPUPS */
body.dark-mode .mw-tooltip {
.mw-tooltip {
   background: #2a2b2d !important;
   background: #2a2b2d !important;
   color: #fff !important;
   color: #fff !important;
Line 160: Line 150:
}
}


/* Categories & pagination */
/* CATEGORIES & PAGINATION */
body.dark-mode .catlinks,  
.catlinks, .mw-pager-navigation-bar {
body.dark-mode .mw-pager-navigation-bar {
   background: #2a2b2d !important;
   background: #2a2b2d !important;
   border: 1px solid #3a3b3d !important;
   border: 1px solid #3a3b3d !important;
   border-radius: 6px;
   border-radius: 6px;
   padding: 4px;
   padding: 4px;
}
/* === TOGGLE BUTTON STYLES === */
#dark-mode-toggle {
  cursor: pointer;
  background: #10a37f;
  color: white;
  border-radius: 8px;
  padding: 4px 10px;
  margin-left: 12px;
  font-size: 0.9em;
}
#dark-mode-toggle:hover {
  background: #0d8c6b;
}
}

Revision as of 21:22, 18 August 2025

/* === Dark Mode for Timeless (ChatGPT-like, always on) === */

/* GLOBAL BACKGROUND & TEXT */
body {
  background-color: #1e1f20 !important;
  color: #e6e6e6 !important;
}
h1, h2, h3, h4, h5, h6 {
  color: #ffffff !important;
}

/* LINKS */
a {
  color: #10a37f !important;
}
a:visited {
  color: #8be9c9 !important;
}
a.new {
  color: #ff6b6b !important;
}

/* HEADER & NAVIGATION */
#mw-header {
  background-color: #2a2b2d !important;
  border-bottom: 1px solid #3a3b3d !important;
}
#mw-site-navigation,
#mw-related-navigation,
#mw-personaltools {
  background-color: #252627 !important;
  border-right: 1px solid #3a3b3d !important;
}
#mw-site-navigation a,
#mw-related-navigation a,
#mw-personaltools a {
  color: #d0d0d0 !important;
}
#mw-site-navigation a:hover,
#mw-related-navigation a:hover,
#mw-personaltools a:hover {
  color: #ffffff !important;
  background-color: #323334 !important;
  border-radius: 6px;
}

/* CONTENT AREA */
#mw-content {
  background-color: #1e1f20 !important;
  border: none !important;
  padding: 1.5em;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
}
#contentSub, .mw-indicators {
  color: #aaa !important;
}

/* FOOTER */
#mw-footer {
  background-color: #2a2b2d !important;
  border-top: 1px solid #3a3b3d !important;
  color: #aaa !important;
}

/* TABLES */
table {
  background-color: #2a2b2d !important;
  color: #e6e6e6 !important;
  border: 1px solid #3a3b3d !important;
}
th {
  background-color: #333435 !important;
  color: #ffffff !important;
}
td {
  border: 1px solid #3a3b3d !important;
}

/* FORMS */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
textarea,
select {
  background-color: #2a2b2d !important;
  color: #ffffff !important;
  border: 1px solid #3a3b3d !important;
  border-radius: 6px;
  padding: 6px;
}
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #10a37f !important;
  box-shadow: 0 0 4px #10a37f;
}

/* BUTTONS */
input[type="submit"],
button,
.mw-ui-button {
  background-color: #10a37f !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
}
input[type="submit"]:hover,
button:hover,
.mw-ui-button:hover {
  background-color: #0d8c6b !important;
}

/* DIFF VIEW */
td.diff-context {
  background: #252627 !important;
}
td.diff-addedline {
  background: #1e332d !important;
  color: #9ef5c3 !important;
}
td.diff-deletedline {
  background: #331e1e !important;
  color: #ff9a9a !important;
}
td.diff-marker {
  background: #2a2b2d !important;
}

/* CODE BLOCKS */
pre, code, .mw-code {
  background-color: #2a2b2d !important;
  color: #dcdcdc !important;
  border: 1px solid #3a3b3d !important;
  border-radius: 6px;
  padding: 6px 10px;
  font-family: monospace, monospace;
  font-size: 0.95em;
}

/* TOOLTIPS & POPUPS */
.mw-tooltip {
  background: #2a2b2d !important;
  color: #fff !important;
  border: 1px solid #3a3b3d !important;
}

/* CATEGORIES & PAGINATION */
.catlinks, .mw-pager-navigation-bar {
  background: #2a2b2d !important;
  border: 1px solid #3a3b3d !important;
  border-radius: 6px;
  padding: 4px;
}