Fix Stylelint: expand single-line rules to multi-line, use modern color notation
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Serreau Jovann
@@ -2,80 +2,354 @@
|
||||
@source "../templates";
|
||||
|
||||
/* ===== Admin Layout ===== */
|
||||
.admin-body { background: #fbfbfb; color: #111827; }
|
||||
.admin-header { border-bottom: 4px solid #111827; }
|
||||
.admin-badge { border: 2px solid #111827; box-shadow: 3px 3px 0 rgba(0,0,0,1); background: #fabf04; }
|
||||
.admin-main { max-width: 70rem; margin: 0 auto; padding: 2rem 1rem; width: 100%; }
|
||||
|
||||
.admin-body {
|
||||
background: #fbfbfb;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.admin-header {
|
||||
border-bottom: 4px solid #111827;
|
||||
}
|
||||
|
||||
.admin-badge {
|
||||
border: 2px solid #111827;
|
||||
box-shadow: 3px 3px 0 rgb(0 0 0 / 100%);
|
||||
background: #fabf04;
|
||||
}
|
||||
|
||||
.admin-main {
|
||||
max-width: 70rem;
|
||||
margin: 0 auto;
|
||||
padding: 2rem 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ===== Admin Nav ===== */
|
||||
.admin-nav-active { background: #fabf04; border: 2px solid #111827; box-shadow: 2px 2px 0 rgba(0,0,0,1); }
|
||||
.admin-nav-link { border: 2px solid #111827; }
|
||||
.admin-nav-dark { border: 2px solid #111827; background: #111827; }
|
||||
|
||||
.admin-nav-active {
|
||||
background: #fabf04;
|
||||
border: 2px solid #111827;
|
||||
box-shadow: 2px 2px 0 rgb(0 0 0 / 100%);
|
||||
}
|
||||
|
||||
.admin-nav-link {
|
||||
border: 2px solid #111827;
|
||||
}
|
||||
|
||||
.admin-nav-dark {
|
||||
border: 2px solid #111827;
|
||||
background: #111827;
|
||||
}
|
||||
|
||||
/* ===== Admin Cards ===== */
|
||||
.admin-card { border: 4px solid #111827; box-shadow: 6px 6px 0 rgba(0,0,0,1); background: white; padding: 1.5rem; }
|
||||
.admin-card-yellow { border: 4px solid #111827; box-shadow: 6px 6px 0 rgba(0,0,0,1); background: #fabf04; padding: 1.5rem; }
|
||||
.admin-card-reject { border: 4px solid #991b1b; box-shadow: 6px 6px 0 rgba(0,0,0,1); background: white; padding: 1.5rem; }
|
||||
|
||||
.admin-card {
|
||||
border: 4px solid #111827;
|
||||
box-shadow: 6px 6px 0 rgb(0 0 0 / 100%);
|
||||
background: white;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.admin-card-yellow {
|
||||
border: 4px solid #111827;
|
||||
box-shadow: 6px 6px 0 rgb(0 0 0 / 100%);
|
||||
background: #fabf04;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.admin-card-reject {
|
||||
border: 4px solid #991b1b;
|
||||
box-shadow: 6px 6px 0 rgb(0 0 0 / 100%);
|
||||
background: white;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
/* ===== Admin Stats ===== */
|
||||
.admin-stat-label { font-size: 10px; letter-spacing: 0.1em; }
|
||||
|
||||
.admin-stat-label {
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
/* ===== Admin Tables ===== */
|
||||
.admin-table { width: 100%; border-collapse: collapse; }
|
||||
.admin-table thead tr { background: #111827; }
|
||||
.admin-table thead th { padding: 0.75rem 1.5rem; text-align: left; }
|
||||
.admin-table thead th.text-center { text-align: center; }
|
||||
.admin-table thead th.text-right { text-align: right; }
|
||||
.admin-table tbody tr { border-bottom: 1px solid #e5e7eb; }
|
||||
.admin-table tbody td { padding: 0.75rem 1.5rem; }
|
||||
|
||||
.admin-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.admin-table thead tr {
|
||||
background: #111827;
|
||||
}
|
||||
|
||||
.admin-table thead th {
|
||||
padding: 0.75rem 1.5rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.admin-table thead th.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.admin-table thead th.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.admin-table tbody tr {
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.admin-table tbody td {
|
||||
padding: 0.75rem 1.5rem;
|
||||
}
|
||||
|
||||
/* ===== Admin Detail Tables ===== */
|
||||
.admin-detail-table { width: 100%; border-collapse: collapse; }
|
||||
.admin-detail-table thead tr { border-bottom: 2px solid #e5e7eb; }
|
||||
.admin-detail-table thead th { padding: 0.5rem 0; text-align: left; }
|
||||
.admin-detail-table tbody tr { border-bottom: 1px solid #e5e7eb; }
|
||||
.admin-detail-table tbody tr:last-child { border-bottom: none; }
|
||||
.admin-detail-table tbody td { padding: 0.5rem 0; }
|
||||
|
||||
.admin-detail-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.admin-detail-table thead tr {
|
||||
border-bottom: 2px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.admin-detail-table thead th {
|
||||
padding: 0.5rem 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.admin-detail-table tbody tr {
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.admin-detail-table tbody tr:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.admin-detail-table tbody td {
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
/* ===== Admin Forms ===== */
|
||||
.admin-form-label { font-size: 10px; letter-spacing: 0.1em; display: block; margin-bottom: 0.25rem; }
|
||||
.admin-form-label-lg { font-size: 10px; letter-spacing: 0.1em; display: block; margin-bottom: 0.5rem; }
|
||||
.admin-form-input { width: 100%; padding: 0.5rem 0.75rem; border: 2px solid #111827; font-weight: 700; outline: none; }
|
||||
.admin-form-input-lg { width: 100%; padding: 0.75rem 1rem; border: 3px solid #111827; font-weight: 700; outline: none; }
|
||||
.admin-form-select { width: 100%; padding: 0.5rem 0.75rem; border: 3px solid #111827; font-weight: 700; outline: none; cursor: pointer; background: white; }
|
||||
.admin-form-textarea { width: 100%; padding: 0.75rem 1rem; border: 3px solid #111827; font-weight: 700; outline: none; resize: vertical; }
|
||||
.admin-form-checkbox { width: 1.25rem; height: 1.25rem; border: 2px solid #111827; cursor: pointer; }
|
||||
|
||||
.admin-form-label {
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.1em;
|
||||
display: block;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.admin-form-label-lg {
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.1em;
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.admin-form-input {
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 2px solid #111827;
|
||||
font-weight: 700;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.admin-form-input-lg {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 3px solid #111827;
|
||||
font-weight: 700;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.admin-form-select {
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 3px solid #111827;
|
||||
font-weight: 700;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.admin-form-textarea {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 3px solid #111827;
|
||||
font-weight: 700;
|
||||
outline: none;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.admin-form-checkbox {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border: 2px solid #111827;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ===== Admin Buttons ===== */
|
||||
.admin-btn { padding: 0.5rem 1rem; border: 3px solid #111827; box-shadow: 4px 4px 0 rgba(0,0,0,1); background: #fabf04; cursor: pointer; }
|
||||
.admin-btn-sm { padding: 0.4rem 0.75rem; border: 2px solid #111827; cursor: pointer; }
|
||||
.admin-btn-sm-yellow { padding: 0.4rem 0.75rem; border: 2px solid #111827; background: #fabf04; cursor: pointer; }
|
||||
.admin-btn-sm-white { padding: 0.4rem 0.75rem; border: 2px solid #111827; background: white; cursor: pointer; }
|
||||
.admin-btn-sm-danger { padding: 0.4rem 0.75rem; border: 2px solid #991b1b; background: #dc2626; color: white; cursor: pointer; }
|
||||
.admin-btn-danger { padding: 0.5rem 1rem; border: 3px solid #991b1b; box-shadow: 4px 4px 0 rgba(0,0,0,1); background: #dc2626; color: white; cursor: pointer; }
|
||||
.admin-btn-outline { padding: 0.5rem 1rem; border: 3px solid #111827; background: white; cursor: pointer; }
|
||||
.admin-btn-search { padding: 0.5rem 1rem; border: 2px solid #111827; background: #fabf04; cursor: pointer; white-space: nowrap; }
|
||||
.admin-btn-clear { padding: 0.5rem 1rem; border: 2px solid #111827; background: white; white-space: nowrap; }
|
||||
.admin-btn-lg { padding: 0.75rem 1.5rem; border: 3px solid #111827; box-shadow: 4px 4px 0 rgba(0,0,0,1); background: #fabf04; cursor: pointer; }
|
||||
.admin-btn-lg-outline { padding: 0.75rem 1.5rem; border: 3px solid #111827; }
|
||||
|
||||
.admin-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border: 3px solid #111827;
|
||||
box-shadow: 4px 4px 0 rgb(0 0 0 / 100%);
|
||||
background: #fabf04;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.admin-btn-sm {
|
||||
padding: 0.4rem 0.75rem;
|
||||
border: 2px solid #111827;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.admin-btn-sm-yellow {
|
||||
padding: 0.4rem 0.75rem;
|
||||
border: 2px solid #111827;
|
||||
background: #fabf04;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.admin-btn-sm-white {
|
||||
padding: 0.4rem 0.75rem;
|
||||
border: 2px solid #111827;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.admin-btn-sm-danger {
|
||||
padding: 0.4rem 0.75rem;
|
||||
border: 2px solid #991b1b;
|
||||
background: #dc2626;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.admin-btn-danger {
|
||||
padding: 0.5rem 1rem;
|
||||
border: 3px solid #991b1b;
|
||||
box-shadow: 4px 4px 0 rgb(0 0 0 / 100%);
|
||||
background: #dc2626;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.admin-btn-outline {
|
||||
padding: 0.5rem 1rem;
|
||||
border: 3px solid #111827;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.admin-btn-search {
|
||||
padding: 0.5rem 1rem;
|
||||
border: 2px solid #111827;
|
||||
background: #fabf04;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.admin-btn-clear {
|
||||
padding: 0.5rem 1rem;
|
||||
border: 2px solid #111827;
|
||||
background: white;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.admin-btn-lg {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: 3px solid #111827;
|
||||
box-shadow: 4px 4px 0 rgb(0 0 0 / 100%);
|
||||
background: #fabf04;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.admin-btn-lg-outline {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: 3px solid #111827;
|
||||
}
|
||||
|
||||
/* ===== Admin Badges ===== */
|
||||
.admin-badge-green { background: #d1fae5; border: 2px solid #111827; padding: 0.15rem 0.5rem; }
|
||||
.admin-badge-red { background: #fee2e2; border: 2px solid #111827; padding: 0.15rem 0.5rem; }
|
||||
.admin-badge-blue { background: #dbeafe; border: 2px solid #111827; padding: 0.15rem 0.75rem; }
|
||||
.admin-badge-yellow { background: #fef3c7; border: 2px solid #111827; padding: 0.15rem 0.75rem; }
|
||||
.admin-badge-indigo { background: #e0e7ff; border: 2px solid #111827; padding: 0.15rem 0.5rem; }
|
||||
.admin-badge-indigo-lg { background: #e0e7ff; border: 2px solid #111827; padding: 0.15rem 0.75rem; }
|
||||
|
||||
.admin-badge-green {
|
||||
background: #d1fae5;
|
||||
border: 2px solid #111827;
|
||||
padding: 0.15rem 0.5rem;
|
||||
}
|
||||
|
||||
.admin-badge-red {
|
||||
background: #fee2e2;
|
||||
border: 2px solid #111827;
|
||||
padding: 0.15rem 0.5rem;
|
||||
}
|
||||
|
||||
.admin-badge-blue {
|
||||
background: #dbeafe;
|
||||
border: 2px solid #111827;
|
||||
padding: 0.15rem 0.75rem;
|
||||
}
|
||||
|
||||
.admin-badge-yellow {
|
||||
background: #fef3c7;
|
||||
border: 2px solid #111827;
|
||||
padding: 0.15rem 0.75rem;
|
||||
}
|
||||
|
||||
.admin-badge-indigo {
|
||||
background: #e0e7ff;
|
||||
border: 2px solid #111827;
|
||||
padding: 0.15rem 0.5rem;
|
||||
}
|
||||
|
||||
.admin-badge-indigo-lg {
|
||||
background: #e0e7ff;
|
||||
border: 2px solid #111827;
|
||||
padding: 0.15rem 0.75rem;
|
||||
}
|
||||
|
||||
/* ===== Admin Tabs ===== */
|
||||
.admin-tab { flex: 1; text-align: center; padding: 0.75rem; border: 3px solid #111827; }
|
||||
.admin-tab-active { background: #fabf04; }
|
||||
.admin-tab-inactive { background: white; }
|
||||
.admin-tab-first { border-right: none; }
|
||||
|
||||
.admin-tab {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 0.75rem;
|
||||
border: 3px solid #111827;
|
||||
}
|
||||
|
||||
.admin-tab-active {
|
||||
background: #fabf04;
|
||||
}
|
||||
|
||||
.admin-tab-inactive {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.admin-tab-first {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
/* ===== Admin Pagination ===== */
|
||||
.admin-page-active { border: 2px solid #111827; padding: 0.4rem 0.75rem; background: #fabf04; }
|
||||
.admin-page-link { border: 2px solid #111827; padding: 0.4rem 0.75rem; background: white; }
|
||||
|
||||
.admin-page-active {
|
||||
border: 2px solid #111827;
|
||||
padding: 0.4rem 0.75rem;
|
||||
background: #fabf04;
|
||||
}
|
||||
|
||||
.admin-page-link {
|
||||
border: 2px solid #111827;
|
||||
padding: 0.4rem 0.75rem;
|
||||
background: white;
|
||||
}
|
||||
|
||||
/* ===== Admin Download Link ===== */
|
||||
.admin-download { border: 2px solid #111827; padding: 0.15rem 0.5rem; background: #fabf04; display: inline-block; }
|
||||
|
||||
.admin-download {
|
||||
border: 2px solid #111827;
|
||||
padding: 0.15rem 0.5rem;
|
||||
background: #fabf04;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
301
assets/app.scss
301
assets/app.scss
@@ -30,6 +30,7 @@ e-ticket-editor {
|
||||
font-size: 0.8rem;
|
||||
transition: all 0.1s;
|
||||
}
|
||||
|
||||
.ete-btn:hover {
|
||||
background: #fabf04;
|
||||
border-color: #111827;
|
||||
@@ -51,87 +52,301 @@ e-ticket-editor {
|
||||
background: white;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.ete-content:focus {
|
||||
border-color: #4f46e5;
|
||||
}
|
||||
|
||||
.ete-content:empty::before {
|
||||
content: attr(data-placeholder);
|
||||
color: #9ca3af;
|
||||
pointer-events: none;
|
||||
}
|
||||
.ete-content ul { list-style: disc; padding-left: 1.5rem; margin: 0.5rem 0; }
|
||||
|
||||
.ete-content ul {
|
||||
list-style: disc;
|
||||
padding-left: 1.5rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
/* ===== Layout ===== */
|
||||
.page-container { max-width: 50rem; margin: 0 auto; padding: 3rem 1rem; }
|
||||
.page-container-lg { max-width: 60rem; margin: 0 auto; padding: 3rem 1rem; }
|
||||
.page-container-sm { max-width: 36rem; margin: 0 auto; padding: 3rem 1rem; }
|
||||
.page-container-xs { max-width: 28rem; margin: 0 auto; padding: 3rem 1rem; }
|
||||
.page-container-md { max-width: 40rem; margin: 0 auto; padding: 3rem 1rem; }
|
||||
.page-container {
|
||||
max-width: 50rem;
|
||||
margin: 0 auto;
|
||||
padding: 3rem 1rem;
|
||||
}
|
||||
|
||||
.page-container-lg {
|
||||
max-width: 60rem;
|
||||
margin: 0 auto;
|
||||
padding: 3rem 1rem;
|
||||
}
|
||||
|
||||
.page-container-sm {
|
||||
max-width: 36rem;
|
||||
margin: 0 auto;
|
||||
padding: 3rem 1rem;
|
||||
}
|
||||
|
||||
.page-container-xs {
|
||||
max-width: 28rem;
|
||||
margin: 0 auto;
|
||||
padding: 3rem 1rem;
|
||||
}
|
||||
|
||||
.page-container-md {
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
padding: 3rem 1rem;
|
||||
}
|
||||
|
||||
/* ===== Headings ===== */
|
||||
.heading-page { border-bottom: 4px solid #111827; display: inline-block; margin-bottom: 0.5rem; }
|
||||
.heading-page {
|
||||
border-bottom: 4px solid #111827;
|
||||
display: inline-block;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* ===== Cards ===== */
|
||||
.card-brutal { border: 4px solid #111827; box-shadow: 6px 6px 0 rgba(0,0,0,1); background: white; padding: 1.5rem; }
|
||||
.card-brutal-lg { border: 4px solid #111827; box-shadow: 6px 6px 0 rgba(0,0,0,1); background: white; padding: 2.5rem; }
|
||||
.card-brutal-green { border: 4px solid #111827; box-shadow: 4px 4px 0 rgba(0,0,0,1); background: #d1fae5; padding: 1rem 1.5rem; }
|
||||
.card-brutal-red { border: 4px solid #111827; box-shadow: 4px 4px 0 rgba(0,0,0,1); background: #fee2e2; padding: 1rem 1.5rem; }
|
||||
.card-brutal-yellow { border: 4px solid #111827; background: #fabf04; padding: 1rem 1.5rem; }
|
||||
.card-brutal-warn { border: 4px solid #111827; box-shadow: 6px 6px 0 rgba(0,0,0,1); background: #fef3c7; padding: 1.5rem; }
|
||||
.card-brutal-info { border: 4px solid #111827; background: #f9fafb; padding: 1.5rem; box-shadow: 6px 6px 0 rgba(0,0,0,1); }
|
||||
.card-brutal-error { border: 4px solid #991b1b; box-shadow: 6px 6px 0 rgba(0,0,0,1); background: #fee2e2; padding: 1.5rem; }
|
||||
.card-brutal {
|
||||
border: 4px solid #111827;
|
||||
box-shadow: 6px 6px 0 rgb(0 0 0 / 100%);
|
||||
background: white;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.card-brutal-lg {
|
||||
border: 4px solid #111827;
|
||||
box-shadow: 6px 6px 0 rgb(0 0 0 / 100%);
|
||||
background: white;
|
||||
padding: 2.5rem;
|
||||
}
|
||||
|
||||
.card-brutal-green {
|
||||
border: 4px solid #111827;
|
||||
box-shadow: 4px 4px 0 rgb(0 0 0 / 100%);
|
||||
background: #d1fae5;
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
|
||||
.card-brutal-red {
|
||||
border: 4px solid #111827;
|
||||
box-shadow: 4px 4px 0 rgb(0 0 0 / 100%);
|
||||
background: #fee2e2;
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
|
||||
.card-brutal-yellow {
|
||||
border: 4px solid #111827;
|
||||
background: #fabf04;
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
|
||||
.card-brutal-warn {
|
||||
border: 4px solid #111827;
|
||||
box-shadow: 6px 6px 0 rgb(0 0 0 / 100%);
|
||||
background: #fef3c7;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.card-brutal-info {
|
||||
border: 4px solid #111827;
|
||||
background: #f9fafb;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 6px 6px 0 rgb(0 0 0 / 100%);
|
||||
}
|
||||
|
||||
.card-brutal-error {
|
||||
border: 4px solid #991b1b;
|
||||
box-shadow: 6px 6px 0 rgb(0 0 0 / 100%);
|
||||
background: #fee2e2;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
/* ===== Flash messages ===== */
|
||||
.flash-success { border: 4px solid #111827; box-shadow: 4px 4px 0 rgba(0,0,0,1); background: #d1fae5; padding: 1rem 1.5rem; margin-bottom: 1.5rem; }
|
||||
.flash-error { border: 4px solid #111827; box-shadow: 4px 4px 0 rgba(0,0,0,1); background: #fee2e2; padding: 1rem 1.5rem; margin-bottom: 1.5rem; }
|
||||
.flash-success {
|
||||
border: 4px solid #111827;
|
||||
box-shadow: 4px 4px 0 rgb(0 0 0 / 100%);
|
||||
background: #d1fae5;
|
||||
padding: 1rem 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.flash-error {
|
||||
border: 4px solid #111827;
|
||||
box-shadow: 4px 4px 0 rgb(0 0 0 / 100%);
|
||||
background: #fee2e2;
|
||||
padding: 1rem 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
/* ===== Forms ===== */
|
||||
.form-label { display: block; margin-bottom: 0.5rem; }
|
||||
.form-input { width: 100%; padding: 0.75rem 1rem; border: 3px solid #111827; font-weight: 700; outline: none; }
|
||||
.form-textarea { width: 100%; padding: 0.75rem 1rem; border: 3px solid #111827; font-weight: 700; outline: none; resize: vertical; }
|
||||
.form-file { width: 100%; padding: 0.75rem 1rem; border: 3px solid #111827; font-weight: 700; outline: none; background: white; }
|
||||
.form-col { display: flex; flex-direction: column; gap: 1.5rem; }
|
||||
.form-row { display: flex; flex-wrap: wrap; gap: 1.5rem; }
|
||||
.form-group { flex: 1; min-width: 200px; }
|
||||
.form-label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 3px solid #111827;
|
||||
font-weight: 700;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 3px solid #111827;
|
||||
font-weight: 700;
|
||||
outline: none;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.form-file {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 3px solid #111827;
|
||||
font-weight: 700;
|
||||
outline: none;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.form-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
/* ===== Buttons ===== */
|
||||
.btn-brutal { padding: 0.75rem 2rem; border: 3px solid #111827; box-shadow: 4px 4px 0 rgba(0,0,0,1); background: #fabf04; display: inline-block; cursor: pointer; }
|
||||
.btn-brutal:hover { background: #4f46e5; color: white; }
|
||||
.btn-brutal-full { width: 100%; padding: 0.75rem 2rem; border: 3px solid #111827; box-shadow: 4px 4px 0 rgba(0,0,0,1); cursor: pointer; }
|
||||
.btn-brutal-dark { display: block; width: 100%; padding: 0.75rem 2rem; border: 3px solid #111827; box-shadow: 4px 4px 0 rgba(0,0,0,1); text-align: center; text-decoration: none; }
|
||||
.btn-brutal {
|
||||
padding: 0.75rem 2rem;
|
||||
border: 3px solid #111827;
|
||||
box-shadow: 4px 4px 0 rgb(0 0 0 / 100%);
|
||||
background: #fabf04;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-brutal:hover {
|
||||
background: #4f46e5;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-brutal-full {
|
||||
width: 100%;
|
||||
padding: 0.75rem 2rem;
|
||||
border: 3px solid #111827;
|
||||
box-shadow: 4px 4px 0 rgb(0 0 0 / 100%);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-brutal-dark {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0.75rem 2rem;
|
||||
border: 3px solid #111827;
|
||||
box-shadow: 4px 4px 0 rgb(0 0 0 / 100%);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* ===== Tables ===== */
|
||||
.table-brutal { width: 100%; border-collapse: collapse; }
|
||||
.table-brutal th { padding: 0.5rem 0; text-align: left; }
|
||||
.table-brutal td { padding: 0.5rem 0; }
|
||||
.table-brutal tr { border-bottom: 1px solid #e5e7eb; }
|
||||
.table-brutal tr:last-child { border-bottom: none; }
|
||||
.table-brutal {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table-brutal th {
|
||||
padding: 0.5rem 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.table-brutal td {
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.table-brutal tr {
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.table-brutal tr:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* ===== Badges ===== */
|
||||
.badge-green { background: #d1fae5; border: 2px solid #111827; padding: 0.15rem 0.5rem; }
|
||||
.badge-red { background: #fee2e2; border: 2px solid #111827; padding: 0.15rem 0.5rem; }
|
||||
.badge-yellow { background: #fef3c7; border: 2px solid #111827; padding: 0.15rem 0.5rem; }
|
||||
.badge-green {
|
||||
background: #d1fae5;
|
||||
border: 2px solid #111827;
|
||||
padding: 0.15rem 0.5rem;
|
||||
}
|
||||
|
||||
.badge-red {
|
||||
background: #fee2e2;
|
||||
border: 2px solid #111827;
|
||||
padding: 0.15rem 0.5rem;
|
||||
}
|
||||
|
||||
.badge-yellow {
|
||||
background: #fef3c7;
|
||||
border: 2px solid #111827;
|
||||
padding: 0.15rem 0.5rem;
|
||||
}
|
||||
|
||||
/* ===== Section headers ===== */
|
||||
.section-header { padding: 0.75rem 1.5rem; background: #111827; }
|
||||
.section-header {
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: #111827;
|
||||
}
|
||||
|
||||
/* ===== Dividers ===== */
|
||||
.divider { flex: 1; height: 3px; background: #111827; }
|
||||
.divider {
|
||||
flex: 1;
|
||||
height: 3px;
|
||||
background: #111827;
|
||||
}
|
||||
|
||||
/* ===== Social icons ===== */
|
||||
.bg-instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
|
||||
.bg-instagram {
|
||||
background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
|
||||
}
|
||||
|
||||
/* ===== Detail table ===== */
|
||||
.detail-table { width: 100%; border-collapse: collapse; }
|
||||
.detail-table td, .detail-table th { padding: 0.75rem 1rem; }
|
||||
.detail-table tr { border-bottom: 1px solid #e5e7eb; }
|
||||
.detail-table tr:last-child { border-bottom: none; }
|
||||
.detail-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.detail-table td,
|
||||
.detail-table th {
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.detail-table tr {
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.detail-table tr:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* ===== Marquee ===== */
|
||||
@keyframes marquee {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(-50%); }
|
||||
}
|
||||
|
||||
.animate-marquee {
|
||||
display: flex;
|
||||
width: 200%;
|
||||
|
||||
Reference in New Issue
Block a user