174 lines
4.0 KiB
CSS
174 lines
4.0 KiB
CSS
body {
|
||
font-family: system-ui, sans-serif;
|
||
margin: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background: #333;
|
||
color: white;
|
||
padding: 10px 15px;
|
||
position: relative;
|
||
}
|
||
|
||
footer {
|
||
background: #333;
|
||
color: white;
|
||
text-align: center;
|
||
padding: 10px;
|
||
}
|
||
|
||
main {
|
||
flex: 1;
|
||
padding: 20px;
|
||
max-width: 1000px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* навигация */
|
||
nav ul {
|
||
list-style: none;
|
||
display: flex;
|
||
gap: 20px;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
nav a {
|
||
color: white;
|
||
text-decoration: none;
|
||
font-weight: 500;
|
||
}
|
||
|
||
nav a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* бургер */
|
||
.burger {
|
||
display: none;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
gap: 5px;
|
||
width: 30px;
|
||
height: 25px;
|
||
background: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.burger span {
|
||
display: block;
|
||
height: 3px;
|
||
width: 100%;
|
||
background: white;
|
||
border-radius: 2px;
|
||
transition: 0.3s;
|
||
}
|
||
|
||
.burger.active span:nth-child(1) {
|
||
transform: translateY(8px) rotate(45deg);
|
||
}
|
||
|
||
.burger.active span:nth-child(2) {
|
||
opacity: 0;
|
||
}
|
||
|
||
.burger.active span:nth-child(3) {
|
||
transform: translateY(-8px) rotate(-45deg);
|
||
}
|
||
|
||
/* сетка */
|
||
.grid-3 {
|
||
display: grid;
|
||
grid-template-columns: 15% 70% 15%;
|
||
gap: 20px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.grid-block {
|
||
background: #f5f5f5;
|
||
padding: 15px;
|
||
border-radius: 10px;
|
||
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
||
}
|
||
/* Полупрозрачный фон */
|
||
.overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0,0,0,0.5);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 1000;
|
||
}
|
||
|
||
/* Окна */
|
||
/* Message */
|
||
.window-popup { width:400px; height:150px; background:#fff; border-radius:10px; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:20px; box-shadow:0 0 10px rgba(0,0,0,0.3); }
|
||
.window-popup button { margin-top:20px; padding:5px 10px; cursor:pointer; }
|
||
|
||
/* Menu */
|
||
.window-menu { position:absolute; background:#fff; border-radius:10px; border:1px solid rgba(0,0,0,0.12); box-shadow:0 6px 18px rgba(0,0,0,0.12); min-width:160px; z-index:9999; overflow:hidden; }
|
||
.window-item { padding:8px 12px; cursor:pointer; white-space:nowrap; font-size:14px; }
|
||
.window-item:hover { background:rgba(0,0,0,0.04); }
|
||
|
||
/* File */
|
||
.window-panel { width:420px; background:#f0f0f0; border:1px solid #888; border-radius:10px; box-shadow:0 0 12px rgba(0,0,0,0.4); position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); user-select:none; display:flex; flex-direction:column; }
|
||
.window-header { background:#f0f0f0; padding:10px; font-size:16px; font-weight:600; border-bottom:1px solid #aaa; cursor:move; }
|
||
.window-tabs { display:flex; border-bottom:1px solid #aaa; background:#f0f0f0; }
|
||
.window-tab { padding:8px 14px; cursor:pointer; border-right:1px solid #aaa; user-select:none; }
|
||
.window-tab.active { background:#fff; font-weight:600; border-bottom:2px solid #fff; }
|
||
.window-content { display:none; padding:15px; background:#fff; }
|
||
.window-content.active { display:block; }
|
||
.window-row { display:flex; justify-content:space-between; margin-bottom:8px; font-size:14px; }
|
||
.window-buttons { display:flex; justify-content:flex-end; padding:10px; gap:8px; border-top:1px solid #aaa; background:#f0f0f0; }
|
||
.window-buttons button { padding:6px 16px; cursor:pointer; }
|
||
|
||
/* адаптив */
|
||
@media (max-width: 425px) {
|
||
.grid-3 {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.burger {
|
||
display: flex;
|
||
}
|
||
|
||
nav {
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 0;
|
||
width: 100%;
|
||
background: #222;
|
||
display: none;
|
||
flex-direction: column;
|
||
text-align: center;
|
||
padding: 10px 0;
|
||
z-index: 10;
|
||
}
|
||
|
||
nav.open {
|
||
display: flex;
|
||
animation: slideDown 0.3s ease;
|
||
}
|
||
|
||
nav ul {
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
@keyframes slideDown {
|
||
from { opacity: 0; transform: translateY(-10px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
}
|