button {
- border-radius: 4px;
-}
-
-.logseq-tldraw .primary-tools .button {
+.tl-primary-tools .button {
position: relative;
height: 36px;
width: 36px;
+ border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
@@ -278,16 +264,16 @@
color: var(--ls-secondary-text-color);
}
-.logseq-tldraw .primary-tools .button:hover {
+.tl-primary-tools .button:hover {
background-color: var(--color-hover);
}
-.logseq-tldraw .primary-tools .button[data-selected='true'] {
+.tl-primary-tools .button[data-selected='true'] {
background-color: var(--color-selectedFill);
color: var(--color-selectedContrast);
}
-.logseq-tldraw .floating-panel[data-tool-locked='true'] > .button[data-selected='true']::after {
+.floating-panel[data-tool-locked='true'] > .button[data-selected='true']::after {
content: '';
display: block;
height: 6px;
@@ -300,7 +286,7 @@
border-radius: 100%;
}
-.logseq-tldraw .text-shape-wrapper {
+.tl-text-shape-wrapper {
position: absolute;
white-space: pre-wrap;
overflow-wrap: break-word;
@@ -323,39 +309,7 @@
-webkit-touch-callout: none;
}
-.logseq-tldraw .text-shape-content {
- z-index: 1;
- width: fit-content;
- height: fit-content;
- border: none;
- resize: none;
- margin: 0;
- padding: inherit;
- font-family: inherit;
- font-size: inherit;
- font-variant: inherit;
- text-align: inherit;
- min-height: inherit;
- min-width: inherit;
- line-height: inherit;
- letter-spacing: inherit;
- outline: 0;
- white-space: inherit;
- overflow-wrap: inherit;
- font-weight: inherit;
- overflow: hidden;
- backface-visibility: hidden;
- display: inline-block;
- user-select: none;
- -webkit-user-select: none;
-}
-
-.logseq-tldraw .text-shape-content[data-isediting='true'] {
- visibility: hidden;
- pointer-events: none;
-}
-
-.logseq-tldraw .text-shape-input {
+.tl-text-shape-input {
position: absolute;
top: 0;
left: 0;
@@ -385,7 +339,7 @@
-webkit-user-select: text;
}
-.logseq-tldraw .tl-stroke-hitarea {
+.tl-stroke-hitarea {
fill: none;
stroke: transparent;
stroke-width: calc(24px * var(--tl-scale));
@@ -394,7 +348,7 @@
stroke-linejoin: round;
}
-.logseq-tldraw .text-label-wrapper {
+.tl-text-label-wrapper {
position: absolute;
top: 0;
left: 0;
@@ -408,7 +362,7 @@
font-family: var(--ls-font-family);
}
-.logseq-tldraw .text-label-inner-wrapper {
+.tl-text-label-inner-wrapper {
position: absolute;
padding: 4px;
z-index: 1;
@@ -424,7 +378,7 @@
overflow-wrap: break-word;
}
-.logseq-tldraw .text-label-textarea {
+.tl-text-label-textarea {
position: absolute;
top: 0;
left: 0;
@@ -452,12 +406,12 @@
overflow-wrap: break-word;
}
-.logseq-tldraw .text-label-textarea:focus {
+.tl-text-label-textarea:focus {
outline: none;
border: none;
}
-.logseq-tldraw .preview-minimap {
+.tl-preview-minimap {
height: 300px;
width: 400px;
@@ -471,7 +425,7 @@
pointer-events: all;
}
-.logseq-tldraw .preview-minimap-toggle {
+.tl-preview-minimap-toggle {
position: absolute;
top: 60px;
right: 50px;
@@ -488,21 +442,21 @@
font-size: 14px;
}
-.logseq-tldraw .preview-minimap-toggle[data-active='true'] {
+.tl-preview-minimap-toggle[data-active='true'] {
background: #eee;
}
-.logseq-tldraw .tl-quick-search {
+.tl-quick-search {
width: fit-content;
position: relative;
}
-.logseq-tldraw .tl-quick-search-icon {
+.tl-quick-search-icon {
flex-shrink: 0;
margin-right: 12px;
}
-.logseq-tldraw .tl-quick-search-input-container {
+.tl-quick-search-input-container {
display: flex;
align-items: center;
font-size: 16px;
@@ -512,7 +466,7 @@
box-shadow: var(--shadow-small);
}
-.logseq-tldraw .tl-quick-search-input-sizer {
+.tl-quick-search-input-sizer {
display: inline-grid;
vertical-align: top;
align-items: center;
@@ -520,13 +474,13 @@
margin: 5px;
}
-.logseq-tldraw .tl-quick-search-input {
+.tl-quick-search-input {
grid-area: 1/2;
width: auto;
line-height: 1;
}
-.logseq-tldraw .tl-quick-search-input-sizer::after {
+.tl-quick-search-input-sizer::after {
content: attr(data-value) ' ';
visibility: hidden;
white-space: pre-wrap;
@@ -534,7 +488,7 @@
width: auto;
}
-.logseq-tldraw .tl-quick-search-options {
+.tl-quick-search-options {
position: absolute;
top: calc(100% + 8px);
left: 0;
@@ -550,7 +504,7 @@
overscroll-behavior: none;
}
-.logseq-tldraw .tl-quick-search-option {
+.tl-quick-search-option {
padding: 8px 16px;
cursor: pointer;
display: flex;
@@ -558,11 +512,11 @@
line-height: 1.25rem;
}
-.logseq-tldraw .tl-quick-search-option:hover {
+.tl-quick-search-option:hover {
background-color: var(--ls-menu-hover-color, #f4f5f7);
}
-.logseq-tldraw .tl-logseq-portal-container {
+.tl-logseq-portal-container {
width: 100%;
overscroll-behavior: none;
height: 100%;
@@ -573,7 +527,7 @@
overflow: hidden;
}
-.logseq-tldraw .tl-logseq-portal-header {
+.tl-logseq-portal-header {
height: 40px;
width: 100%;
flex-shrink: 0;
@@ -588,7 +542,7 @@
overflow: hidden;
}
-.logseq-tldraw .tl-logseq-portal-header .type-tag {
+.tl-logseq-portal-header .type-tag {
display: flex;
flex-direction: column;
align-items: center;
@@ -603,19 +557,19 @@
flex-grow: 0;
}
-.logseq-tldraw .tl-logseq-portal-header .page-ref {
+.tl-logseq-portal-header .page-ref {
color: var(--ls-title-text-color);
}
-html[data-theme='light'] .logseq-tldraw .tl-logseq-portal-header {
+html[data-theme='light'] .tl-logseq-portal-header {
backdrop-filter: brightness(0.9);
}
-html[data-theme='dark'] .logseq-tldraw .tl-logseq-portal-header {
+html[data-theme='dark'] .tl-logseq-portal-header {
backdrop-filter: brightness(1.2);
}
-.logseq-tldraw .html-container > iframe {
+.tl-html-container > iframe {
height: 100% !important;
width: 100% !important;
margin: 0;
diff --git a/tldraw/packages/core/src/lib/tools/TLSelectTool/states/PointingMinimapState.ts b/tldraw/packages/core/src/lib/tools/TLSelectTool/states/PointingMinimapState.ts
index 8c72e22944..c5bb785a74 100644
--- a/tldraw/packages/core/src/lib/tools/TLSelectTool/states/PointingMinimapState.ts
+++ b/tldraw/packages/core/src/lib/tools/TLSelectTool/states/PointingMinimapState.ts
@@ -24,9 +24,9 @@ export class PointingMinimapState<
}
getCameraPoint = (clientPoint: [number, number]) => {
- const minimapContainer = document.querySelector('.preview-minimap svg')
+ const minimapContainer = document.querySelector('.tl-preview-minimap svg')
const minimapCamera = document.querySelector(
- '.preview-minimap #minimap-camera-rect'
+ '.tl-preview-minimap #minimap-camera-rect'
)
if (minimapContainer && minimapCamera) {
const rect = minimapContainer.getBoundingClientRect()