├── .editorconfig ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .npmrc ├── LICENSE ├── README.md ├── assets ├── screen1.png ├── screen2.png ├── screen3.png ├── screen4.png └── screen5.png ├── esbuild.config.mjs ├── main.css ├── main.ts ├── manifest.json ├── package.json ├── styles.css ├── tsconfig.json ├── version-bump.mjs ├── versions.json └── view.tsx /.editorconfig: -------------------------------------------------------------------------------- 1 | # top-most EditorConfig file 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | end_of_line = lf 7 | insert_final_newline = true 8 | indent_style = tab 9 | indent_size = 4 10 | tab_width = 4 11 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | 3 | main.js 4 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "parser": "@typescript-eslint/parser", 4 | "env": { "node": true }, 5 | "plugins": [ 6 | "@typescript-eslint" 7 | ], 8 | "extends": [ 9 | "eslint:recommended", 10 | "plugin:@typescript-eslint/eslint-recommended", 11 | "plugin:@typescript-eslint/recommended" 12 | ], 13 | "parserOptions": { 14 | "sourceType": "module" 15 | }, 16 | "rules": { 17 | "no-unused-vars": "off", 18 | "@typescript-eslint/no-unused-vars": ["error", { "args": "none" }], 19 | "@typescript-eslint/ban-ts-comment": "off", 20 | "no-prototype-builtins": "off", 21 | "@typescript-eslint/no-empty-function": "off" 22 | } 23 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # vscode 2 | .vscode 3 | 4 | # Intellij 5 | *.iml 6 | .idea 7 | 8 | # npm 9 | node_modules 10 | 11 | # Don't include the compiled main.js file in the repo. 12 | # They should be uploaded to GitHub releases instead. 13 | main.js 14 | 15 | # Exclude sourcemaps 16 | *.map 17 | 18 | # obsidian 19 | data.json 20 | 21 | # Exclude macOS Finder (System Explorer) View States 22 | .DS_Store 23 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | tag-version-prefix="" -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Suzhou Ruilisi Technology Co., Ltd 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Obsidian Spreadsheets Plugin 2 | 3 | This plugin gives you all the features of a standard spreadsheet tool in Obsidian. You can build powerful spreadsheets within Obsidian. 4 | 5 | This plugin is based on FortuneSheet, which is based on [Luckysheet](https://github.com/dream-num/Luckysheet). 6 | 7 | ### Features: 8 | 9 | - Rich text formatting - change fonts, size, colors, borders, cell color, line-wrapping, etc. 10 | 11 | - Formulas - several build in formulas 12 | 13 | - Filter and sort 14 | 15 | - Cells - merge cells, resize cells, drag cells 16 | 17 | ### How to use: 18 | 19 | 1) Install the plugin. 20 | 21 | 2) Create a new spreadsheet by clicking on the "New Spreadsheet" ribbon button. Or right-click on a folder in the left sidebar and click on "New spreadsheet". 22 | 23 | 3) Start creating spreadsheets. 24 | 25 | ### Screenshots: 26 | 27 | ![screen1](assets/screen1.png) 28 | 29 | ![screen2](assets/screen2.png) 30 | 31 | ![screen3](assets/screen3.png) 32 | 33 | ![screen3](assets/screen4.png) 34 | 35 | ![screen5](assets/screen5.png) 36 | -------------------------------------------------------------------------------- /assets/screen1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divamgupta/obsidian-spreadsheets/5ce73d64dc3bcd03e1326b45ea79bc730181a533/assets/screen1.png -------------------------------------------------------------------------------- /assets/screen2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divamgupta/obsidian-spreadsheets/5ce73d64dc3bcd03e1326b45ea79bc730181a533/assets/screen2.png -------------------------------------------------------------------------------- /assets/screen3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divamgupta/obsidian-spreadsheets/5ce73d64dc3bcd03e1326b45ea79bc730181a533/assets/screen3.png -------------------------------------------------------------------------------- /assets/screen4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divamgupta/obsidian-spreadsheets/5ce73d64dc3bcd03e1326b45ea79bc730181a533/assets/screen4.png -------------------------------------------------------------------------------- /assets/screen5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divamgupta/obsidian-spreadsheets/5ce73d64dc3bcd03e1326b45ea79bc730181a533/assets/screen5.png -------------------------------------------------------------------------------- /esbuild.config.mjs: -------------------------------------------------------------------------------- 1 | import esbuild from "esbuild"; 2 | import process from "process"; 3 | import builtins from "builtin-modules"; 4 | 5 | const banner = 6 | `/* 7 | THIS IS A GENERATED/BUNDLED FILE BY ESBUILD 8 | if you want to view the source, please visit the github repository of this plugin 9 | */ 10 | `; 11 | 12 | const prod = (process.argv[2] === "production"); 13 | 14 | const context = await esbuild.context({ 15 | banner: { 16 | js: banner, 17 | }, 18 | entryPoints: ["main.ts"], 19 | bundle: true, 20 | external: [ 21 | "obsidian", 22 | "electron", 23 | "@codemirror/autocomplete", 24 | "@codemirror/collab", 25 | "@codemirror/commands", 26 | "@codemirror/language", 27 | "@codemirror/lint", 28 | "@codemirror/search", 29 | "@codemirror/state", 30 | "@codemirror/view", 31 | "@lezer/common", 32 | "@lezer/highlight", 33 | "@lezer/lr", 34 | ...builtins], 35 | format: "cjs", 36 | target: "es2018", 37 | logLevel: "info", 38 | sourcemap: prod ? false : "inline", 39 | treeShaking: true, 40 | outfile: "main.js", 41 | }); 42 | 43 | if (prod) { 44 | await context.rebuild(); 45 | process.exit(0); 46 | } else { 47 | await context.watch(); 48 | } -------------------------------------------------------------------------------- /main.ts: -------------------------------------------------------------------------------- 1 | import { App, Editor, MarkdownView, Notice, Plugin, WorkspaceLeaf } from 'obsidian'; 2 | import { SpreadsheetView, VIEW_TYPE_SPREADSHEET } from "./view" 3 | 4 | 5 | 6 | async function create_new_file(app, folder_path, file_no){ 7 | 8 | if(folder_path){ 9 | try { 10 | await app.vault.createFolder(folder_path); 11 | } catch (err) { 12 | console.log("issue in making folder"); 13 | console.log(err); 14 | } 15 | } 16 | 17 | 18 | let file_name = "Untitled.sheet" 19 | 20 | if(file_no){ 21 | file_name = "Untitled"+ file_no +".sheet" 22 | } 23 | 24 | let file_path = file_name; 25 | if(folder_path){ 26 | file_path = folder_path + "/" + file_name; 27 | } 28 | 29 | try { 30 | await app.vault.create(file_path, ""); 31 | 32 | await app.workspace.getLeaf(true).setViewState({ 33 | type: VIEW_TYPE_SPREADSHEET, 34 | active: true, 35 | state: { file: file_path } 36 | }); 37 | 38 | new Notice('Create spreadsheet at : ' + file_path); 39 | } catch (err) { 40 | const error = err; 41 | if (error.message.includes("File already exists")) { 42 | return await create_new_file(app , folder_path , (file_no||0)+1 ) 43 | } 44 | } 45 | } 46 | 47 | 48 | export default class SpreadsheetPlugin extends Plugin { 49 | 50 | async onload() { 51 | 52 | const ribbonIconEl = this.addRibbonIcon('table', 'New Spreadsheet', (evt: MouseEvent) => { 53 | create_new_file(this.app, undefined, undefined); 54 | }); 55 | 56 | 57 | let app = this.app; 58 | 59 | this.registerEvent( 60 | this.app.workspace.on("file-menu", (menu, file) => { 61 | menu.addItem((item) => { 62 | item.setTitle("New spreadsheet").setIcon("document").onClick(function(){ 63 | create_new_file(app, file.path, 0 ) 64 | }); 65 | }); 66 | }) 67 | ); 68 | 69 | this.registerView( 70 | VIEW_TYPE_SPREADSHEET, 71 | (leaf: WorkspaceLeaf) => new SpreadsheetView(leaf) 72 | ); 73 | 74 | 75 | this.registerExtensions(["sheet"], VIEW_TYPE_SPREADSHEET); 76 | 77 | 78 | } 79 | 80 | onunload() { 81 | 82 | } 83 | 84 | } 85 | 86 | 87 | -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "spreadsheets", 3 | "name": "Spreadsheets", 4 | "version": "1.0.1", 5 | "minAppVersion": "0.15.0", 6 | "description": "Plugin to create spreadsheets in Obsidian.", 7 | "author": "Divam Gupta", 8 | "authorUrl": "https://divam.io", 9 | "isDesktopOnly": true 10 | } 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "spreadsheets-plugin", 3 | "version": "1.0.1", 4 | "description": "Plugin to create spreadsheets in Obsidian.", 5 | "main": "main.js", 6 | "scripts": { 7 | "dev": "node esbuild.config.mjs", 8 | "build": "tsc -noEmit -skipLibCheck && node esbuild.config.mjs production", 9 | "version": "node version-bump.mjs && git add manifest.json versions.json" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "MIT", 14 | "devDependencies": { 15 | "@types/node": "^16.11.6", 16 | "@types/react": "^18.2.18", 17 | "@types/react-dom": "^18.2.7", 18 | "@typescript-eslint/eslint-plugin": "5.29.0", 19 | "@typescript-eslint/parser": "5.29.0", 20 | "builtin-modules": "3.3.0", 21 | "esbuild": "0.17.3", 22 | "obsidian": "latest", 23 | "tslib": "2.4.0", 24 | "typescript": "4.7.4" 25 | }, 26 | "dependencies": { 27 | "@fortune-sheet/react": "^0.19.0", 28 | "react": "^18.2.0", 29 | "react-dom": "^18.2.0" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | .fortune-container { 2 | display: flex; 3 | width: 100%; 4 | height: 100%; 5 | margin: 0; 6 | padding: 0; 7 | flex-direction: column; 8 | font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; 9 | background-color: white; 10 | } 11 | 12 | .fortune-workarea { 13 | width: 100%; 14 | } 15 | 16 | .fortune-popover-backdrop { 17 | position: absolute; 18 | top: 0; 19 | left: 0; 20 | z-index: 1003; 21 | /* should below .fortune-context-menu */ 22 | height: 100%; 23 | width: 100%; 24 | } 25 | 26 | .fortune-modal-container { 27 | background: rgba(255, 255, 255, 0.5); 28 | display: flex; 29 | align-items: center; 30 | justify-content: center; 31 | } 32 | 33 | html::-webkit-scrollbar-button { 34 | display: none; 35 | } 36 | 37 | .fortune-stat-area { 38 | display: flex; 39 | justify-content: flex-end; 40 | align-items: center; 41 | } 42 | 43 | .fortune-sheet-container { 44 | display: flex; 45 | flex: 1; 46 | flex-direction: column; 47 | } 48 | 49 | .fortune-col-body { 50 | display: flex; 51 | flex: 1; 52 | flex-direction: row; 53 | } 54 | 55 | .fortune-sheet-area { 56 | flex: 1; 57 | position: relative; 58 | } 59 | 60 | .fortune-sheet-canvas-placeholder, 61 | .fortune-sheet-canvas { 62 | width: 100%; 63 | height: 100%; 64 | display: block; 65 | } 66 | 67 | .fortune-sheet-canvas { 68 | position: absolute; 69 | } 70 | .fortune-sheet-overlay { 71 | position: absolute; 72 | width: 100%; 73 | height: 100%; 74 | outline-style: none; 75 | } 76 | 77 | .fortune-cell-area { 78 | border-collapse: collapse; 79 | position: relative; 80 | overflow: hidden; 81 | outline-style: none; 82 | cursor: default; 83 | } 84 | 85 | .fortune-row-body { 86 | display: flex; 87 | flex-direction: row; 88 | } 89 | 90 | .fortune-row-header { 91 | position: relative; 92 | flex-shrink: 0; 93 | outline-style: none; 94 | color: #5e5e5e; 95 | overflow: hidden; 96 | padding: 0; 97 | margin-top: -2px; 98 | padding-top: 2px; 99 | cursor: default; 100 | width: 45px; 101 | } 102 | 103 | .fortune-row-header-hover { 104 | position: absolute; 105 | z-index: 11; 106 | border: 0 none; 107 | right: 0; 108 | width: 100%; 109 | margin-top: 2px; 110 | display: none; 111 | background-color: rgba(194, 194, 194, 0.4); 112 | } 113 | 114 | .fortune-row-header-selected { 115 | position: absolute; 116 | z-index: 10; 117 | border-right: 1px solid #0188fb; 118 | right: 0; 119 | width: 100%; 120 | margin-top: 2px; 121 | display: none; 122 | background-color: rgba(76, 76, 76, 0.1); 123 | } 124 | 125 | .fortune-col-header-wrap { 126 | display: flex; 127 | flex-direction: row; 128 | } 129 | 130 | .fortune-col-header { 131 | color: #5e5e5e; 132 | overflow: hidden; 133 | padding: 0; 134 | cursor: default; 135 | flex: 1; 136 | height: 19px; 137 | outline-style: none; 138 | position: relative; 139 | } 140 | 141 | .fortune-col-header-hover { 142 | color: #5e5e5e; 143 | cursor: default; 144 | position: absolute; 145 | z-index: 11; 146 | border: 0 none; 147 | bottom: 0; 148 | height: 100%; 149 | margin-left: 0px; 150 | display: none; 151 | background-color: rgba(194, 194, 194, 0.4); 152 | } 153 | 154 | .fortune-col-header-hover .header-arrow { 155 | position: absolute; 156 | right: 6px; 157 | top: 50%; 158 | transform: translate(0%, -44%); 159 | } 160 | 161 | .fortune-col-header-selected { 162 | color: #5e5e5e; 163 | cursor: default; 164 | position: absolute; 165 | z-index: 10; 166 | border-bottom: 1px solid #0188fb; 167 | bottom: 0; 168 | height: 100%; 169 | margin-left: 0px; 170 | display: none; 171 | background-color: rgba(76, 76, 76, 0.1); 172 | } 173 | 174 | .fortune-left-top { 175 | width: 44.5px; 176 | height: 18.5px; 177 | border: solid 0 #dfdfdf; 178 | position: relative; 179 | padding-top: 0; 180 | border-width: 0 1px 1px 0; 181 | padding-left: 0; 182 | cursor: pointer; 183 | background-color: white; 184 | } 185 | 186 | .fortune-add-row-button { 187 | padding: 1px 20px; 188 | margin-right: 5px; 189 | display: inline-flex; 190 | align-items: center; 191 | margin: 0 8px; 192 | border: none; 193 | border-radius: 4px; 194 | font-size: 14px; 195 | line-height: 20px; 196 | outline: none; 197 | cursor: pointer; 198 | color: rgb(38, 42, 51); 199 | background-color: rgb(255, 255, 255); 200 | border: 1px solid rgb(200, 200, 200); 201 | } 202 | 203 | .luckysheet-cell-selected-focus { 204 | position: absolute; 205 | pointer-events: none; 206 | z-index: 14; 207 | /*border:1px solid #fff;*/ 208 | margin: 0px 0 0 0px; 209 | background: rgba(0, 80, 208, 0.15); 210 | display: none; 211 | } 212 | 213 | .fortune-selection-copy { 214 | position: absolute; 215 | pointer-events: none; 216 | z-index: 18; 217 | border: none; 218 | margin: 0px 0 0 0px; 219 | } 220 | 221 | .fortune-selection-copy .fortune-copy { 222 | position: absolute; 223 | z-index: 18; 224 | background-color: transparent; 225 | } 226 | 227 | .fortune-selection-copy-hc { 228 | position: absolute; 229 | top: 0; 230 | right: 0; 231 | bottom: 0; 232 | left: 0; 233 | border: 2px dashed #12a5ff; 234 | z-index: 8; 235 | } 236 | 237 | .fortune-selection-highlight { 238 | position: absolute; 239 | /*pointer-events: none;*/ 240 | z-index: 14; 241 | border: none; 242 | margin: 0px 0 0 0px; 243 | /* display: none; */ 244 | } 245 | 246 | .fortune-cell-selected-extend { 247 | position: absolute; 248 | pointer-events: none; 249 | z-index: 16; 250 | border: 1px dashed #0188fb; 251 | margin: -1px 0 0 -1px; 252 | display: none; 253 | } 254 | 255 | .fortune-cell-selected-move { 256 | cursor: move; 257 | position: absolute; 258 | /* pointer-events: none; */ 259 | z-index: 16; 260 | border: 2px solid #0188fb; 261 | margin: -1px 0 0 -1px; 262 | display: none; 263 | } 264 | 265 | .luckysheet-cell-selected { 266 | position: absolute; 267 | pointer-events: none; 268 | z-index: 15; 269 | border: 1px solid #0188fb; 270 | margin: -1px 0 0 -1px; 271 | background: rgba(1, 136, 251, 0.15); 272 | display: none; 273 | box-sizing: content-box; 274 | } 275 | 276 | .luckysheet-cs-inner-border { 277 | pointer-events: none; 278 | border: 1px solid #fff; 279 | position: absolute; 280 | top: 0; 281 | bottom: 0; 282 | left: 0; 283 | right: 0; 284 | } 285 | 286 | .luckysheet-cs-fillhandle { 287 | position: absolute; 288 | width: 6px; 289 | height: 6px; 290 | bottom: -5px; 291 | cursor: crosshair; 292 | background-color: #0188fb; 293 | border: solid 1px #fff; 294 | z-index: 16; 295 | pointer-events: auto; 296 | right: -5px; 297 | } 298 | 299 | .luckysheet-cs-draghandle { 300 | position: absolute; 301 | cursor: move; 302 | background-color: #fff; 303 | opacity: 0.01; 304 | z-index: 15; 305 | pointer-events: auto; 306 | border: 2px solid #fff; 307 | } 308 | 309 | .luckysheet-cs-draghandle-top { 310 | top: -4px; 311 | left: -2px; 312 | right: -2px; 313 | height: 2px; 314 | } 315 | 316 | .luckysheet-cs-draghandle-bottom { 317 | right: 0; 318 | left: -2px; 319 | bottom: -4px; 320 | height: 2px; 321 | } 322 | 323 | .luckysheet-cs-draghandle-left { 324 | top: 0; 325 | left: -4px; 326 | bottom: 0; 327 | width: 2px; 328 | } 329 | 330 | .luckysheet-cs-draghandle-right { 331 | top: 0; 332 | right: -4px; 333 | bottom: 0; 334 | width: 2px; 335 | } 336 | 337 | .luckysheet-cs-touchhandle { 338 | display: none; 339 | position: absolute; 340 | width: 16px; 341 | height: 16px; 342 | padding: 5px; 343 | z-index: 100; 344 | pointer-events: auto; 345 | touch-action: auto; 346 | } 347 | 348 | .luckysheet-cs-touchhandle:before { 349 | content: ""; 350 | display: block; 351 | width: 16px; 352 | height: 16px; 353 | border: 0.5px solid rgba(0, 0, 0, 0.15); 354 | background-color: #ffffff; 355 | box-sizing: border-box; 356 | border-radius: 50%; 357 | } 358 | 359 | .luckysheet-cs-touchhandle-lt { 360 | left: -13px; 361 | top: -13px; 362 | } 363 | 364 | .luckysheet-cs-touchhandle-lb { 365 | left: -13px; 366 | bottom: -13px; 367 | } 368 | 369 | .luckysheet-cs-touchhandle-rt { 370 | right: -13px; 371 | top: -13px; 372 | } 373 | 374 | .luckysheet-cs-touchhandle-rb { 375 | right: -13px; 376 | bottom: -13px; 377 | } 378 | 379 | .luckysheet-cs-touchhandle .luckysheet-cs-touchhandle-btn { 380 | position: absolute; 381 | width: 10px; 382 | height: 10px; 383 | left: 8px; 384 | top: 8px; 385 | background-color: #018ffb; 386 | background-position: center; 387 | box-sizing: border-box; 388 | border-radius: 50%; 389 | z-index: 11; 390 | } 391 | 392 | .luckysheet-input-box { 393 | position: absolute; 394 | font: normal normal 400 13px arial, sans, sans-serif; 395 | z-index: 15; 396 | display: flex; 397 | flex-direction: column; 398 | } 399 | 400 | .luckysheet-input-box-inner { 401 | font: normal normal 400 13px arial, sans, sans-serif; 402 | text-align: left; 403 | max-height: 9900px; 404 | max-width: 9900px; 405 | border: 1px #5292f7 solid; 406 | padding: 0 2px; 407 | margin: 0; 408 | resize: none; 409 | overflow: hidden; 410 | white-space: pre-wrap; 411 | outline: none; 412 | -webkit-box-shadow: 0 2px 5px rgb(0 0 0 / 40%); 413 | -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); 414 | box-shadow: 0 2px 5px rgb(0 0 0 / 40%); 415 | word-wrap: break-word; 416 | background-color: rgb(255, 255, 255); 417 | font-size: 13px; 418 | right: auto; 419 | overflow-y: auto; 420 | box-sizing: border-box; 421 | } 422 | 423 | .luckysheet-cell-input { 424 | width: 100%; 425 | margin: 0; 426 | outline: none; 427 | cursor: text; 428 | white-space: pre-wrap; 429 | } 430 | 431 | .luckysheet-formula-text-color { 432 | color: black; 433 | } 434 | 435 | .luckysheet-formula-text-string { 436 | color: forestgreen; 437 | } 438 | 439 | .luckysheet-cell-flow { 440 | margin: 0; 441 | padding: 0; 442 | border: none 0; 443 | position: relative; 444 | touch-action: manipulation; 445 | } 446 | 447 | .luckysheet-cell-flow-clip { 448 | border-collapse: collapse; 449 | cursor: default; 450 | width: 5000000px; 451 | touch-action: manipulation; 452 | overflow: hidden; 453 | } 454 | 455 | .luckysheet-cell-flow-col { 456 | margin: 0; 457 | padding: 0; 458 | border: none 0; 459 | position: relative; 460 | touch-action: manipulation; 461 | overflow: hidden; 462 | float: left; 463 | direction: ltr; 464 | } 465 | 466 | .luckysheet-cell-sheettable { 467 | position: relative; 468 | /*background-color: #fff;*/ 469 | text-align: left; 470 | font-size: 11pt; 471 | color: #000000; 472 | text-decoration: none; 473 | } 474 | 475 | .luckysheet-bottom-controll-row { 476 | position: absolute; 477 | height: 30px; 478 | /*width: 400px;*/ 479 | /* background: #000; */ 480 | bottom: 38px; 481 | left: 0px; 482 | z-index: 1000; 483 | } 484 | 485 | #luckysheet-bottom-add-row { 486 | padding: 5px 20px; 487 | margin-right: 5px; 488 | margin-top: -2px; 489 | } 490 | 491 | #luckysheet-bottom-add-row-input { 492 | width: 40px; 493 | min-width: 40px; 494 | } 495 | 496 | #luckysheet-bottom-return-top { 497 | padding: 5px 6px; 498 | margin-left: 10px; 499 | margin-top: -2px; 500 | } 501 | 502 | .luckysheet-cell-flow-column { 503 | position: absolute; 504 | height: inherit; 505 | width: inherit; 506 | top: 0; 507 | left: 0; 508 | z-index: 1; 509 | touch-action: manipulation; 510 | } 511 | 512 | .luckysheet-cell-flow-column-line { 513 | position: absolute; 514 | border-right: 1px solid #d4d4d4; 515 | height: inherit; 516 | } 517 | 518 | .luckysheet-cell-flow-row { 519 | text-align: left; 520 | position: absolute; 521 | height: inherit; 522 | width: inherit; 523 | top: 0; 524 | left: 0; 525 | z-index: 1; 526 | touch-action: manipulation; 527 | } 528 | 529 | .luckysheet-cell-flow-row-line { 530 | position: absolute; 531 | border-bottom: 1px solid #d4d4d4; 532 | width: inherit; 533 | } 534 | 535 | .fortune-cols-change-size, 536 | .fortune-rows-change-size, 537 | .fortune-change-size-line, 538 | .fortune-cols-freeze-handle, 539 | .fortune-rows-freeze-handle, 540 | .fortune-freeze-drag-line { 541 | /*display: none;*/ 542 | -webkit-user-drag: none; 543 | -webkit-user-select: none; 544 | -moz-user-select: none; 545 | -ms-user-select: none; 546 | user-select: none; 547 | position: absolute; 548 | z-index: 12; 549 | } 550 | 551 | .fortune-cols-change-size { 552 | width: 5px; 553 | height: 100%; 554 | background: #0188fb; 555 | cursor: ew-resize; 556 | opacity: 0; 557 | } 558 | 559 | .fortune-rows-change-size { 560 | width: 100%; 561 | height: 5px; 562 | background: #0188fb; 563 | cursor: ns-resize; 564 | opacity: 0; 565 | } 566 | 567 | .fortune-change-size-line { 568 | border-color: #0188fb; 569 | border-style: solid; 570 | z-index: 15; 571 | cursor: ew-resize; 572 | } 573 | 574 | .fortune-cols-freeze-handle { 575 | position: absolute; 576 | left: 0; 577 | width: 3px; 578 | height: 100%; 579 | background-color: #ddd; 580 | cursor: grab; 581 | z-index: 20; 582 | } 583 | 584 | .fortune-rows-freeze-handle { 585 | position: absolute; 586 | top: 0; 587 | height: 3px; 588 | width: 100%; 589 | background-color: #ddd; 590 | cursor: grab; 591 | z-index: 20; 592 | } 593 | 594 | .fortune-freeze-drag-line { 595 | border-color: #ccc; 596 | border-style: solid; 597 | z-index: 15; 598 | cursor: ew-resize; 599 | } 600 | 601 | /*批注聚焦框 移动 改变大小*/ 602 | .luckysheet-postil-dialog-move { 603 | position: absolute; 604 | margin: 0px; 605 | padding: 0px; 606 | top: 0; 607 | left: 0; 608 | bottom: 0; 609 | right: 0; 610 | pointer-events: none; 611 | } 612 | 613 | .luckysheet-postil-dialog-move .luckysheet-postil-dialog-move-item { 614 | /*background: #000;*/ 615 | position: absolute; 616 | pointer-events: all; 617 | cursor: move; 618 | } 619 | 620 | .luckysheet-postil-dialog-move .luckysheet-postil-dialog-move-item-t { 621 | width: 100%; 622 | height: 3px; 623 | /* border-bottom: 1px solid #000; */ 624 | left: 0; 625 | top: -4px; 626 | } 627 | 628 | .luckysheet-postil-dialog-move .luckysheet-postil-dialog-move-item-r { 629 | width: 3px; 630 | height: 100%; 631 | /* border-left: 1px solid #000; */ 632 | right: -4px; 633 | top: 0; 634 | } 635 | 636 | .luckysheet-postil-dialog-move .luckysheet-postil-dialog-move-item-b { 637 | width: 100%; 638 | height: 3px; 639 | /* border-top: 1px solid #000; */ 640 | left: 0; 641 | bottom: -4px; 642 | } 643 | 644 | .luckysheet-postil-dialog-move .luckysheet-postil-dialog-move-item-l { 645 | width: 3px; 646 | height: 100%; 647 | /* border-right: 1px solid #000; */ 648 | left: -4px; 649 | top: 0; 650 | } 651 | 652 | .luckysheet-postil-show-active 653 | .luckysheet-postil-dialog-move 654 | .luckysheet-postil-dialog-move-item { 655 | border-color: #0188fb; 656 | } 657 | 658 | .luckysheet-postil-dialog-resize { 659 | position: absolute; 660 | margin: 0px; 661 | padding: 0px; 662 | top: -2px; 663 | left: -2px; 664 | bottom: -2px; 665 | right: -2px; 666 | pointer-events: none; 667 | } 668 | 669 | .luckysheet-postil-dialog-resize .luckysheet-postil-dialog-resize-item { 670 | position: absolute; 671 | height: 6px; 672 | width: 6px; 673 | border: 1px solid #0188fb; 674 | pointer-events: all; 675 | } 676 | 677 | .luckysheet-postil-dialog-resize .luckysheet-postil-dialog-resize-item-lt { 678 | left: -6px; 679 | top: -6px; 680 | cursor: nw-resize; 681 | } 682 | 683 | .luckysheet-postil-dialog-resize .luckysheet-postil-dialog-resize-item-mt { 684 | left: 50%; 685 | top: -6px; 686 | margin-left: -4px; 687 | cursor: n-resize; 688 | } 689 | 690 | .luckysheet-postil-dialog-resize .luckysheet-postil-dialog-resize-item-lm { 691 | top: 50%; 692 | left: -6px; 693 | margin-top: -4px; 694 | cursor: w-resize; 695 | } 696 | 697 | .luckysheet-postil-dialog-resize .luckysheet-postil-dialog-resize-item-rm { 698 | top: 50%; 699 | right: -6px; 700 | margin-top: -4px; 701 | cursor: e-resize; 702 | } 703 | 704 | .luckysheet-postil-dialog-resize .luckysheet-postil-dialog-resize-item-rt { 705 | right: -6px; 706 | top: -6px; 707 | cursor: ne-resize; 708 | } 709 | 710 | .luckysheet-postil-dialog-resize .luckysheet-postil-dialog-resize-item-lb { 711 | left: -6px; 712 | bottom: -6px; 713 | cursor: sw-resize; 714 | } 715 | 716 | .luckysheet-postil-dialog-resize .luckysheet-postil-dialog-resize-item-mb { 717 | left: 50%; 718 | bottom: -6px; 719 | margin-left: -4px; 720 | cursor: s-resize; 721 | } 722 | 723 | .luckysheet-postil-dialog-resize .luckysheet-postil-dialog-resize-item-rb { 724 | right: -6px; 725 | bottom: -6px; 726 | cursor: se-resize; 727 | } 728 | 729 | .fortune-selection-copy-top { 730 | left: 0; 731 | right: 0; 732 | height: 2px; 733 | top: 0; 734 | background-position: bottom; 735 | /* background-image: url("EwaAntH.gif"); */ 736 | } 737 | 738 | .fortune-selection-copy-right { 739 | top: 0; 740 | bottom: 0; 741 | width: 2px; 742 | right: 0; 743 | /* background-image: url("EwaAntV.gif"); */ 744 | } 745 | 746 | .fortune-selection-copy-bottom { 747 | left: 0; 748 | right: 0; 749 | height: 2px; 750 | bottom: 0; 751 | /* background-image: url("EwaAntH.gif"); */ 752 | } 753 | 754 | .fortune-selection-copy-left { 755 | top: 0; 756 | bottom: 0; 757 | width: 2px; 758 | left: 0; 759 | background-position: right; 760 | /* background-image: url("EwaAntV.gif"); */ 761 | } 762 | 763 | .fortune-selection-copy-hc { 764 | position: absolute; 765 | top: 0; 766 | right: 0; 767 | bottom: 0; 768 | left: 0; 769 | border: 2px dashed #12a5ff; 770 | z-index: 8; 771 | } 772 | 773 | .luckysheet-modal-dialog-resize { 774 | position: absolute; 775 | border: 2px solid #0188fb; 776 | margin: 0px; 777 | padding: 0px; 778 | top: -2px; 779 | left: -2px; 780 | bottom: -2px; 781 | right: -2px; 782 | pointer-events: none; 783 | } 784 | 785 | .luckysheet-modal-dialog-resize-item { 786 | position: absolute; 787 | height: 6px; 788 | width: 6px; 789 | background: #ffffff; 790 | border: 2px solid #0188fb; 791 | pointer-events: all; 792 | border-radius: 6px; 793 | } 794 | 795 | .luckysheet-modal-dialog-resize-item-lt { 796 | left: -6px; 797 | top: -6px; 798 | cursor: se-resize; 799 | } 800 | 801 | .luckysheet-modal-dialog-resize-item-mt { 802 | left: 50%; 803 | top: -6px; 804 | margin-left: -4px; 805 | cursor: s-resize; 806 | } 807 | 808 | .luckysheet-modal-dialog-resize-item-rt { 809 | right: -6px; 810 | top: -6px; 811 | cursor: ne-resize; 812 | } 813 | 814 | .luckysheet-modal-dialog-resize-item-lm { 815 | top: 50%; 816 | left: -6px; 817 | margin-top: -4px; 818 | cursor: w-resize; 819 | } 820 | 821 | .luckysheet-modal-dialog-resize-item-rm { 822 | top: 50%; 823 | right: -6px; 824 | margin-top: -4px; 825 | cursor: w-resize; 826 | } 827 | 828 | .luckysheet-modal-dialog-resize-item-lb { 829 | left: -6px; 830 | bottom: -6px; 831 | cursor: ne-resize; 832 | } 833 | 834 | .luckysheet-modal-dialog-resize-item-mb { 835 | left: 50%; 836 | bottom: -6px; 837 | margin-left: -4px; 838 | cursor: s-resize; 839 | } 840 | 841 | .luckysheet-modal-dialog-resize-item-rb { 842 | right: -6px; 843 | bottom: -6px; 844 | cursor: se-resize; 845 | } 846 | 847 | .fortune-formula-functionrange-highlight .fortune-copy { 848 | background-image: none; 849 | background: #0188fb; 850 | position: absolute; 851 | z-index: 18; 852 | cursor: move; 853 | opacity: 0.9; 854 | box-sizing: content-box; 855 | /*border: 1px solid #fff;*/ 856 | } 857 | 858 | .fortune-formula-functionrange-highlight .fortune-selection-copy-top { 859 | top: -2px; 860 | border-top: 2px solid #fff; 861 | border-bottom: 2px solid #fff; 862 | } 863 | 864 | .fortune-formula-functionrange-highlight .fortune-selection-copy-right { 865 | right: -2px; 866 | border-left: 2px solid #fff; 867 | border-right: 2px solid #fff; 868 | } 869 | 870 | .fortune-formula-functionrange-highlight .fortune-selection-copy-bottom { 871 | bottom: -2px; 872 | border-top: 2px solid #fff; 873 | border-bottom: 2px solid #fff; 874 | } 875 | 876 | .fortune-formula-functionrange-highlight .fortune-selection-copy-left { 877 | left: -2px; 878 | border-left: 2px solid #fff; 879 | border-right: 2px solid #fff; 880 | } 881 | 882 | .fortune-formula-functionrange-highlight .fortune-selection-copy-hc { 883 | border: 2px solid #5e5e5e; 884 | opacity: 0.03; 885 | z-index: initial; 886 | } 887 | 888 | .fortune-selection-highlight-lt { 889 | left: -3px; 890 | top: -3px; 891 | cursor: se-resize; 892 | } 893 | 894 | .fortune-selection-highlight-rt { 895 | right: -3px; 896 | top: -3px; 897 | cursor: ne-resize; 898 | } 899 | 900 | .fortune-selection-highlight-lb { 901 | left: -3px; 902 | bottom: -3px; 903 | cursor: ne-resize; 904 | } 905 | 906 | .fortune-selection-highlight-rb { 907 | right: -3px; 908 | bottom: -3px; 909 | cursor: se-resize; 910 | } 911 | 912 | .fortune-formula-functionrange-highlight .luckysheet-highlight { 913 | position: absolute; 914 | z-index: 19; 915 | border: 1px solid #fff; 916 | background: #0188fb; 917 | width: 6px; 918 | height: 6px; 919 | } 920 | 921 | .fortune-presence-username { 922 | position: absolute; 923 | padding-left: 6px; 924 | padding-right: 6px; 925 | padding-top: 2px; 926 | padding-bottom: 2px; 927 | left: -2px; 928 | font-size: 12px; 929 | white-space: nowrap; 930 | overflow: hidden; 931 | text-overflow: ellipsis; 932 | box-sizing: content-box; 933 | color: #fff; 934 | } 935 | 936 | .fortune-presence-selection { 937 | position: absolute; 938 | border-style: solid; 939 | border-width: 1; 940 | opacity: 0.7; 941 | } 942 | 943 | .luckysheet-filter-options { 944 | color: #897bff; 945 | cursor: pointer; 946 | position: absolute; 947 | z-index: 200; 948 | border: 1px solid #897bff; 949 | border-radius: 3px; 950 | top: 3px; 951 | margin-left: 0px; 952 | display: "block"; 953 | padding: 0px 4px; 954 | font-size: 12px; 955 | height: 15px; 956 | background: #fff; 957 | } 958 | 959 | .luckysheet-filter-options:hover { 960 | color: #fff; 961 | border: 1px solid #fff; 962 | background: #897bff; 963 | } 964 | 965 | .luckysheet-filter-options-active { 966 | color: #fff; 967 | border: 1px solid #897bff; 968 | padding: 0px 1px; 969 | background: #897bff; 970 | } 971 | 972 | .caret { 973 | margin-top: 6px; 974 | width: 0; 975 | height: 0; 976 | display: inline-block; 977 | border: 4px solid transparent; 978 | } 979 | 980 | .caret.down { 981 | border-top-color: #897bff; 982 | } 983 | 984 | .luckysheet-filter-options:hover .caret.down { 985 | border-top-color: #ffffff; 986 | } 987 | 988 | .luckysheet-filter-selected { 989 | background: #ffffff00; 990 | } 991 | 992 | #luckysheet-dataVerification-showHintBox { 993 | display: none; 994 | padding: 10px; 995 | background-color: #ffffff; 996 | border: 1px solid #ccc; 997 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 998 | position: absolute; 999 | z-index: 1000; 1000 | -webkit-user-select: none; 1001 | -moz-user-select: none; 1002 | -ms-user-select: none; 1003 | user-select: none; 1004 | cursor: default; 1005 | white-space: nowrap; 1006 | font-size: 12px; 1007 | } 1008 | 1009 | #luckysheet-dataVerification-dropdown-btn { 1010 | display: none; 1011 | width: 20px; 1012 | height: 20px; 1013 | background-color: #ffffff; 1014 | position: absolute; 1015 | z-index: 10; 1016 | overflow: hidden; 1017 | } 1018 | 1019 | .luckysheet-formula-search-c { 1020 | position: absolute; 1021 | border: 1px solid rgba(0, 0, 0, 0.2); 1022 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 1023 | color: #535353; 1024 | font-size: 12px; 1025 | background: #fff; 1026 | z-index: 1003; 1027 | width: 300px; 1028 | } 1029 | 1030 | .luckysheet-formula-search-c .luckysheet-formula-search-item { 1031 | background: #fff; 1032 | padding: 5px 10px; 1033 | cursor: pointer; 1034 | } 1035 | 1036 | .luckysheet-formula-search-c 1037 | .luckysheet-formula-search-item 1038 | .luckysheet-formula-search-detail { 1039 | display: none; 1040 | color: #444; 1041 | } 1042 | 1043 | .luckysheet-formula-search-c 1044 | .luckysheet-formula-search-item 1045 | .luckysheet-formula-search-func { 1046 | color: #222; 1047 | font-size: 14px; 1048 | } 1049 | 1050 | .luckysheet-formula-search-c .luckysheet-formula-search-item-active { 1051 | display: block; 1052 | border-top: 1px solid #ebebeb; 1053 | border-bottom: 1px solid #ebebeb; 1054 | background: #f5f5f5; 1055 | } 1056 | 1057 | .luckysheet-formula-search-c 1058 | .luckysheet-formula-search-item-active 1059 | .luckysheet-formula-search-detail { 1060 | display: block; 1061 | } 1062 | 1063 | .luckysheet-formula-help-c { 1064 | position: absolute; 1065 | border: 1px solid rgba(0, 0, 0, 0.2); 1066 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 1067 | color: #535353; 1068 | font-size: 12px; 1069 | background: #fff; 1070 | z-index: 1003; 1071 | width: 300px; 1072 | } 1073 | 1074 | .luckysheet-formula-help-c .luckysheet-formula-help-content { 1075 | max-height: 300px; 1076 | overflow-y: scroll; 1077 | } 1078 | 1079 | .luckysheet-formula-help-content-example { 1080 | margin-top: 5px; 1081 | } 1082 | 1083 | .luckysheet-formula-help-title { 1084 | display: block; 1085 | border-top: 1px solid #ebebeb; 1086 | border-bottom: 1px solid #ebebeb; 1087 | background: #f5f5f5; 1088 | padding: 2px 10px; 1089 | font-size: 14px; 1090 | } 1091 | 1092 | .luckysheet-formula-help-title-formula { 1093 | width: 250px; 1094 | word-break: break-word; 1095 | } 1096 | 1097 | .luckysheet-arguments-help-section { 1098 | margin-top: 5px; 1099 | margin-bottom: 5px; 1100 | color: #222; 1101 | } 1102 | 1103 | .luckysheet-arguments-help-section-title { 1104 | padding: 1px 10px; 1105 | color: #666; 1106 | } 1107 | 1108 | .luckysheet-arguments-help-parameter-content { 1109 | padding: 1px 10px; 1110 | display: inline-block; 1111 | word-wrap: break-word; 1112 | } 1113 | 1114 | .luckysheet-arguments-help-formula { 1115 | padding: 1px 10px; 1116 | font-size: 14px; 1117 | } 1118 | 1119 | .luckysheet-arguments-help-parameter-active { 1120 | background-color: #fff9b2; 1121 | } 1122 | 1123 | .luckysheet-formula-help-collapse { 1124 | position: absolute; 1125 | top: 0px; 1126 | right: 25px; 1127 | font-size: 16px; 1128 | cursor: pointer; 1129 | color: #bbb; 1130 | } 1131 | 1132 | .luckysheet-formula-help-close { 1133 | position: absolute; 1134 | top: 0px; 1135 | right: 5px; 1136 | font-size: 16px; 1137 | cursor: pointer; 1138 | color: #bbb; 1139 | } 1140 | 1141 | .luckysheet-formula-help-close:hover, 1142 | .luckysheet-formula-help-collapse:hover { 1143 | color: #555; 1144 | } 1145 | 1146 | .luckysheet-scrollbar-ltr { 1147 | position: absolute; 1148 | overflow: hidden; 1149 | z-index: 1003; 1150 | } 1151 | 1152 | .luckysheet-scrollbar-ltr div { 1153 | height: 1px; 1154 | width: 1px; 1155 | } 1156 | 1157 | .luckysheet-scrollbar-x { 1158 | bottom: 0px; 1159 | overflow-x: scroll; 1160 | } 1161 | 1162 | .luckysheet-scrollbar-y { 1163 | right: 0px; 1164 | top: 0px; 1165 | overflow-y: scroll; 1166 | } 1167 | 1168 | .luckysheet-scrollbar-ltr::-webkit-scrollbar { 1169 | background-color: transparent; 1170 | width: 8px; 1171 | height: 8px; 1172 | } 1173 | 1174 | .luckysheet-scrollbar-ltr::-webkit-scrollbar-track { 1175 | background-color: transparent; 1176 | } 1177 | 1178 | .luckysheet-scrollbar-ltr::-webkit-scrollbar-thumb { 1179 | background-color: #babac0; 1180 | border-radius: 16px; 1181 | } 1182 | 1183 | .luckysheet-scrollbar-ltr::-webkit-scrollbar-button { 1184 | display: none; 1185 | } 1186 | 1187 | .fortune-dialog { 1188 | max-width: 90%; 1189 | max-height: 90%; 1190 | overflow: scroll; 1191 | border-radius: 6px; 1192 | background: white; 1193 | box-shadow: rgb(0 0 0 / 10%) 5px 5px 30px; 1194 | box-sizing: border-box; 1195 | overflow: auto; 1196 | } 1197 | 1198 | .fortune-dialog-box-button-container { 1199 | display: flex; 1200 | align-items: center; 1201 | justify-content: center; 1202 | } 1203 | 1204 | .fortune-dialog-box-content { 1205 | padding: 0px 25px; 1206 | } 1207 | 1208 | .fortune-dialog-box-button-container { 1209 | padding-top: 10px; 1210 | padding-bottom: 20px; 1211 | } 1212 | 1213 | .fortune-message-box-button { 1214 | display: inline-flex; 1215 | align-items: center; 1216 | padding: 6px 12px; 1217 | margin: 0 8px; 1218 | border: none; 1219 | border-radius: 4px; 1220 | font-size: 14px; 1221 | line-height: 20px; 1222 | outline: none; 1223 | cursor: pointer; 1224 | } 1225 | 1226 | .fortune-message-box-button.button-default { 1227 | color: rgb(38, 42, 51); 1228 | background-color: rgb(255, 255, 255); 1229 | border: 1px solid rgb(235, 235, 235); 1230 | } 1231 | 1232 | .fortune-message-box-button.button-primary { 1233 | color: white; 1234 | background-color: #0188FB; 1235 | } 1236 | 1237 | .fortune-modal-dialog-header { 1238 | outline: 0; 1239 | display: flex; 1240 | justify-content: flex-end; 1241 | } 1242 | 1243 | .fortune-modal-dialog-icon-close { 1244 | color: #d4d4d4; 1245 | opacity: 0.3; 1246 | } 1247 | 1248 | .fortune-modal-dialog-icon-close:hover { 1249 | opacity: 0.7; 1250 | } 1251 | /*查找替换弹出框样式*/ 1252 | #fortune-search-replace { 1253 | position: absolute; 1254 | padding: 30px 42px; 1255 | z-index: 1002; 1256 | } 1257 | 1258 | #fortune-search-replace .icon-close { 1259 | position: absolute; 1260 | right: 3px; 1261 | top: 3px; 1262 | } 1263 | 1264 | #fortune-search-replace .tabBox { 1265 | margin-top: 10px; 1266 | font-size: 0; 1267 | } 1268 | 1269 | #fortune-search-replace .tabBox span { 1270 | display: inline-block; 1271 | text-align: center; 1272 | width: 100px; 1273 | border: 1px solid rgb(235, 235, 235); 1274 | font-size: 14px; 1275 | line-height: 2; 1276 | } 1277 | 1278 | #fortune-search-replace .tabBox span.on { 1279 | background-color: #8C89FE; 1280 | border-color: #726EFE; 1281 | color: #fff; 1282 | } 1283 | 1284 | #fortune-search-replace .ctBox { 1285 | padding: 5px 10px; 1286 | border: 1px solid rgb(235, 235, 235); 1287 | font-size: 14px; 1288 | min-width: 500px; 1289 | } 1290 | 1291 | #fortune-search-replace .ctBox .row { 1292 | display: flex; 1293 | flex-direction: row; 1294 | justify-content: space-between; 1295 | } 1296 | 1297 | #fortune-search-replace .inputBox { 1298 | height: 90px; 1299 | position: relative; 1300 | } 1301 | 1302 | #fortune-search-replace .inputBox .textboxs { 1303 | height: 30px; 1304 | line-height: 30px; 1305 | } 1306 | 1307 | #fortune-search-replace .checkboxs { 1308 | height: 90px; 1309 | } 1310 | 1311 | #fortune-search-replace .checkboxs div { 1312 | height: 30px; 1313 | line-height: 30px; 1314 | } 1315 | 1316 | #fortune-search-replace .checkboxs input[type="checkbox"] { 1317 | float: left; 1318 | margin-top: 9px; 1319 | } 1320 | 1321 | #fortune-search-replace .btnBox { 1322 | margin-top: 10px; 1323 | } 1324 | 1325 | #fortune-search-replace .btnBox .button-default { 1326 | margin-right: 8px; 1327 | margin-left: 0px; 1328 | } 1329 | 1330 | #fortune-search-replace .close-button { 1331 | margin-left: 0px; 1332 | margin-top: 10px; 1333 | } 1334 | 1335 | #fortune-search-replace #searchAllbox { 1336 | height: 210px; 1337 | border: 1px solid #d4d4d4; 1338 | margin-top: 10px; 1339 | overflow-y: auto; 1340 | position: relative; 1341 | } 1342 | 1343 | #fortune-search-replace #searchAllbox .boxTitle { 1344 | width: 100%; 1345 | height: 30px; 1346 | line-height: 29px; 1347 | padding: 0 5px; 1348 | background-color: #fff; 1349 | border-bottom: 1px solid #d4d4d4; 1350 | box-sizing: border-box; 1351 | position: sticky; 1352 | left: 0; 1353 | top: 0; 1354 | } 1355 | 1356 | #fortune-search-replace #searchAllbox .boxTitle span { 1357 | display: inline-block; 1358 | text-align: center; 1359 | } 1360 | 1361 | #fortune-search-replace #searchAllbox .boxTitle span:nth-of-type(1) { 1362 | width: 25%; 1363 | } 1364 | 1365 | #fortune-search-replace #searchAllbox .boxTitle span:nth-of-type(2) { 1366 | width: 25%; 1367 | } 1368 | 1369 | #fortune-search-replace #searchAllbox .boxTitle span:nth-of-type(3) { 1370 | width: 50%; 1371 | } 1372 | 1373 | #fortune-search-replace #searchAllbox .boxMain .boxItem { 1374 | height: 30px; 1375 | line-height: 29px; 1376 | border-bottom: 1px solid #d4d4d4; 1377 | padding: 0 5px; 1378 | box-sizing: border-box; 1379 | } 1380 | 1381 | #fortune-search-replace #searchAllbox .boxMain .boxItem.on { 1382 | background-color: #8C89FE; 1383 | color: #fff; 1384 | } 1385 | 1386 | #fortune-search-replace #searchAllbox .boxMain .boxItem span { 1387 | display: block; 1388 | text-align: center; 1389 | float: left; 1390 | } 1391 | 1392 | #fortune-search-replace #searchAllbox .boxMain .boxItem span:nth-of-type(1) { 1393 | width: 25%; 1394 | overflow: hidden; 1395 | text-overflow: ellipsis; 1396 | white-space: nowrap; 1397 | } 1398 | 1399 | #fortune-search-replace #searchAllbox .boxMain .boxItem span:nth-of-type(2) { 1400 | width: 25%; 1401 | overflow: hidden; 1402 | text-overflow: ellipsis; 1403 | white-space: nowrap; 1404 | } 1405 | 1406 | #fortune-search-replace #searchAllbox .boxMain .boxItem span:nth-of-type(3) { 1407 | width: 50%; 1408 | overflow: hidden; 1409 | text-overflow: ellipsis; 1410 | white-space: nowrap; 1411 | } 1412 | .fortune-link-modify-modal { 1413 | position: absolute; 1414 | overflow: hidden; 1415 | background-color: #fff; 1416 | z-index: 300; 1417 | padding: 6px 20px 10px 20px; 1418 | box-shadow: 0 2px 6px 0 rgb(0 0 0 / 16%); 1419 | border: solid 0.5px #e5e5e5; 1420 | border-radius: 6px; 1421 | } 1422 | 1423 | .fortune-link-modify-modal.link-toolbar { 1424 | display: flex; 1425 | flex-direction: row; 1426 | padding: 2px 8px 2px 16px; 1427 | align-items: center; 1428 | } 1429 | 1430 | 1431 | .fortune-link-modify-modal .link-content { 1432 | margin-right: 6px; 1433 | } 1434 | 1435 | .fortune-link-modify-modal .link-content:hover { 1436 | color: #2674fb; 1437 | cursor: pointer; 1438 | } 1439 | 1440 | .fortune-link-modify-modal .divider { 1441 | width: 1px; 1442 | height: 16px; 1443 | margin: 0px 6px ; 1444 | background-color: #e0e0e0; 1445 | flex-shrink: 0; 1446 | } 1447 | 1448 | .fortune-link-modify-modal .fortune-toolbar-button { 1449 | padding: 6px; 1450 | } 1451 | 1452 | .fortune-link-modify-modal .fortune-toolbar-button:hover { 1453 | background-color: rgba(0, 0, 0, 0.06); 1454 | cursor: pointer; 1455 | } 1456 | 1457 | .fortune-link-modify-modal.range-selection-modal { 1458 | width: 380px; 1459 | padding: 22px; 1460 | -webkit-user-select: auto; 1461 | -moz-user-select: auto; 1462 | -ms-user-select: auto; 1463 | user-select: auto; 1464 | background-color: #fff; 1465 | } 1466 | 1467 | .fortune-link-modify-line { 1468 | padding-top: 10px; 1469 | } 1470 | 1471 | .fortune-link-modify-title { 1472 | font-size: 12px; 1473 | display: inline-block; 1474 | height: 16px; 1475 | width: 74px; 1476 | line-height: 16px; 1477 | padding: 7px 0; 1478 | color: #333333; 1479 | margin-right: 6px; 1480 | } 1481 | 1482 | .fortune-link-modify-input, 1483 | .fortune-link-modify-select { 1484 | width: 232px; 1485 | box-sizing: border-box; 1486 | height: 26px; 1487 | border-radius: 5px; 1488 | border: 1px solid #d9d9d9; 1489 | font-size: 12px; 1490 | padding: 1px 8px; 1491 | outline: none; 1492 | -webkit-user-select: auto; 1493 | -moz-user-select: auto; 1494 | -ms-user-select: auto; 1495 | user-select: auto; 1496 | } 1497 | 1498 | .fortune-link-modify-input:focus, 1499 | .fortune-link-modify-modal .range-selection-input:focus { 1500 | border-color: #4d90fe; 1501 | } 1502 | 1503 | .fortune-link-modify-input.error-input, 1504 | .fortune-link-modify-modal .range-selection-input.error-input { 1505 | border: 1px solid #EF4E2F !important; 1506 | } 1507 | 1508 | .fortune-link-modify-cell-selector { 1509 | width: 20px; 1510 | right: 24px; 1511 | padding: 4px; 1512 | position: absolute; 1513 | display: inline-block; 1514 | border: none; 1515 | cursor: pointer; 1516 | -webkit-appearance: none; 1517 | -moz-appearance: none; 1518 | appearance: none; 1519 | } 1520 | 1521 | .fortune-link-modify-modal .modal-title { 1522 | font-weight: 500; 1523 | font-size: 16px; 1524 | color: rgba(0, 0, 0, .88); 1525 | margin-bottom: 12px; 1526 | line-height: 24px; 1527 | } 1528 | 1529 | .fortune-link-modify-modal .range-selection-input { 1530 | display: block; 1531 | outline: none; 1532 | font-size: 14px; 1533 | height: 32px; 1534 | width: 100%; 1535 | -webkit-box-sizing: border-box; 1536 | box-sizing: border-box; 1537 | padding: 7px 11px; 1538 | border: 1px solid #e0e0e0; 1539 | border-radius: 4px; 1540 | -webkit-appearance: none; 1541 | -moz-appearance: none; 1542 | appearance: none; 1543 | margin: 0; 1544 | } 1545 | 1546 | .fortune-link-modify-modal .modal-icon-close { 1547 | position: absolute; 1548 | right: 22px; 1549 | top: 22px; 1550 | cursor: pointer; 1551 | } 1552 | 1553 | .fortune-link-modify-modal .validation-input-tip { 1554 | height: 17px; 1555 | font-size: 12px; 1556 | color: #EF4E2F; 1557 | margin: 3px 0px ; 1558 | } 1559 | 1560 | .fortune-link-modify-modal .button-group { 1561 | display: flex; 1562 | } 1563 | 1564 | .fortune-link-modify-modal .modal-footer { 1565 | display: flex; 1566 | justify-content: flex-end; 1567 | padding: 0px 0px 5px 0px; 1568 | } 1569 | 1570 | .fortune-link-modify-modal.range-selection-modal .modal-footer { 1571 | padding: 0px; 1572 | } 1573 | 1574 | .fortune-link-modify-modal .button-basic { 1575 | display: flex; 1576 | flex-flow: row nowrap; 1577 | justify-content: center; 1578 | align-items: center; 1579 | font-size: 14px; 1580 | height: 32px; 1581 | width: 88px; 1582 | padding: 0; 1583 | border-radius: 4px; 1584 | cursor: pointer; 1585 | } 1586 | 1587 | .fortune-link-modify-modal .button-default { 1588 | color: rgb(38, 42, 51); 1589 | background-color: rgb(255, 255, 255); 1590 | border: 1px solid rgb(235, 235, 235); 1591 | } 1592 | 1593 | .fortune-link-modify-modal .button-primary { 1594 | color: white; 1595 | background-color: #0188FB; 1596 | margin-left: 14px; 1597 | } 1598 | #fortune-data-verification { 1599 | min-width: 500px; 1600 | padding: 10px 0px; 1601 | -webkit-user-select: none; 1602 | -moz-user-select: none; 1603 | -ms-user-select: none; 1604 | user-select: none; 1605 | } 1606 | 1607 | #fortune-data-verification .title { 1608 | font-size: 16px; 1609 | } 1610 | 1611 | #fortune-data-verification .box { 1612 | font-size: 14px; 1613 | } 1614 | 1615 | #fortune-data-verification .box .box-item { 1616 | padding: 10px; 1617 | border-bottom: 1px solid #E1E4E8; 1618 | } 1619 | 1620 | #fortune-data-verification .box .box-item .box-item-title { 1621 | font-size: 14px; 1622 | font-weight: 600; 1623 | margin-bottom: 10px; 1624 | } 1625 | 1626 | #fortune-data-verification .box .box-item .data-verification-range { 1627 | width: 100%; 1628 | height: 30px; 1629 | border: 1px solid #d4d4d4; 1630 | } 1631 | 1632 | #fortune-data-verification .box .box-item .show-box-item { 1633 | margin-top: 6px; 1634 | font-size: 12px; 1635 | } 1636 | 1637 | #fortune-data-verification .box .box-item .show-box-item .check-box { 1638 | height: 30px; 1639 | line-height: 30px; 1640 | margin-bottom: 10px; 1641 | 1642 | } 1643 | 1644 | #fortune-data-verification .box .box-item .show-box-item .check-box input { 1645 | height: 30px; 1646 | padding: 0 10px; 1647 | border: 1px solid #d4d4d4; 1648 | box-sizing: border-box; 1649 | } 1650 | 1651 | #fortune-data-verification .input-box input { 1652 | height: 30px; 1653 | padding: 4px 10px 4px 10px; 1654 | border: 1px solid #d4d4d4; 1655 | box-sizing: border-box; 1656 | margin-top: 6px; 1657 | } 1658 | 1659 | #fortune-data-verification .input-box span { 1660 | margin: 0px 16px; 1661 | } 1662 | 1663 | .data-verification-range .formulaInputFocus { 1664 | width: calc(100% - 30px); 1665 | height: 30px; 1666 | padding: 0 10px px; 1667 | float: left; 1668 | border: none; 1669 | outline-style: none; 1670 | box-sizing: border-box; 1671 | } 1672 | 1673 | .data-verification-range .icon { 1674 | float: right; 1675 | margin-top: 4px; 1676 | margin-right: 5px; 1677 | cursor: pointer; 1678 | } 1679 | 1680 | #fortune-data-verification .box .box-item .data-verification-type-select { 1681 | width: 100%; 1682 | height: 30px; 1683 | border-color: #d4d4d4; 1684 | outline-style: none; 1685 | } 1686 | 1687 | #fortune-data-verification .box .box-item .check { 1688 | font-size: 12px; 1689 | line-height: 24px; 1690 | } 1691 | 1692 | #fortune-data-verification .box .box-item .check input { 1693 | vertical-align: text-top; 1694 | } 1695 | 1696 | #fortune-data-verification .button-basic { 1697 | display: inline-block; 1698 | margin-bottom: 0; 1699 | font-weight: 400; 1700 | text-align: center; 1701 | vertical-align: middle; 1702 | touch-action: manipulation; 1703 | cursor: pointer; 1704 | white-space: nowrap; 1705 | padding: 4px 8px; 1706 | font-size: 14px; 1707 | line-height: 1.42857143; 1708 | border-radius: 2px; 1709 | -webkit-user-select: none; 1710 | -moz-user-select: none; 1711 | -ms-user-select: none; 1712 | user-select: none; 1713 | margin-top: 10px; 1714 | } 1715 | 1716 | #fortune-data-verification .button-primary { 1717 | background: #0188fb; 1718 | border: 1px solid #0188fb; 1719 | color: #fff; 1720 | margin-right: 10px; 1721 | } 1722 | 1723 | #fortune-data-verification .button-close { 1724 | color: #333; 1725 | background-color: #fff; 1726 | border: 1px solid #ccc; 1727 | margin-right: 10px; 1728 | } 1729 | 1730 | 1731 | #range-dialog { 1732 | box-shadow: 0 4px 16px rgb(0 0 0 / 20%); 1733 | background: #fff; 1734 | background-clip: padding-box; 1735 | border: 1px solid rgba(0, 0, 0, .333); 1736 | outline: 0; 1737 | position: absolute; 1738 | color: #000; 1739 | padding: 30px 42px; 1740 | z-index: 100003; 1741 | left: 50%; 1742 | top: 50%; 1743 | transform: translate(-50%, -90%); 1744 | -webkit-user-select: none; 1745 | -moz-user-select: none; 1746 | -ms-user-select: none; 1747 | user-select: none; 1748 | } 1749 | 1750 | #range-dialog .dialog-title { 1751 | background-color: #fff; 1752 | color: #000; 1753 | cursor: default; 1754 | font-size: 16px; 1755 | font-weight: normal; 1756 | line-height: 24px; 1757 | margin: 0 0 16px; 1758 | } 1759 | 1760 | #range-dialog input { 1761 | height: 30px; 1762 | padding: 0 10px; 1763 | border: 1px solid #d4d4d4; 1764 | outline-style: none; 1765 | -webkit-user-select: none; 1766 | -moz-user-select: none; 1767 | -ms-user-select: none; 1768 | user-select: none; 1769 | } 1770 | 1771 | #range-dialog .button-primary { 1772 | background: #0188fb; 1773 | border: 1px solid #0188fb; 1774 | color: #fff; 1775 | margin-right: 10px; 1776 | } 1777 | 1778 | #range-dialog .button-close { 1779 | color: #333; 1780 | background-color: #fff; 1781 | border: 1px solid #ccc; 1782 | margin-right: 10px; 1783 | } 1784 | 1785 | #luckysheet-dataVerification-dropdown-List { 1786 | background-color: #fff; 1787 | border: 1px solid #ccc; 1788 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 1789 | position: absolute; 1790 | z-index: 10000; 1791 | box-sizing: border-box; 1792 | font-size: 12px; 1793 | } 1794 | 1795 | #luckysheet-dataVerification-dropdown-List .dropdown-List-item { 1796 | padding: 5px 10px; 1797 | box-sizing: border-box; 1798 | cursor: pointer; 1799 | } 1800 | 1801 | #luckysheet-dataVerification-dropdown-List .dropdown-List-item:hover { 1802 | background-color: #E1E1E1; 1803 | } 1804 | .condition-format-sub-menu { 1805 | position: absolute; 1806 | top: -8px; 1807 | box-shadow: 0 2px 4px rgb(0 0 0 / 20%); 1808 | background: #fff; 1809 | border: 1px solid rgba(0, 0, 0, .2); 1810 | cursor: default; 1811 | font-size: 12px; 1812 | z-index: 1004; 1813 | box-sizing: border-box; 1814 | -webkit-user-select: none; 1815 | -moz-user-select: none; 1816 | -ms-user-select: none; 1817 | user-select: none; 1818 | outline: none; 1819 | } 1820 | 1821 | .condition-format-item { 1822 | display: flex; 1823 | justify-content: space-between; 1824 | padding: 6px 18px; 1825 | z-index: 1005; 1826 | } 1827 | 1828 | .condition-format-item:hover { 1829 | background: #efefef; 1830 | } 1831 | 1832 | .condition-format-item span { 1833 | font-size: 10px; 1834 | color: #afafaf; 1835 | } 1836 | 1837 | .horizontal-line { 1838 | border-top: 1px solid #ebebeb; 1839 | margin-top: 6px; 1840 | margin-bottom: 6px; 1841 | } 1842 | 1843 | 1844 | 1845 | .condition-rules .button-basic { 1846 | display: inline-block; 1847 | margin-bottom: 0; 1848 | font-weight: 400; 1849 | text-align: center; 1850 | vertical-align: middle; 1851 | touch-action: manipulation; 1852 | cursor: pointer; 1853 | white-space: nowrap; 1854 | padding: 4px 8px; 1855 | font-size: 14px; 1856 | line-height: 1.42857143; 1857 | border-radius: 2px; 1858 | -webkit-user-select: none; 1859 | -moz-user-select: none; 1860 | -ms-user-select: none; 1861 | user-select: none; 1862 | margin-top: 10px; 1863 | } 1864 | 1865 | .condition-rules .button-primary { 1866 | background: #0188fb; 1867 | border: 1px solid #0188fb; 1868 | color: #fff; 1869 | margin-right: 10px; 1870 | } 1871 | 1872 | .condition-rules .button-close { 1873 | color: #333; 1874 | background-color: #fff; 1875 | border: 1px solid #ccc; 1876 | } 1877 | 1878 | .condition-rules { 1879 | padding: 0px 42px 34px 42px; 1880 | font-size: 12px; 1881 | } 1882 | 1883 | .condition-rules-title { 1884 | color: #000; 1885 | cursor: default; 1886 | font-size: 16px; 1887 | margin-bottom: 18px; 1888 | } 1889 | 1890 | .conditin-rules-value { 1891 | margin: 5px 0; 1892 | font-weight: 600; 1893 | } 1894 | 1895 | .condition-rules-inpbox { 1896 | width: 198px; 1897 | height: 28px; 1898 | border: 1px solid #d4d4d4; 1899 | } 1900 | 1901 | .condition-rules-input { 1902 | width: 150px; 1903 | height: 28px; 1904 | padding: 0 10px; 1905 | border: none; 1906 | outline-style: none; 1907 | float: left; 1908 | } 1909 | 1910 | .condition-relues-inputicon { 1911 | float: right; 1912 | margin-top: 2px; 1913 | margin-right: 5px; 1914 | cursor: pointer; 1915 | } 1916 | 1917 | .condition-rules-set-title { 1918 | margin: 6px 0px; 1919 | } 1920 | 1921 | .condition-rules-setbox { 1922 | border: 1px solid #d4d4d4; 1923 | } 1924 | 1925 | .condition-rules-set { 1926 | padding: 5px 10px; 1927 | } 1928 | 1929 | .condition-rules-color { 1930 | height: 30px; 1931 | line-height: 30px; 1932 | position: relative; 1933 | } 1934 | 1935 | .condition-rules-check { 1936 | float: left; 1937 | margin-top: 10px; 1938 | } 1939 | 1940 | .condition-rules-label { 1941 | display: inline-block; 1942 | width: 80px; 1943 | -webkit-user-select: none; 1944 | -moz-user-select: none; 1945 | -ms-user-select: none; 1946 | user-select: none; 1947 | } 1948 | 1949 | .condition-rules-select-color { 1950 | padding: 2px; 1951 | border: solid 1px #E5E5E5; 1952 | background: #F5F5F5; 1953 | position: absolute; 1954 | top: 50%; 1955 | left: 50%; 1956 | transform: translate(20%, -50%); 1957 | } 1958 | 1959 | .condition-rules-between-box { 1960 | display: flex; 1961 | align-items: center; 1962 | } 1963 | 1964 | .condition-rules-between-inpbox { 1965 | width: 108px; 1966 | height: 28px; 1967 | border: 1px solid #d4d4d4; 1968 | } 1969 | 1970 | .condition-rules-between-input { 1971 | width: 60px; 1972 | height: 28px; 1973 | padding: 0 10px; 1974 | border: none; 1975 | outline-style: none; 1976 | float: left; 1977 | } 1978 | 1979 | .condition-rules-date { 1980 | width: 98%; 1981 | border: none; 1982 | line-height: 26px; 1983 | } 1984 | 1985 | .condition-rules-select { 1986 | width: 150px; 1987 | height: 30px; 1988 | } 1989 | 1990 | .condition-rules-project-box { 1991 | display: flex; 1992 | align-items: center; 1993 | } 1994 | 1995 | .condition-rules-project-input { 1996 | margin: 0px 6px; 1997 | } 1998 | .fortune-toolbar { 1999 | display: flex; 2000 | flex-direction: row; 2001 | background: #fafafc; 2002 | position: relative; 2003 | padding: 5px 0px 3px 15px; 2004 | border-bottom: 1px solid #d4d4d4; 2005 | white-space: nowrap; 2006 | align-items: center; 2007 | } 2008 | 2009 | .fortune-toolbar-divider { 2010 | width: 1px; 2011 | height: 20px; 2012 | margin: 0 6px; 2013 | background-color: #e0e0e0; 2014 | flex-shrink: 0; 2015 | } 2016 | 2017 | .fortune-toolbar-menu-line { 2018 | display: flex; 2019 | align-items: center; 2020 | justify-content: space-between; 2021 | position: relative; 2022 | } 2023 | 2024 | .fortune-toolbar-menu-divider { 2025 | width: "100%"; 2026 | height: 1px; 2027 | margin: 2px 6px; 2028 | background-color: #e0e0e0; 2029 | } 2030 | 2031 | .fortune-toolbar-button, 2032 | .fortune-toolbar-combo { 2033 | -webkit-border-radius: 4px; 2034 | -moz-border-radius: 4px; 2035 | border-radius: 4px; 2036 | -webkit-user-select: none; 2037 | -moz-user-select: none; 2038 | -ms-user-select: none; 2039 | user-select: none; 2040 | background: 0; 2041 | outline: none; 2042 | padding: 0; 2043 | list-style: none; 2044 | text-decoration: none; 2045 | display: flex; 2046 | align-items: center; 2047 | padding: 2px; 2048 | margin: 2px 4px; 2049 | } 2050 | 2051 | .fortune-toolbar-combo-button, 2052 | .fortune-toolbar-combo-arrow { 2053 | display: flex; 2054 | align-items: center; 2055 | } 2056 | 2057 | .fortune-toolbar-button:hover, 2058 | .fortune-toolbar-combo:hover { 2059 | background-color: rgba(0, 0, 0, 0.06); 2060 | cursor: pointer; 2061 | } 2062 | 2063 | .fortune-toolbar-combo-arrow:hover { 2064 | background-color: rgba(0, 0, 0, 0.06); 2065 | cursor: pointer; 2066 | } 2067 | 2068 | .fortune-toolbar-button:active, 2069 | .fortune-toolbar-combo:active { 2070 | background-color: rgba(0, 0, 0, 0.12); 2071 | cursor: pointer; 2072 | } 2073 | 2074 | .fortune-toobar-combo-container { 2075 | position: relative; 2076 | } 2077 | 2078 | .fortune-toolbar-combo-popup { 2079 | position: absolute; 2080 | white-space: nowrap; 2081 | top: 32px; 2082 | left: 0; 2083 | z-index: 1004; 2084 | } 2085 | 2086 | .fortune-toolbar-select::-webkit-scrollbar { 2087 | display: none ; 2088 | } 2089 | 2090 | .fortune-toolbar-select, 2091 | .fortune-toolbar-color-picker { 2092 | box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); 2093 | padding: 10px; 2094 | border-radius: 6px; 2095 | background: white; 2096 | } 2097 | 2098 | .fortune-toolbar-select { 2099 | padding-left: 0; 2100 | padding-right: 0; 2101 | overflow: auto; 2102 | max-height: 75vh; 2103 | } 2104 | 2105 | .fortune-toolbar-combo-button { 2106 | font-size: 12px; 2107 | } 2108 | 2109 | .fortune-toolbar-select-option { 2110 | font-size: 12px; 2111 | min-width: 60px; 2112 | padding: 8px 12px; 2113 | cursor: pointer; 2114 | -webkit-user-select: none; 2115 | -moz-user-select: none; 2116 | -ms-user-select: none; 2117 | user-select: none; 2118 | } 2119 | 2120 | .fortune-toolbar-select-option:hover { 2121 | background: #efefef; 2122 | } 2123 | 2124 | .fortune-toolbar-select::-webkit-scrollbar { 2125 | display: none; 2126 | } 2127 | 2128 | .fortune-toolbar-color-picker-row { 2129 | display: flex; 2130 | flex-direction: row; 2131 | } 2132 | 2133 | .fortune-toolbar-combo-text { 2134 | margin: 0 4px; 2135 | } 2136 | 2137 | .fortune-toolbar-color-picker-item { 2138 | width: 16px; 2139 | height: 16px; 2140 | margin: 1px; 2141 | cursor: pointer; 2142 | } 2143 | 2144 | .fortune-tooltip { 2145 | visibility: hidden; 2146 | background-color: #666; 2147 | color: #fff; 2148 | text-align: center; 2149 | border-radius: 2px; 2150 | padding: 6px; 2151 | font-size: 12px; 2152 | position: absolute; 2153 | z-index: 25; /* higher than toolbar tips */ 2154 | top: 40px; 2155 | white-space: nowrap; 2156 | } 2157 | 2158 | .fortune-toolbar-button:hover .fortune-tooltip, 2159 | .fortune-toolbar-combo:hover .fortune-tooltip { 2160 | visibility: visible; 2161 | } 2162 | 2163 | .fortune-toolbar-more-container { 2164 | position: absolute; 2165 | display: flex; 2166 | flex-direction: row; 2167 | align-items: center; 2168 | align-self: flex-end; 2169 | margin-right: 40px; 2170 | top: 40px; 2171 | max-width: 348px; 2172 | box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); 2173 | background: white; 2174 | flex-wrap: wrap; 2175 | z-index: 1002; 2176 | } 2177 | 2178 | .fortune-toolbar-subtext { 2179 | -webkit-transition: all 0.218s; 2180 | -moz-transition: all 0.218s; 2181 | -o-transition: all 0.218s; 2182 | transition: all 0.218s; 2183 | font-size: 12px; 2184 | left: auto; 2185 | padding-top: 1px; 2186 | padding-left: 24px; 2187 | text-align: right; 2188 | opacity: .5; 2189 | filter: alpha(opacity=50); 2190 | color: #000; 2191 | -webkit-user-select: none; 2192 | -moz-user-select: none; 2193 | -ms-user-select: none; 2194 | user-select: none; 2195 | font-family: Arial; 2196 | line-height: 100%; 2197 | } 2198 | 2199 | .toolbar-item-sub-menu { 2200 | position: absolute; 2201 | box-shadow: 0 2px 4px rgb(0 0 0 / 20%); 2202 | background: #fff; 2203 | border: 1px solid rgba(0, 0, 0, .2); 2204 | cursor: default; 2205 | font-size: 12px; 2206 | z-index: 1004; 2207 | box-sizing: border-box; 2208 | -webkit-user-select: none; 2209 | -moz-user-select: none; 2210 | -ms-user-select: none; 2211 | user-select: none; 2212 | outline: none; 2213 | border-radius: 6px; 2214 | } 2215 | 2216 | #fortune-custom-color { 2217 | min-width: 164px; 2218 | background: rgb(240, 240, 240); 2219 | border-radius: 6px; 2220 | box-shadow: 0 2px 4px rgb(0 0 0 / 20%); 2221 | border: 1px solid rgba(0, 0, 0, .2); 2222 | font-size: 12px; 2223 | } 2224 | 2225 | #fortune-custom-color .color-reset { 2226 | position: relative; 2227 | color: #333; 2228 | cursor: pointer; 2229 | list-style: none; 2230 | padding: 10px; 2231 | white-space: nowrap; 2232 | padding-left: 8px; 2233 | vertical-align: middle; 2234 | padding-right: 24px; 2235 | -webkit-user-select: none; 2236 | -moz-user-select: none; 2237 | -ms-user-select: none; 2238 | user-select: none; 2239 | border-radius: 6px; 2240 | background: white; 2241 | } 2242 | 2243 | #fortune-custom-color .color-reset:hover { 2244 | background: rgb(230, 230, 230); 2245 | } 2246 | 2247 | #fortune-custom-color .custom-color { 2248 | position: relative; 2249 | margin: auto; 2250 | padding: 10px; 2251 | border-radius: 6px; 2252 | background: white; 2253 | display: flex; 2254 | align-items: center; 2255 | margin: 1px 0px; 2256 | display: flex; 2257 | justify-content: space-around; 2258 | } 2259 | 2260 | .button-basic { 2261 | display: inline-block; 2262 | margin-bottom: 0; 2263 | font-weight: 400; 2264 | text-align: center; 2265 | vertical-align: middle; 2266 | touch-action: manipulation; 2267 | cursor: pointer; 2268 | white-space: nowrap; 2269 | padding: 4px 8px; 2270 | font-size: 12px; 2271 | line-height: 1.42857143; 2272 | border-radius: 2px; 2273 | -webkit-user-select: none; 2274 | -moz-user-select: none; 2275 | -ms-user-select: none; 2276 | user-select: none; 2277 | } 2278 | 2279 | .button-primary { 2280 | background: #0188fb; 2281 | border: 1px solid #0188fb; 2282 | color: #fff; 2283 | margin-right: -4px; 2284 | } 2285 | 2286 | .fortune-border-select-menu{ 2287 | position: absolute; 2288 | bottom: 0px; 2289 | } 2290 | 2291 | .fortune-border-color-preview { 2292 | height: 3px; 2293 | } 2294 | 2295 | .fortune-border-select-option { 2296 | font-size: 12px; 2297 | height: 24px; 2298 | line-height: 24px; 2299 | min-width: 60px; 2300 | padding: 8px 12px; 2301 | } 2302 | 2303 | .fortune-border-select-option:hover { 2304 | background: #efefef; 2305 | cursor: pointer; 2306 | } 2307 | 2308 | .fortune-border-style-preview{ 2309 | height: 3px; 2310 | overflow: hidden; 2311 | } 2312 | 2313 | .fortune-border-style-picker-menu{ 2314 | padding: 0px 10px; 2315 | } 2316 | 2317 | .fortune-border-style-picker-menu:hover{ 2318 | background: #efefef; 2319 | cursor: pointer; 2320 | } 2321 | 2322 | /*函数公式查找样式*/ 2323 | #luckysheet-search-formula { 2324 | font-size: 12px; 2325 | } 2326 | 2327 | #luckysheet-search-formula .inpbox { 2328 | margin-bottom: 5px; 2329 | } 2330 | 2331 | #luckysheet-search-formula .inpbox div { 2332 | display: block; 2333 | margin-bottom: 5px; 2334 | } 2335 | 2336 | #luckysheet-search-formula .inpbox input { 2337 | width: 100%; 2338 | height: 24px; 2339 | line-height: 24px; 2340 | border: 1px solid #d4d4d4; 2341 | padding: 0 10px; 2342 | box-sizing: border-box; 2343 | font-size: 12px; 2344 | } 2345 | 2346 | #luckysheet-search-formula .selbox { 2347 | margin-bottom: 5px; 2348 | } 2349 | 2350 | #luckysheet-search-formula .selbox select { 2351 | width: 50%; 2352 | height: 24px; 2353 | line-height: 24px; 2354 | border: 1px solid #d4d4d4; 2355 | box-sizing: border-box; 2356 | font-size: 12px; 2357 | } 2358 | 2359 | #luckysheet-search-formula .listbox label { 2360 | display: block; 2361 | margin-bottom: 5px; 2362 | } 2363 | 2364 | #formulaTypeList { 2365 | width: 300px; 2366 | height: 170px; 2367 | border: 1px solid #d4d4d4; 2368 | overflow-y: scroll; 2369 | } 2370 | 2371 | .formulaList { 2372 | width: 300px; 2373 | height: 170px; 2374 | border: 1px solid #d4d4d4; 2375 | overflow-y: scroll; 2376 | } 2377 | 2378 | .listBox { 2379 | padding: 5px; 2380 | border-bottom: 1px solid #d4d4d4; 2381 | } 2382 | 2383 | .listBox.on { 2384 | background-color: #8C89FE; 2385 | color: #fff; 2386 | } 2387 | 2388 | #fortune-split-column { 2389 | /* position: absolute; 2390 | padding: 30px 42px; 2391 | z-index: 1002; */ 2392 | min-width: 500px; 2393 | } 2394 | #fortune-split-column label { 2395 | -webkit-user-select: none; 2396 | -moz-user-select: none; 2397 | -ms-user-select: none; 2398 | user-select: none 2399 | } 2400 | #fortune-split-column .title { 2401 | font-size: 16px; 2402 | } 2403 | #fortune-split-column .splitDelimiters { 2404 | margin-top: 10px; 2405 | } 2406 | #fortune-split-column .splitSymbols { 2407 | position: relative; 2408 | border: 1px solid #dfdfdf; 2409 | padding: 5px; 2410 | margin: 5px 0px; 2411 | } 2412 | #fortune-split-column .splitSymbol { 2413 | font-size: 14px; 2414 | } 2415 | #fortune-split-column .splitSimple { 2416 | position: absolute; 2417 | top: 114px; 2418 | left: 0px; 2419 | } 2420 | #fortune-split-column #otherValue { 2421 | margin-left: 5px; 2422 | width: 50px; 2423 | padding: 0 5px; 2424 | } 2425 | #fortune-split-column .splitDataPreview { 2426 | font-size: 14px; 2427 | margin-top: 26px; 2428 | } 2429 | #fortune-split-column .splitColumnData { 2430 | border: 1px solid #dfdfdf; 2431 | padding: 5px; 2432 | margin: 5px 0px; 2433 | height: 100px; 2434 | overflow-y: scroll; 2435 | } 2436 | #fortune-split-column .button-basic { 2437 | display: inline-block; 2438 | margin-bottom: 0; 2439 | font-weight: 400; 2440 | text-align: center; 2441 | vertical-align: middle; 2442 | touch-action: manipulation; 2443 | cursor: pointer; 2444 | white-space: nowrap; 2445 | padding: 4px 8px; 2446 | font-size: 14px; 2447 | line-height: 1.42857143; 2448 | border-radius: 2px; 2449 | -webkit-user-select: none; 2450 | -moz-user-select: none; 2451 | -ms-user-select: none; 2452 | user-select: none; 2453 | } 2454 | #fortune-split-column .button-primary { 2455 | background: #0188fb; 2456 | border: 1px solid #0188fb; 2457 | color: #fff; 2458 | margin-right: 10px; 2459 | } 2460 | #fortune-split-column .button-close { 2461 | color: #333; 2462 | background-color: #fff; 2463 | border: 1px solid #ccc; 2464 | } 2465 | #fortune-split-column table { 2466 | border-collapse: collapse; 2467 | } 2468 | #fortune-split-column tr { 2469 | display: table-row; 2470 | vertical-align: inherit; 2471 | border-color: inherit; 2472 | } 2473 | #fortune-split-column td { 2474 | border: 1px solid #333; 2475 | display: table-cell; 2476 | vertical-align: inherit; 2477 | } 2478 | label { 2479 | cursor: default; 2480 | } 2481 | #fortune-location-condition { 2482 | min-width: 500px; 2483 | } 2484 | #fortune-location-condition .title { 2485 | background-color: #fff; 2486 | color: #000; 2487 | cursor: default; 2488 | font-size: 16px; 2489 | font-weight: normal; 2490 | line-height: 48px; 2491 | } 2492 | #fortune-location-condition .listbox { 2493 | border: 1px solid #dfdfdf; 2494 | padding: 10px; 2495 | font-size: 14px; 2496 | color: #000; 2497 | } 2498 | #fortune-location-condition .listbox .listItem { 2499 | padding: 5px 0; 2500 | } 2501 | #fortune-location-condition .listbox .listItem input[type="radio"] { 2502 | float: left; 2503 | margin-top: 5px; 2504 | } 2505 | #fortune-location-condition .listItem { 2506 | padding: 5px 0; 2507 | } 2508 | #fortune-location-condition .listItem .subItem { 2509 | height: 30px; 2510 | padding: 0 10px; 2511 | display: block; 2512 | } 2513 | #fortune-location-condition input[type="radio"] { 2514 | float: left; 2515 | margin-top: 3px; 2516 | } 2517 | #fortune-location-condition .listbox .listItem .subbox { 2518 | height: 30px; 2519 | padding: 0 10px; 2520 | } 2521 | #fortune-location-condition .listbox .listItem .subbox .subItem { 2522 | float: left; 2523 | margin-right: 5px; 2524 | } 2525 | #fortune-location-condition .button-basic { 2526 | display: inline-block; 2527 | margin-bottom: 0; 2528 | font-weight: 400; 2529 | text-align: center; 2530 | vertical-align: middle; 2531 | touch-action: manipulation; 2532 | cursor: pointer; 2533 | white-space: nowrap; 2534 | padding: 4px 8px; 2535 | font-size: 14px; 2536 | line-height: 1.42857143; 2537 | border-radius: 2px; 2538 | -webkit-user-select: none; 2539 | -moz-user-select: none; 2540 | -ms-user-select: none; 2541 | user-select: none; 2542 | margin-top: 10px; 2543 | } 2544 | #fortune-location-condition .button-primary { 2545 | background: #0188fb; 2546 | border: 1px solid #0188fb; 2547 | color: #fff; 2548 | margin-right: 10px; 2549 | } 2550 | #fortune-location-condition .button-close { 2551 | color: #333; 2552 | background-color: #fff; 2553 | border: 1px solid #ccc; 2554 | } 2555 | .listBox { 2556 | display: flex; 2557 | justify-content: space-between; 2558 | } 2559 | 2560 | .inpbox { 2561 | margin-bottom: 10px; 2562 | } 2563 | 2564 | .decimal-places-input { 2565 | width: 70px; 2566 | } 2567 | 2568 | 2569 | .format-list { 2570 | width: 300px; 2571 | height: 170px; 2572 | border: 1px solid #d4d4d4; 2573 | overflow-y: scroll; 2574 | } 2575 | 2576 | 2577 | 2578 | .fortune-fx-editor { 2579 | display: flex; 2580 | flex-direction: row; 2581 | height: 28px; 2582 | border-bottom: 1px solid #d4d4d4; 2583 | } 2584 | 2585 | .fortune-fx-icon { 2586 | display: flex; 2587 | align-items: center; 2588 | margin: 0 12px; 2589 | } 2590 | 2591 | .fortune-name-box-container { 2592 | width: 99px; 2593 | border-right: 1px solid #d4d4d4; 2594 | font-size: 14px; 2595 | display: flex; 2596 | align-items: center; 2597 | } 2598 | 2599 | .fortune-name-box { 2600 | width: 100%; 2601 | text-align: center; 2602 | margin: 0; 2603 | outline: none; 2604 | cursor: text; 2605 | /* -webkit-user-modify: read-write-plaintext-only; */ 2606 | white-space: nowrap; 2607 | overflow: hidden; 2608 | -webkit-transform: translateZ(0); 2609 | background-color: white; 2610 | word-wrap: break-word; 2611 | -webkit-nbsp-mode: space; 2612 | -webkit-line-break: after-white-space; 2613 | } 2614 | 2615 | .fortune-fx-input-container { 2616 | padding-left: 10px; 2617 | overflow: visible; 2618 | padding: 0; 2619 | flex: 1; 2620 | display: flex; 2621 | align-items: center; 2622 | position: relative; 2623 | border-left: 1px solid #e5e5e5; 2624 | } 2625 | 2626 | .fortune-fx-input { 2627 | flex: 1; 2628 | height: 100%; 2629 | overflow-y: scroll; 2630 | padding-left: 2px; 2631 | font-size: 14px; 2632 | line-height: 14px; 2633 | margin: 0; 2634 | outline: none; 2635 | cursor: text; 2636 | white-space: pre-wrap; 2637 | word-wrap: break-word; 2638 | -webkit-transform: translateZ(0); 2639 | -webkit-nbsp-mode: space; 2640 | -webkit-line-break: after-white-space; 2641 | background-color: white; 2642 | padding-top: 7px; 2643 | box-sizing: border-box; 2644 | color:black; 2645 | text-align: left; 2646 | } 2647 | .fortune-fx-input[contenteditable="true"] { 2648 | -webkit-user-modify: read-write-plaintext-only; 2649 | } 2650 | .luckysheet-sheet-area { 2651 | width: 100%; 2652 | box-sizing: border-box; 2653 | background-color: #fafafc; 2654 | color: #444; 2655 | height: 31px; 2656 | padding: 0 30px 0 44px; 2657 | margin: 0; 2658 | -webkit-touch-callout: none; 2659 | cursor: default; 2660 | transition: 0.3s ease all; 2661 | display: flex; 2662 | align-items: center; 2663 | justify-content: space-between; 2664 | position: relative; 2665 | } 2666 | 2667 | #luckysheet-sheet-content { 2668 | width: 0; 2669 | flex: 3; 2670 | display: flex; 2671 | align-items: center; 2672 | } 2673 | 2674 | #luckysheet-bottom-pager { 2675 | width: 0; 2676 | background-color: #fafafc; 2677 | z-index: 1; 2678 | flex: 2; 2679 | text-align: right; 2680 | white-space: nowrap; 2681 | } 2682 | 2683 | .luckysheet-sheet-area>div, 2684 | .luckysheet-sheet-area .luckysheet-sheets-item { 2685 | display: inline-block; 2686 | /* margin-right: 6px; 2687 | margin-top: 1px; 2688 | padding: 1px 6px; */ 2689 | /* padding: 6px 10px; */ 2690 | } 2691 | 2692 | .fortune-sheettab-container { 2693 | padding: 0px 0px; 2694 | margin-left: 0px; 2695 | position: relative; 2696 | max-width: 54%; 2697 | vertical-align: bottom; 2698 | display: inline-block; 2699 | } 2700 | 2701 | .fortune-sheettab-container .boundary { 2702 | position: absolute; 2703 | top: 0; 2704 | width: 6px; 2705 | height: 100%; 2706 | z-index: 1; 2707 | background: rgb(255, 255, 255); 2708 | } 2709 | 2710 | .fortune-sheettab-container .boundary-left { 2711 | left: 0; 2712 | background-image: linear-gradient(to right, var(--tw-gradient-stops)); 2713 | --tw-gradient-from: #4445; 2714 | --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, #8880); 2715 | } 2716 | 2717 | .fortune-sheettab-container .boundary-right { 2718 | right: 0; 2719 | background-image: linear-gradient(to left, var(--tw-gradient-stops)); 2720 | --tw-gradient-from: #4445; 2721 | --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, #8880); 2722 | } 2723 | 2724 | .fortune-sheettab-container .fortune-sheettab-container-c { 2725 | padding: 0px 0px; 2726 | margin-left: 0px; 2727 | overflow: hidden; 2728 | white-space: nowrap; 2729 | position: relative; 2730 | max-width: 100%; 2731 | vertical-align: bottom; 2732 | display: inline-block; 2733 | } 2734 | 2735 | .luckysheet-sheet-container-menu-hide .luckysheet-sheets-item { 2736 | padding-right: 5px !important; 2737 | } 2738 | 2739 | .luckysheet-sheet-container-menu-hide .luckysheet-sheets-item-menu { 2740 | display: none !important; 2741 | } 2742 | 2743 | .luckysheet-sheet-area div.luckysheet-sheets-item { 2744 | padding: 2px 6px; 2745 | height: 29px; 2746 | line-height: 29px; 2747 | background-color: #fafafc; 2748 | color: #676464; 2749 | min-width: 30px; 2750 | top: 0px; 2751 | position: relative; 2752 | margin-right: -1px; 2753 | cursor: pointer; 2754 | transition: all 0.1s; 2755 | font-size: 13px; 2756 | padding: 2px 19px 0px 5px; 2757 | box-sizing: border-box; 2758 | border-left: 1px solid #e0e0e0; 2759 | border-right: 1px solid #e0e0e0; 2760 | vertical-align: middle; 2761 | } 2762 | 2763 | .luckysheet-sheet-area div.luckysheet-sheets-item:last-child { 2764 | margin-right: 1px; 2765 | } 2766 | 2767 | .luckysheet-sheet-area div.luckysheet-sheets-item:hover { 2768 | background-color: #efefef; 2769 | /* border-color: #a5a5a5; */ 2770 | color: #490500; 2771 | } 2772 | 2773 | .luckysheet-sheet-area div.luckysheet-sheets-item .luckysheet-sheets-item-menu { 2774 | margin-left: 2px; 2775 | display: inline-block; 2776 | top: -2px; 2777 | position: relative; 2778 | color: #a1a1a1; 2779 | position: absolute; 2780 | height: 100%; 2781 | width: 15px; 2782 | right: 0px; 2783 | text-align: center; 2784 | } 2785 | 2786 | .luckysheet-sheet-area div.luckysheet-sheets-item .luckysheet-sheets-item-menu:hover { 2787 | color: #2a2a2a; 2788 | cursor: pointer; 2789 | } 2790 | 2791 | .luckysheet-sheet-area div.luckysheet-sheets-item .luckysheet-sheets-item-name { 2792 | padding: 0px 3px; 2793 | } 2794 | 2795 | .luckysheet-sheets-item-color { 2796 | width: 100%; 2797 | height: 10%; 2798 | position: absolute; 2799 | bottom: 0; 2800 | left: 0; 2801 | } 2802 | 2803 | .luckysheet-sheet-area div.luckysheet-sheets-item .luckysheet-sheets-item-name[contenteditable="true"] { 2804 | border: 1px solid #d9d9d9; 2805 | display: inline-block; 2806 | height: 18px; 2807 | line-height: 18px; 2808 | min-width: 8px; 2809 | margin: -4px -1px; 2810 | -moz-user-modify: read-write-plaintext-only; 2811 | -webkit-user-modify: read-write-plaintext-only; 2812 | -moz-user-select: text !important; 2813 | -ms-user-select: text !important; 2814 | -webkit-user-select: text !important; 2815 | } 2816 | 2817 | .luckysheet-sheet-area div.luckysheet-sheets-item .luckysheet-sheets-item-name[contenteditable="true"]:focus { 2818 | -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); 2819 | -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); 2820 | box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); 2821 | border: 1px solid #4d90fe; 2822 | outline: none; 2823 | } 2824 | 2825 | .luckysheet-sheet-area div.luckysheet-sheets-item-active { 2826 | /* padding: 2px 8px; */ 2827 | height: 29px; 2828 | line-height: 29px; 2829 | background-color: #efefef; 2830 | /* border-color: #aaa; */ 2831 | border-top-color: #fff; 2832 | color: #222; 2833 | /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); */ 2834 | cursor: default; 2835 | /* top: -2px; */ 2836 | /* border-bottom: none; */ 2837 | /* padding-right: 20px; */ 2838 | } 2839 | 2840 | .luckysheet-sheet-area div.luckysheet-sheets-item-active:hover { 2841 | background-color: #ececec; 2842 | /* border-color: #aaa; */ 2843 | color: #222; 2844 | } 2845 | 2846 | .fortune-sheettab-button { 2847 | display: flex; 2848 | align-items: center; 2849 | justify-content: center; 2850 | height: 29px; 2851 | width: 29px; 2852 | } 2853 | 2854 | .fortune-sheettab-button:hover { 2855 | display: flex; 2856 | align-items: center; 2857 | justify-content: center; 2858 | height: 29px; 2859 | width: 29px; 2860 | background-color: #efefef; 2861 | } 2862 | 2863 | .luckysheet-noselected-text { 2864 | -moz-user-select: -moz-test; 2865 | -khtml-user-select: none; 2866 | -webkit-user-select: none; 2867 | -ms-user-select: none; 2868 | user-select: none; 2869 | } 2870 | 2871 | .fortune-sheettab-scroll { 2872 | display: flex; 2873 | align-items: center; 2874 | padding: 0 5px; 2875 | height: 29px; 2876 | cursor: pointer; 2877 | } 2878 | 2879 | .fortune-sheettab-scroll:hover { 2880 | background-color: #e0e0e0; 2881 | } 2882 | 2883 | .fortune-sheettab-placeholder { 2884 | display: inline-block; 2885 | width: 30px; 2886 | height: 29px; 2887 | line-height: 29px; 2888 | vertical-align: middle; 2889 | } 2890 | 2891 | .sheet-list-container { 2892 | overflow: visible; 2893 | display: flex; 2894 | flex-direction: column; 2895 | justify-content: flex-end; 2896 | } 2897 | 2898 | .luckysheet-sheet-selection-calInfo { 2899 | display: flex; 2900 | font-size: 12px; 2901 | align-content: center; 2902 | padding: 0 0 0 44px; 2903 | height: 22px; 2904 | align-self: flex-end; 2905 | } 2906 | 2907 | .luckysheet-sheet-selection-calInfo div { 2908 | margin: auto 0; 2909 | white-space: nowrap; 2910 | margin-right: 7px; 2911 | } 2912 | 2913 | .luckysheet-sheets-item-function { 2914 | width: 12px; 2915 | height: 24px; 2916 | position: absolute; 2917 | top: 4px; 2918 | right: 2px; 2919 | } 2920 | 2921 | .fortune-sheet-area-right { 2922 | display: flex !important; 2923 | } 2924 | .fortune-zoom-container { 2925 | white-space: nowrap; 2926 | overflow: visible; 2927 | display: flex; 2928 | align-items: center; 2929 | -webkit-user-select: none; 2930 | -moz-user-select: none; 2931 | -ms-user-select: none; 2932 | user-select: none; 2933 | } 2934 | 2935 | .fortune-zoom-button { 2936 | display: flex; 2937 | cursor: pointer; 2938 | align-items: center; 2939 | justify-content: center; 2940 | width: 24px; 2941 | height: 24px; 2942 | } 2943 | 2944 | .fortune-zoom-button:hover { 2945 | background: #efefef; 2946 | } 2947 | 2948 | .fortune-zoom-ratio { 2949 | position: relative; 2950 | display: flex; 2951 | justify-content: center; 2952 | width: 48px; 2953 | color: #1e1e1f; 2954 | font-size: 12px; 2955 | cursor: pointer; 2956 | } 2957 | 2958 | .fortune-zoom-ratio-current { 2959 | width: 100%; 2960 | } 2961 | 2962 | .fortune-zoom-ratio-item:hover { 2963 | background: #efefef; 2964 | } 2965 | 2966 | .fortune-zoom-ratio-menu { 2967 | position: absolute; 2968 | bottom: 30px; 2969 | left: 0; 2970 | line-height: 24px; 2971 | box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); 2972 | padding: 10px 0px 10px 0px; 2973 | border-radius: 6px; 2974 | background: white; 2975 | z-index: 1004; 2976 | } 2977 | 2978 | .fortune-zoom-ratio-text { 2979 | padding: 0px 10px 0px 10px; 2980 | } 2981 | 2982 | .fortune-context-menu { 2983 | max-height: 100%; 2984 | overflow-y: auto; 2985 | border-radius: 4px; 2986 | box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.15); 2987 | transition: opacity 0.218s; 2988 | background: #fff; 2989 | border: 1px solid #ccc; 2990 | border: 1px solid rgba(0, 0, 0, 0.2); 2991 | cursor: default; 2992 | font-size: 13px; 2993 | margin: 0; 2994 | outline: none; 2995 | padding: 6px 0; 2996 | position: absolute; 2997 | z-index: 1004; 2998 | box-sizing: border-box; 2999 | -webkit-user-select: none; 3000 | -moz-user-select: none; 3001 | -ms-user-select: none; 3002 | user-select: none; 3003 | } 3004 | 3005 | .fortune-context-menu input.luckysheet-mousedown-cancel { 3006 | width: 35px; 3007 | text-align: center; 3008 | margin-left: 5px; 3009 | margin-right: 5px; 3010 | } 3011 | 3012 | .fortune-context-menu-divider { 3013 | width: "100%"; 3014 | height: 1px; 3015 | margin: 4px 0; 3016 | background-color: #e0e0e0; 3017 | } 3018 | 3019 | .luckysheet-cols-menu .luckysheet-cols-menuitem { 3020 | position: relative; 3021 | color: #333; 3022 | cursor: pointer; 3023 | list-style: none; 3024 | margin: 0; 3025 | padding: 1px 6em 1px 20px; 3026 | white-space: nowrap; 3027 | padding-left: 8px; 3028 | vertical-align: middle; 3029 | padding-right: 24px; 3030 | -webkit-user-select: none; 3031 | -moz-user-select: none; 3032 | -ms-user-select: none; 3033 | user-select: none; 3034 | } 3035 | 3036 | /* 右击菜单项目 hover背景色 */ 3037 | .luckysheet-cols-menu .luckysheet-cols-menuitem:hover, 3038 | .luckysheet-cols-menu .luckysheet-cols-menuitem-hover { 3039 | background: #EFEFEF; 3040 | } 3041 | 3042 | .luckysheet-cols-menu .luckysheet-cols-menuitem .luckysheet-cols-menuitem-content { 3043 | position: relative; 3044 | color: #333; 3045 | cursor: pointer; 3046 | list-style: none; 3047 | margin: 0; 3048 | padding: 6px 7em 6px 30px; 3049 | white-space: nowrap; 3050 | -webkit-user-select: none; 3051 | -moz-user-select: none; 3052 | -ms-user-select: none; 3053 | user-select: none; 3054 | } 3055 | 3056 | .fortune-filter-menu .luckysheet-cols-menuitem { 3057 | padding: 0px; 3058 | } 3059 | 3060 | .fortune-filter-menu .luckysheet-cols-menuitem .luckysheet-cols-menuitem-content { 3061 | padding: 7px 24px; 3062 | } 3063 | 3064 | .fortune-menuitem-row { 3065 | display: flex; 3066 | padding: 7px 24px; 3067 | white-space: pre; 3068 | align-items: center; 3069 | } 3070 | 3071 | .fortune-byvalue-btn { 3072 | cursor: pointer; 3073 | color: blue; 3074 | text-decoration: underline; 3075 | } 3076 | 3077 | 3078 | .luckysheet-filter-bycolor-submenu .button-basic, 3079 | .fortune-filter-menu .button-basic { 3080 | display: flex; 3081 | flex-flow: row nowrap; 3082 | justify-content: center; 3083 | align-items: center; 3084 | font-size: 14px; 3085 | padding: 4px 8px; 3086 | border-radius: 4px; 3087 | cursor: pointer; 3088 | } 3089 | 3090 | .luckysheet-filter-bycolor-submenu .button-basic { 3091 | margin: 5px 20px; 3092 | } 3093 | 3094 | .luckysheet-filter-bycolor-submenu .button-default, 3095 | .fortune-filter-menu .button-default { 3096 | color: rgb(38, 42, 51); 3097 | background-color: rgb(255, 255, 255); 3098 | border: 1px solid rgb(235, 235, 235); 3099 | margin-left: 10px; 3100 | } 3101 | 3102 | .luckysheet-filter-bycolor-submenu .button-default:hover, 3103 | .fortune-filter-menu .button-default:hover { 3104 | background-color: #e6e6e6; 3105 | } 3106 | 3107 | .luckysheet-filter-bycolor-submenu .button-primary, 3108 | .fortune-filter-menu .button-primary { 3109 | color: white; 3110 | background-color: #0188FB; 3111 | } 3112 | 3113 | .luckysheet-filter-bycolor-submenu .button-primary:hover, 3114 | .fortune-filter-menu .button-primary:hover { 3115 | background: #5391ff; 3116 | } 3117 | 3118 | .fortune-filter-menu .button-danger { 3119 | color: white; 3120 | background-color: #d9534f; 3121 | margin-left: 10px; 3122 | } 3123 | 3124 | .fortune-filter-menu .button-danger:hover { 3125 | background-color: #c9302c; 3126 | } 3127 | 3128 | .filter-bycolor-container { 3129 | display: flex; 3130 | justify-content: space-between; 3131 | align-items: center; 3132 | } 3133 | 3134 | .filtermenu-input-container { 3135 | padding: 0px; 3136 | } 3137 | 3138 | .filtermenu-input-container input.luckysheet-mousedown-cancel { 3139 | margin: 0px 20px; 3140 | width: 230px; 3141 | box-sizing: border-box; 3142 | height: 26px; 3143 | border-radius: 3px; 3144 | border: 1px solid #d9d9d9; 3145 | font-size: 12px; 3146 | padding: 1px 8px; 3147 | outline: none; 3148 | -webkit-user-select: auto; 3149 | -moz-user-select: auto; 3150 | -ms-user-select: auto; 3151 | user-select: auto; 3152 | text-align: start; 3153 | } 3154 | 3155 | .filtermenu-input-container input.luckysheet-mousedown-cancel { 3156 | border: 1px solid #A1A1A1; 3157 | } 3158 | 3159 | .filtermenu-input-container input.luckysheet-mousedown-cancel:focus { 3160 | border: 1px solid rgb(1, 136, 251); 3161 | outline: none; 3162 | } 3163 | 3164 | .byvalue-btn-row { 3165 | justify-content: space-between; 3166 | padding-bottom: 0px; 3167 | align-items: flex-start; 3168 | } 3169 | 3170 | .filter-caret { 3171 | width: 0; 3172 | height: 0; 3173 | display: inline-block; 3174 | border: 4px solid transparent; 3175 | } 3176 | 3177 | .filter-caret.right { 3178 | margin-left: 2px; 3179 | margin-right: 3px; 3180 | border-left-color: #000000; 3181 | } 3182 | 3183 | .filter-caret.down { 3184 | margin-top: 5px; 3185 | margin-right: 5px; 3186 | border-top-color: #000000; 3187 | } 3188 | 3189 | .filter-checkbox { 3190 | margin-left: 0px; 3191 | margin-right: 5px; 3192 | } 3193 | 3194 | #luckysheet-filter-byvalue-select { 3195 | min-height: 100px; 3196 | overflow-y: auto; 3197 | overflow-x: hidden; 3198 | padding: 4px 24px; 3199 | } 3200 | 3201 | #luckysheet-filter-byvalue-select .count, 3202 | #luckysheet-pivotTableFilter-byvalue-select .count { 3203 | color: gray; 3204 | margin-left: 5px; 3205 | } 3206 | 3207 | #luckysheet-filter-byvalue-select .select-item { 3208 | display: flex; 3209 | align-items: center; 3210 | } 3211 | 3212 | /*颜色筛选 -- pan*/ 3213 | .luckysheet-filter-bycolor-submenu { 3214 | position: absolute; 3215 | min-width: 170px; 3216 | font-size: 12px; 3217 | padding: 5px 0; 3218 | z-index: 1004; 3219 | border: 1px solid rgba(0, 0, 0, .2); 3220 | background-color: #ffffff; 3221 | } 3222 | 3223 | .luckysheet-filter-bycolor-submenu .title { 3224 | padding: 10px; 3225 | font-weight: 600; 3226 | color: #333; 3227 | background-color: #f4f4f4; 3228 | text-align: center; 3229 | } 3230 | 3231 | .luckysheet-filter-bycolor-submenu .one-color-tip { 3232 | padding: 7px 30px; 3233 | text-align: center; 3234 | } 3235 | 3236 | .luckysheet-filter-bycolor-submenu .color-list { 3237 | max-height: 128px; 3238 | overflow: auto; 3239 | } 3240 | 3241 | .luckysheet-filter-bycolor-submenu .item { 3242 | padding: 5px 40px 5px 20px; 3243 | cursor: pointer; 3244 | position: relative; 3245 | background-color: #ffffff; 3246 | } 3247 | 3248 | .luckysheet-filter-bycolor-submenu .item:hover { 3249 | background-color: #d3d3d3; 3250 | } 3251 | 3252 | .luckysheet-filter-bycolor-submenu .item .color-label { 3253 | display: block; 3254 | width: 70px; 3255 | height: 20px; 3256 | border: 1px solid #d1d1d1; 3257 | } 3258 | 3259 | .luckysheet-filter-bycolor-submenu .item input[type="checkbox"] { 3260 | position: absolute; 3261 | right: 10px; 3262 | top: 6px; 3263 | } 3264 | 3265 | .change-color-triangle { 3266 | position: absolute; 3267 | top: 3px; 3268 | right: -18px; 3269 | } 3270 | .fortune-sort-title { 3271 | background-color: #fff; 3272 | color: #000; 3273 | cursor: default; 3274 | font-size: 16px; 3275 | font-weight: 400; 3276 | line-height: 24px; 3277 | margin: 0 0 16px; 3278 | } 3279 | 3280 | .fortune-sort-modal > div { 3281 | margin-bottom: 10px; 3282 | } 3283 | 3284 | .fortune-sort-tablec td { 3285 | padding: 5px; 3286 | white-space: nowrap; 3287 | } 3288 | 3289 | .fortune-sort-button { 3290 | margin-top: 10px; 3291 | margin-bottom: 25px; 3292 | } 3293 | 3294 | #fortune-change-color { 3295 | min-width: 164px; 3296 | height: 252px; 3297 | background: rgb(240, 240, 240); 3298 | position: absolute; 3299 | bottom: -110px; 3300 | left: 197px; 3301 | border-radius: 6px; 3302 | box-shadow: 0 2px 4px rgb(0 0 0 / 20%); 3303 | border: 1px solid rgba(0, 0, 0, .2); 3304 | } 3305 | 3306 | #fortune-change-color .color-reset { 3307 | position: relative; 3308 | color: #333; 3309 | cursor: pointer; 3310 | list-style: none; 3311 | padding: 10px; 3312 | white-space: nowrap; 3313 | padding-left: 8px; 3314 | vertical-align: middle; 3315 | padding-right: 24px; 3316 | -webkit-user-select: none; 3317 | -moz-user-select: none; 3318 | -ms-user-select: none; 3319 | user-select: none; 3320 | border-radius: 6px; 3321 | background: white; 3322 | } 3323 | 3324 | #fortune-change-color .color-reset:hover { 3325 | background: rgb(230, 230, 230); 3326 | } 3327 | 3328 | #fortune-change-color .custom-color { 3329 | position: relative; 3330 | margin: auto; 3331 | padding: 10px; 3332 | border-radius: 6px; 3333 | background: white; 3334 | display: flex; 3335 | align-items: center; 3336 | margin: 1px 0px; 3337 | display: flex; 3338 | justify-content: space-around; 3339 | } 3340 | 3341 | .button-basic { 3342 | display: inline-block; 3343 | margin-bottom: 0; 3344 | font-weight: 400; 3345 | text-align: center; 3346 | vertical-align: middle; 3347 | touch-action: manipulation; 3348 | cursor: pointer; 3349 | white-space: nowrap; 3350 | padding: 4px 8px; 3351 | font-size: 12px; 3352 | line-height: 1.42857143; 3353 | border-radius: 2px; 3354 | -webkit-user-select: none; 3355 | -moz-user-select: none; 3356 | -ms-user-select: none; 3357 | user-select: none; 3358 | } 3359 | 3360 | .button-primary { 3361 | background: #0188fb; 3362 | border: 1px solid #0188fb; 3363 | color: #fff; 3364 | margin-right: -4px; 3365 | } 3366 | .fortune-sheet-list { 3367 | overflow-y: auto; 3368 | overflow-x: hidden; 3369 | min-width: 120px; 3370 | position: absolute; 3371 | z-index: 10002; 3372 | bottom: 53px; 3373 | margin-left: 72px; 3374 | max-height: 60%; 3375 | } 3376 | 3377 | .fortune-sheet-list-item { 3378 | height: 30px; 3379 | line-height: 30px; 3380 | width: 100%; 3381 | margin-right: 46px; 3382 | cursor: pointer; 3383 | } 3384 | 3385 | .fortune-sheet-list-item-name { 3386 | margin-right: 15px; 3387 | position: relative; 3388 | } 3389 | 3390 | .fortune-sheet-list-item-name .luckysheet-sheets-list-item-color { 3391 | width: 6%; 3392 | height: 100%; 3393 | position: absolute; 3394 | bottom: 0; 3395 | left: -6px; 3396 | } 3397 | 3398 | .fortune-sheet-list :hover { 3399 | background-color: #EFEFEF; 3400 | } 3401 | 3402 | .fortune-sheet-hidden-button { 3403 | margin-right: 15px; 3404 | display: inline-flex; 3405 | position: absolute; 3406 | right: 0; 3407 | justify-content: flex-end; 3408 | } 3409 | 3410 | .fortune-sheet-hidden-button :hover { 3411 | background-color: #D0D0D0; 3412 | } 3413 | 3414 | .fortune-sheet-selected-check-sapce { 3415 | width: 20px; 3416 | display: inline-block; 3417 | margin-left: 15px; 3418 | } 3419 | 3420 | 3421 | :root { 3422 | --ctx_menu_x: 0px; 3423 | --ctx_menu_y: 0px; 3424 | } 3425 | 3426 | 3427 | 3428 | .fortune-context-menu{ 3429 | margin-left: var(--ctx_menu_x); 3430 | margin-top : var(--ctx_menu_y); 3431 | 3432 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "jsx": "react", 4 | "baseUrl": ".", 5 | "inlineSourceMap": true, 6 | "inlineSources": true, 7 | "module": "ESNext", 8 | "target": "ES6", 9 | "allowJs": true, 10 | "noImplicitAny": true, 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "isolatedModules": true, 14 | "strictNullChecks": true, 15 | "lib": [ 16 | "DOM", 17 | "ES5", 18 | "ES6", 19 | "ES7" 20 | ] 21 | }, 22 | "include": [ 23 | "**/*.ts" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /version-bump.mjs: -------------------------------------------------------------------------------- 1 | import { readFileSync, writeFileSync } from "fs"; 2 | 3 | const targetVersion = process.env.npm_package_version; 4 | 5 | // read minAppVersion from manifest.json and bump version to target version 6 | let manifest = JSON.parse(readFileSync("manifest.json", "utf8")); 7 | const { minAppVersion } = manifest; 8 | manifest.version = targetVersion; 9 | writeFileSync("manifest.json", JSON.stringify(manifest, null, "\t")); 10 | 11 | // update versions.json with target version and minAppVersion from manifest.json 12 | let versions = JSON.parse(readFileSync("versions.json", "utf8")); 13 | versions[targetVersion] = minAppVersion; 14 | writeFileSync("versions.json", JSON.stringify(versions, null, "\t")); 15 | -------------------------------------------------------------------------------- /versions.json: -------------------------------------------------------------------------------- 1 | { 2 | "1.0.0": "0.15.0" 3 | } 4 | -------------------------------------------------------------------------------- /view.tsx: -------------------------------------------------------------------------------- 1 | import { TextFileView } from "obsidian"; 2 | 3 | export const VIEW_TYPE_SPREADSHEET = "spreadsheet-view"; 4 | 5 | 6 | 7 | import { ItemView, WorkspaceLeaf } from "obsidian"; 8 | import * as React from "react"; 9 | import * as ReactDOM from "react-dom"; 10 | import { createRoot } from "react-dom/client"; 11 | 12 | import { Workbook } from "@fortune-sheet/react"; 13 | import "@fortune-sheet/react/dist/index.css" 14 | 15 | function set_ctx_pos(el) { 16 | let rect=el.getBoundingClientRect(); 17 | let p = {x:rect.left,y:rect.top}; 18 | 19 | let r = document.querySelector(':root'); 20 | if(p.x){ 21 | r.style.setProperty('--ctx_menu_x', -1*p.x + "px" ); 22 | r.style.setProperty('--ctx_menu_y', (-1*p.y + 50 )+ "px" ); 23 | } 24 | 25 | // console.log("pos is set to ") 26 | // console.log( -1*p.x + "px") 27 | // console.log( (-1*p.y + 50 )+ "px" ) 28 | 29 | } 30 | 31 | 32 | function transformData(responseData) { 33 | return responseData.map((sheet) => ({ 34 | id: sheet.id, 35 | name: sheet.name, 36 | plugin: "divams_spreadsheets_for_obsidian", 37 | config: sheet.config, 38 | celldata: (sheet.data || []).flatMap((row, rIndex) => 39 | row 40 | .map((cell, cIndex) => { 41 | if (cell !== null) { 42 | return { 43 | r: rIndex, 44 | c: cIndex, 45 | v: cell, 46 | }; 47 | } 48 | 49 | return undefined; 50 | }) 51 | .filter((cell) => cell !== undefined), 52 | ), 53 | calcChain: (sheet.calcChain || []).map((item) => { 54 | const relatedCell = sheet.data[item.r][item.c]; 55 | return { 56 | r: item.r, 57 | c: item.c, 58 | id: item.id, 59 | v: relatedCell !== null ? relatedCell : null, 60 | }; 61 | }), 62 | })); 63 | } 64 | 65 | function handleData(receivedData) { 66 | const newData = transformData(receivedData); 67 | 68 | if (receivedData.length > 0 && receivedData[0].calcChain) { 69 | newData[0].calcChain = receivedData[0].calcChain; 70 | } 71 | 72 | return newData; 73 | 74 | } 75 | 76 | 77 | 78 | export class SpreadsheetView extends TextFileView { 79 | table_element: HTMLElement; 80 | spreadsheet_container : HTMLElement; 81 | sheet_data_in : any; 82 | sheet_data_out : any; 83 | root : any; 84 | is_save_timer_wait : any; 85 | resize_observer : any; 86 | 87 | getViewData() { 88 | if(this.sheet_data_out){ 89 | let r = JSON.stringify( handleData(this.sheet_data_out) , null, 4 ) ; 90 | console.log("saved!!") 91 | return r; 92 | } else { 93 | return "" 94 | } 95 | } 96 | 97 | // If clear is set, then it means we're opening a completely different file. 98 | setViewData(data: string, clear: boolean) { 99 | 100 | if(data.trim()){ 101 | this.sheet_data_in = JSON.parse(data) 102 | } else { 103 | this.sheet_data_in = [{ name: "Sheet1" }]; 104 | } 105 | 106 | this.refresh(); 107 | } 108 | 109 | refresh() { 110 | this.table_element.empty(); 111 | 112 | let spreadsheet_container = this.table_element.createEl("div"); 113 | spreadsheet_container.setAttribute("style","background-color:black; width:calc(100% - 15px) ; height: calc( 100vh - 130px); color:black ; ") 114 | // add filter: invert(1); for dark mode #TODO: make a button in settings page 115 | 116 | this.resize_observer = new ResizeObserver(function(){ 117 | window.dispatchEvent(new Event('resize')); 118 | set_ctx_pos(spreadsheet_container) 119 | }).observe(spreadsheet_container) 120 | 121 | // 122 | this.spreadsheet_container = spreadsheet_container; 123 | let that = this; 124 | 125 | const settings = { 126 | data: this.sheet_data_in, // sheet data 127 | onChange: (data:any) => { that.sheet_data_out = data; that.maybe_save_data()}, // onChange event 128 | } 129 | 130 | this.root = createRoot(spreadsheet_container); 131 | this.root.render( 132 | 133 | ); 134 | 135 | 136 | } 137 | 138 | maybe_save_data(){ 139 | let that = this; 140 | 141 | if(that.is_save_timer_wait) 142 | return; 143 | 144 | that.is_save_timer_wait = true; 145 | setTimeout(function(){ 146 | 147 | that.requestSave(); 148 | that.is_save_timer_wait = false; 149 | } , 4000 ) 150 | } 151 | 152 | clear() { 153 | } 154 | 155 | getViewType() { 156 | return VIEW_TYPE_SPREADSHEET; 157 | } 158 | 159 | async onOpen() { 160 | this.table_element = this.contentEl.createEl("div"); 161 | } 162 | 163 | async onClose() { 164 | 165 | if(this.resize_observer){ 166 | this.resize_observer.disconnect() 167 | } 168 | 169 | this.requestSave(); 170 | 171 | if(this.root) 172 | this.root.unmount() 173 | 174 | this.contentEl.empty(); 175 | } 176 | } --------------------------------------------------------------------------------