MediaWiki:Common.css: Difference between revisions
From Noe's Woes
Noelle Jade (talk | contribs) No edit summary |
Noelle Jade (talk | contribs) No edit summary |
||
| (One intermediate revision 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 { |
|||
/* General Body Styles */ |
|||
font-family: 'Nasalization'; |
|||
body { |
|||
background-color: #1a1a1a; /* Lighter dark background */ |
|||
color: #d1d1d1; /* Lighter gray text */ |
|||
} |
} |
||
.mw-editsection-like { |
|||
/* Links - Brighter Blue */ |
|||
font-family: 'Nasalization'; |
|||
a { |
|||
color: #66b3ff; /* Brighter blue for links */ |
|||
} |
} |
||
.mw-body { |
|||
a:visited { |
|||
// h1's can exist outside of `.mw-body-content` so some heading styles |
|||
color: #a1c4ff; /* Lighter color for visited links */ |
|||
// therefore need to be defined in `.mw-body` as well. |
|||
} |
|||
h1, |
|||
.mw-heading1, |
|||
a:hover { |
|||
&-content h1, |
|||
color: #4da3ff; /* Lighter blue when hovering over links */ |
|||
&-content .mw-heading1, |
|||
} |
|||
&-content h2, |
|||
&-content .mw-heading2 { |
|||
/* Red Links for Non-Existent Pages */ |
|||
font-family: 'Nasalization'; |
|||
a.new { |
|||
color: #ff6666; /* Lighter red color for non-existent links */ |
|||
} |
|||
a.new:visited { |
|||
color: #ff6666; /* Keep red color for visited non-existent links */ |
|||
} |
|||
a.new:hover { |
|||
color: #ff3333; /* Slightly darker red for hover effect on non-existent links */ |
|||
} |
|||
/* Top Navigation Bar (Header) */ |
|||
#p-personal { |
|||
background-color: #2a2a2a; /* Slightly lighter dark background for the personal nav */ |
|||
color: #d1d1d1; /* Light text */ |
|||
} |
|||
#p-personal a { |
|||
color: #66b3ff; /* Brighter blue links */ |
|||
} |
|||
#p-personal a:hover { |
|||
color: #4da3ff; /* Lighter blue hover effect */ |
|||
} |
|||
/* Navigation Bar (Top Menu) */ |
|||
#p-navigation { |
|||
background-color: #353535; /* Lighter dark background for navigation bar */ |
|||
color: #d1d1d1; /* Light text in the navigation */ |
|||
} |
|||
#p-navigation a { |
|||
color: #66b3ff; /* Brighter blue links in nav */ |
|||
} |
|||
#p-navigation a:hover { |
|||
color: #4da3ff; /* Blue hover effect for navigation links */ |
|||
} |
|||
/* Sidebar */ |
|||
#p-sidebar { |
|||
background-color: #2a2a2a; /* Same lighter dark background for sidebar */ |
|||
color: #d1d1d1; /* Light text in the sidebar */ |
|||
} |
|||
/* Footer */ |
|||
#footer { |
|||
background-color: #2a2a2a; /* Lighter dark background for footer */ |
|||
color: #d1d1d1; /* Light text in the footer */ |
|||
} |
|||
/* Content Section */ |
|||
#content { |
|||
background-color: #222222; /* Lighter dark background for content */ |
|||
color: #d1d1d1; /* Light text color */ |
|||
} |
|||
/* Article Links */ |
|||
#content a { |
|||
color: #66b3ff; /* Brighter blue links in content */ |
|||
} |
|||
#content a:hover { |
|||
color: #4da3ff; /* Lighter blue hover effect for links */ |
|||
} |
|||
/* Tables */ |
|||
table { |
|||
background-color: #2a2a2a; /* Lighter dark background for tables */ |
|||
color: #d1d1d1; /* Light text in table rows */ |
|||
} |
|||
table th, |
|||
table td { |
|||
border: 1px solid #666; /* Slightly lighter border for table cells */ |
|||
padding: 8px; |
|||
} |
|||
/* Buttons and Inputs */ |
|||
button, input[type="button"], input[type="submit"] { |
|||
background-color: #444444; /* Slightly lighter button background */ |
|||
color: #ffffff; /* White text on buttons */ |
|||
border: 1px solid #666666; /* Lighter border */ |
|||
} |
|||
button:hover, input[type="button"]:hover, input[type="submit"]:hover { |
|||
background-color: #555555; /* Lighter button background on hover */ |
|||
} |
|||
/* Form Inputs */ |
|||
input[type="text"], input[type="password"], input[type="email"], textarea { |
|||
background-color: #444444; /* Lighter dark background for inputs */ |
|||
color: #d1d1d1; /* Light text */ |
|||
border: 1px solid #666666; /* Lighter borders around input fields */ |
|||
} |
|||
/* Search Box */ |
|||
#searchInput { |
|||
background-color: #444444; /* Lighter dark search box */ |
|||
color: #d1d1d1; /* Light text */ |
|||
border: 1px solid #666666; /* Lighter borders */ |
|||
} |
|||
/* Footer Links */ |
|||
#footer a { |
|||
color: #66b3ff; /* Brighter blue for footer links */ |
|||
} |
|||
#footer a:hover { |
|||
color: #4da3ff; /* 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';
