More actions
No edit summary |
mNo edit summary |
||
(384 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
/* | 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; | |||
} | |||
box-shadow: 0 | #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; | display: flex; | ||
justify-content: | justify-content: flex-start; | ||
align-items: center; | align-items: center; | ||
padding: 10px; | 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; | display: flex; | ||
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; | display: flex; | ||
align-items: center; /* Center the image vertically */ | |||
justify-content: center; | justify-content: center; | ||
align- | 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; | 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; | |||
} | } |
Latest revision as of 00:36, 9 March 2025
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;
}