Loading...

Welcome to the Chrome Engine Modding Wiki ❤️
Uh oh I have never seen you here before, let me preload some stuff

Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Common.css: Difference between revisions

MediaWiki interface page
No edit summary
No edit summary
Tag: Reverted
Line 107: Line 107:
     font-size: 16px; /* Slightly larger text for better readability */
     font-size: 16px; /* Slightly larger text for better readability */
     color: black; /* Ensure sub-panel text is black */
     color: black; /* Ensure sub-panel text is black */
     width: 50%; /* Sub-panel width relative to parent */
     width: 90%; /* Sub-panel width relative to parent */
     padding: 10px;
     padding: 10px;
     background-color: #ececec;
     background-color: #ececec;
Line 144: Line 144:
     transform: scale(1.05); /* Slightly enlarge on hover */
     transform: scale(1.05); /* Slightly enlarge on hover */
}
}





Revision as of 06:45, 30 December 2024

/* General container for all cards */
.card-container {
    display: grid;
    grid-template-columns: repeat(2, 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 - Increased size slightly */
.card {
    color: black; /* Ensure text inside the card is black */
    width: 480px; /* Increased card width */
    height: 380px; /* Increased card height */
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

/* Specific rule for titles within the card */
.card h3, .card h4, .card p {
    color: black; /* Ensure all text inside card is black */
}

/* Inner wrapper for flip effect */
.card-inner {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s ease-in-out;
    position: relative;
}

/* Front and back styling */
.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
}

/* Back face flipped */
.card-back {
    transform: rotateY(180deg);
    background-color: #f8f8f8;
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space between text boxes */
    justify-content: center;
    align-items: center;
}

/* Flip effect */
.card:hover .card-inner {
    transform: rotateY(180deg);
}

/* Text box on the back of the card */
.text-box {
    width: 90%;
    padding: 10px;
    background-color: #e9ecef; /* Light gray box */
    border-radius: 8px;
    border: 1px solid #ccc;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column; /* Stack content vertically */
    gap: 10px; /* Space between elements */
    justify-content: flex-start; /* Align items from top to bottom */
    align-items: center;
}

/* Title for the text box - Small and positioned at the top */
.text-box h4 {
    font-size: 12px; /* Small font size */
    font-weight: bold;
    color: black; /* Make sure it's black */
    margin-bottom: 5px; /* Slight space below the title */
    text-transform: uppercase; /* Make it uppercase for a cleaner look */
    display: block;
}

/* Sub-panel styling */
.sub-panel-container {
    display: flex;
    flex-direction: column; /* Align sub-panels vertically */
    gap: 10px; /* Space between sub-panels */
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

/* Individual sub-panel styling */
.sub-panel {
    font-size: 16px; /* Slightly larger text for better readability */
    color: black; /* Ensure sub-panel text is black */
    width: 90%; /* Sub-panel width relative to parent */
    padding: 10px;
    background-color: #ececec;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Hover effect for sub-panels */
.sub-panel:hover {
    background-color: #ddd;
    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 */
}




/* Main container for the new layout */
.new-main-container {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping of cards */
    gap: 20px; /* Space between cards */
    justify-content: flex-start; /* Align cards horizontally from left */
    padding: 20px;
    box-sizing: border-box;
}

/* Individual card container */
.new-card {
    display: flex;
    flex-direction: column; /* Stack content vertically */
    gap: 10px;
    width: 320px; /* Fixed width */
    padding: 15px;
    background-color: #ffffff;
    border: 1px solid #dcdcdc;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Title for each card */
.new-card-header {
    font-size: 20px;
    font-weight: bold;
    color: #333333;
    text-align: center;
    margin-bottom: 10px;
}

/* Sub-panel container for vertical stacking */
.new-sub-panel-container {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    gap: 10px;
}

/* Individual sub-panel styling */
.new-sub-panel {
    background-color: #f5f5f5;
    border: 1px solid #bbbbbb;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    font-size: 16px;
    color: #333333;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Hover effect for sub-panels */
.new-sub-panel:hover {
    background-color: #e0e0e0;
    transform: scale(1.05);
}
Cookies help us deliver our services. By using our services, you agree to our use of cookies.