Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
body {
background-size: cover; /* Ensures the entire image is visible */
background-repeat: no-repeat; /* Prevents the image from repeating */
background-position: top center; /* Keeps the top of the image visible */
background-attachment: fixed; /* Keeps the image fixed during scrolling */
opacity:0;
}
.fade-in {
opacity: 1;
transition: opacity 0.1s ease-in-out;
}
.mw-collapsible-arrow {
transition: transform 0.3s ease-in-out;
}
#footer-places-about{
display:none;
}
.file-box {
display: inline-block;
width: min-content;
}
.text-color-black {
color: black;
}
.text-color-green {
color: green;
}
.text-color-white {
color: white;
}
.text-color-yellow {
color: yellow;
}
.text-color-orange {
color: orange;
}
.text-color-purple {
color: purple;
}
.text-color-pink {
color: pink;
}
.text-color-brown {
color: brown;
}
.text-color-gray {
color: gray;
}
.text-color-lightblue {
color: lightblue;
}
.text-color-lightgreen {
color: lightgreen;
}
.text-color-darkblue {
color: darkblue;
}
.text-color-darkgreen {
color: darkgreen;
}
.text-color-lightgray {
color: lightgray;
}
.text-color-indigo {
color: indigo;
}
.text-color-teal {
color: teal;
}
.text-color-lime {
color: lime;
}
.text-color-red {
color: red;
}
.custom-file-block {
width:min-content;
padding: 8px;
margin: 10px 0;
display: inline-block;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.custom-file-block img {
vertical-align: middle;
margin-right: 10px;
}
.custom-file-block br {
display: none; /* Optionally remove line breaks for inline appearance */
}
/* Custom styling for file info block */
.custom-file-block {
font-family: Arial, sans-serif;
}
.file-info-label {
color: white; /* Makes the label text white */
font-size:20px;
}
.file-info {
color: white; /* Makes the info text (Uploader, Date) white */
}
/* Hide the default "expand/collapse" text */
.mw-collapsible .mw-collapsible-toggle {
display: none;
}
/* Arrow icon styling */
.mw-collapsible-arrow {
font-size: 1.2em;
margin-right: 10px;
transition: transform 0.3s ease;
display: inline-block;
}
/* Initial state for collapsed sections (arrow pointing down) */
.mw-collapsible.mw-collapsed .mw-collapsible-arrow {
transform: rotate(0deg); /* Down arrow */
}
/* State for expanded sections (arrow pointing up) */
.mw-collapsible:not(.mw-collapsed) .mw-collapsible-arrow {
transform: rotate(180deg); /* Up arrow */
}
/* Optional: Make sure the arrow is placed inline next to the title */
.mw-collapsible-header {
display: inline-block;
cursor: pointer;
}
/* Wrapper for the file info block */
.file-info-wrapper {
display: flex;
justify-content: flex-start;
align-items: center;
background-color: rgba(40, 40, 50, 0.5); /* Grey-blueish tint */
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
width: min-content; /* Adjust width based on content */
margin-left: 0; /* Align the box to the left */
padding: 10px 15px; /* Adjusted padding for more space */
margin-bottom: 15px; /* More spacing between blocks */
max-width: 100%; /* Ensure it doesn't overflow */
position: relative; /* Enable absolute positioning for icon */
}
/* Left side content (text and download icon) */
.file-info-left {
display: flex;
align-items: center;
justify-content: flex-start; /* Ensure left alignment */
flex-wrap: nowrap; /* Prevent wrapping */
width: max-content; /* Let the content take as much width as needed */
min-width: 250px; /* Ensure some minimum width for the text */
box-sizing: border-box; /* Adjust for padding */
}
/* Content area with file details */
.file-info-content {
display: inline-block;
margin-right: 15px; /* Space between text and icon */
flex-grow: 0; /* Prevent stretching */
width: auto; /* Let the content take as much width as needed */
min-width: 150px; /* Minimum width for the content area */
}
/* Download icon next to the content */
.file-info-right {
display: flex;
align-items: center; /* Center the image vertically */
justify-content: center;
margin-left:5px;
margin-bottom:13px;
width: 40px; /* Slightly larger width for better icon visibility */
height: 40px; /* Adjust height to match the width */
transition: transform 0.3s ease;
}
.file-info-right:hover {
transform: scale(1.1); /* Enlarge the icon on hover */
}
/* Label styles */
.file-info-label {
font-weight: bold;
color: #ffffff; /* White for better contrast */
font-size: 14px; /* Slightly larger font for better readability */
margin-right: 10px; /* Tighter spacing */
}
/* File info content text styling */
.file-info-content strong {
font-size: 20px; /* Increased font size for better readability */
margin-bottom: 0; /* Remove extra margin */
display: block;
}
/* Hover effects for the download icon */
.file-info-right img {
transition: all 0.3s ease;
}
.file-info-right img:hover {
opacity: 0.9; /* Slightly transparent effect on hover */
}
/* Remove bottom spacing as it is handled in footer portlet */
.citizen-drawer__menu {
margin-bottom: 0;
padding-bottom: 0;
}
.mw-portlet-External {
position: sticky;
bottom: 0;
margin-top: var( --space-md );
padding: var( --space-xs ) 0;
border-top: 1px solid var( --border-color-base );
font-size: var( --font-size-x-small );
grid-column: 1 / -1;
white-space: nowrap;
}
.mw-portlet-External .citizen-menu__heading {
display: none;
}
.mw-portlet-External ul {
display: flex;
overflow: auto;
}
.mw-portlet-External .mw-list-item a {
gap: 0;
}
/* Label */
.citizen-drawer__menu [id^="n-sidebar-label-"] a {
pointer-events: none;
margin-left: var( --space-xs );
padding-left: var( --space-md );
padding-right: var( --space-xs );
border-left: 1px solid var( --border-color-base );
border-radius: 0;
letter-spacing: 0.05em;
font-weight: var( --font-weight-normal );
color: var( --color-base--subtle ) !important;
}
/* Icons */
.citizen-drawer__menu [id^="n-sidebar-icon-"] a {
font-size: 0 !important;
content-visibility: auto !important;
}
.citizen-drawer__menu [id^="n-sidebar-icon-"] a:before {
display: block !important;
content: "" !important;
width: 22px !important;
height: 22px !important;
background: transparent center/contain no-repeat !important;
opacity: var( --opacity-icon-base ) !important;
filter: var( --filter-invert ) !important;
}
#n-sidebar-icon-discord a:before {
background-image: url( https://cemodding.wiki/images/3/3b/Discordlogo.png ) !important
}
.guidecardlayout {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.guidecardlayout-card {
color:white;
background-color: rgba(30, 30, 30, 0.65);
border-radius: 15px 15px 15px 15px;
margin: 10px;
padding: 0px;
display: flex;
flex-direction: column;
flex: 1 1 45%; /* Ensures cards take up equal space and fit side by side */
box-sizing: border-box;
}
.guidecardlayout-title {
padding-left:15px;
padding-top:15px;
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.guidecardlayout-content {
flex-grow: 1;
padding-left:15px;
padding-right:15px;
margin-bottom: 10px;
}
.guidecardlayout-button {
margin-top: auto;
width: 100%;
}
.guidecardlayout-button p {
margin: 0;
padding: 0;
}
.guidecardlayout-link {
background-color: #444444;
color: #fff;
padding: 0px;
display: block;
text-align: center;
border-radius: 0px 0px 15px 15px;
text-decoration: none;
width: 100%;
box-sizing: border-box;
}
.guidecardlayout-button .guidecardlayout-link {
padding: 10px;
display: block;
text-align: center;
border-radius: 0px 0px 15px 15px;
width: 100%;
box-sizing: border-box;
margin-top: auto;
text-decoration: none; /* Ensures the link is not underlined */
}
.guidecardlayout-button .guidecardlayout-link:hover {
background-color: #555555; /* Darker shade on hover */
}
.mw-collapsible-content .mw-collapsible {
margin-left: 15px;
}
.mw-collapsible-indicator {
font-size: 18px;
transition: opacity 0.2s ease-in-out;
display: inline-block;
}
.mw-collapsible-indicator {
font-size: 18px;
transition: opacity 0.1s ease-in-out; /* Fade out in 0.1s */
display: inline-block;
}
.mw-collapsible-indicator.loading {
opacity: 0;
}
.mw-collapsible-icon {
display: inline-flex;
align-items: center;
position: relative;
width: 16px; /* Keeps both elements aligned */
height: 16px;
}
.mw-collapsible-indicator {
font-size: 18px;
transition: opacity 0.1s ease-in-out;
display: inline-block;
position: absolute;
}
.mw-collapsible-indicator.fade-out {
opacity: 0;
}
.mw-collapsible-loading {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid transparent;
border-top: 2px solid #ff0000; /* Red spinner */
border-radius: 50%;
animation: spin 0.5s linear infinite;
position: absolute;
}
.mw-collapsible-loading.hidden {
display: none;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#loading-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
display: flex; /* Always flex but hidden */
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9999;
opacity: 1; /* Start visible */
}
.loading-circle {
width: 50px;
height: 50px;
border: 5px solid rgba(0, 0, 0, 0.2);
border-top: 5px solid black;
border-radius: 50%;
animation: spin 1s linear infinite;
}
#loading-screen p {
margin-top: 10px;
font-size: 18px;
color: black;
}