User:Ravenalien/common.css - Revision history

Ravenalien: Blanked the page

2025-02-26T03:35:08Z

Blanked the page

Ravenalien at 03:31, 26 February 2025

2025-02-26T03:31:21Z

← Older revision		Revision as of 03:31, 26 February 2025
Line 206:		Line 206:
	}		}

	/* Button container ~~to provide consistent spacing~~ */		/* Button container with centering */
	.button-container {		.button-container {
	margin: 16px 0;		margin: 16px 0;
Line 213:		Line 213:
	}		}

	/* Style for ~~external links~~ with material-button class */		/* Style for span with material-button class */
	~~a.external~~.material-button {		span.material-button {
	background-color: #3577BD;		background-color: #3577BD;
	color: #ffffff ~~!important~~;		color: #ffffff;
	padding: 10px 16px;		padding: 10px 16px;
	border-radius: 4px;		border-radius: 4px;
	~~text-decoration: none !important;~~
	~~font-weight: 500;~~
	display: inline-block;		display: inline-block;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);		box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	transition: all 0.2s ease;		transition: all 0.2s ease;
	/* ~~Remove the external link icon~~ */		margin: 8px 0;
			cursor: pointer;
			}

			/* Style for links inside material-button spans */
			span.material-button a,
			span.material-button a:visited,
			span.material-button a.external {
			color: #ffffff !important;
			text-decoration: none !important;
	background-image: none !important;		background-image: none !important;
	padding-right: ~~16px~~ !important;		padding-right: 0 !important;
	}		}

	/* Hover ~~state~~ */		/* Hover states */
	~~a.external~~.material-button:hover {		span.material-button:hover {
	background-color: #4C8DCE;		background-color: #4C8DCE;
	~~text-decoration: none !important;~~
	transform: translateY(-1px);		transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);		box-shadow: 0 4px 8px rgba(0,0,0,0.2);
Line 238:		Line 244:

	/* Active state */		/* Active state */
	~~a.external~~.material-button:active {		span.material-button:active {
	transform: translateY(1px);		transform: translateY(1px);
	box-shadow: 0 1px 2px rgba(0,0,0,0.2);		box-shadow: 0 1px 2px rgba(0,0,0,0.2);

Ravenalien at 03:26, 26 February 2025

2025-02-26T03:26:34Z

← Older revision		Revision as of 03:26, 26 February 2025
Line 209:		Line 209:
	.button-container {		.button-container {
	margin: 16px 0;		margin: 16px 0;
	display: ~~inline~~-~~block~~;		display: block;
			text-align: center;
	}		}

Ravenalien at 03:16, 26 February 2025

2025-02-26T03:16:30Z

@@ Line 206: / Line 206: @@
+}
-/* Regular external links */
+/* Button container to provide consistent spacing */
-a.external {
+.button-container {
-    color: #3577BD;
+     margin: 16px 0;
      display: inline-block;
+}
-/* Style external links with material-button class to look like buttons */
+/* Style for external links with material-button class */
 a.external.material-button {
      background-color: #3577BD;
@@ Line 261: / Line 223: @@
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      transition: all 0.2s ease;
      /* Remove the external link icon */
      background-image: none !important;

Ravenalien at 03:14, 26 February 2025

2025-02-26T03:14:31Z

← Older revision		Revision as of 03:14, 26 February 2025
Line 250:		Line 250:
	}		}

	/* ~~Hover and focus states~~ */		/* Style external links with material-button class to look like buttons */
	.material-button:~~hover,~~		a.external.material-button {
	~~a.material~~-~~button~~:~~hover,~~		background-color: #3577BD;
	~~span.material~~-~~button~~:~~hover,~~		color: #ffffff !important;
	~~a.external.material~~-~~button~~:~~hover,~~		padding: 10px 16px;
	~~.material~~-~~button~~:~~focus~~,		border-radius: 4px;
	a.~~material~~-~~button~~:~~focus,~~		text-decoration: none !important;
	~~span.material~~-~~button~~:~~focus,~~		font-weight: 500;
	a.external.material-button:~~focus~~ {		display: inline-block;
			box-shadow: 0 2px 4px rgba(0,0,0,0.2);
			transition: all 0.2s ease;
			margin: 8px 0;
			border: none;
			cursor: pointer;
			/* Remove the external link icon */
			background-image: none !important;
			padding-right: 16px !important;
			}

			/* Hover state */
			a.external.material-button:hover {
	background-color: #4C8DCE;		background-color: #4C8DCE;
	text-decoration: none !important;		text-decoration: none !important;
Line 266:		Line 278:

	/* Active state */		/* Active state */
	~~.material-button:active,~~
	~~a.material-button:active,~~
	~~span.material-button:active,~~
	a.external.material-button:active {		a.external.material-button:active {
	transform: translateY(1px);		transform: translateY(1px);

Ravenalien: Created page with "/* ========================= BASE STYLES ========================= */ body { font-family: 'Roboto', 'Segoe UI', Arial, sans-serif; line-height: 1.6; color: #333; background-color: #f5f5f5; } .main-column { padding-top: 2em; padding-bottom: 2em; max-width: 1200px; margin: 0 auto; } div#mw-navigation { align-content: center; background-color: #3577BD; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } #p-logo .mw-wiki-logo { w..."

2025-02-26T03:12:27Z

Created page with "========================= BASE STYLES =========================: body { font-family: 'Roboto', 'Segoe UI', Arial, sans-serif; line-height: 1.6; color: #333; background-color: #f5f5f5; } .main-column { padding-top: 2em; padding-bottom: 2em; max-width: 1200px; margin: 0 auto; } div#mw-navigation { align-content: center; background-color: #3577BD; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } #p-logo .mw-wiki-logo { w..."

New page

/* =========================
BASE STYLES
========================= */
body {
font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f5f5f5;
}

.main-column {
padding-top: 2em;
padding-bottom: 2em;
max-width: 1200px;
margin: 0 auto;
}

div#mw-navigation {
align-content: center;
background-color: #3577BD;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#p-logo .mw-wiki-logo {
width: 7.5em;
height: 5.5em;
margin-top: -1.5em;
}

/* =========================
TABLE STYLES
========================= */
.wikitable {
border-collapse: collapse;
width: 100%;
margin: 1em 0;
background-color: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

.wikitable > tr > th,
.wikitable > * > tr > th {
background-color: #2161c0;
color: white;
padding: 10px;
text-align: left;
}

.wikitable > tr > td,
.wikitable > * > tr > td {
padding: 8px 10px;
border-top: 1px solid #eee;
}

/* =========================
TOC IMPROVEMENTS
========================= */
#toc.toc {
background-color: #fff;
border: none;
border-radius: 8px;
padding: 20px;
margin: 20px 0;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
display: inline-block;
min-width: 300px;
}

#toc.toc .toctitle {
font-weight: bold;
color: #212121;
font-size: 1.2em;
border-bottom: 2px solid #3577BD;
padding-bottom: 8px;
margin-bottom: 12px;
}

#toc.toc .toctitle h2 {
font-size: inherit;
display: inline;
}

#toc.toc ul {
margin-left: 1.2em;
margin-bottom: 0.5em;
list-style-type: none;
}

#toc.toc ul ul {
margin-top: 0.3em;
}

#toc.toc li {
margin-bottom: 0.4em;
line-height: 1.4;
}

