mirror of
https://github.com/anyproto/anytype-ts.git
synced 2025-06-08 05:57:02 +09:00
merge
This commit is contained in:
Andrew Simachev
commit
bd72da4759
190 changed files with 6971 additions and 3511 deletions
22
anytype-ts.code-workspace
Normal file
22
anytype-ts.code-workspace
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"folders": [
|
||||
{
|
||||
"path": "."
|
||||
}
|
||||
],
|
||||
"extensions": {
|
||||
"recommendations": [
|
||||
"aaron-bond.better-comments",
|
||||
"github.copilot",
|
||||
"eamodio.gitlens",
|
||||
"timonwong.shellcheck",
|
||||
"dbaeumer.vscode-eslint"
|
||||
]
|
||||
},
|
||||
"settings": {
|
||||
"editor.formatOnSave": false,
|
||||
"editor.formatOnPaste": false,
|
||||
"editor.formatOnType": false,
|
||||
"debug.inlineValues": "on"
|
||||
}
|
||||
}
|
||||
2
dist/embed/iframe.html
vendored
2
dist/embed/iframe.html
vendored
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<script src="../js/jquery.js"></script>
|
||||
<style type="text/css">
|
||||
* { margin: 0px; padding: 0px; box-sizing: border-box; }
|
||||
* { margin: 0px; padding: 0px; box-sizing: border-box; user-select: none; }
|
||||
|
||||
body { background-color: #fff; }
|
||||
html.dark body { background-color: #171717; }
|
||||
|
|
|
|||
2
dist/js/export.js
vendored
2
dist/js/export.js
vendored
|
|
@ -1,6 +1,6 @@
|
|||
document.body.onload = function () {
|
||||
$(function () {
|
||||
var link = $('lnk, a');
|
||||
var link = $('markuplink, a');
|
||||
var block = $('.block');
|
||||
var bookmark = $('.block.blockBookmark .inner');
|
||||
|
||||
|
|
|
|||
2
dist/workers/graph.js
vendored
2
dist/workers/graph.js
vendored
|
|
@ -158,7 +158,7 @@ initFonts = () => {
|
|||
};
|
||||
|
||||
const name = 'Inter';
|
||||
const fontFace = new FontFace(name, `url("../font/inter/regular.woff") format("woff")`);
|
||||
const fontFace = new FontFace(name, `url("../font/inter/regular.woff2") format("woff2")`);
|
||||
|
||||
self.fonts.add(fontFace);
|
||||
fontFace.load().then(() => { fontFamily = name; });
|
||||
|
|
|
|||
|
|
@ -96,9 +96,6 @@ nativeTheme.on('updated', () => {
|
|||
});
|
||||
|
||||
function createWindow () {
|
||||
Util.log('info', 'CreateWindow: ' + deeplinkingUrl + ' ' + JSON.stringify(process.argv));
|
||||
|
||||
|
||||
mainWindow = WindowManager.createMain({ route: Util.getRouteFromUrl(deeplinkingUrl), isChild: false });
|
||||
|
||||
mainWindow.on('close', (e) => {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
const { app, shell, BrowserWindow } = require('electron');
|
||||
const { is } = require('electron-util');
|
||||
const keytar = require('keytar');
|
||||
const { download } = require('electron-dl');
|
||||
|
||||
|
|
@ -122,7 +123,7 @@ class Api {
|
|||
};
|
||||
|
||||
updateConfirm (win) {
|
||||
this.exit(win, true);
|
||||
this.exit(win, '', true);
|
||||
};
|
||||
|
||||
updateCancel (win) {
|
||||
|
|
@ -191,6 +192,12 @@ class Api {
|
|||
this.setConfig(win, { languages });
|
||||
};
|
||||
|
||||
setBadge (win, t) {
|
||||
if (is.macos) {
|
||||
app.dock.setBadge(t);
|
||||
};
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
module.exports = new Api();
|
||||
|
|
@ -26,6 +26,8 @@ contextBridge.exposeInMainWorld('Electron', {
|
|||
|
||||
currentWindow: () => getCurrentWindow(),
|
||||
isMaximized: () => BrowserWindow.getFocusedWindow()?.isMaximized(),
|
||||
isFocused: () => getCurrentWindow().isFocused(),
|
||||
focus: () => getCurrentWindow().focus(),
|
||||
getGlobal: (key) => getGlobal(key),
|
||||
showOpenDialog: dialog.showOpenDialog,
|
||||
|
||||
|
|
|
|||
|
|
@ -144,8 +144,11 @@ class UpdateManager {
|
|||
};
|
||||
|
||||
setTimeout () {
|
||||
const { config } = ConfigManager;
|
||||
const t = Number(config.updateTimeout) || TIMEOUT_UPDATE;
|
||||
|
||||
this.clearTimeout();
|
||||
this.timeout = setTimeout(() => { this.checkUpdate(true); }, TIMEOUT_UPDATE);
|
||||
this.timeout = setTimeout(() => this.checkUpdate(true), t);
|
||||
};
|
||||
|
||||
clearTimeout () {
|
||||
|
|
|
|||
|
|
@ -87,6 +87,7 @@ class WindowManager {
|
|||
|
||||
webPreferences: {
|
||||
preload: fixPathForAsarUnpack(path.join(Util.electronPath(), 'js', 'preload.js')),
|
||||
devTools: is.development,
|
||||
},
|
||||
};
|
||||
|
||||
|
|
@ -128,13 +129,7 @@ class WindowManager {
|
|||
state.manage(win);
|
||||
};
|
||||
|
||||
if (is.development) {
|
||||
win.loadURL(`http://localhost:${port}`);
|
||||
win.toggleDevTools();
|
||||
} else {
|
||||
win.loadURL('file://' + path.join(Util.appPath, 'dist', 'index.html'));
|
||||
};
|
||||
|
||||
win.loadURL(is.development ? `http://localhost:${port}` : 'file://' + path.join(Util.appPath, 'dist', 'index.html'));
|
||||
win.on('enter-full-screen', () => MenuManager.initMenu());
|
||||
win.on('leave-full-screen', () => MenuManager.initMenu());
|
||||
|
||||
|
|
|
|||
6602
package-lock.json
generated
6602
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -70,7 +70,7 @@
|
|||
"license-checker": "^25.0.1",
|
||||
"lint-staged": "^13.0.3",
|
||||
"node-loader": "^1.0.2",
|
||||
"npm": "^9.8.1",
|
||||
"npm": "^10.2.5",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"patch-package": "^6.4.7",
|
||||
"sass": "^1.62.0",
|
||||
|
|
@ -106,6 +106,7 @@
|
|||
"electron-util": "^0.12.3",
|
||||
"electron-window-state": "^5.0.3",
|
||||
"emoji-mart": "^5.5.2",
|
||||
"excalidraw": "^0.6.4",
|
||||
"file-type": "^12.4.2",
|
||||
"findandreplacedomtext": "^0.4.6",
|
||||
"google-protobuf": "^3.14.0",
|
||||
|
|
|
|||
|
|
@ -6,7 +6,8 @@
|
|||
"ANOTHER_ANYTYPE_PROCESS_IS_RUNNING": 108,
|
||||
"ACCOUNT_IS_DELETED": 109,
|
||||
"PROTOCOL_NEEDS_UPGRADE": 110,
|
||||
"NOT_FOUND": 3
|
||||
"NOT_FOUND": 3,
|
||||
"NO_OBJECTS_TO_IMPORT": 5
|
||||
},
|
||||
|
||||
"Error: net::ERR_TIMED_OUT": "Network time-out",
|
||||
|
|
|
|||
|
|
@ -1265,7 +1265,11 @@
|
|||
|
||||
"menuQuickCaptureSearchObjectTypes": "Search object types...",
|
||||
"menuQuickCaptureGroups": "Lists",
|
||||
"menuQuickCapturePinned": "Pinned",
|
||||
"menuQuickCaptureTooltipSearch": "Search types",
|
||||
"menuQuickCaptureOpenType": "Open type",
|
||||
"menuQuickCapturePin": "Pin on top",
|
||||
"menuQuickCaptureUnpin": "Unpin",
|
||||
|
||||
"previewCopy": "Copy Link",
|
||||
"previewEdit": "Edit Link",
|
||||
|
|
@ -1609,6 +1613,7 @@
|
|||
"origin5": "Mobile sharing extension",
|
||||
"origin6": "Use case",
|
||||
"origin7": "Library installed",
|
||||
"origin8": "Bookmark",
|
||||
|
||||
"emojiCategoryPeople": "Smileys & People",
|
||||
"emojiCategoryNature": "Animals & Nature",
|
||||
|
|
@ -1629,10 +1634,10 @@
|
|||
"notificationExportErrorTitle": "Export failed",
|
||||
"notificationExportErrorText": "Sorry, but something went wrong during the export. Please try again, and let us know if it doesn't work.",
|
||||
|
||||
"notificationGallerySuccessTitle": "\"%s\" was installed",
|
||||
"notificationGallerySuccessText": "Experience was successfully installed to the \"%s\" space. You can now open and start using it.",
|
||||
"notificationGalleryErrorTitle": "Something went wrong",
|
||||
"notificationGalleryErrorText": "Oops! \"%s\" wasn't installed. Please check your internet connection and try again or post a report on forum.",
|
||||
"notificationGalleryImportSuccessTitle": "\"%s\" was installed",
|
||||
"notificationGalleryImportSuccessText": "Experience was successfully installed to the \"%s\" space. You can now open and start using it.",
|
||||
"notificationGalleryImportErrorTitle": "Something went wrong",
|
||||
"notificationGalleryImportErrorText": "Oops! \"%s\" wasn't installed. Please check your internet connection and try again or post a report on forum.",
|
||||
|
||||
"notificationNotionErrorNoObjectsTitle": "Add integration to the Notion pages you want to import",
|
||||
"notificationNotionErrorNoObjectsText": "Select Notion document → … -> Add Connections -> Confirm Integration"
|
||||
|
|
|
|||
|
|
@ -1,51 +1,53 @@
|
|||
/* Text */
|
||||
:root {
|
||||
/* Text */
|
||||
|
||||
$colorTextPrimary: #252525;
|
||||
$colorTextSecondary: #949494;
|
||||
$colorTextTertiary: #bfbfbf;
|
||||
$colorTextInversion: #fff;
|
||||
--color-text-primary: #252525;
|
||||
--color-text-secondary: #949494;
|
||||
--color-text-tertiary: #bfbfbf;
|
||||
--color-text-inversion: #fff;
|
||||
|
||||
/* Shape */
|
||||
/* Shape */
|
||||
|
||||
$colorShapePrimary: #e3e3e3;
|
||||
$colorShapeSecondary: #ebebeb;
|
||||
$colorShapeTertiary: #f2f2f2;
|
||||
--color-shape-primary: #e3e3e3;
|
||||
--color-shape-secondary: #ebebeb;
|
||||
--color-shape-tertiary: #f2f2f2;
|
||||
|
||||
$colorShapeHighlightMedium: rgba(79, 79, 79, 0.08);
|
||||
$colorShapeHighlightLight: rgba(79, 79, 79, 0.04);
|
||||
--color-shape-highlight-medium: rgba(79, 79, 79, 0.08);
|
||||
--color-shape-highlight-light: rgba(79, 79, 79, 0.04);
|
||||
|
||||
/* Control */
|
||||
/* Control */
|
||||
|
||||
$colorControlAccent: #252525;
|
||||
$colorControlActive: #b6b6b6;
|
||||
$colorControlInactive: #dcdcdc;
|
||||
$colorControlOnBg: #fff;
|
||||
--color-control-accent: #252525;
|
||||
--color-control-active: #b6b6b6;
|
||||
--color-control-inactive: #dcdcdc;
|
||||
--color-control-bg: #fff;
|
||||
|
||||
/* Background */
|
||||
/* Background */
|
||||
|
||||
$colorBgPrimary: #fff;
|
||||
$colorBgLoader: rgba(255,255,255,0.7);
|
||||
--color-bg-primary: #fff;
|
||||
--color-bg-loader: rgba(255,255,255,0.7);
|
||||
|
||||
/* System */
|
||||
/* System */
|
||||
|
||||
$colorSystemAccent100: #ffb522;
|
||||
$colorSystemAccent50: #ffd15b;
|
||||
$colorSystemAccent25: #ffee94;
|
||||
$colorSystemSelection: rgba(42, 167, 238, 0.15);
|
||||
$colorSystemDropZone: rgba(255, 187, 44, 0.25);
|
||||
--color-system-accent-100: #ffb522;
|
||||
--color-system-accent-50: #ffd15b;
|
||||
--color-system-accent-25: #ffee94;
|
||||
--color-system-selection: rgba(24, 163, 241, 0.15);
|
||||
--color-system-drop-zone: rgba(255, 187, 44, 0.25);
|
||||
|
||||
/* Color */
|
||||
/* Color */
|
||||
|
||||
$colorYellow: #ecd91b;
|
||||
$colorOrange: #ffb522;
|
||||
$colorRed: #f55522;
|
||||
$colorPink: #e51ca0;
|
||||
$colorPurple: #ab50cc;
|
||||
$colorBlue: #3e58eb;
|
||||
$colorIce: #2aa7ee;
|
||||
$colorTeal: #0fc8ba;
|
||||
$colorLime: #5dd400;
|
||||
$colorGreen: #57c600;
|
||||
--color-yellow: #ecd91b;
|
||||
--color-orange: #ffb522;
|
||||
--color-red: #f55522;
|
||||
--color-pink: #e51ca0;
|
||||
--color-purple: #ab50cc;
|
||||
--color-blue: #3e58eb;
|
||||
--color-ice: #2aa7ee;
|
||||
--color-teal: #0fc8ba;
|
||||
--color-lime: #5dd400;
|
||||
--color-green: #57c600;
|
||||
}
|
||||
|
||||
$easeInQuint: cubic-bezier(0.22, 1, 0.36, 1);
|
||||
$transitionCommon: 0.1s $easeInQuint;
|
||||
|
|
@ -55,7 +57,7 @@ $transitionAllCommon: all $transitionCommon;
|
|||
@mixin text-overflow-nw { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
|
||||
@mixin text-9 { font-size: 9px; line-height: 12px; letter-spacing: 0.14px; }
|
||||
@mixin text-very-small { font-size: 11px; line-height: 18px; letter-spacing: 0.2px; color: $colorControlActive; }
|
||||
@mixin text-very-small { font-size: 11px; line-height: 18px; letter-spacing: 0.2px; color: var(--color-control-active); }
|
||||
@mixin text-small { font-size: 12px; line-height: 18px; letter-spacing: 0px; }
|
||||
@mixin text-common { font-size: 14px; line-height: 22px; letter-spacing: -0.12px; }
|
||||
@mixin text-paragraph { font-size: 16px; line-height: 24px; letter-spacing: -0.2px; }
|
||||
|
|
|
|||
|
|
@ -4,19 +4,19 @@
|
|||
.block.blockBookmark { padding: 6px 0px; }
|
||||
.block.blockBookmark {
|
||||
.focusable { border-radius: 4px; }
|
||||
.loaderWrapper { border-radius: 4px; border: solid 1px $colorShapeSecondary; height: 48px; width: 100%; }
|
||||
.loaderWrapper { border-radius: 4px; border: solid 1px var(--color-shape-secondary); height: 48px; width: 100%; }
|
||||
|
||||
.deleted { display: flex; gap: 0px 6px; align-items: center; color: $colorControlActive; }
|
||||
.deleted { display: flex; gap: 0px 6px; align-items: center; color: var(--color-control-active); }
|
||||
.deleted {
|
||||
.icon.ghost { width: 24px; height: 24px; }
|
||||
.name { display: inline-block; vertical-align: top; max-width: calc(100% - 26px); position: relative; @include text-overflow-nw; margin: 0px; }
|
||||
}
|
||||
|
||||
.inner {
|
||||
display: flex; border: 1px solid $colorShapeSecondary; transition: border-color $transitionCommon;
|
||||
display: flex; border: 1px solid var(--color-shape-secondary); transition: border-color $transitionCommon;
|
||||
position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.inner:hover { border-color: $colorShapePrimary; }
|
||||
.inner:hover { border-color: var(--color-shape-primary); }
|
||||
.inner.bgColor { border: 0px; }
|
||||
|
||||
.inner {
|
||||
|
|
@ -24,14 +24,14 @@
|
|||
.side.right { border-radius: 0px 12px 12px 0px; overflow: hidden; display: none; }
|
||||
|
||||
.name { @include text-common; line-height: 20px; font-weight: 500; @include clamp2; margin-bottom: 2px; }
|
||||
.descr { @include text-small; line-height: 16px; color: $colorTextSecondary; margin-bottom: 4px; @include clamp2; }
|
||||
.descr { @include text-small; line-height: 16px; color: var(--color-text-secondary); margin-bottom: 4px; @include clamp2; }
|
||||
.archive { position: absolute; right: 10px; top: 10px; z-index: 1; }
|
||||
}
|
||||
|
||||
.inner.isVertical { display: flex; flex-direction: column-reverse; }
|
||||
.inner.isVertical {
|
||||
.side.left { width: 100%; border-radius: 0px; }
|
||||
.side.right { aspect-ratio: 7/3; width: 100%; border-radius: 0px; border-bottom: 0.05em solid $colorShapeSecondary; }
|
||||
.side.right { aspect-ratio: 7/3; width: 100%; border-radius: 0px; border-bottom: 0.05em solid var(--color-shape-secondary); }
|
||||
}
|
||||
|
||||
.inner.withImage {
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
}
|
||||
|
||||
.link {
|
||||
@include text-small; height: 18px; line-height: 18px; color: $colorTextSecondary; @include text-overflow-nw; display: flex; gap: 0px 6px;
|
||||
@include text-small; height: 18px; line-height: 18px; color: var(--color-text-secondary); @include text-overflow-nw; display: flex; gap: 0px 6px;
|
||||
align-items: center;
|
||||
}
|
||||
.img { position: absolute; width: calc(100% + 4px); top: 0px; left: -2px; height: 100%; object-fit: cover; display: block; }
|
||||
|
|
|
|||
|
|
@ -22,10 +22,10 @@
|
|||
.flex { position: relative; z-index: 2; }
|
||||
.icon.dnd {
|
||||
width: 12px; height: 100%; background-size: 8px 16px; opacity: 0; cursor: grab; position: absolute; right: 6px; top: 0px;
|
||||
background-image: url('~img/icon/block/menu0.svg'); border: 1px solid $colorShapeSecondary; border-radius: 12px;
|
||||
background-image: url('~img/icon/block/menu0.svg'); border: 1px solid var(--color-shape-secondary); border-radius: 12px;
|
||||
}
|
||||
.icon.dnd:hover {
|
||||
background-image: url('~img/icon/block/menu2.svg') !important; border-color: $colorSystemAccent100; box-shadow: 0px 0px 0px 1px $colorSystemAccent100;
|
||||
background-image: url('~img/icon/block/menu2.svg') !important; border-color: var(--color-system-accent-100); box-shadow: 0px 0px 0px 1px var(--color-system-accent-100);
|
||||
}
|
||||
|
||||
.inputWithFile { position: relative; }
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
.colResize {
|
||||
.inner { position: absolute; left: 22px; top: -15px; width: 8px; height: calc(100% + 30px); cursor: col-resize; z-index: 1; }
|
||||
.line {
|
||||
height: 100%; width: 2px; background: $colorShapeSecondary; position: absolute; left: 50%; top: 0px; margin-left: -1px;
|
||||
height: 100%; width: 2px; background: var(--color-shape-secondary); position: absolute; left: 50%; top: 0px; margin-left: -1px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
|
@ -43,10 +43,10 @@
|
|||
.focusable { border-radius: inherit; }
|
||||
|
||||
.emptyToggle {
|
||||
display: none; margin-left: 28px; color: $colorControlActive; position: relative; z-index: 2;
|
||||
display: none; margin-left: 28px; color: var(--color-control-active); position: relative; z-index: 2;
|
||||
@include text-overflow-nw;
|
||||
}
|
||||
.emptyToggle:hover { color: $colorTextPrimary; }
|
||||
.emptyToggle:hover { color: var(--color-text-primary); }
|
||||
}
|
||||
|
||||
.block.index0 { padding-top: 0px !important; }
|
||||
|
|
@ -72,11 +72,11 @@
|
|||
}
|
||||
|
||||
.block.isAdding.top::before {
|
||||
content: ""; display: block; width: calc(100% - 48px); height: 2px; background: $colorSystemAccent100; position: absolute; right: 0px; top: -2px;
|
||||
content: ""; display: block; width: calc(100% - 48px); height: 2px; background: var(--color-system-accent-100); position: absolute; right: 0px; top: -2px;
|
||||
}
|
||||
|
||||
.block.isAdding.bottom::after {
|
||||
content: ""; display: block; width: calc(100% - 48px); height: 2px; background: $colorSystemAccent100; position: absolute; right: 0px; bottom: -2px;
|
||||
content: ""; display: block; width: calc(100% - 48px); height: 2px; background: var(--color-system-accent-100); position: absolute; right: 0px; bottom: -2px;
|
||||
}
|
||||
|
||||
.block:hover > .wrapMenu > .icon.dnd { opacity: 1; }
|
||||
|
|
|
|||
|
|
@ -6,12 +6,12 @@
|
|||
.wrapContent { position: relative; z-index: 1; width: 100%; height: 100%; }
|
||||
|
||||
.loaderWrapper {
|
||||
position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: $colorBgLoader; z-index: 10;
|
||||
position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: var(--color-bg-loader); z-index: 10;
|
||||
border-radius: 0px !important; display: none; pointer-events: none;
|
||||
}
|
||||
.loaderWrapper {
|
||||
.loader {
|
||||
left: auto; top: 16px; right: 16px; margin: 0px; border-color: $colorBgPrimary; border-left: 2px solid $colorTextPrimary;
|
||||
left: auto; top: 16px; right: 16px; margin: 0px; border-color: var(--color-bg-primary); border-left: 2px solid var(--color-text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -33,8 +33,8 @@
|
|||
.elements { width: 704px; height: 100%; position: absolute; left: 50%; margin-left: -352px; bottom: 0px; z-index: 1; opacity: 0; }
|
||||
.elements:hover, .elements.hover, .elements.active { opacity: 1; }
|
||||
|
||||
.author { @include text-small; color: $colorBgPrimary; position: absolute; right: 16px; bottom: 16px; z-index: 3; text-shadow: 1px 1px 1px rgba(0,0,0,0.5); }
|
||||
.author a { color: $colorBgPrimary; }
|
||||
.author { @include text-small; color: var(--color-bg-primary); position: absolute; right: 16px; bottom: 16px; z-index: 3; text-shadow: 1px 1px 1px rgba(0,0,0,0.5); }
|
||||
.author a { color: var(--color-bg-primary); }
|
||||
|
||||
.elements {
|
||||
.controlButtons { position: absolute; left: 0px; bottom: 18px; width: 100%; }
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
.btn.white { background: rgba(255,255,255,0.7); }
|
||||
.btn.white:hover, .btn.white.hover { background: rgba(255,255,255,0.9); }
|
||||
|
||||
.btn.black { color: $colorBgPrimary; background: rgba(0,0,0,0.5); line-height: 22px; }
|
||||
.btn.black { color: var(--color-bg-primary); background: rgba(0,0,0,0.5); line-height: 22px; }
|
||||
.btn.black:hover, .btn.black.active { background: rgba(0,0,0,0.7); }
|
||||
|
||||
.btn.withIcon { padding: 0px 8px 0px 6px; line-height: 26px; }
|
||||
|
|
|
|||
|
|
@ -15,14 +15,14 @@
|
|||
.icon.edit:hover { background-image: url('~img/icon/dataview/button/edit1.svg'); }
|
||||
|
||||
.loadMore {
|
||||
display: flex; align-items: center; @include text-small; line-height: 20px; width: 100%; margin-top: 10px; padding: 4px 2px; color: $colorTextSecondary;
|
||||
display: flex; align-items: center; @include text-small; line-height: 20px; width: 100%; margin-top: 10px; padding: 4px 2px; color: var(--color-text-secondary);
|
||||
transition: $transitionAllCommon;
|
||||
}
|
||||
.loadMore {
|
||||
.icon { flex-shrink: 0; width: 20px; height: 20px; background-image: url('~img/arrow/loadMore0.svg'); }
|
||||
}
|
||||
|
||||
.loadMore:hover { color: $colorTextPrimary; }
|
||||
.loadMore:hover { color: var(--color-text-primary); }
|
||||
.loadMore:hover {
|
||||
.icon { background-image: url('~img/arrow/loadMore1.svg'); }
|
||||
}
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
}
|
||||
|
||||
.btn { padding: 2px 4px; line-height: 20px; transition: $transitionAllCommon; border-radius: 4px; }
|
||||
.btn:hover { background-color: $colorShapeHighlightMedium; }
|
||||
.btn:hover { background-color: var(--color-shape-highlight-medium); }
|
||||
|
||||
.icon.arrow {
|
||||
width: 24px; height: 24px; background-size: 20px; background-image: url('~img/arrow/dateSelect.svg'); border-radius: 4px;
|
||||
|
|
@ -46,11 +46,11 @@
|
|||
}
|
||||
.icon.arrow.left { transform: rotateZ(180deg); }
|
||||
|
||||
.icon.arrow:hover { background-color: $colorShapeHighlightMedium; }
|
||||
.icon.arrow:hover { background-color: var(--color-shape-highlight-medium); }
|
||||
}
|
||||
|
||||
.dataviewEmpty {
|
||||
color: $colorTextSecondary; display: flex; align-items: center; justify-content: center; border-top: 1px solid $colorShapeSecondary;
|
||||
color: var(--color-text-secondary); display: flex; align-items: center; justify-content: center; border-top: 1px solid var(--color-shape-secondary);
|
||||
text-align: center; padding: 16px 0px; height: 300px;
|
||||
}
|
||||
.dataviewEmpty.withHead { border-top: 0px; }
|
||||
|
|
@ -58,10 +58,10 @@
|
|||
.inner { width: 300px; }
|
||||
.name { font-weight: 500; margin: 0px 0px 2px 0px; }
|
||||
.descr { @include text-small; margin: 0px 0px 8px 0px; }
|
||||
.button { color: $colorTextPrimary; }
|
||||
.button { color: var(--color-text-primary); }
|
||||
}
|
||||
|
||||
.dataviewHead { display: flex; flex-direction: row; align-items: center; gap: 0px 2px; width: 100%; color: $colorTextPrimary; }
|
||||
.dataviewHead { display: flex; flex-direction: row; align-items: center; gap: 0px 2px; width: 100%; color: var(--color-text-primary); }
|
||||
.dataviewHead {
|
||||
.icon.source { width: 28px; height: 28px; background-size: 24px; background-image: url('~img/icon/dataview/button/source0.svg'); opacity: 0; }
|
||||
.icon.source.active { opacity: 1; }
|
||||
|
|
@ -76,15 +76,15 @@
|
|||
.editableWrap { cursor: text; }
|
||||
}
|
||||
.dataviewHead.isDeleted {
|
||||
.editableWrap { color: $colorTextTertiary; }
|
||||
.editableWrap { color: var(--color-text-tertiary); }
|
||||
#head-source-select { display: none; }
|
||||
}
|
||||
.dataviewHead.isCollection {
|
||||
.editableWrap.isEmpty { min-width: 160px; }
|
||||
}
|
||||
|
||||
.dataviewControls { font-weight: 500; color: $colorControlActive; position: relative; }
|
||||
.dataviewControls::after { content: ''; display: none; height: 1px; width: 100%; background: $colorShapeSecondary; position: absolute; bottom: 0px; }
|
||||
.dataviewControls { font-weight: 500; color: var(--color-control-active); position: relative; }
|
||||
.dataviewControls::after { content: ''; display: none; height: 1px; width: 100%; background: var(--color-shape-secondary); position: absolute; bottom: 0px; }
|
||||
|
||||
.dataviewControls.viewGrid::after, .dataviewControls.viewList::after { display: block; }
|
||||
|
||||
|
|
@ -95,7 +95,7 @@
|
|||
> .side.left { flex-grow: 1; padding-left: 14px; max-width: 100%; }
|
||||
> .side.right { flex-shrink: 0; gap: 0px 4px; justify-content: flex-end; }
|
||||
> .side.right {
|
||||
.filter { color: $colorTextPrimary; padding: 0px; }
|
||||
.filter { color: var(--color-text-primary); padding: 0px; }
|
||||
.filter {
|
||||
.inner { gap: 0px; height: 100%; }
|
||||
.filterInputWrap { overflow: hidden; width: 0px; transition: width 0.2s $easeInQuint; }
|
||||
|
|
@ -122,7 +122,7 @@
|
|||
}
|
||||
|
||||
.icon { position: relative; width: 28px; height: 28px; background-size: 20px; border-radius: 6px; transition: $transitionAllCommon; }
|
||||
.icon:hover, .icon.active { background-color: $colorShapeHighlightMedium; }
|
||||
.icon:hover, .icon.active { background-color: var(--color-shape-highlight-medium); }
|
||||
|
||||
.icon.btn-filter { background-image: url('~img/icon/dataview/button/filter0.svg'); }
|
||||
.icon.btn-filter.on { background-image: url('~img/icon/dataview/button/filter1.svg'); }
|
||||
|
|
@ -137,16 +137,16 @@
|
|||
|
||||
.viewItem {
|
||||
transition: color $transitionCommon; @include text-header3; font-weight: 700; @include text-overflow-nw;
|
||||
max-width: 300px; color: $colorControlActive;
|
||||
max-width: 300px; color: var(--color-control-active);
|
||||
}
|
||||
.viewItem {
|
||||
.icon.arrow { width: 20px; height: 20px; background-image: url('~img/arrow/view.svg'); }
|
||||
}
|
||||
.viewItem:last-child { margin: 0px; }
|
||||
.viewItem:hover, .viewItem.active { color: $colorTextPrimary; }
|
||||
.viewItem:hover, .viewItem.active { color: var(--color-text-primary); }
|
||||
.viewItem.isDragging { background: rgba(255,255,255,0.5); padding: 0px 4px; border-radius: 4px; width: auto !important; }
|
||||
|
||||
.viewSelect { display: none; border: 0px; padding-left: 0px; color: $colorTextPrimary; }
|
||||
.viewSelect { display: none; border: 0px; padding-left: 0px; color: var(--color-text-primary); }
|
||||
.viewSelect {
|
||||
.icon:hover, .icon.active { background-color: transparent !important; }
|
||||
.name { @include text-overflow-nw; }
|
||||
|
|
@ -169,7 +169,7 @@
|
|||
.side.right {
|
||||
.element {
|
||||
display: flex; flex-direction: row; align-items: center; gap: 0px 6px; border-radius: 4px; padding: 0px 6px 0px 4px;
|
||||
transition: $transitionAllCommon; color: $colorTextPrimary;
|
||||
transition: $transitionAllCommon; color: var(--color-text-primary);
|
||||
}
|
||||
.element {
|
||||
.icon { width: 20px; height: 20px; }
|
||||
|
|
@ -177,13 +177,13 @@
|
|||
.icon.archive { background-image: url('~img/icon/menu/action/remove0.svg'); }
|
||||
.icon.done { background-image: url('~img/icon/dataview/selection/done.svg'); }
|
||||
}
|
||||
.element:hover { background-color: $colorShapeHighlightMedium; }
|
||||
.element:hover { background-color: var(--color-shape-highlight-medium); }
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.scroll { overflow-x: auto; overflow-y: visible; transform: translate3d(0px,0px,0px); padding-bottom: 14px; }
|
||||
.scrollWrap { background: $colorBgPrimary; }
|
||||
.scrollWrap { background: var(--color-bg-primary); }
|
||||
}
|
||||
|
||||
.viewContent {
|
||||
|
|
@ -236,7 +236,7 @@
|
|||
.block.blockDataview.isInline {
|
||||
.wrapMenu > .icon.dnd { height: 60px; }
|
||||
|
||||
.dataviewEmpty { height: auto; padding: 48px 0px; border-top: 1px solid $colorShapeSecondary; border-bottom: 1px solid $colorShapeSecondary; }
|
||||
.dataviewEmpty { height: auto; padding: 48px 0px; border-top: 1px solid var(--color-shape-secondary); border-bottom: 1px solid var(--color-shape-secondary); }
|
||||
|
||||
.dataviewControls {
|
||||
> .sides {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
.icon.edit { display: none !important; }
|
||||
.cellContent {
|
||||
position: absolute; left: 0px; top: 0px; overflow: visible !important; height: auto !important; white-space: normal !important;
|
||||
background: $colorBgPrimary; z-index: 10; min-height: 100%; box-shadow: 0px 0px 0px 2px #ffcf6f;
|
||||
background: var(--color-bg-primary); z-index: 10; min-height: 100%; box-shadow: 0px 0px 0px 2px #ffcf6f;
|
||||
}
|
||||
.cellContent {
|
||||
.name { display: inline-block; }
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
.name { display: inline-block; vertical-align: top; }
|
||||
.empty { vertical-align: top; display: none; }
|
||||
|
||||
.more { display: inline-block; vertical-align: middle; @include text-small; color: $colorTextSecondary; }
|
||||
.more { display: inline-block; vertical-align: middle; @include text-small; color: var(--color-text-secondary); }
|
||||
}
|
||||
|
||||
.cellContent.c-checkbox { display: flex; flex-direction: row; align-items: center; gap: 0px 2px; }
|
||||
|
|
@ -119,7 +119,7 @@
|
|||
.itemWrap { display: inline-block; }
|
||||
|
||||
.placeholder { position: absolute; left: 0px; top: 0px; height: 100%; }
|
||||
#entry { -webkit-user-modify: read-write-plaintext-only; color: $colorTextPrimary; }
|
||||
#entry { -webkit-user-modify: read-write-plaintext-only; color: var(--color-text-primary); }
|
||||
#list { margin-right: 6px; position: relative; word-wrap: break-word; }
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,14 +7,14 @@
|
|||
.columns { display: flex; flex-direction: row; gap: 0px 8px; position: relative; }
|
||||
.column { width: 262px; flex-shrink: 0; display: flex; flex-direction: column; position: relative; }
|
||||
|
||||
.column.isOver::before { content: ""; position: absolute; background: $colorSystemAccent100; width: 2px; height: 100%; border-radius: 2px; top: 0px; }
|
||||
.column.isOver::before { content: ""; position: absolute; background: var(--color-system-accent-100); width: 2px; height: 100%; border-radius: 2px; top: 0px; }
|
||||
.column.isOver.left::before { left: -5px; }
|
||||
.column.isOver.right::before { right: -5px; }
|
||||
|
||||
.column {
|
||||
.bgColor { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; opacity: 0.5; }
|
||||
|
||||
.head { cursor: grab; color: $colorTextSecondary; width: 100%; position: relative; padding: 8px 16px 0px 16px; }
|
||||
.head { cursor: grab; color: var(--color-text-secondary); width: 100%; position: relative; padding: 8px 16px 0px 16px; }
|
||||
.head * { cursor: grab; }
|
||||
.head {
|
||||
.sides { display: flex; width: 100%; gap: 0px 6px; line-height: 24px; position: relative; z-index: 1; }
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
|
||||
.cellContent { width: 100%; display: inline; }
|
||||
.cellContent {
|
||||
.empty { display: block; line-height: 24px; color: $colorTextSecondary; }
|
||||
.empty { display: block; line-height: 24px; color: var(--color-text-secondary); }
|
||||
.wrap { display: inline-block; white-space: nowrap; width: 100%; }
|
||||
.tagItem { max-width: 100%; }
|
||||
.more { vertical-align: top; }
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
flex-shrink: 0; width: 24px; height: 24px; background-size: 20px; border-radius: 4px; vertical-align: top;
|
||||
opacity: 0;
|
||||
}
|
||||
.icon:hover { background-color: $colorShapeHighlightMedium; }
|
||||
.icon:hover { background-color: var(--color-shape-highlight-medium); }
|
||||
|
||||
.icon.more { background-image: url('~img/icon/menu/action/more0.svg'); }
|
||||
.icon.add { background-image: url('~img/icon/plus/menu0.svg'); }
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
.card { width: 246px; display: flex; flex-direction: column; margin: 0px auto 8px auto; position: relative; z-index: 1; cursor: default; }
|
||||
.card {
|
||||
.cardContent {
|
||||
border: 1px solid $colorShapeHighlightMedium; border-radius: 12px; padding: 16px; background: $colorBgPrimary; transition: border-color $transitionCommon;
|
||||
border: 1px solid var(--color-shape-highlight-medium); border-radius: 12px; padding: 16px; background: var(--color-bg-primary); transition: border-color $transitionCommon;
|
||||
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
|
|
@ -98,11 +98,11 @@
|
|||
.card:last-child { margin: 0px; }
|
||||
|
||||
.card.add:hover, .card:hover {
|
||||
.cardContent { border-color: $colorShapeSecondary; }
|
||||
.cardContent { border-color: var(--color-shape-secondary); }
|
||||
.icon.checkbox { opacity: 1; }
|
||||
}
|
||||
|
||||
.card.isOver::before { content: ""; position: absolute; background: $colorSystemAccent100; height: 2px; width: 100%; border-radius: 2px; left: 0px; }
|
||||
.card.isOver::before { content: ""; position: absolute; background: var(--color-system-accent-100); height: 2px; width: 100%; border-radius: 2px; left: 0px; }
|
||||
.card.isOver.top::before { top: -5px; }
|
||||
.card.isOver.bottom::before { bottom: -5px; }
|
||||
|
||||
|
|
@ -112,7 +112,7 @@
|
|||
|
||||
.card.add {
|
||||
min-height: unset; text-align: center; padding: 10px 0px; margin: 0px auto; line-height: 1; transition: $transitionAllCommon;
|
||||
border: 1px solid $colorShapeTertiary; border-radius: 12px; flex-direction: row; justify-content: center; background: $colorBgPrimary;
|
||||
border: 1px solid var(--color-shape-tertiary); border-radius: 12px; flex-direction: row; justify-content: center; background: var(--color-bg-primary);
|
||||
}
|
||||
.card.add.first { margin: 0px; }
|
||||
.card.add {
|
||||
|
|
@ -124,7 +124,7 @@
|
|||
|
||||
.card.add.isOver.bottom::before { top: -6px; }
|
||||
.card.isEditing {
|
||||
.cardContent { border: 2px solid $colorSystemAccent100; padding: 15px; }
|
||||
.cardContent { border: 2px solid var(--color-system-accent-100); padding: 15px; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
.viewContent.viewCalendar { position: relative; height: 100%; }
|
||||
.viewContent.viewCalendar {
|
||||
.table {
|
||||
border-color: $colorShapeSecondary; border-style: solid; border-bottom-width: 1px; display: flex; flex-flow: column; height: 100%;
|
||||
border-color: var(--color-shape-secondary); border-style: solid; border-bottom-width: 1px; display: flex; flex-flow: column; height: 100%;
|
||||
}
|
||||
|
||||
.table {
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
.head { flex-shrink: 0; }
|
||||
.head {
|
||||
.item {
|
||||
@include text-small; padding: 2px 10px; border-color: $colorShapeSecondary; border-style: solid;
|
||||
@include text-small; padding: 2px 10px; border-color: var(--color-shape-secondary); border-style: solid;
|
||||
border-right-width: 1px; border-bottom-width: 1px; text-align: right;
|
||||
}
|
||||
}
|
||||
|
|
@ -22,20 +22,20 @@
|
|||
}
|
||||
|
||||
.day {
|
||||
text-align: left; vertical-align: top; border-color: $colorShapeSecondary; border-style: solid; display: flex; flex-direction: column;
|
||||
text-align: left; vertical-align: top; border-color: var(--color-shape-secondary); border-style: solid; display: flex; flex-direction: column;
|
||||
border-right-width: 1px; border-top-width: 1px; padding: 6px 4px; position: relative; height: 136px;
|
||||
}
|
||||
.day.first { border-top-width: 0px; }
|
||||
|
||||
.day.active {
|
||||
.number { padding: 0px; color: $colorTextInversion; }
|
||||
.number { padding: 0px; color: var(--color-text-inversion); }
|
||||
.number {
|
||||
.inner { background-color: $colorSystemAccent100; border-radius: 12px; padding: 0px 7px; align-self: flex-end; }
|
||||
.inner { background-color: var(--color-system-accent-100); border-radius: 12px; padding: 0px 7px; align-self: flex-end; }
|
||||
}
|
||||
}
|
||||
|
||||
.day.other {
|
||||
.number { color: $colorTextTertiary; }
|
||||
.number { color: var(--color-text-tertiary); }
|
||||
}
|
||||
|
||||
.day {
|
||||
|
|
@ -56,9 +56,9 @@
|
|||
content: ""; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(79,79,79,0); z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
.item:hover::before { background: $colorShapeHighlightMedium; }
|
||||
.item:hover::before { background: var(--color-shape-highlight-medium); }
|
||||
|
||||
.item.more { display: block; color: $colorTextSecondary; }
|
||||
.item.more { display: block; color: var(--color-text-secondary); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,10 +5,10 @@
|
|||
|
||||
.viewContent.viewGrid,
|
||||
.viewContent.viewList {
|
||||
.cell.add { color: $colorControlActive; line-height: 20px; width: 100%; display: block; }
|
||||
.cell.add { color: var(--color-control-active); line-height: 20px; width: 100%; display: block; }
|
||||
.cell.add {
|
||||
.btn { display: inline-block; transition: $transitionAllCommon; }
|
||||
.btn:hover { color: $colorTextPrimary; }
|
||||
.btn:hover { color: var(--color-text-primary); }
|
||||
.btn:hover {
|
||||
.icon.plus { background-image: url('~img/icon/plus/menu1.svg'); }
|
||||
}
|
||||
|
|
@ -22,16 +22,16 @@
|
|||
.viewContent.viewBoard {
|
||||
.card { white-space: normal; }
|
||||
.card {
|
||||
.cellContent { margin-bottom: 4px; @include text-small; color: $colorTextSecondary; }
|
||||
.cellContent { margin-bottom: 4px; @include text-small; color: var(--color-text-secondary); }
|
||||
.cellContent.canEdit { cursor: default; }
|
||||
.cellContent:empty, .cellContent.isEmpty { display: none; }
|
||||
.cellContent.last { margin: 0px; }
|
||||
.cellContent.c-description { color: $colorTextPrimary; }
|
||||
.cellContent.c-description { color: var(--color-text-primary); }
|
||||
.cellContent {
|
||||
.more { vertical-align: top; height: 18px; }
|
||||
}
|
||||
|
||||
.cellContent.isName { @include text-paragraph; color: $colorTextPrimary; display: flex; gap: 0px 6px; position: relative; }
|
||||
.cellContent.isName { @include text-paragraph; color: var(--color-text-primary); display: flex; gap: 0px 6px; position: relative; }
|
||||
.cellContent.isName {
|
||||
.iconObject { position: absolute; left: 0px; top: 0px; margin: 0px; cursor: default; }
|
||||
.name {
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
.row:hover {
|
||||
.icon.dnd { opacity: 1; background-image: url('~img/icon/block/menu1.svg'); }
|
||||
.icon.dnd:hover {
|
||||
background-image: url('~img/icon/block/menu2.svg') !important; border-color: $colorSystemAccent100; box-shadow: 0px 0px 0px 1px $colorSystemAccent100;
|
||||
background-image: url('~img/icon/block/menu2.svg') !important; border-color: var(--color-system-accent-100); box-shadow: 0px 0px 0px 1px var(--color-system-accent-100);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@
|
|||
.row { display: grid; grid-column-gap: 16px; padding: 0px 0px 16px 14px; }
|
||||
|
||||
.card {
|
||||
width: 100%; border: 1px solid $colorShapeHighlightMedium; transition-property: border-color, background; transition-duration: 0.1s;
|
||||
transition-timing-function: $easeInQuint; border-radius: 12px; display: inline-block; background: $colorBgPrimary;
|
||||
width: 100%; border: 1px solid var(--color-shape-highlight-medium); transition-property: border-color, background; transition-duration: 0.1s;
|
||||
transition-timing-function: $easeInQuint; border-radius: 12px; display: inline-block; background: var(--color-bg-primary);
|
||||
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.05); min-height: 72px; position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
.card {
|
||||
.dropTarget { height: 100%; }
|
||||
.dropTarget.isOver { box-shadow: 0px 0px; }
|
||||
.dropTarget.isOver::before { content: ""; position: absolute; background: $colorSystemAccent100; width: 2px; height: 100%; border-radius: 2px; top: 0px; }
|
||||
.dropTarget.isOver::before { content: ""; position: absolute; background: var(--color-system-accent-100); width: 2px; height: 100%; border-radius: 2px; top: 0px; }
|
||||
.dropTarget.isOver.top::before { left: -10px; }
|
||||
.dropTarget.isOver.bottom::before { right: -10px; }
|
||||
|
||||
|
|
@ -32,14 +32,14 @@
|
|||
|
||||
.cover {
|
||||
position: relative; aspect-ratio: 7/3; background-position: top center; display: flex; align-items: center;
|
||||
background-color: $colorShapeHighlightMedium; width: 100%; justify-content: center; border-radius: 12px 12px 0px 0px; overflow: hidden;
|
||||
background-color: var(--color-shape-highlight-medium); width: 100%; justify-content: center; border-radius: 12px 12px 0px 0px; overflow: hidden;
|
||||
}
|
||||
|
||||
.cover {
|
||||
img { width: 100%; height: 100%; object-fit: cover; }
|
||||
|
||||
.inner {
|
||||
position: relative; color: $colorTextTertiary; transition: $transitionAllCommon; width: 100%; height: 100%;
|
||||
position: relative; color: var(--color-text-tertiary); transition: $transitionAllCommon; width: 100%; height: 100%;
|
||||
background-image: url('~img/icon/dataview/gallery-image-preview.svg'); background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
|
|
@ -62,10 +62,10 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.card:hover { border-color: $colorShapeSecondary; background: $colorShapeHighlightLight; }
|
||||
.card:hover { border-color: var(--color-shape-secondary); background: var(--color-shape-highlight-light); }
|
||||
.card:hover {
|
||||
.cover {
|
||||
.inner { color: $colorTextPrimary; }
|
||||
.inner { color: var(--color-text-primary); }
|
||||
.inner .icon.plus { background-image: url('~img/icon/plus/gallery-cover1.svg'); }
|
||||
}
|
||||
|
||||
|
|
@ -87,7 +87,7 @@
|
|||
.itemContent > .inner { padding-top: 12px; }
|
||||
}
|
||||
|
||||
.card.isEditing { border: 2px solid $colorSystemAccent100; }
|
||||
.card.isEditing { border: 2px solid var(--color-system-accent-100); }
|
||||
.card.isEditing {
|
||||
.inner { padding: 15px; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
#graphWrapper { width: 100%; height: 100%; }
|
||||
#graph { width: 100%; height: 100%; }
|
||||
|
||||
canvas { width: 100%; height: 100%; background: $colorBgPrimary; display: block; }
|
||||
canvas { width: 100%; height: 100%; background: var(--color-bg-primary); display: block; }
|
||||
canvas.move { cursor: move; }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
.blocks {
|
||||
.block.blockDataview {
|
||||
.cellHead {
|
||||
@include text-small; text-align: left; color: $colorTextSecondary; font-weight: 400; line-height: 20px; position: relative; height: 38px;
|
||||
@include text-small; text-align: left; color: var(--color-text-secondary); font-weight: 400; line-height: 20px; position: relative; height: 38px;
|
||||
cursor: grab; display: inline-block; vertical-align: top; transition: background-color $transitionCommon;
|
||||
}
|
||||
.cellHead {
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
.cellHead.isDragging { border: 0px; height: 38px; }
|
||||
.cellHead.isDragging::after {
|
||||
content: ""; display: block; width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; z-index: 0; pointer-events: none;
|
||||
background-color: $colorShapeHighlightLight;
|
||||
background-color: var(--color-shape-highlight-light);
|
||||
}
|
||||
.cellHead.isDragging {
|
||||
.resize { display: none; }
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
|
||||
.cellHead.cellKeyHover::after, .cellHead.active::after {
|
||||
content: ""; display: block; width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; z-index: 0; pointer-events: none;
|
||||
background-color: $colorShapeHighlightLight;
|
||||
background-color: var(--color-shape-highlight-light);
|
||||
}
|
||||
|
||||
.cellHead.last::after, .cellHead.active::after { background: none; }
|
||||
|
|
@ -54,15 +54,15 @@
|
|||
.viewContent.viewGrid {
|
||||
.rowHead { display: grid; white-space: nowrap; width: calc(100% - 4px); margin-left: 2px; height: 36px; }
|
||||
|
||||
.loadMore { padding: 10px 2px; box-shadow: 0px 1px $colorShapeSecondary inset; }
|
||||
.loadMore { padding: 10px 2px; box-shadow: 0px 1px var(--color-shape-secondary) inset; }
|
||||
|
||||
.icon.checkbox { vertical-align: top; }
|
||||
.icon.edit { width: 36px; height: 48px; position: absolute; right: 0px; top: 0px; }
|
||||
|
||||
.row { white-space: nowrap; box-shadow: 0px 1px $colorShapeSecondary inset; margin-left: 2px !important; width: calc(100% - 4px); height: 48px; }
|
||||
.row { white-space: nowrap; box-shadow: 0px 1px var(--color-shape-secondary) inset; margin-left: 2px !important; width: calc(100% - 4px); height: 48px; }
|
||||
.row.add { margin-top: -2px; }
|
||||
.row.isArchived *, .row.isDeleted * { text-decoration: line-through; color: $colorControlActive; }
|
||||
.row:hover { background-color: $colorShapeHighlightLight; }
|
||||
.row.isArchived *, .row.isDeleted * { text-decoration: line-through; color: var(--color-control-active); }
|
||||
.row:hover { background-color: var(--color-shape-highlight-light); }
|
||||
|
||||
.row > .selectable,
|
||||
.row > .dropTarget > .selectable { display: grid; }
|
||||
|
|
@ -93,7 +93,7 @@
|
|||
}
|
||||
|
||||
.cell { display: inline-block; height: 48px; padding: 14px; vertical-align: top; position: relative; word-break: break-word; }
|
||||
.cell.cellKeyHover { background-color: $colorShapeHighlightLight; }
|
||||
.cell.cellKeyHover { background-color: var(--color-shape-highlight-light); }
|
||||
|
||||
.cell.isEditing {
|
||||
.cellContent { height: 100% !important; min-width: 300px; padding: 14px; border-radius: 4px; }
|
||||
|
|
@ -133,7 +133,7 @@
|
|||
|
||||
.dropTarget.isOver { box-shadow: 0px 0px; }
|
||||
.dropTarget.isOver::before {
|
||||
content: ""; position: absolute; background: $colorSystemAccent100; width: 100%; height: 2px; border-radius: 2px; left: 0px; z-index: 1;
|
||||
content: ""; position: absolute; background: var(--color-system-accent-100); width: 100%; height: 2px; border-radius: 2px; left: 0px; z-index: 1;
|
||||
}
|
||||
.dropTarget.isOver.top::before { top: -1px; }
|
||||
.dropTarget.isOver.bottom::before { bottom: -1px; }
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
.ReactVirtualized__Grid__innerScrollContainer { overflow-x: auto !important; overflow-y: hidden !important; }
|
||||
|
||||
.row { height: 100%; width: 100%; display: block; white-space: nowrap; position: relative; }
|
||||
.row.isDone * { color: $colorTextSecondary; }
|
||||
.row.isDone * { color: var(--color-text-secondary); }
|
||||
.row.isEditing {
|
||||
.cellContent:not(.isName) { display: none; }
|
||||
}
|
||||
|
|
@ -16,13 +16,13 @@
|
|||
|
||||
.cellContent {
|
||||
display: inline-block; vertical-align: top; @include text-small; line-height: 24px; height: 24px;
|
||||
cursor: default !important; color: $colorTextSecondary;
|
||||
cursor: default !important; color: var(--color-text-secondary);
|
||||
}
|
||||
.cellContent:last-child { margin: 0px; }
|
||||
.cellContent:empty::before, .cellContent.isEmpty::before { display: none; }
|
||||
|
||||
.cellContent::before {
|
||||
content: ""; width: 2px; height: 2px; border-radius: 50%; background: $colorTextSecondary; display: inline-block;
|
||||
content: ""; width: 2px; height: 2px; border-radius: 50%; background: var(--color-text-secondary); display: inline-block;
|
||||
vertical-align: middle; margin: 0px 6px;
|
||||
}
|
||||
.cellContent.first::before { display: none; }
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
.name { @include text-overflow-nw; max-width: 200px; }
|
||||
}
|
||||
|
||||
.cellContent.isName { @include text-paragraph; display: inline-flex; flex-direction: row; align-items: center; color: $colorTextPrimary; }
|
||||
.cellContent.isName { @include text-paragraph; display: inline-flex; flex-direction: row; align-items: center; color: var(--color-text-primary); }
|
||||
.cellContent.isName {
|
||||
.name { display: inline-block; line-height: 24px; vertical-align: top; font-weight: 500; max-width: 500px; }
|
||||
.input.name { padding: 0; @include text-paragraph; }
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
|
||||
.cellContent.c-url,
|
||||
.cellContent.c-email,
|
||||
.cellContent.c-phone { color: $colorTextSecondary; cursor: default !important; }
|
||||
.cellContent.c-phone { color: var(--color-text-secondary); cursor: default !important; }
|
||||
|
||||
.cellContent.c-url,
|
||||
.cellContent.c-email,
|
||||
|
|
@ -95,7 +95,7 @@
|
|||
|
||||
.dropTarget.isOver { box-shadow: 0px 0px; }
|
||||
.dropTarget.isOver::before {
|
||||
content: ""; position: absolute; background: $colorSystemAccent100; width: calc(100% - 28px); height: 2px; border-radius: 2px; left: 14px;
|
||||
content: ""; position: absolute; background: var(--color-system-accent-100); width: calc(100% - 28px); height: 2px; border-radius: 2px; left: 14px;
|
||||
}
|
||||
.dropTarget.isOver.top::before { top: -6px; }
|
||||
.dropTarget.isOver.bottom::before { bottom: 4px; }
|
||||
|
|
|
|||
|
|
@ -14,12 +14,12 @@
|
|||
}
|
||||
|
||||
.block.blockDiv.divLine {
|
||||
.line { height: 1px; border-bottom: 1px solid $colorShapePrimary; }
|
||||
.line { height: 1px; border-bottom: 1px solid var(--color-shape-primary); }
|
||||
}
|
||||
|
||||
.block.blockDiv.divDot {
|
||||
.dots { height: 2px; margin-top: -1px; white-space: nowrap; }
|
||||
.dot { width: 2px; height: 2px; background: $colorControlAccent; margin-right: 18px; display: inline-block; vertical-align: top; }
|
||||
.dot { width: 2px; height: 2px; background: var(--color-control-accent); margin-right: 18px; display: inline-block; vertical-align: top; }
|
||||
.dot:last-child { margin: 0px; }
|
||||
}
|
||||
}
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
.block.blockEmbed {
|
||||
.wrap { padding: 2px 0px; display: flex; flex-direction: column; }
|
||||
.wrap.isEditing { padding: 8px; background-color: $colorShapeHighlightLight; border-radius: 4px; }
|
||||
.wrap.isEditing { padding: 8px; background-color: var(--color-shape-highlight-light); border-radius: 4px; }
|
||||
.wrap.isEditing {
|
||||
.empty { padding-bottom: 18px; }
|
||||
.preview { display: none; }
|
||||
|
|
@ -27,18 +27,9 @@
|
|||
.dimmer { position: absolute; z-index: 1; width: 100%; height: 100%; left: 0px; top: 0px; display: none; }
|
||||
|
||||
.preview {
|
||||
display: none; position: relative; aspect-ratio: 16/9; background-color: $colorShapeHighlightLight; border-radius: 4px;
|
||||
display: none; position: relative; aspect-ratio: 16/9; background-color: var(--color-shape-highlight-light); border-radius: 4px;
|
||||
background-size: 40px; background-position: center; background-repeat: no-repeat;
|
||||
}
|
||||
.preview.embedLatex { background-image: url('~img/icon/block/embed/latex.svg'); }
|
||||
.preview.embedMermaid { background-image: url('~img/icon/block/embed/mermaid.svg'); }
|
||||
.preview.embedYoutube { background-image: url('~img/icon/block/embed/youtube.svg'); }
|
||||
.preview.embedVimeo { background-image: url('~img/icon/block/embed/vimeo.svg'); }
|
||||
.preview.embedGoogleMaps { background-image: url('~img/icon/block/embed/googleMaps.svg'); }
|
||||
.preview.embedSoundcloud { background-image: url('~img/icon/block/embed/soundcloud.svg'); }
|
||||
.preview.embedChart { background-image: url('~img/icon/block/embed/chart.svg'); }
|
||||
.preview.embedMiro { background-image: url('~img/icon/block/embed/miro.svg'); }
|
||||
.preview.embedFigma { background-image: url('~img/icon/block/embed/figma.svg'); }
|
||||
|
||||
#value { font-size: 20px; line-height: 20px; width: 100%; }
|
||||
#value:empty { display: none; }
|
||||
|
|
@ -47,7 +38,7 @@
|
|||
.editableWrap { display: none; margin: 8px 0px 0px 0px; width: 100%; text-align: left; }
|
||||
.editableWrap {
|
||||
#input {
|
||||
background: $colorBgPrimary; border: 1px solid $colorShapeSecondary; text-align: left; padding: 6px 12px; @include text-common;
|
||||
background: var(--color-bg-primary); border: 1px solid var(--color-shape-secondary); text-align: left; padding: 6px 12px; @include text-common;
|
||||
-webkit-user-modify: read-write-plaintext-only; border-radius: 4px; border-radius: 8px;
|
||||
}
|
||||
#placeholder { padding: 6px 12px; }
|
||||
|
|
@ -64,6 +55,13 @@
|
|||
}
|
||||
|
||||
iframe { width: 100%; aspect-ratio: 16/9; border: 0px; display: block; }
|
||||
|
||||
.excalidraw { position: static; }
|
||||
.excalidraw {
|
||||
.scroll-back-to-content { position: absolute; }
|
||||
.ToolIcon__icon { width: 20px; height: 20px; }
|
||||
.Stack_horizontal { white-space: nowrap; @include text-small; }
|
||||
}
|
||||
}
|
||||
|
||||
.block.blockEmbed.isLatex .preview { background-image: url('~img/icon/block/embed/latex.svg'); }
|
||||
|
|
@ -107,7 +105,7 @@
|
|||
.selectWrap { text-align: left; }
|
||||
.selectWrap {
|
||||
.select {
|
||||
border: 0px; color: $colorTextSecondary; @include text-common; border-radius: 0px; padding: 0px 20px 0px 0px;
|
||||
border: 0px; color: var(--color-text-secondary); @include text-common; border-radius: 0px; padding: 0px 20px 0px 0px;
|
||||
display: none; margin-bottom: 8px;
|
||||
}
|
||||
.select {
|
||||
|
|
@ -123,3 +121,11 @@
|
|||
.katex .base { margin-top: 2px; margin-bottom: 2px; }
|
||||
}
|
||||
}
|
||||
|
||||
html.isSelecting {
|
||||
.blocks {
|
||||
.block.blockEmbed {
|
||||
.dimmer { display: block; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
.blocks {
|
||||
.block.blockFeatured {
|
||||
@include text-common; line-height: 28px; color: $colorTextSecondary; padding: 0px 0px 24px 0px; white-space: nowrap; display: flex;
|
||||
@include text-common; line-height: 28px; color: var(--color-text-secondary); padding: 0px 0px 24px 0px; white-space: nowrap; display: flex;
|
||||
margin-top: -3px;
|
||||
}
|
||||
.block.blockFeatured {
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
|
||||
.wrap { white-space: normal; }
|
||||
|
||||
.bullet { width: 4px; height: 4px; border-radius: 100%; background: $colorTextSecondary; display: inline-block; vertical-align: middle; margin: 0px 2px; }
|
||||
.bullet { width: 4px; height: 4px; border-radius: 100%; background: var(--color-text-secondary); display: inline-block; vertical-align: middle; margin: 0px 2px; }
|
||||
|
||||
.cell.canEdit {
|
||||
.cellContent {
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
.cellContent { display: inline; border-radius: 4px; vertical-align: top; padding: 5.5px 6px; transition: background $transitionCommon; cursor: default; }
|
||||
.cellContent.disabled { opacity: 1; }
|
||||
|
||||
.cellContent:not(.disabled):hover, .cellContent:not(.disabled).hover { background: $colorShapeHighlightMedium; }
|
||||
.cellContent:not(.disabled):hover, .cellContent:not(.disabled).hover { background: var(--color-shape-highlight-medium); }
|
||||
.cellContent > .wrap { display: inline; }
|
||||
.cellContent.isName .name { display: inline; }
|
||||
.cellContent {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
.block.blockFile { padding: 6px 0px; white-space: nowrap; }
|
||||
.block.blockFile.withContent { padding: 0px; }
|
||||
.block.blockFile {
|
||||
.loaderWrapper { border-radius: 4px; border: solid 1px $colorShapePrimary; height: 48px; width: 100%; }
|
||||
.loaderWrapper { border-radius: 4px; border: solid 1px var(--color-shape-primary); height: 48px; width: 100%; }
|
||||
.error { margin: 0px; font-size: 12px; line-height: 24px; height: 24px; }
|
||||
|
||||
.name {
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
vertical-align: top; @include text-overflow-nw; margin: 0px 8px 0px 4px;
|
||||
}
|
||||
.size {
|
||||
@include text-common; max-width: 100px; height: 24px; line-height: 24px; color: $colorControlActive;
|
||||
@include text-common; max-width: 100px; height: 24px; line-height: 24px; color: var(--color-control-active);
|
||||
display: inline-block; vertical-align: top; flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,6 @@
|
|||
.blocks {
|
||||
.block.blockIconPage { padding: 0px 0px 16px 0px; }
|
||||
.block.blockIconPage {
|
||||
.iconObject { position: relative; z-index: 2; display: inline-block; box-shadow: 0px 0px 0px 4px $colorBgPrimary; }
|
||||
.iconObject { position: relative; z-index: 2; display: inline-block; box-shadow: 0px 0px 0px 4px var(--color-bg-primary); }
|
||||
}
|
||||
}
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
.block.blockIconUser {
|
||||
.wrap { display: inline-block; position: relative; }
|
||||
|
||||
.iconObject { position: relative; z-index: 3; display: inline-block; box-shadow: 0px 0px 0px 4px $colorBgPrimary; }
|
||||
.iconObject { position: relative; z-index: 3; display: inline-block; box-shadow: 0px 0px 0px 4px var(--color-bg-primary); }
|
||||
.loaderWrapper {
|
||||
position: absolute; left: 50%; top: 50%; z-index: 4; background: rgba(255, 255, 255, 0.5);
|
||||
width: 128px; height: 128px; margin: -64px 0px 0px -64px; border-radius: 100%;
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
> .dropTarget.targetTop { top: -14px; }
|
||||
> .dropTarget.targetBot { bottom: -14px; }
|
||||
> .dropTarget.isOver::before {
|
||||
content: ""; position: absolute; background: $colorSystemAccent100; width: 100%; height: 2px; border-radius: 2px; left: 0px;
|
||||
content: ""; position: absolute; background: var(--color-system-accent-100); width: 100%; height: 2px; border-radius: 2px; left: 0px;
|
||||
}
|
||||
> .dropTarget.isOver.top::before { bottom: 4px; }
|
||||
> .dropTarget.isOver.bottom::before { top: 4px; }
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
> .dropTarget.targetCol { flex-grow: 1; position: relative; display: block; }
|
||||
> .dropTarget.targetCol.isOver.bottom { box-shadow: 0px 0px; }
|
||||
> .dropTarget.targetCol.isOver.bottom::after {
|
||||
content: ""; width: calc(100% - 48px); height: 2px; background: $colorSystemAccent100; position: absolute; left: 48px; top: 4px;
|
||||
content: ""; width: calc(100% - 48px); height: 2px; background: var(--color-system-accent-100); position: absolute; left: 48px; top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@
|
|||
.focusable { border-radius: 4px; }
|
||||
|
||||
.isArchived {
|
||||
.cardName { color: $colorControlActive; }
|
||||
.cardName { color: var(--color-control-active); }
|
||||
.cardName span::before { display: none; }
|
||||
}
|
||||
|
||||
.loading, .deleted { color: $colorControlActive; display: flex; gap: 0px 6px; align-items: center; }
|
||||
.loading, .deleted { color: var(--color-control-active); display: flex; gap: 0px 6px; align-items: center; }
|
||||
.loading, .deleted {
|
||||
.name { display: inline-block; vertical-align: top; max-width: calc(100% - 26px); position: relative; @include text-overflow-nw; }
|
||||
}
|
||||
|
|
@ -41,12 +41,12 @@
|
|||
.cardDescription { @include text-small; line-height: 16px; @include clamp2; margin: 2px 0px 0px 0px; }
|
||||
.cardDescription:empty { margin: 0px; }
|
||||
|
||||
.cardType { @include text-small; color: $colorTextSecondary; line-height: 16px; margin: 2px 0px 0px 0px; }
|
||||
.cardType { @include text-small; color: var(--color-text-secondary); line-height: 16px; margin: 2px 0px 0px 0px; }
|
||||
.cardType:empty { margin: 0px; }
|
||||
.cardType {
|
||||
.item { position: relative; display: inline-block; vertical-align: top; margin: 0px 10px 0px 0px; }
|
||||
.item::after {
|
||||
content: ""; display: block; position: absolute; right: -6px; top: 50%; width: 2px; height: 2px; background: $colorTextSecondary;
|
||||
content: ""; display: block; position: absolute; right: -6px; top: 50%; width: 2px; height: 2px; background: var(--color-text-secondary);
|
||||
margin: -1px 0px 0px 0px;
|
||||
}
|
||||
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
.linkCard.c48.withIcon {
|
||||
.sides { min-height: 80px; }
|
||||
.side.left { padding: 16px 16px 16px 80px; flex-grow: 1; }
|
||||
.iconObject { position: absolute; left: 16px; top: 15px; background-color: $colorShapeTertiary; border-radius: 10px; }
|
||||
.iconObject { position: absolute; left: 16px; top: 15px; background-color: var(--color-shape-tertiary); border-radius: 10px; }
|
||||
}
|
||||
|
||||
.linkCard.c48.withIcon.withCover.isVertical {
|
||||
|
|
@ -78,14 +78,14 @@
|
|||
.linkCard.withCover {
|
||||
.sides { align-items: stretch; }
|
||||
.side.left { width: calc(100% - 28%); border-radius: 12px 0px 0px 12px !important; border-right-width: 0px; }
|
||||
.side.right { width: 28%; display: block; border: 1px solid $colorShapeSecondary; border-left: 0px; }
|
||||
.side.right { width: 28%; display: block; border: 1px solid var(--color-shape-secondary); border-left: 0px; }
|
||||
}
|
||||
|
||||
.linkCard.isVertical { display: block; }
|
||||
.linkCard.isVertical {
|
||||
.sides { flex-direction: column-reverse; }
|
||||
.side.left { width: 100%; border-right-width: 1px; }
|
||||
.side.right { aspect-ratio: 7/3; width: 100%; border-radius: 12px 12px 0px 0px !important; border: 1px solid $colorShapeSecondary; border-bottom: 0px; }
|
||||
.side.right { aspect-ratio: 7/3; width: 100%; border-radius: 12px 12px 0px 0px !important; border: 1px solid var(--color-shape-secondary); border-bottom: 0px; }
|
||||
}
|
||||
|
||||
.linkCard.withCover.isVertical {
|
||||
|
|
@ -106,7 +106,7 @@
|
|||
.relationItem {
|
||||
.div { width: 2px; height: 18px; line-height: 18px; display: inline-block; vertical-align: top; flex-shrink: 0; flex-grow: 0; }
|
||||
.div {
|
||||
.inner { width: 2px; height: 2px; border-radius: 100%; display: inline-block; vertical-align: middle; background: $colorControlActive; }
|
||||
.inner { width: 2px; height: 2px; border-radius: 100%; display: inline-block; vertical-align: middle; background: var(--color-control-active); }
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -120,7 +120,7 @@
|
|||
.description { @include text-overflow-nw; width: 100%; }
|
||||
}
|
||||
|
||||
.cardType { @include text-small; @include text-overflow-nw; color: $colorTextSecondary; flex-shrink: 0; flex-grow: 0; }
|
||||
.cardType { @include text-small; @include text-overflow-nw; color: var(--color-text-secondary); flex-shrink: 0; flex-grow: 0; }
|
||||
}
|
||||
|
||||
.linkCard.c2 {
|
||||
|
|
@ -140,7 +140,7 @@
|
|||
.block.blockLink.card {
|
||||
.linkCard { box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.05); border-radius: 12px; }
|
||||
.linkCard {
|
||||
.side.left { padding: 16px; border: 1px solid $colorShapeSecondary; border-radius: 12px; flex-direction: column; justify-content: center; }
|
||||
.side.left { padding: 16px; border: 1px solid var(--color-shape-secondary); border-radius: 12px; flex-direction: column; justify-content: center; }
|
||||
.side.right { border-radius: 0px 12px 12px 0px; }
|
||||
|
||||
.sides.withBgColor {
|
||||
|
|
@ -156,13 +156,13 @@
|
|||
|
||||
.block.blockLink.text:hover {
|
||||
.linkCard {
|
||||
.cardName .name { border-color: $colorTextPrimary; }
|
||||
.cardName .name { border-color: var(--color-text-primary); }
|
||||
}
|
||||
}
|
||||
|
||||
.block.blockLink.card:hover {
|
||||
.linkCard.card {
|
||||
.side.left, .side.right { border-color: $colorShapePrimary; }
|
||||
.side.left, .side.right { border-color: var(--color-shape-primary); }
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
.icon.resize { width: 20px; height: 20px; right: 0px; bottom: 0px; cursor: nwse-resize; background-image: url('~img/icon/resize.svg'); }
|
||||
.icon.download { width: 28px; height: 28px; right: 8px; top: 8px; background-image: url('~img/icon/download.svg'); }
|
||||
|
||||
.loaderWrapper { border-radius: 4px; border: solid 1px $colorShapePrimary; height: 48px; width: 100%; }
|
||||
.loaderWrapper { border-radius: 4px; border: solid 1px var(--color-shape-primary); height: 48px; width: 100%; }
|
||||
.error { margin: 0px; @include text-small; line-height: 22px; }
|
||||
|
||||
.wrap { max-width: 100%; position: relative; display: inline-block; overflow: hidden; }
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
video { width: 100%; }
|
||||
|
||||
.pdfWrapper {
|
||||
width: 100%; overflow: hidden; position: relative; padding: 12px; box-shadow: 0px 0px 0px 1px $colorShapePrimary;
|
||||
width: 100%; overflow: hidden; position: relative; padding: 12px; box-shadow: 0px 0px 0px 1px var(--color-shape-primary);
|
||||
border-radius: 0px; display: inline-flex; flex-direction: column; gap: 6px 0px;
|
||||
}
|
||||
.pdfWrapper {
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
.info {
|
||||
.name { height: 24px; line-height: 24px; display: inline-block; vertical-align: top; @include text-overflow-nw; }
|
||||
.size {
|
||||
@include text-common; max-width: 100px; height: 24px; line-height: 24px; color: $colorControlActive; margin: 0px 8px;
|
||||
@include text-common; max-width: 100px; height: 24px; line-height: 24px; color: var(--color-control-active); margin: 0px 8px;
|
||||
display: inline-block; vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
.icon.play { display: none; }
|
||||
}
|
||||
|
||||
.block.blockMedia.isAudio.withContent > .wrapContent { background-color: $colorShapeTertiary; }
|
||||
.block.blockMedia.isAudio.withContent > .wrapContent { background-color: var(--color-shape-tertiary); }
|
||||
.block.blockMedia.isAudio > .wrapContent > .selectable > .dropTarget > .focusable > .wrap { width: 100%; padding: 16px; border-radius: 6px; overflow: hidden; }
|
||||
|
||||
.block.blockMedia > .wrapContent > .selectable.isSelectionSelected::after { left: 0px; width: 100%; border-radius: 4px; }
|
||||
|
|
|
|||
|
|
@ -17,19 +17,19 @@
|
|||
padding: 6px 2px 6px 0px; line-height: 20px; width: 30%; min-width: 40px; flex-shrink: 0; @include text-overflow-nw;
|
||||
display: flex; align-items: flex-start; gap: 0px 6px;
|
||||
}
|
||||
.info.noValue { width: 100%; color: $colorTextTertiary; }
|
||||
.info.noValue { width: 100%; color: var(--color-text-tertiary); }
|
||||
|
||||
.info {
|
||||
.name {
|
||||
display: inline-block; vertical-align: top; @include text-common; line-height: 20px; @include text-overflow-nw;
|
||||
color: $colorTextSecondary; width: 100%;
|
||||
color: var(--color-text-secondary); width: 100%;
|
||||
}
|
||||
.icon.lock { width: 8px; height: 20px; background-image: url('~img/icon/lock.svg'); flex-shrink: 0; }
|
||||
.icon.ghost { width: 20px; height: 20px; }
|
||||
}
|
||||
|
||||
.wrap.isDeleted {
|
||||
.info .name { color: $colorTextSecondary; }
|
||||
.info .name { color: var(--color-text-secondary); }
|
||||
}
|
||||
|
||||
.cellContent.canEdit {
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
}
|
||||
|
||||
.cell { @include text-common; width: 70%; position: relative; padding: 5px 8px; border-radius: 4px; transition: background $transitionCommon; }
|
||||
.cell.canEdit:hover { background: $colorShapeHighlightLight; }
|
||||
.cell.canEdit:hover { background: var(--color-shape-highlight-light); }
|
||||
|
||||
.cell.c-select { padding: 8px; line-height: 18px; }
|
||||
.cell.c-select {
|
||||
|
|
|
|||
|
|
@ -26,11 +26,11 @@
|
|||
.handle {
|
||||
.inner { height: 22px; width: 2px; padding: 2px 0px; position: relative; }
|
||||
.inner::after {
|
||||
content: ""; display: block; background-color: $colorSystemAccent100; width: 100%; height: 100%; background-position: center;
|
||||
content: ""; display: block; background-color: var(--color-system-accent-100); width: 100%; height: 100%; background-position: center;
|
||||
background-repeat: no-repeat; border-radius: 3px; position: relative; z-index: 1;
|
||||
}
|
||||
.inner::before {
|
||||
content: ""; height: 100%; width: 2px; position: absolute; left: 50%; margin-left: -1px; top: 0px; background: $colorBgPrimary; z-index: 0;
|
||||
content: ""; height: 100%; width: 2px; position: absolute; left: 50%; margin-left: -1px; top: 0px; background: var(--color-bg-primary); z-index: 0;
|
||||
}
|
||||
}
|
||||
.handle:hover, .handle.isActive {
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
.plusButton { z-index: 10; }
|
||||
.plusButton {
|
||||
.icon {
|
||||
background-color: $colorShapeSecondary; background-image: url('~img/icon/table/plus.svg'); background-size: 10px; opacity: 0;
|
||||
background-color: var(--color-shape-secondary); background-image: url('~img/icon/table/plus.svg'); background-size: 10px; opacity: 0;
|
||||
transition: $transitionAllCommon; width: 100%; height: 100%; border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
.plusButton.horizontal { height: 18px; width: 100%; left: 0px; bottom: -18px; padding-top: 4px; }
|
||||
.plusButton.circle { position: absolute; height: 18px; width: 18px; right: -18px; bottom: 0px; padding-top: 4px; padding-left: 4px; opacity: 1; }
|
||||
.plusButton.circle {
|
||||
.icon { border-radius: 50%; background-color: $colorShapeSecondary; }
|
||||
.icon { border-radius: 50%; background-color: var(--color-shape-secondary); }
|
||||
}
|
||||
|
||||
.plusButton:hover, .plusButton.active {
|
||||
|
|
@ -67,12 +67,12 @@
|
|||
|
||||
.table.isClone { border-radius: 4px; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2); border: 2px solid $tableBorderOrange; }
|
||||
.table.isClone {
|
||||
.handleColumn { display: block; border-color: $colorSystemAccent100; }
|
||||
.handleColumn { display: block; border-color: var(--color-system-accent-100); }
|
||||
}
|
||||
|
||||
.row { display: grid; position: relative; border-right: 1px solid $colorShapePrimary; }
|
||||
.row { display: grid; position: relative; border-right: 1px solid var(--color-shape-primary); }
|
||||
.row:first-child { border-radius: 4px 4px 0px 0px; }
|
||||
.row:last-child { border-bottom: 1px solid $colorShapePrimary; border-radius: 0px 0px 4px 4px; }
|
||||
.row:last-child { border-bottom: 1px solid var(--color-shape-primary); border-radius: 0px 0px 4px 4px; }
|
||||
|
||||
.row:first-child .cell:first-child { border-radius: 4px 0px 0px 0px; }
|
||||
.row:first-child .cell:first-child {
|
||||
|
|
@ -98,13 +98,13 @@
|
|||
}
|
||||
|
||||
.row.isHeader {
|
||||
.cell { background-color: $colorShapeTertiary; }
|
||||
.cell { background-color: var(--color-shape-tertiary); }
|
||||
.block { font-weight: 500; }
|
||||
}
|
||||
|
||||
.cell {
|
||||
@include text-common; vertical-align: top; position: relative; cursor: text; flex-shrink: 0; background: $colorBgPrimary;
|
||||
color: $colorShapePrimary; border-left: 1px solid $colorShapePrimary; border-top: 1px solid $colorShapePrimary;
|
||||
@include text-common; vertical-align: top; position: relative; cursor: text; flex-shrink: 0; background: var(--color-bg-primary);
|
||||
color: var(--color-shape-primary); border-left: 1px solid var(--color-shape-primary); border-top: 1px solid var(--color-shape-primary);
|
||||
}
|
||||
|
||||
.cell.isHighlightedColumn.isFirst { border-radius: 4px 4px 0px 0px; }
|
||||
|
|
@ -149,7 +149,7 @@
|
|||
.resize { width: 6px; height: 100%; position: absolute; right: -3px; top: 0px; cursor: col-resize; z-index: 3; }
|
||||
.click { width: 100%; height: 100%; }
|
||||
|
||||
.block { height: 100%; border: 0px !important; padding: 0px; margin: 0px; color: $colorTextPrimary; }
|
||||
.block { height: 100%; border: 0px !important; padding: 0px; margin: 0px; color: var(--color-text-primary); }
|
||||
.block {
|
||||
.selectable { flex-grow: 1; }
|
||||
.wrapContent, .wrap, .flex, .dropTarget { height: 100%; }
|
||||
|
|
@ -174,7 +174,7 @@
|
|||
}
|
||||
}
|
||||
.icon.menu:hover {
|
||||
.inner { box-shadow: 0px 0px 0px 1px $colorShapePrimary; background-color: $colorBgPrimary; }
|
||||
.inner { box-shadow: 0px 0px 0px 1px var(--color-shape-primary); background-color: var(--color-bg-primary); }
|
||||
}
|
||||
|
||||
.block.blockText { @include text-common; }
|
||||
|
|
|
|||
|
|
@ -3,12 +3,12 @@
|
|||
.blocks {
|
||||
.block.blockTableOfContents { padding: 15px 0px; }
|
||||
.block.blockTableOfContents {
|
||||
.item { color: $colorTextSecondary; padding: 4px 0px; @include text-common; }
|
||||
.item { color: var(--color-text-secondary); padding: 4px 0px; @include text-common; }
|
||||
.item {
|
||||
span { border-bottom: 0.05em solid rgba(146, 144, 130, 0.5); transition: $transitionAllCommon; }
|
||||
}
|
||||
.item:hover {
|
||||
span { border-color: $colorTextSecondary; }
|
||||
span { border-color: var(--color-text-secondary); }
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,9 @@
|
|||
.block.blockText { @include text-paragraph; word-wrap: break-word; }
|
||||
.block.blockText {
|
||||
.placeholder { display: none; }
|
||||
.disabled { color: $colorControlActive; opacity: 1 !important; }
|
||||
.disabled { color: var(--color-control-active); opacity: 1 !important; }
|
||||
|
||||
/* Markup */
|
||||
|
||||
smile {
|
||||
img { position: static !important; left: auto !important; top: auto !important; margin: 0px !important; vertical-align: top; }
|
||||
|
|
@ -12,9 +14,7 @@
|
|||
smile * { display: inline; vertical-align: middle; }
|
||||
smile .loaderWrapper { display: inline-block; }
|
||||
|
||||
markupcode {
|
||||
display: inline; font-family: 'Plex'; border-radius: 4px; background: $colorShapeSecondary; padding: 2px 4px;
|
||||
}
|
||||
markupcode { display: inline; font-family: 'Plex'; border-radius: 4px; background: var(--color-shape-secondary); padding: 1px 4px; }
|
||||
|
||||
markupemoji { display: inline; user-select: all; }
|
||||
markupemoji * { user-select: all; }
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
markupmention.withImage.c28 name markupBgcolor:first-child { margin-left: -27px; padding-left: 27px; }
|
||||
markupmention.withImage.c32 name markupBgcolor:first-child { margin-left: -34px; padding-left: 34px; }
|
||||
markupmention:hover {
|
||||
name::before { border-color: $colorTextPrimary; }
|
||||
name::before { border-color: var(--color-text-primary); }
|
||||
}
|
||||
|
||||
markupbold { font-weight: 600; }
|
||||
|
|
@ -102,7 +102,7 @@
|
|||
|
||||
/* IsChecked */
|
||||
|
||||
.block.blockText.isChecked > .wrapContent > .selectable > .dropTarget * { color: $colorControlActive !important; }
|
||||
.block.blockText.isChecked > .wrapContent > .selectable > .dropTarget * { color: var(--color-control-active) !important; }
|
||||
|
||||
/* Title */
|
||||
|
||||
|
|
@ -115,7 +115,7 @@
|
|||
> .dropTarget {
|
||||
> .flex {
|
||||
> .editableWrap {
|
||||
.placeholder { color: $colorControlActive; position: absolute; z-index: 0; left: 0px; top: 0px; display: none; width: 100%; height: 100%; cursor: text; }
|
||||
.placeholder { color: var(--color-control-active); position: absolute; z-index: 0; left: 0px; top: 0px; display: none; width: 100%; height: 100%; cursor: text; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -187,7 +187,7 @@
|
|||
|
||||
.block.blockText.textCallout { min-width: 130px; }
|
||||
.block.blockText.textCallout {
|
||||
> .wrapContent { border-radius: 2px; margin: 6px 0px; background-color: $colorShapeTertiary; }
|
||||
> .wrapContent { border-radius: 2px; margin: 6px 0px; background-color: var(--color-shape-tertiary); }
|
||||
> .wrapContent {
|
||||
> .selectable { position: static; }
|
||||
> .selectable {
|
||||
|
|
@ -205,7 +205,7 @@
|
|||
}
|
||||
|
||||
> .dropTarget.targetBot { display: block; height: 16px; position: static; }
|
||||
> .dropTarget.targetBot.isOver.bottom { box-shadow: 0px -2px 0px $colorSystemAccent100 inset; }
|
||||
> .dropTarget.targetBot.isOver.bottom { box-shadow: 0px -2px 0px var(--color-system-accent-100) inset; }
|
||||
|
||||
> .children { padding-right: 16px; }
|
||||
}
|
||||
|
|
@ -218,7 +218,7 @@
|
|||
|
||||
.block.blockText.textCode { padding: 6px 0px; }
|
||||
.block.blockText.textCode {
|
||||
> .wrapContent { border-radius: 2px; background-color: $colorShapeTertiary; }
|
||||
> .wrapContent { border-radius: 2px; background-color: var(--color-shape-tertiary); }
|
||||
> .wrapContent {
|
||||
> .selectable { border-radius: 6px; }
|
||||
> .selectable {
|
||||
|
|
@ -233,7 +233,7 @@
|
|||
|
||||
.additional { position: absolute; top: 9px; left: 0px; z-index: 1; display: block; padding: 0px 16px; width: 100%; }
|
||||
.additional {
|
||||
.select { border: 0px; color: $colorControlActive; border-radius: 0px; padding: 0px 20px 0px 0px; }
|
||||
.select { border: 0px; color: var(--color-control-active); border-radius: 0px; padding: 0px 20px 0px 0px; }
|
||||
.select {
|
||||
.item { @include text-common; }
|
||||
.name { overflow: visible; }
|
||||
|
|
@ -246,7 +246,7 @@
|
|||
}
|
||||
.buttons {
|
||||
.btn {
|
||||
padding: 0px; height: 20px; line-height: 20px; color: $colorControlActive; @include text-common;
|
||||
padding: 0px; height: 20px; line-height: 20px; color: var(--color-control-active); @include text-common;
|
||||
display: flex; flex-direction: row; gap: 0px 4px; align-items: center;
|
||||
}
|
||||
.btn {
|
||||
|
|
@ -283,7 +283,7 @@
|
|||
.block.blockText.textNumbered > .wrapContent > .dropTarget.targetBot.isOver.bottom,
|
||||
.block.blockText.textCheckbox > .wrapContent > .dropTarget.targetBot.isOver.bottom,
|
||||
.block.blockText.textToggle > .wrapContent > .dropTarget.targetBot.isOver.bottom
|
||||
{ box-shadow: 0px -2px 0px $colorSystemAccent100 inset; }
|
||||
{ box-shadow: 0px -2px 0px var(--color-system-accent-100) inset; }
|
||||
|
||||
.block.blockText.textParagraph > .wrapContent.bgColor > .selectable > .dropTarget,
|
||||
.block.blockText.textHeader1 > .wrapContent.bgColor > .selectable > .dropTarget,
|
||||
|
|
|
|||
|
|
@ -9,10 +9,10 @@
|
|||
.wrap { display: flex; justify-content: flex-start; gap: 8px; flex-wrap: wrap; }
|
||||
|
||||
.item {
|
||||
position: relative; padding: 3px 8px; border-radius: 2px; border-radius: 6px; border: 1px solid $colorShapePrimary;
|
||||
display: inline-block; display: flex; align-items: center; gap: 0px 4px; color: $colorTextSecondary; @include text-overflow-nw;
|
||||
position: relative; padding: 3px 8px; border-radius: 2px; border-radius: 6px; border: 1px solid var(--color-shape-primary);
|
||||
display: inline-block; display: flex; align-items: center; gap: 0px 4px; color: var(--color-text-secondary); @include text-overflow-nw;
|
||||
}
|
||||
.item.hover, .item.active { background: $colorShapeHighlightMedium; }
|
||||
.item.hover, .item.active { background: var(--color-shape-highlight-medium); }
|
||||
|
||||
.item {
|
||||
.icon { flex-shrink: 0; }
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
html, body { height: 100%; }
|
||||
|
||||
body {
|
||||
font-family: 'Inter'; @include text-common; color: $colorTextPrimary; overflow-x: hidden; overflow-y: auto; background: $colorBgPrimary;
|
||||
font-family: 'Inter'; @include text-common; color: var(--color-text-primary); overflow-x: hidden; overflow-y: auto; background: var(--color-bg-primary);
|
||||
-webkit-font-smoothing: antialiased; backface-visibility: hidden; transform-style: flat; overscroll-behavior: none;
|
||||
}
|
||||
body.colResize { cursor: col-resize !important; }
|
||||
|
|
@ -18,7 +18,7 @@ body.isFullScreen {
|
|||
}
|
||||
|
||||
:focus { outline: 0px; }
|
||||
::selection { background-color: $colorSystemSelection; }
|
||||
::selection { background-color: var(--color-system-selection); }
|
||||
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
|
|
@ -44,11 +44,11 @@ input, textarea, select { font-family: 'Inter'; }
|
|||
.anim.to { opacity: 0; transform: translate3d(0px,-20px,0px); }
|
||||
|
||||
.logo { width: 120px; height: 24px; background: url('~img/logo/color.svg') no-repeat; background-size: 100%; }
|
||||
.version { @include text-small; color: $colorTextInversion; transition-delay: 0.25s; }
|
||||
.version { @include text-small; color: #fff; transition-delay: 0.25s; }
|
||||
}
|
||||
|
||||
#globalFade {
|
||||
position: fixed; z-index: 999; background: $colorBgPrimary; left: 0px; top: 0px; width: 100%; height: 100%; display: none; opacity: 0;
|
||||
position: fixed; z-index: 999; background: var(--color-bg-primary); left: 0px; top: 0px; width: 100%; height: 100%; display: none; opacity: 0;
|
||||
transition: opacity 0.25s ease-in-out;
|
||||
}
|
||||
#globalFade.show { opacity: 1; }
|
||||
|
|
@ -63,8 +63,6 @@ html.platformLinux {
|
|||
}
|
||||
|
||||
html.platformWindows, html.platformLinux {
|
||||
#drag { -webkit-app-region: no-drag; }
|
||||
|
||||
::-webkit-scrollbar { width: 10px; height: 6px; }
|
||||
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.5); border-radius: 6px; }
|
||||
::-webkit-scrollbar-corner { background-color: transparent; }
|
||||
|
|
@ -86,13 +84,13 @@ html.platformWindows, html.platformLinux {
|
|||
.noAnimation { transition: none !important; }
|
||||
.over { overflow: hidden !important; }
|
||||
.overPopup { overflow: hidden !important; }
|
||||
.empty, .emptyText { color: $colorTextTertiary; }
|
||||
.isDone { color: $colorTextSecondary; }
|
||||
.empty, .emptyText { color: var(--color-text-tertiary); }
|
||||
.isDone { color: var(--color-text-secondary); }
|
||||
.placeholder {
|
||||
pointer-events: none; color: $colorTextTertiary; position: absolute; left: 0px; top: 0px; z-index: 0; width: 100%; height: 100%; cursor: text;
|
||||
pointer-events: none; color: var(--color-text-tertiary); position: absolute; left: 0px; top: 0px; z-index: 0; width: 100%; height: 100%; cursor: text;
|
||||
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
|
||||
}
|
||||
::-webkit-input-placeholder { color: $colorTextTertiary !important; }
|
||||
::-webkit-input-placeholder { color: var(--color-text-tertiary) !important; }
|
||||
.isBlurred { filter: blur(7px); }
|
||||
.animationWord { display: inline-block; }
|
||||
|
||||
|
|
@ -103,43 +101,43 @@ html.platformWindows, html.platformLinux {
|
|||
|
||||
.editableWrap { position: relative; }
|
||||
|
||||
a { color: $colorTextPrimary; }
|
||||
search { background: yellow !important; color: $colorTextPrimary !important; border-radius: 2px; display: inline; }
|
||||
a { color: var(--color-text-primary); }
|
||||
search { background: yellow !important; color: var(--color-text-primary) !important; border-radius: 2px; display: inline; }
|
||||
search.active { background: orange !important; }
|
||||
|
||||
.dropTarget.isOver.middle { background: $colorSystemDropZone !important; }
|
||||
.dropTarget.isOver.top { box-shadow: 0px -2px 0px $colorSystemAccent100; }
|
||||
.dropTarget.isOver.bottom { box-shadow: 0px 2px 0px $colorSystemAccent100; }
|
||||
.dropTarget.isOver.left { box-shadow: -2px 0px 0px $colorSystemAccent100; }
|
||||
.dropTarget.isOver.right { box-shadow: 2px 0px 0px $colorSystemAccent100; }
|
||||
.dropTarget.isOver.middle { background: var(--color-system-drop-zone) !important; }
|
||||
.dropTarget.isOver.top { box-shadow: 0px -2px 0px var(--color-system-accent-100); }
|
||||
.dropTarget.isOver.bottom { box-shadow: 0px 2px 0px var(--color-system-accent-100); }
|
||||
.dropTarget.isOver.left { box-shadow: -2px 0px 0px var(--color-system-accent-100); }
|
||||
.dropTarget.isOver.right { box-shadow: 2px 0px 0px var(--color-system-accent-100); }
|
||||
|
||||
/* DropTarget for Layout.Row */
|
||||
.dropTarget.targetTop.isOver.top { box-shadow: 0px -2px 0px $colorSystemAccent100 inset; }
|
||||
.dropTarget.targetBot.isOver.bottom { box-shadow: 0px 2px 0px $colorSystemAccent100 inset; }
|
||||
.dropTarget.targetTop.isOver.top { box-shadow: 0px -2px 0px var(--color-system-accent-100) inset; }
|
||||
.dropTarget.targetBot.isOver.bottom { box-shadow: 0px 2px 0px var(--color-system-accent-100) inset; }
|
||||
|
||||
.isSelectionSelected { position: relative; }
|
||||
|
||||
.selectable.isSelectionSelected::after,
|
||||
.block.isSelectionSelected > .wrapContent > .selectable::after
|
||||
{
|
||||
display: block; position: absolute; left: -2px; top: 0px; width: calc(100% + 4px); height: 100%; background-color: $colorSystemSelection;
|
||||
display: block; position: absolute; left: -2px; top: 0px; width: calc(100% + 4px); height: 100%; background-color: var(--color-system-selection);
|
||||
pointer-events: none; z-index: 10; content: ""; border-radius: 2px;
|
||||
}
|
||||
|
||||
.textColor-default { color: $colorTextPrimary !important; }
|
||||
.textColor-black { color: $colorTextPrimary !important; }
|
||||
.textColor-grey { color: $colorControlActive !important; }
|
||||
.textColor-yellow { color: $colorYellow !important; }
|
||||
.textColor-orange { color: $colorOrange !important; }
|
||||
.textColor-red { color: $colorRed !important; }
|
||||
.textColor-pink { color: $colorPink !important; }
|
||||
.textColor-purple { color: $colorPurple !important; }
|
||||
.textColor-blue { color: $colorBlue !important; }
|
||||
.textColor-ice { color: $colorIce !important; }
|
||||
.textColor-teal { color: $colorTeal !important; }
|
||||
.textColor-lime { color: $colorLime !important; }
|
||||
.textColor-default { color: var(--color-text-primary) !important; }
|
||||
.textColor-black { color: var(--color-text-primary) !important; }
|
||||
.textColor-grey { color: var(--color-control-active) !important; }
|
||||
.textColor-yellow { color: var(--color-yellow) !important; }
|
||||
.textColor-orange { color: var(--color-orange) !important; }
|
||||
.textColor-red { color: var(--color-red) !important; }
|
||||
.textColor-pink { color: var(--color-pink) !important; }
|
||||
.textColor-purple { color: var(--color-purple) !important; }
|
||||
.textColor-blue { color: var(--color-blue) !important; }
|
||||
.textColor-ice { color: var(--color-ice) !important; }
|
||||
.textColor-teal { color: var(--color-teal) !important; }
|
||||
.textColor-lime { color: var(--color-lime) !important; }
|
||||
|
||||
.bgColor-grey { background: $colorShapeTertiary !important; }
|
||||
.bgColor-grey { background: var(--color-shape-tertiary) !important; }
|
||||
.bgColor-yellow { background: #fef9cc !important; }
|
||||
.bgColor-orange { background: #fef3c5 !important; }
|
||||
.bgColor-red { background: #ffebe5 !important; }
|
||||
|
|
@ -150,40 +148,40 @@ search.active { background: orange !important; }
|
|||
.bgColor-teal { background: #d6f5f3 !important; }
|
||||
.bgColor-lime { background: #e3f7d0 !important; }
|
||||
|
||||
.isMultiSelect.archive { color: $colorTextSecondary; background: $colorShapeTertiary; }
|
||||
.isMultiSelect.tagColor-default { color: $colorTextPrimary !important; background: $colorBgPrimary !important; box-shadow: 0px 0px 0px 1px $colorShapeSecondary inset; }
|
||||
.isMultiSelect.archive { color: var(--color-text-secondary); background: var(--color-shape-tertiary); }
|
||||
.isMultiSelect.tagColor-default { color: var(--color-text-primary) !important; background: var(--color-bg-primary) !important; box-shadow: 0px 0px 0px 1px var(--color-shape-secondary) inset; }
|
||||
.isMultiSelect.tagColor-grey { color: #8c9ea5 !important; background: #ebeff1 !important; }
|
||||
.isMultiSelect.tagColor-yellow { color: #b2a616 !important; background: #fbf5b8 !important; }
|
||||
.isMultiSelect.tagColor-orange { color: #d3720d !important; background: #ffEcc8 !important; }
|
||||
.isMultiSelect.tagColor-red { color: #e2400c !important; background: #ffe5de !important; }
|
||||
.isMultiSelect.tagColor-pink { color: #ca1b8e !important; background: #fddcf2 !important; }
|
||||
.isMultiSelect.tagColor-purple { color: #9e30c4 !important; background: #f1dbf8 !important; }
|
||||
.isMultiSelect.tagColor-blue { color: $colorBlue !important; background: #dce1fb !important; }
|
||||
.isMultiSelect.tagColor-blue { color: var(--color-blue) !important; background: #dce1fb !important; }
|
||||
.isMultiSelect.tagColor-ice { color: #1c8bca !important; background: #cfedfe !important; }
|
||||
.isMultiSelect.tagColor-teal { color: #0caaa3 !important; background: #d4f5f3 !important; }
|
||||
.isMultiSelect.tagColor-lime { color: #64b90f !important; background: #e3f7d0 !important; }
|
||||
|
||||
.isSelect.tagColor-default { color: $colorTextPrimary !important; }
|
||||
.isSelect.tagColor-black { color: $colorTextPrimary !important; }
|
||||
.isSelect.tagColor-grey { color: $colorControlActive !important; }
|
||||
.isSelect.tagColor-yellow { color: $colorYellow !important; }
|
||||
.isSelect.tagColor-orange { color: $colorOrange !important; }
|
||||
.isSelect.tagColor-red { color: $colorRed !important; }
|
||||
.isSelect.tagColor-pink { color: $colorPink !important; }
|
||||
.isSelect.tagColor-purple { color: $colorPurple !important; }
|
||||
.isSelect.tagColor-blue { color: $colorBlue !important; }
|
||||
.isSelect.tagColor-ice { color: $colorIce !important; }
|
||||
.isSelect.tagColor-teal { color: $colorTeal !important; }
|
||||
.isSelect.tagColor-lime { color: $colorLime !important; }
|
||||
.isSelect.tagColor-default { color: var(--color-text-primary) !important; }
|
||||
.isSelect.tagColor-black { color: var(--color-text-primary) !important; }
|
||||
.isSelect.tagColor-grey { color: var(--color-control-active) !important; }
|
||||
.isSelect.tagColor-yellow { color: var(--color-yellow) !important; }
|
||||
.isSelect.tagColor-orange { color: var(--color-orange) !important; }
|
||||
.isSelect.tagColor-red { color: var(--color-red) !important; }
|
||||
.isSelect.tagColor-pink { color: var(--color-pink) !important; }
|
||||
.isSelect.tagColor-purple { color: var(--color-purple) !important; }
|
||||
.isSelect.tagColor-blue { color: var(--color-blue) !important; }
|
||||
.isSelect.tagColor-ice { color: var(--color-ice) !important; }
|
||||
.isSelect.tagColor-teal { color: var(--color-teal) !important; }
|
||||
.isSelect.tagColor-lime { color: var(--color-lime) !important; }
|
||||
|
||||
.brokenMedia {
|
||||
@include text-common; position: relative; width: 100%; line-height: 20px; padding: 11px 13px; border-radius: 6px; border: solid 1px $colorShapeSecondary;
|
||||
color: $colorControlActive; height: 44px;
|
||||
@include text-common; position: relative; width: 100%; line-height: 20px; padding: 11px 13px; border-radius: 6px; border: solid 1px var(--color-shape-secondary);
|
||||
color: var(--color-control-active); height: 44px;
|
||||
}
|
||||
.brokenMedia {
|
||||
img:before {
|
||||
content: " "; display: block; position: absolute; left: 0px; top: 0px; height: 100%; width: 100%;
|
||||
background: $colorBgPrimary; border-radius: inherit;
|
||||
background: var(--color-bg-primary); border-radius: inherit;
|
||||
}
|
||||
|
||||
img:after {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
@import "~scss/_vars";
|
||||
|
||||
.cover {
|
||||
background-repeat: no-repeat; background-size: cover; background-position: top center; color: $colorBgPrimary; position: fixed; left: 0px;
|
||||
top: 0px; width: 100%; height: 100%; background-color: $colorTextPrimary;
|
||||
background-repeat: no-repeat; background-size: cover; background-position: top center; color: var(--color-bg-primary); position: fixed; left: 0px;
|
||||
top: 0px; width: 100%; height: 100%; background-color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.cover.type2.white { background-color: $colorBgPrimary !important; }
|
||||
.cover.type2.white { background-color: var(--color-bg-primary) !important; }
|
||||
.cover.type2.yellow { background-color: #fee874 !important; }
|
||||
.cover.type2.orange { background-color: #ffb522 !important; }
|
||||
.cover.type2.red { background-color: #f55522 !important; }
|
||||
|
|
@ -16,14 +16,14 @@
|
|||
.cover.type2.ice { background-color: #88cdf3 !important; }
|
||||
.cover.type2.teal { background-color: #9bb0b7 !important; }
|
||||
.cover.type2.green { background-color: #136E41 !important; }
|
||||
.cover.type2.lightgrey { background-color: $colorShapeSecondary !important; }
|
||||
.cover.type2.darkgrey { background: $colorControlActive !important; }
|
||||
.cover.type2.black { background-color: $colorTextPrimary !important; }
|
||||
.cover.type2.lightgrey { background-color: var(--color-shape-secondary) !important; }
|
||||
.cover.type2.darkgrey { background: var(--color-control-active) !important; }
|
||||
.cover.type2.black { background-color: var(--color-text-primary) !important; }
|
||||
|
||||
.cover.type3.yellow { background-image: linear-gradient(180deg, $colorSystemAccent100 0%, $colorYellow 105.47%); }
|
||||
.cover.type3.red { background-image: linear-gradient(180deg, $colorRed 0%, $colorPink 105.47%); }
|
||||
.cover.type3.blue { background-image: linear-gradient(180deg, $colorPurple 0%, $colorBlue 105.47%); }
|
||||
.cover.type3.teal { background-image: linear-gradient(180deg, $colorIce 0%, $colorTeal 105.47%); }
|
||||
.cover.type3.yellow { background-image: linear-gradient(180deg, var(--color-system-accent-100) 0%, var(--color-yellow) 105.47%); }
|
||||
.cover.type3.red { background-image: linear-gradient(180deg, var(--color-red) 0%, var(--color-pink) 105.47%); }
|
||||
.cover.type3.blue { background-image: linear-gradient(180deg, var(--color-purple) 0%, var(--color-blue) 105.47%); }
|
||||
.cover.type3.teal { background-image: linear-gradient(180deg, var(--color-ice) 0%, var(--color-teal) 105.47%); }
|
||||
|
||||
.cover.type3.pinkOrange { background-image: linear-gradient(180deg, #d8a4e1 0%, #ffcc81 100%); }
|
||||
.cover.type3.bluePink { background-image: linear-gradient(180deg, #73b7f0 0%, #f3bfac 100%); }
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@import "~scss/_vars";
|
||||
|
||||
.deleteWrapper { position: absolute; left: 0px; top: 0px; z-index: 20; background: $colorBgPrimary; width: 100%; height: 100%; }
|
||||
.deleteWrapper { position: absolute; left: 0px; top: 0px; z-index: 20; background: var(--color-bg-primary); width: 100%; height: 100%; }
|
||||
.deleteWrapper {
|
||||
.mid { position: absolute; width: 400px; height: 200px; margin: -100px 0px 0px -200px; left: 50%; top: 50%; text-align: center; }
|
||||
.icon.ghost { width: 64px; height: 64px; }
|
||||
|
|
|
|||
|
|
@ -2,6 +2,6 @@
|
|||
|
||||
.dotIndicator { display: flex; justify-content: center; align-items: center; gap: 0px 6px; }
|
||||
.dotIndicator {
|
||||
span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: $colorTextPrimary; }
|
||||
span.active { background-color: $colorShapePrimary; opacity: 0.9; }
|
||||
span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-text-primary); }
|
||||
span.active { background-color: var(--color-shape-primary); opacity: 0.9; }
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
.isDraggable.isClone { opacity: 0.75; position: absolute !important; left: 0px; top: 0px; }
|
||||
.isDraggable.isDragging { opacity: 0.5; }
|
||||
.isDraggable.isOver::after {
|
||||
content: ""; position: absolute; top: 0px; width: 2px; height: 100%; display: block; background: $colorSystemAccent100;
|
||||
content: ""; position: absolute; top: 0px; width: 2px; height: 100%; display: block; background: var(--color-system-accent-100);
|
||||
}
|
||||
.isDraggable.isOver.left::after { left: -4px; }
|
||||
.isDraggable.isOver.right::after { right: -4px; }
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
.blocks { margin-left: -48px; }
|
||||
|
||||
.note {
|
||||
background: linear-gradient(270deg, #262cd2 0%, #0c82ef 100%); border-radius: 4px; height: 80px; color: $colorBgPrimary; position: absolute;
|
||||
background: linear-gradient(270deg, #262cd2 0%, #0c82ef 100%); border-radius: 4px; height: 80px; color: var(--color-bg-primary); position: absolute;
|
||||
left: 16px; top: 38px; width: calc(100% - 32px); line-height: 80px; text-align: center; z-index: 2;
|
||||
}
|
||||
.note {
|
||||
|
|
@ -42,11 +42,11 @@
|
|||
}
|
||||
|
||||
.btn {
|
||||
background: $colorBgPrimary; font-weight: 500; font-size: 14px; color: $colorControlActive; display: inline-block;
|
||||
background: var(--color-bg-primary); font-weight: 500; font-size: 14px; color: var(--color-control-active); display: inline-block;
|
||||
transition: background $transitionCommon, color $transitionCommon; height: 28px; padding: 0px 8px 0px 6px; border-radius: 6px; display: flex;
|
||||
flex-direction: row; align-items: center;
|
||||
}
|
||||
.btn:hover, .btn.hover { background: $colorShapeHighlightMedium; color: $colorTextPrimary; }
|
||||
.btn:hover, .btn.hover { background: var(--color-shape-highlight-medium); color: var(--color-text-primary); }
|
||||
|
||||
.btn {
|
||||
.icon { width: 20px; height: 20px; margin-right: 4px; }
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
}
|
||||
.editorControls:hover, .editorControls.hover, .editorControls.active { opacity: 1; }
|
||||
|
||||
.editorControls.isDraggingOver { background: $colorSystemDropZone; }
|
||||
.editorControls.isDraggingOver { background: var(--color-system-drop-zone); }
|
||||
|
||||
.editorWrapper.isResizing #editorSize { visibility: visible; }
|
||||
|
||||
|
|
@ -80,7 +80,7 @@
|
|||
.wrapContent { width: 100% !important; }
|
||||
.wrapContent {
|
||||
.link { white-space: nowrap; }
|
||||
.note { text-align: right; color: $colorTextTertiary; display: block; }
|
||||
.note { text-align: right; color: var(--color-text-tertiary); display: block; }
|
||||
|
||||
.icon { width: 20px; height: 20px; margin-top: -4px; }
|
||||
.icon.help { background-image: url('~img/icon/help.svg'); }
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
.emptySearch { height: 100%; padding: 0px 16px; text-align: center; }
|
||||
.emptySearch {
|
||||
b { display: block; font-weight: 400; color: $colorTextPrimary; }
|
||||
b { display: block; font-weight: 400; color: var(--color-text-primary); }
|
||||
span { @include text-overflow-nw; max-width: 100%; display: block; }
|
||||
.txt { line-height: 24px; color: $colorControlActive; width: 100%; }
|
||||
.txt { line-height: 24px; color: var(--color-control-active); width: 100%; }
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@import "~scss/_vars";
|
||||
|
||||
.error { color: $colorRed; margin: 1em 0px; font-size: 14px; line-height: 22px; letter-spacing: 0.2px; word-break: break-word; user-select: text !important; }
|
||||
.error { color: var(--color-red); margin: 1em 0px; font-size: 14px; line-height: 22px; letter-spacing: 0.2px; word-break: break-word; user-select: text !important; }
|
||||
.error:empty { display: none; }
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
.footer { position: fixed; bottom: 0px; width: 100%; z-index: 20; }
|
||||
.footer {
|
||||
.copy {
|
||||
width: 120px; position: absolute; left: 50%; bottom: 12px; z-index: 10; text-align: center; margin-left: -60px; color: $colorBgPrimary;
|
||||
width: 120px; position: absolute; left: 50%; bottom: 12px; z-index: 10; text-align: center; margin-left: -60px; color: var(--color-bg-primary);
|
||||
opacity: 0.6;
|
||||
}
|
||||
.label.disclaimer {
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
.iconWrap { width: 36px; height: 36px; position: relative; z-index: 10; position: absolute; bottom: 14px; }
|
||||
.iconWrap {
|
||||
.bg {
|
||||
background-color: $colorBgPrimary; border: 1px solid $colorShapeSecondary; border-radius: 50%; width: 100%; height: 100%;
|
||||
background-color: var(--color-bg-primary); border: 1px solid var(--color-shape-secondary); border-radius: 50%; width: 100%; height: 100%;
|
||||
position: absolute; left: 0px; top: 0px; transition: transform 0.3s $easeInQuint;
|
||||
}
|
||||
.icon { width: 20px; height: 20px; position: absolute; left: 50%; top: 50%; margin: -10px 0px 0px -10px; z-index: 1; }
|
||||
|
|
|
|||
|
|
@ -23,15 +23,15 @@
|
|||
.tabs { @include text-paragraph; display: inline-flex; flex-direction: row; align-items: center; height: 100%; -webkit-app-region: no-drag; }
|
||||
.tabs {
|
||||
.tab {
|
||||
font-weight: 700; color: $colorControlActive; transition: $transitionAllCommon; text-align: center;
|
||||
font-weight: 700; color: var(--color-control-active); transition: $transitionAllCommon; text-align: center;
|
||||
vertical-align: top; padding: 0px 16px; display: flex; align-items: center; height: 100%; border-bottom: 1px solid rgba(0,0,0,0);
|
||||
}
|
||||
.tab:hover { color: $colorTextPrimary; }
|
||||
.tab.active { color: $colorTextPrimary; border-color: $colorTextPrimary; }
|
||||
.tab:hover { color: var(--color-text-primary); }
|
||||
.tab.active { color: var(--color-text-primary); border-color: var(--color-text-primary); }
|
||||
}
|
||||
|
||||
.headerBanner {
|
||||
position: relative; display: flex; align-items: center; gap: 0px 16px; height: 32px; padding: 6px 10px; @include text-small; border-radius: 6px; background: $colorShapeTertiary;
|
||||
position: relative; display: flex; align-items: center; gap: 0px 16px; height: 32px; padding: 6px 10px; @include text-small; border-radius: 6px; background: var(--color-shape-tertiary);
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
.headerBanner {
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
.icon { -webkit-app-region: no-drag; flex-shrink: 0; }
|
||||
|
||||
.icon { width: 28px; height: 28px; background-size: 20px; border-radius: 6px; }
|
||||
.icon:hover, .icon.hover { background-color: $colorShapeTertiary; }
|
||||
.icon:hover, .icon.hover { background-color: var(--color-shape-tertiary); }
|
||||
|
||||
.icon.toggle { background-image: url('~img/icon/sidebar/toggle0.svg'); }
|
||||
.icon.toggle:hover { background-image: url('~img/icon/sidebar/toggle1.svg'); }
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.header.mainHistory { height: 38px; width: calc(100% - 254px); background: $colorBgPrimary; }
|
||||
.header.mainHistory { height: 38px; width: calc(100% - 254px); background: var(--color-bg-primary); }
|
||||
.header.mainHistory {
|
||||
.side.left, .side.right { width: unset; }
|
||||
|
||||
|
|
@ -84,16 +84,16 @@
|
|||
}
|
||||
|
||||
.item {
|
||||
color: $colorTextSecondary; transition: $transitionAllCommon; height: 20px; line-height: 20px;
|
||||
color: var(--color-text-secondary); transition: $transitionAllCommon; height: 20px; line-height: 20px;
|
||||
display: inline-block; vertical-align: middle; white-space: nowrap; -webkit-app-region: no-drag;
|
||||
}
|
||||
.item {
|
||||
.icon.arrow { width: 20px; height: 20px; background-image: url('~img/arrow/history0.svg'); margin: 0px; vertical-align: top; }
|
||||
}
|
||||
.item.orange { color: $colorOrange !important; font-weight: 500; }
|
||||
.item.orange { color: var(--color-system-accent-100) !important; font-weight: 500; }
|
||||
|
||||
.item.grey:hover { color: $colorTextPrimary; }
|
||||
.item.orange:hover { color: $colorSystemAccent100 !important; }
|
||||
.item.grey:hover { color: var(--color-text-primary); }
|
||||
.item.orange:hover { color: var(--color-system-accent-100) !important; }
|
||||
|
||||
.item:hover {
|
||||
.icon.arrow { background-image: url('~img/arrow/history1.svg'); }
|
||||
|
|
@ -101,7 +101,7 @@
|
|||
}
|
||||
.header.mainHistory.snapLeft { right: 254px; }
|
||||
|
||||
.header.isCommon { background: $colorBgPrimary; height: 38px; }
|
||||
.header.isCommon { background: var(--color-bg-primary); height: 38px; }
|
||||
.header.isCommon {
|
||||
.path { border: 1px solid rgba(0,0,0,0); padding: 0px 10px; }
|
||||
.path {
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
.name { @include text-overflow-nw; }
|
||||
.iconObject { flex-shrink: 0; }
|
||||
}
|
||||
.path:hover { border-color: $colorShapeSecondary; }
|
||||
.path:hover { border-color: var(--color-shape-secondary); }
|
||||
}
|
||||
|
||||
.header.mainGraph {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
@import "~scss/_vars";
|
||||
|
||||
.highlightMark { position: absolute; width: 10px; height: 10px; right: 0; border-radius: 50%; background: $colorSystemAccent100; }
|
||||
.highlightMark { position: absolute; width: 10px; height: 10px; right: 0; border-radius: 50%; background: var(--color-system-accent-100); }
|
||||
|
|
@ -39,13 +39,13 @@
|
|||
.iconObject.c42 { width: 42px; height: 42px; }
|
||||
.iconObject.c44 { width: 44px; height: 44px; }
|
||||
.iconObject.c48 { display: block; width: 48px; height: 48px; overflow: hidden; }
|
||||
.iconObject.c56 { display: block; width: 56px; height: 56px; border-radius: 14px; overflow: hidden; background-color: $colorShapeTertiary; }
|
||||
.iconObject.c64 { display: block; width: 64px; height: 64px; border-radius: 14px; overflow: hidden; background-color: $colorShapeTertiary; }
|
||||
.iconObject.c80 { display: block; width: 80px; height: 80px; border-radius: 14px; overflow: hidden; background-color: $colorShapeTertiary; }
|
||||
.iconObject.c96 { display: block; width: 96px; height: 96px; border-radius: 20px; overflow: hidden; background-color: $colorShapeTertiary; }
|
||||
.iconObject.c108 { display: block; width: 108px; height: 108px; border-radius: 20px; overflow: hidden; background-color: $colorShapeTertiary; }
|
||||
.iconObject.c112 { display: block; width: 112px; height: 112px; border-radius: 20px; overflow: hidden; background-color: $colorShapeTertiary; }
|
||||
.iconObject.c128 { display: block; width: 128px; height: 128px; border-radius: 20px; overflow: hidden; background-color: $colorShapeTertiary; }
|
||||
.iconObject.c56 { display: block; width: 56px; height: 56px; border-radius: 14px; overflow: hidden; background-color: var(--color-shape-tertiary); }
|
||||
.iconObject.c64 { display: block; width: 64px; height: 64px; border-radius: 14px; overflow: hidden; background-color: var(--color-shape-tertiary); }
|
||||
.iconObject.c80 { display: block; width: 80px; height: 80px; border-radius: 14px; overflow: hidden; background-color: var(--color-shape-tertiary); }
|
||||
.iconObject.c96 { display: block; width: 96px; height: 96px; border-radius: 20px; overflow: hidden; background-color: var(--color-shape-tertiary); }
|
||||
.iconObject.c108 { display: block; width: 108px; height: 108px; border-radius: 20px; overflow: hidden; background-color: var(--color-shape-tertiary); }
|
||||
.iconObject.c112 { display: block; width: 112px; height: 112px; border-radius: 20px; overflow: hidden; background-color: var(--color-shape-tertiary); }
|
||||
.iconObject.c128 { display: block; width: 128px; height: 128px; border-radius: 20px; overflow: hidden; background-color: var(--color-shape-tertiary); }
|
||||
|
||||
.iconObject.c56, .iconObject.c80, .iconObject.c96, .iconObject.c128 {
|
||||
.iconImage { width: 100%; height: 100%; left: 0px; top: 0px; margin: 0px; }
|
||||
|
|
@ -55,10 +55,10 @@
|
|||
.iconImage { width: 100%; height: 100%; margin: 0px; left: 0px; top: 0px; }
|
||||
}
|
||||
|
||||
.iconObject.c40.isRelation, .iconObject.c48.isRelation { border-radius: 8px; background-color: $colorShapeTertiary; }
|
||||
.iconObject.c40.isRelation, .iconObject.c48.isRelation { border-radius: 8px; background-color: var(--color-shape-tertiary); }
|
||||
.iconObject.c40.withLetter, .iconObject.c48.withLetter { border-radius: 8px; }
|
||||
|
||||
.iconObject.withLetter { background-color: $colorShapeTertiary; }
|
||||
.iconObject.withLetter { background-color: var(--color-shape-tertiary); }
|
||||
|
||||
.iconObject.withImage { border-radius: 4px !important; background-color: unset !important; }
|
||||
.iconObject.withImage.c96 { border-radius: 6px !important; }
|
||||
|
|
@ -73,4 +73,4 @@
|
|||
.iconObject.isSpaceView.c108,
|
||||
.iconObject.isSpaceView.c112,
|
||||
.iconObject.isSpaceView.c128 { border-radius: 4px !important; }
|
||||
.iconObject.withOption.isSpaceView { background: $colorControlAccent !important; }
|
||||
.iconObject.withOption.isSpaceView { background: var(--color-control-accent) !important; }
|
||||
|
|
@ -8,13 +8,13 @@
|
|||
}
|
||||
|
||||
@keyframes dots-light {
|
||||
0% { background-color: $colorTextPrimary; }
|
||||
32% { background-color: $colorTextPrimary; }
|
||||
0% { background-color: var(--color-text-primary); }
|
||||
32% { background-color: var(--color-text-primary); }
|
||||
100% { background-color: rgba(0,0,0,0); }
|
||||
}
|
||||
|
||||
.loader {
|
||||
border: 2px solid $colorShapeSecondary; border-radius: 100%; width: 24px; height: 24px; border-left: 2px solid $colorControlActive; position: absolute;
|
||||
border: 2px solid var(--color-shape-secondary); border-radius: 100%; width: 24px; height: 24px; border-left: 2px solid var(--color-control-active); position: absolute;
|
||||
left: 50%; top: 50%; margin: -12px 0px 0px -12px; transform: translateZ(0); animation: rotate 0.8s infinite linear;
|
||||
}
|
||||
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
.dots {
|
||||
.dot {
|
||||
width: 4px; height: 4px; border-radius: 50%; animation: dots-light 0.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
|
||||
display: inline-block; vertical-align: top; background-color: rgba(0,0,0,0); margin-right: 8px; border: 1px solid $colorControlAccent;
|
||||
display: inline-block; vertical-align: top; background-color: rgba(0,0,0,0); margin-right: 8px; border: 1px solid var(--color-control-accent);
|
||||
}
|
||||
.dot:last-child { margin: 0px; }
|
||||
.dot:nth-child(2) { animation-delay: 0.2s; }
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
.mediaAudio { width: 100%; }
|
||||
.mediaAudio {
|
||||
.controls { width: 100%; min-width: 160px; position: relative; text-align: left; color: $colorTextPrimary; }
|
||||
.controls { width: 100%; min-width: 160px; position: relative; text-align: left; color: var(--color-text-primary); }
|
||||
.controls {
|
||||
.input-drag {
|
||||
.icon { cursor: default; }
|
||||
|
|
@ -27,9 +27,9 @@
|
|||
.input-drag { display: inline-block; vertical-align: top; height: 20px; }
|
||||
.input-drag {
|
||||
.icon { width: 6px; height: 6px; border: 0px; background: none; }
|
||||
.bullet { width: 6px; height: 6px; border-radius: 100%; background: $colorSystemAccent100; }
|
||||
.fill { background: $colorSystemAccent100; }
|
||||
.back { background: $colorShapeHighlightMedium; }
|
||||
.bullet { width: 6px; height: 6px; border-radius: 100%; background: var(--color-system-accent-100); }
|
||||
.fill { background: var(--color-system-accent-100); }
|
||||
.back { background: var(--color-shape-highlight-medium); }
|
||||
}
|
||||
|
||||
#time { margin: 6px 0px; width: 100%; display: block; }
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import "~scss/_vars";
|
||||
|
||||
.pager {
|
||||
text-align: center; color: $colorControlActive; white-space: nowrap; @include text-common; user-select: none;
|
||||
text-align: center; color: var(--color-control-active); white-space: nowrap; @include text-common; user-select: none;
|
||||
line-height: 20px; display: flex; align-items: center; justify-content: center; gap: 0px 8px;
|
||||
}
|
||||
.pager.isShort { gap: 0px 18px; }
|
||||
|
|
@ -10,10 +10,10 @@
|
|||
min-width: 24px; display: inline-block; padding: 0px 2px; transition: $transitionAllCommon; text-align: center;
|
||||
vertical-align: top; line-height: 20px;
|
||||
}
|
||||
.pageItem:hover, .pageItem.active { color: $colorTextPrimary; }
|
||||
.pageItem:hover, .pageItem.active { color: var(--color-text-primary); }
|
||||
|
||||
.pageItem.list { cursor: default; }
|
||||
.pageItem.list:hover { color: $colorControlActive; }
|
||||
.pageItem.list:hover { color: var(--color-control-active); }
|
||||
|
||||
.dots { min-width: 24px; display: inline-block; padding: 0px 2px; text-align: center; vertical-align: top; line-height: 24px; }
|
||||
|
||||
|
|
|
|||
|
|
@ -3,17 +3,17 @@
|
|||
.previewWrapper { position: absolute; left: 0px; top: 0px; width: 320px; z-index: 1000; display: none; opacity: 0; }
|
||||
.previewWrapper.anim { transition-duration: 0.3s; transition-timing-function: $easeInQuint; transition-property: opacity, transform; }
|
||||
.previewWrapper {
|
||||
.content { background: $colorBgPrimary; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2); border-radius: 8px; position: relative; height: 100%; overflow: hidden; }
|
||||
.content { background: var(--color-bg-primary); box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2); border-radius: 8px; position: relative; height: 100%; overflow: hidden; }
|
||||
.loaderWrapper { height: 24px !important; margin: 16px auto; border: 0px !important; }
|
||||
.polygon { position: absolute; left: 0px; width: 100%; }
|
||||
|
||||
.head {
|
||||
padding: 10px 12px 12px 12px; letter-spacing: -0.08px; color: $colorControlActive; font-weight: 500;
|
||||
position: absolute; left: 0px; width: 100%; border-top: 1px solid $colorShapeSecondary; bottom: 0px; padding-bottom: 11px;
|
||||
padding: 10px 12px 12px 12px; letter-spacing: -0.08px; color: var(--color-control-active); font-weight: 500;
|
||||
position: absolute; left: 0px; width: 100%; border-top: 1px solid var(--color-shape-secondary); bottom: 0px; padding-bottom: 11px;
|
||||
}
|
||||
.head {
|
||||
.item { display: inline-block; vertical-align: top; margin-right: 16px; transition: $transitionAllCommon; }
|
||||
.item:hover { color: $colorTextPrimary; }
|
||||
.item { display: inline-block; vertical-align: top; margin-right: 16px; transition: $transitionAllCommon; cursor: default; }
|
||||
.item:hover { color: var(--color-text-primary); }
|
||||
.item:last-child { margin: 0px; }
|
||||
}
|
||||
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
}
|
||||
|
||||
.previewGraph {
|
||||
background: $colorBgPrimary; height: auto; padding: 8px 12px; border: 1px solid $colorShapeSecondary; border-radius: 8px; width: 320px;
|
||||
background: var(--color-bg-primary); height: auto; padding: 8px 12px; border: 1px solid var(--color-shape-secondary); border-radius: 8px; width: 320px;
|
||||
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
}
|
||||
.name { @include text-common; text-overflow: unset; @include clamp2; white-space: normal; font-weight: 500; width: calc(100% - 22px); }
|
||||
.descr { @include text-small; text-overflow: unset; @include clamp2; white-space: normal; }
|
||||
.featured { @include text-very-small; color: $colorControlActive; }
|
||||
.featured { @include text-very-small; color: var(--color-control-active); }
|
||||
}
|
||||
|
||||
@import "./link.scss";
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
@import "~scss/_vars";
|
||||
|
||||
.previewLink {
|
||||
.link { @include text-small; height: 18px; margin-bottom: 2px; color: $colorTextSecondary; @include text-overflow-nw; }
|
||||
.name { @include text-common; font-weight: 500; height: 22px; color: $colorTextPrimary; @include text-overflow-nw; margin-bottom: 2px; }
|
||||
.link { @include text-small; height: 18px; margin-bottom: 2px; color: var(--color-text-secondary); @include text-overflow-nw; }
|
||||
.name { @include text-common; font-weight: 500; height: 22px; color: var(--color-text-primary); @include text-overflow-nw; margin-bottom: 2px; }
|
||||
.descr {
|
||||
@include text-small; @include clamp2; height: 36px; color: $colorTextPrimary; margin: 2px 0px 0px 0px;
|
||||
@include text-small; @include clamp2; height: 36px; color: var(--color-text-primary); margin: 2px 0px 0px 0px;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 100%; height: 112px; background-repeat: no-repeat; background-size: cover; background-position: center center;
|
||||
border-bottom: 1px solid $colorShapeSecondary;
|
||||
border-bottom: 1px solid var(--color-shape-secondary);
|
||||
}
|
||||
|
||||
.icon.fav { width: 16px; height: 16px; margin: -4px 6px 0px 0px; }
|
||||
|
|
|
|||
|
|
@ -2,34 +2,34 @@
|
|||
|
||||
.previewObject { width: 344px; height: 216px; border-radius: 8px; overflow: hidden; position: relative; }
|
||||
.previewObject {
|
||||
.loaderWrapper { width: 100%; height: 100% !important; margin: 0px; border: 1px solid $colorShapeSecondary; border-radius: 8px; }
|
||||
.loaderWrapper { width: 100%; height: 100% !important; margin: 0px; border: 1px solid var(--color-shape-secondary); border-radius: 8px; }
|
||||
.icon.logo { position: absolute; right: 6px; top: 6px; width: 28px; height: 28px; background-image: url('~img/icon/type/logo.svg'); z-index: 1; }
|
||||
|
||||
.moreWrapper {
|
||||
position: absolute; z-index: 2; right: 8px; top: 8px; border-radius: 6px; width: 28px; height: 28px; display: flex;
|
||||
align-items: center; justify-content: center; background: $colorShapeTertiary; opacity: 0; transition: $transitionAllCommon;
|
||||
align-items: center; justify-content: center; background: var(--color-shape-tertiary); opacity: 0; transition: $transitionAllCommon;
|
||||
}
|
||||
.moreWrapper {
|
||||
.icon { width: 20px; height: 20px; background-image: url('~img/icon/menu/action/more0.svg'); }
|
||||
}
|
||||
|
||||
.scroller { padding: 32px 40px 16px 40px; position: relative; z-index: 1; overflow: hidden; height: calc(100% - 1px); }
|
||||
.border { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; border: 1px solid $colorShapeSecondary; border-radius: 8px; z-index: 1; }
|
||||
.border { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; border: 1px solid var(--color-shape-secondary); border-radius: 8px; z-index: 1; }
|
||||
.cover { position: absolute; height: 86px; border-radius: 8px 8px 0px 0px; }
|
||||
|
||||
.heading { display: block; margin-bottom: 14px; position: relative; z-index: 1; }
|
||||
.heading {
|
||||
.iconObject { display: inline-block; background-color: $colorShapeTertiary; border-radius: 8px; margin: 0px 0px 2px 0px; box-shadow: 0px 0px 0px 2px $colorBgPrimary inset; }
|
||||
.iconObject { display: inline-block; background-color: var(--color-shape-tertiary); border-radius: 8px; margin: 0px 0px 2px 0px; box-shadow: 0px 0px 0px 2px var(--color-bg-primary) inset; }
|
||||
.iconObject {
|
||||
.iconImage { border: 2px solid $colorBgPrimary; }
|
||||
.iconImage { border: 2px solid var(--color-bg-primary); }
|
||||
}
|
||||
.iconObject.isTask, .iconObject.isBookmark { background: none; position: absolute; top: 2px; left: -24px; box-shadow: 0px 0px !important; }
|
||||
.name { display: block; @include text-paragraph; @include text-overflow-nw; font-weight: 700; position: relative; width: 100%; }
|
||||
.description { @include text-small; @include text-overflow-nw; }
|
||||
|
||||
.featured { width: 25px; height: 4px; background: $colorShapeSecondary; }
|
||||
.featured { width: 25px; height: 4px; background: var(--color-shape-secondary); }
|
||||
.featured {
|
||||
.bullet { width: 2px; height: 2px; border-radius: 50%; background: $colorControlActive; display: inline-block; vertical-align: middle; margin: -1px 4px 0px 4px; }
|
||||
.bullet { width: 2px; height: 2px; border-radius: 50%; background: var(--color-control-active); display: inline-block; vertical-align: middle; margin: -1px 4px 0px 4px; }
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
.icon.toggle { background-image: url('~img/icon/object/preview/toggle.svg'); }
|
||||
|
||||
.number {
|
||||
min-width: 16px; @include text-very-small; line-height: 16px; text-align: center; color: $colorTextSecondary; margin-right: 4px; flex-shrink: 0;
|
||||
min-width: 16px; @include text-very-small; line-height: 16px; text-align: center; color: var(--color-text-secondary); margin-right: 4px; flex-shrink: 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
.bookmark {
|
||||
.line { height: 4px; }
|
||||
|
||||
.side.left { width: 66.66%; border: 1px solid $colorShapeSecondary; border-right: 0px; border-radius: 8px 0px 0px 8px; padding: 15px 16px 12px 16px; }
|
||||
.side.left { width: 66.66%; border: 1px solid var(--color-shape-secondary); border-right: 0px; border-radius: 8px 0px 0px 8px; padding: 15px 16px 12px 16px; }
|
||||
.side.left {
|
||||
.name { margin-bottom: 10px; }
|
||||
.name {
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.line { margin: 5px 0px; height: 6px; background: $colorShapeSecondary; display: inline-block; vertical-align: top; width: 100%; }
|
||||
.line { margin: 5px 0px; height: 6px; background: var(--color-shape-secondary); display: inline-block; vertical-align: top; width: 100%; }
|
||||
.line.odd { width: 50%; }
|
||||
}
|
||||
.children { width: 100%; }
|
||||
|
|
@ -157,7 +157,7 @@
|
|||
|
||||
.previewObject.blank {
|
||||
.heading {
|
||||
.name { color: $colorTextTertiary; }
|
||||
.name { color: var(--color-text-tertiary); }
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,13 +13,13 @@
|
|||
.progress {
|
||||
.inner {
|
||||
position: absolute; left: 50%; top: 50%; box-shadow: 0px 6px 24px rgba(0, 0, 0, 0.2); height: 72px; width: 384px; cursor: grab;
|
||||
border-radius: 12px; text-align: center; background: $colorBgPrimary; overflow: hidden; margin: -36px 0px 0px -192px; padding: 12px 16px;
|
||||
border-radius: 12px; text-align: center; background: var(--color-bg-primary); overflow: hidden; margin: -36px 0px 0px -192px; padding: 12px 16px;
|
||||
transition-property: opacity, transform; transition-duration: 0.05s; transition-timing-function: ease-in-out; pointer-events: all;
|
||||
}
|
||||
.inner {
|
||||
.label { position: absolute; left: 16px; top: 12px; z-index: 1; color: $colorTextPrimary; white-space: nowrap; @include text-paragraph; }
|
||||
.bar { width: calc(100% - 32px); height: 8px; background: $colorShapeTertiary; overflow: hidden; border-radius: 8px; position: absolute; bottom: 16px; left: 16px; }
|
||||
.fill { position: absolute; left: 0px; top: 0px; height: 100%; background: $colorControlAccent; transition: width 0.2s linear; }
|
||||
.label { position: absolute; left: 16px; top: 12px; z-index: 1; color: var(--color-text-primary); white-space: nowrap; @include text-paragraph; }
|
||||
.bar { width: calc(100% - 32px); height: 8px; background: var(--color-shape-tertiary); overflow: hidden; border-radius: 8px; position: absolute; bottom: 16px; left: 16px; }
|
||||
.fill { position: absolute; left: 0px; top: 0px; height: 100%; background: var(--color-control-accent); transition: width 0.2s linear; }
|
||||
}
|
||||
|
||||
.icon.close { width: 20px; height: 20px; position: absolute; top: 14px; right: 14px; background-image: url('~img/icon/progress/close0.svg'); }
|
||||
|
|
|
|||
|
|
@ -3,12 +3,12 @@
|
|||
.progressBar {
|
||||
.bar { position: relative; overflow: hidden; height: 12px; border-radius: 4px; display: flex; flex-direction: row; gap: 0px 2px; }
|
||||
.bar {
|
||||
.fill { height: 100%; background-color: $colorSystemAccent25; min-width: 6px; }
|
||||
.fill.isActive { background-color: $colorSystemAccent100; }
|
||||
.fill.empty { background-color: $colorShapeTertiary; }
|
||||
.fill { height: 100%; background-color: var(--color-system-accent-25); min-width: 6px; }
|
||||
.fill.isActive { background-color: var(--color-system-accent-100); }
|
||||
.fill.empty { background-color: var(--color-shape-tertiary); }
|
||||
}
|
||||
.labels { display: flex; justify-content: space-between; }
|
||||
.labels {
|
||||
.label { @include text-small; padding-top: 8px; color: $colorTextSecondary; }
|
||||
.label { @include text-small; padding-top: 8px; color: var(--color-text-secondary); }
|
||||
}
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
#selection { position: relative; user-select: none; }
|
||||
#selection * { user-select: none; }
|
||||
#selection-rect {
|
||||
position: absolute; left: 0px; top: 0px; width: 0px; height: 0px; display: none; z-index: 20; background: $colorSystemSelection;
|
||||
position: absolute; left: 0px; top: 0px; width: 0px; height: 0px; display: none; z-index: 20; background: var(--color-system-selection);
|
||||
border: 0.05em solid #2aa7ee; pointer-events: none; border-radius: 2px;
|
||||
}
|
||||
#selection-rect.fromPopup { z-index: 102; }
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
}
|
||||
|
||||
.sidebar {
|
||||
position: fixed; background-color: $colorShapeTertiary; z-index: 21; border-radius: 12px; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2);
|
||||
position: fixed; background-color: var(--color-shape-tertiary); z-index: 21; border-radius: 12px; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2);
|
||||
user-select: none; transition: none;
|
||||
}
|
||||
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
> .head { height: 52px; cursor: default; }
|
||||
> .head {
|
||||
.icon { display: block; -webkit-app-region: no-drag; }
|
||||
.icon:hover { background-color: $colorShapeHighlightMedium; }
|
||||
.icon:hover { background-color: var(--color-shape-highlight-medium); }
|
||||
}
|
||||
> .body { height: calc(100% - 52px); }
|
||||
}
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
> .head { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; padding: 0px 16px 0px 0px; height: 12px; cursor: grab; }
|
||||
> .head {
|
||||
.icon { width: 28px; height: 28px; background-size: 20px; border-radius: 6px; cursor: default; display: none; }
|
||||
.icon:hover { background-color: $colorShapeHighlightMedium; }
|
||||
.icon:hover { background-color: var(--color-shape-highlight-medium); }
|
||||
.icon.toggle { background-image: url('~img/icon/sidebar/toggle0.svg'); }
|
||||
.icon.toggle:hover { background-image: url('~img/icon/sidebar/toggle1.svg'); }
|
||||
}
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
width: 12px; height: 32px;
|
||||
}
|
||||
.resize-handle::after {
|
||||
content: ''; position: absolute; left: 6px; top: 0px; width: 6px; height: 100%; background-color: $colorShapeSecondary;
|
||||
content: ''; position: absolute; left: 6px; top: 0px; width: 6px; height: 100%; background-color: var(--color-shape-secondary);
|
||||
border-radius: 3px; opacity: 0; transition: $transitionAllCommon;
|
||||
}
|
||||
}
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
.resize-h:active {
|
||||
.resize-handle { height: 64px; margin-top: -32px; }
|
||||
}
|
||||
.resize-handle:hover::after, .resize-handle:active::after { background-color: $colorShapePrimary; }
|
||||
.resize-handle:hover::after, .resize-handle:active::after { background-color: var(--color-shape-primary); }
|
||||
|
||||
.resize-v { height: 10px; width: 100%; position: absolute; bottom: -5px; left: 0px; cursor: row-resize; }
|
||||
.loaderWrapper { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; }
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import "~scss/_vars";
|
||||
|
||||
.sync {
|
||||
height: 18px; display: flex; flex-direction: row; align-items: center; @include text-small; color: $colorTextSecondary; background: $colorShapeTertiary;
|
||||
height: 18px; display: flex; flex-direction: row; align-items: center; @include text-small; color: var(--color-text-secondary); background: var(--color-shape-tertiary);
|
||||
border-radius: 4px; padding: 0px 6px; gap: 0px 4px;
|
||||
}
|
||||
.sync {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
@import "~scss/_vars";
|
||||
|
||||
.toast {
|
||||
position: fixed; left: 0px; top: 0px; border-radius: 8px; background: $colorControlAccent; padding: 11px 16px; text-transform: none;
|
||||
@include text-common; color: $colorBgPrimary; display: none; z-index: 1000; white-space: nowrap; transition-duration: 0.25s;
|
||||
position: fixed; left: 0px; top: 0px; border-radius: 8px; background: var(--color-control-accent); padding: 11px 16px; text-transform: none;
|
||||
@include text-common; color: var(--color-bg-primary); display: none; z-index: 1000; white-space: nowrap; transition-duration: 0.25s;
|
||||
transition-property: opacity, transform; transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
.buttons { display: flex; gap: 0px 12px; margin-left: 32px; }
|
||||
.buttons {
|
||||
.button {
|
||||
@include text-common; font-weight: 500; line-height: 20px; border: 0 solid; height: auto; padding: 0; background: none; color: $colorBgPrimary;
|
||||
@include text-common; font-weight: 500; line-height: 20px; border: 0 solid; height: auto; padding: 0; background: none; color: var(--color-bg-primary);
|
||||
}
|
||||
.button:hover { background-color: transparent; }
|
||||
.button:hover {
|
||||
|
|
|
|||
|
|
@ -4,17 +4,17 @@
|
|||
|
||||
.tooltip {
|
||||
position: absolute; border-radius: 4px; background: #373632; padding: 3px 7px; text-transform: none;
|
||||
@include text-small; color: $colorBgPrimary; white-space: nowrap; transform: scale3d(0.7, 0.7, 1); opacity: 0;
|
||||
@include text-small; color: var(--color-bg-primary); white-space: nowrap; transform: scale3d(0.7, 0.7, 1); opacity: 0;
|
||||
}
|
||||
.tooltip.anim { transition-duration: 0.25s; transition-timing-function: $easeInQuint; transition-property: opacity, transform; }
|
||||
.tooltip.show { transform: scale3d(1, 1, 1); opacity: 1; }
|
||||
.tooltip {
|
||||
.txt { line-height: 1.2; list-style-position: inside; }
|
||||
.caption { color: $colorTextSecondary; }
|
||||
.caption { color: var(--color-text-secondary); }
|
||||
}
|
||||
|
||||
.tooltip.big {
|
||||
background-color: $colorBgPrimary; color: $colorTextPrimary; width: 316px; white-space: normal; padding: 12px 16px;
|
||||
background-color: var(--color-bg-primary); color: var(--color-text-primary); width: 316px; white-space: normal; padding: 12px 16px;
|
||||
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2); border-radius: 8px;
|
||||
}
|
||||
.tooltip.big {
|
||||
|
|
|
|||
|
|
@ -12,29 +12,29 @@
|
|||
.txt, .icon { display: none; }
|
||||
}
|
||||
|
||||
.button.orange { background: $colorSystemAccent100; color: $colorBgPrimary; }
|
||||
.button.orange { background: var(--color-system-accent-100); color: var(--color-bg-primary); }
|
||||
.button.orange:not(.disabled):hover, .button.orange:not(.disabled).hover { background: #f09c0e; }
|
||||
|
||||
.button.pink { background: #ff6a7b; color: $colorBgPrimary; }
|
||||
.button.pink:not(.disabled):hover { background: #e5374b; }
|
||||
|
||||
.button.black { background: $colorControlAccent; color: $colorBgPrimary; }
|
||||
.button.black { background: var(--color-control-accent); color: var(--color-bg-primary); }
|
||||
.button.black:not(.disabled):hover, .button.black:not(.disabled).hover { background: #41403d; }
|
||||
.button.black {
|
||||
.arrow { background-image: url('~img/arrow/button/white.svg'); }
|
||||
}
|
||||
|
||||
.button.red { color: $colorRed; border: solid 1px $colorShapePrimary; }
|
||||
.button.red { color: var(--color-red); border: solid 1px var(--color-shape-primary); }
|
||||
.button.red:not(.disabled):hover,
|
||||
.button.red:not(.disabled).hover { background: #fee7e0; border-color: #fcd1c3; }
|
||||
|
||||
.button.dark { background: rgba(0,0,0,0.3); color: $colorBgPrimary; }
|
||||
.button.dark { background: rgba(0,0,0,0.3); color: var(--color-bg-primary); }
|
||||
.button.dark:not(.disabled):hover,
|
||||
.button.dark:not(.disabled).hover { background: rgba(0,0,0,0.4); }
|
||||
|
||||
.button.blank { background: none; border: solid 1px $colorShapePrimary; font-weight: 400; }
|
||||
.button.blank { background: none; border: solid 1px var(--color-shape-primary); font-weight: 400; }
|
||||
.button.blank:not(.disabled):hover,
|
||||
.button.blank:not(.disabled).hover { background: $colorShapeHighlightMedium; }
|
||||
.button.blank:not(.disabled).hover { background: var(--color-shape-highlight-medium); }
|
||||
|
||||
.button.c36 { @include text-common; height: 36px; border-radius: 6px; padding: 0px 12px; }
|
||||
.button.c32{ @include text-small; height: 32px; border-radius: 6px; padding: 0px 10px; }
|
||||
|
|
@ -48,5 +48,5 @@ input.button { line-height: 1; }
|
|||
.arrow { display: inline-block; width: 8px; height: 8px; margin: 0px 0px 0px 4px; }
|
||||
}
|
||||
|
||||
.button.simple { height: auto; padding: 0px; color: $colorControlActive; font-weight: bold; line-height: 1.43; letter-spacing: 0.1px; }
|
||||
.button.simple:hover, .button.simple.hover { color: $colorTextPrimary; }
|
||||
.button.simple { height: auto; padding: 0px; color: var(--color-control-active); font-weight: bold; line-height: 1.43; letter-spacing: 0.1px; }
|
||||
.button.simple:hover, .button.simple.hover { color: var(--color-text-primary); }
|
||||
|
|
@ -3,9 +3,9 @@
|
|||
.input-drag { height: 100%; position: relative; }
|
||||
.input-drag {
|
||||
.back { width: 100%; height: 2px; background: rgba(255,255,255,0.5); position: absolute; top: 50%; left: 0px; margin-top: -1px; }
|
||||
.fill { height: 2px; background: $colorBgPrimary; width: 0px; position: absolute; left: 0px; top: 50%; margin-top: -1px; }
|
||||
.fill { height: 2px; background: var(--color-bg-primary); width: 0px; position: absolute; left: 0px; top: 50%; margin-top: -1px; }
|
||||
.icon {
|
||||
width: 12px; height: 12px; border: 2px solid $colorBgPrimary; border-radius: 12px; position: absolute; left: 0px; top: 50%;
|
||||
width: 12px; height: 12px; border: 2px solid var(--color-bg-primary); border-radius: 12px; position: absolute; left: 0px; top: 50%;
|
||||
transform: translateY(-50%); transition: none;
|
||||
}
|
||||
.bullet { position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0px); }
|
||||
|
|
@ -14,5 +14,5 @@
|
|||
.dragWrap { height: 24px; background: rgba(0,0,0,0.5); border-radius: 4px; padding: 0px 8px; display: flex; }
|
||||
.dragWrap {
|
||||
.input-drag { width: calc(100% - 38px); margin-right: 8px; }
|
||||
.number { width: 38px; @include text-common; flex-shrink: 0; line-height: 24px; color: $colorBgPrimary; font-weight: 500; text-align: right; }
|
||||
.number { width: 38px; @include text-common; flex-shrink: 0; line-height: 24px; color: var(--color-bg-primary); font-weight: 500; text-align: right; }
|
||||
}
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
.icon.clear:hover { background-image: url('~img/icon/clear1.svg') !important; }
|
||||
.icon.search { width: 20px; height: 20px; background-size: 18px; background-image: url('~img/icon/search.svg'); }
|
||||
|
||||
.line { height: 1px; margin: 0px !important; background: $colorShapeSecondary; display: block; }
|
||||
.line { height: 1px; margin: 0px !important; background: var(--color-shape-secondary); display: block; }
|
||||
}
|
||||
.filter.isName {
|
||||
.input { font-weight: 700; }
|
||||
|
|
|
|||
|
|
@ -5,6 +5,6 @@
|
|||
@include text-common;
|
||||
}
|
||||
.input.isReadonly { background: #f7f5f0; cursor: default; }
|
||||
.input::placeholder { color: $colorShapePrimary; }
|
||||
.input::placeholder { color: var(--color-shape-primary); }
|
||||
|
||||
.input.withError { border-color: $colorRed !important; }
|
||||
.input.withError { border-color: var(--color-red) !important; }
|
||||
|
|
@ -1,21 +1,21 @@
|
|||
@import "~scss/_vars";
|
||||
|
||||
.inputWithFile {
|
||||
padding: 11px 13px; border-radius: 4px; border: solid 1px $colorShapeSecondary; color: $colorControlActive; @include text-common;
|
||||
padding: 11px 13px; border-radius: 4px; border: solid 1px var(--color-shape-secondary); color: var(--color-control-active); @include text-common;
|
||||
transition: background 0.05s ease-in-out, border $transitionCommon; white-space: nowrap; overflow: hidden; line-height: 20px; text-align: left;
|
||||
}
|
||||
.inputWithFile:hover { border-color: $colorShapePrimary; }
|
||||
.inputWithFile:hover { border-color: var(--color-shape-primary); }
|
||||
.inputWithFile {
|
||||
.txt { line-height: 20px; height: 20px; overflow: hidden; width: calc(100% - 26px); vertical-align: top; }
|
||||
.fileWrap { display: inline-block; vertical-align: top; }
|
||||
.fileWrap .border { border-bottom: 0.05em solid $colorControlActive; display: inline-block; line-height: 1; transition: $transitionAllCommon; }
|
||||
.fileWrap:hover .border { color: $colorTextPrimary; }
|
||||
.fileWrap .border { border-bottom: 0.05em solid var(--color-control-active); display: inline-block; line-height: 1; transition: $transitionAllCommon; }
|
||||
.fileWrap:hover .border { color: var(--color-text-primary); }
|
||||
|
||||
.input::placeholder { color: $colorControlActive; }
|
||||
.input::placeholder { color: var(--color-control-active); }
|
||||
.urlToggle { cursor: text; display: inline-block; }
|
||||
|
||||
#form { display: inline-block; vertical-align: top; }
|
||||
#url { height: 20px; line-height: 20px; vertical-align: top; padding: 0px; border: 0px; color: $colorTextPrimary; }
|
||||
#url { height: 20px; line-height: 20px; vertical-align: top; padding: 0px; border: 0px; color: var(--color-text-primary); }
|
||||
|
||||
.icon { width: 20px; height: 20px; margin: 0px 6px 0px 0px; transition: none; vertical-align: top; }
|
||||
.icon.image { background-image: url('~img/icon/menu/action/block/media/image0.svg'); }
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
.inputWithFile.isReadonly {
|
||||
.urlToggle { cursor: default; }
|
||||
.border { border: 0px; cursor: default; }
|
||||
.fileWrap:hover .border { color: $colorControlActive; }
|
||||
.fileWrap:hover .border { color: var(--color-control-active); }
|
||||
}
|
||||
|
||||
.inputWithFile.isSmall {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
@import "~scss/_vars";
|
||||
|
||||
.inputWithLabel { padding: 8px 12px; border-radius: 8px; border: 1px solid $colorShapeSecondary; cursor: text; }
|
||||
.inputWithLabel { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--color-shape-secondary); cursor: text; }
|
||||
.inputWithLabel {
|
||||
.inner { position: relative; width: 100%; height: 38px; display: block; }
|
||||
|
||||
.label { @include text-small; color: $colorTextSecondary; }
|
||||
.label { @include text-small; color: var(--color-text-secondary); }
|
||||
.input { padding: 0px !important; height: 22px; line-height: 22px; vertical-align: top; border: 0px !important; background: none; }
|
||||
}
|
||||
.inputWithLabel:hover { border-color: $colorShapePrimary; }
|
||||
.inputWithLabel.isFocused, .inputWithLabel.isFocused:hover { padding: 7px 11px; border: 2px solid $colorSystemAccent100; }
|
||||
.inputWithLabel:hover { border-color: var(--color-shape-primary); }
|
||||
.inputWithLabel.isFocused, .inputWithLabel.isFocused:hover { padding: 7px 11px; border: 2px solid var(--color-system-accent-100); }
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
@import "~scss/_vars";
|
||||
|
||||
$colorTextTertiary: #505050;
|
||||
$colorInputOpaque: #17171799;
|
||||
$colorErrorBackground: #240e07;
|
||||
|
||||
|
|
@ -9,6 +8,8 @@ $colorErrorBackground: #240e07;
|
|||
font-size: 18px; line-height: 38px; transition: $transitionAllCommon; text-align: center; letter-spacing: -0.12px;
|
||||
}
|
||||
.phraseWrapper {
|
||||
--color-text-tertiary: #505050;
|
||||
|
||||
.phraseInnerWrapper { word-break: break-word; min-height: 38px; position: relative; z-index: 1; }
|
||||
|
||||
.word {
|
||||
|
|
@ -18,16 +19,16 @@ $colorErrorBackground: #240e07;
|
|||
.word:empty { margin: 0px; }
|
||||
|
||||
.bg { border-radius: 8px; filter: blur(10px); }
|
||||
.bg-orange { background: $colorOrange !important; user-select: none !important; }
|
||||
.bg-red { background: $colorRed !important; }
|
||||
.bg-pink { background: $colorPink !important; }
|
||||
.bg-purple { background: $colorPurple !important; }
|
||||
.bg-blue { background: $colorBlue !important; }
|
||||
.bg-ice { background: $colorIce !important; }
|
||||
.bg-lime { background: $colorLime !important; }
|
||||
.bg-green { background: $colorGreen !important; }
|
||||
.bg-orange { background: var(--color-orange) !important; user-select: none !important; }
|
||||
.bg-red { background: var(--color-red) !important; }
|
||||
.bg-pink { background: var(--color-pink) !important; }
|
||||
.bg-purple { background: var(--color-purple) !important; }
|
||||
.bg-blue { background: var(--color-blue) !important; }
|
||||
.bg-ice { background: var(--color-ice) !important; }
|
||||
.bg-lime { background: var(--color-lime) !important; }
|
||||
.bg-green { background: var(--color-green) !important; }
|
||||
|
||||
.placeholder { color: $colorTextTertiary; top: 0; display: flex; flex-direction: row; align-items: center; justify-content: center; }
|
||||
.placeholder { color: var(--color-text-tertiary); top: 0; display: flex; flex-direction: row; align-items: center; justify-content: center; }
|
||||
#entry {
|
||||
display: inline; font-size: 18px; line-height: 18px; height: 18px; -webkit-user-modify: read-write-plaintext-only; user-select: text;
|
||||
vertical-align: middle; margin-left: 10px; text-transform: lowercase;
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@
|
|||
.pin {
|
||||
.input {
|
||||
width: 40px; height: 40px; margin-right: 8px; padding: 0px; text-align: center; vertical-align: top; font-size: 18px;
|
||||
border: 1px solid $colorShapePrimary; border-radius: 2px;
|
||||
border: 1px solid var(--color-shape-primary); border-radius: 2px;
|
||||
}
|
||||
.input.active { box-shadow: 0px 0px 0px 1px $colorSystemAccent100 inset; border-color: $colorSystemAccent100; }
|
||||
.input.active { box-shadow: 0px 0px 0px 1px var(--color-system-accent-100) inset; border-color: var(--color-system-accent-100); }
|
||||
.input-password { font-size: 14px; line-height: 1; }
|
||||
.input:last-child { margin: 0px; }
|
||||
}
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
@import "~scss/_vars";
|
||||
|
||||
.select {
|
||||
border-radius: 4px; border: solid 1px $colorShapePrimary; display: inline-block; vertical-align: middle;
|
||||
border-radius: 4px; border: solid 1px var(--color-shape-primary); display: inline-block; vertical-align: middle;
|
||||
transition: $transitionAllCommon; position: relative; font-family: 'Inter';
|
||||
white-space: nowrap; padding: 3px 20px 3px 6px; line-height: 20px !important;
|
||||
}
|
||||
.select:hover, .select.isFocused { background: $colorShapeTertiary; }
|
||||
.select:hover, .select.isFocused { background: var(--color-shape-tertiary); }
|
||||
|
||||
.select {
|
||||
.icon { transition: none; }
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
@import "~scss/_vars";
|
||||
|
||||
.switch {
|
||||
width: 26px; height: 16px; background: $colorShapeSecondary; border-radius: 16px; position: relative;
|
||||
width: 26px; height: 16px; background: var(--color-shape-secondary); border-radius: 16px; position: relative;
|
||||
display: inline-block; vertical-align: middle;
|
||||
}
|
||||
.switch {
|
||||
.inner {
|
||||
width: 12px; height: 12px; border-radius: 100%; background: $colorBgPrimary; position: absolute; left: 2px; top: 2px;
|
||||
width: 12px; height: 12px; border-radius: 100%; background: var(--color-bg-primary); position: absolute; left: 2px; top: 2px;
|
||||
transition: $transitionAllCommon; box-shadow: 0px 0px 0px 0.5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
|
@ -15,9 +15,9 @@
|
|||
.inner { width: 20px; height: 20px; }
|
||||
}
|
||||
|
||||
.switch.active { background: $colorTextSecondary; }
|
||||
.switch.green.active { background: $colorLime; }
|
||||
.switch.orange.active { background: $colorSystemAccent50; }
|
||||
.switch.active { background: var(--color-text-secondary); }
|
||||
.switch.green.active { background: var(--color-lime); }
|
||||
.switch.orange.active { background: var(--color-system-accent-50); }
|
||||
.switch.isReadonly { cursor: default; }
|
||||
|
||||
.switch.active {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
@import "~scss/_vars";
|
||||
|
||||
.textareaWrap { overflow: hidden; background: $colorShapeTertiary; border-radius: 8px; }
|
||||
.textareaWrap { overflow: hidden; background: var(--color-shape-tertiary); border-radius: 8px; }
|
||||
.textarea {
|
||||
padding: 20px 24px; width: 100%; resize: none; @include text-common; border: 0px; color: inherit; display: block; font-family: 'Plex';
|
||||
background: none;
|
||||
}
|
||||
.textarea::placeholder { color: $colorShapePrimary; }
|
||||
.textarea::placeholder { color: var(--color-shape-primary); }
|
||||
|
|
@ -1,18 +1,18 @@
|
|||
@import "~scss/_vars";
|
||||
|
||||
.listObject {
|
||||
table { width: 100%; border-collapse: collapse; border-bottom: 1px solid $colorShapeSecondary; table-layout: fixed; border-top: 1px solid $colorShapeSecondary; }
|
||||
table { width: 100%; border-collapse: collapse; border-bottom: 1px solid var(--color-shape-secondary); table-layout: fixed; border-top: 1px solid var(--color-shape-secondary); }
|
||||
table {
|
||||
.row.isArchived *, .row.isDeleted * { text-decoration: line-through; color: $colorControlActive; }
|
||||
.row.isArchived *, .row.isDeleted * { text-decoration: line-through; color: var(--color-control-active); }
|
||||
|
||||
.cellHead {
|
||||
text-align: left; color: $colorTextSecondary; padding: 14px 0px 14px 14px; white-space: nowrap; font-weight: 400; line-height: 20px; position: relative;
|
||||
text-align: left; color: var(--color-text-secondary); padding: 14px 0px 14px 14px; white-space: nowrap; font-weight: 400; line-height: 20px; position: relative;
|
||||
@include text-overflow-nw; width: 25%;
|
||||
}
|
||||
.cellHead {
|
||||
.name {
|
||||
display: inline-block; line-height: 20px; height: 20px; vertical-align: top; width: 100%;
|
||||
@include text-overflow-nw; border-right: 1px solid $colorShapeSecondary;
|
||||
@include text-overflow-nw; border-right: 1px solid var(--color-shape-secondary);
|
||||
}
|
||||
}
|
||||
.cellHead:first-child { width: 50%; }
|
||||
|
|
@ -20,10 +20,10 @@
|
|||
.name { border: 0px; }
|
||||
}
|
||||
|
||||
tbody { border-top: 1px solid $colorShapeSecondary; }
|
||||
tbody { border-top: 1px solid var(--color-shape-secondary); }
|
||||
|
||||
.cell {
|
||||
padding: 14px; border-bottom: 1px solid $colorShapeSecondary; vertical-align: top; position: relative; word-break: break-word;
|
||||
padding: 14px; border-bottom: 1px solid var(--color-shape-secondary); vertical-align: top; position: relative; word-break: break-word;
|
||||
}
|
||||
|
||||
.cellContent { width: 100%; overflow: hidden; height: 20px; line-height: 20px; }
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
.objectManagerWrapper { height: 100%; display: flex; flex-direction: column; }
|
||||
.objectManagerWrapper {
|
||||
|
||||
.controls { display: flex; flex-direction: row; padding: 0px 0px 16px 0px; border-bottom: 1px solid $colorShapeSecondary; margin: 0px; }
|
||||
.controls { display: flex; flex-direction: row; padding: 0px 0px 16px 0px; border-bottom: 1px solid var(--color-shape-secondary); margin: 0px; }
|
||||
.controls.withFilter { border: 0px; }
|
||||
|
||||
.controls {
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
.name { @include text-overflow-nw; width: calc(100% - 26px); }
|
||||
}
|
||||
.element:first-child { margin-left: -4px; }
|
||||
.element:hover { background-color: $colorShapeHighlightMedium; }
|
||||
.element:hover { background-color: var(--color-shape-highlight-medium); }
|
||||
}
|
||||
.side.right { justify-content: flex-end; }
|
||||
|
||||
|
|
@ -68,8 +68,8 @@
|
|||
.loaderWrapper { width: 100%; height: 100%; }
|
||||
|
||||
.emptySearch {
|
||||
color: $colorTextSecondary; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid $colorShapeSecondary;
|
||||
border-top: 1px solid $colorShapeSecondary; text-align: center; padding: 16px 0px; height: 300px;
|
||||
color: var(--color-text-secondary); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--color-shape-secondary);
|
||||
border-top: 1px solid var(--color-shape-secondary); text-align: center; padding: 16px 0px; height: 300px;
|
||||
}
|
||||
.emptySearch {
|
||||
.inner { width: 300px; }
|
||||
|
|
|
|||
|
|
@ -9,14 +9,14 @@
|
|||
.item {
|
||||
.hoverArea { height: 100%; }
|
||||
.hoverArea:before {
|
||||
content: ""; background: $colorShapeHighlightMedium; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;
|
||||
content: ""; background: var(--color-shape-highlight-medium); position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;
|
||||
z-index: 2; border-radius: 8px; display: none; pointer-events: none;
|
||||
}
|
||||
.hoverArea.hover:before, .hoverArea:hover:before { display: block; }
|
||||
|
||||
> .defaultLabel {
|
||||
position: absolute; right: 12px; top: 12px; @include text-small; font-weight: 500; z-index: 2;
|
||||
padding: 1px 4px; border-radius: 4px; background: $colorShapeTertiary; color: $colorTextSecondary;
|
||||
padding: 1px 4px; border-radius: 4px; background: var(--color-shape-tertiary); color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.previewObject { width: 344px; height: 216px; }
|
||||
|
|
@ -29,13 +29,13 @@
|
|||
> .defaultLabel { opacity: 0; }
|
||||
}
|
||||
|
||||
.item > .name { padding: 0px 14px; @include text-overflow-nw; color: $colorTextSecondary; }
|
||||
.item > .name { padding: 0px 14px; @include text-overflow-nw; color: var(--color-text-secondary); }
|
||||
.item > .name {
|
||||
.input { border: 0px; padding: 0px; height: 22px; }
|
||||
}
|
||||
.item:last-child { margin-right: 0px; }
|
||||
|
||||
.item.add { border: 1px solid $colorShapeSecondary; border-radius: 8px; width: 344px; height: 216px; }
|
||||
.item.add { border: 1px solid var(--color-shape-secondary); border-radius: 8px; width: 344px; height: 216px; }
|
||||
|
||||
.icon.arrow {
|
||||
position: absolute; top: 0px; width: 32px; height: 216px; background-image: url('~img/arrow/template0.svg'); background-size: 8px 32px; z-index: 10;
|
||||
|
|
|
|||
|
|
@ -15,14 +15,14 @@
|
|||
> .buttons { display: flex; justify-content: center; width: 100%; gap: 0px 8px; }
|
||||
> .buttons {
|
||||
.button {
|
||||
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2); border-radius: 8px; width: 100%; min-width: 60px; max-width: 200px; background-color: $colorBgPrimary;
|
||||
color: $colorTextSecondary; font-weight: 400; white-space: nowrap;
|
||||
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2); border-radius: 8px; width: 100%; min-width: 60px; max-width: 200px; background-color: var(--color-bg-primary);
|
||||
color: var(--color-text-secondary); font-weight: 400; white-space: nowrap;
|
||||
}
|
||||
.button:hover { background-color: $colorShapeTertiary; }
|
||||
.button:hover { background-color: var(--color-shape-tertiary); }
|
||||
|
||||
.button.disabled { background: $colorShapeTertiary; max-width: 80px; }
|
||||
.button.disabled { background: var(--color-shape-tertiary); max-width: 80px; }
|
||||
.button.edit {
|
||||
box-shadow: 0px 0px; background: $colorShapeHighlightMedium; border-radius: 6px; @include text-common; color: $colorTextPrimary; line-height: 26px; width: auto;
|
||||
box-shadow: 0px 0px; background: var(--color-shape-highlight-medium); border-radius: 6px; @include text-common; color: var(--color-text-primary); line-height: 26px; width: auto;
|
||||
padding: 0px 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
|
||||
> .dropTarget.firstTarget.isOver::before,
|
||||
> .dropTarget.lastTarget.isOver::before {
|
||||
content: ""; position: absolute; background: $colorSystemAccent100; width: calc(100% - 28px); height: 2px; border-radius: 2px; left: 12px;
|
||||
content: ""; position: absolute; background: var(--color-system-accent-100); width: calc(100% - 28px); height: 2px; border-radius: 2px; left: 12px;
|
||||
}
|
||||
|
||||
> .dropTarget.firstTarget.isOver::before { bottom: -7px; }
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
|
||||
.widget.isEditable:nth-child(2n + 1) { animation: shake1 0.2s linear infinite alternate; }
|
||||
.widget.isEditable:nth-child(2n + 2) { animation: shake2 0.2s linear infinite alternate; }
|
||||
.widget.isEditable.isOver::before { content: ""; position: absolute; background: $colorSystemAccent100; height: 2px; width: calc(100% - 24px); border-radius: 2px; left: 12px; }
|
||||
.widget.isEditable.isOver::before { content: ""; position: absolute; background: var(--color-system-accent-100); height: 2px; width: calc(100% - 24px); border-radius: 2px; left: 12px; }
|
||||
.widget.isEditable.isOver.top::before { top: -7px; }
|
||||
.widget.isEditable.isOver.bottom::before { bottom: -7px; }
|
||||
.widget.isEditable:hover {
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
.item {
|
||||
.name { @include text-overflow-nw; }
|
||||
}
|
||||
.item:hover::before { background: $colorShapeHighlightMedium; }
|
||||
.item:hover::before { background: var(--color-shape-highlight-medium); }
|
||||
|
||||
.item.isReadonly::before { opacity: 0 !important; }
|
||||
}
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
.items { height: 100%; }
|
||||
|
||||
.sectionName { padding: 0px 14px 4px 14px; }
|
||||
.sectionName::before { content: ""; display: block; width: 100%; height: 1px; margin: 8px 0px 11px 0px; background: $colorShapeSecondary; }
|
||||
.sectionName::before { content: ""; display: block; width: 100%; height: 1px; margin: 8px 0px 11px 0px; background: var(--color-shape-secondary); }
|
||||
.sectionName.first { padding-top: 4px; }
|
||||
.sectionName.first::before { display: none; }
|
||||
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
.item::before { transition: none; }
|
||||
|
||||
.item.isBig {
|
||||
.iconObject { background-color: $colorShapeTertiary; }
|
||||
.iconObject { background-color: var(--color-shape-tertiary); }
|
||||
}
|
||||
.item.isBig {
|
||||
.icon.textParagraph { background-image: url('~img/icon/menu/action/block/text/paragraph1.svg'); }
|
||||
|
|
@ -69,15 +69,15 @@
|
|||
.icon.divLine { background-image: url('~img/icon/menu/action/block/div/line1.svg'); }
|
||||
.icon.divDot { background-image: url('~img/icon/menu/action/block/div/dot1.svg'); }
|
||||
|
||||
.icon.embedLatex { background-image: url('~img/icon/menu/action/block/embed/latex.svg'); }
|
||||
.icon.embedMermaid { background-image: url('~img/icon/menu/action/block/embed/mermaid.svg'); }
|
||||
.icon.embedYoutube { background-image: url('~img/icon/menu/action/block/embed/youtube.svg'); }
|
||||
.icon.embedVimeo { background-image: url('~img/icon/menu/action/block/embed/vimeo.svg'); }
|
||||
.icon.embedGoogleMaps { background-image: url('~img/icon/menu/action/block/embed/googleMaps.svg'); }
|
||||
.icon.embedSoundcloud { background-image: url('~img/icon/menu/action/block/embed/soundcloud.svg'); }
|
||||
.icon.embedChart { background-image: url('~img/icon/menu/action/block/embed/chart.svg'); }
|
||||
.icon.embedMiro { background-image: url('~img/icon/menu/action/block/embed/miro.svg'); }
|
||||
.icon.embedFigma { background-image: url('~img/icon/menu/action/block/embed/figma.svg'); }
|
||||
.icon.embed-latex { background-image: url('~img/icon/menu/action/block/embed/latex.svg'); }
|
||||
.icon.embed-mermaid { background-image: url('~img/icon/menu/action/block/embed/mermaid.svg'); }
|
||||
.icon.embed-youtube { background-image: url('~img/icon/menu/action/block/embed/youtube.svg'); }
|
||||
.icon.embed-vimeo { background-image: url('~img/icon/menu/action/block/embed/vimeo.svg'); }
|
||||
.icon.embed-googleMaps { background-image: url('~img/icon/menu/action/block/embed/googleMaps.svg'); }
|
||||
.icon.embed-soundcloud { background-image: url('~img/icon/menu/action/block/embed/soundcloud.svg'); }
|
||||
.icon.embed-chart { background-image: url('~img/icon/menu/action/block/embed/chart.svg'); }
|
||||
.icon.embed-miro { background-image: url('~img/icon/menu/action/block/embed/miro.svg'); }
|
||||
.icon.embed-figma { background-image: url('~img/icon/menu/action/block/embed/figma.svg'); }
|
||||
|
||||
.icon.existing { background-image: url('~img/icon/menu/action/block/existing1.svg'); }
|
||||
.icon.bookmark { background-image: url('~img/icon/menu/action/block/bookmark1.svg'); }
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
.menu.menuBlockContext {
|
||||
.section { padding: 6px 12px; }
|
||||
.icon { width: 32px; height: 32px; background-size: 20px 20px; vertical-align: top; margin: 0px; border-radius: 4px; }
|
||||
.icon:hover { background-color: $colorShapeTertiary; }
|
||||
.icon:hover { background-color: var(--color-shape-tertiary); }
|
||||
.icon.blockStyle { width: 44px; background-position: 6px center; }
|
||||
.icon.blockStyle {
|
||||
.icon.arrow { right: 6px; }
|
||||
|
|
|
|||
|
|
@ -8,12 +8,12 @@
|
|||
.wrap { display: flex; flex-direction: column; }
|
||||
|
||||
.head {
|
||||
border-bottom: 1px solid $colorShapeSecondary; padding: 11px 16px; font-weight: 500; color: $colorControlActive;
|
||||
border-bottom: 1px solid var(--color-shape-secondary); padding: 11px 16px; font-weight: 500; color: var(--color-control-active);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.head {
|
||||
.btn { display: inline-block; margin-right: 16px; transition: $transitionAllCommon; }
|
||||
.btn:hover, .btn.active { color: $colorTextPrimary; }
|
||||
.btn:hover, .btn.active { color: var(--color-text-primary); }
|
||||
.btn:last-child { margin: 0px; }
|
||||
}
|
||||
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
.item { padding: 0px; width: 100%; position: relative; }
|
||||
.item {
|
||||
.cover { height: 48px; position: relative; border-radius: 2px; }
|
||||
.name { @include text-small; @include text-overflow-nw; max-width: 100%; margin-top: 2px; color: $colorTextSecondary; }
|
||||
.name { @include text-small; @include text-overflow-nw; max-width: 100%; margin-top: 2px; color: var(--color-text-secondary); }
|
||||
}
|
||||
.item:hover {
|
||||
.name { text-decoration: underline; }
|
||||
|
|
@ -63,10 +63,10 @@
|
|||
.loaderWrapper { height: 336px; }
|
||||
|
||||
.dropzone {
|
||||
height: 336px; display: flex; align-items: center; border-radius: 2px; background: $colorShapeHighlightMedium;
|
||||
height: 336px; display: flex; align-items: center; border-radius: 2px; background: var(--color-shape-highlight-medium);
|
||||
justify-content: center; flex-direction: column; gap: 6px 0px;
|
||||
}
|
||||
.dropzone.isDraggingOver { background: $colorSystemDropZone; }
|
||||
.dropzone.isDraggingOver { background: var(--color-system-drop-zone); }
|
||||
|
||||
.dropzone {
|
||||
.icon.coverUpload {
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
display: block;
|
||||
}
|
||||
.label {
|
||||
span { color: $colorTextSecondary; }
|
||||
span { color: var(--color-text-secondary); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -127,21 +127,21 @@
|
|||
.icon.color {
|
||||
.inner {
|
||||
width: 16px; height: 16px; position: absolute; left: 50%; top: 50%; margin: -8px 0px 0px -8px; border-radius: 100%;
|
||||
background: $colorTextPrimary;
|
||||
background: var(--color-text-primary);
|
||||
}
|
||||
.inner.bgColor-default { box-shadow: 0px 0px 0px 1px $colorShapeSecondary inset; background: $colorBgPrimary; }
|
||||
.inner.bgColor-default { box-shadow: 0px 0px 0px 1px var(--color-shape-secondary) inset; background: var(--color-bg-primary); }
|
||||
|
||||
.inner.textColor-black { background: $colorTextPrimary; }
|
||||
.inner.textColor-grey { background: $colorControlActive; }
|
||||
.inner.textColor-yellow { background: $colorYellow; }
|
||||
.inner.textColor-orange { background: $colorOrange; }
|
||||
.inner.textColor-red { background: $colorRed; }
|
||||
.inner.textColor-pink { background: $colorPink; }
|
||||
.inner.textColor-purple { background: $colorPurple; }
|
||||
.inner.textColor-blue { background: $colorBlue; }
|
||||
.inner.textColor-ice { background: $colorIce; }
|
||||
.inner.textColor-teal { background: $colorTeal; }
|
||||
.inner.textColor-lime { background: $colorLime; }
|
||||
.inner.textColor-black { background: var(--color-text-primary); }
|
||||
.inner.textColor-grey { background: var(--color-control-active); }
|
||||
.inner.textColor-yellow { background: var(--color-yellow); }
|
||||
.inner.textColor-orange { background: var(--color-orange); }
|
||||
.inner.textColor-red { background: var(--color-red); }
|
||||
.inner.textColor-pink { background: var(--color-pink); }
|
||||
.inner.textColor-purple { background: var(--color-purple); }
|
||||
.inner.textColor-blue { background: var(--color-blue); }
|
||||
.inner.textColor-ice { background: var(--color-ice); }
|
||||
.inner.textColor-teal { background: var(--color-teal); }
|
||||
.inner.textColor-lime { background: var(--color-lime); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
.katex-display { margin: 0px; display: inline-block; vertical-align: middle; }
|
||||
}
|
||||
}
|
||||
.item > .inner { border: 1px solid $colorShapeSecondary; border-radius: 4px; height: 78px; overflow: hidden; line-height: 74px; }
|
||||
.item > .inner { border: 1px solid var(--color-shape-secondary); border-radius: 4px; height: 78px; overflow: hidden; line-height: 74px; }
|
||||
|
||||
.sectionName { padding: 5px 0px; }
|
||||
.item.empty { padding: 12px 14px; }
|
||||
|
|
|
|||
|
|
@ -34,6 +34,6 @@
|
|||
.info { padding-left: 52px; }
|
||||
}
|
||||
|
||||
.item.add { color: $colorTextPrimary; }
|
||||
.item.add { color: var(--color-text-primary); }
|
||||
}
|
||||
}
|
||||
|
|
@ -6,14 +6,14 @@
|
|||
.content { padding: 0px; }
|
||||
.form { padding: 8px 0px; }
|
||||
.wrap { padding: 0px 16px 8px 16px; }
|
||||
.line { height: 1px; margin: 8px 0px; background: $colorShapeSecondary; }
|
||||
.input { border: 1px solid $colorShapeSecondary; padding: 0px 8px; }
|
||||
.line { height: 1px; margin: 8px 0px; background: var(--color-shape-secondary); }
|
||||
.input { border: 1px solid var(--color-shape-secondary); padding: 0px 8px; }
|
||||
.switch { position: absolute; right: 16px; top: 50%; margin-top: -8px; }
|
||||
|
||||
.button { width: 100%; }
|
||||
.button.grey { cursor: default; }
|
||||
|
||||
.item:hover::before { background: $colorShapeHighlightMedium; }
|
||||
.item:hover::before { background: var(--color-shape-highlight-medium); }
|
||||
.item.disabled:hover::before { opacity: 0; }
|
||||
|
||||
.item.withCaption {
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
.sections { display: flex; flex-direction: column; height: 100%; }
|
||||
|
||||
.section { padding: 0px; }
|
||||
.section > .name { @include text-common; padding: 7px 32px; position: relative; color: $colorTextPrimary; margin: 0px; }
|
||||
.section > .name { @include text-common; padding: 7px 32px; position: relative; color: var(--color-text-primary); margin: 0px; }
|
||||
.section:last-child::after { display: none; }
|
||||
.section::after { margin: 16px 32px; }
|
||||
|
||||
|
|
@ -63,10 +63,10 @@
|
|||
.icon.lock { margin: 0px; }
|
||||
.icon.dnd {
|
||||
width: 12px; height: calc(100% - 2px); background-size: 8px 16px; opacity: 0; cursor: grab; position: absolute; left: 12px; top: 1px;
|
||||
background-image: url('~img/icon/block/menu1.svg'); border: 1px solid $colorShapeSecondary; border-radius: 12px;
|
||||
background-image: url('~img/icon/block/menu1.svg'); border: 1px solid var(--color-shape-secondary); border-radius: 12px;
|
||||
}
|
||||
.icon.dnd:hover {
|
||||
background-image: url('~img/icon/block/menu2.svg') !important; border-color: $colorSystemAccent100; box-shadow: 0px 0px 0px 1px $colorSystemAccent100;
|
||||
background-image: url('~img/icon/block/menu2.svg') !important; border-color: var(--color-system-accent-100); box-shadow: 0px 0px 0px 1px var(--color-system-accent-100);
|
||||
}
|
||||
|
||||
.icon.fav {
|
||||
|
|
@ -77,9 +77,9 @@
|
|||
|
||||
.info {
|
||||
width: 192px; @include text-overflow-nw; line-height: 20px; border-radius: 4px; transition: background $transitionCommon;
|
||||
flex-shrink: 0; padding: 6px; color: $colorTextSecondary; display: flex; gap: 0px 6px; align-items: center; position: relative;
|
||||
flex-shrink: 0; padding: 6px; color: var(--color-text-secondary); display: flex; gap: 0px 6px; align-items: center; position: relative;
|
||||
}
|
||||
.info.canEdit:hover { background: $colorShapeHighlightLight; }
|
||||
.info.canEdit:hover { background: var(--color-shape-highlight-light); }
|
||||
|
||||
.cellContent { min-height: 22px; }
|
||||
.cellContent {
|
||||
|
|
@ -92,7 +92,7 @@
|
|||
padding: 5px 8px; border-radius: 4px; width: calc(100% - 236px); line-height: 22px; transition: background $transitionCommon;
|
||||
position: relative; margin-right: 6px;
|
||||
}
|
||||
.cell.canEdit:hover { background: $colorShapeHighlightLight; }
|
||||
.cell.canEdit:hover { background: var(--color-shape-highlight-light); }
|
||||
.cell.canEdit {
|
||||
.cellContent {
|
||||
.empty { display: block; }
|
||||
|
|
@ -162,7 +162,7 @@
|
|||
.info { width: 100%; transition: $transitionAllCommon; }
|
||||
}
|
||||
.item.add:hover {
|
||||
.info { color: $colorTextPrimary; }
|
||||
.info { color: var(--color-text-primary); }
|
||||
.icon.plus { background-image: url('~img/icon/plus/menu1.svg'); }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@
|
|||
.menus {
|
||||
.menu.menuButton { white-space: nowrap; height: 44px; line-height: 44px; padding: 0px 14px; }
|
||||
.menu.menuButton {
|
||||
.item { display: inline-block; @include text-common; margin-right: 16px; color: $colorControlActive; transition: $transitionAllCommon; }
|
||||
.item:hover { color: $colorTextPrimary; }
|
||||
.item { display: inline-block; @include text-common; margin-right: 16px; color: var(--color-control-active); transition: $transitionAllCommon; }
|
||||
.item:hover { color: var(--color-text-primary); }
|
||||
.item:last-child { margin: 0px; }
|
||||
}
|
||||
}
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
.menu {
|
||||
border-radius: 8px; position: absolute; z-index: inherit; text-align: left; backface-visibility: hidden;
|
||||
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2); background: $colorBgPrimary; opacity: 0; transform: scale3d(0.9,0.9,1);
|
||||
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2); background: var(--color-bg-primary); opacity: 0; transform: scale3d(0.9,0.9,1);
|
||||
transition: opacity 0.15s $easeInQuint, transform 0.15s $easeInQuint;
|
||||
}
|
||||
.menu.fixed { position: fixed; }
|
||||
|
|
@ -59,30 +59,30 @@
|
|||
|
||||
.loaderWrapper {
|
||||
position: absolute; left: 0px; top: 0px; z-index: 20; width: 100%; height: 100%; border-radius: 12px;
|
||||
background: $colorBgLoader;
|
||||
background: var(--color-bg-loader);
|
||||
}
|
||||
|
||||
.tabs { padding: 10px 14px; border-bottom: 1px solid $colorShapeSecondary; white-space: nowrap; font-weight: 700; color: $colorControlActive; }
|
||||
.tabs { padding: 10px 14px; border-bottom: 1px solid var(--color-shape-secondary); white-space: nowrap; font-weight: 700; color: var(--color-control-active); }
|
||||
.tabs {
|
||||
.tab { display: inline-block; vertical-align: top; transition: $transitionAllCommon; margin-right: 16px; position: relative; }
|
||||
.tab:hover, .tab.active { color: $colorTextPrimary; }
|
||||
.tab:hover, .tab.active { color: var(--color-text-primary); }
|
||||
.tab:last-child { margin: 0px; }
|
||||
}
|
||||
|
||||
.titleWrapper { display: flex; gap: 0 6px; padding: 8px 14px; align-items: center; }
|
||||
.titleWrapper {
|
||||
.icon.back { width: 20px; height: 20px; background-image: url('~img/arrow/menu.svg'); transform: rotateZ(180deg); }
|
||||
.title { @include text-common; font-weight: 600; color: $colorTextPrimary; padding: 0; }
|
||||
.title { @include text-common; font-weight: 600; color: var(--color-text-primary); padding: 0; }
|
||||
}
|
||||
|
||||
.inputWrap { padding: 0px 14px 8px 14px; }
|
||||
.input { border: 1px solid $colorShapeSecondary; padding: 0px 8px; }
|
||||
.input { border: 1px solid var(--color-shape-secondary); padding: 0px 8px; }
|
||||
|
||||
.title { @include text-small; margin: 0px; padding: 7px 14px; font-weight: 400; color: $colorControlActive; }
|
||||
.title { @include text-small; margin: 0px; padding: 7px 14px; font-weight: 400; color: var(--color-control-active); }
|
||||
|
||||
.separator .inner { margin: 8px 14px 7px 14px; height: 1px; background: $colorShapeSecondary; }
|
||||
.separator .inner { margin: 8px 14px 7px 14px; height: 1px; background: var(--color-shape-secondary); }
|
||||
|
||||
.item { padding: 4px 14px; @include text-common; line-height: 20px; position: relative; width: 100%; background: $colorBgPrimary; }
|
||||
.item { padding: 4px 14px; @include text-common; line-height: 20px; position: relative; width: 100%; background: var(--color-bg-primary); }
|
||||
.item.isDragging { box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2); }
|
||||
.item.isReadonly { cursor: default; }
|
||||
|
||||
|
|
@ -90,7 +90,7 @@
|
|||
content: ""; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(79,79,79,0); z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
.item.hover::before { background: $colorShapeHighlightMedium; }
|
||||
.item.hover::before { background: var(--color-shape-highlight-medium) !important; }
|
||||
.item.hover, .item:hover {
|
||||
.icon.delete, .icon.more { opacity: 1; }
|
||||
}
|
||||
|
|
@ -114,7 +114,7 @@
|
|||
margin: -12px 0px 0px 0px; border-radius: 4px; opacity: 0; z-index: 1;
|
||||
}
|
||||
.icon.delete { background-image: url('~img/icon/menu/delete.svg'); }
|
||||
.icon.delete:hover, .icon.more:hover { background-color: $colorShapeHighlightMedium; }
|
||||
.icon.delete:hover, .icon.more:hover { background-color: var(--color-shape-highlight-medium); }
|
||||
.icon.arrow { width: 20px; height: 20px; position: absolute; right: 6px; top: 50%; margin: -10px 0px 0px 0px; background-image: url('~img/arrow/menu.svg'); }
|
||||
.icon.chk { width: 20px; height: 20px; position: absolute; right: 6px; top: 50%; margin: -10px 0px 0px 0px; background-image: url('~img/icon/menu/checkbox.svg'); }
|
||||
|
||||
|
|
@ -141,7 +141,7 @@
|
|||
.item.withDescription {
|
||||
.iconMain, .iconObject { width: 40px; height: 40px; border-radius: 6px; position: absolute; left: 14px; top: 8px; }
|
||||
|
||||
.descr { @include text-small; @include text-overflow-nw; line-height: 20px; height: 20px; color: $colorTextSecondary; }
|
||||
.descr { @include text-small; @include text-overflow-nw; line-height: 20px; height: 20px; color: var(--color-text-secondary); }
|
||||
.descr:empty { display: none; }
|
||||
|
||||
.info { line-height: 40px; width: calc(100% - 16px); }
|
||||
|
|
@ -166,7 +166,7 @@
|
|||
}
|
||||
|
||||
.caption {
|
||||
@include text-overflow-nw; display: inline-block; vertical-align: top; color: $colorTextSecondary; @include text-small; text-align: right;
|
||||
@include text-overflow-nw; display: inline-block; vertical-align: top; color: var(--color-text-secondary); @include text-small; text-align: right;
|
||||
flex-shrink: 0; line-height: 20px;
|
||||
}
|
||||
|
||||
|
|
@ -186,15 +186,15 @@
|
|||
.clickable { display: flex; }
|
||||
}
|
||||
|
||||
.line { height: 1px; margin: 8px 14px 7px 14px; background: $colorShapeSecondary; }
|
||||
.sectionName { padding: 5px 14px; @include text-small; color: $colorTextSecondary; font-weight: 500; }
|
||||
.line { height: 1px; margin: 8px 14px 7px 14px; background: var(--color-shape-secondary); }
|
||||
.sectionName { padding: 5px 14px; @include text-small; color: var(--color-text-secondary); font-weight: 500; }
|
||||
|
||||
.section { padding: 8px 0px 0px 0px; }
|
||||
.section::after { content: ""; height: 1px; margin: 8px 14px 0px 14px; background: $colorShapeSecondary; display: block; }
|
||||
.section::after { content: ""; height: 1px; margin: 8px 14px 0px 14px; background: var(--color-shape-secondary); display: block; }
|
||||
.section:first-child { padding: 0px; }
|
||||
.section:last-child { border: 0px; }
|
||||
.section:last-child::after { display: none; }
|
||||
.section > .name { padding: 3px 14px; margin-bottom: 2px; @include text-small; color: $colorTextSecondary; display: block; font-weight: 500; }
|
||||
.section > .name { padding: 3px 14px; margin-bottom: 2px; @include text-small; color: var(--color-text-secondary); display: block; font-weight: 500; }
|
||||
.section > .name:empty { display: none; }
|
||||
.section > .inputWrap { padding-bottom: 0px; }
|
||||
.section.noLine::after { display: none; }
|
||||
|
|
@ -202,7 +202,7 @@
|
|||
|
||||
.menu.horizontal {
|
||||
.content { display: flex; }
|
||||
.section { flex: auto; padding: 12px 18px; height: 44px; border-right: 1px solid $colorShapeSecondary; white-space: nowrap; position: relative; }
|
||||
.section { flex: auto; padding: 12px 18px; height: 44px; border-right: 1px solid var(--color-shape-secondary); white-space: nowrap; position: relative; }
|
||||
.section:last-child { border: 0px; }
|
||||
|
||||
.icon { width: 20px; height: 20px; margin-right: 12px; }
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
.side.right { text-align: right; }
|
||||
}
|
||||
.head {
|
||||
.date { color: $colorControlActive; margin-bottom: 6px; }
|
||||
.date { color: var(--color-control-active); margin-bottom: 6px; }
|
||||
.sides { margin-bottom: 10px; }
|
||||
.side.left {
|
||||
.select { margin-left: -4px; }
|
||||
|
|
@ -30,9 +30,9 @@
|
|||
.foot { padding: 0px 16px; }
|
||||
.foot {
|
||||
.btn { display: inline-block; vertical-align: top; margin-right: 16px; transition: $transitionAllCommon; }
|
||||
.btn.clear { color: $colorTextSecondary; }
|
||||
.btn.clear { color: var(--color-text-secondary); }
|
||||
.btn:last-child { margin: 0px; }
|
||||
.btn:hover { color: $colorSystemAccent100; }
|
||||
.btn:hover { color: var(--color-system-accent-100); }
|
||||
}
|
||||
|
||||
.day {
|
||||
|
|
@ -40,18 +40,18 @@
|
|||
border-radius: 4px;
|
||||
}
|
||||
.day:nth-child(7n + 7) { margin: 0px; }
|
||||
.day:hover { background: $colorSystemAccent25; color: $colorSystemAccent100 !important; }
|
||||
.day:hover { background: var(--color-system-accent-25); color: var(--color-system-accent-100) !important; }
|
||||
|
||||
.day.th { color: $colorControlActive; cursor: default; }
|
||||
.day.th:hover { background: none; font-weight: 400; color: $colorControlActive !important; }
|
||||
.day.th { color: var(--color-control-active); cursor: default; }
|
||||
.day.th:hover { background: none; font-weight: 400; color: var(--color-control-active) !important; }
|
||||
|
||||
.day.active { color: $colorSystemAccent100; }
|
||||
.day.other { color: $colorControlActive; }
|
||||
.day.active { color: var(--color-system-accent-100); }
|
||||
.day.other { color: var(--color-control-active); }
|
||||
|
||||
.line { margin: 8px 16px 11px 16px; }
|
||||
|
||||
.input {
|
||||
height: 28px; border-radius: 4px; border: solid 1px $colorShapePrimary; margin-bottom: 10px; padding: 0px 10px;
|
||||
height: 28px; border-radius: 4px; border: solid 1px var(--color-shape-primary); margin-bottom: 10px; padding: 0px 10px;
|
||||
background: none; width: 100px; vertical-align: top;
|
||||
}
|
||||
|
||||
|
|
@ -72,13 +72,13 @@
|
|||
}
|
||||
}
|
||||
.day.active {
|
||||
.number { padding: 0px; color: $colorTextInversion; }
|
||||
.number { padding: 0px; color: var(--color-text-inversion); }
|
||||
.number {
|
||||
.inner { background-color: $colorSystemAccent100; border-radius: 12px; padding: 0px 7px; align-self: flex-end; }
|
||||
.inner { background-color: var(--color-system-accent-100); border-radius: 12px; padding: 0px 7px; align-self: flex-end; }
|
||||
}
|
||||
}
|
||||
.day.other {
|
||||
.number { color: $colorTextSecondary; }
|
||||
.number { color: var(--color-text-secondary); }
|
||||
}
|
||||
|
||||
.items { overflow-y: auto; flex-grow: 1; height: calc(100% - 24px); max-height: 250px; }
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
|
||||
.filter { padding-top: 8px; }
|
||||
|
||||
.label { color: $colorControlActive; @include text-small; padding: 0px 16px; font-weight: 500; margin-bottom: 8px; }
|
||||
.label { color: var(--color-control-active); @include text-small; padding: 0px 16px; font-weight: 500; margin-bottom: 8px; }
|
||||
}
|
||||
|
||||
.menu.menuDataviewFilterList,
|
||||
|
|
|
|||
|
|
@ -3,20 +3,20 @@
|
|||
.menus {
|
||||
.menu.menuDataviewCreateBookmark { width: 400px; height: 44px; padding: 0px; position: fixed; top: 42px; }
|
||||
.menu.menuDataviewCreateBookmark {
|
||||
.loaderWrapper { position: absolute; background: $colorBgLoader; width: 100%; height: 100%; border-radius: 8px; z-index: 10; }
|
||||
.loaderWrapper { position: absolute; background: var(--color-bg-loader); width: 100%; height: 100%; border-radius: 8px; z-index: 10; }
|
||||
.loaderWrapper {
|
||||
.loader { left: 16px; margin-left: 0px; }
|
||||
}
|
||||
|
||||
.flex { width: 100%; flex-direction: row; align-items: center; }
|
||||
.input { height: 100%; padding: 13.5px 16px; flex-grow: 1; width: 100%; }
|
||||
.buttons { flex-shrink: 0; color: $colorControlActive; font-weight: 500; user-select: none; display: flex; gap: 0px 16px; height: 100%; }
|
||||
.buttons { flex-shrink: 0; color: var(--color-control-active); font-weight: 500; user-select: none; display: flex; gap: 0px 16px; height: 100%; }
|
||||
.buttons {
|
||||
.button {
|
||||
display: inline-block; vertical-align: top; transition: $transitionAllCommon; color: $colorControlActive;
|
||||
display: inline-block; vertical-align: top; transition: $transitionAllCommon; color: var(--color-control-active);
|
||||
background: none; border: 0px; padding: 0px; height: 100%; padding: 0px 16px; line-height: 44px;
|
||||
}
|
||||
.button:hover { color: $colorTextPrimary; }
|
||||
.button:hover { color: var(--color-text-primary); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -10,29 +10,29 @@
|
|||
.item {
|
||||
.name { @include text-overflow-nw; width: calc(100% - 26px); }
|
||||
}
|
||||
.label { color: $colorControlActive; @include text-common; padding: 0px 16px; }
|
||||
.label { color: var(--color-control-active); @include text-common; padding: 0px 16px; }
|
||||
}
|
||||
|
||||
.menu.menuDataviewFileValues {
|
||||
.content { padding-bottom: 0px; }
|
||||
|
||||
.item { display: flex; color: $colorTextSecondary; }
|
||||
.item { display: flex; color: var(--color-text-secondary); }
|
||||
.item {
|
||||
img { display: block; max-width: 100%; max-height: 208px; object-fit: contain; }
|
||||
.name { line-height: 20px; width: calc(100% - 26px); @include text-overflow-nw; }
|
||||
.clickable { width: calc(100% - 20px); display: inline-block; vertical-align: top; }
|
||||
.icon.more { background-color: $colorBgPrimary; }
|
||||
.icon.more { background-color: var(--color-bg-primary); }
|
||||
.icon.dnd { height: auto; align-self: stretch; background-position: top center; background-size: 20px; }
|
||||
}
|
||||
.item.isImage {
|
||||
.icon.more { top: 12px; right: 12px; margin: 0px; }
|
||||
.icon.more:hover { background-color: $colorBgPrimary; }
|
||||
.icon.more:hover { background-color: var(--color-bg-primary); }
|
||||
}
|
||||
|
||||
.item.isFile:hover, .item.isFile.active {
|
||||
.clickable { width: calc(100% - 46px); }
|
||||
}
|
||||
.item:hover::before { background: $colorShapeHighlightMedium; }
|
||||
.item:hover::before { background: var(--color-shape-highlight-medium); }
|
||||
.item:hover, .item.active {
|
||||
.icon.more { opacity: 1; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
.item { padding: 4px 10px; position: relative; white-space: nowrap; display: flex; align-items: center; }
|
||||
.item {
|
||||
.grey { color: $colorControlActive; }
|
||||
.grey { color: var(--color-control-active); }
|
||||
.iconObject { margin-right: 10px; }
|
||||
|
||||
.buttons { line-height: 44px; opacity: 0; transition: $transitionAllCommon; }
|
||||
|
|
@ -36,8 +36,8 @@
|
|||
.name { @include text-overflow-nw; width: 100%; }
|
||||
.flex { line-height: 20px; }
|
||||
|
||||
.condition { color: $colorTextSecondary; margin-right: 4px; }
|
||||
.value { color: $colorTextSecondary; white-space: nowrap; overflow: hidden; }
|
||||
.condition { color: var(--color-text-secondary); margin-right: 4px; }
|
||||
.value { color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; }
|
||||
}
|
||||
}
|
||||
.item.empty { margin: 8px 0px; padding: 14px 16px; }
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
.over { white-space: nowrap; overflow: hidden; width: 100%; }
|
||||
}
|
||||
}
|
||||
.item:hover::before { background: $colorShapeHighlightMedium; }
|
||||
.item:hover::before { background: var(--color-shape-highlight-medium); }
|
||||
|
||||
.bottom { flex-shrink: 0; }
|
||||
.bottom {
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
.item {
|
||||
.name { @include text-overflow-nw; width: calc(100% - 26px); }
|
||||
}
|
||||
.label { color: $colorControlActive; @include text-common; padding: 0px 16px; }
|
||||
.label { color: var(--color-control-active); @include text-common; padding: 0px 16px; }
|
||||
|
||||
.filter { flex-shrink: 0; }
|
||||
}
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
width: 24px; height: 24px; background-size: 20px; right: 10px; margin-top: -12px; border-radius: 4px;
|
||||
opacity: 0; z-index: 1; transition: none;
|
||||
}
|
||||
.icon.delete:hover { background-color: $colorShapeHighlightMedium; }
|
||||
.icon.delete:hover { background-color: var(--color-shape-highlight-medium); }
|
||||
}
|
||||
.item.hover, .item:hover {
|
||||
.clickable { width: calc(100% - 44px) !important; }
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
.menu.menuDataviewOptionEdit {
|
||||
.content { overflow: visible; max-height: unset; }
|
||||
.filter { margin-bottom: 8px; }
|
||||
.item:hover::before { background: $colorShapeHighlightMedium; }
|
||||
.item:hover::before { background: var(--color-shape-highlight-medium); }
|
||||
.item.active::before { z-index: 1; }
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
.switch { position: absolute; right: 16px; top: 50%; margin-top: -8px; }
|
||||
.name { @include text-overflow-nw; width: calc(100% - 90px); }
|
||||
}
|
||||
.item:hover::before { background: $colorShapeHighlightMedium; }
|
||||
.item:hover::before { background: var(--color-shape-highlight-medium); }
|
||||
|
||||
.bottom { flex-shrink: 0; }
|
||||
.bottom {
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
.button { width: 100%; }
|
||||
.button.grey { cursor: default; }
|
||||
|
||||
.item:hover::before { background: $colorShapeHighlightMedium; }
|
||||
.item:hover::before { background: var(--color-shape-highlight-medium); }
|
||||
.item.disabled { cursor: default; opacity: 1 !important; }
|
||||
.item.disabled:hover::before { opacity: 0; }
|
||||
|
||||
|
|
|
|||
|
|
@ -13,8 +13,7 @@
|
|||
|
||||
.select { border: 0px; padding: 0px; display: block; }
|
||||
.select:hover, .select.isFocused { background: none; }
|
||||
.select.grey { color: $colorControlActive; }
|
||||
|
||||
.select.grey { color: var(--color-control-active); }
|
||||
.select {
|
||||
.icon.relation { display: none; }
|
||||
.icon.arrow { display: none; }
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
.item { padding: 4px 10px; position: relative; white-space: nowrap; display: flex; }
|
||||
.item {
|
||||
.grey { color: $colorControlActive; }
|
||||
.grey { color: var(--color-control-active); }
|
||||
.iconObject { margin-right: 10px; }
|
||||
|
||||
.buttons { line-height: 44px; opacity: 0; transition: $transitionAllCommon; }
|
||||
|
|
@ -25,8 +25,8 @@
|
|||
.icon.arrow { display: none; }
|
||||
}
|
||||
|
||||
.condition { color: $colorTextSecondary; margin-right: 4px; }
|
||||
.value { color: $colorTextSecondary; white-space: nowrap; overflow: hidden; line-height: 22px; }
|
||||
.condition { color: var(--color-text-secondary); margin-right: 4px; }
|
||||
.value { color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; line-height: 22px; }
|
||||
|
||||
.tagItem { margin: 2px 4px 0px 0px; vertical-align: top; }
|
||||
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue