すごく色々調整

new-sankaku · Oct 13, 2024 · 062d107 · 062d107
1 parent c640f23
commit 062d107
Show file tree

Hide file tree

Showing 29 changed files with 1,108 additions and 1,081 deletions.
diff --git a/SP-MangaEditer/03_images/preset/effect/glfx.webp b/SP-MangaEditer/03_images/preset/effect/glfx.webp
diff --git a/SP-MangaEditer/css/components.css b/SP-MangaEditer/css/components.css
@@ -1,20 +1,10 @@
 @import url('root.css');
 
-#svg-container-vertical,
-#svg-container-landscape,
-#speech-bubble-area1,
-#speech-bubble-area2,
-#text-area,
-#text-area2,
-#tool-area,
-#shape-area,
-#manga-tone-area,
-#manga-effect-area,
-#panel-manager-area,
-#custom-panel-manager-area,
-#dummy-area4 {
+.left_area {
  font-size: var(--font-size-base);
  margin-right: var(--margin-right-base);
+ /* margin-top: 2px;
+ margin-bottom: 2px; */
  max-width: var(--max-width-base);
  min-width: var(--min-width-base);
  height: auto;
@@ -139,14 +129,7 @@
  padding: 2px;
 }
 
-#svg-preview-area-vertical,
-#svg-preview-area-landscape,
-#speech-bubble-svg-preview-area1,
-#text-preview-area,
-#shape-preview-area,
-#panel-manager-items,
-#custom-panel-manager-items,
-#dummy-svg-preview-area4 {
+.left_area {
  max-width: var(--max-width-base);
  min-width: var(--min-width-base);
  height: calc(100vh - 12vh);
@@ -275,12 +258,7 @@ button.selected {
  margin-bottom: 5px;
 }
 
-#text-preview-area button .material-icons,
-#layer-content button .material-icons,
-#shape-preview-area button .material-icons,
-#speech-bubble-svg-preview-area1 button .material-icons,
-#panel-manager-items button .material-icons,
-#custom-panel-manager-items button .material-icons {
+.left_area button .material-icons {
  font-size: 16px;
  vertical-align: middle;
 }
@@ -303,25 +281,17 @@ button.selected {
  text-align: left;
 }
 
-#speech-bubble-svg-preview-area1 button img {
+.left_area button img {
  width: 90%;
  display: block;
  margin: 0 auto;
 }
 
-#text-preview-area label,
-#shape-preview-area label,
-#panel-manager-items label,
-#custom-panel-manager-items label,
-#speech-bubble-svg-preview-area1 label {
+.left_area label{
  margin: 1px;
 }
 
-#text-preview-area hr,
-#shape-preview-area hr,
-#panel-manager-items hr,
-#custom-panel-manager-items hr,
-#speech-bubble-svg-preview-area1 hr {
+.left_area hr {
  display: block;
  width: 92%;
  margin: 6px;

diff --git a/SP-MangaEditer/css/controls-mini.css b/SP-MangaEditer/css/controls-mini.css
@@ -0,0 +1,102 @@
+@import url('root.css');
+
+.controls-mini {
+  max-width: 100%;
+}
+.controls-mini .control {
+  position: relative;
+  margin-top: 5px;
+  border-radius: 4px;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+  overflow: visible;
+}
+.controls-mini input,
+.controls-mini select {
+  width: 100%;
+  padding: 10px 8px 2px 8px;
+  border-radius: 4px;
+  font-size: 14px;
+  background-color: var(--background-color-B);
+  transition: 0.3s ease all;
+  box-sizing: border-box;
+}
+.controls-mini .label {
+  position: absolute;
+  left: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 14px;
+  color: #757575;
+  pointer-events: none;
+  transition: 0.3s ease all;
+}
+.controls-mini input:focus ~ .label,
+.controls-mini input:not(:placeholder-shown) ~ .label,
+.controls-mini select:focus ~ .label,
+.controls-mini select:not(:placeholder-shown) ~ .label {
+  top: 5px;
+  font-size: 12px;
+  color: var(--text-color-C);
+}
+.controls-mini .textarea-control {
+  display: flex;
+  flex-direction: column;
+  height: auto;
+}
+.controls-mini .textarea-label-wrapper {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0px;
+}
+.controls-mini .textarea-label {
+  font-size: 12px;
+  color: #757575;
+}
+.controls-mini textarea {
+  width: 100%;
+  min-height: 40px;
+  max-height: 250px;
+  resize: none;
+  overflow-y: auto;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 14px;
+  background-color: var(--background-color-B);
+  box-sizing: border-box;
+}
+.controls-mini textarea:focus {
+  outline: none;
+}
+.controls-mini input:focus,
+.controls-mini select:focus {
+  outline: none;
+}
+.controls-mini select {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-size: 8px;
+  background-color: var(--background-color-B);
+  padding-right: 24px;
+}
+.controls-mini input[type="number"] {
+  padding-right: 20px;
+}
+.controls-mini input[type="number"]::-webkit-inner-spin-button,
+.controls-mini input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: inner-spin-button;
+  opacity: 1;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 20px;
+  cursor: pointer;
+}
+.controls-mini .dual-number-control {
+  display: flex;
+  justify-content: space-between;
+}
+.controls-mini .dual-number-control .control {
+  width: 48%;
+}
diff --git a/SP-MangaEditer/css/root.css b/SP-MangaEditer/css/root.css
@@ -178,7 +178,7 @@
  --font-size-12px: 12px;
  --font-size-controls: 12px;
  --font-size-small: 12px;
- --font-size-base: 14px;
+ --font-size-base: 12px;
  --min-width-layer-panel-small: 15%;
  --max-width-150: 150px;
  --max-width-base: 200px;
@@ -189,7 +189,7 @@
  --gap-section: 16px;
  --padding-block-article: 16px;
  --max-width-layer-panel: 18%;
- --min-width-controls: 180px;
+ --min-width-controls: 300px;
  --flex-basis-section: 180px;
  --font-size-icon-material-outlined: 18px;
  --flex-2: 2;