public/css/main.css - main - sanni/web-nodejs-labs

public/css/main.css
448 строк9 KB
Софья К
lab7 was difficult, but maybe teacher will like this lab
06 ноя 2025, 00:07
06 ноя 2025, 00:07764910a
* {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    box-sizing: border-box;
    color: white;
}

.maingrid, .labgrid {
    overflow-y: auto; 
}

@media all and (min-width: 1200px) {
    .maingrid {
        font-size: clamp(16pt, 1.25vw, 20pt);
        display: grid;
        height: 100vh;
        grid-template-rows: 1fr 4fr 1fr;
        grid-template-columns: 1fr 2fr;
        grid-template-areas:
            "g1 g1"
            "g2 g3"
            "g4 g4";
        padding: 20px;
        gap: 10px;
        background-color: #141526;
    }
}

@media all and (max-width: 1199px) {
    .maingrid {
        font-size: clamp(12pt, calc(12pt + 1vw), 15pt);
        display: grid;
        height: 100vh;
        grid-template-rows: 1fr 2fr 1fr 1fr;
        grid-template-columns: 1fr;
        grid-template-areas:
            "g1"
            "g2"
            "g3"
            "g4";
        padding: 20px;
        gap: 10px;
        background-color: #141526;
    }
}

@media all and (min-width: 1200px) {
    .labgrid {
        font-size: clamp(16pt, 1.25vw, 20pt);
        display: grid;
        height: 100vh;
        grid-template-rows: 1fr 4fr 1fr;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
            "g1 g1 g1"
            "g2 g6 g3"
            "g4 g4 g4";
        padding: 20px;
        gap: 10px;
        background-color: #141526;
    }
}

@media all and (max-width: 1199px) {
    .labgrid {
        font-size: clamp(12pt, calc(12pt + 1vw), 15pt);
        display: grid;
        height: 100vh;
        grid-template-rows: 1fr 2fr 2fr 2fr 1fr;
        grid-template-columns: 1fr;
        grid-template-areas:
            "g1"
            "g2"
            "g6"
            "g3"
            "g4";
        padding: 20px;
        gap: 10px;
        background-color: #141526;
    }
}

.g1 {
    grid-area: g1;
    background-color: #2b3567;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center; 
    overflow-wrap: break-word;
    word-break: break-word;
    border-radius: 20px;
    box-shadow: 0 0.5em 1.5625em rgba(0, 0, 0, 0.3);
}

.g4 {
    grid-area: g4;
    background-color: #2b3567;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-wrap: break-word;
    word-break: break-word;
    border-radius: 20px;
    box-shadow: 0 0.5em 1.5625em rgba(0, 0, 0, 0.3);
}

.g2 {
    grid-area: g2;
    background-color: #4965c8; 
    border-radius: 20px;
    padding: 25px;
    margin: 15px; 
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow-wrap: break-word;
    word-break: break-word;
    box-shadow: 0 0.5em 1.5625em rgba(0, 0, 0, 0.3);
}

.g6 {
    grid-area: g6;
    background-color: #6a7bd6; 
    border-radius: 20px;
    padding: 25px;
    margin: 15px; 
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow-wrap: break-word;
    word-break: break-word;
    box-shadow: 0 0.5em 1.5625em rgba(0, 0, 0, 0.3);
}

.g3 {
    grid-area: g3;
    background-color: #8a91e3;
    border-radius: 20px;
    padding: 25px;
    margin: 15px; 
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
    gap: 15px;
    grid-template-areas:
        "g5a"
        "g5b"
        "g5c";
    align-items: center;
    justify-items: center;
    overflow-wrap: break-word;
    word-break: break-word;
    box-shadow: 0 0.5em 1.5625em rgba(0, 0, 0, 0.3);
}

.g5a, .g5b, .g5c {
    background-color: rgba(43, 53, 103, 0.85);
    width: 80%;
    max-width: 100%;           
    height: 70%;
    min-height: 100px;        
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    flex-direction: column;
    box-shadow: 0 0.25em 0.625em rgba(60, 70, 150, 0.5);
    font-size: clamp(0.8rem, 2vw, 1.2rem);
    overflow-wrap: break-word;
    word-break: break-word;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
}

a {
    color: #c0d1ff;
    text-decoration: none;
    padding: 0;
    margin: 0;
    transition: color 0.3s ease;
}

a:hover {
    color: #e4ebff; 
}

.g2, .g3, .g4, .g6 {
    font-size: 1em;
}

.g2 ul, .g6 ul {
    margin: 0;
    padding-left: 20px;
}

.g2 ul li, .g6 ul li {
    margin: 0;
    padding: 0;
}

.g6 p {
    margin: 0;
    padding: 0;
}

.list-completed-item {
    position: relative;
    padding-left: 2em;
    list-style: none;
}

.list-completed-item::before {
    content: "✔";
    color: #34d639cb;
    font-weight: bold;
    position: absolute;
    left: 0;
    width: 1.5em;
    text-align: center;
}

