MediaWiki:Common.css: Difference between revisions
From Noe's Woes
Noelle Jade (talk | contribs) No edit summary |
Noelle Jade (talk | contribs) No edit summary |
||
| (5 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
@font-face { |
|||
/* Dark Mode Global Styles */ |
|||
font-family: "Nasalization"; |
|||
src: url(noelle.df1.dev/assets/fonts/nasalization-rg.woff2) format("woff2"), |
|||
url(noelle.df1.dev/assets/fonts/nasalization-rg.otf) format("opentype"); |
|||
body { |
|||
/* Apply dark background and light text when dark mode is active */ |
|||
font-family: 'Nasalization'; |
|||
body.dark-mode { |
|||
background-color: #2f3136; /* Dark grey background */ |
|||
color: #e0e0e0; /* Light grey text */ |
|||
} |
} |
||
.mw-editsection-like { |
|||
/* Dark mode navigation bar */ |
|||
font-family: 'Nasalization'; |
|||
body.dark-mode #p-navigation { |
|||
background-color: #202225; /* Darker grey background */ |
|||
color: #e0e0e0; |
|||
} |
} |
||
.mw-body { |
|||
/* Navigation links in dark mode */ |
|||
// h1's can exist outside of `.mw-body-content` so some heading styles |
|||
body.dark-mode #p-navigation a { |
|||
// therefore need to be defined in `.mw-body` as well. |
|||
color: #e0e0e0; /* Light grey links */ |
|||
h1, |
|||
} |
|||
.mw-heading1, |
|||
&-content h1, |
|||
body.dark-mode #p-navigation a:hover { |
|||
&-content .mw-heading1, |
|||
color: #7289da; /* Blue hover effect for links (Discord-like) */ |
|||
&-content h2, |
|||
} |
|||
&-content .mw-heading2 { |
|||
font-family: 'Nasalization'; |
|||
/* Dark mode footer */ |
|||
body.dark-mode #footer { |
|||
background-color: #202225; |
|||
color: #e0e0e0; |
|||
} |
|||
/* Main content area */ |
|||
body.dark-mode #content { |
|||
background-color: #2f3136; /* Dark background */ |
|||
color: #e0e0e0; /* Light text */ |
|||
} |
|||
/* Links in the main content */ |
|||
body.dark-mode a { |
|||
color: #7289da; /* Blue color for links */ |
|||
} |
|||
body.dark-mode a:visited { |
|||
color: #99aab5; /* Lighter color for visited links */ |
|||
} |
|||
body.dark-mode a:hover { |
|||
color: #99aab5; /* Hover effect for links */ |
|||
} |
|||
/* Buttons and input elements */ |
|||
body.dark-mode button, |
|||
body.dark-mode input[type="button"], |
|||
body.dark-mode input[type="submit"] { |
|||
background-color: #4e5156; /* Dark button background */ |
|||
color: #ffffff; /* White text */ |
|||
border: none; |
|||
} |
|||
body.dark-mode button:hover, |
|||
body.dark-mode input[type="button"]:hover, |
|||
body.dark-mode input[type="submit"]:hover { |
|||
background-color: #7289da; /* Blue hover effect for buttons */ |
|||
} |
|||
/* Textareas and form inputs */ |
|||
body.dark-mode input[type="text"], |
|||
body.dark-mode input[type="password"], |
|||
body.dark-mode input[type="email"], |
|||
body.dark-mode textarea { |
|||
background-color: #3a3f44; /* Dark background for inputs */ |
|||
color: #e0e0e0; /* Light text color */ |
|||
border: 1px solid #4e5156; /* Dark borders */ |
|||
} |
|||
/* Tables */ |
|||
body.dark-mode table { |
|||
background-color: #2f3136; /* Dark background for tables */ |
|||
color: #e0e0e0; /* Light text for table content */ |
|||
} |
|||
body.dark-mode th, |
|||
body.dark-mode td { |
|||
padding: 8px; |
|||
border: 1px solid #4e5156; /* Dark borders for table cells */ |
|||
} |
|||
/* Sidebar */ |
|||
body.dark-mode #p-sidebar { |
|||
background-color: #202225; /* Dark sidebar background */ |
|||
color: #e0e0e0; /* Light text in sidebar */ |
|||
} |
|||
/* Search box */ |
|||
body.dark-mode #searchInput { |
|||
background-color: #3a3f44; /* Dark background for search input */ |
|||
color: #e0e0e0; /* Light text */ |
|||
border: 1px solid #4e5156; /* Dark borders */ |
|||
} |
|||
/* Footer links */ |
|||
body.dark-mode #footer a { |
|||
color: #7289da; /* Blue color for footer links */ |
|||
} |
|||
body.dark-mode #footer a:hover { |
|||
color: #99aab5; /* Hover effect for footer links */ |
|||
} |
|||
Latest revision as of 07:14, 19 Mayıs 2025
@font-face {
font-family: "Nasalization";
src: url(noelle.df1.dev/assets/fonts/nasalization-rg.woff2) format("woff2"),
url(noelle.df1.dev/assets/fonts/nasalization-rg.otf) format("opentype");
body {
font-family: 'Nasalization';
}
.mw-editsection-like {
font-family: 'Nasalization';
}
.mw-body {
// h1's can exist outside of `.mw-body-content` so some heading styles
// therefore need to be defined in `.mw-body` as well.
h1,
.mw-heading1,
&-content h1,
&-content .mw-heading1,
&-content h2,
&-content .mw-heading2 {
font-family: 'Nasalization';
