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
Line 2: Line 2:
.card-container {
.card-container {
     display: grid;
     display: grid;
     width:400px;
     grid-template-columns: repeat(2, 1fr); /* Two cards per row */
     gap: 20px;
     gap: 20px;
     padding: 20px;
     padding: 20px;
     box-sizing: border-box;
     box-sizing: border-box;
     justify-items: center; /* Center cards */
     justify-items: center; /* Center cards horizontally */
     align-items: start;
     align-items: start; /* Align cards at the top vertically */
    perspective: 1000px; /* Perspective for 3D flip */
}
}


/* Card styling */
/* Card styling */
.card {
.card {
     width: 300px;
     width: 400px; /* Increase card width */
     height: 200px;
     height: 300px; /* Increase card height */
     background-color: #fff;
     background-color: #fff;
     border: 1px solid #ddd;
     border: 1px solid #ddd;
Line 51: Line 50:
     background-color: #f8f8f8;
     background-color: #f8f8f8;
     display: flex;
     display: flex;
    flex-direction: column;
    gap: 10px; /* Space between text boxes */
     justify-content: center;
     justify-content: center;
     align-items: center;
     align-items: center;
Line 73: Line 74:
/* Sub-panel styling */
/* Sub-panel styling */
.sub-panel {
.sub-panel {
     font-size: 14px;
     font-size: 16px; /* Slightly larger text for better readability */
     color: #333;
     color: #333;
     margin: 5px 0;
     margin: 5px 0;
}
}

Revision as of 02:43, 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 */
.card {
    width: 400px; /* Increase card width */
    height: 300px; /* Increase 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;
}

/* 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);
}

/* Sub-panel styling */
.sub-panel {
    font-size: 16px; /* Slightly larger text for better readability */
    color: #333;
    margin: 5px 0;
}
Cookies help us deliver our services. By using our services, you agree to our use of cookies.