.list-incomplete-item {
    position: relative;
    padding-left: 2em !important;
    list-style: none !important;
}

.list-incomplete-item::before {
    content: "⛌";
    color: #f82727bb;
    font-weight: bold;
    position: absolute;
    left: 0;
    width: 1.5em;
    text-align: center;
}

/* ===== КНОПКИ И ФОРМЫ ===== */
button {
    padding: 0.75em 1.5em;
    background: linear-gradient(135deg, #4caf50, #45a049);
    color: white;
    border: none;
    border-radius: 0.9375em;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0.25em 0.625em rgba(76, 175, 80, 0.4);
    min-width: 160px;
}

button:hover {
    background: linear-gradient(135deg, #5cb85c, #4cae4c);
    transform: translateY(-0.125em);
    box-shadow: 0 0.375em 0.75em rgba(76, 175, 80, 0.6);
}

button:disabled {
    background: #6c757d;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Варианты кнопок */
.btn-primary {
    background: linear-gradient(135deg, #4caf50, #45a049);
    box-shadow: 0 0.25em 0.625em rgba(76, 175, 80, 0.4);
}

.btn-secondary {
    background: linear-gradient(135deg, #2196F3, #1976D2);
    box-shadow: 0 0.25em 0.625em rgba(33, 150, 243, 0.4);
}

.btn-danger {
    background: linear-gradient(135deg, #f44336, #d32f2f);
    box-shadow: 0 0.25em 0.625em rgba(244, 67, 54, 0.4);
}

.btn-small {
    padding: 0.5em 1em;
    font-size: 0.9rem;
    min-width: 120px;
}

/* Поля ввода */
.input-field {
    padding: 0.75em 1.125em;
    background-color: rgba(43, 53, 103, 0.85);
    border: 0.125em solid #7c85d6;
    border-radius: 0.9375em;
    color: white;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 0.25em 0.625em rgba(60, 70, 150, 0.5);
}

.input-field:focus {
    outline: none;
    border-color: #c0d1ff;
    box-shadow: 0 0 0 0.1875em rgba(192, 209, 255, 0.3);
}

.textarea-field {
    min-height: 80px;
    resize: vertical;
    width: 100%;
}

/* ===== СПИСКИ И ЭЛЕМЕНТЫ ===== */
.list-item {
    background-color: rgba(43, 53, 103, 0.85);
    border: 0.125em solid #7c85d6;
    border-radius: 0.9375em;
    padding: 1.25em;
    transition: all 0.3s ease;
    position: relative;
}

.list-item:hover {
    background-color: rgba(60, 70, 150, 0.9);
    border-color: #c0d1ff;
    transform: translateY(-0.125em);
    box-shadow: 0 0.375em 0.75em rgba(60, 70, 150, 0.5);
}

.list-completed-item {
    position: relative;
    padding-left: 2em !important;
    list-style: none !important;
}

.list-completed-item::before {
    content: "✔";
    color: #34d639cb;
    font-weight: bold;
    position: absolute;
    left: 0;
    width: 1.5em;
    text-align: center;
}

.list-incomplete-item {
    position: relative;
    padding-left: 2em !important;
    list-style: none !important;
}

.list-incomplete-item::before {
    content: "⛌";
    color: #f82727bb;
    font-weight: bold;
    position: absolute;
    left: 0;
    width: 1.5em;
    text-align: center;
}

/* ===== СОСТОЯНИЯ ===== */
.loading {
    color: #c0d1ff;
    font-style: italic;
}

.error {
    color: #ff6b6b;
    background-color: rgba(255, 107, 107, 0.1);
    border: 0.0625em solid #ff6b6b;
    border-radius: 0.625em;
    padding: 1em;
    text-align: center;
    font-weight: 500;
}

.status {
    margin-top: 1rem;
    margin-bottom: 1rem;
    color: #e4ebff;
    font-size: 1.1rem;
    min-height: 1.5em;
    text-align: center;
}

/* ===== ИЗОБРАЖЕНИЯ ===== */
.responsive-img {
    max-width: 100%;
    max-height: 60vh;
    border-radius: 1em;
    box-shadow: 0 0.5em 1.5625em rgba(0, 0, 0, 0.3);
    border: 0.125em solid #7c85d6;
    display: none;
    margin: 0 auto;
}

.responsive-img.loaded {
    display: block;
}

/* ===== УТИЛИТЫ ===== */
.section {
    width: 100%;
    margin-bottom: 2em;
}

.section-divider {
    margin-top: 2em;
    padding-top: 2em;
    border-top: 0.125em solid #7c85d6;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-column {
    flex-direction: column;
}

.flex-between {
    justify-content: space-between;
}

.text-center {
    text-align: center;
}

.text-muted {
    color: #c0d1ff;
}

.empty-state {
    text-align: center;
    color: #c0d1ff;
    font-style: italic;
    padding: 3em 2em;
    background-color: rgba(43, 53, 103, 0.4);
    border-radius: 0.9375em;
    border: 0.125em dashed #7c85d6;
    line-height: 1.6;
}