Initial Styling Added
This commit is contained in:
parent
2598f90817
commit
13a318b231
1 changed files with 70 additions and 31 deletions
101
style.css
101
style.css
|
|
@ -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 */
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue