aboutsummaryrefslogtreecommitdiff
path: root/src_scss
diff options
context:
space:
mode:
Diffstat (limited to 'src_scss')
-rw-r--r--src_scss/_color.scss (renamed from src_scss/color.scss)0
-rw-r--r--src_scss/_grid.scss (renamed from src_scss/grid.scss)2
-rw-r--r--src_scss/_shadow.scss (renamed from src_scss/shadow.scss)0
-rw-r--r--src_scss/fonts/_font.scss9
-rw-r--r--src_scss/fonts/fontawesome.scss9
-rw-r--r--src_scss/fonts/inter.scss8
-rw-r--r--src_scss/fonts/roboto.scss15
-rw-r--r--src_scss/main.scss303
8 files changed, 182 insertions, 164 deletions
diff --git a/src_scss/color.scss b/src_scss/_color.scss
index 9e4b539..9e4b539 100644
--- a/src_scss/color.scss
+++ b/src_scss/_color.scss
diff --git a/src_scss/grid.scss b/src_scss/_grid.scss
index b1e9bf8..68c9cb9 100644
--- a/src_scss/grid.scss
+++ b/src_scss/_grid.scss
@@ -1,4 +1,4 @@
-@import './color';
+@import 'color';
table.grid {
diff --git a/src_scss/shadow.scss b/src_scss/_shadow.scss
index 8bcb900..8bcb900 100644
--- a/src_scss/shadow.scss
+++ b/src_scss/_shadow.scss
diff --git a/src_scss/fonts/_font.scss b/src_scss/fonts/_font.scss
deleted file mode 100644
index 3f4e7e7..0000000
--- a/src_scss/fonts/_font.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-
-@mixin font($variant, $type, $weight, $style) {
- @font-face {
- font-family: '#{$variant}';
- src: url('../../fonts/#{$variant}/#{$variant}-#{$type}.woff2') format('truetype');
- font-weight: $weight;
- font-style: $style;
- }
-}
diff --git a/src_scss/fonts/fontawesome.scss b/src_scss/fonts/fontawesome.scss
index bfac549..5d628ba 100644
--- a/src_scss/fonts/fontawesome.scss
+++ b/src_scss/fonts/fontawesome.scss
@@ -1,7 +1,10 @@
-@import "font";
-
-@include font('FontAwesome', 'webfont', normal, normal);
+@font-face {
+ font-family: 'FontAwesome';
+ src: url('fonts/FontAwesome/FontAwesome.woff2') format('woff2');
+ font-weight: normal;
+ font-style: normal;
+}
.fa {
display: inline-block;
diff --git a/src_scss/fonts/inter.scss b/src_scss/fonts/inter.scss
new file mode 100644
index 0000000..4863b74
--- /dev/null
+++ b/src_scss/fonts/inter.scss
@@ -0,0 +1,8 @@
+
+@font-face {
+ font-family: 'Inter';
+ src: url('fonts/Inter/Inter.woff2') format('woff2');
+ font-weight: 100 900;
+ font-style: oblique 0deg 10deg;
+ font-display: swap;
+}
diff --git a/src_scss/fonts/roboto.scss b/src_scss/fonts/roboto.scss
deleted file mode 100644
index 184ad61..0000000
--- a/src_scss/fonts/roboto.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@import "font";
-
-
-@include font('Roboto', 'Black', 900, normal);
-@include font('Roboto', 'BlackItalic', 900, italic);
-@include font('Roboto', 'Bold', 700, normal);
-@include font('Roboto', 'BoldItalic', 700, italic);
-@include font('Roboto', 'Medium', 500, normal);
-@include font('Roboto', 'MediumItalic', 500, italic);
-@include font('Roboto', 'Regular', 400, normal);
-@include font('Roboto', 'RegularItalic', 400, italic);
-@include font('Roboto', 'Light', 300, normal);
-@include font('Roboto', 'LightItalic', 300, italic);
-@include font('Roboto', 'Thin', 100, normal);
-@include font('Roboto', 'ThinItalic', 100, italic);
diff --git a/src_scss/main.scss b/src_scss/main.scss
index 897847c..80cb0ab 100644
--- a/src_scss/main.scss
+++ b/src_scss/main.scss
@@ -1,173 +1,204 @@
-@import '~normalize.css/normalize';
@import '~izitoast/dist/css/iziToast.min';
-@import './fonts/fontawesome';
-@import './fonts/roboto';
-@import './color';
-@import './shadow';
-@import './grid';
+@import 'color';
+@import 'shadow';
+@import 'fonts/fontawesome';
+@import 'fonts/inter';
-html, body {
- font-size: 10pt;
- font-family: 'Roboto';
- height: 100%;
- margin: 0px;
+html, body, button, input, select {
+ font-family: 'Inter';
+ font-size: 12pt;
}
-
-.window {
+html, body {
+ margin: 0;
+ user-select: none;
height: 100%;
- display: flex;
+ overflow: hidden;
}
-
-.left-panel {
- @include shadow-4dp();
- width: 450px;
- display: flex;
- flex-direction: column;
- background-color: $color-grey-100;
-
- .header {
- flex-shrink: 0;
- margin: 10px;
+body {
+ & > .main {
+ height: 100%;
display: flex;
- align-items: center;
- .title {
- flex-grow: 1;
- font-size: 18pt;
- font-weight: 500;
- color: $color-grey-800;
+ & > .panel-resizer {
+ cursor: ew-resize;
+ width: 0.4rem;
}
- a {
- font-size: 24pt;
- color: $color-grey-800;
-
- &:visited {
- color: $color-grey-800;
- }
-
- &:hover {
- color: black;
- }
- }
- }
+ & > .left-panel {
+ @include shadow-4dp;
+ width: 35rem;
+ display: flex;
+ flex-direction: column;
+ background-color: $color-grey-100;
+ overflow: auto;
+
+ & > .header {
+ flex-shrink: 0;
+ margin: 1rem;
+ display: flex;
+ align-items: center;
+
+ & > .title {
+ flex-grow: 1;
+ font-size: 18pt;
+ font-weight: 500;
+ color: $color-grey-800;
+ }
- .group {
- flex-shrink: 0;
- display: flex;
- flex-direction: column;
- margin: 10px;
- margin-bottom: 0px;
- }
+ & > .github {
+ font-size: 24pt;
+ color: $color-grey-800;
- .content {
- flex-grow: 1;
- display: flex;
- flex-direction: column;
- margin: 10px;
- margin-bottom: 0px;
- align-items: stretch;
- overflow: auto;
+ &:visited {
+ color: $color-grey-800;
+ }
- table.grid {
- width: 100%;
+ &:hover {
+ color: black;
+ }
+ }
+ }
- .fixed {
- width: 55px
+ & > .group {
+ flex-shrink: 0;
+ display: flex;
+ flex-direction: column;
+ margin: 1rem;
+ margin-bottom: 0;
}
- tbody td:last-child {
- text-align: center;
+ & > .content {
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+ margin: 1rem;
+ margin-bottom: 0;
+ align-items: stretch;
+ overflow: auto;
+
+ & > div {
+ margin-bottom: 1rem;
+
+ & > table {
+ width: 100%;
+
+ .col-quantity, .col-height, .col-width, .col-rotate {
+ width: 5rem;
+
+ input {
+ text-align: right;
+ }
+ }
+
+ .col-delete {
+ width: 2rem;
+ }
+
+ & > tbody {
+ td {
+ div {
+ display: flex;
+ align-content: stretch;
+
+ & > * {
+ flex-shrink: 1;
+ flex-grow: 1;
+ width: 1rem;
+ }
+
+ }
+ }
+ }
+
+ & > tfoot {
+ td {
+ & > div {
+ display: flex;
+
+ & > .spacer {
+ flex-grow: 1;
+ }
+ }
+ }
+ }
+ }
+ }
}
- .grid-col-width, .grid-col-height, .grid-col-quantity {
- text-align: right;
+ & > .calculate {
+ flex-shrink: 0;
+ margin: 1rem;
+ padding: 1rem;
+ }
- input {
- text-align: right;
- }
+ .invalid {
+ background-color: rgba(red, 0.2);
}
}
- & > *:not(:last-child) {
- margin-bottom: 10px;
+ & > .center-panel {
+ flex-grow: 1;
+ overflow: auto;
+ padding: 1.5rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
- }
-
- .calculate {
- flex-shrink: 0;
- margin: 10px;
- padding: 10px;
- }
- .invalid {
- background-color: rgba(red, 0.2);
- }
-}
-
-
-.center-panel {
- flex-grow: 1;
- overflow: auto;
- padding: 15px;
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-
-.right-panel {
- @include shadow-4dp();
- width: 200px;
- display: flex;
- flex-direction: column;
- background-color: $color-grey-100;
- overflow: auto;
+ & > .right-panel {
+ @include shadow-4dp;
+ width: 20rem;
+ display: flex;
+ flex-direction: column;
+ background-color: $color-grey-100;
+ overflow: auto;
+
+ .toolbar {
+ display: flex;
+ justify-content: center;
+ margin: 1rem;
+ flex-shrink: 0;
+ }
- .toolbar {
- display: flex;
- justify-content: center;
- margin: 10px;
- flex-shrink: 0;
- }
+ .panel {
+ margin: 1.5rem 0;
- .panel {
- margin: 15px 0px;
+ & > *:hover {
+ background-color: $color-grey-400;
+ cursor: pointer;
+ }
+ }
- & > *:hover {
- background-color: $color-grey-400;
- cursor: pointer;
- }
- }
+ .panel-name {
+ padding: 0.4rem 1rem;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-weight: 600;
+ color: $color-grey-800;
+ }
- .panel-name {
- padding: 3px 10px;
- overflow: hidden;
- text-overflow: ellipsis;
- font-weight: 600;
- color: $color-grey-800;
- }
+ .item {
+ padding: 0.4rem 1rem 0.4rem 2rem;
+ display: flex;
- .item {
- padding: 3px 10px 3px 20px;
- display: flex;
+ .item-name {
+ flex-grow: 1;
+ }
- .item-name {
- flex-grow: 1;
- }
+ .item-rotate, .item-x, .item-y {
+ margin-left: 0.4rem;
+ font-weight: 600;
+ color: $color-grey-800;
+ }
+ }
- .item-rotate, .item-x, .item-y {
- margin-left: 3px;
- font-weight: 600;
- color: $color-grey-800;
+ .selected {
+ background-color: $color-grey-400;
+ }
}
}
-
- .selected {
- background-color: $color-grey-400;
- }
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-02-11 13:11:01 +0000