قالب:الصفحة الرئيسية/تصفح أبجدي/styles.css

/* --- New Flexbox Container for Alphabet Buttons --- */
.alphabet-nav-row {
    display: flex; /* Makes the buttons horizontal */
    flex-wrap: wrap; /* Allows buttons to wrap to the next line on smaller screens */
    justify-content: center; /* Centers buttons horizontally within the container */
    gap: var(--space-xxs); /* Uses a small gap for spacing between buttons */
    padding: var(--space-xxs) 0; /* Some padding around the button row */
}

/* --- New Individual Letter Button Styling --- */
.alphabet-button {
    /* Styles for the button container itself */
    display: flex; /* Makes content inside the button flexible for centering */
    justify-content: center; /* Centers the character horizontally */
    align-items: center; /* Centers the character vertically */
    min-width: 40px; /* Minimum width for the button */
    height: 40px; /* Fixed height for the button */
    background-color: var(--color-surface-2); /* Background from your theme variables */
    border: 1px solid var(--border-color-base); /* Border from your theme variables */
    border-radius: var(--border-radius--medium); /* Rounded corners from your theme variables */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    transition: all 0.2s ease-in-out; /* Smooth transition for hover effects */
    cursor: pointer; /* Changes mouse cursor to a hand on hover */
}

/* Styling for the actual link (the letter) inside the button */
.alphabet-button a {
    color: var(--color-base--emphasized) !important; /* Text color from your theme variables */
    text-decoration: none !important; /* Removes underline, !important to override other rules */
    font-size: 1.3em; /* Font size for the character */
    font-weight: bold; /* Makes the character bold */
    line-height: 1; /* Helps with perfect vertical centering of the character */
    padding: 0; /* Remove internal padding from the link, button div handles sizing */
}

/* --- Hover Effects for the New Buttons --- */
.alphabet-button:hover {
    background-color: var(--color-surface-2--hover); /* Background on hover from your theme variables */
    border-color: var(--border-color-base); /* Keep border same or adjust if a hover border color is needed */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* More pronounced shadow on hover */
    transform: translateY(-2px); /* Slight upward lift effect on hover */
}

/* Hover effect for the link text inside the button */
.alphabet-button:hover a {
    color: var(--color-base--emphasized); /* Keep text color same or adjust if a hover text color is needed */
}

/* --- Responsive Adjustments for Smaller Screens --- */
@media (max-width: 600px) {
    .alphabet-button {
        min-width: 35px;
        height: 35px;
    }
    .alphabet-button a {
        font-size: 1.2em;
    }
}