on-codemerge
Version:
A WYSIWYG editor for on-codemerge is a user-friendly interface that allows users to edit and view their code in real time, exactly as it will appear in the final product
2 lines (1 loc) • 2.81 kB
CSS
.html-editor-table{margin-top:1rem;margin-bottom:1rem;width:100%;border-collapse:collapse}.html-editor-table td,.html-editor-table th{position:relative;min-width:100px;border-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));padding:.5rem;height:24px;cursor:text}.html-editor-table th{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));font-weight:600}.table-color-picker{margin-top:.5rem;width:1.5rem;cursor:pointer;border-width:0px;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.table-popup{position:fixed;top:50%;left:50%;display:none;--tw-translate-x: -50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));border-radius:.5rem;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.table-popup.visible{display:block}.table-popup .table-popup-content>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.table-popup .table-options{margin-bottom:1rem;display:flex;align-items:center;gap:1rem}.table-popup .table-option-label{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.table-popup .table-option-checkbox{height:1rem;width:1rem;border-radius:.25rem;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity, 1))}.table-popup .table-option-checkbox:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1)) }.table-popup .table-size-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:.125rem}.table-popup .grid-cell{height:1.5rem;width:1.5rem;cursor:pointer;border-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.table-popup .grid-cell:hover{--tw-border-opacity: 1;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.table-popup .grid-cell.selected{--tw-border-opacity: 1;border-color:rgb(96 165 250 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}