Merge branch 'v2-ui' of http://185.100.212.76:7776/Dwinzo-Beta/Dwinzo_dev into v2-ui
This commit is contained in:
commit
05eb3342b0
|
|
@ -2,6 +2,11 @@ import React from "react";
|
|||
import { HelpIcon } from "../icons/DashboardIcon";
|
||||
import { useLogger } from "../ui/log/LoggerContext";
|
||||
import { GetLogIcon } from "./getLogIcons";
|
||||
import {
|
||||
CurserLeftIcon,
|
||||
CurserMiddleIcon,
|
||||
CurserRightIcon,
|
||||
} from "../icons/LogIcons";
|
||||
|
||||
const Footer: React.FC = () => {
|
||||
const { logs, setIsLogListVisible } = useLogger();
|
||||
|
|
@ -11,15 +16,21 @@ const Footer: React.FC = () => {
|
|||
<div className="footer-wrapper">
|
||||
<div className="selection-wrapper">
|
||||
<div className="selector-wrapper">
|
||||
<div className="icon"></div>
|
||||
<div className="icon">
|
||||
<CurserLeftIcon />
|
||||
</div>
|
||||
<div className="selector">Selection</div>
|
||||
</div>
|
||||
<div className="selector-wrapper">
|
||||
<div className="icon"></div>
|
||||
<div className="icon">
|
||||
<CurserMiddleIcon />
|
||||
</div>
|
||||
<div className="selector">Rotate/Zoom</div>
|
||||
</div>
|
||||
<div className="selector-wrapper">
|
||||
<div className="icon"></div>
|
||||
<div className="icon">
|
||||
<CurserRightIcon />
|
||||
</div>
|
||||
<div className="selector">Pan/Context Menu</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -96,3 +96,54 @@ export const LogIcon = () => {
|
|||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const CurserLeftIcon = () => {
|
||||
return (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect x="4" y="2" width="8" height="12" rx="4" fill="#B7B7C6" />
|
||||
<path
|
||||
d="M5.13846 5.48676L2.50012 5.48676C2.65614 4.80688 2.77923 3.85986 3.27563 3.27521C3.77203 2.69056 4.41047 2.19733 5.13846 1.83606C5.86644 1.47479 6.66318 1.2558 7.46319 1.19709L7.24582 5.48676L5.13846 5.48676Z"
|
||||
fill="#FCFDFD"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const CurserMiddleIcon = () => {
|
||||
return (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect x="4" y="2" width="8" height="11.4286" rx="4" fill="#B7B7C6" />
|
||||
<rect x="7" y="3" width="2" height="5" rx="1" fill="#FCFDFD" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const CurserRightIcon = () => {
|
||||
return (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect x="4" y="2" width="8" height="11.4286" rx="4" fill="#B7B7C6" />
|
||||
<path
|
||||
d="M10.636 5.48676L13.2743 5.48676C13.1183 4.80688 12.9952 3.85986 12.4988 3.27521C12.0024 2.69056 11.3639 2.19733 10.636 1.83606C9.90797 1.47479 9.11123 1.2558 8.31123 1.19709L8.5286 5.48676L10.636 5.48676Z"
|
||||
fill="#FCFDFD"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
import React from "react";
|
||||
|
||||
|
||||
const SkeletonUI = () => {
|
||||
return (
|
||||
<div className="skeleton-wrapper">
|
||||
<div className="skeleton-header">
|
||||
<div className="skeleton skeleton-title"></div>
|
||||
<div className="skeleton skeleton-subtitle"></div>
|
||||
</div>
|
||||
|
||||
<div className="skeleton-content">
|
||||
<div className="skeleton skeleton-card"></div>
|
||||
<div className="skeleton skeleton-card"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SkeletonUI;
|
||||
|
|
@ -8,6 +8,7 @@ import {
|
|||
PointElement,
|
||||
} from "chart.js";
|
||||
import { PowerIcon, ProductionCapacityIcon } from "../../icons/analysis";
|
||||
import SkeletonUI from "../../templates/SkeletonUI";
|
||||
|
||||
ChartJS.register(LineElement, CategoryScale, LinearScale, PointElement);
|
||||
|
||||
|
|
@ -71,7 +72,8 @@ const ThroughputSummary = () => {
|
|||
},
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
const isLoading = true;
|
||||
|
||||
return (
|
||||
<div className="production analysis-card">
|
||||
|
|
@ -88,72 +90,78 @@ const ThroughputSummary = () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="process-container">
|
||||
<div className="throughput-value">
|
||||
<span className="value">{throughputData.totalThroughput}</span>{" "}
|
||||
Units/hour
|
||||
</div>
|
||||
<div className="lineChart">
|
||||
<div className="assetUsage">
|
||||
<div className="key">Asset usage</div>
|
||||
<div className="value">{throughputData.assetUsage}%</div>
|
||||
</div>
|
||||
<Line data={chartData} options={chartOptions} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="footer">
|
||||
<div className="energyConsumption footer-card">
|
||||
<div className="header">Energy Consumption</div>
|
||||
<div className="value-container">
|
||||
<div className="energy-icon">
|
||||
<PowerIcon />
|
||||
{isLoading ? (
|
||||
<>
|
||||
<div className="process-container">
|
||||
<div className="throughput-value">
|
||||
<span className="value">{throughputData.totalThroughput}</span>{" "}
|
||||
Units/hour
|
||||
</div>
|
||||
<div className="value-wrapper">
|
||||
<div className="value">{energyConsumption.energyConsumed}</div>
|
||||
<div className="unit">{energyConsumption.unit}</div>
|
||||
<div className="lineChart">
|
||||
<div className="assetUsage">
|
||||
<div className="key">Asset usage</div>
|
||||
<div className="value">{throughputData.assetUsage}%</div>
|
||||
</div>
|
||||
<Line data={chartData} options={chartOptions} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="shiftUtilization footer-card">
|
||||
<div className="header">Shift Utilization</div>
|
||||
<div className="value-container">
|
||||
<div className="value">{throughputData.assetUsage}%</div>
|
||||
|
||||
<div className="progress-wrapper">
|
||||
{/* Dynamically create progress bars based on shiftUtilization array */}
|
||||
{shiftUtilization.map((shift, index) => (
|
||||
<div
|
||||
key={shift.shift}
|
||||
className={`progress shift-${shift.shift}`}
|
||||
style={{
|
||||
width: `${shift.percentage}%`,
|
||||
backgroundColor: shift.color,
|
||||
}}
|
||||
></div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="progress-indicator">
|
||||
{/* Dynamically create shift indicators with random colors */}
|
||||
{shiftUtilization.map((shift, index) => (
|
||||
<div className="shift-wrapper" key={shift.shift}>
|
||||
<span
|
||||
className={`indicator shift-${shift.shift}`}
|
||||
style={{ backgroundColor: shift.color }} // Random color for indicator
|
||||
></span>
|
||||
<label>Shift {shift.shift}</label>
|
||||
<div className="footer">
|
||||
<div className="energyConsumption footer-card">
|
||||
<div className="header">Energy Consumption</div>
|
||||
<div className="value-container">
|
||||
<div className="energy-icon">
|
||||
<PowerIcon />
|
||||
</div>
|
||||
))}
|
||||
<div className="value-wrapper">
|
||||
<div className="value">
|
||||
{energyConsumption.energyConsumed}
|
||||
</div>
|
||||
<div className="unit">{energyConsumption.unit}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="shiftUtilization footer-card">
|
||||
<div className="header">Shift Utilization</div>
|
||||
<div className="value-container">
|
||||
<div className="value">{throughputData.assetUsage}%</div>
|
||||
|
||||
<div className="progress-wrapper">
|
||||
{/* Dynamically create progress bars based on shiftUtilization array */}
|
||||
{shiftUtilization.map((shift, index) => (
|
||||
<div
|
||||
key={shift.shift}
|
||||
className={`progress shift-${shift.shift}`}
|
||||
style={{
|
||||
width: `${shift.percentage}%`,
|
||||
backgroundColor: shift.color,
|
||||
}}
|
||||
></div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="progress-indicator">
|
||||
{/* Dynamically create shift indicators with random colors */}
|
||||
{shiftUtilization.map((shift, index) => (
|
||||
<div className="shift-wrapper" key={shift.shift}>
|
||||
<span
|
||||
className={`indicator shift-${shift.shift}`}
|
||||
style={{ backgroundColor: shift.color }} // Random color for indicator
|
||||
></span>
|
||||
<label>Shift {shift.shift}</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<SkeletonUI />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ThroughputSummary;
|
||||
|
||||
// Can we add dot pattern to background of lineChart and remove axis
|
||||
|
|
|
|||
|
|
@ -338,7 +338,7 @@ const SimulationPlayer: React.FC = () => {
|
|||
className="slider-input"
|
||||
/>
|
||||
</div>
|
||||
<div className="speed-label max-value">4x</div>
|
||||
<div className="speed-label max-value">8x</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,17 +4,8 @@ import Panel from "./widgets/panel/Panel";
|
|||
import AddButtons from "./widgets/panel/AddButtons";
|
||||
import { useSelectedZoneStore } from "../../store/visualization/useZoneStore";
|
||||
import DisplayZone from "./zone/DisplayZone";
|
||||
import Scene from "../scene/scene";
|
||||
import useModuleStore from "../../store/useModuleStore";
|
||||
|
||||
import {
|
||||
useDroppedObjectsStore,
|
||||
useFloatingWidget,
|
||||
} from "../../store/visualization/useDroppedObjectsStore";
|
||||
import { useSocketStore, useWidgetSubOption } from "../../store/store";
|
||||
import { getZone2dData } from "../../services/visulization/zone/getZoneData";
|
||||
import { generateUniqueId } from "../../functions/generateUniqueId";
|
||||
import { determinePosition } from "./functions/determinePosition";
|
||||
import SocketRealTimeViz from "./socket/realTimeVizSocket.dev";
|
||||
import RenderOverlay from "../../components/templates/Overlay";
|
||||
import ConfirmationPopup from "../../components/layout/confirmationPopup/ConfirmationPopup";
|
||||
|
|
@ -27,7 +18,6 @@ import {
|
|||
} from "../../store/visualization/useZone3DWidgetStore";
|
||||
import OuterClick from "../../utils/outerClick";
|
||||
import { useWidgetStore } from "../../store/useWidgetStore";
|
||||
import { getActiveProperties } from "./functions/getActiveProperties";
|
||||
|
||||
type Side = "top" | "bottom" | "left" | "right";
|
||||
|
||||
|
|
@ -66,12 +56,10 @@ const RealTimeVisulization: React.FC = () => {
|
|||
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
|
||||
|
||||
const { setRightSelect } = useRightSelected();
|
||||
const { editWidgetOptions, setEditWidgetOptions } = useEditWidgetOptionsStore();
|
||||
const { editWidgetOptions, setEditWidgetOptions } =
|
||||
useEditWidgetOptionsStore();
|
||||
const { rightClickSelected, setRightClickSelected } = useRightClickSelected();
|
||||
const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false);
|
||||
const { setFloatingWidget } = useFloatingWidget();
|
||||
const { widgetSubOption } = useWidgetSubOption();
|
||||
const { visualizationSocket } = useSocketStore();
|
||||
const { setSelectedChartId } = useWidgetStore();
|
||||
const [waitingPanels, setWaitingPanels] = useState(null);
|
||||
|
||||
|
|
@ -142,109 +130,6 @@ const RealTimeVisulization: React.FC = () => {
|
|||
});
|
||||
}, [selectedZone]);
|
||||
|
||||
// const handleDrop = async (event: React.DragEvent<HTMLDivElement>) => {
|
||||
// event.preventDefault();
|
||||
// try {
|
||||
// const email = localStorage.getItem("email") ?? "";
|
||||
// const organization = email?.split("@")[1]?.split(".")[0];
|
||||
|
||||
// const data = event.dataTransfer.getData("text/plain");
|
||||
// if (widgetSubOption === "3D") return;
|
||||
// if (!data || selectedZone.zoneName === "") return;
|
||||
|
||||
// const droppedData = JSON.parse(data);
|
||||
// const canvasElement = document.getElementById("real-time-vis-canvas");
|
||||
// if (!canvasElement) throw new Error("Canvas element not found");
|
||||
|
||||
// const rect = canvasElement.getBoundingClientRect();
|
||||
// const relativeX = event.clientX - rect.left;
|
||||
// const relativeY = event.clientY - rect.top;
|
||||
|
||||
// // Widget dimensions
|
||||
// const widgetWidth = droppedData.width ?? 125;
|
||||
// const widgetHeight = droppedData.height ?? 100;
|
||||
|
||||
// // Center the widget at cursor
|
||||
// const centerOffsetX = widgetWidth / 2;
|
||||
// const centerOffsetY = widgetHeight / 2;
|
||||
|
||||
// const adjustedX = relativeX - centerOffsetX;
|
||||
// const adjustedY = relativeY - centerOffsetY;
|
||||
|
||||
// const finalPosition = determinePosition(rect, adjustedX, adjustedY);
|
||||
// const [activeProp1, activeProp2] = getActiveProperties(finalPosition);
|
||||
|
||||
// let finalY = 0;
|
||||
// let finalX = 0;
|
||||
|
||||
// if (activeProp1 === "top") {
|
||||
// finalY = adjustedY;
|
||||
// } else {
|
||||
// finalY = rect.height - (adjustedY + widgetHeight);
|
||||
// }
|
||||
|
||||
// if (activeProp2 === "left") {
|
||||
// finalX = adjustedX;
|
||||
// } else {
|
||||
// finalX = rect.width - (adjustedX + widgetWidth);
|
||||
// }
|
||||
|
||||
// // Clamp to boundaries
|
||||
// finalX = Math.max(0, Math.min(rect.width - widgetWidth, finalX));
|
||||
// finalY = Math.max(0, Math.min(rect.height - widgetHeight, finalY));
|
||||
|
||||
// const boundedPosition = {
|
||||
// ...finalPosition,
|
||||
// [activeProp1]: finalY,
|
||||
// [activeProp2]: finalX,
|
||||
// [activeProp1 === "top" ? "bottom" : "top"]: "auto",
|
||||
// [activeProp2 === "left" ? "right" : "left"]: "auto",
|
||||
// };
|
||||
|
||||
// const newObject = {
|
||||
// ...droppedData,
|
||||
// id: generateUniqueId(),
|
||||
// position: boundedPosition,
|
||||
// };
|
||||
|
||||
// const existingZone =
|
||||
// useDroppedObjectsStore.getState().zones[selectedZone.zoneName];
|
||||
// if (!existingZone) {
|
||||
// useDroppedObjectsStore
|
||||
// .getState()
|
||||
// .setZone(selectedZone.zoneName, selectedZone.zoneId);
|
||||
// }
|
||||
|
||||
// const addFloatingWidget = {
|
||||
// organization,
|
||||
// widget: newObject,
|
||||
// zoneId: selectedZone.zoneId,
|
||||
// };
|
||||
|
||||
// if (visualizationSocket) {
|
||||
// visualizationSocket.emit("v2:viz-float:add", addFloatingWidget);
|
||||
// }
|
||||
|
||||
// useDroppedObjectsStore
|
||||
// .getState()
|
||||
// .addObject(selectedZone.zoneName, newObject);
|
||||
|
||||
// const droppedObjectsStore = useDroppedObjectsStore.getState();
|
||||
// const currentZone = droppedObjectsStore.zones[selectedZone.zoneName];
|
||||
|
||||
// if (currentZone && currentZone.zoneId === selectedZone.zoneId) {
|
||||
// console.log(
|
||||
// `Objects for Zone ${selectedZone.zoneId}:`,
|
||||
// currentZone.objects
|
||||
// );
|
||||
// setFloatingWidget(currentZone.objects);
|
||||
// } else {
|
||||
// console.warn("Zone not found or zoneId mismatch");
|
||||
// }
|
||||
// } catch (error) {
|
||||
// console.error("Error in handleDrop:", error);
|
||||
// }
|
||||
// };
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
|
|
@ -295,9 +180,7 @@ const RealTimeVisulization: React.FC = () => {
|
|||
{`
|
||||
:root {
|
||||
--realTimeViz-container-width: ${canvasDimensions.width}px;
|
||||
|
||||
--realTimeViz-container-height: ${canvasDimensions.height}px;
|
||||
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,8 +6,6 @@ import { getTemplateData } from "../../../services/visulization/zone/getTemplate
|
|||
import { useDroppedObjectsStore } from "../../../store/visualization/useDroppedObjectsStore";
|
||||
import RenameInput from "../../../components/ui/inputs/RenameInput";
|
||||
|
||||
|
||||
|
||||
const Templates = () => {
|
||||
const { templates, removeTemplate, setTemplates } = useTemplateStore();
|
||||
const { setSelectedZone, selectedZone } = useSelectedZoneStore();
|
||||
|
|
@ -94,13 +92,12 @@ const Templates = () => {
|
|||
return (
|
||||
<div className="template-list">
|
||||
{templates.map((template, index) => (
|
||||
<div
|
||||
key={template.id}
|
||||
className="template-item"
|
||||
|
||||
>
|
||||
<div key={template.id} className="template-item">
|
||||
{template?.snapshot && (
|
||||
<div className="template-image-container" onClick={() => handleLoadTemplate(template)}>
|
||||
<div
|
||||
className="template-image-container"
|
||||
onClick={() => handleLoadTemplate(template)}
|
||||
>
|
||||
<img
|
||||
src={template.snapshot}
|
||||
alt={`${template.name} preview`}
|
||||
|
|
@ -125,7 +122,8 @@ const Templates = () => {
|
|||
))}
|
||||
{templates.length === 0 && (
|
||||
<div className="no-templates">
|
||||
No saved templates yet. Create one in the visualization view!
|
||||
<h2>No saved templates yet.</h2>
|
||||
<div className="content">Create one in the visualization view!</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -190,5 +190,6 @@ $border-radius-small: 4px;
|
|||
$border-radius-medium: 6px;
|
||||
$border-radius-large: 12px;
|
||||
$border-radius-circle: 50%;
|
||||
$border-radius-xlarge: 16px;
|
||||
$border-radius-extra-large: 20px;
|
||||
$border-radius-xxx: 30px;
|
||||
|
|
|
|||
|
|
@ -165,12 +165,12 @@ body {
|
|||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
border-radius: 4px;
|
||||
border-radius: #{$border-radius-small};
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--background-color-button);
|
||||
border-radius: 4px;
|
||||
border-radius: #{$border-radius-small};
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
|
|
@ -179,4 +179,4 @@ body {
|
|||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
@use "../abstracts/variables.scss" as *;
|
||||
|
||||
.confirmation-overlay {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
|
@ -13,7 +15,7 @@
|
|||
z-index: 5;
|
||||
background: var(--background-color);
|
||||
padding: 14px 12px;
|
||||
border-radius: 6px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
|
||||
.buttton-wrapper {
|
||||
padding-top: 12px;
|
||||
|
|
@ -24,7 +26,7 @@
|
|||
|
||||
.confirmation-button {
|
||||
padding: 6px 10px;
|
||||
border-radius: 6px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
cursor: pointer;
|
||||
|
||||
&:first-child {
|
||||
|
|
|
|||
|
|
@ -21,12 +21,17 @@
|
|||
align-items: center;
|
||||
background: var(--background-color);
|
||||
padding: 3px 6px;
|
||||
border-radius: 12px;
|
||||
border-radius: #{$border-radius-large};
|
||||
color: var(--text-color);
|
||||
backdrop-filter: blur(14px);
|
||||
|
||||
.selector {
|
||||
color: var(--text-color);
|
||||
font-size: var(--font-size-small)
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -37,37 +42,40 @@
|
|||
position: relative;
|
||||
|
||||
// dummy
|
||||
.bg-dummy{
|
||||
.bg-dummy {
|
||||
background: var(--background-color-solid);
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
.bg-dummy.left-top{
|
||||
|
||||
.bg-dummy.left-top {
|
||||
top: 1px;
|
||||
left: 4px;
|
||||
width: 60%;
|
||||
height: 16px;
|
||||
border-radius: 20px;
|
||||
border-radius: #{$border-radius-extra-large};
|
||||
}
|
||||
.bg-dummy.right-bottom{
|
||||
|
||||
.bg-dummy.right-bottom {
|
||||
right: 68px;
|
||||
bottom: 0;
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
border-radius: #{$border-radius-circle};
|
||||
}
|
||||
|
||||
.log-container {
|
||||
background: var(--background-color);
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: 12px;
|
||||
border-radius: #{$border-radius-large};
|
||||
@include flex-center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.logs-detail,
|
||||
.version {
|
||||
@include flex-center;
|
||||
border-radius: 12px;
|
||||
border-radius: #{$border-radius-extra-large};
|
||||
padding: 3px 6px;
|
||||
height: 100%;
|
||||
color: var(--text-color);
|
||||
|
|
@ -79,6 +87,7 @@
|
|||
cursor: pointer;
|
||||
outline: 0 solid var(--border-color);
|
||||
outline-offset: -1px;
|
||||
|
||||
.log-icon {
|
||||
@include flex-center;
|
||||
}
|
||||
|
|
@ -103,6 +112,7 @@
|
|||
.log {
|
||||
background: var(--log-default-background-color);
|
||||
outline-color: var(--default-text-color);
|
||||
|
||||
.log-message {
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
|
|
@ -111,6 +121,7 @@
|
|||
.info {
|
||||
background: var(--log-info-background-color);
|
||||
outline-color: var(--log-info-text-color);
|
||||
|
||||
.log-message {
|
||||
color: var(--log-info-text-color);
|
||||
}
|
||||
|
|
@ -119,6 +130,7 @@
|
|||
.error {
|
||||
background: var(--log-error-background-color);
|
||||
outline-color: var(--log-error-text-color);
|
||||
|
||||
.log-message {
|
||||
color: var(--log-error-text-color);
|
||||
}
|
||||
|
|
@ -127,6 +139,7 @@
|
|||
.warning {
|
||||
background: var(--log-warn-background-color);
|
||||
outline-color: var(--log-warn-text-color);
|
||||
|
||||
.log-message {
|
||||
color: var(--log-warn-text-color);
|
||||
}
|
||||
|
|
@ -134,9 +147,10 @@
|
|||
|
||||
.success {
|
||||
background: var(--log-success-background-color);
|
||||
|
||||
.log-message {
|
||||
color: var(--log-success-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -390,7 +390,7 @@ input[type="number"] {
|
|||
width: 50%;
|
||||
background: linear-gradient(to right, var(--accent-color), transparent);
|
||||
animation: loadingAnimation 1.2s linear infinite;
|
||||
border-radius: 4px;
|
||||
border-radius: #{$border-radius-small};
|
||||
}
|
||||
|
||||
@keyframes loadingAnimation {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@use "../../abstracts/variables" as *;
|
||||
@use "../../abstracts/mixins" as *;
|
||||
@use "../../abstracts/variables.scss" as *;
|
||||
@use "../../abstracts/mixins.scss" as *;
|
||||
|
||||
.log-list-container {
|
||||
width: 100vw;
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
z-index: 5;
|
||||
background: var(--background-color);
|
||||
padding: 14px 12px;
|
||||
border-radius: 15px;
|
||||
border-radius: #{$border-radius-xlarge};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
|
||||
.log-nav {
|
||||
padding: 8px 16px;
|
||||
border-radius: 19px;
|
||||
border-radius: #{$border-radius-extra-large};
|
||||
}
|
||||
|
||||
.log-nav.active {
|
||||
|
|
@ -85,14 +85,14 @@
|
|||
gap: 4px;
|
||||
background: var(--background-color);
|
||||
padding: 10px;
|
||||
border-radius: 16px;
|
||||
border-radius: #{$border-radius-xlarge};
|
||||
outline: 1px solid var(--border-color);
|
||||
outline-offset: -1px;
|
||||
overflow: auto;
|
||||
|
||||
.log-entry {
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
border-radius: #{$border-radius-small};
|
||||
font-size: var(--font-size-small);
|
||||
display: flex;
|
||||
|
||||
|
|
@ -110,7 +110,7 @@
|
|||
font-weight: 300;
|
||||
opacity: 0.8;
|
||||
text-wrap: nowrap;
|
||||
height: 100%;
|
||||
// height: 100%;
|
||||
}
|
||||
.log-entry-message {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
top: 0;
|
||||
padding: 10px;
|
||||
padding-top: 100px;
|
||||
|
||||
|
||||
.marketplace-container {
|
||||
position: relative;
|
||||
padding: 20px 2px;
|
||||
|
|
@ -49,6 +49,7 @@
|
|||
border-radius: $border-radius-large;
|
||||
outline: 1px solid var(--border-color);
|
||||
border: none;
|
||||
|
||||
input {
|
||||
border: none !important;
|
||||
outline: none;
|
||||
|
|
@ -62,6 +63,7 @@
|
|||
border-radius: #{$border-radius-extra-large};
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 0 10px;
|
||||
|
||||
.dropdown-header {
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -69,7 +71,7 @@
|
|||
|
||||
.button {
|
||||
padding: 5px 20px;
|
||||
border-radius: 14px;
|
||||
border-radius: #{$border-radius-large};
|
||||
background: var(--background-color-button);
|
||||
color: var(--text-button-color);
|
||||
}
|
||||
|
|
@ -85,11 +87,13 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.cards-container-wrapper{
|
||||
|
||||
.cards-container-wrapper {
|
||||
position: relative;
|
||||
height: calc(100% - 60px);
|
||||
padding: 0px 10px;
|
||||
}
|
||||
|
||||
.cards-container-container {
|
||||
display: flex;
|
||||
padding: 0 10px;
|
||||
|
|
@ -112,7 +116,7 @@
|
|||
|
||||
.card-container {
|
||||
width: calc(25% - 14px);
|
||||
border-radius: 18px;
|
||||
border-radius: #{$border-radius-xlarge};
|
||||
padding: 12px;
|
||||
box-shadow: 0px 2px 10.5px 0px #0000000d;
|
||||
background: var(--background-color-solid-gradient);
|
||||
|
|
@ -122,16 +126,18 @@
|
|||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
|
||||
.assets-container {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 10px;
|
||||
border-radius: #{$border-radius-large};
|
||||
padding: 5px;
|
||||
background: var(--accent-color);
|
||||
}
|
||||
|
|
@ -143,6 +149,7 @@
|
|||
justify-content: center;
|
||||
border-radius: #{$border-radius-medium};
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
height: inherit;
|
||||
width: 100%;
|
||||
|
|
@ -159,6 +166,7 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
|
||||
.assets-name {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
|
@ -233,7 +241,7 @@
|
|||
display: flex;
|
||||
gap: 12px;
|
||||
overflow: hidden;
|
||||
border-radius: 20px;
|
||||
border-radius: #{$border-radius-extra-large};
|
||||
}
|
||||
|
||||
// Image Preview Section
|
||||
|
|
@ -268,7 +276,7 @@
|
|||
width: 30px;
|
||||
min-height: 26px;
|
||||
min-width: 26px;
|
||||
border-radius: 50%;
|
||||
border-radius: #{$border-radius-circle};
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--background-color);
|
||||
background: var(--accent-color);
|
||||
|
|
@ -317,7 +325,7 @@
|
|||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
outline: 1px solid #909090cc;
|
||||
border-radius: 6px;
|
||||
border-radius: #{$border-radius-small};
|
||||
|
||||
.asset-rating {
|
||||
display: flex;
|
||||
|
|
@ -362,7 +370,7 @@
|
|||
.button {
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
border-radius: #{$border-radius-small};
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
|
||||
|
|
@ -386,4 +394,4 @@
|
|||
cursor: pointer;
|
||||
font-size: var(--font-size-large);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
background: var(--background-color-solid);
|
||||
color: var(--text-color);
|
||||
box-shadow: var(--box-shadow-light);
|
||||
border-radius: 8px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
border: 1px solid var(--border-color);
|
||||
backdrop-filter: blur(10px);
|
||||
.menu-buttons {
|
||||
|
|
|
|||
|
|
@ -15,14 +15,14 @@
|
|||
|
||||
.analysis-card {
|
||||
min-width: 333px;
|
||||
border-radius: 20px;
|
||||
border-radius: #{$border-radius-extra-large};
|
||||
margin: 8px;
|
||||
pointer-events: all;
|
||||
|
||||
.analysis-card-wrapper {
|
||||
width: 100%;
|
||||
background: var(--background-color);
|
||||
border-radius: 14px;
|
||||
border-radius: #{$border-radius-large};
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
position: relative;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
border-radius: 13px;
|
||||
border-radius: #{$border-radius-large};
|
||||
overflow: hidden;
|
||||
background: #fbebd7;
|
||||
|
||||
|
|
@ -83,7 +83,7 @@
|
|||
top: 0;
|
||||
left: 0;
|
||||
background: #fc9d2f;
|
||||
border-radius: 13px;
|
||||
border-radius: #{$border-radius-large};
|
||||
}
|
||||
|
||||
.bar-fill.full {
|
||||
|
|
@ -147,7 +147,7 @@
|
|||
position: relative;
|
||||
background-image: radial-gradient(#8d8d8da4 1px, transparent 1px);
|
||||
background-size: 10px 10px;
|
||||
border-radius: 8px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
|
||||
.assetUsage {
|
||||
text-align: right;
|
||||
|
|
@ -215,7 +215,7 @@
|
|||
gap: 6px;
|
||||
|
||||
.progress {
|
||||
border-radius: 6px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
height: 5px;
|
||||
|
||||
&:nth-child(1) {
|
||||
|
|
@ -238,6 +238,7 @@
|
|||
width: 100%;
|
||||
gap: 6px;
|
||||
padding-top: 3px;
|
||||
|
||||
.shift-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -272,7 +273,7 @@
|
|||
display: inline-block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
border-radius: #{$border-radius-circle};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -442,7 +443,7 @@
|
|||
.breakdown-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border-radius: 8px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
overflow: hidden;
|
||||
outline: 1px solid var(--border-color);
|
||||
outline-offset: -1px;
|
||||
|
|
@ -475,9 +476,11 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
.lightbulb-icon{
|
||||
|
||||
.lightbulb-icon {
|
||||
@include flex-center;
|
||||
}
|
||||
|
||||
.tip-title {
|
||||
color: var(--text-color);
|
||||
font-weight: 600;
|
||||
|
|
@ -502,7 +505,7 @@
|
|||
|
||||
.get-tips-button {
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
border-radius: #{$border-radius-small};
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
margin-top: 8px;
|
||||
|
|
@ -564,4 +567,4 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Breakdown Table Open/Close Logic
|
||||
// Breakdown Table Open/Close Logic
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
.simulation-player-container {
|
||||
background: var(--background-color);
|
||||
padding: 7px;
|
||||
border-radius: 15px;
|
||||
border-radius: #{$border-radius-xlarge};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
.progresser-wrapper {
|
||||
outline: 1px solid var(--border-color);
|
||||
background: var(--background-color);
|
||||
border-radius: 12px;
|
||||
border-radius: #{$border-radius-large};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
|
|
@ -35,14 +35,17 @@
|
|||
@include flex-space-between;
|
||||
gap: 12px;
|
||||
justify-content: space-between;
|
||||
|
||||
.header {
|
||||
@include flex-center;
|
||||
gap: 6px;
|
||||
padding: 0 8px;
|
||||
|
||||
svg {
|
||||
scale: 1.3;
|
||||
}
|
||||
}
|
||||
|
||||
.production-details,
|
||||
.controls-wrapper {
|
||||
@include flex-center;
|
||||
|
|
@ -65,11 +68,11 @@
|
|||
.progress-wrapper {
|
||||
width: 164px;
|
||||
height: 8px;
|
||||
border-radius: 5px;
|
||||
border-radius: #{$border-radius-small};
|
||||
background: var(--background-color-solid);
|
||||
|
||||
.progress {
|
||||
border-radius: 5px;
|
||||
border-radius: #{$border-radius-small};
|
||||
height: 100%;
|
||||
background-color: var(--background-color-accent);
|
||||
}
|
||||
|
|
@ -152,6 +155,7 @@
|
|||
width: 100%;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
.custom-slider-wrapper {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
|
@ -159,6 +163,7 @@
|
|||
background: transparent;
|
||||
border-radius: #{$border-radius-large};
|
||||
}
|
||||
|
||||
.custom-slider {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
|
@ -196,7 +201,6 @@
|
|||
opacity: 0.6;
|
||||
width: 2px;
|
||||
height: 12px;
|
||||
border-radius: 1px;
|
||||
top: 8px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
@ -250,6 +254,7 @@
|
|||
.end-time-wrappper {
|
||||
@include flex-center;
|
||||
gap: 4px;
|
||||
|
||||
.icon {
|
||||
@include flex-center;
|
||||
}
|
||||
|
|
@ -262,7 +267,7 @@
|
|||
padding: 16px;
|
||||
outline: 1px solid var(--border-color);
|
||||
background: var(--background-color);
|
||||
border-radius: 30px;
|
||||
border-radius: #{$border-radius-xxx};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
|
@ -284,7 +289,7 @@
|
|||
.dot {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
border-radius: #{$border-radius-circle};
|
||||
background-color: #d3d3e2;
|
||||
|
||||
&.filled {
|
||||
|
|
@ -310,6 +315,7 @@
|
|||
}
|
||||
|
||||
.open {
|
||||
|
||||
.start-displayer,
|
||||
.end-displayer {
|
||||
display: none;
|
||||
|
|
@ -318,6 +324,7 @@
|
|||
.timmer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.progresser-wrapper {
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
|
@ -347,6 +354,7 @@
|
|||
background: var(--background-color);
|
||||
padding: 20px 6px;
|
||||
position: relative;
|
||||
|
||||
.timmer {
|
||||
width: auto;
|
||||
position: absolute;
|
||||
|
|
@ -364,6 +372,7 @@
|
|||
width: auto;
|
||||
right: 16px;
|
||||
}
|
||||
|
||||
.process-player {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
|
@ -371,10 +380,11 @@
|
|||
width: 3.946108102798462px;
|
||||
height: 26px;
|
||||
left: 86.81px;
|
||||
border-radius: 14px;
|
||||
border-radius: #{$border-radius-large};
|
||||
border-width: 1px;
|
||||
background: var(--background-color-accent, #6f42c1);
|
||||
}
|
||||
|
||||
.process-wrapper {
|
||||
.process-container {
|
||||
position: relative;
|
||||
|
|
@ -383,7 +393,7 @@
|
|||
|
||||
.process {
|
||||
height: 5px;
|
||||
border-radius: 4px;
|
||||
border-radius: #{$border-radius-small};
|
||||
color: white;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
|
|
@ -391,4 +401,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,6 @@
|
|||
.follow-person-container{
|
||||
@use "../abstracts/variables.scss" as *;
|
||||
|
||||
.follow-person-container {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
position: fixed;
|
||||
|
|
@ -6,8 +8,9 @@
|
|||
left: 0;
|
||||
outline: 8px solid var(--user-color);
|
||||
outline-offset: -3px;
|
||||
border-radius: 16px;
|
||||
.follower-name{
|
||||
border-radius: #{$border-radius-xlarge};
|
||||
|
||||
.follower-name {
|
||||
background: var(--user-color);
|
||||
color: #FFFFFF;
|
||||
padding: 4px 8px;
|
||||
|
|
@ -17,6 +20,6 @@
|
|||
top: -10px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
border-radius: 8px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
.split {
|
||||
height: 20px;
|
||||
width: 2px;
|
||||
border-radius: 2px;
|
||||
border-radius: #{$border-radius-small};
|
||||
background: var(--text-disabled);
|
||||
}
|
||||
|
||||
|
|
@ -169,7 +169,7 @@
|
|||
.exitPlay {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
border-radius: #{$border-radius-circle};
|
||||
background: var(--highlight-accent-color);
|
||||
cursor: pointer;
|
||||
@include flex-center;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
@include flex-center;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
border-radius: 17.22px;
|
||||
border-radius: #{$border-radius-xlarge};
|
||||
max-width: 341px;
|
||||
|
||||
padding: 14px;
|
||||
|
|
@ -31,7 +31,8 @@
|
|||
width: 27px !important;
|
||||
height: 27px !important;
|
||||
background: var(--background-color);
|
||||
border-radius: 50%;
|
||||
border-radius: #{$border-radius-circle};
|
||||
|
||||
@include flex-center;
|
||||
}
|
||||
|
||||
|
|
@ -61,7 +62,7 @@
|
|||
.percent-increase {
|
||||
width: 80px;
|
||||
height: 24px;
|
||||
border-radius: 7.75px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
background: var(--background-color);
|
||||
color: #34c759;
|
||||
@include flex-center;
|
||||
|
|
@ -111,7 +112,7 @@
|
|||
gap: 6px;
|
||||
width: 313px;
|
||||
padding: 4.5px;
|
||||
border-radius: 9.74px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
|
||||
.headeproductionCapacityr-wrapper,
|
||||
.bar-chart {
|
||||
|
|
@ -120,7 +121,7 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
border-radius: 5.2px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
justify-content: center;
|
||||
|
|
@ -152,7 +153,7 @@
|
|||
.value {
|
||||
background: var(--background-color-secondary);
|
||||
color: #5783f2;
|
||||
border-radius: 12.99px;
|
||||
border-radius: #{$border-radius-large};
|
||||
padding: 3px 4px;
|
||||
}
|
||||
}
|
||||
|
|
@ -161,7 +162,7 @@
|
|||
.value {
|
||||
background: var(--background-color-secondary);
|
||||
color: #9641a7;
|
||||
border-radius: 12.99px;
|
||||
border-radius: #{$border-radius-large};
|
||||
padding: 3px 4px;
|
||||
}
|
||||
}
|
||||
|
|
@ -178,7 +179,7 @@
|
|||
font-size: var(--font-size-small);
|
||||
backdrop-filter: blur(40px);
|
||||
background: var(--background-color-secondary);
|
||||
border-radius: 20px;
|
||||
border-radius: #{$border-radius-extra-large};
|
||||
color: var(--text-color);
|
||||
|
||||
.header-wrapper {
|
||||
|
|
@ -204,10 +205,10 @@
|
|||
}
|
||||
|
||||
.img {
|
||||
border-radius: 4px;
|
||||
border-radius: #{$border-radius-small};
|
||||
|
||||
img {
|
||||
border-radius: 4px;
|
||||
border-radius: #{$border-radius-small};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -278,7 +279,7 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 12px;
|
||||
border-radius: #{$border-radius-large};
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -308,7 +309,8 @@
|
|||
background: var(--background-color);
|
||||
color: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
|
||||
header {
|
||||
|
|
@ -328,7 +330,8 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
border-radius: #{$border-radius-small};
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -350,7 +353,8 @@
|
|||
.metric {
|
||||
background: #2c3e50;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
border-radius: #{$border-radius-small};
|
||||
|
||||
|
||||
.label {
|
||||
font-size: var(--font-size-regular);
|
||||
|
|
@ -415,7 +419,8 @@
|
|||
min-height: 240px !important;
|
||||
padding: 20px;
|
||||
background: var(--background-color);
|
||||
border-radius: 8px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
font-family: Arial, sans-serif;
|
||||
width: 240px;
|
||||
|
|
@ -468,7 +473,8 @@
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
border-radius: #{$border-radius-circle};
|
||||
|
||||
box-sizing: border-box;
|
||||
border: 25px solid #eee;
|
||||
border-bottom-color: var(--accent-color);
|
||||
|
|
@ -476,7 +482,4 @@
|
|||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
// progress should be progress {progress}
|
||||
|
||||
|
||||
|
||||
// progress should be progress {progress}
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
width: 100%;
|
||||
height: 283px;
|
||||
background: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -67,13 +67,13 @@
|
|||
width: 10px;
|
||||
height: 10px;
|
||||
background: #4CAF50;
|
||||
border-radius: 50%;
|
||||
border-radius: #{$border-radius-circle};
|
||||
}
|
||||
|
||||
.img img {
|
||||
width: 150px;
|
||||
height: 100px;
|
||||
border-radius: 4px;
|
||||
border-radius: #{$border-radius-small};
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
flex-direction: column;
|
||||
gap: 6px;
|
||||
width: 100%;
|
||||
|
||||
// min-width: 1450px;
|
||||
.header {
|
||||
display: flex;
|
||||
|
|
@ -15,38 +16,41 @@
|
|||
align-items: center;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.stock {
|
||||
padding: 13px 5px;
|
||||
border-radius: 6.33px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--highlight-accent-color) 60%,
|
||||
transparent
|
||||
);
|
||||
background: color-mix(in srgb,
|
||||
var(--highlight-accent-color) 60%,
|
||||
transparent);
|
||||
font-size: var(--font-size-large);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.stock-item {
|
||||
.stockValues {
|
||||
display: flex;
|
||||
gap: 3px;
|
||||
|
||||
.value {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.stock-description {
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 16.95305824279785px;
|
||||
height: 16.95305824279785px;
|
||||
background: var(--accent-color);
|
||||
border-radius: 50%;
|
||||
border-radius: #{$border-radius-circle};
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -5,6 +5,7 @@
|
|||
height: 100vh;
|
||||
width: 100vw;
|
||||
background: var(--background-color-solid);
|
||||
|
||||
.loading-container {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
|
@ -15,6 +16,7 @@
|
|||
justify-content: space-between;
|
||||
padding: 28px;
|
||||
z-index: 5;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
|
@ -26,22 +28,26 @@
|
|||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 50%;
|
||||
border-radius: #{$border-radius-circle};
|
||||
filter: blur(200px);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.project-name {
|
||||
font-size: var(--font-size-regular);
|
||||
}
|
||||
|
||||
.loading-hero-container {
|
||||
.logo {
|
||||
@include flex-center;
|
||||
width: 100%;
|
||||
margin-bottom: 35px;
|
||||
|
||||
circle {
|
||||
fill: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
font-family: #{$font-josefin-sans};
|
||||
font-size: #{$xxlarge};
|
||||
|
|
@ -51,6 +57,7 @@
|
|||
line-height: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
.progress-value {
|
||||
font-family: #{$font-josefin-sans};
|
||||
|
|
@ -59,12 +66,14 @@
|
|||
margin-bottom: 22px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.progress-indicator-container {
|
||||
height: 6px;
|
||||
width: 60vw;
|
||||
background: var(--highlight-accent-color);
|
||||
border-radius: #{$border-radius-small};
|
||||
position: relative;
|
||||
|
||||
.progress-bar {
|
||||
height: 6px;
|
||||
background: var(--accent-color);
|
||||
|
|
@ -74,4 +83,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -51,12 +51,15 @@
|
|||
|
||||
.active {
|
||||
background: var(--background-color-accent);
|
||||
|
||||
rect {
|
||||
stroke: var(--icon-default-color-active);
|
||||
}
|
||||
|
||||
circle {
|
||||
fill: var(--icon-default-color-active);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
filter: saturate(0.8);
|
||||
background: var(--background-color-accent);
|
||||
|
|
@ -85,7 +88,8 @@
|
|||
|
||||
.template-item {
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
|
||||
padding: 1rem;
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
|
@ -100,7 +104,8 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
border-radius: 4px;
|
||||
border-radius: #{$border-radius-small};
|
||||
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
|
@ -122,7 +127,8 @@
|
|||
background: #ff4444;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
border-radius: #{$border-radius-small};
|
||||
|
||||
cursor: pointer;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
|
@ -130,8 +136,15 @@
|
|||
.no-templates {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
padding: 2rem;
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 6px;
|
||||
|
||||
h2 {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.widgets-wrapper {
|
||||
|
|
@ -178,7 +191,8 @@
|
|||
.stock {
|
||||
padding: 13px 5px;
|
||||
background: var(--background-color-secondary);
|
||||
border-radius: 6.33px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
|
|
@ -230,10 +244,12 @@
|
|||
|
||||
.outline-container {
|
||||
height: 100%;
|
||||
|
||||
.outline-content-container {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
padding: 8px;
|
||||
|
||||
.overflow {
|
||||
height: calc(100% - 16px);
|
||||
max-height: 46vh;
|
||||
|
|
@ -298,7 +314,8 @@
|
|||
width: 26px;
|
||||
min-height: 26px;
|
||||
min-width: 26px;
|
||||
border-radius: 50%;
|
||||
border-radius: #{$border-radius-circle};
|
||||
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: white;
|
||||
text-transform: capitalize;
|
||||
|
|
@ -315,7 +332,8 @@
|
|||
width: 26px;
|
||||
min-height: 26px;
|
||||
min-width: 26px;
|
||||
border-radius: 50%;
|
||||
border-radius: #{$border-radius-circle};
|
||||
|
||||
background: var(--highlight-accent-color);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--accent-color);
|
||||
|
|
@ -336,7 +354,8 @@
|
|||
height: 26px;
|
||||
width: 52px;
|
||||
max-width: 52px;
|
||||
border-radius: 20px;
|
||||
border-radius: #{$border-radius-extra-large};
|
||||
|
||||
overflow: hidden;
|
||||
margin-left: 2px;
|
||||
|
||||
|
|
@ -391,8 +410,10 @@
|
|||
color: #666;
|
||||
padding: 16px;
|
||||
grid-column: 1 / -1;
|
||||
|
||||
.products-list {
|
||||
padding-top: 1rem;
|
||||
|
||||
.product-item {
|
||||
text-align: start;
|
||||
margin-top: 8px;
|
||||
|
|
@ -401,6 +422,7 @@
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
|
||||
button {
|
||||
width: fit-content;
|
||||
position: relative;
|
||||
|
|
@ -410,10 +432,12 @@
|
|||
padding: 8px 12px;
|
||||
border-radius: #{$border-radius-extra-large};
|
||||
outline: 1px solid var(--border-color);
|
||||
|
||||
&:hover {
|
||||
background: var(--background-color-accent);
|
||||
color: var(--text-button-color);
|
||||
outline: none;
|
||||
|
||||
path {
|
||||
stroke: var(--text-button-color);
|
||||
strokeWidth: 1.3;
|
||||
|
|
@ -421,6 +445,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.products-list-title {
|
||||
text-align: start;
|
||||
color: var(--accent-color);
|
||||
|
|
@ -441,6 +466,7 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
|
||||
.datas {
|
||||
.input-value {
|
||||
padding: 5px 10px;
|
||||
|
|
@ -482,6 +508,7 @@
|
|||
justify-content: space-between;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.disable {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
|
|
@ -555,12 +582,13 @@
|
|||
align-items: flex-start;
|
||||
gap: 6px;
|
||||
color: #444;
|
||||
border-radius: 6px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
font-size: var(--font-weight-regular);
|
||||
|
||||
.infoIcon {
|
||||
padding: 0px 7px;
|
||||
border-radius: 50%;
|
||||
border-radius: #{$border-radius-circle};
|
||||
|
||||
border: 1px solid gray;
|
||||
}
|
||||
|
||||
|
|
@ -640,7 +668,7 @@
|
|||
background: none;
|
||||
width: 24px;
|
||||
height: 26px;
|
||||
border-radius: 3.2px;
|
||||
border-radius: #{$border-radius-small};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -703,6 +731,7 @@
|
|||
max-height: calc(60vh - (47px - 35px));
|
||||
width: calc(100% - 4px);
|
||||
overflow-x: hidden;
|
||||
|
||||
.header {
|
||||
@include flex-space-between;
|
||||
padding: 6px 12px;
|
||||
|
|
@ -717,9 +746,11 @@
|
|||
cursor: pointer;
|
||||
outline: none;
|
||||
border: none;
|
||||
|
||||
path {
|
||||
stroke: var(--text-button-color);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: var(--text-disabled);
|
||||
}
|
||||
|
|
@ -731,9 +762,11 @@
|
|||
.property-item {
|
||||
.value-field-container {
|
||||
margin: 0;
|
||||
|
||||
input {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
|
|
@ -748,10 +781,13 @@
|
|||
padding: 8px 12px;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.selected-actions-list {
|
||||
margin-bottom: 8px;
|
||||
|
||||
.eye-dropper-input-container {
|
||||
padding: 6px 12px;
|
||||
|
||||
.regularDropdown-container {
|
||||
padding: 5px 8px;
|
||||
outline: 1px solid var(--border-color);
|
||||
|
|
@ -759,11 +795,14 @@
|
|||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.value-field-container {
|
||||
margin: 0;
|
||||
|
||||
input {
|
||||
padding: 5px 4px;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
|
|
@ -776,7 +815,8 @@
|
|||
margin: 2px;
|
||||
width: calc(100% - 4px);
|
||||
background: var(--background-color-gray);
|
||||
border-radius: 8px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
|
||||
min-height: 120px;
|
||||
|
||||
.list-container {
|
||||
|
|
@ -789,12 +829,14 @@
|
|||
padding: 4px 12px;
|
||||
width: 100%;
|
||||
border-radius: #{$border-radius-medium};
|
||||
|
||||
.value {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
min-width: 80%;
|
||||
gap: 6px;
|
||||
|
||||
.input-value {
|
||||
text-align: start;
|
||||
}
|
||||
|
|
@ -926,6 +968,7 @@
|
|||
padding: 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.value-field-container {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -984,6 +1027,7 @@
|
|||
@include flex-space-between;
|
||||
padding: 10px 12px;
|
||||
color: var(--text-color);
|
||||
|
||||
.input-value {
|
||||
color: inherit;
|
||||
}
|
||||
|
|
@ -991,6 +1035,7 @@
|
|||
|
||||
.input-container {
|
||||
@include flex-center;
|
||||
|
||||
.remove-button {
|
||||
@include flex-center;
|
||||
height: 18px;
|
||||
|
|
@ -1025,12 +1070,14 @@
|
|||
|
||||
.custom-input-container {
|
||||
@include flex-space-between;
|
||||
|
||||
.split {
|
||||
height: 20px;
|
||||
width: 2px;
|
||||
border-radius: 2px;
|
||||
background: var(--text-disabled);
|
||||
}
|
||||
|
||||
.header {
|
||||
@include flex-space-between;
|
||||
border: none;
|
||||
|
|
@ -1063,13 +1110,16 @@
|
|||
.dropdown-content-container {
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
.value-field-container {
|
||||
padding: 6px;
|
||||
|
||||
.dropdown {
|
||||
min-width: 44px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.input-range-container {
|
||||
.input-container {
|
||||
width: 75%;
|
||||
|
|
@ -1155,10 +1205,12 @@
|
|||
|
||||
.assets-result {
|
||||
width: 100%;
|
||||
|
||||
.assets-wrapper {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.assets-list-section {
|
||||
width: 100%;
|
||||
padding: 4px;
|
||||
|
|
@ -1175,6 +1227,7 @@
|
|||
font-weight: $bold-weight;
|
||||
padding: 8px;
|
||||
@include flex-space-between;
|
||||
|
||||
.back-button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -1212,7 +1265,8 @@
|
|||
content: "";
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
border-radius: #{$border-radius-circle};
|
||||
|
||||
background: var(--circle-color, #000);
|
||||
position: absolute;
|
||||
top: 60%;
|
||||
|
|
@ -1314,11 +1368,9 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: var(--font-size-regular);
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
rgba(37, 24, 51, 0) 0%,
|
||||
rgba(78, 22, 128, 0.4) 100%
|
||||
);
|
||||
background: linear-gradient(0deg,
|
||||
rgba(37, 24, 51, 0) 0%,
|
||||
rgba(78, 22, 128, 0.4) 100%);
|
||||
pointer-events: none;
|
||||
backdrop-filter: blur(8px);
|
||||
opacity: 0;
|
||||
|
|
@ -1340,4 +1392,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
.skeleton-wrapper {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
|
||||
.skeleton {
|
||||
background: var(--background-color-gray);
|
||||
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image: linear-gradient(90deg,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 255, 255, 0.2) 20%,
|
||||
rgba(255, 255, 255, 0.5) 60%,
|
||||
rgba(255, 255, 255, 0) 100%);
|
||||
transform: translateX(-100%);
|
||||
animation: shimmer 1.5s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.skeleton-header {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.skeleton-title {
|
||||
width: 100%;
|
||||
height: 25px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.skeleton-subtitle {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.skeleton-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
|
||||
.skeleton-card {
|
||||
width: 100%;
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
|
||||
.toast {
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
color: var(--primary-color);
|
||||
cursor: pointer;
|
||||
animation: fadeIn 0.3s, fadeOut 0.5s 2.5s;
|
||||
|
|
@ -71,6 +71,7 @@
|
|||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
|
|
@ -81,7 +82,8 @@
|
|||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -33,6 +33,7 @@
|
|||
@use 'layout/sidebar';
|
||||
@use 'layout/popup';
|
||||
@use 'layout/toast';
|
||||
@use 'layout/skeleton.scss';
|
||||
|
||||
// pages
|
||||
@use 'pages/dashboard';
|
||||
|
|
|
|||
|
|
@ -144,7 +144,7 @@
|
|||
width: 100%;
|
||||
padding: 8px 16px;
|
||||
background: var(--primary-color);
|
||||
border-radius: 10px;
|
||||
border-radius: #{$border-radius-large};
|
||||
.project-details {
|
||||
.project-name {
|
||||
margin-bottom: 2px;
|
||||
|
|
@ -179,7 +179,7 @@
|
|||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 30px;
|
||||
border-radius: #{$border-radius-xxx};
|
||||
}
|
||||
.hero-text {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -61,10 +61,11 @@
|
|||
bottom: 0px;
|
||||
left: 50%;
|
||||
gap: 6px;
|
||||
border-radius: 8px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
|
||||
overflow: auto;
|
||||
max-width: calc(100% - 500px);
|
||||
min-width: 150px;
|
||||
// min-width: 150px;
|
||||
z-index: 3;
|
||||
transform: translate(-50%, -10%);
|
||||
pointer-events: all;
|
||||
|
|
@ -101,7 +102,8 @@
|
|||
.zone {
|
||||
width: auto;
|
||||
background: var(--background-color);
|
||||
border-radius: 6px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
|
||||
padding: 4px 8px;
|
||||
white-space: nowrap;
|
||||
font-size: $small;
|
||||
|
|
@ -141,7 +143,8 @@
|
|||
transform: translate(-50%, 0);
|
||||
gap: 6px;
|
||||
padding: 4px;
|
||||
border-radius: 8px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
|
||||
max-width: 80%;
|
||||
overflow: auto;
|
||||
transition: transform 0.3s ease;
|
||||
|
|
@ -153,7 +156,8 @@
|
|||
.zone {
|
||||
width: auto;
|
||||
background: $background-color;
|
||||
border-radius: 6px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
|
||||
padding: 4px 8px;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
|
|
@ -174,7 +178,8 @@
|
|||
.panel {
|
||||
position: absolute;
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 6px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
|
||||
overflow: auto;
|
||||
z-index: $z-index-tools;
|
||||
|
||||
|
|
@ -201,7 +206,8 @@
|
|||
width: 100%;
|
||||
max-height: 100%;
|
||||
border: 1px dashed var(--background-color-gray);
|
||||
border-radius: 8px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
|
||||
box-shadow: var(--box-shadow-medium);
|
||||
background: var(--background-color);
|
||||
position: relative;
|
||||
|
|
@ -229,7 +235,8 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
border-radius: 4px;
|
||||
border-radius: #{$border-radius-small};
|
||||
|
||||
|
||||
box-shadow: var(--box-shadow-medium);
|
||||
|
||||
|
|
@ -333,7 +340,8 @@
|
|||
width: 100%;
|
||||
min-height: 150px;
|
||||
max-height: 100%;
|
||||
border-radius: 8px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
|
||||
box-shadow: var(--box-shadow-medium);
|
||||
padding: 6px 0;
|
||||
background: var(--background-color);
|
||||
|
|
@ -381,7 +389,8 @@
|
|||
justify-content: center;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 4px;
|
||||
border-radius: #{$border-radius-small};
|
||||
|
||||
}
|
||||
|
||||
.active {
|
||||
|
|
@ -403,7 +412,8 @@
|
|||
background: var(--background-color-accent);
|
||||
border: none;
|
||||
color: var(--background-color);
|
||||
border-radius: 4px;
|
||||
border-radius: #{$border-radius-small};
|
||||
|
||||
|
||||
.add-icon {
|
||||
@include flex-center;
|
||||
|
|
@ -479,7 +489,8 @@
|
|||
width: 250px;
|
||||
padding: 12px;
|
||||
box-shadow: 1px -3px 4px 0px rgba(0, 0, 0, 0.11);
|
||||
border-radius: 8px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
|
||||
background: white;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
|
|
@ -503,7 +514,8 @@
|
|||
margin-bottom: 10px;
|
||||
border: 1px solid $border-color;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
border-radius: #{$border-radius-small};
|
||||
|
||||
transition: border 0.3s ease;
|
||||
|
||||
&.active {
|
||||
|
|
@ -517,7 +529,8 @@
|
|||
width: 10px;
|
||||
height: 10px;
|
||||
background: var(--primary-color);
|
||||
border-radius: 50%;
|
||||
border-radius: #{$border-radius-circle};
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -532,13 +545,15 @@
|
|||
gap: 5px;
|
||||
align-items: center;
|
||||
border: 1px solid var(--accent-color);
|
||||
border-radius: 4px;
|
||||
border-radius: #{$border-radius-small};
|
||||
|
||||
padding: 0 5px;
|
||||
|
||||
input {
|
||||
border: none;
|
||||
outline: none;
|
||||
border-radius: 50%;
|
||||
border-radius: #{$border-radius-circle};
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -565,7 +580,7 @@
|
|||
.zone {
|
||||
padding: 10px;
|
||||
border: 1px solid var(--highlight-accent-color);
|
||||
border-radius: 5px;
|
||||
border-radius: #{$border-radius-small};
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -598,7 +613,8 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
border-radius: 4px;
|
||||
border-radius: #{$border-radius-small};
|
||||
|
||||
|
||||
box-shadow: var(--box-shadow-medium);
|
||||
|
||||
|
|
@ -655,7 +671,7 @@
|
|||
color: var(--text-button-color);
|
||||
font-size: 12px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
border-radius: #{$border-radius-small};
|
||||
white-space: nowrap;
|
||||
transform: translate(-50%, -50%);
|
||||
/* Center the label */
|
||||
|
|
@ -747,7 +763,8 @@
|
|||
z-index: 3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 6px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
|
||||
overflow: hidden;
|
||||
padding: 4px;
|
||||
min-width: 150px;
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
background: var(--background-color);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
.logo-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
|
|
@ -34,6 +35,7 @@
|
|||
.link {
|
||||
color: var(--accent-color);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
@ -133,6 +135,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.policy-checkbox {
|
||||
@include flex-center;
|
||||
gap: 6px;
|
||||
|
|
@ -141,6 +144,7 @@
|
|||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
padding: 0 6px;
|
||||
|
||||
input {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
|
|
@ -159,10 +163,12 @@
|
|||
.link {
|
||||
color: var(--highlight-text-color);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
|
@ -173,9 +179,9 @@
|
|||
left: 50%;
|
||||
opacity: 0.5;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 50%;
|
||||
border-radius: #{$border-radius-circle};
|
||||
filter: blur(200px);
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue