MediaWiki:Minerva.css - Revision history

Radar at 03:52, 22 March 2025

2025-03-22T03:52:32Z

@@ Line 118: / Line 118: @@
      color: #c1c1c1; /* Light grey text */
      font-family: Georgia, Times, serif; /* Ensure consistent font */
+}

Ryan at 00:52, 13 January 2025

2025-01-13T00:52:48Z

← Older revision		Revision as of 00:52, 13 January 2025
Line 613:		Line 613:
	display: inline; /* Keep inline with the button */		display: inline; /* Keep inline with the button */
	}		}

	/* TOC List Styling */		/* TOC List Styling */
	#toc ul {		#toc ul {
Line 622:		Line 623:
	grid-auto-flow: column; /* Flow into columns */		grid-auto-flow: column; /* Flow into columns */
	column-gap: 20px; /* Spacing between columns */		column-gap: 20px; /* Spacing between columns */
	row-gap: ~~10px~~; /* ~~Spacing~~ between rows */		row-gap: 2px; /* Much smaller spacing between rows */
	}		}

Line 630:		Line 631:
	position: relative;		position: relative;
	padding-left: 25px; /* Space for numbers */		padding-left: 25px; /* Space for numbers */
			margin: 0; /* Remove any margin from list items */
	}		}

Line 645:		Line 647:
	text-decoration: none;		text-decoration: none;
	font-size: 14px;		font-size: 14px;
			padding: 4px 12px; /* Reduced vertical padding */
			display: inline-block; /* Ensures padding is respected */
			border-radius: 6px; /* Rounded corners for the button effect */
			transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transition */
	}		}

			/* Highlight effect for TOC items when hovered (button effect) */
	#toc ul li a:hover {		#toc ul li a:hover {
	color: #62a0ea; /* ~~Highlight color on hover~~ */		color: white; /* Keep text white on hover */
			background-color: #62a0ea; /* Blue background for button effect */
			padding-left: 12px; /* Slight left padding to show effect */
			transform: scale(1.05); /* Slight zoom effect */
	}		}

Ryan at 06:10, 9 December 2024

2024-12-09T06:10:58Z

@@ Line 679: / Line 679: @@
          grid-template-rows: repeat(auto-fit, minmax(1fr)); /* Single column on smaller screens */
+     }
+}
 /* END TOC EDITS END TOC EDITS END TOC EDITS END TOC EDITS */

Ryan at 03:07, 9 December 2024

2024-12-09T03:07:11Z

Show changes

Ryan at 01:55, 9 December 2024

2024-12-09T01:55:51Z

Show changes

Ryan at 01:46, 9 December 2024

2024-12-09T01:46:00Z

Show changes

Ryan at 01:41, 9 December 2024

2024-12-09T01:41:29Z

Show changes

Ryan at 01:40, 9 December 2024

2024-12-09T01:40:57Z

← Older revision		Revision as of 01:40, 9 December 2024
Line 229:		Line 229:
	/* TOC TOC TOC TOC TOC TOC TOC TOC TOC */		/* TOC TOC TOC TOC TOC TOC TOC TOC TOC */

			/* TOC Container Styling */
	.toc {		.toc {
	background-color: rgba(50,50,50,0.95);		background-color: rgba(50,50,50,0.95);
Line 238:		Line 239:
	text-align: left;		text-align: left;
	position: relative;		position: relative;
			float: left; /* Ensures TOC stays on the left */
			width: 100%; /* Ensures it takes up full width, can be adjusted */
	}		}

Line 244:		Line 247:
	display: flex;		display: flex;
	align-items: center;		align-items: center;
	justify-content: ~~flex~~-~~start~~;		justify-content: space-between; /* Space between title and toggle */
	font-size: 18px;		font-size: 18px;
	font-weight: bold;		font-weight: bold;
Line 253:		Line 256:
	/* Three-line Button Styling */		/* Three-line Button Styling */
	#togglelink::before {		#togglelink::before {
	content: "\2630";		content: "\2630"; /* Unicode character for three horizontal bars */
	font-size: 22px;		font-size: 22px;
	cursor: pointer;		cursor: pointer;
	color: white;		color: white;
			display: inline-block;
			}

			#togglelink {
			cursor: pointer;
			font-size: 22px;
			color: white;
			text-decoration: none;
			display: inline-block;
			}

			#togglelink:hover {
			color: #62a0ea;
	}		}

Ryan at 01:38, 9 December 2024

2024-12-09T01:38:29Z

Show changes

Ryan at 04:49, 8 December 2024

2024-12-08T04:49:01Z