#toc.toc a {
color: #3577BD;
text-decoration: none;
display: inline-block;
padding: 2px 0;
transition: all 0.2s ease;
}

#toc.toc a:hover {
color: #4C8DCE;
transform: translateX(2px);
}

/* =========================
HEADINGS
========================= */
h1, h2, h3, h4, h5, h6 {
color: #2161c0;
margin-top: 1.2em;
margin-bottom: 0.5em;
font-weight: 500;
}

h1 {
font-size: 1.8em;
border-bottom: 2px solid #eaecf0;
padding-bottom: 0.2em;
}

h2 {
font-size: 1.5em;
border-bottom: 1px solid #eaecf0;
padding-bottom: 0.2em;
}

h3 {
font-size: 1.3em;
}

/* Hide toolbox */
#p-tb {
display: none;
}

/* =========================
MATERIAL UI–LIKE STYLES
========================= */
.material-card {
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
padding: 24px;
margin: 24px 0;
border-left: 4px solid #3577BD;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.material-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.material-heading {
color: #2161c0;
margin-bottom: 16px;
font-weight: 600;
font-size: 1.3rem;
padding-bottom: 8px;
border-bottom: 1px solid #f0f0f0;
}

.material-body {
color: #404040;
font-size: 1rem;
line-height: 1.6;
margin-bottom: 16px;
}

