chg: usr: redesign the resign dialog #4
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user