CircuitVerse · niladrix719 · Aug 23, 2024
diff --git a/src/components/ContextMenu/ContextMenu.vue b/src/components/ContextMenu/ContextMenu.vue
@@ -80,3 +80,50 @@ export default {
     },
 }
 </script>
+
+<style scoped>
+#contextMenu {
+    width: 150px;
+    visibility: hidden;
+    position: fixed;
+    z-index: 1000;
+    opacity: 0;
+    top: 100;
+    left: 100;
+    cursor: pointer;
+    padding-bottom: 7px;
+    padding-top: 7px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+    border-radius: 5px;
+}
+
+#contextMenu ul {
+    margin: 0;
+    padding: 0;
+}
+
+#contextMenu ul li {
+    list-style: none;
+    padding: 8px;
+    padding-left: 20px;
+    width: 90%;
+    margin: auto;
+}
+
+#contextMenu ul li:hover {
+    border-radius: 7px;
+    opacity: 1;
+}
+
+@supports (backdrop-filter: blur()) {
+    #contextMenu {
+        backdrop-filter: blur(5px);
+    }
+    #contextMenu ul li:hover {
+        backdrop-filter: blur(50px);
+        -webkit-backdrop-filter: blur(50px);
+    }
+}
+</style>
diff --git a/src/components/DialogBox/BooleanTable.vue b/src/components/DialogBox/BooleanTable.vue
@@ -21,3 +21,39 @@ const props = defineProps({
     tableBody: { type: Array, default: () => [] },
 })
 </script>
