jeffemmett
/
orionreed.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

cleanup button styling

This commit is contained in:
Orion Reed 2024-03-29 18:38:07 -07:00
parent a5099f088b
commit badd9bc013
4 changed files with 24 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Canvas.tsx
View File

@ -13,13 +13,6 @@ const components: TLUiComponents = {
QuickActions: null, QuickActions: null,
MainMenu: null, MainMenu: null,
MenuPanel: null, MenuPanel: null,
// ZoomMenu: null,
// Minimap: null,
// Toolbar: null,
// KeyboardShortcutsDialog: null,
// HelperButtons: null,
// SharePanel: null,
// TopPanel: null,
} }
export function Canvas({ shapes }: { shapes: TLShape[]; }) { export function Canvas({ shapes }: { shapes: TLShape[]; }) {

34
src/css/style.css
View File

@ -7,8 +7,13 @@ body {
min-height: 100vh; min-height: 100vh;
min-height: -webkit-fill-available; min-height: -webkit-fill-available;
height: 100%; height: 100%;
/* touch-action: none; */ }
/* font-family: "Inter", sans-serif; */
.canvas-mode {
overflow: hidden;
& #toggle-physics {
display: block;
}
} }
.tldraw__editor { .tldraw__editor {
@ -94,11 +99,11 @@ ol {
#toggle-physics, #toggle-physics,
#toggle-canvas { #toggle-canvas {
position: absolute; position: fixed;
z-index: 99999; z-index: 999;
right: 10px; right: 10px;
width: 50px; width: 40px;
height: 50px; height: 40px;
background: none; background: none;
border: none; border: none;
cursor: pointer; cursor: pointer;
@ -106,24 +111,13 @@ ol {
&:hover { &:hover {
opacity: 1; opacity: 1;
} }
& img {
width: 100%;
height: 100%;
}
} }
#toggle-canvas { #toggle-canvas {
top: 10px; top: 10px;
& img {
width: 50%;
height: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
} }
#toggle-physics { #toggle-physics {
top: 60px; top: 60px;
display: none;
} }
@media (max-width: 600px) { @media (max-width: 600px) {
@ -163,7 +157,3 @@ ol {
opacity: 0 !important; opacity: 0 !important;
transition: opacity 0.25s ease-in-out; transition: opacity 0.25s ease-in-out;
} }
.hidden {
display: none;
}

10
src/public/canvas-button.svg
View File

@ -1,7 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<!-- Generated by Pixelmator Pro 3.5.6 --> <!-- Generated by Pixelmator Pro 3.5.7 -->
<svg width="450" height="450" viewBox="0 0 450 450" xmlns="http://www.w3.org/2000/svg"> <svg width="293" height="293" viewBox="0 0 293 293" xmlns="http://www.w3.org/2000/svg">
<path id="Rounded-Rectangle" fill="none" stroke="#000000" stroke-width="34" stroke-linecap="round" <path id="canvas-button" fill="none" stroke="#000000" stroke-width="22" stroke-linecap="round" stroke-linejoin="round" d="M 72.367233 280.871094 C 50.196026 280.871094 39.109756 280.870453 30.79781 276.215546 C 24.923391 272.92572 20.074295 268.07663 16.784464 262.202179 C 12.129553 253.890228 12.128906 242.80397 12.128906 220.632767 L 12.128906 195.152313 L 24.139235 195.152313 L 24.139235 229.431793 C 24.139235 243.943832 24.139042 251.199875 27.185894 256.640411 C 29.339237 260.485474 32.514515 263.660767 36.359585 265.814117 C 41.800129 268.860962 49.056156 268.860779 63.568214 268.860779 L 97.847694 268.860779 L 97.847694 280.871094 L 72.367233 280.871094 Z M 195.276031 280.871094 L 195.276031 268.860779 L 229.560684 268.860779 C 244.072723 268.860779 251.328766 268.860962 256.769318 265.814117 C 260.61441 263.660767 263.789673 260.485474 265.943024 256.640411 C 268.989868 251.199875 268.989685 243.943832 268.989685 229.431793 L 268.989685 195.152313 L 281 195.152313 L 281 220.632767 C 281 242.80397 280.999359 253.890228 276.344452 262.202179 C 273.054626 268.07663 268.205536 272.92572 262.331085 276.215546 C 254.019119 280.870453 242.932877 280.871094 220.761673 280.871094 L 195.276031 280.871094 Z M 12.128906 97.723969 L 12.128906 72.238327 C 12.128906 50.067123 12.129553 38.980881 16.784464 30.668915 C 20.074295 24.794464 24.923391 19.945404 30.79781 16.655548 C 39.109756 12.000641 50.196026 12 72.367233 12 L 97.847694 12 L 97.847694 24.010315 L 63.568214 24.010315 C 49.056156 24.010315 41.800129 24.010132 36.359585 27.056976 C 32.514519 29.210327 29.339237 32.38562 27.185894 36.230682 C 24.139044 41.671234 24.139235 48.927277 24.139235 63.439316 L 24.139235 97.723969 L 12.128906 97.723969 Z M 268.989685 97.723969 L 268.989685 63.439316 C 268.989685 48.927277 268.989868 41.671234 265.943024 36.230682 C 263.789673 32.38559 260.61438 29.210327 256.769318 27.056976 C 251.328766 24.010132 244.072723 24.010315 229.560684 24.010315 L 195.276031 24.010315 L 195.276031 12 L 220.761673 12 C 242.932877 12 254.019119 12.000641 262.331085 16.655548 C 268.205536 19.945374 273.054596 24.794464 276.344452 30.668915 C 280.999359 38.980881 281 50.067123 281 72.238327 L 281 97.723969 L 268.989685 97.723969 Z"/>
stroke-linejoin="round" </svg>
d="M 112.785156 427.964844 C 79.383881 427.964844 62.682236 427.963867 50.160156 420.951172 C 41.310253 415.994995 34.005013 408.689758 29.048828 399.839844 C 22.036131 387.317749 22.035156 370.616119 22.035156 337.214844 L 22.035156 298.828125 L 40.128906 298.828125 L 40.128906 350.470703 C 40.128906 372.333344 40.128616 383.264679 44.71875 391.460938 C 47.962795 397.253601 52.746403 402.037201 58.539063 405.28125 C 66.735329 409.871368 77.666649 409.871094 99.529297 409.871094 L 151.171875 409.871094 L 151.171875 427.964844 L 112.785156 427.964844 Z M 297.949219 427.964844 L 297.949219 409.871094 L 349.599609 409.871094 C 371.462219 409.871094 382.393555 409.871399 390.589844 405.28125 C 396.382538 402.037201 401.166107 397.253601 404.410156 391.460938 C 409.000305 383.264679 409 372.333344 409 350.470703 L 409 298.828125 L 427.09375 298.828125 L 427.09375 337.214844 C 427.09375 370.616119 427.092804 387.317749 420.080078 399.839844 C 415.123901 408.689758 407.818665 415.994995 398.96875 420.951172 C 386.446625 427.963867 369.745026 427.964844 336.34375 427.964844 L 297.949219 427.964844 Z M 22.035156 152.050781 L 22.035156 113.65625 C 22.035156 80.254974 22.036131 63.553375 29.048828 51.03125 C 34.005013 42.181335 41.310253 34.876129 50.160156 29.919922 C 62.682236 22.907196 79.383881 22.90625 112.785156 22.90625 L 151.171875 22.90625 L 151.171875 41 L 99.529297 41 C 77.666649 41 66.735329 40.999695 58.539063 45.589844 C 52.746407 48.833893 47.962795 53.617493 44.71875 59.410156 C 40.12862 67.606445 40.128906 78.537781 40.128906 100.400391 L 40.128906 152.050781 L 22.035156 152.050781 Z M 409 152.050781 L 409 100.400391 C 409 78.537781 409.000305 67.606445 404.410156 59.410156 C 401.166107 53.617462 396.382507 48.833893 390.589844 45.589844 C 382.393555 40.999695 371.462219 41 349.599609 41 L 297.949219 41 L 297.949219 22.90625 L 336.34375 22.90625 C 369.745026 22.90625 386.446625 22.907196 398.96875 29.919922 C 407.818665 34.876099 415.123871 42.181335 420.080078 51.03125 C 427.092804 63.553375 427.09375 80.254974 427.09375 113.65625 L 427.09375 152.050781 L 409 152.050781 Z" />
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

18
src/public/gravity-button.svg
View File

@ -1,10 +1,8 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <?xml version="1.0" encoding="UTF-8"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools --> <!-- Generated by Pixelmator Pro 3.5.7 -->
<svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" id="gravity" data-name="Line Color" xmlns="http://www.w3.org/2000/svg" class="icon line-color"> <svg width="247" height="450" viewBox="0 0 247 450" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"/> <g id="gravity-button">
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/> <path id="secondary" fill="none" stroke="#000000" stroke-width="30" stroke-linecap="round" stroke-linejoin="round" d="M 123.166664 32.750031 L 123.166664 169.500031 M 214.333313 65.541687 L 214.333313 202.291687 M 32 65.541687 L 32 202.291687"/>
<g id="SVGRepo_iconCarrier"> <path id="primary" fill="none" stroke="#000000" stroke-width="30" stroke-linecap="round" stroke-linejoin="round" d="M 214.333313 341.833344 C 214.333313 392.183289 173.516632 433 123.166664 433 C 72.816711 433 32 392.183289 32 341.833344 C 32 291.483398 72.816711 250.666687 123.166664 250.666687 C 173.516632 250.666687 214.333313 291.483398 214.333313 341.833344 Z"/>
<path id="secondary" d="M12,3V9m4-5v6M8,4v6" style="fill: none; stroke: #000000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"/> </g>
<circle id="primary" cx="12" cy="17" r="4" style="fill: none; stroke: #000000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"/> </svg>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 816 B

After

Width:  |  Height:  |  Size: 846 B