MediaWiki:Common.css: Difference between revisions

Revision as of 06:32, 30 December 2024

/* Styling for sub-panel container */
.sub-panel-container {
    display: flex;
    flex-direction: column; /* Arrange children vertically */
    gap: 10px; /* Space between each sub-panel */
    width: 100%; /* Make container full width */
    padding: 10px;
    box-sizing: border-box;
    align-items: flex-start; /* Align children to the start of the container */
}

/* Sub-panel styling */
.sub-panel {
    width: 100%; /* Each sub-panel takes full container width */
    height: auto; /* Allow height to adjust based on content */
    background-color: #ececec;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center; /* Center text inside panel */
    align-items: center; /* Center text inside panel */
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.4s ease-in-out, background-color 0.3s;
}

/* Hover effect for sub-panels */
.sub-panel:hover {
    background-color: #ddd;
    transform: scale(1.05); /* Slightly enlarge on hover */
}

@@ Line 1: / Line 1: @@
-/* 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; /* Use flexbox to arrange the side panels */
-    gap: 10px; /* Space between side panels */
-    justify-content: space-between; /* Ensure side panels are spaced evenly */
-    align-items: center; /* Center the side panels vertically */
-}
-/* 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 {
-    font-size: 16px; /* Slightly larger text for better readability */
-    color: black; /* Ensure sub-panel text is black */
-    margin: auto;
-}
 /* Styling for sub-panel container */
 .sub-panel-container {
      display: flex;
-     flex-direction: column; /* Stack panels vertically */
+     flex-direction: column; /* Arrange children vertically */
-     gap: 10px; /* Space between sub-panels */
+     gap: 10px; /* Space between each sub-panel */
-     width: 100%; /* Ensure container takes full width */
+     width: 100%; /* Make container full width */
      padding: 10px;
      box-sizing: border-box;
+    align-items: flex-start; /* Align children to the start of the container */
 }
 /* Sub-panel styling */
 .sub-panel {
-     width: 100%; /* Make each sub-panel take full container width */
+     width: 100%; /* Each sub-panel takes full container width */
-     height: 70px; /* Fixed height for consistent appearance */
+     height: auto; /* Allow height to adjust based on content */
      background-color: #ececec;
      border: 1px solid #ccc;
      display: flex;
-     justify-content: center;
+     justify-content: center; /* Center text inside panel */
-     align-items: center;
+     align-items: center; /* Center text inside panel */
      border-radius: 4px;
      cursor: pointer;
@@ Line 123: / Line 24: @@
 }
-/* Adjust hover effect for sub-panels */
+/* Hover effect for sub-panels */
 .sub-panel:hover {
      background-color: #ddd;
-    transform: scale(1.05); /* Slightly enlarge on hover */
-}
-/* Nested sub-panel styling */
-.sub-panel-container .sub-panel-container {
-    padding-left: 20px;
-    border-left: 2px solid #ccc;
-    margin-top: 10px;
-}
-/* Text inside sub-panels */
-.sub-panel p {
-    font-size: 14px; /* Adjust text size for better readability */
-    color: black; /* Ensure text is black */
-    margin: 0;
-    text-align: center;
-}
-/* Centering the 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 */
 }