diff --git a/style.css b/style.css index a1c47eb..e6b8488 100644 --- a/style.css +++ b/style.css @@ -54,16 +54,73 @@ margin-bottom: 15px; } -/* Add some basic styling for list items (placeholders) */ +/* Styling for list items in Assessment Builder */ .library-question-item, .selected-question-item { - padding: 8px; - border-bottom: 1px solid #eee; + padding: 10px 12px; /* Increased padding */ + border-bottom: 1px solid var(--quiztech-border-light); /* Use theme border */ display: flex; justify-content: space-between; align-items: center; + gap: 10px; /* Add gap between text and button */ + font-size: 13px; /* Consistent font size */ + color: var(--quiztech-text-secondary); /* Default to secondary color */ } +.library-question-item span, +.selected-question-item span { + flex-grow: 1; /* Allow text span to take available space */ +} + +.library-question-item strong, +.selected-question-item strong { + font-weight: 600; /* Make title bolder */ + color: var(--quiztech-text-primary); /* Use primary text color for title */ + display: inline; /* Keep on same line */ + margin-right: 5px; +} + +.library-question-item .add-question-to-assessment, +.selected-question-item .remove-question-from-assessment { + /* Apply button styles - inherit from .quiztech-button */ + padding: 4px 8px; /* Smaller padding */ + font-size: 11px; /* Smaller font size */ + flex-shrink: 0; /* Prevent button from shrinking */ +} +/* Specific styling for Add button (can inherit secondary) */ +.library-question-item .add-question-to-assessment { + /* Use secondary button style by default */ + background-color: var(--quiztech-widget-bg); + color: var(--quiztech-text-secondary); + border-color: var(--quiztech-border-light); +} +.library-question-item .add-question-to-assessment:hover { + background-color: #f0f0f0; + border-color: #cccccc; + color: var(--quiztech-text-primary); +} +.library-question-item .add-question-to-assessment:disabled { + background-color: var(--quiztech-border-light); + color: var(--quiztech-text-secondary); + border-color: var(--quiztech-border-light); + cursor: not-allowed; + opacity: 0.7; +} + +/* Specific styling for Remove button (can inherit secondary, maybe make red later) */ +.selected-question-item .remove-question-from-assessment { + /* Use secondary button style by default */ + background-color: var(--quiztech-widget-bg); + color: var(--quiztech-text-secondary); + border-color: var(--quiztech-border-light); +} +.selected-question-item .remove-question-from-assessment:hover { + background-color: #f0f0f0; + border-color: #cccccc; + color: var(--quiztech-text-primary); +} + + .library-question-item:last-child, .selected-question-item:last-child { border-bottom: none;