.material-body b, .material-body strong {
color: #2161c0;
font-weight: 600;
}

.material-body i, .material-body em {
color: #555;
}

.material-body ul, .material-body ol {
margin-left: 1.5em;
margin-bottom: 1em;
}

.material-body li {
margin-bottom: 0.5em;
}

/* Regular links styling */
.material-card a {
color: #3577BD;
text-decoration: none;
transition: color 0.2s;
}

.material-card a:hover {
text-decoration: underline;
color: #4C8DCE;
}

/* Regular external links */
a.external {
color: #3577BD;
text-decoration: none;
padding-right: 15px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVElEQVR42n3PgQkAIAhEUXdqJ3dqJ3e6IoTPUSQcgj4EQ5IlUiLE0Jil3PECXhcHGBhZ8kg4hwxAu3MZeCGeyFnAXp4hqNQPnt7QL0nADpD6wHccLvnAKksq8iiaAAAAAElFTkSuQmCC) center right no-repeat;
transition: color 0.2s;
}

a.external:hover {
text-decoration: underline;
color: #4C8DCE;
}

/* Button styling for all types */
.material-button,
a.material-button,
span.material-button,
a.external.material-button {
background-color: #3577BD;
color: #ffffff !important;
padding: 10px 16px;
border-radius: 4px;
text-decoration: none !important;
font-weight: 500;
display: inline-block;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
transition: all 0.2s ease;
margin: 8px 0;
border: none;
cursor: pointer;
line-height: 1.4;
font-size: 0.95rem;
}

/* Make links inside material buttons have white text */
.material-button a,
span.material-button a {
color: #ffffff !important;
text-decoration: none !important;
background-image: none !important;
padding-right: 0 !important;
}

/* Hover and focus states */
.material-button:hover,
a.material-button:hover,
span.material-button:hover,
a.external.material-button:hover,
.material-button:focus,
a.material-button:focus,
span.material-button:focus,
a.external.material-button:focus {
background-color: #4C8DCE;
text-decoration: none !important;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Active state */
.material-button:active,
a.material-button:active,
span.material-button:active,
a.external.material-button:active {
transform: translateY(1px);
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Image styling in cards */
.material-card .thumb {
border: none;
background-color: transparent;
margin: 16px auto;
}

.material-card .thumbinner {
border: none;
background-color: transparent;
text-align: center;
max-width: 100% !important;
width: auto !important;
}

.material-card .thumbcaption {
font-style: italic;
color: #666;
margin-top: 8px;
font-size: 0.95em;
}

.material-card img {
border-radius: 4px;
max-width: 100%;
height: auto;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Make categories and references look nicer */
.catlinks {
background-color: #f8f9fa;
border: none;
border-radius: 8px;
padding: 16px;
margin: 24px 0;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.catlinks a {
color: #3577BD;
text-decoration: none;
}

.catlinks a:hover {
text-decoration: underline;
color: #4C8DCE;
}

ol.references {
font-size: 0.9em;
background-color: #f9f9f9;
padding: 16px 16px 16px 40px;
border-radius: 8px;
margin-top: 24px;
}

/* =========================
RESPONSIVE ADJUSTMENTS
========================= */
@media (max-width: 768px) {
.material-card {
padding: 16px;
}

.material-heading {
font-size: 1.2rem;
}

#toc.toc {
width: 100%;
min-width: 0;
}

.material-body {
font-size: 0.95rem;
}
}