icydraw/src/client/scss/index.scss

108 lines
9.0 KiB
SCSS
Raw Normal View History

2022-04-02 13:45:07 +00:00
*, *::before, *::after {
box-sizing: border-box;
}
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.canvas {
image-rendering: optimizeSpeed; /* Older versions of FF */
image-rendering: -moz-crisp-edges; /* FF 6.0+ */
image-rendering: -webkit-optimize-contrast; /* Safari */
image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */
image-rendering: pixelated; /* Awesome future-browsers */
-ms-interpolation-mode: nearest-neighbor; /* IE */
position: absolute;
z-index: 1001;
transform-origin: center center;
&__wrapper {
width: 100%;
height: 100%;
display: flex;
background-color: rgb(143, 143, 143);
}
&__container {
position: relative;
flex-grow: 1;
overflow: hidden;
}
&__cursor {
position: absolute;
z-index: 1002;
width: 1px;
height: 1px;
background: url('data:image/png;base64,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dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6R0lNUD0iaHR0cDovL3d3dy5naW1wLm9yZy94bXAvIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgIHhtcE1NOkRvY3VtZW50SUQ9ImdpbXA6ZG9jaWQ6Z2ltcDo1MGFkNWM1Mi0xMWZkLTQ2ZDktOWQzMy0wODBhZDBlZmRkOGIiCiAgIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NjQxMTYxOWUtYTRhZC00OTQzLWE5MDEtMTMyODk4MjFkYjMyIgogICB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6Mzc0YzA0MGItMjNlMy00ZDllLWI0ZWQtYWE5ZGJkMzVlZTBkIgogICBkYzpGb3JtYXQ9ImltYWdlL3BuZyIKICAgR0lNUDpBUEk9IjIuMCIKICAgR0lNUDpQbGF0Zm9ybT0iTGludXgiCiAgIEdJTVA6VGltZVN0YW1wPSIxNjQ4ODkwNjQ1MTM0NTU2IgogICBHSU1QOlZlcnNpb249IjIuMTAuMzAiCiAgIHRpZmY6T3JpZW50YXRpb249IjEiCiAgIHhtcDpDcmVhdG9yVG9vbD0iR0lNUCAyLjEwIj4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiCiAgICAgIHN0RXZ0OmNoYW5nZWQ9Ii8iCiAgICAgIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MDBiNzUzOTItOTU0NS00YzY3LTlhN2MtNGJjMmU5ZGIxM2E4IgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJHaW1wIDIuMTAgKExpbnV4KSIKICAgICAgc3RFdnQ6d2hlbj0iMjAyMi0wNC0wMlQxMjoxMDo0NSswMzowMCIvPgogICAgPC9yZGY6U2VxPgogICA8L3htcE1NOkhpc3Rvcnk+CiAgPC9yZGY6RGVzY3JpcHRpb24+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAg
background-size: contain;
background-repeat: no-repeat;
}
}
.controls {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding: 1rem;
text-align: center;
background-color: rgba(221, 221, 221, 0.404);
*.btn, input, a {
pointer-events: all;
}
&__wrapper {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 1003;
pointer-events: none;
}
&__colors {
justify-content: center;
counter-reset: colorindex;
&, &-history {
display: flex;
flex-direction: row;
gap: 0.25rem;
align-items: center;
}
}
&__color {
width: 1.5rem;
height: 1.5rem;
cursor: pointer;
position: relative;
counter-increment: colorindex;
&::after {
content: counter(colorindex);
position: relative;
color: #fff;
text-shadow: 2px 2px #000;
top: -8px;
right: -8px;
}
}
.btn-place {
font-size: 1.4rem;
padding: 0.5rem 1.25rem;
}
}