← Older revision		Revision as of 04:49, 8 December 2024
Line 63:		Line 63:
	}		}

	/* ~~Menu~~ icon ~~adjustments~~ */		/* Left-align the menu icon (three lines) */
	.menu-icon {		.menu-icon {
	~~font-size~~: ~~48px~~; ~~/* Make the icon larger */~~		position: relative;
	~~margin-right~~: ~~15px~~; /* ~~Space between~~ the ~~icon and the branding box~~ */		left: 10px; /* Slight spacing from the left edge */
	~~align~~-~~self~~: ~~center~~; /* ~~Center~~ the icon ~~vertically~~ */		font-size: 36px; /* Make the menu icon larger */
	z-~~index~~: 10; /* ~~Ensure~~ the icon ~~stays on top if needed */~~		margin-right: 15px; /* Add spacing between the icon and the branding */
	~~position: relative; /* Adjust~~ the ~~position if required~~ */
	}		}

	/* ~~Branding~~ box~~: Ensure~~ it properly covers the ~~logo and is clickable~~ */		/* Adjust the branding box to ensure it properly covers the icon */
	.branding-box {		.branding-box {
	display: flex;		display: flex;
	justify-content: center;		justify-content: center;
	align-items: center;		align-items: center;
	~~width~~: ~~100%~~; /* ~~Ensure it spans~~ the ~~full width of the header~~ */		margin: 0 20px; /* Add spacing around the logo */
	~~height~~: 100%; /* Ensure ~~the height is flexible to accommodate~~ the logo */		width: 100%; /* Ensure the logo box takes up all available space */
	max-width: 350px; /* ~~Max~~ width for responsiveness */		max-width: 350px; /* Optional: Limit maximum width for responsiveness */
	~~padding~~: ~~0 10px~~; /* ~~Add padding for spacing~~ */		height: 100px; /* Adjust the height of the logo */
	box-sizing: border-box; /* ~~Include~~ padding in width~~/height calculations */~~		box-sizing: border-box; /* Ensure the padding is included in the width */
	~~position: relative;~~
	~~overflow: hidden; /* Prevent any content from overflowing~~ */
	}		}

	/* ~~Branding link inside~~ the ~~box: Ensures~~ it ~~fully covers the box~~ */		/* Enlarge the branding/logo area and prevent it from overflowing */
	.branding-box a {		.branding-box a {
	display: block;		display: block;
	width: 100%; ~~/* Fill the entire width of the branding box */~~		width: 100%;
	height: 100%; ~~/* Fill the entire height of the branding box */~~		height: 100%;
	background: url('https://wiki.cosmicsky.net/images/6/62/CosmicLogo.png?20240913203127') no-repeat center center;		background: url('https://wiki.cosmicsky.net/images/6/62/CosmicLogo.png?20240913203127') no-repeat center center;
	background-size: contain; ~~/* Ensure the logo scales properly */~~		background-size: contain;
	text-indent: -9999px; ~~/* Hide text inside the anchor */~~		text-indent: -9999px;
	overflow: hidden; ~~/* Prevent anything from overflowing */~~		overflow: hidden;
	}		}

Line 157:		Line 154:
	/* Make the header span the full width of the page */		/* Make the header span the full width of the page */
	.header-container {		.header-container {
	~~display~~: ~~flex~~;		width: 100vw; /* Full width of the viewport */
	~~justify~~-~~content~~: ~~space-between~~;		max-width: none; /* Remove any max-width restriction */
	~~align~~-~~items: center;~~		padding: 0 50px; /* Add padding to ensure spacing on the sides */
	width~~: 100%;~~		display: flex; /* Flexbox layout for header items */
	padding: 0 ~~20px~~; /* ~~Adjust~~ spacing */		justify-content: space-between; /* Space out items evenly */
	~~height~~: ~~120px~~; /* ~~Header height~~ */		align-items: center; /* Center items vertically */
	~~box~~-~~sizing~~: ~~border~~-~~box~~; /* ~~Ensure padding is included in height calculations~~ */
	}		}

			/* Make the branding/logo area wider */
			.branding-box {
			width: auto; /* Let the logo area expand */
			padding: 0 20px; /* Add padding around the logo */
			}

	/* Enlarge the logo */		/* Enlarge the logo */
Line 173:		Line 174:
	}		}

			/* Increase the size of the menu icon */
			.menu-icon {
			font-size: 48px; /* Increase size of the menu icon */
			margin-right: 15px; /* Add spacing between the icon and branding */
			}

	/* Adjust layout of the header to space out items */		/* Adjust layout of the header to space out items */