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 */
}
.mw-collapsible-arrow {
transition: transform 0.3s ease-in-out;
}
.mw-header {
background-color: rgba(0, 0, 0, 0.8); /* 80% transparent black */
}
.mw-footer {
background-color: rgba(0, 0, 0, 0.8); /* 80% transparent black */
}
.citizen-drawer__card{
background-color: rgba(0, 0, 0, 0.9);
}
.citizen-search-box{
background-color: rgba(0, 0, 0, 0.9);
}
.skin-citizen-light .mw-header,
.skin-citizen-light .mw-footer,
.skin-citizen-light .citizen-drawer__card,
.skin-citizen-light .citizen-search-box {
background-color: rgba(238, 238, 238, 0.8) !important;
}
/* General container for all cards */
.card-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); /* Two cards per row */
gap: 20px;
padding: 20px;
box-sizing: border-box;
justify-items: center; /* Center cards horizontally */
align-items: start; /* Align cards at the top vertically */
}
/* Card styling */
.card {
background-color: rgba(240, 240, 240, 0.01); /* 10% transparent black */
color: black; /* Ensure text inside the card is black */
width: 490px; /* Increased card width */
height: 350px; /* Increased card height */
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
position: relative;
cursor: pointer;
overflow: hidden;
}
/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
.card {
width: 100%; /* Make the card take full width on small screens */
}
.card-container {
grid-template-columns: 1fr; /* One card per row */
}
}
@media (max-width: 480px) {
.card {
width: 100%; /* Reduce card width on very small screens */
}
.card-container {
grid-template-columns: 1fr; /* One card per row */
}
}
/* Card title text styles */
.card h3, .card h4, .card p {
color: white;
}
/* Inner wrapper for flip effect */
.card-inner {
background-color: rgba(0, 0, 0, 0); /* 20% transparent */
width: 100%;
height: 100%;
transform-style: preserve-3d;
position: relative;
}
/* Front and back styling */
.card-front, .card-back {
background-color: rgba(0, 0, 0, 0); /* 10% transparent black */
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
box-sizing: border-box;
}
.card-back {
background-color: rgba(0, 0, 0, 0);
display: flex;
flex-direction: row; /* Align content in a row, left to right */
gap: 10px; /* Space between text-boxes */
justify-content: flex-start; /* Align items from left to right */
align-items: stretch; /* Ensure items stretch vertically to fill the container */
padding: 10px;
box-sizing: border-box;
height: 100%; /* Ensure it takes up full height of the card */
opacity:0;
}
/* Flip effect */
.card:hover .card-inner .card-back{
transition: opacity 0.40s ease,transform 0.40 ease;
opacity:1;
visibility:visible;
}
.card:hover .card-inner .card-back .text-box{
transition: opacity 0.40s ease,transform 0.40 ease;
opacity:1;
visibility:visible;
}
.card:hover .card-inner .card-back .text-box .sub-panel{
transition: opacity 0.40s ease,transform 0.40 ease;
opacity:1;
visibility:visible;
pointer-events:auto;
}
.card:hover .card-inner .card-back .text-box .sub-panel a{
transition: opacity 0.40s ease;
opacity:1;
visibility:visible;
pointer-events:auto;
transition: transform 0.40 ease;
}
.card:hover .card-front {
transition: opacity 0.2s ease;
opacity: 0;
}
.card-front{
transition: transform 0.40s ease, opacity 0.40s ease;
opacity: 1;
}
.card-back{
transition:opacity 0.40 ease;
visibility:hidden ;
opacity: 1;
}
.card-back .text-box {
visibility: hidden; /* Ensure text-box is still part of the layout */
opacity: 1; /* Make the text-box itself invisible */
}
.card-back .text-box .sub-panel {
opacity: 0.25; /* Make the sub-panel visible */
visibility: visible; /* Ensure it's visible */
}
.card-back .text-box .sub-panel a{
opacity:0.15;
visibility:visible;
}
/* Text box on the back of the card - aligned from left to right */
.text-box {
background-color: rgba(240, 240, 240, 0.015); /* 10% transparent black */
width: 200px; /* Fixed width for text boxes */
padding: 10px;
border-radius: 8px;
text-align: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column; /* Stack content vertically inside each text box */
gap: 10px;
justify-content: flex-start; /* Align items at the top */
align-items: center;
flex-grow: 1; /* Allow the text box to take up remaining vertical space */
}
/* Title for the text box */
.text-box h4 {
font-size: 12px; /* Small font size */
font-weight: bold;
color: white;
margin-bottom: 5px;
text-transform: uppercase; /* Make it uppercase */
display: block;
}
/* Sub-panel container - stack sub-panels horizontally */
.sub-panel-container {
display: flex;
flex-direction: row; /* Align sub-panels horizontally (left to right) */
gap: 10px; /* Space between sub-panels */
width: 100%;
padding: 10px;
box-sizing: border-box;
}
/* Individual sub-panel styling */
.sub-panel {
background-color: rgba(50, 50, 50, 0.2);
font-size: 16px; /* Slightly larger text for better readability */
color: white; /* Ensure sub-panel text is white */
width: 100%; /* Full width of container */
padding: 10px;
border-radius: 4px;
text-align: center;
cursor: pointer;
transition: transform 0.4s ease, background-color 0.3s ease;
pointer-events: none;
}
/* Hover effect for sub-panels */
.sub-panel:hover {
background-color: black;
transition: transform 0.40 ease;
transform: scale(1.05); /* Slightly enlarge on hover */
}
/* Buttons inside sub-panels */
.sub-panel button {
width: 100%; /* Make the button fill the entire width of the sub-panel */
height: 100%; /* Make the button fill the entire height of the sub-panel */
background-color: #4CAF50; /* Green background */
color: white; /* White text */
border: none; /* Remove border */
border-radius: 4px; /* Optional rounded corners */
text-align: center; /* Center the text */
font-size: 14px; /* Font size */
display: flex; /* Flexbox for centering content */
justify-content: center; /* Horizontally center the text */
align-items: center; /* Vertically center the text */
cursor: pointer;
}
/* Hover effect for buttons */
.sub-panel button:hover {
background-color: #45a049; /* Darker green on hover */
transform: scale(1.05); /* Slightly enlarge on hover */
}
/* Links inside sub-panels */
.sub-panel a {
color: white; /* Ensure link text is white */
}
.sub-panel a:visited{
color: rgb(66,0,0);
}
#footer-places-about{
display:none;
}
a {
color: rgb(255, 50, 50); /* Bright red */
text-decoration: none;
position: relative;
display: inline-block;
transition: color 0.3s ease-in-out;
}
a::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: rgb(255, 50, 50); /* Bright red underline */
transform: scaleX(0); /* Initially hidden */
transform-origin: bottom right;
transition: transform 0.3s ease-out, background-color 0.3s ease-out;
}
a:hover {
color: rgb(255, 20, 20); /* Slightly darker red */
}
a:hover::before {
transform: scaleX(1); /* Expands to full width */
background: linear-gradient(90deg, rgba(255, 50, 50, 1), rgba(255, 150, 50, 1), rgba(255, 50, 50, 1)); /* Wavy color gradient */
}
a:hover {
color: rgb(255, 20, 20); /* Slightly darker red */
text-shadow: 0 0 5px rgba(255, 50, 50, 0.8);
}
a:hover::before {
transform: scaleX(1); /* Expands outward */
}
.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;
content-visibility: auto;
}
.citizen-drawer__menu [id^="n-sidebar-icon-"] a:before {
display: block;
content: "";
width: 22px;
height: 22px;
background: transparent center/contain no-repeat;
opacity: var( --opacity-icon-base );
filter: var( --filter-invert );
}
#n-sidebar-icon-discord a:before {
background-image: url( https://cemodding.wiki/images/3/3b/Discordlogo.png )
}
.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: transform 0.3s ease-in-out;
display: inline-block;
}
.mw-collapsible-indicator.loading {
display: none; /* Hide the indicator while the loading spinner is active */
width: 16px;
height: 16px;
border: 2px solid transparent;
border-top: 2px solid #ff0000; /* Red spinner */
border-radius: 50%;
animation: spin 0.5s linear infinite; /* Quick spin */
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.mw-collapsible-indicator.loading + .mw-collapsible-content {
opacity: 0.5; /* Slightly fade the content when loading */
}
.mw-collapsible-indicator {
opacity: 1;
transition: opacity 0.2s ease-in-out;
}
.mw-collapsible-indicator.fade-out {
opacity: 0;
}
.mw-collapsible-indicator.fade-in {
opacity: 1;
}