Spaces:
Sleeping
Sleeping
def get_css_styles(): | |
return """ | |
.dog-info-card { | |
margin: 0 0 20px 0; | |
padding: 0; | |
border-radius: 12px; | |
box-shadow: 0 2px 12px rgba(0,0,0,0.08); | |
overflow: hidden; | |
transition: all 0.3s ease; | |
background: white; | |
border: 1px solid #e1e4e8; | |
position: relative; | |
} | |
.dog-info-card:hover { | |
box-shadow: 0 4px 16px rgba(0,0,0,0.12); | |
} | |
.dog-info-card:before { | |
content: ''; | |
position: absolute; | |
left: 0; | |
top: 0; | |
bottom: 0; | |
width: 8px; | |
background-color: inherit; | |
} | |
.dog-info-header { | |
padding: 24px 28px; /* 增加內距 */ | |
margin: 0; | |
font-size: 22px; | |
font-weight: bold; | |
border-bottom: 1px solid #e1e4e8; | |
} | |
.dog-info-header { | |
background-color: transparent; | |
} | |
.colored-border { | |
position: absolute; | |
left: 0; | |
top: 0; | |
bottom: 0; | |
width: 8px; | |
} | |
.dog-info-header { | |
border-left-width: 8px; | |
border-left-style: solid; | |
} | |
.breed-info { | |
padding: 28px; /* 增加整體內距 */ | |
line-height: 1.6; | |
font-size: 1rem; | |
border: none; | |
} | |
.section-title { | |
font-size: 1.2em !important; | |
font-weight: 700; | |
color: #2c3e50; | |
margin: 32px 0 20px 0; | |
padding: 12px 0; | |
border-bottom: 2px solid #e1e4e8; | |
text-transform: uppercase; | |
letter-spacing: 0.5px; | |
display: flex; | |
align-items: center; | |
gap: 8px; | |
position: relative; | |
} | |
.section-header { | |
color: #2c3e50; | |
font-size: 1.15rem; | |
font-weight: 600; | |
margin: 20px 0 12px 0; | |
display: flex; | |
align-items: center; | |
gap: 8px; | |
} | |
.icon { | |
font-size: 1.2em; | |
display: inline-flex; | |
align-items: center; | |
justify-content: center; | |
} | |
.info-section, .care-section, .family-section { | |
display: flex; | |
flex-wrap: wrap; | |
gap: 16px; | |
margin-bottom: 28px; /* 增加底部間距 */ | |
padding: 20px; /* 增加內距 */ | |
background: #f8f9fa; | |
border-radius: 12px; | |
border: 1px solid #e1e4e8; /* 添加邊框 */ | |
} | |
.info-item { | |
background: white; /* 改為白色背景 */ | |
padding: 14px 18px; /* 增加內距 */ | |
border-radius: 8px; | |
display: flex; | |
align-items: center; | |
gap: 10px; | |
box-shadow: 0 2px 4px rgba(0,0,0,0.05); | |
border: 1px solid #e1e4e8; | |
flex: 1 1 auto; | |
min-width: 200px; | |
} | |
.label { | |
color: #666; | |
font-weight: 600; | |
font-size: 1.1rem; | |
} | |
.value { | |
color: #2c3e50; | |
font-weight: 500; | |
font-size: 1.1rem; | |
} | |
.temperament-section { | |
background: #f8f9fa; | |
padding: 20px; /* 增加內距 */ | |
border-radius: 12px; | |
margin-bottom: 28px; /* 增加間距 */ | |
color: #444; | |
border: 1px solid #e1e4e8; /* 添加邊框 */ | |
} | |
.description-section { | |
background: #f8f9fa; | |
padding: 24px; /* 增加內距 */ | |
border-radius: 12px; | |
margin: 28px 0; /* 增加上下間距 */ | |
line-height: 1.8; | |
color: #444; | |
border: 1px solid #e1e4e8; /* 添加邊框 */ | |
fontsize: 1.1rem; | |
} | |
.description-section p { | |
margin: 0; | |
padding: 0; | |
text-align: justify; /* 文字兩端對齊 */ | |
word-wrap: break-word; /* 確保長單字會換行 */ | |
white-space: pre-line; /* 保留換行但合併空白 */ | |
max-width: 100%; /* 確保不會超出容器 */ | |
} | |
.action-section { | |
margin-top: 24px; | |
text-align: center; | |
} | |
.akc-button, | |
.breed-section .akc-link, | |
.breed-option .akc-link { | |
display: inline-flex; | |
align-items: center; | |
padding: 14px 28px; | |
background: linear-gradient(145deg, #00509E, #003F7F); | |
color: white; | |
border-radius: 12px; /* 增加圓角 */ | |
text-decoration: none; | |
gap: 12px; /* 增加圖標和文字間距 */ | |
transition: all 0.3s ease; | |
font-weight: 600; | |
font-size: 1.1em; | |
box-shadow: | |
0 2px 4px rgba(0,0,0,0.1), | |
inset 0 1px 1px rgba(255,255,255,0.1); | |
border: 1px solid rgba(255,255,255,0.1); | |
} | |
.akc-button:hover, | |
.breed-section .akc-link:hover, | |
.breed-option .akc-link:hover { | |
background: linear-gradient(145deg, #003F7F, #00509E); | |
transform: translateY(-2px); | |
color: white; | |
box-shadow: | |
0 6px 12px rgba(0,0,0,0.2), | |
inset 0 1px 1px rgba(255,255,255,0.2); | |
border: 1px solid rgba(255,255,255,0.2); | |
} | |
.icon { | |
font-size: 1.3em; | |
filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2)); | |
} | |
.warning-message { | |
display: flex; | |
align-items: center; | |
gap: 8px; | |
color: #ff3b30; | |
font-weight: 500; | |
margin: 0; | |
padding: 16px; | |
background: #fff5f5; | |
border-radius: 8px; | |
} | |
.model-uncertainty-note { | |
display: flex; | |
align-items: center; | |
gap: 12px; | |
padding: 16px; | |
background-color: #f8f9fa; | |
margin-bottom: 20px; | |
color: #495057; | |
border-radius: 4px; | |
} | |
.breeds-list { | |
display: flex; | |
flex-direction: column; | |
gap: 20px; | |
} | |
.breed-option { | |
background: white; | |
border: 1px solid #e1e4e8; | |
border-radius: 8px; | |
overflow: hidden; | |
} | |
.breed-header { | |
display: flex; | |
align-items: center; | |
padding: 16px; | |
background: #f8f9fa; | |
gap: 12px; | |
border-bottom: 1px solid #e1e4e8; | |
} | |
.option-number { | |
font-weight: 600; | |
color: #666; | |
padding: 4px 8px; | |
background: #e1e4e8; | |
border-radius: 4px; | |
} | |
.option-item { | |
padding: 15px; | |
margin-bottom: 10px; | |
border-bottom: 1px solid #ddd; | |
} | |
.option-item:last-child { | |
border-bottom: none; /* 最後一個選項去除邊線 */ | |
} | |
.breed-name { | |
font-size: 1.2em !important; # 從 1.5em 改為 1.2em | |
font-weight: bold; | |
color: #2c3e50; | |
flex-grow: 1; | |
} | |
.confidence-badge { | |
padding: 4px 12px; | |
border-radius: 20px; | |
font-size: 0.9em; | |
font-weight: 500; | |
} | |
.breed-content { | |
padding: 20px; | |
} | |
.breed-content li { | |
margin-bottom: 8px; | |
display: flex; | |
align-items: flex-start; /* 改為頂部對齊 */ | |
gap: 8px; | |
flex-wrap: wrap; /* 允許內容換行 */ | |
} | |
.breed-content li strong { | |
flex: 0 0 auto; /* 不讓標題縮放 */ | |
min-width: 100px; /* 給標題一個固定最小寬度 */ | |
} | |
ul { | |
padding-left: 0; | |
margin: 0; | |
list-style-type: none; | |
} | |
li { | |
margin-bottom: 8px; | |
display: flex; | |
align-items: center; | |
gap: 8px; | |
} | |
.action-section { | |
margin-top: 20px; | |
padding: 15px; | |
text-align: center; | |
border-top: 1px solid #dee2e6; | |
} | |
.akc-button { | |
display: inline-block; | |
padding: 12px 24px; | |
background-color: #007bff; | |
color: white !important; | |
text-decoration: none; | |
border-radius: 5px; | |
font-weight: 500; | |
transition: background-color 0.3s; | |
} | |
.akc-button:hover { | |
background-color: #0056b3; | |
text-decoration: none; | |
} | |
.akc-button .icon { | |
margin-right: 8px; | |
} | |
.akc-link { | |
color: white; | |
text-decoration: none; | |
font-weight: 600; | |
font-size: 1.1em; | |
transition: all 0.3s ease; | |
} | |
.akc-link:hover { | |
text-decoration: underline; | |
color: #D3E3F0; | |
} | |
.tooltip { | |
position: relative; | |
display: inline-flex; | |
align-items: center; | |
gap: 4px; | |
cursor: help; | |
} | |
.tooltip .tooltip-icon { | |
font-size: 14px; | |
color: #666; | |
} | |
.tooltip .tooltip-text { | |
visibility: hidden; | |
width: 250px; | |
background-color: rgba(44, 62, 80, 0.95); | |
color: white; | |
text-align: left; | |
border-radius: 8px; | |
padding: 8px 10px; | |
position: absolute; | |
z-index: 100; | |
bottom: 150%; | |
left: 50%; | |
transform: translateX(-50%); | |
opacity: 0; | |
transition: all 0.3s ease; | |
font-size: 14px; | |
line-height: 1.3; | |
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); | |
border: 1px solid rgba(255, 255, 255, 0.1) | |
margin-bottom: 10px; | |
} | |
.tooltip.tooltip-left .tooltip-text { | |
left: 0; | |
transform: translateX(0); | |
} | |
.tooltip.tooltip-right .tooltip-text { | |
left: auto; | |
right: 0; | |
transform: translateX(0); | |
} | |
.tooltip-text strong { | |
color: white !important; | |
background-color: transparent !important; | |
display: block; /* 讓標題獨立一行 */ | |
margin-bottom: 2px; /* 增加標題下方間距 */ | |
padding-bottom: 2px; /* 加入小間距 */ | |
border-bottom: 1px solid rgba(255,255,255,0.2); | |
} | |
.tooltip-text { | |
font-size: 13px; /* 稍微縮小字體 */ | |
} | |
/* 調整列表符號和文字的間距 */ | |
.tooltip-text ul { | |
margin: 0; | |
padding-left: 15px; /* 減少列表符號的縮進 */ | |
} | |
.tooltip-text li { | |
margin-bottom: 1px; /* 減少列表項目間的間距 */ | |
} | |
.tooltip-text br { | |
line-height: 1.2; /* 減少行距 */ | |
} | |
.tooltip .tooltip-text::after { | |
content: ""; | |
position: absolute; | |
top: 100%; | |
left: 20%; /* 調整箭頭位置 */ | |
margin-left: -5px; | |
border-width: 5px; | |
border-style: solid; | |
border-color: rgba(44, 62, 80, 0.95) transparent transparent transparent; | |
} | |
.tooltip-left .tooltip-text::after { | |
left: 20%; | |
} | |
/* 右側箭頭 */ | |
.tooltip-right .tooltip-text::after { | |
left: 80%; | |
} | |
.tooltip:hover .tooltip-text { | |
visibility: visible; | |
opacity: 1; | |
} | |
.tooltip .tooltip-text::after { | |
content: ""; | |
position: absolute; | |
top: 100%; | |
left: 50%; | |
transform: translateX(-50%); | |
border-width: 8px; | |
border-style: solid; | |
border-color: rgba(44, 62, 80, 0.95) transparent transparent transparent; | |
} | |
.uncertainty-mode .tooltip .tooltip-text { | |
position: absolute; | |
left: 100%; | |
bottom: auto; | |
top: 50%; | |
transform: translateY(-50%); | |
margin-left: 10px; | |
z-index: 1000; /* 確保提示框在最上層 */ | |
} | |
.uncertainty-mode .tooltip .tooltip-text::after { | |
content: ""; | |
position: absolute; | |
top: 50%; | |
right: 100%; | |
transform: translateY(-50%); | |
border-width: 5px; | |
border-style: solid; | |
border-color: transparent rgba(44, 62, 80, 0.95) transparent transparent; | |
} | |
.uncertainty-mode .breed-content { | |
font-size: 1rem !important; /* 增加字體大小 */ | |
} | |
.description-section, | |
.description-section p, | |
.temperament-section, | |
.temperament-section .value, | |
.info-item, | |
.info-item .value, | |
.breed-content { | |
font-size: 1rem !important; /* 使用 !important 確保覆蓋其他樣式 */ | |
} | |
.recommendation-card { | |
margin-bottom: 40px; | |
} | |
.compatibility-scores { | |
background: #f8f9fa; | |
padding: 24px; | |
border-radius: 12px; | |
margin: 20px 0; | |
} | |
.score-item { | |
margin: 15px 0; | |
} | |
.progress-bar { | |
height: 12px; | |
background-color: #e9ecef; | |
border-radius: 6px; | |
overflow: hidden; | |
margin: 8px 0; | |
} | |
.progress { | |
height: 100%; | |
background: linear-gradient(90deg, #34C759, #30B350); | |
border-radius: 6px; | |
transition: width 0.6s ease; | |
} | |
.percentage { | |
float: right; | |
color: #34C759; | |
font-weight: 600; | |
} | |
.breed-details-section { | |
margin: 30px 0; | |
} | |
.subsection-title { | |
font-size: 1.2em; | |
color: #2c3e50; | |
margin-bottom: 20px; | |
display: flex; | |
align-items: center; | |
gap: 8px; | |
} | |
.details-grid { | |
display: grid; | |
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
gap: 20px; | |
background: #f8f9fa; | |
padding: 20px; | |
border-radius: 12px; | |
border: 1px solid #e1e4e8; | |
} | |
.detail-item { | |
background: white; | |
padding: 15px; | |
border-radius: 8px; | |
border: 1px solid #e1e4e8; | |
} | |
.description-text { | |
line-height: 1.8; | |
color: #444; | |
margin: 0; | |
padding: 24px 30px; /* 調整內部間距,從 20px 改為 24px 30px */ | |
background: #f8f9fa; | |
border-radius: 12px; | |
border: 1px solid #e1e4e8; | |
text-align: justify; /* 添加文字對齊 */ | |
word-wrap: break-word; /* 確保長文字會換行 */ | |
word-spacing: 1px; /* 加入字間距 */ | |
} | |
/* 工具提示改進 */ | |
.tooltip { | |
position: relative; | |
display: inline-flex; | |
align-items: center; | |
gap: 4px; | |
cursor: help; | |
padding: 5px 0; | |
} | |
.tooltip .tooltip-text { | |
visibility: hidden; | |
width: 280px; | |
background-color: rgba(44, 62, 80, 0.95); | |
color: white; | |
text-align: left; | |
border-radius: 8px; | |
padding: 12px 15px; | |
position: absolute; | |
z-index: 1000; | |
bottom: calc(100% + 15px); | |
left: 50%; | |
transform: translateX(-50%); | |
opacity: 0; | |
transition: all 0.3s ease; | |
font-size: 14px; | |
line-height: 1.4; | |
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); | |
white-space: normal; | |
} | |
.tooltip:hover .tooltip-text { | |
visibility: visible; | |
opacity: 1; | |
} | |
.score-badge { | |
background-color: #34C759; | |
color: white; | |
padding: 6px 12px; | |
border-radius: 20px; | |
font-size: 0.9em; | |
margin-left: 10px; | |
font-weight: 500; | |
box-shadow: 0 2px 4px rgba(52, 199, 89, 0.2); | |
} | |
.bonus-score .tooltip-text { | |
width: 250px; | |
line-height: 1.4; | |
padding: 10px; | |
} | |
.bonus-score .progress { | |
background: linear-gradient(90deg, #48bb78, #68d391); | |
} | |
.health-section { | |
margin: 25px 0; | |
padding: 24px; | |
background-color: #f8f9fb; | |
border-radius: 12px; | |
border: 1px solid #e1e4e8; | |
} | |
.health-section .subsection-title { | |
font-size: 1.3em; | |
font-weight: 600; | |
margin-bottom: 20px; | |
display: flex; | |
align-items: center; | |
gap: 8px; | |
color: #2c3e50; | |
} | |
.health-info { | |
background-color: white; | |
padding: 24px; | |
border-radius: 8px; | |
margin: 15px 0; | |
border: 1px solid #e1e4e8; | |
} | |
.health-details { | |
font-size: 1.1rem; | |
line-height: 1.6; | |
} | |
.health-details h4 { | |
color: #2c3e50; | |
font-size: 1.15rem; | |
font-weight: 600; | |
margin: 20px 0 15px 0; | |
} | |
.health-details h4:first-child { | |
margin-top: 0; | |
} | |
.health-details ul { | |
list-style-type: none; | |
padding-left: 0; | |
margin: 0 0 25px 0; | |
} | |
.health-details ul li { | |
margin-bottom: 12px; | |
padding-left: 20px; | |
position: relative; | |
} | |
.health-details ul li:before { | |
content: "•"; | |
position: absolute; | |
left: 0; | |
color: #2c3e50; | |
} | |
.health-item:before { | |
content: "•"; | |
color: #dc3545; | |
font-weight: bold; | |
} | |
.health-item.screening:before { | |
color: #28a745; | |
} | |
/* 區塊間距 */ | |
.health-block, .noise-block { | |
margin-bottom: 24px; | |
} | |
.health-disclaimer { | |
margin-top: 20px; | |
padding-top: 20px; | |
border-top: 1px solid #e1e4e8; | |
} | |
.health-disclaimer p { | |
margin: 6px 0; | |
padding-left: 20px; | |
position: relative; | |
color: #888; /* 統一設定灰色 */ | |
font-size: 0.95rem; | |
line-height: 1.5; | |
font-style: italic; | |
} | |
.health-disclaimer p:before { | |
content: "›"; | |
position: absolute; | |
left: 0; | |
color: #999; | |
font-style: normal; | |
font-weight: 500; | |
} | |
.health-disclaimer p:first-child { | |
font-style: normal; /* 取消斜體 */ | |
font-weight: 500; /* 加粗 */ | |
color: #666; /* 稍深的灰色 */ | |
} | |
.health-disclaimer p span, | |
.health-disclaimer p strong, | |
.health-disclaimer p em { | |
color: inherit; | |
} | |
.health-list li:before { | |
content: "•"; | |
color: #dc3545; | |
} | |
.history-container { | |
max-width: 800px; | |
margin: 0 auto; | |
padding: 20px; | |
} | |
.history-entry { | |
background-color: #f8f9fa; | |
border-radius: 8px; | |
padding: 15px; | |
margin-bottom: 20px; | |
box-shadow: 0 1px 3px rgba(0,0,0,0.1); | |
} | |
.history-header { | |
display: flex; | |
justify-content: space-between; | |
align-items: center; | |
margin-bottom: 10px; | |
padding-bottom: 10px; | |
border-bottom: 1px solid #eee; | |
} | |
.timestamp { | |
color: #666; | |
font-size: 0.9em; | |
} | |
.delete-btn { | |
background: none; | |
border: none; | |
cursor: pointer; | |
font-size: 1.2em; | |
padding: 5px; | |
} | |
.delete-btn:hover { | |
color: #dc3545; | |
} | |
.search-params ul { | |
list-style: none; | |
padding-left: 20px; | |
} | |
.search-params li { | |
margin: 5px 0; | |
color: #555; | |
} | |
.top-results ol { | |
padding-left: 25px; | |
} | |
.top-results li { | |
margin: 5px 0; | |
color: #333; | |
} | |
.breed-item { | |
display: flex; | |
justify-content: space-between; | |
align-items: center; | |
padding: 12px 16px; | |
margin: 8px 0; | |
background-color: white; | |
border-radius: 6px; | |
border: 1px solid #e1e4e8; | |
transition: all 0.2s ease; | |
} | |
.breed-item:hover { | |
transform: translateX(5px); | |
box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
} | |
.breed-rank { | |
font-weight: 600; | |
color: #666; | |
margin-right: 12px; | |
min-width: 30px; | |
} | |
.breed-name { | |
flex: 1; | |
font-weight: 500; | |
color: #2c3e50; | |
padding: 0 12px; | |
} | |
.breed-score { | |
font-weight: 600; | |
color: #34C759; | |
padding: 4px 8px; | |
border-radius: 20px; | |
background-color: rgba(52, 199, 89, 0.1); | |
min-width: 70px; | |
text-align: center; | |
} | |
.history-entry { | |
background-color: #f8f9fa; | |
border-radius: 12px; | |
padding: 20px; | |
margin-bottom: 25px; | |
box-shadow: 0 2px 8px rgba(0,0,0,0.05); | |
border: 1px solid #e1e4e8; | |
} | |
.history-header { | |
margin-bottom: 15px; | |
padding-bottom: 12px; | |
border-bottom: 1px solid #e1e4e8; | |
} | |
.history-header .timestamp { | |
color: #666; | |
font-size: 0.9em; | |
display: flex; | |
align-items: center; | |
gap: 6px; | |
} | |
h4 { | |
color: #2c3e50; | |
font-size: 1.15rem; | |
font-weight: 600; | |
margin: 20px 0 12px 0; | |
} | |
.params-list ul { | |
list-style: none; | |
padding-left: 0; | |
margin: 10px 0; | |
} | |
.params-list li { | |
margin: 8px 0; | |
color: #4a5568; | |
display: flex; | |
align-items: center; | |
} | |
.empty-history { | |
text-align: center; | |
padding: 40px 20px; | |
color: #666; | |
font-size: 1.1em; | |
background-color: #f8f9fa; | |
border-radius: 12px; | |
border: 1px dashed #e1e4e8; | |
margin: 20px 0; | |
} | |
.noise-section { | |
margin: 25px 0; | |
padding: 24px; | |
background-color: #f8f9fb; | |
border-radius: 12px; | |
border: 1px solid #e1e4e8; | |
} | |
.noise-info { | |
background-color: white; | |
padding: 24px; | |
border-radius: 8px; | |
margin: 15px 0; | |
border: 1px solid #e1e4e8; | |
} | |
.noise-details { | |
font-size: 1.1rem; | |
line-height: 1.6; | |
} | |
.noise-level { | |
margin-bottom: 20px; | |
padding: 10px 15px; | |
background: #f8f9fa; | |
border-radius: 6px; | |
font-weight: 500; | |
} | |
.noise-level-block { | |
background: #f8f9fa; | |
padding: 20px; | |
border-radius: 8px; | |
margin: 20px 0; | |
} | |
.noise-level-display { | |
background: #f8f9fa; | |
padding: 16px; | |
border-radius: 8px; | |
margin: 16px 0; | |
} | |
.level-indicator { | |
background: white; | |
padding: 12px 16px; | |
border-radius: 8px; | |
border: 1px solid #e1e4e8; | |
display: flex; | |
align-items: center; | |
justify-content: space-between; | |
} | |
.level-text { | |
font-weight: 500; | |
color: #2c3e50; | |
} | |
.level-bars { | |
display: flex; | |
gap: 4px; | |
} | |
.level-bars .bar { | |
width: 4px; | |
height: 16px; | |
background: #e9ecef; | |
border-radius: 2px; | |
} | |
.level-indicator.low .bar:nth-child(1) { | |
background: #4CAF50; | |
} | |
.level-indicator.medium .bar:nth-child(1), | |
.level-indicator.medium .bar:nth-child(2) { | |
background: #FFA726; | |
} | |
.level-indicator.high .bar { | |
background: #EF5350; | |
} | |
.feature-list, .health-list, .screening-list { | |
list-style: none; | |
padding: 0; | |
margin: 16px 0; | |
display: grid; | |
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); | |
gap: 12px; | |
} | |
.feature-list li, .health-list li, .screening-list li { | |
background: white; | |
padding: 12px 16px; | |
border-radius: 6px; | |
border: 1px solid #e1e4e8; | |
display: flex; | |
align-items: center; | |
gap: 8px; | |
font-size: 0.95rem; | |
} | |
.feature-list li:before { | |
content: "•"; | |
color: #2c3e50; | |
} | |
.noise-notes { | |
font-family: inherit; | |
white-space: pre-wrap; | |
margin: 15px 0; | |
padding: 0; | |
background: transparent; | |
border: none; | |
font-size: 1.1rem; | |
line-height: 1.6; | |
color: #333; | |
} | |
.characteristics-block, .health-considerations, .health-screenings { | |
margin-bottom: 24px; | |
} | |
.characteristics-block h4, .health-considerations h4, .health-screenings h4 { | |
color: #2c3e50; | |
font-size: 1.1em; | |
font-weight: 600; | |
margin-bottom: 12px; | |
} | |
.characteristics-list, | |
.triggers-list, | |
.health-considerations-list, | |
.health-screenings-list { | |
display: grid; | |
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
gap: 12px; | |
margin: 16px 0; | |
} | |
.noise-details, .health-details { | |
font-size: 1.1rem; | |
line-height: 1.6; | |
} | |
.noise-details ul, .health-details ul { | |
list-style: none; | |
padding-left: 0; | |
margin: 0 0 20px 0; | |
} | |
.noise-details li, .health-details li { | |
padding-left: 20px; | |
position: relative; | |
margin-bottom: 10px; | |
line-height: 1.5; | |
} | |
.noise-details li:before, .health-details li:before { | |
content: "•"; | |
position: absolute; | |
left: 0; | |
color: #666; | |
} | |
.noise-section, .health-section { | |
margin: 25px 0; | |
padding: 24px; | |
background-color: #f8f9fb; | |
border-radius: 12px; | |
border: 1px solid #e1e4e8; | |
} | |
.noise-info, .health-info { | |
background-color: white; | |
padding: 24px; | |
border-radius: 8px; | |
margin: 15px 0; | |
border: 1px solid #e1e4e8; | |
} | |
.breed-info .description-tooltip { | |
position: relative; | |
display: inline-flex; | |
align-items: center; | |
gap: 4px; | |
cursor: help; | |
} | |
.description-tooltip .tooltip-icon { | |
font-size: 14px; | |
color: #666; | |
margin-left: 4px; | |
cursor: help; | |
} | |
.description-tooltip .tooltip-text { | |
visibility: hidden; | |
width: 280px; | |
background-color: rgba(44, 62, 80, 0.95); | |
color: white; | |
text-align: left; | |
border-radius: 8px; | |
padding: 12px 15px; | |
position: absolute; | |
z-index: 1000; | |
bottom: calc(100% + 15px); | |
left: 50%; | |
transform: translateX(-50%); | |
opacity: 0; | |
transition: all 0.3s ease; | |
font-size: 14px; | |
line-height: 1.4; | |
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); | |
white-space: normal; | |
} | |
.description-tooltip:hover .tooltip-text { | |
visibility: visible; | |
opacity: 1; | |
} | |
.description-tooltip .tooltip-text::after { | |
content: ""; | |
position: absolute; | |
top: 100%; | |
left: 50%; | |
transform: translateX(-50%); | |
border-width: 8px; | |
border-style: solid; | |
border-color: rgba(44, 62, 80, 0.95) transparent transparent transparent; | |
} | |
.description-header { | |
display: flex; | |
align-items: center; | |
gap: 8px; | |
margin-bottom: 10px; | |
} | |
.description-header h3 { | |
margin: 0; | |
font-size: 1.2em; | |
color: #2c3e50; | |
} | |
.screening-list li:before { | |
content: "•"; | |
color: #28a745; | |
} | |
.noise-disclaimer, .health-disclaimer { | |
margin-top: 20px; | |
padding-top: 20px; | |
border-top: 1px solid #e1e4e8; | |
color: #666; | |
} | |
.noise-disclaimer p, .health-disclaimer p { | |
margin: 8px 0; | |
padding-left: 20px; | |
position: relative; | |
} | |
.noise-disclaimer p:before, .health-disclaimer p:before { | |
content: "›"; | |
position: absolute; | |
left: 0; | |
color: #999; | |
} | |
.disclaimer-text { | |
margin: 8px 0; | |
padding-left: 20px; | |
position: relative; | |
font-size: 0.95rem; | |
line-height: 1.5; | |
font-style: italic; | |
color: #888; | |
} | |
.disclaimer-text:before { | |
content: "›"; | |
position: absolute; | |
left: 0; | |
color: #999; | |
font-style: normal; | |
font-weight: 500; | |
} | |
.list-item { | |
background: white; | |
padding: 12px 16px; | |
border-radius: 8px; | |
border: 1px solid #e1e4e8; | |
display: flex; | |
align-items: center; | |
gap: 8px; | |
margin: 4px 0; | |
font-size: 0.95rem; | |
color: #2c3e50; | |
} | |
.source-text { | |
font-style: normal !important; | |
font-weight: 500 !important; | |
color: #666 !important; | |
} | |
.health-grid, .noise-grid { | |
display: grid; | |
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); | |
gap: 12px; | |
margin: 16px 0; | |
} | |
.health-item, .noise-item { | |
background: white; | |
padding: 12px 16px; | |
border-radius: 8px; | |
border: 1px solid #e1e4e8; | |
display: flex; | |
align-items: center; | |
gap: 8px; | |
transition: all 0.2s ease; | |
} | |
.health-item:hover, .noise-item:hover { | |
transform: translateY(-1px); | |
box-shadow: 0 2px 4px rgba(0,0,0,0.05); | |
} | |
@media (max-width: 768px) { | |
/* 在小螢幕上改為單列顯示 */ | |
.health-grid, .noise-grid { | |
grid-template-columns: 1fr; | |
} | |
/* 減少內邊距 */ | |
.health-section, .noise-section { | |
padding: 16px; | |
} | |
/* 調整字體大小 */ | |
.section-header { | |
font-size: 1rem; | |
} | |
/* 調整項目內邊距 */ | |
.health-item, .noise-item { | |
padding: 10px 14px; | |
} | |
} | |
/* 較小的手機螢幕 */ | |
@media (max-width: 480px) { | |
.health-grid, .noise-grid { | |
gap: 8px; | |
} | |
.health-item, .noise-item { | |
padding: 8px 12px; | |
font-size: 0.9rem; | |
} | |
} | |
.expandable-section { | |
margin-top: 1rem; | |
} | |
.expand-header { | |
cursor: pointer; | |
padding: 0.5rem; | |
background-color: #f3f4f6; | |
border-radius: 0.375rem; | |
display: flex; | |
justify-content: space-between; | |
align-items: center; | |
} | |
.expand-header:hover { | |
background-color: #e5e7eb; | |
} | |
.expand-icon { | |
transition: transform 0.2s; | |
} | |
.expandable-section[open] .expand-icon { | |
transform: rotate(180deg); | |
} | |
.expanded-content { | |
padding: 1rem; | |
background-color: #ffffff; | |
border-radius: 0.375rem; | |
margin-top: 0.5rem; | |
} | |
.info-cards > div:first-child .tooltip .tooltip-text, | |
.info-cards > div:nth-child(3n+1) .tooltip .tooltip-text { | |
left: calc(100% + 20px); /* 向右移動更多 */ | |
} | |
.info-cards > div:first-child .tooltip .tooltip-text::after, | |
.info-cards > div:nth-child(3n+1) .tooltip .tooltip-text::after { | |
right: calc(100% - 2px); /* 向右移動箭頭 */ | |
} | |
.section-header h3 .tooltip .tooltip-text { | |
left: calc(100% + 20px); /* 向右移動更多 */ | |
} | |
.section-header h3 .tooltip .tooltip-text::after { | |
right: calc(100% - 2px); /* 向右移動箭頭 */ | |
} | |
""" |