+
+<style scoped>
+#booleanTable {
+    width: 200px;
+}
+
+.content-table {
+    border-collapse: collapse;
+    font-size: 0.9em;
+    min-width: 400px;
+}
+
+.content-table tr th {
+    font-weight: bold;
+}
+
+.content-table th,
+.content-table td {
+    padding: 5px 15px;
+    margin: 0 3px;
+    width: 20%;
+    border-radius: 2px;
+}
+
+.content-table tbody tr {
+    text-align: center;
+    display: flex;
+    margin-bottom: 4px;
+}
+
+.content-table tbody {
+    display: table-row-group;
+    overflow: auto !important;
+    margin-left: 52px;
+}
+</style>
diff --git a/src/components/DialogBox/CombinationalAnalysis.vue b/src/components/DialogBox/CombinationalAnalysis.vue
@@ -673,7 +673,7 @@ function printBooleanTable() {
         `<style>
         table {font: 40px Calibri;}
         table, th, td {border: solid 1px #DDD;border-collapse: 0;}
-        tbody {padding: 2px 3px;text-align: center;} 
+        tbody {padding: 2px 3px;text-align: center;}
         </style>`.replace(/\n/g, "")
     var win = window.open('', '', 'height=700,width=700')
     var htmlBody = `
@@ -691,6 +691,41 @@ function printBooleanTable() {
 }
 </script>
 
+<style>
+#combinationalAnalysis p input {
+    border: 1px solid white;
+    background: transparent;
+    font: inherit;
+    text-align: center;
+}
+
+#combinationalAnalysis table {
+    width: 460px;
+}
+
+.cAinput {
+    width: 30%;
+    padding: 0 5px;
+    margin: 8px 0;
+    box-sizing: border-box;
+    border-radius: 5px;
+    border: 1px solid #c5c5c5;
+    color: white;
+    outline: none;
+}
+
+.combinationalAnalysisInput:first-child {
+    padding-top: 20px;
+}
+
+.combinationalAnalysisInput {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: baseline;
+}
+</style>
+
 <style scoped>
 .alertStyle {
     position: absolute;
@@ -700,9 +735,19 @@ function printBooleanTable() {
     transform: translate(-50%, -50%);
     z-index: 10000;
 }
+
+.ui-dialog[aria-describedby='combinationalAnalysis'] {
+    width: 460px;
+    min-height: 210px;
+    border: none;
+}
+
+#combinationalAnalysis {
+    margin-top: 10px;
+}
 </style>
 
-<!-- 
-    some errors due to output.value 
+<!--
+    some errors due to output.value
     output.value == null not working
 -->
diff --git a/src/components/DialogBox/InsertSubcircuit.vue b/src/components/DialogBox/InsertSubcircuit.vue
@@ -107,7 +107,28 @@ function newCircuit() {
 }
 </script>
 
-<!-- 
+<!--
 	Some error on inserting empty circuit as subcircuit
-	Some error on checking for rendering 
+	Some error on checking for rendering
 -->
+
+<style scoped>
+#insertSubcircuitDialog {
+    display: block;
+    padding-bottom: 0;
+    overflow: visible;
+}
+
+#insertSubcircuitDialog > p {
+    margin-bottom: 0;
+}
+
+#insertSubcircuitDialog > label {
+    height: 30px;
+    border-radius: 3px;
+    margin: 0 5px;
+    margin-bottom: 4px;
+    justify-content: center;
+    padding-left: 10px;
+}
+</style>
diff --git a/src/components/DialogBox/OpenOffline.vue b/src/components/DialogBox/OpenOffline.vue
@@ -105,3 +105,26 @@ function OpenImportProjectDialog() {
     SimulatorState.dialogBox.import_project_dialog = true
 }
 </script>
+
+<style scoped>
+#openProjectDialog {
+    display: grid;
+    /* grid-template-columns: 1fr 1fr 1fr; */
+    /* grid-gap: 0 10px; */
+    align-items: center;
+}
+
+#openProjectDialog > label {
+    margin: 4px;
+    padding: 10px;
+    background: transparent;
+    border-radius: 1px;
+    width: 100%;
+}
+
+.deleteOfflineProject {
+    float: right;
+    cursor: pointer;
+    padding: 2px;
+}
+</style>
diff --git a/src/components/DialogBox/SaveImage.vue b/src/components/DialogBox/SaveImage.vue
@@ -155,3 +155,79 @@ function renderCircuit() {
     )
 }
 </script>
+
+<style scoped>
+.download-dialog-section-2 .btn {
+    color: var(--text-lite);
+}
+.download-dialog-section-2 .btn:hover {
+    color: var(--text-lite);
+}
+
+.download-dialog-section-2 .option {
+    background: transparent;
+}
+
+#saveImageDialog {
+    border-radius: 2px;
+    padding: 13px;
+    margin: 0;
+    margin-top: 15px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    min-height: 188px !important;
+}
+
+.download-dialog-section-2 .option {
+    padding: 0;
+}
+
+.download-dialog-section-1 > label {
+    height: 30px;
+    width: 85px;
+}
+
+.download-dialog-section-2 {
+    background: transparent;
+    width: 100%;
+    display: inline-flex;
+    justify-content: space-around;
+}
+
+.btn-group-toggle {
+    background-color: transparent;
+    overflow: hidden;
+}
+.download-dialog-section-2 .active-btn {
+    box-shadow: none;
+}
+
+.download-dialog-section-2 .btn input[type='radio']:disabled {
+    background: red !important;
+    color: red !important;
+}
+
+.download-dialog-section-2_2 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.download-dialog-section-3 {
+    border-radius: 2px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 6px 10px;
+    width: 320px;
+    position: inherit;
+}
+
+.download-dialog-section-3 > label {
+    width: 60px;
+    height: 25px;
+    margin-bottom: 0;
+}
+</style>
diff --git a/src/components/DialogBox/Themes/ApplyThemes.vue b/src/components/DialogBox/Themes/ApplyThemes.vue
@@ -297,3 +297,56 @@ function closeCustomThemeDialog() {
     updateBG()
 }
 </script>
+
+<style scoped>
+.theme {
+    color: white;
+    width: 202.5px;
+    line-height: 30px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+    margin: 15px;
+    border-radius: 1.5px;
+    transition: all 0.1s ease-out;
+    position: relative;
+    overflow-x: hidden;
+    height: 154px;
+}
+
+.themeNameBox {
+    display: block;
+    width: 100%;
+    cursor: pointer;
+}
+
+.themeSel {
+    background: transparent;
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+}
+
+.customColorInput {
+    cursor: pointer;
+    width: 30%;
+    height: 30px;
+    overflow: visible;
+    position: relative;
+    top: 8px;
+    appearance: auto;
+    background-color: buttonface;
+    color: buttontext;
+    border-width: 1px;
+    border-style: solid;
+    border-color: buttonborder;
+    border-image: initial;
+    padding: 1px 2px;
+}
+
+.customColorLabel {
+    width: 60%;
+    height: 30px;
+}
+</style>
diff --git a/src/components/Dropdown/DropDown.vue b/src/components/Dropdown/DropDown.vue
@@ -56,3 +56,19 @@ const props = defineProps({
 })
 const userId = useAuthStore().getUserId
 </script>
+
+<style scoped>
+.dropdown-menu > li > a {
+    padding: 7px 0;
+    width: 90%;
+    margin: auto;
+    transition: all 0.2s ease-in-out;
+    text-align: left;
+    padding-left: 10px;
+}
+
+.dropdown-menu > li > a:hover {
+    border-radius: 7px;
+    opacity: 1;
+}
+</style>
diff --git a/src/components/Logo/Logo.vue b/src/components/Logo/Logo.vue
@@ -21,4 +21,12 @@ export default {
 
 <style scoped>
 /* @import url('./Logo.css'); */
+
+.logo {
+    background: url(../../styles/css/assets/logo.svg) center/cover;
+    height: 30px;
+    width: 105px;
+    display: inline-block;
+    margin-right: 36px;
+}
 </style>