@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap'); .input-group0-border2{ border: 1px solid #000; } #chartDataLoading{ display: none; } .x-axis-labels { text-align: center; } body{ background-color: transparent; } .x-axis-labels span { margin-right:10px ; display: inline-block; color: #58493F; /* Change the color of the text */ font-weight: bold; font-size: 24px; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; /* Apply text stroke effect */ } .chart_background{ /* background: #CECEDB; */ } #downloadButton{ /* margin:10px auto ; */ background: #00448F; color:#fff; border-radius: .3rem; border:none; padding: .375rem .75rem; } .chartjs-title { -webkit-text-stroke-width: 5px; -webkit-text-stroke-color: #fff; } .chart_box{ padding: 15px 20px; } #data_chart_box{ background-repeat: no-repeat; background-size: cover; background-position: center; padding: 30px; } #data_chartJs_box{ /* background: rgba(255, 255, 255,0.5); */ border-radius: 15px; padding: 15px; position: relative; } .chart_box2{ border-radius: 15px; /* background: rgba(229, 229, 234,0.6); */ } .chart_title{ font-family: "Noto Sans TC", sans-serif; font-optical-sizing: auto; font-weight: 900; font-style: normal; color: #1c2d6d; margin-bottom: 1rem; font-size: 32px; text-align: center; /* color: #fff; */ /* text-shadow: -1px -1px 0 #584B3D, 1px -1px 0 #584B3D, -1px 1px 0 #584B3D, 1px 1px 0 #584B3D; font-weight: bold; letter-spacing: 8px; */ } .chart_box2{ /* padding: 10px; */ } .chart_title{ padding: 15px 0px 0px 30px; } .chartSetting{ /* margin-bottom: 30px; */ } .chartSettingBox{ /* height: 90vh; */ } .chart_content{ width: 90% !important; } #textToChart { width: 100% !important; /* 視窗寬度 */ /* height: 100%; 視窗高度 */ } .sidebarToggle{ display: none; } .templateImg{ cursor: pointer; object-fit: cover; } .bgImg{ cursor: pointer; object-fit: cover; } #chartdiv { width: 90%; height: 400px; overflow: visible; /* 显示超出容器的内容 */ } .autocomplete-suggestions2 { display: none; border: 1px solid #ccc; max-height: 150px; overflow-y: auto; position: absolute; top:55px; z-index: 1000; background: #fff; width: 90%; } .autocomplete-suggestions { display: none; border: 1px solid #ccc; max-height: 150px; overflow-y: auto; position: absolute; bottom:80px; z-index: 1000; background: #fff; width: 100%; } .autocomplete-suggestion { padding: 8px; cursor: pointer; } .autocomplete-suggestion:hover { background: #f0f0f0; } #fixed_button{ /* padding-left: 1.5rem; padding-right: 1.5rem; */ position: fixed; bottom:5px; width: 95%; left: 25px; padding: 1rem; z-index: 101; } #recording_block{ position: fixed; bottom:5px; width: 95%; left: 25px; z-index: 102; padding: 1rem; } #fixed_button .input-group{ /* background: #fff; */ padding: 1.5rem 1rem; } .scrollable-div { height: 200px; /* 設置高度 */ overflow: auto; /* 設置溢出時顯示滾動條 */ padding: 10px; /* 加上內邊距 */ } .setting_button_content{ } .centered-div { position: absolute; width: 80%; top: 30%; left: 50%; transform: translate(-50%, -50%); text-align: center; /* 可選:內容置中 */ padding: 20px; /* 可選:內邊距 */ z-index: 101; } #table-svg{ color: rgb(118, 208, 235); } #line-icon{ fill: rgb(118, 208, 235); width: 20px; } #bar-icon{ fill:rgb(203, 139, 208);; width: 20px; } #pie-icon{ fill: rgb(226, 197, 65); width: 20px; } #table-icon{ fill: #6c757d; width: 20px; } .example{ padding: 20px; transition: 0.3s; cursor: pointer; } .example:hover{ background: #f8f9fa; } .setting_button{ position: fixed; top:300px; right:10px; cursor: pointer; background: #00448F; color:#fff; padding: 10px; } .setting_button_content{ writing-mode: vertical-rl; /* 垂直书写模式,从右到左 */ /* 文字竖直排列 */ } .show { right: 0px; /* 显示侧边栏 */ } .hidden { display: none; /* 隐藏侧边栏 */ } #style_setting,#style_setting_table { position: fixed; top: 78px; right: 10px; width: 450px; height: 78%; overflow-y: auto; padding: 20px; } #style_setting_close,#style_setting_close_table,#style_setting_close{ font-size: 20px; cursor: pointer; } .table_template{ width: 80%; margin: 30px; border: 5px solid #8a8a8a; /* 使用稍微深一些的灰色 */ font-size: 32px; } .table td { border: 5px solid #C0C5CC; } .table thead { background: radial-gradient(circle, rgb(91, 84, 136) 0%, rgba(204, 204, 255, 0.5) 100%); color:#fff; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); } .year-class{ background: rgb(3, 74, 128); color:#fff; font-family: "Noto Sans TC", sans-serif; font-optical-sizing: auto; font-weight: 900; font-style: normal; width: 40%; } .average-class{ /* background: linear-gradient(to right, rgb(168, 205, 235), white); */ background: radial-gradient(circle, white 10%, rgb(168, 205, 235) 80%); color:#912B2B; font-weight: 900; font-family: "Noto Sans TC", sans-serif; font-optical-sizing: auto; font-weight: 900; font-style: normal; width: 60%; color:rgba(130, 163, 63, 1); } .unit_box{ display: none; position: absolute; bottom: 160px; left: 30px; width: 40px; color:#584B3D; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; font-size: 24px; font-family: "Noto Sans TC", sans-serif; font-optical-sizing: auto; font-weight: 600; } .unit_value{ /* writing-mode: vertical-rl; 或者 vertical-lr 根據需求選擇 text-orientation: upright; 使文字保持正直 white-space: nowrap; 防止換行 */ display: grid; grid-template-columns: 1fr; /* 單列網格 */ grid-gap: 1px; /* 調整行高 */ text-align: center; } .unit_value span { display: block; /* 每個字符占據一行 */ line-height: 1.2; } .img_box{ position: absolute; bottom: 91px; right: 15px; } #img_box_url{ width: 150px; height: auto; } #chart-label { position: absolute; top: -20px; /* 调整标签位置 */ left: 0; color: #fff; background-color: rgba(0, 0, 0, 0.5); /* 标签背景颜色 */ padding: 5px 10px; border-radius: 5px; } .outlabeled_img{ width: 700px; height: auto; } #downloadButton{ display: none; } #chartType{ display: none; } #logout{ cursor: pointer; } .microphone{ /* margin-top: 1rem; */ cursor: pointer; transition: 0.3s; } .microphone:hover{ opacity: 0.8; } .speechToText{ background: none; border: none; } .circle-div { width: 100px; height: 100px; border-radius: 50%; display: flex; justify-content: center; align-items: center; background-color: #4CAF50; overflow: hidden; cursor: pointer; transition: 0.3s; } .circle-div:hover{ opacity: 0.8; } .circle-div img { width: 50%; height: 50%; } .recording{ font-size: 32px; } #stop{ background: none; border:none; } .compare{ display: none; } .chartType{ height: calc(1.5em + .75rem + 2px); padding: .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #6e707e; background-color: #fff; background-clip: padding-box; border: 1px solid #d1d3e2; border-radius: .35rem; } #borderWidthRange{ padding: .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #6e707e; background-color: #fff; background-clip: padding-box; border: 1px solid #d1d3e2; border-radius: .35rem; } .chart-container { overflow: visible; /* 确保 hover 区域没有被遮挡 */ }