Initial commit

2026-05-05 16:16:34 +08:00
commit 5568651cc3
10 changed files with 2067 additions and 0 deletions
@@ -0,0 +1,149 @@
+/* Custom scrollbar for webkit */
+.custom-scrollbar::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+/* Light mode thumb */
+.custom-scrollbar::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 3px;
+}
+
+/* Dark mode thumb */
+.dark .custom-scrollbar::-webkit-scrollbar-thumb {
+    background: #374151;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: #94a3b8;
+}
+
+.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: #4b5563;
+}
+
+/* Base styles */
+body {
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+    font-size: 16px; /* 提高基礎字體大小 */
+    line-height: 1.6; /* 增加行高，提升閱讀舒適度 */
+}
+
+/* Range input styling overrides - Touch Optimized */
+input[type=range] {
+    -webkit-appearance: none;
+    appearance: none; /* 標準屬性 */
+    background: #e2e8f0;
+    height: 8px;
+    border-radius: 4px;
+    transition: background 0.3s;
+    cursor: pointer;
+}
+
+.dark input[type=range] {
+    background: #374151;
+}
+
+input[type=range]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    height: 24px; /* 加大滑桿頭，方便手指觸控 */
+    width: 24px;
+    border-radius: 50%;
+    background: #3b82f6;
+    cursor: pointer;
+    transition: background .15s ease-in-out, transform .1s;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+    border: 2px solid white;
+}
+
+.dark input[type=range]::-webkit-slider-thumb {
+    border: 2px solid #1f2937;
+}
+
+input[type=range]::-webkit-slider-thumb:hover {
+    background: #2563eb;
+    transform: scale(1.1);
+}
+
+/* 加大點擊區域與間距 */
+button, select, input[type=number], textarea {
+    min-height: 44px; /* 符合行動裝置建議的最小點擊高度 */
+}
+
+/* 小型功能按鈕（靈敏度、重置）排除最小高度限制 */
+.btn-small {
+    min-height: unset;
+}
+
+
+/* Hide number input arrows */
+input[type=number]::-webkit-inner-spin-button, 
+input[type=number]::-webkit-outer-spin-button { 
+  -webkit-appearance: none;
+  appearance: none; /* 標準屬性 */
+  margin: 0; 
+}
+input[type=number] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
+/* 強制 Plotly modebar 容器定位於圖表外上方 */
+.js-plotly-plot .plotly .modebar-container {
+    top: -45px !important;
+    right: 0 !important;
+    left: 0 !important;
+    width: 100% !important;
+    display: block !important;
+}
+
+/* 強制 modebar 內部按鈕橫向排列且靠右 */
+.js-plotly-plot .plotly .modebar {
+    position: static !important;
+    display: flex !important;
+    flex-direction: row !important;
+    flex-wrap: nowrap !important;
+    justify-content: flex-end !important;
+    background: transparent !important;
+    padding-right: 10px;
+}
+
+/* 確保按鈕群組也是橫向 */
+.js-plotly-plot .plotly .modebar-group {
+    display: flex !important;
+    flex-direction: row !important;
+}
+
+/* 增加圖表上方間距給 modebar 使用 */
+#bodePlot, #timePlot {
+    margin-top: 50px;
+}
+
+/* RWD 調整：在窄螢幕下微調 modebar 位置與間距 */
+@media (max-width: 1024px) {
+    .js-plotly-plot .plotly .modebar-container {
+        top: -40px !important;
+    }
+}
+
+/* details 展開動畫 */
+details > summary {
+    list-style: none;
+    user-select: none;
+}
+details > summary::-webkit-details-marker {
+    display: none;
+}
+details > div {
+    animation: slideDown 0.2s ease-out;
+    overflow: hidden;
+}
+@keyframes slideDown {
+    from { opacity: 0; transform: translateY(-6px); }
+    to   { opacity: 1; transform: translateY(0); }
+}