master @ 96 LINES
[ HISTORY ] [ UP ]
┌─ SCSS ─────────────────────────────────────────────────────────────────────┐
│ @use "../styles/core/tokens" as *; │
│ │
│ .error-container { │
│ display: flex; │
│ align-items: center; │
│ justify-content: center; │
│ min-height: 60vh; │
│ padding: 40px 20px; │
│ } │
│ │
│ .error-content { │
│ text-align: center; │
│ max-width: 500px; │
│ } │
│ │
│ .error-code { │
│ font-size: 8rem; │
│ font-weight: $font-weight-bold; │
│ color: var(--highlight-color); │
│ margin: 0; │
│ line-height: 1; │
│ } │
│ │
│ .error-title { │
│ font-size: 2rem; │
│ color: var(--text-primary); │
│ margin: 20px 0 10px 0; │
│ font-weight: $font-weight-semibold; │
│ } │
│ │
│ .error-message { │
│ font-size: 1.1rem; │
│ color: var(--text-secondary); │
│ margin: 0 0 30px 0; │
│ line-height: 1.5; │
│ } │
│ │
│ .error-actions { │
│ display: flex; │
│ gap: $spacing-lg; │
│ justify-content: center; │
│ flex-wrap: wrap; │
│ } │
│ │
│ .btn-primary, │
│ .btn-secondary { │
│ padding: 12px 24px; │
│ border-radius: $radius-md; │
│ text-decoration: none; │
│ font-weight: $font-weight-semibold; │
│ transition: all 0.2s ease; │
│ display: inline-block; │
│ } │
│ │
│ .btn-primary { │
│ background-color: var(--highlight-color); │
│ color: var(--bg-primary); │
│ │
│ &:hover { │
│ background-color: #b8860b; │
│ transform: translateY(-1px); │
│ } │
│ } │
│ │
│ .btn-secondary { │
│ background-color: transparent; │
│ color: var(--text-primary); │
│ border: 2px solid var(--border-color); │
│ │
│ &:hover { │
│ border-color: var(--highlight-color); │
│ color: var(--highlight-color); │
│ transform: translateY(-1px); │
│ } │
│ } │
│ │
│ @media (max-width: 768px) { │
│ .error-code { │
│ font-size: 6rem; │
│ } │
│ │
│ .error-title { │
│ font-size: 1.5rem; │
│ } │
│ │
│ .error-actions { │
│ flex-direction: column; │
│ align-items: center; │
│ } │
│ │
│ .btn-primary, │
│ .btn-secondary { │
│ min-width: 200px; │
│ } │
│ } │
└────────────────────────────────────────────────────────────────────────────────────┘
┌─ SCSS ───────────────────────────────┐
│ @use "../styles/core/tokens" as *; │
│ │
│ .error-container { │
│ display: flex; │
│ align-items: center; │
│ justify-content: center; │
│ min-height: 60vh; │
│ padding: 40px 20px; │
│ } │
│ │
│ .error-content { │
│ text-align: center; │
│ max-width: 500px; │
│ } │
│ │
│ .error-code { │
│ font-size: 8rem; │
│ font-weight: $font-weight-bold; │
│ color: var(--highlight-color); │
│ margin: 0; │
│ line-height: 1; │
│ } │
│ │
│ .error-title { │
│ font-size: 2rem; │
│ color: var(--text-primary); │
│ margin: 20px 0 10px 0; │
│ font-weight: $font-weight-semibold; │
│ } │
│ │
│ .error-message { │
│ font-size: 1.1rem; │
│ color: var(--text-secondary); │
│ margin: 0 0 30px 0; │
│ line-height: 1.5; │
│ } │
│ │
│ .error-actions { │
│ display: flex; │
│ gap: $spacing-lg; │
│ justify-content: center; │
│ flex-wrap: wrap; │
│ } │
│ │
│ .btn-primary, │
│ .btn-secondary { │
│ padding: 12px 24px; │
│ border-radius: $radius-md; │
│ text-decoration: none; │
│ font-weight: $font-weight-semibold; │
│ transition: all 0.2s ease; │
│ display: inline-block; │
│ } │
│ │
│ .btn-primary { │
│ background-color: var(--highlight-color); │
│ color: var(--bg-primary); │
│ │
│ &:hover { │
│ background-color: #b8860b; │
│ transform: translateY(-1px); │
│ } │
│ } │
│ │
│ .btn-secondary { │
│ background-color: transparent; │
│ color: var(--text-primary); │
│ border: 2px solid var(--border-color); │
│ │
│ &:hover { │
│ border-color: var(--highlight-color); │
│ color: var(--highlight-color); │
│ transform: translateY(-1px); │
│ } │
│ } │
│ │
│ @media (max-width: 768px) { │
│ .error-code { │
│ font-size: 6rem; │
│ } │
│ │
│ .error-title { │
│ font-size: 1.5rem; │
│ } │
│ │
│ .error-actions { │
│ flex-direction: column; │
│ align-items: center; │
│ } │
│ │
│ .btn-primary, │
│ .btn-secondary { │
│ min-width: 200px; │
│ } │
│ } │
└──────────────────────────────────────────────┘
──────────────────────────────────────────────────────────────────────────────────────
OOKNET
────────────────────────────────────────────────
OOKNET