Files
2018-lpon-site/public/static/codemirror/codemirror-styles.css

74 lines
2.3 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/* CodeMirror 6 - Стили для правильного отображения */
:root {
color-scheme: light dark;
--brdr: light-dark(#333, #ccc);
--accent-mode-color: light-dark(#222, #eee);
}
.cm6-editor-wrapper {
/* Основной wrapper, созданный CodeMirror */
flex-direction: column;
overflow: hidden;
}
.cm-editor {
/* Сам редактор внутри wrapper - растягиваем на всю доступную высоту */
flex: 1 1 auto;
font-family: monospace;
line-height: 1;
border: 1px solid var(--brdr);;
}
/*
Утилитарные классы для управления шириной.
Мы ищем редактор .cm-editor ВНУТРИ элемента с нашим классом.
*/
.codemirror-width-s > .cm-editor {
/* Маленький (для чисел, коротких ID) */
max-width: 8em !important;
}
.codemirror-width-m > .cm-editor {
/* Средний (для URL, коротких строк) */
max-width: calc(50% - 13em) !important; /* Вычитание 13em подобрано. Это ширина бокового меню слева */
}
.codemirror-width-l > .cm-editor {
/* Большой (для текста, JSON, HTML) */
max-width: calc(75% - 13em) !important;
}
.codemirror-width-xl > .cm-editor {
/* Во всю ширину контейнера */
max-width: calc(100% - 13em) !important;
}
/* Ширина редактора зависит от видимости бокового меню Django Admin.
На экранах < 767px меню прячется, поэтому вычитание 13em неактуально.
Подобрано значение 3ex. */
@media (max-width: 767px) {
.codemirror-width-m > .cm-editor,
.codemirror-width-l > .cm-editor,
.codemirror-width-xl > .cm-editor {
max-width: calc(100% - 3ex) !important;
}
}
/* --- Новый класс для минимальной высоты --- */
.codemirror-min-height-5 .cm-editor {
min-height: 8em; /* 5 строк */
}
.codemirror-no-lines .cm-gutters {
/* Скрываем нумерацию строк */
display: none !important;
}
/* Скрыть оригинальный textarea */
textarea[data-codemirror-editor] {
display: none !important;
}