ParamManagerScripts/static/css/styles.css

164 lines
3.1 KiB
CSS

.sidebar {
position: fixed;
top: 0;
right: -400px;
width: 400px;
height: 100vh;
background: white;
box-shadow: -2px 0 5px rgba(0,0,0,0.1);
transition: right 0.3s ease;
z-index: 40;
overflow-y: auto;
}
.sidebar.open {
right: 0;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.5);
display: none;
z-index: 30;
}
.overlay.show {
display: block;
}
#schema-editor {
z-index: 50;
}
#schema-editor .modal-content {
z-index: 51;
width: 50% !important;
max-width: 800px;
}
/* Reducción general de padding */
.container {
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
}
.p-6 {
padding: 1.1rem !important;
}
.px-4 {
padding-left: 0.7rem !important;
padding-right: 0.7rem !important;
}
.py-8 {
padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important;
}
/* Ajustes para el log */
#log-area {
font-size: 0.7rem !important;
line-height: 1.2 !important;
padding: 0.7rem !important;
}
/* Ajustes para márgenes */
.mb-4 {
margin-bottom: 0.7rem !important;
}
.mb-6 {
margin-bottom: 1.1rem !important;
}
.mb-8 {
margin-bottom: 1.5rem !important;
}
.mt-4 {
margin-top: 0.7rem !important;
}
/* Estilos del modal */
.modal-header {
position: sticky;
top: 0;
background: white;
z-index: 52;
padding: 1rem;
border-bottom: 1px solid #e5e7eb;
}
.modal-footer {
position: sticky;
bottom: 0;
background: white;
z-index: 52;
padding: 1rem;
border-top: 1px solid #e5e7eb;
}
/* Estilos para encabezados dentro de la descripción larga del script */
.long-description-content h1 {
font-size: 1.875rem; /* Equivalente a text-3xl de Tailwind */
font-weight: bold;
margin-top: 1rem;
margin-bottom: 0.5rem;
}
.long-description-content h2 {
font-size: 1.5rem; /* Equivalente a text-2xl */
font-weight: bold;
margin-top: 0.875rem;
margin-bottom: 0.4rem;
}
.long-description-content h3 {
font-size: 1.25rem; /* Equivalente a text-xl */
font-weight: bold;
margin-top: 0.75rem;
margin-bottom: 0.3rem;
}
/* Puedes añadir estilos para h4, h5, h6 si los necesitas */
.long-description-content hr {
margin-top: 1rem;
margin-bottom: 1rem;
border-top-width: 1px;
}
/* Ajustes opcionales para listas y código si no usas 'prose' */
.long-description-content ul,
.long-description-content ol {
list-style-position: inside;
margin-left: 1rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.long-description-content ul {
list-style-type: disc;
}
.long-description-content ol {
list-style-type: decimal;
}
.long-description-content pre {
background-color: #f3f4f6; /* bg-gray-100 */
padding: 0.75rem;
border-radius: 0.25rem;
overflow-x: auto;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.long-description-content code {
font-family: monospace;
/* Estilo para código en línea si es necesario */
}
/* Estilo específico para bloques de código dentro de <pre> */
.long-description-content pre code {
background-color: transparent;
padding: 0;
}