tcad-bodeplot/static/style.css

/* 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); }
}