Initial Styling Added

This commit is contained in:
Ruben Ramirez 2025-04-04 12:37:50 -05:00
parent 2598f90817
commit 13a318b231

101
style.css
View file

@ -119,6 +119,19 @@
/* Quiztech Dashboard Styles */
:root {
--quiztech-widget-bg: #FFFEFE;
--quiztech-widget-shadow: 0px 2px 50px rgba(0, 0, 0, 0.05);
--quiztech-widget-radius: 8px;
--quiztech-text-primary: #1E1F27;
--quiztech-text-secondary: #696A6F;
--quiztech-accent-primary: #0F41D2;
--quiztech-font-heading: 'Sora', sans-serif; /* Ensure font is loaded */
--quiztech-font-body: 'Inter', sans-serif; /* Ensure font is loaded */
--quiztech-border-light: #EAEAEB;
}
.quiztech-dashboard-widgets {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid */
@ -127,25 +140,31 @@
}
.dashboard-widget {
border: 1px solid #e0e0e0;
padding: 15px 20px;
background-color: #fff;
box-shadow: 0 1px 1px rgba(0,0,0,.04);
border: none; /* Removed border, rely on shadow */
padding: 20px; /* Adjusted padding */
background-color: var(--quiztech-widget-bg);
box-shadow: var(--quiztech-widget-shadow);
border-radius: var(--quiztech-widget-radius);
}
.dashboard-widget h2 {
margin-top: 0;
margin-bottom: 15px;
font-size: 1.2em;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
margin-bottom: 20px; /* Adjusted margin */
font-family: var(--quiztech-font-heading);
font-weight: 600;
font-size: 16px; /* Adjusted size */
color: var(--quiztech-text-primary);
border-bottom: none; /* Removed border */
padding-bottom: 0; /* Removed padding */
}
.dashboard-widget h3 {
margin-top: 15px;
margin-bottom: 10px;
font-size: 1em;
color: #555;
font-family: var(--quiztech-font-body); /* Changed font */
font-weight: 600; /* Adjusted weight */
font-size: 14px; /* Adjusted size */
color: var(--quiztech-text-primary); /* Adjusted color */
}
/* Quick Links Widget */
@ -162,38 +181,54 @@
margin: 0;
}
.quick-links a.button,
.quick-links span.button.disabled {
.quick-links a.button {
display: inline-block;
padding: 8px 15px;
padding: 10px 15px; /* Adjusted padding */
text-decoration: none;
border: 1px solid #ccc;
border-radius: 3px;
background-color: #f7f7f7;
color: #555;
border: none; /* Removed border */
border-radius: 6px; /* Adjusted radius */
background-color: var(--quiztech-accent-primary);
color: #FFFFFF;
text-align: center;
font-family: var(--quiztech-font-body);
font-weight: 500;
transition: background-color 0.2s ease; /* Added transition */
}
.quick-links a.button:hover {
background-color: #f0f0f0;
border-color: #999;
color: #333;
background-color: #0d36a8; /* Darker blue for hover */
color: #FFFFFF;
}
.quick-links span.button.disabled {
background-color: #eee;
color: #aaa;
display: inline-block;
padding: 10px 15px; /* Adjusted padding */
text-decoration: none;
border: none; /* Removed border */
border-radius: 6px; /* Adjusted radius */
background-color: var(--quiztech-border-light); /* Use light border color */
color: var(--quiztech-text-secondary); /* Use secondary text color */
text-align: center;
font-family: var(--quiztech-font-body);
cursor: not-allowed;
}
/* Statistics Widget */
.statistics p {
margin: 0 0 10px 0;
font-size: 0.95em;
margin: 0 0 8px 0; /* Adjusted margin */
font-size: 12px; /* Adjusted size */
font-family: var(--quiztech-font-body);
color: var(--quiztech-text-primary);
line-height: 1.3; /* Added line-height for clarity */
}
.statistics strong {
margin-right: 5px;
display: block; /* Place label above value */
margin: 0 0 4px 0; /* Adjusted margin */
font-family: var(--quiztech-font-body);
font-size: 10px; /* Adjusted size */
color: var(--quiztech-text-secondary);
font-weight: 400; /* Adjusted weight */
}
/* Recent Activity Widget */
@ -205,14 +240,16 @@
list-style: none;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
color: #333;
/* font-size and color handled by li */
}
.recent-activity li {
padding: 5px 0;
border-bottom: 1px dotted #eee;
padding: 8px 0; /* Adjusted padding */
border-bottom: 1px solid var(--quiztech-border-light); /* Adjusted border */
margin: 0;
font-family: var(--quiztech-font-body);
font-size: 12px; /* Adjusted size */
color: var(--quiztech-text-secondary); /* Adjusted color */
}
.recent-activity li:last-child {
@ -220,10 +257,12 @@
}
.recent-activity strong {
color: #0073aa;
color: var(--quiztech-text-primary); /* Adjusted color */
font-weight: 500; /* Adjusted weight */
}
.recent-activity em {
color: #555;
color: var(--quiztech-text-secondary); /* Adjusted color */
font-style: normal; /* Removed italics */
}