test / styles.css
TIMBOVILL's picture
Update styles.css
94df80a verified
raw
history blame
No virus
1.84 kB
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #1e1e1e;
color: white;
}
#app {
width: 90%;
max-width: 800px;
background: #2c2c2c;
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
height: 100vh;
}
header {
background: #007aff;
color: white;
padding: 1rem;
text-align: center;
}
main {
flex: 1;
overflow-y: auto;
padding: 1rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1rem;
}
.grid-item {
padding: 1rem;
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
cursor: pointer;
background: linear-gradient(135deg, #ff6b6b, #f06595);
}
.grid-item:nth-child(2n) {
background: linear-gradient(135deg, #51cf66, #20c997);
}
.grid-item:nth-child(3n) {
background: linear-gradient(135deg, #339af0, #5c7cfa);
}
.grid-item:nth-child(4n) {
background: linear-gradient(135deg, #fcc419, #fab005);
}
.grid-item:hover {
opacity: 0.9;
}
.grid-item img {
width: 50px;
height: 50px;
margin-bottom: 1rem;
}
.grid-item h2 {
font-size: 1.25rem;
margin: 0;
}
.detail-view {
padding: 1rem;
display: none;
}
.detail-view.active {
display: block;
}
button {
background-color: #007aff;
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
margin-top: 1rem;
}
button:hover {
background-color: #005bb5;
}
footer {
background: #333;
padding: 1rem;
text-align: center;
}