@elixpo/lixsketch 5.4.7 → 5.5.0

package/src/react/styles/circleSidebar.css

@@ -0,0 +1,206 @@
+.circleSideBar {
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: auto;
+    border-radius: 15px;
+    height: auto;
+    background-color: #232329;
+    overflow: visible;
+    padding: 5px 10px;
+    transition: 0.5s;
+    z-index: 100;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    filter: blur(0px);
+    opacity: 1;
+}
+
+.circleSideBar.hidden {
+    opacity: 0;
+    pointer-events: none;
+    filter: blur(10px);
+    transform: translateX(-50%) translateY(20px);
+    transition: 0.5s;
+    z-index: -1;
+}
+
+/*  Combined Labels  */
+.circleColorLabel,
+.circleBackgroundLabel,
+.circleThicknessLabel,
+.circleFillLabel,
+.circleStyleLabel {
+    display: none;
+}
+
+
+/* Combined containers for colors, backgrounds, thickness, and fill */
+.circleColorscircle,
+.circleBackground,
+.circleThickness,
+.circleFill,
+.circleStyle {
+    position: static;
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: nowrap;
+    height: 40px;
+    gap: 5px;
+    align-items: center;
+    padding: 0 8px;
+    box-sizing: border-box;
+    border-right: 1px solid rgba(255,255,255,0.15);
+}
+
+.circleFill {
+    border-right: none;
+}
+
+.circleThickness, .circleStyle {
+    gap: 5px;
+}
+
+
+/* Combined styles for color, background and fill spans */
+.circleColorscircle span,
+.circleBackground span,
+.circleFill span {
+    position: relative;
+    width: 30px;
+    height: 30px;
+    border-radius: 10px;
+    margin: 0 5px;
+    cursor: pointer;
+    box-sizing: border-box;
+    transition: 0.25s;
+    flex-shrink: 0; /* Prevent shrinking */
+}
+
+/* Combined selected styles for color background and fill spans */
+.circleColorscircle span.selected,
+.circleBackground span.selected,
+.circleFill span.selected {
+    border: 2px solid #3c09d6;
+    transform: scale(1.3); /* Using transform instead of scale */
+    transition: 0.25s;
+}
+
+/* Color-specific styles */
+.circleColorscircle span:nth-child(1) { background-color: #fff; }
+.circleColorscircle span:nth-child(2) { background: #FF8383; }
+.circleColorscircle span:nth-child(3) { background-color: #3A994C; }
+.circleColorscircle span:nth-child(4) { background-color: #56A2E8; }
+.circleColorscircle span:nth-child(5) { background: #FFD700; }
+
+/* Background-specific styles */
+.circleBackground span:nth-child(1) { background-color: #fff; }
+.circleBackground span:nth-child(2) { background-color: #5B2D2D; }
+.circleBackground span:nth-child(3) { background-color: #043B0C; }
+.circleBackground span:nth-child(4) { background-color: #154163; }
+.circleBackground span:nth-child(5) { 
+    background-color: #ffffe000;  
+    background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), 
+                      linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
+    background-size: 12px 12px;
+    background-position: 0 0, 6px 6px;
+}
+
+
+/* Thickness styles */
+.circleThickness span {
+    width: 40px;
+    height: 40px;
+    position: relative;
+    left: 0;
+    border-radius: 10px;
+    margin: 0 5px;
+    cursor: pointer;
+    color: #fff;
+    background: #31303B;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    font-size: 30px;
+    transition: 0.25s;
+    flex-shrink: 0; /* Prevent shrinking */
+}
+
+.circleThickness span.selected {
+    background: #444480;
+    transition: 0.25s;
+}
+
+.circleThickness span:nth-child(1) { font-weight: 100; }
+.circleThickness span:nth-child(2) { font-weight: 500; }
+.circleThickness span:nth-child(3) { font-weight: 700; }
+
+/* Fill styles */
+
+
+
+.circleFill span {
+    width: 30px;
+    height: 30px;
+    border-radius: 10px;
+    margin: 0 5px;
+    cursor: pointer;
+    box-sizing: border-box;
+    transition: 0.25s;
+    background: #31303B;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    color: #fff;
+    text-transform: uppercase;
+    flex-shrink: 0; /* Prevent shrinking */
+}
+
+.circleFill span.selected {
+    background: #444480;
+    transition: 0.25s;
+}
+
+/* Style styles */
+.circleStyle span {
+    width: 35px;
+    height: 35px;
+    left: 5%;
+    border-radius: 10px;
+    margin: 0; /* Remove left-right margins */
+    cursor: pointer;
+    color: #fff;
+    background: #31303B;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    transition: 0.25s;
+    border: 2px solid transparent;
+    flex-shrink: 0; /* Prevent shrinking */
+}
+
+.circleStyle span.selected {
+    background: #444480;
+    border: 2px solid #3c09d6;
+    transition: 0.25s;
+    transform: scale(1.1); /* Using transform instead of scale */
+}
+
+.circleStyle span svg {
+    width: 30px;
+    height: 30px;
+    stroke: #fff;
+    transition: 0.25s;
+}
+
+.circleStyle span.selected svg {
+    stroke: #FFD700;
+}
+
+.circleFill .circleFillStyleSpan svg {
+    pointer-events: none;
+  }
+  

package/src/react/styles/fonts/fonts.css

@@ -0,0 +1,29 @@
+@font-face {
+  font-family: 'lixCode';
+  src: url('./lixCode.ttf') format('truetype');
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'lixDefault';
+  src: url('./lixDefault.ttf') format('truetype');
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'lixDocs';
+  src: url('./lixDocs.ttf') format('truetype');
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'lixFancy';
+  src: url('./lixFancy.ttf') format('truetype');
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'lixFont';
+  src: url('./lixFont.woff2') format('woff2');
+  font-display: swap;
+}

package/src/react/styles/lineSidebar.css

@@ -0,0 +1,207 @@
+.lineSideBar {
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: auto;
+    border-radius: 15px;
+    height: auto;
+    background-color: #232329;
+    overflow: visible;
+    padding: 5px 10px;
+    transition: 0.5s;
+    z-index: 100;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    filter: blur(0px);
+    opacity: 1;
+}
+
+.lineSideBar.hidden {
+    opacity: 0;
+    pointer-events: none;
+    filter: blur(10px);
+    transform: translateX(-50%) translateY(20px);
+    transition: 0.5s;
+    z-index: -1;
+}
+
+.lineColorLabel,
+.lineThicknessLabel,
+.lineStyleLabel,
+.lineSlopeLabel,
+.lineEdgeLabel
+{
+    display: none;
+}
+
+.lineColor,
+.lineThickness,
+.lineStyle,
+.lineSlope,
+.lineEdge
+{
+    position: static;
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: nowrap;
+    height: 40px;
+    gap: 5px;
+    align-items: center;
+    padding: 0 8px;
+    box-sizing: border-box;
+    border-right: 1px solid rgba(255,255,255,0.15);
+}
+
+.lineEdge {
+    border-right: none;
+}
+.lineColor span
+{
+    position: relative;
+    width: 30px;
+    height: 30px;
+    border-radius: 10px;
+    margin: 0 2px;
+    cursor: pointer;
+    box-sizing: border-box;
+    transition: 0.25s;
+    flex-shrink: 0;
+}
+.lineColor span.selected 
+{
+    border: 2px solid #b8a4f4;
+    transition: 0.25s;
+}
+
+.lineColor span:nth-child(1) { background-color: #fff; }
+.lineColor span:nth-child(2) { background: #FF8383; }
+.lineColor span:nth-child(3) { background-color: #3A994C; }
+.lineColor span:nth-child(4) { background-color: #56A2E8; }
+.lineColor span:nth-child(5) { background: #FFD700; }
+
+.lineThickness span 
+{
+    width: 40px;
+    height: 40px;
+    position: relative;
+    left: 0;
+    border-radius: 10px;
+    margin: 0 5px;
+    cursor: pointer;
+    color: #fff;
+    background: #31303B;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    font-size: 30px;
+    transition: 0.25s;
+    flex-shrink: 0; /* Prevent shrinking */
+}
+.lineThickness span.selected 
+{
+    background: #444480;
+    transition: 0.25s;
+}
+
+.lineThickness span:nth-child(1) { font-weight: 100; }
+.lineThickness span:nth-child(2) { font-weight: 500; }
+.lineThickness span:nth-child(3) { font-weight: 700; }
+
+.lineStyle 
+{
+    gap: 20px;
+}
+.lineStyle span {
+    width: 35px;
+    height: 35px;
+    left: 10%;
+    border-radius: 10px;
+    margin: 0; /* Remove left-right margins */
+    cursor: pointer;
+    color: #fff;
+    background: #31303B;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    transition: 0.25s;
+    border: 2px solid transparent;
+    flex-shrink: 0; /* Prevent shrinking */
+}
+.lineStyle span.selected {
+    background: #444480;
+    border: 2px solid #3c09d6;
+    transition: 0.25s;
+    transform: scale(1.1); /* Using transform instead of scale */
+}
+.lineStyle span svg {
+    width: 30px;
+    height: 30px;
+    stroke: #fff;
+    transition: 0.25s;
+}
+.lineStyle span.selected svg {
+    stroke: #FFD700;
+}
+
+.lineSlope 
+{
+    gap: 20px;
+}
+
+.lineSlope span 
+{
+    width: 35px;
+    height: 35px;
+    left: 10%;
+    border-radius: 10px;
+    margin: 0; /* Remove left-right margins */
+    cursor: pointer;
+    color: #fff;
+    background: #31303B;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    transition: 0.25s;
+    border: 2px solid transparent;
+    flex-shrink: 0; /* Prevent shrinking */
+}
+.lineSlope span.selected 
+{
+    background: #444480;
+    border: 2px solid #3c09d6;
+    transition: 0.25s;
+    transform: scale(1.1); /* Using transform instead of scale */
+}
+
+.lineEdge 
+{
+    gap: 20px;
+}
+
+.lineEdge span 
+{
+    width: 35px;
+    height: 35px;
+    left: 10%;
+    border-radius: 10px;
+    margin: 0; /* Remove left-right margins */
+    cursor: pointer;
+    color: #fff;
+    background: #31303B;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    transition: 0.25s;
+    border: 2px solid transparent;
+    flex-shrink: 0; /* Prevent shrinking */
+}
+
+.lineEdge span.selected 
+{
+    background: #444480;
+    border: 2px solid #3c09d6;
+    transition: 0.25s;
+    transform: scale(1.1); /* Using transform instead of scale */
+}

package/src/react/styles/paintbrushSidebar.css

@@ -0,0 +1,247 @@
+@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
+.paintBrushToolBar
+{
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    gap: 0;
+    align-items: center;
+    height: auto;
+    padding: 5px 10px;
+    background: #232329;
+    border-radius: 15px;
+    transition: 0.5s;
+    filter: blur(0px);
+    opacity: 1;
+    z-index: 100;
+}
+.paintBrushToolBar.hidden
+{
+    opacity: 0;
+    pointer-events: none;
+    filter: blur(10px);
+    transform: translateX(-50%) translateY(20px);
+    transition: 0.5s;
+    z-index: -1;
+}
+.paintBrushToolBar .strokeColors
+{
+    position: static;
+    display: flex;
+    flex-direction: row;
+    height: 40px;
+    align-items: center;
+    gap: 3px;
+    padding: 0 8px;
+    border-right: 1px solid rgba(255,255,255,0.15);
+    box-sizing: border-box;
+}
+.paintBrushToolBar .strokeColors span
+{
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    margin: 0 3px;
+    cursor: pointer;
+    box-sizing: border-box;
+    transition: 0.25s;
+    flex-shrink: 0;
+}
+.paintBrushToolBar .strokeColors span.selected
+{
+    border: 2px solid #b8a4f4;
+    transform: scale(1.25);
+    transition: 0.25s;
+}
+.paintBrushToolBar .strokeColors span:nth-child(1) 
+{
+    background-color: #fff;
+}
+.paintBrushToolBar .strokeColors span:nth-child(2) 
+{
+    background-color: #FF8383;
+}
+.paintBrushToolBar .strokeColors span:nth-child(3) 
+{
+    background-color: #3A994C;
+}
+.paintBrushToolBar .strokeColors span:nth-child(4) 
+{
+    background-color: #56A2E8;
+}
+.paintBrushToolBar .strokeColors span:nth-child(5) 
+{
+    background-color: #FFD700;
+}
+.ToolSpacer
+{
+    display: none;
+}
+
+.paintBrushToolBar .strokeThickness
+{
+    position: static;
+    display: flex;
+    flex-direction: row;
+    height: 40px;
+    align-items: center;
+    gap: 5px;
+    padding: 0 8px;
+    border-right: 1px solid rgba(255,255,255,0.15);
+    box-sizing: border-box;
+}
+.paintBrushToolBar .strokeThickness .strokeThicknessSpan
+{
+    border-radius: 50%;
+    background-color: #fff;
+    cursor: pointer;
+    box-sizing: border-box;
+    transition: 0.25s;
+    flex-shrink: 0;
+    border: 2px solid transparent;
+}
+.paintBrushToolBar .strokeThickness .strokeThicknessSpan.selected
+{
+    border: 2px solid #b8a4f4;
+    transition: 0.25s;
+}
+.paintBrushToolBar .strokeThickness .strokeThicknessSpan:nth-child(1) { width: 8px; height: 8px; }
+.paintBrushToolBar .strokeThickness .strokeThicknessSpan:nth-child(2) { width: 13px; height: 13px; }
+.paintBrushToolBar .strokeThickness .strokeThicknessSpan:nth-child(3) { width: 18px; height: 18px; }
+
+.paintBrushToolBar .strokeStyle
+{
+    position: static;
+    display: flex;
+    flex-direction: row;
+    height: 40px;
+    align-items: center;
+    gap: 5px;
+    padding: 0 8px;
+    border-right: 1px solid rgba(255,255,255,0.15);
+    box-sizing: border-box;
+}
+.paintBrushToolBar .strokeStyle .strokeStyleSpan
+{
+    width: 32px;
+    height: 32px;
+    border-radius: 10px;
+    background: #31303B;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    box-sizing: border-box;
+    transition: 0.25s;
+    border: 2px solid transparent;
+    flex-shrink: 0;
+}
+.paintBrushToolBar .strokeStyle .strokeStyleSpan.selected
+{
+    background: #444480;
+    border: 2px solid #3c09d6;
+    transition: 0.25s;
+    transform: scale(1.1);
+}
+.paintBrushToolBar .strokeStyle .strokeStyleSpan svg
+{
+    width: 20px;
+    height: 20px;
+    stroke: #fff;
+    fill: none;
+}
+
+/* Taper section */
+.paintBrushToolBar .strokeTaper
+{
+    position: static;
+    display: flex;
+    flex-direction: row;
+    height: 40px;
+    align-items: center;
+    gap: 5px;
+    padding: 0 8px;
+    border-right: 1px solid rgba(255,255,255,0.15);
+    box-sizing: border-box;
+}
+.strokeTaperSpan
+{
+    width: 32px;
+    height: 32px;
+    border-radius: 10px;
+    background: #31303B;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    box-sizing: border-box;
+    transition: 0.25s;
+    border: 2px solid transparent;
+    flex-shrink: 0;
+}
+.strokeTaperSpan.selected
+{
+    background: #444480;
+    border: 2px solid #3c09d6;
+    transition: 0.25s;
+    transform: scale(1.1);
+}
+.strokeTaperSpan svg
+{
+    width: 22px;
+    height: 22px;
+    fill: #fff;
+    stroke: none;
+}
+
+/* Roughness section */
+.paintBrushToolBar .strokeRoughness
+{
+    position: static;
+    display: flex;
+    flex-direction: row;
+    height: 40px;
+    align-items: center;
+    gap: 5px;
+    padding: 0 8px;
+    box-sizing: border-box;
+}
+.strokeRoughnessSpan
+{
+    width: 32px;
+    height: 32px;
+    border-radius: 10px;
+    background: #31303B;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    box-sizing: border-box;
+    transition: 0.25s;
+    border: 2px solid transparent;
+    flex-shrink: 0;
+}
+.strokeRoughnessSpan.selected
+{
+    background: #444480;
+    border: 2px solid #3c09d6;
+    transition: 0.25s;
+    transform: scale(1.1);
+}
+.strokeRoughnessSpan svg
+{
+    width: 22px;
+    height: 22px;
+    stroke: #fff;
+    fill: none;
+}
+
+/* Opacity */
+.strokeOpacity
+{
+    display: none;
+}