diff --git a/assets/css/mineseeker/_overlay.scss b/assets/css/mineseeker/_overlay.scss index 4617d85..50fa80d 100644 --- a/assets/css/mineseeker/_overlay.scss +++ b/assets/css/mineseeker/_overlay.scss @@ -65,6 +65,96 @@ font-weight: 600; } +#mine-wrapper .game-wrapper .game-overlay .game-overlay-window .resign { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + width: 100%; + text-transform: none; + letter-spacing: normal; + font-size: inherit; + + a { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 10px; + background: linear-gradient(to bottom, #236f87 0%, #1a5068 100%); + border: 2px solid #2e7a9a; + color: #e0f4ff; + font: 800 13px 'Rajdhani', sans-serif; + letter-spacing: 2px; + text-transform: uppercase; + padding: 12px 24px; + border-radius: 8px; + cursor: pointer; + transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1); + width: 100%; + max-width: 260px; + position: relative; + overflow: hidden; + box-shadow: 0 4px 12px rgba(35, 111, 135, 0.25); + text-decoration: none; + + &::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); + transition: left 0.4s ease; + } + + &:hover { + background: linear-gradient(to bottom, #2d8aa8 0%, #236f87 100%); + border-color: #5ba4d4; + color: #fff; + box-shadow: 0 8px 24px rgba(35, 111, 135, 0.4); + transform: translateY(-2px); + + &::before { + left: 100%; + } + } + + &:active { + transform: translateY(0); + } + + &:first-child { + background: linear-gradient(to bottom, #8a2323 0%, #681a1a 100%); + border-color: #9a2e2e; + color: #ffe0e0; + box-shadow: 0 4px 12px rgba(135, 35, 35, 0.25); + + &:hover { + background: linear-gradient(to bottom, #a82d2d 0%, #872323 100%); + border-color: #d45b5b; + color: #fff; + box-shadow: 0 8px 24px rgba(135, 35, 35, 0.4); + } + } + } +} + +#mine-wrapper .game-wrapper .game-overlay .game-overlay-window:has(.resign) h1 { + text-align: center; + margin-bottom: 24px; +} + +#mine-wrapper .game-wrapper .game-overlay .game-overlay-window:has(.resign) h2 { + text-align: center; + color: inherit; + font-size: inherit; + letter-spacing: normal; + text-transform: none; + font-weight: normal; + margin: 0; +} + #mine-wrapper .game-wrapper .game-overlay .game-overlay-window h3 { font-size: 16px; color: #236f87; @@ -88,7 +178,7 @@ display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto; - gap: 24px; + gap: 10px; align-items: stretch; width: 100%; animation: fadeInUp 0.6s ease-out 0.2s both; @@ -103,7 +193,7 @@ display: flex; flex-direction: column; gap: 16px; - padding: 24px; + padding: 15px; background: linear-gradient(135deg, rgba(35, 111, 135, 0.08) 0%, rgba(26, 80, 104, 0.08) 100%); border: 2px solid rgba(35, 111, 135, 0.2); border-radius: 12px;