canna71_obsidian-sheets/styles.scss

// @import "x-data-spreadsheet/dist/xspreadsheet.css"
//
@import "node_modules/x-data-spreadsheet/dist/xspreadsheet";

// override

// .x-spreadsheet {
//     background: var(--background-primary);
// }

// .x-spreadsheet {
//     --ss-accent-h: var(--accent-h);
//     --ss-accent-s: var(--accent-s);
//     --ss-accent-l: var(--accent-l);
// }

.x-spreadsheet {
 
    --ss-accent-h: var(--accent-h);
    --ss-accent-s: var(--accent-s);
    --ss-accent-l: var(--accent-l);
    --ss-background: var(--background-primary);
    --ss-background-secondary: var(--background-secondary);
    --ss-background-alt: var(--background-primary-alt);
    --ss-background-secondary-alt: var(--background-secondary-alt);
    --ss-text-color: var(--text-normal);
    --ss-text-color-muted: var(--text-muted);
    --ss-border-color: var(--divider-color);
    --item-hover: var(--background-modifier-hover);
    --toolbar-bg-active: var(--background-modifier-hover);
}  

// div.x-spreadsheet-sheet
//     > div.x-spreadsheet-overlayer
//     > div
//     > div.x-spreadsheet-editor
//     > div
//     > textarea {
//     background-color: #ffffff;
//     // background-color: var(--background-primary);

//     color: #000000;
//     // color: var(--text-normal);
//     box-shadow: inherit;
// }
.x-spreadsheet-editor {
    textarea {
        border-radius: 0px;;
    }
}
// .x-spreadsheet-tooltip {
//     color: var(--text-normal);
//     background: var(--background-primary);
// }

// .x-spreadsheet-color-palette table td:hover {
//     border-color: var(--background-modifier-border-hover);
// }

// .x-spreadsheet-border-palette
//     .x-spreadsheet-border-palette-left
//     .x-spreadsheet-border-palette-cell:hover {
//     background-color: var(--background-primary);
// }

// .x-spreadsheet-resizer .x-spreadsheet-resizer-hover {
//     background-color: rgba(75, 137, 255, 0.25);
// }

// .x-spreadsheet-item {
//     background: var(--background-secondary);

//     color: var(--text-muted);
// }

// .x-spreadsheet-menu > li {
//     color: var(--text-muted);

//     &.active {
//         background-color: var(--background-primary);
//         color: var(--text-normal);
//     }
// }

// .x-spreadsheet-print-bar .-title {
//     color: var(--text-normal);
// }

// .x-spreadsheet-calendar {
//     color: var(--text-normal);
//     background: var(--background-primary);

//     .calendar-body td > .cell.active {
//         background: var(--background-primary);

//         color: var(--text-normal);
//     }

//     .calendar-header {
//         background: var(--background-secondary);

//         .calendar-header-right a:hover {
//             background: rgba(0, 0, 0, 0.08);
//         }
//     }

//     .calendar-body td > .cell {
//         &:hover {
//             background: #ecf6fd;
//         }

//         &.active,
//         &.active:hover {
//             background: #ecf6fd;
//             color: #2185d0;
//         }
//     }
// }

// .x-spreadsheet-datepicker {
//     box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
// }

// .x-spreadsheet-button {
//     color: var(--text-muted);
//     background: var(--background-secondary);

//     &.active,
//     &:hover {
//         background-color: var(--background-secondary);
//         color: var(--text-normal);
//     }
// }

// .x-spreadsheet-button.primary {
//     color: var(--text-normal);
//     background-color: var(--background-secondary);

//     &:hover,
//     &.active {
//         color: var(--text-normal);
//         background-color: var(--background-secondary);
//     }
// }

// .x-spreadsheet-form-input {
//     color: rgba(0, 0, 0, 0.87);

//     input {
//         -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
//         background: var(--background-primary);
//         border: 1px solid var(--background-modifier-border-hover);
//         box-shadow: inset 0 1px 2px hsla(0, 0%, 4%, 0.06);

//         &:focus {
//             border-color: #123456;
//             box-shadow: inset 0 1px 2px rgba(12, 34, 56, 0.2);
//         }
//     }
// }

// .x-spreadsheet-form-select {
//     background: #fff;
//     border: 1px solid #e9e9e9;
//     color: rgba(0, 0, 0, 0.87);
//     box-shadow: inset 0 1px 2px hsla(0, 0%, 4%, 0.06);
// }

// .x-spreadsheet-form-field.error .x-spreadsheet-form-select,
// .x-spreadsheet-form-field.error input {
//     border-color: #f04134;
// }
// .x-spreadsheet-form-field .tip {
//     color: #f04134;
// }

// .x-spreadsheet-toolbar,
// .x-spreadsheet-bottombar {

//   background: var(--background-secondary);

// }

// .x-spreadsheet-toolbar-btn {
//     color: var(--text-muted);
//     background: var(--background-secondary);
// }

div.x-spreadsheet {
    overflow: hidden;
}

.x-spreadsheet-dimmer.active {
    display: none;
    z-index: -1;
}

ul.x-spreadsheet-menu {
    padding: 0px;
    margin: 0px;
}

 div.x-spreadsheet-toolbar  div.x-spreadsheet-icon {
    cursor: pointer;
    img {
        cursor: pointer;
    }
 }

 .x-spreadsheet-border-palette table tr td {
    overflow-y: visible;
    overflow-x: visible;
 }




.x-spreadsheet-icon-img.arrow-down {
    margin: 0;
    border: 0;
}

// TODO: create custom classes for each dropdown item, then sets limits accordingly
// we suppose a min height of 400px for the whole spreadhsheet

// .x-spreadsheet-dropdown .x-spreadsheet-dropdown-content {
//     max-height: 300px;
//     overflow-y: auto;
// }

// .x-spreadsheet-dropdown-content .x-spreadsheet-dropdown-content {
//     z-index: 201;
//     .x-spreadsheet-dropdown-content {
//         z-index: 202;
//     }
// }