fix roter valid-error-effekt
This commit is contained in:
stefan
parent
05108d389c
commit
a35798c033
Binary file not shown.
|
|
@ -35,7 +35,109 @@ class NennungView {
|
|||
p { +"Turnier-Nr.: ${turnier.number}" }
|
||||
}
|
||||
|
||||
form(action = "/nennung/${turnier.number}/submit", method = FormMethod.post, classes = "registration-form") {
|
||||
form(
|
||||
action = "/nennung/${turnier.number}/submit",
|
||||
method = FormMethod.post,
|
||||
classes = "registration-form needs-validation"
|
||||
) {
|
||||
attributes["onsubmit"] = "return validateForm(this)"
|
||||
style {
|
||||
unsafe {
|
||||
+"""
|
||||
.validation-error {
|
||||
border: 2px solid red !important;
|
||||
background-color: rgba(255, 0, 0, 0.05) !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
"""
|
||||
}
|
||||
}
|
||||
script {
|
||||
unsafe {
|
||||
+"""
|
||||
function validateForm(form) {
|
||||
|
||||
// Check if rider name is provided
|
||||
var riderName = form.querySelector('input[name="riderName"]').value.trim();
|
||||
if (riderName === '') {
|
||||
// Focus on the rider name field
|
||||
var riderNameField = form.querySelector('input[name="riderName"]');
|
||||
riderNameField.focus();
|
||||
// Highlight the field
|
||||
riderNameField.classList.add('validation-error');
|
||||
setTimeout(function() {
|
||||
riderNameField.classList.remove('validation-error');
|
||||
}, 2000);
|
||||
return false;
|
||||
}
|
||||
|
||||
// Check if horse name is provided
|
||||
var horseName = form.querySelector('input[name="horseName"]').value.trim();
|
||||
if (horseName === '') {
|
||||
// Focus on the horse name field
|
||||
var horseNameField = form.querySelector('input[name="horseName"]');
|
||||
horseNameField.focus();
|
||||
// Highlight the field
|
||||
horseNameField.classList.add('validation-error');
|
||||
setTimeout(function() {
|
||||
horseNameField.classList.remove('validation-error');
|
||||
}, 2000);
|
||||
return false;
|
||||
}
|
||||
|
||||
// Check if at least one contact method is provided
|
||||
var email = form.querySelector('input[name="email"]').value.trim();
|
||||
var phone = form.querySelector('input[name="phone"]').value.trim();
|
||||
if (email === '' && phone === '') {
|
||||
// Focus on the email field
|
||||
var emailField = form.querySelector('input[name="email"]');
|
||||
emailField.focus();
|
||||
// Highlight both email and phone fields
|
||||
emailField.classList.add('validation-error');
|
||||
var phoneField = form.querySelector('input[name="phone"]');
|
||||
phoneField.classList.add('validation-error');
|
||||
setTimeout(function() {
|
||||
emailField.classList.remove('validation-error');
|
||||
phoneField.classList.remove('validation-error');
|
||||
}, 2000);
|
||||
return false;
|
||||
}
|
||||
|
||||
// Check if at least one competition is selected
|
||||
var checkboxes = form.querySelectorAll('input[name="selectedEvents"]');
|
||||
var checked = false;
|
||||
for (var i = 0; i < checkboxes.length; i++) {
|
||||
if (checkboxes[i].checked) {
|
||||
checked = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!checked) {
|
||||
// Focus on the competitions section
|
||||
var competitionsSections = form.querySelectorAll('div.form-section h3');
|
||||
var competitionsSection = null;
|
||||
for (var i = 0; i < competitionsSections.length; i++) {
|
||||
if (competitionsSections[i].textContent === 'Bewerbe') {
|
||||
competitionsSection = competitionsSections[i].parentNode;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (competitionsSection) {
|
||||
competitionsSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
// Highlight the section
|
||||
competitionsSection.classList.add('validation-error');
|
||||
setTimeout(function() {
|
||||
competitionsSection.classList.remove('validation-error');
|
||||
}, 2000);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
"""
|
||||
}
|
||||
}
|
||||
div(classes = "form-section mb-4") {
|
||||
h3 { +"Teilnehmer-Informationen" }
|
||||
|
||||
|
|
@ -48,6 +150,10 @@ class NennungView {
|
|||
input(type = InputType.text, name = "riderName", classes = "form-control") {
|
||||
attributes["required"] = "required"
|
||||
attributes["placeholder"] = "Vor- und Nachname"
|
||||
attributes["class"] = "form-control"
|
||||
attributes["oninvalid"] =
|
||||
"this.setCustomValidity('Fügen Sie den Namen des Reiters ein!')"
|
||||
attributes["oninput"] = "this.setCustomValidity('')"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -58,7 +164,11 @@ class NennungView {
|
|||
label(classes = "required") { +"Kopf-Nr./Pferd" }
|
||||
input(type = InputType.text, name = "horseName", classes = "form-control") {
|
||||
attributes["required"] = "required"
|
||||
attributes["placeholder"] = "Name des Pferdes"
|
||||
attributes["placeholder"] = "Kopf-Nr. / Name des Pferdes"
|
||||
attributes["class"] = "form-control"
|
||||
attributes["oninvalid"] =
|
||||
"this.setCustomValidity('Fügen Sie die Kopf-Nr. und oder den Pferdenamen ein!')"
|
||||
attributes["oninput"] = "this.setCustomValidity('')"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -67,10 +177,13 @@ class NennungView {
|
|||
div(classes = "competition-item") {
|
||||
div(classes = "participant-details") {
|
||||
div(classes = "form-group") {
|
||||
label { +"E-Mail" }
|
||||
label(classes = "required") { +"E-Mail" }
|
||||
input(type = InputType.email, name = "email") {
|
||||
attributes["placeholder"] = "ihre@email.com"
|
||||
attributes["class"] = "form-control"
|
||||
attributes["oninvalid"] =
|
||||
"this.setCustomValidity('Fügen Sie Ihre E-Mail Adresse oder Telefon-Nr. ein!')"
|
||||
attributes["oninput"] = "this.setCustomValidity('')"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -80,17 +193,20 @@ class NennungView {
|
|||
div(classes = "competition-item") {
|
||||
div(classes = "participant-details") {
|
||||
div(classes = "form-group") {
|
||||
label { +"Telefon-Nr." }
|
||||
label(classes = "required") { +"Telefon-Nr." }
|
||||
input(type = InputType.tel, name = "phone") {
|
||||
attributes["placeholder"] = "Ihre Telefonnummer"
|
||||
attributes["class"] = "form-control"
|
||||
attributes["oninvalid"] =
|
||||
"this.setCustomValidity('Fügen Sie Ihre E-Mail Adresse oder Telefon-Nr. ein!')"
|
||||
attributes["oninput"] = "this.setCustomValidity('')"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
p(classes = "form-hint") { +"Bitte geben Sie mindestens eine Kontaktmöglichkeit an (E-Mail oder Telefon)." }
|
||||
p(classes = "form-hint") { +"Bitte geben Sie mindestens eine Kontaktmöglichkeit an (E-Mail oder Telefon). Sie müssen nicht beide Felder ausfüllen." }
|
||||
}
|
||||
|
||||
// Competitions list
|
||||
|
|
@ -104,7 +220,11 @@ class NennungView {
|
|||
turnier.bewerbe.forEach { bewerb ->
|
||||
div(classes = "competition-item") {
|
||||
label(classes = "form-check") {
|
||||
input(type = InputType.checkBox, name = "selectedEvents", classes = "form-check-input") {
|
||||
input(
|
||||
type = InputType.checkBox,
|
||||
name = "selectedEvents",
|
||||
classes = "form-check-input"
|
||||
) {
|
||||
attributes["value"] = bewerb.nummer.toString()
|
||||
}
|
||||
span(classes = "competition-details") {
|
||||
|
|
@ -157,7 +277,13 @@ class NennungView {
|
|||
* @param horseName The name of the horse
|
||||
* @param selectedEvents The list of selected competition IDs
|
||||
*/
|
||||
suspend fun renderConfirmationPage(call: ApplicationCall, turnier: Turnier, riderName: String, horseName: String, selectedEvents: List<String>) {
|
||||
suspend fun renderConfirmationPage(
|
||||
call: ApplicationCall,
|
||||
turnier: Turnier,
|
||||
riderName: String,
|
||||
horseName: String,
|
||||
selectedEvents: List<String>
|
||||
) {
|
||||
call.respondHtml(HttpStatusCode.OK) {
|
||||
layoutTemplate.apply {
|
||||
applyLayout(
|
||||
|
|
@ -175,11 +301,11 @@ class NennungView {
|
|||
h2 { +"Vielen Dank für Ihre Nennung!" }
|
||||
|
||||
div(classes = "confirmation-details") {
|
||||
p {
|
||||
+"Ihre Nennung für "
|
||||
strong { +turnier.name }
|
||||
+" wurde erfolgreich übermittelt."
|
||||
}
|
||||
p(classes = "confirmation-message") { +"Ihre Nennung für " }
|
||||
|
||||
p(classes = "confirmation-message") { strong { +turnier.name } }
|
||||
|
||||
p(classes = "confirmation-message") { +" wurde erfolgreich übermittelt." }
|
||||
|
||||
div(classes = "detail-item") {
|
||||
span(classes = "detail-label") { +"Reiter:" }
|
||||
|
|
@ -200,8 +326,8 @@ class NennungView {
|
|||
selectedEvents.forEach { eventId ->
|
||||
val bewerb = turnier.bewerbe.find { it.nummer.toString() == eventId }
|
||||
if (bewerb != null) {
|
||||
li {
|
||||
+"${bewerb.nummer}. ${bewerb.titel} - ${bewerb.klasse}"
|
||||
span(classes = "detail-value") {
|
||||
+"${bewerb.nummer} . ${bewerb.titel} - ${bewerb.klasse}"
|
||||
if (bewerb.task != null) {
|
||||
+" - ${bewerb.task}"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/* Base styles - Modern and accessible */
|
||||
body {
|
||||
font-family: 'Inter', 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif;
|
||||
font-family: 'Helvetica', 'Arial', sans-serif;
|
||||
color: var(--text-color);
|
||||
background-color: var(--neutral-50);
|
||||
line-height: 1.7;
|
||||
|
|
|
|||
|
|
@ -25,21 +25,21 @@
|
|||
/* Primary button */
|
||||
.btn-primary, .button {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
color: var(--container-bg);
|
||||
box-shadow: var(--box-shadow-sm);
|
||||
}
|
||||
|
||||
/* Secondary button */
|
||||
.btn-secondary, .button-secondary {
|
||||
background-color: var(--secondary-color);
|
||||
color: white;
|
||||
color: var(--container-bg);
|
||||
box-shadow: var(--box-shadow-sm);
|
||||
}
|
||||
|
||||
/* Accent button */
|
||||
.btn-accent, .button-accent {
|
||||
background-color: var(--accent-color);
|
||||
color: white;
|
||||
color: var(--container-bg);
|
||||
box-shadow: var(--box-shadow-sm);
|
||||
}
|
||||
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
|
||||
.btn:focus, .button:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.3);
|
||||
box-shadow: 0 0 0 3px rgba(43, 103, 119, 0.3); /* Light version of primary color #2b6777 */
|
||||
}
|
||||
|
||||
/* Ripple effect for buttons */
|
||||
|
|
@ -93,7 +93,7 @@
|
|||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
|
||||
background-image: radial-gradient(circle, var(--container-bg) 10%, transparent 10.01%);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50%;
|
||||
transform: scale(10, 10);
|
||||
|
|
@ -175,9 +175,9 @@
|
|||
position: absolute;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
border: 2px solid rgba(255, 255, 255, 0.3); /* Semi-transparent border */
|
||||
border-radius: 50%;
|
||||
border-top-color: white;
|
||||
border-top-color: var(--container-bg);
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@
|
|||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: var(--text-color);
|
||||
background-color: #fff;
|
||||
background-color: var(--container-bg);
|
||||
background-clip: padding-box;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
.form-control:focus {
|
||||
border-color: var(--primary-color);
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.25rem rgba(67, 97, 238, 0.25);
|
||||
box-shadow: 0 0 0 0.25rem rgba(43, 103, 119, 0.25); /* Light version of primary color #2b6777 */
|
||||
}
|
||||
|
||||
.form-control::placeholder {
|
||||
|
|
@ -95,8 +95,8 @@
|
|||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: var(--text-color);
|
||||
background-color: #fff;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
|
||||
background-color: var(--container-bg);
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%232b6777' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 1rem center;
|
||||
background-size: 16px 12px;
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
.form-select:focus {
|
||||
border-color: var(--primary-color);
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.25rem rgba(67, 97, 238, 0.25);
|
||||
box-shadow: 0 0 0 0.25rem rgba(43, 103, 119, 0.25); /* Light version of primary color #2b6777 */
|
||||
}
|
||||
|
||||
/* Checkbox and radio styling */
|
||||
|
|
@ -126,7 +126,7 @@
|
|||
margin-top: 0.125em;
|
||||
margin-left: -1.75em;
|
||||
vertical-align: top;
|
||||
background-color: #fff;
|
||||
background-color: var(--container-bg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
|
|
@ -149,17 +149,17 @@
|
|||
}
|
||||
|
||||
.form-check-input:checked[type="checkbox"] {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.form-check-input:checked[type="radio"] {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23ffffff'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.form-check-input:focus {
|
||||
border-color: var(--primary-color);
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.25rem rgba(67, 97, 238, 0.25);
|
||||
box-shadow: 0 0 0 0.25rem rgba(43, 103, 119, 0.25); /* Light version of primary color #2b6777 */
|
||||
}
|
||||
|
||||
/* Switch styling */
|
||||
|
|
@ -170,7 +170,7 @@
|
|||
.form-switch .form-check-input {
|
||||
width: 2em;
|
||||
margin-left: -2.5em;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%2843, 103, 119, 0.25%29'/%3e%3c/svg%3e"); /* Using primary color with transparency */
|
||||
background-position: left center;
|
||||
border-radius: 2em;
|
||||
transition: background-position 0.15s ease-in-out;
|
||||
|
|
@ -178,7 +178,7 @@
|
|||
|
||||
.form-switch .form-check-input:checked {
|
||||
background-position: right center;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
/* Required field indicator */
|
||||
|
|
@ -192,7 +192,7 @@
|
|||
.was-validated .form-control:valid, .form-control.is-valid {
|
||||
border-color: var(--success-color);
|
||||
padding-right: calc(1.5em + 0.75rem);
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2338b000' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2352ab98' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); /* Using success color #52ab98 */
|
||||
background-repeat: no-repeat;
|
||||
background-position: right calc(0.375em + 0.1875rem) center;
|
||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||
|
|
@ -201,7 +201,7 @@
|
|||
.was-validated .form-control:invalid, .form-control.is-invalid {
|
||||
border-color: var(--error-color);
|
||||
padding-right: calc(1.5em + 0.75rem);
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23d90429'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23d90429' stroke='none'/%3e%3c/svg%3e");
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%232b6777'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%232b6777' stroke='none'/%3e%3c/svg%3e"); /* Using error color #2b6777 */
|
||||
background-repeat: no-repeat;
|
||||
background-position: right calc(0.375em + 0.1875rem) center;
|
||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||
|
|
@ -250,7 +250,7 @@
|
|||
color: var(--primary-color);
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
font-family: 'Inter', 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif;
|
||||
font-family: 'Helvetica', 'Arial', sans-serif;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
|
|
@ -306,7 +306,7 @@
|
|||
}
|
||||
|
||||
.form-range:focus::-webkit-slider-thumb {
|
||||
box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(67, 97, 238, 0.25);
|
||||
box-shadow: 0 0 0 1px var(--container-bg), 0 0 0 0.25rem rgba(43, 103, 119, 0.25); /* Light version of primary color #2b6777 */
|
||||
}
|
||||
|
||||
.form-range::-webkit-slider-thumb {
|
||||
|
|
|
|||
|
|
@ -14,14 +14,14 @@
|
|||
padding: 0.5rem 0;
|
||||
box-shadow: var(--box-shadow-lg);
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
background-color: rgba(255, 255, 255, 0.95); /* Using rgba for transparency */
|
||||
}
|
||||
|
||||
/* Enhanced navbar brand */
|
||||
.navbar-brand {
|
||||
font-weight: 700;
|
||||
font-size: 1.5rem;
|
||||
color: white;
|
||||
color: var(--container-bg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
letter-spacing: -0.01em;
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
}
|
||||
|
||||
.navbar-brand:hover {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
color: rgba(255, 255, 255, 0.9); /* Using rgba for hover effect */
|
||||
}
|
||||
|
||||
.navbar-brand i {
|
||||
|
|
@ -71,13 +71,13 @@
|
|||
.nav-link {
|
||||
font-weight: 600;
|
||||
padding: 0.5rem 1rem;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
color: rgba(255, 255, 255, 0.85); /* Using rgba for transparency */
|
||||
position: relative;
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.nav-link:hover, .nav-link:focus {
|
||||
color: white;
|
||||
color: var(--container-bg);
|
||||
}
|
||||
|
||||
/* Animated underline effect */
|
||||
|
|
@ -88,7 +88,7 @@
|
|||
height: 2px;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
background-color: white;
|
||||
background-color: var(--container-bg);
|
||||
transition: all var(--transition);
|
||||
transform: translateX(-50%);
|
||||
opacity: 0;
|
||||
|
|
@ -102,7 +102,7 @@
|
|||
}
|
||||
|
||||
.nav-link.active {
|
||||
color: white;
|
||||
color: var(--container-bg);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
|
@ -139,7 +139,7 @@
|
|||
|
||||
.dropdown-item.active {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
color: var(--container-bg);
|
||||
}
|
||||
|
||||
.dropdown-item i {
|
||||
|
|
@ -148,7 +148,7 @@
|
|||
}
|
||||
|
||||
.dropdown-item.active i {
|
||||
color: white;
|
||||
color: var(--container-bg);
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
|
|
@ -158,7 +158,7 @@
|
|||
|
||||
/* Navbar color variants */
|
||||
.navbar-light {
|
||||
background-color: white;
|
||||
background-color: var(--container-bg);
|
||||
}
|
||||
|
||||
.navbar-light .navbar-brand,
|
||||
|
|
@ -233,7 +233,7 @@
|
|||
}
|
||||
|
||||
.navbar-light .navbar-collapse {
|
||||
background-color: white;
|
||||
background-color: var(--container-bg);
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@
|
|||
}
|
||||
|
||||
.table-hover tbody tr:hover {
|
||||
background-color: rgba(67, 97, 238, 0.05);
|
||||
background-color: rgba(43, 103, 119, 0.05); /* Light version of primary color #2b6777 */
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--box-shadow-sm);
|
||||
}
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
|
||||
.table-modern thead th {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
color: var(--container-bg);
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
|
|
@ -128,7 +128,7 @@
|
|||
border-radius: var(--border-radius);
|
||||
margin-bottom: 1rem;
|
||||
box-shadow: var(--box-shadow-sm);
|
||||
background-color: white;
|
||||
background-color: var(--container-bg);
|
||||
}
|
||||
|
||||
.table-responsive-card td {
|
||||
|
|
@ -214,7 +214,7 @@
|
|||
.list-modern li {
|
||||
padding: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
background-color: white;
|
||||
background-color: var(--container-bg);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--box-shadow-sm);
|
||||
transition: all var(--transition-fast);
|
||||
|
|
@ -243,7 +243,7 @@
|
|||
}
|
||||
|
||||
.competition-list li:hover {
|
||||
background-color: white;
|
||||
background-color: var(--container-bg);
|
||||
box-shadow: var(--box-shadow-sm);
|
||||
transform: translateX(3px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
transition: all var(--transition);
|
||||
margin-bottom: 2rem;
|
||||
overflow: hidden;
|
||||
background-color: white;
|
||||
background-color: var(--container-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: var(--box-shadow);
|
||||
position: relative;
|
||||
|
|
@ -94,7 +94,7 @@
|
|||
height: 1.5rem;
|
||||
text-align: center;
|
||||
margin-right: 0.5rem;
|
||||
background-color: rgba(67, 97, 238, 0.1);
|
||||
background-color: rgba(43, 103, 119, 0.1); /* Light version of primary color #2b6777 */
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -254,7 +254,7 @@
|
|||
border-radius: var(--border-radius);
|
||||
transition: all var(--transition-fast);
|
||||
border: 1px solid var(--border-color);
|
||||
background-color: white;
|
||||
background-color: var(--container-bg);
|
||||
box-shadow: var(--box-shadow-sm);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
|
@ -263,12 +263,20 @@
|
|||
}
|
||||
|
||||
.competition-item:hover {
|
||||
background-color: rgba(67, 97, 238, 0.03);
|
||||
background-color: rgba(43, 103, 119, 0.03); /* Light version of primary color #2b6777 */
|
||||
box-shadow: var(--box-shadow);
|
||||
transform: translateY(-5px);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* Disable hover effect for specific fields */
|
||||
.competition-item.no-hover:hover {
|
||||
transform: none;
|
||||
box-shadow: var(--box-shadow-sm);
|
||||
border-color: var(--border-color);
|
||||
background-color: var(--container-bg);
|
||||
}
|
||||
|
||||
/* Custom form check styling */
|
||||
.competition-item .form-check {
|
||||
display: flex;
|
||||
|
|
@ -290,7 +298,7 @@
|
|||
border-radius: 0.25rem;
|
||||
transition: all var(--transition-fast);
|
||||
position: relative;
|
||||
background-color: white;
|
||||
background-color: var(--container-bg);
|
||||
}
|
||||
|
||||
.competition-item .form-check-input:checked {
|
||||
|
|
@ -304,7 +312,7 @@
|
|||
|
||||
.competition-item .form-check-input:focus {
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.25rem rgba(67, 97, 238, 0.25);
|
||||
box-shadow: 0 0 0 0.25rem rgba(43, 103, 119, 0.25); /* Light version of primary color #2b6777 */
|
||||
border-color: var(--primary-hover);
|
||||
}
|
||||
|
||||
|
|
@ -314,7 +322,7 @@
|
|||
|
||||
.competition-details {
|
||||
flex-grow: 1;
|
||||
font-family: 'Inter', 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif;
|
||||
font-family: 'Helvetica', 'Arial', sans-serif;
|
||||
color: var(--text-color);
|
||||
line-height: 1.5;
|
||||
font-size: 1rem;
|
||||
|
|
@ -331,7 +339,7 @@
|
|||
/* Participant details section */
|
||||
.participant-details {
|
||||
width: 100%;
|
||||
font-family: 'Inter', 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif;
|
||||
font-family: 'Helvetica', 'Arial', sans-serif;
|
||||
}
|
||||
|
||||
.participant-details .form-label {
|
||||
|
|
@ -344,7 +352,7 @@
|
|||
|
||||
.participant-details input,
|
||||
.participant-details textarea {
|
||||
font-family: 'Inter', 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif;
|
||||
font-family: 'Helvetica', 'Arial', sans-serif;
|
||||
color: var(--text-color);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
|
@ -359,7 +367,7 @@
|
|||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
background-color: white;
|
||||
background-color: var(--container-bg);
|
||||
border-radius: var(--border-radius-lg);
|
||||
padding: 3rem 2rem;
|
||||
box-shadow: var(--box-shadow);
|
||||
|
|
@ -387,7 +395,7 @@
|
|||
}
|
||||
|
||||
.confirmation-icon i {
|
||||
background-color: rgba(56, 176, 0, 0.1);
|
||||
background-color: rgba(82, 171, 152, 0.1); /* Light version of success color #52ab98 */
|
||||
border-radius: 50%;
|
||||
padding: 1.5rem;
|
||||
display: inline-block;
|
||||
|
|
@ -396,13 +404,13 @@
|
|||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(56, 176, 0, 0.4);
|
||||
box-shadow: 0 0 0 0 rgba(82, 171, 152, 0.4); /* Success color #52ab98 with opacity */
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 15px rgba(56, 176, 0, 0);
|
||||
box-shadow: 0 0 0 15px rgba(82, 171, 152, 0); /* Success color #52ab98 with zero opacity */
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(56, 176, 0, 0);
|
||||
box-shadow: 0 0 0 0 rgba(82, 171, 152, 0); /* Success color #52ab98 with zero opacity */
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -432,7 +440,7 @@
|
|||
}
|
||||
|
||||
.detail-item:hover {
|
||||
background-color: white;
|
||||
background-color: var(--container-bg);
|
||||
}
|
||||
|
||||
.detail-item:last-child {
|
||||
|
|
|
|||
|
|
@ -1,26 +1,26 @@
|
|||
:root {
|
||||
/* Modern color palette */
|
||||
--primary-color: #4361ee;
|
||||
--primary-hover: #3a56d4;
|
||||
--secondary-color: #7209b7;
|
||||
--secondary-hover: #6008a0;
|
||||
--accent-color: #f72585;
|
||||
--text-color: #555555;
|
||||
--light-text: #6c757d;
|
||||
--lighter-text: #adb5bd;
|
||||
--border-color: #e9ecef;
|
||||
--light-bg: #f8f9fa;
|
||||
--container-bg: #fff;
|
||||
--success-color: #38b000;
|
||||
--warning-color: #ffbe0b;
|
||||
--error-color: #d90429;
|
||||
--info-color: #4cc9f0;
|
||||
--primary-color: #2b6777;
|
||||
--primary-hover: #255a68;
|
||||
--secondary-color: #c8d8e4;
|
||||
--secondary-hover: #b9c9d5;
|
||||
--accent-color: #52ab98;
|
||||
--text-color: #2b6777;
|
||||
--light-text: #52ab98;
|
||||
--lighter-text: #c8d8e4;
|
||||
--border-color: #c8d8e4;
|
||||
--light-bg: #f2f2f2;
|
||||
--container-bg: #ffffff;
|
||||
--success-color: #52ab98;
|
||||
--warning-color: #c8d8e4;
|
||||
--error-color: #2b6777;
|
||||
--info-color: #c8d8e4;
|
||||
|
||||
/* Neutral shades for backgrounds */
|
||||
--neutral-50: #fafafa;
|
||||
--neutral-100: #f5f5f5;
|
||||
--neutral-200: #e5e5e5;
|
||||
--neutral-300: #d4d4d4;
|
||||
--neutral-50: #ffffff;
|
||||
--neutral-100: #f2f2f2;
|
||||
--neutral-200: #e6e6e6;
|
||||
--neutral-300: #c8d8e4;
|
||||
|
||||
/* Design tokens */
|
||||
--border-radius-sm: 0.25rem;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user