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

عبود السكاف في 11:49، 22 يونيو 2025

2025-06-22T11:49:08Z

→ مراجعة أقدم		مراجعة 11:49، 22 يونيو 2025
سطر 16:		سطر 16:
	min-width: 40px;		min-width: 40px;
	height: 40px;		height: 40px;
	background-color: ~~#ffffff~~; ~~/* White background for the button */~~		background-color: var(--color-surface-2);
	border: 1px solid var(--border-color-base);		border: 1px solid var(--border-color-base);
	border-radius: var(--border-radius--medium);		border-radius: var(--border-radius--medium);

عبود السكاف في 11:36، 22 يونيو 2025

2025-06-22T11:36:03Z

→ مراجعة أقدم		مراجعة 11:36، 22 يونيو 2025
سطر 1:		سطر 1:
			.alphabet-row{
			margin-top:var(--space-md);
			}
	/* --- New Flexbox Container for Alphabet Buttons --- */		/* --- New Flexbox Container for Alphabet Buttons --- */
	.alphabet-nav-row {		.alphabet-nav-row {

عبود السكاف في 11:30، 22 يونيو 2025

2025-06-22T11:30:36Z

→ مراجعة أقدم		مراجعة 11:30، 22 يونيو 2025
سطر 33:		سطر 33:
	color: var(--color-base--emphasized) !important;		color: var(--color-base--emphasized) !important;
	text-decoration: none !important;		text-decoration: none !important;
	font-size: ~~1.3em~~;		font-size: 1em;
	font-weight: ~~bold~~;		font-weight: 400;
	line-height: 1; /* Ensures text aligns well */		line-height: 1; /* Ensures text aligns well */
	padding: 0; /* Remove padding here as the whole link will be clickable */		padding: 0; /* Remove padding here as the whole link will be clickable */

عبود السكاف في 11:27، 22 يونيو 2025

2025-06-22T11:27:27Z

→ مراجعة أقدم		مراجعة 11:27، 22 يونيو 2025
سطر 8:		سطر 8:
	}		}

	/* --- ~~New~~ Individual Letter Button Styling --- */		/* --- Individual Letter Button Styling --- */
	.alphabet-button {		.alphabet-button {
	/* ~~Styles for the button container itself */~~		/* Existing styles */
	~~display: flex; /* Makes content inside the button flexible for centering */~~		min-width: 40px;
	~~justify-content: center; /* Centers the character horizontally */~~		height: 40px;
	~~align-items: center; /* Centers the character vertically~~ */		background-color: #ffffff; /* White background for the button */
	min-width: 40px; ~~/* Minimum width for the button */~~		border: 1px solid var(--border-color-base);
	height: 40px; ~~/* Fixed height for the button */~~		border-radius: var(--border-radius--medium);
	background-color: ~~var(--color-surface-2)~~; /* ~~Background from your theme variables~~ */		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	border: 1px solid var(--border-color-base); ~~/* Border from your theme variables */~~		transition: all 0.2s ease-in-out;
	border-radius: var(--border-radius--medium); ~~/* Rounded corners from your theme variables */~~		cursor: pointer;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); ~~/* Subtle shadow for depth */~~		margin: 0; /* Override any default margins */
	transition: all 0.2s ease-in-out; /* ~~Smooth transition~~ for ~~hover effects~~ */
	~~cursor~~: ~~pointer~~; /* ~~Changes mouse cursor to~~ a ~~hand on hover~~ */		/* New/modified styles for clickable div */
			position: relative; /* Essential for absolute positioning of child link */
			display: flex; /* Makes it a flex container */
			justify-content: center; /* Centers content horizontally */
			align-items: center; /* Centers content vertically */
			overflow: hidden; /* Hides any overflow, good practice */
	}		}

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

			/* New/modified styles to make the link cover the entire div */
			position: absolute; /* Position relative to .alphabet-button */
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			display: flex; /* Make the link itself a flex container */
			justify-content: center; /* Center the text horizontally within the link */
			align-items: center; /* Center the text vertically within the link */
			width: 100%; /* Ensure it spans full width */
			height: 100%; /* Ensure it spans full height */
			z-index: 1; /* Ensure the link is above other content if any */
	}		}

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

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

عبود السكاف: أنشأ الصفحة ب'/* --- 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 I...'

2025-06-22T10:18:45Z

أنشأ الصفحة ب'--- 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 I...'

صفحة جديدة

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