styles.css - master - aksjon/ToskaEXE

styles.css
248 строк5 KB
aksjon
first_commit
18 май 2025, 19:29
18 май 2025, 19:291f4382f
/* Основные цвета как в VS Code Dark+ */
body {
    background-color: #1e1e1e;
    color: #d4d4d4;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    line-height: 1.5;
    margin: 0;
    padding: 20px;
    font-size: 14px;
}

.code-editor {
    max-width: 900px;
    margin: 0 auto;
    background-color: #1e1e1e;
    border: 1px solid #264F78;
    padding: 20px;
}

/* ===== Цветовая схема ===== */
.comment {
    color: #6A9955; /* Зелёный для комментариев */
}

.keyword {
    color: #569CD6; /* Голубой для ключевых слов */
}

.string {
    color: #CE9178; /* Оранжевый для строк */
}

.type {
    color: #4EC9B0; /* Бирюзовый для типов */
}

.variable {
    color: #9CDCFE; /* Светло-голубой для переменных */
}

.function {
    color: #DCDCAA; /* Бежевый для функций */
}

.number {
    color: #B5CEA8; /* Светло-зелёный для чисел */
}

/* ===== Стили для блоков с рассказами ===== */
.story-item {
    padding: 10px;
    background-color: #252526;
    border: 1px solid #3a3a3a;
    border-left: 3px solid; /* Цветная полоса слева */
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 5px;
}

/* Цветные варианты для блоков */
.story-item.comment {
    color: #6A9955;
    border-left-color: #6A9955;
}

.story-item.type {
    color: #4EC9B0;
    border-left-color: #4EC9B0;
}

.story-item.keyword {
    color: #569CD6;
    border-left-color: #569CD6;
}

.story-item.string {
    color: #CE9178;
    border-left-color: #CE9178;
}

.story-item.function {
    color: #DCDCAA;
    border-left-color: #DCDCAA;
}

.story-item.number {
    color: #B5CEA8;
    border-left-color: #B5CEA8;
}

.story-item.variable {
    color: #9CDCFE;
    border-left-color: #9CDCFE;
}

.story-item:hover {
    background-color: #2a2d2e;
    border-color: #569CD6;
}

/* ===== Остальные стили ===== */
.header {
    margin-bottom: 20px;
    border-bottom: 1px solid #264F78;
    padding-bottom: 15px;
}

.warning {
    margin-bottom: 30px;
    padding: 15px;
    background-color: #252526;
    border-left: 3px solid #F44747; /* Красный для предупреждений */
}

.empty-line {
    height: 1em;
}

.stories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.story-content {
    margin-top: 20px;
    background-color: #1e1e1e;
    border: 1px solid #333;
    position: relative;
}

.line-numbers {
    padding: 10px 5px;
    background-color: #252526;
    color: #858585;
    text-align: right;
    user-select: none;
    min-width: 30px;
    border-right: 1px solid #333;
    flex-shrink: 0; /* Добавлено для фиксации ширины */
}

.story-text {
    padding: 10px;
    white-space: pre-wrap; /* Изменено с pre на pre-wrap */
    word-break: break-word; /* Добавлено для переноса слов */
    overflow-wrap: break-word; /* Добавлено для переноса слов */
    flex-grow: 1;
    tab-size: 4; /* Сохраняем табуляцию */
}

.story-text div {
    color: #ffffffa8;
    white-space: pre-wrap; /* для перен. строк */
    word-break: break-word; /* для перен. строк  */
}

.hidden {
    display: none;
}

.story-line {
    display: flex;
}

.line-number {
    padding-right: 10px;
    color: #858585;
    user-select: none;
}


.story-content .row  {
    display: flex;
}

.story-content .row .line_number {
    min-width: 30px;
    text-align: right;
    background-color: #252526;
    color: #858585;
    padding: 0 5px;
    border-right: 1px solid #333;
    user-select: none;
     flex-shrink: 0;
}

.story-content .row .line_text {
    padding: 0 10px;
    flex: 1;
    white-space: pre-wrap; /* Изменено с pre на pre-wrap */
    word-break: break-word; /* Добавлено для переноса слов */
    overflow-wrap: break-word; /* Добавлено для переноса слов */
    flex-grow: 1;
    tab-size: 4; /* Сохраняем табуляцию */
}

.story-content .row:first-child div {
    padding-top: 10px;
}

.story-content .row:last-child div {
    padding-bottom: 10px;
}

/* адапт. для моб. устр. */
@media (max-width: 768px) {
    .stories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .story-text {
        font-size: 14px; /* умен. шрифт. (пока не надо) */
    }
}

@media (max-width: 480px) {
    .stories-grid {
        grid-template-columns: 1fr;
    }
    
    .story-text {
        font-size: 14px; /* можно умен. шрифт для мал.экр. */
    }
}

/* стиль для миг. курс. */
.cursor {
    display: inline-block;
    width: 8px;
    height: 16px;
    background-color: #B5CEA8;
    vertical-align: middle;
    animation: blink 1s step-end infinite;
    margin-left: 2px;
}

@keyframes blink {
    from, to { opacity: 1; }
    50% { opacity: 0; }
}

.cursor-note {
    color: #6A9955;
    font-size: 0.9em;
    margin-left: 5px;
}