File size: 2,197 Bytes
6f91ce5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap');
@import url('tldraw/tldraw.css');
body {
font-family: 'Inter', sans-serif;
overscroll-behavior: none;
}
.RoomWrapper {
--background: white;
--text: hsl(0, 0%, 20%);
--gray-light: #f5f5f5;
--gray-dark: #e5e5e5;
--black-transparent-lighter: rgba(0, 0, 0, 0.15);
--black-transparent-light: rgba(0, 0, 0, 0.4);
--black-transparent-dark: rgba(0, 0, 0, 0.6);
--black-transparent-darker: rgba(0, 0, 0, 0.7);
--focus: hsl(217, 89%, 61%);
--whiteboard: hsl(240, 5%, 96%);
color-scheme: light;
}
:root:has(.tl-theme__dark) .RoomWrapper {
--background: black;
--text: hsl(0, 9%, 94%);
--gray-light: #333;
--gray-dark: #444;
--black-transparent-lighter: rgba(255, 255, 255, 0.15);
--black-transparent-light: rgba(255, 255, 255, 0.4);
--black-transparent-dark: rgba(255, 255, 255, 0.6);
--black-transparent-darker: rgba(255, 255, 255, 0.7);
--focus: hsl(217, 89%, 61%);
--whiteboard: hsl(240, 5%, 6.5%);
color-scheme: dark;
}
.RoomWrapper {
display: flex;
flex-direction: column;
position: absolute;
inset: 0px;
}
.RoomWrapper-header {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
padding: 8px 16px;
gap: 16px;
background: var(--background);
border-bottom: 1px solid var(--gray-dark);
color: var(--text);
font-size: 14px;
}
.RoomWrapper-copy {
background: var(--black-transparent-lighter);
border: 1px solid var(--gray-dark);
border-radius: 4px;
padding: 4px 12px;
height: 24px;
cursor: pointer;
position: relative;
text-align: center;
}
.RoomWrapper-copy:has(.RoomWrapper-copied) {
color: transparent;
}
.RoomWrapper-copied {
color: var(--text);
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
.RoomWrapper-copy:hover {
border: 1px solid var(--black-transparent-lighter);
}
.RoomWrapper-content {
position: relative;
flex: 1;
}
/* the canvas and, beside it, the chat panel (T05); the widgets (T10) sit over the canvas */
.Board {
position: absolute;
inset: 0;
display: flex;
flex-direction: row;
}
.Board-canvas {
position: relative;
flex: 1;
min-width: 0;
}
|