add previews to babycode editor component

This commit is contained in:
2025-06-01 02:35:55 +03:00
parent 8a00500387
commit 615cd36eab
6 changed files with 177 additions and 9 deletions

View File

@ -26,7 +26,7 @@
font-weight: bold;
font-style: italic;
}
.currentpage, .pagebutton, input[type=file]::file-selector-button, button.warn, input[type=submit].warn, .linkbutton.warn, button.critical, input[type=submit].critical, .linkbutton.critical, button, input[type=submit], .linkbutton {
.tab-button, .currentpage, .pagebutton, input[type=file]::file-selector-button, button.warn, input[type=submit].warn, .linkbutton.warn, button.critical, input[type=submit].critical, .linkbutton.critical, button, input[type=submit], .linkbutton {
cursor: default;
color: black;
font-size: 0.9em;
@ -511,6 +511,50 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
.babycode-editor {
height: 150px;
font-size: 1rem;
}
.babycode-editor-container {
width: 100%;
}
.babycode-preview-errors-container {
font-size: 0.8rem;
}
.tab-button {
background-color: rgb(177, 206, 204.5);
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
margin-bottom: 0;
}
.tab-button:hover {
background-color: rgb(192.6, 215.8, 214.6);
}
.tab-button:active {
background-color: rgb(166.6881496063, 178.0118503937, 177.4261417323);
}
.tab-button:disabled {
background-color: rgb(209.535, 211.565, 211.46);
}
.tab-button.active {
background-color: #beb1ce;
padding-top: 8px;
}
.tab-content {
display: none;
}
.tab-content.active {
min-height: 250px;
display: block;
background-color: rgb(191.3137931034, 189.7, 193.3);
border: 1px solid black;
padding: 10px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
ul, ol {