137 أسطر
3.1 KiB
CSS
137 أسطر
3.1 KiB
CSS
@reference "tailwindcss";
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* ===========================
|
|
LIGHT MODE STYLES
|
|
=========================== */
|
|
:root {
|
|
--bg-color: #f4f6f8;
|
|
--container-bg: white;
|
|
--text-color: #333;
|
|
--input-border: #ccc;
|
|
--button-bg: #2563eb;
|
|
--button-color: white;
|
|
--link-color: #2563eb;
|
|
--pre-bg: #111;
|
|
--pre-color: #0f0;
|
|
}
|
|
|
|
/* ===========================
|
|
DARK MODE STYLES
|
|
=========================== */
|
|
.dark {
|
|
--bg-color: #000000;
|
|
--container-bg: #0d0d0d;
|
|
--text-color: #ffffff;
|
|
--input-border: #ff0000;
|
|
--button-bg: #b91c1c;
|
|
--button-color: #ffffff;
|
|
--link-color: #ef4444;
|
|
--pre-bg: #000000;
|
|
--pre-color: #ff0000;
|
|
}
|
|
|
|
/* ===========================
|
|
BODY STYLES
|
|
=========================== */
|
|
body {
|
|
margin: 0;
|
|
font-family: Arial, sans-serif;
|
|
background-color: var(--bg-color);
|
|
color: var(--text-color);
|
|
transition: background-color 0.3s, color 0.3s;
|
|
}
|
|
|
|
.container {
|
|
background: var(--container-bg);
|
|
padding: 20px;
|
|
max-width: 800px;
|
|
margin: auto;
|
|
border-radius: 8px;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
/* ===========================
|
|
CUSTOM COMPONENTS
|
|
=========================== */
|
|
.glow-red {
|
|
box-shadow: 0 0 10px rgba(239, 68, 68, 0.5), 0 0 20px rgba(239, 68, 68, 0.3);
|
|
}
|
|
|
|
.custom-input {
|
|
@apply w-full px-4 py-3 border border-gray-300 dark:border-red-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-all duration-200 placeholder-gray-400 dark:placeholder-gray-500;
|
|
}
|
|
|
|
.custom-button {
|
|
@apply bg-red-600 hover:bg-red-700 disabled:bg-gray-400 text-white font-medium py-3 px-4 rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl disabled:cursor-not-allowed;
|
|
}
|
|
|
|
.custom-select {
|
|
@apply w-full px-4 py-3 border border-gray-300 dark:border-red-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-all duration-200;
|
|
}
|
|
|
|
.custom-label {
|
|
@apply block text-sm font-medium mb-1 text-gray-700 dark:text-white;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: Arial, sans-serif;
|
|
background-color: var(--bg-color);
|
|
color: var(--text-color);
|
|
transition: background-color 0.3s, color 0.3s;
|
|
}
|
|
|
|
.container {
|
|
background: var(--container-bg);
|
|
padding: 20px;
|
|
max-width: 800px;
|
|
margin: auto;
|
|
border-radius: 8px;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
select {
|
|
width: 100%;
|
|
padding: 10px;
|
|
margin-bottom: 10px;
|
|
border: 1px solid var(--input-border);
|
|
border-radius: 4px;
|
|
background-color: var(--container-bg);
|
|
color: var(--text-color);
|
|
transition: border-color 0.3s, background-color 0.3s, color 0.3s;
|
|
}
|
|
select.multi-select {
|
|
height: 120px;
|
|
}
|
|
button {
|
|
background: var(--button-bg);
|
|
color: var(--button-color);
|
|
border: none;
|
|
width: 100%;
|
|
padding: 10px;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
button:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
a {
|
|
color: var(--link-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
pre {
|
|
background: var(--pre-bg);
|
|
color: var(--pre-color);
|
|
padding: 10px;
|
|
height: 140px;
|
|
overflow: auto;
|
|
border-radius: 4px;
|
|
} |