// 案件區塊漸層顏色 $map-color: ( Style1-1: #f5576b, Style1-2: #FEC03F, Style2-1: #3FED95, Style2-2: #16a6ff, Style3-1: #004FD3, Style3-2: #2CCDFF, Style4-1: #DE5389, Style4-2: #A74DD0, Style5-1: #FF7BAB, Style5-2: #f73e52, Style6-1: #A9ED39, Style6-2: #A9ED39, Style7-1: #49BAF0, Style7-2: #49BAF0, Style8-1: #C139ED, Style8-2: #8639ED, Style9-1: #FFDE7F, Style9-2: #FF842F, Style10-1: #00BBBA, Style10-2: #00B863 ); @media (prefers-color-scheme: light) { $map-color: ( Style1-1: #D4808F, Style1-2: #C95F59, Style2-1: #DE749D, Style2-2: #D6635C, Style3-1: #E1C0B3, Style3-2: #E6986A, Style4-1: #DEE1AE, Style4-2: #DFC333, Style5-1: #5AE5C7, Style5-2: #65C581, Style6-1: #53E3FB, Style6-2: #00A7C7, Style7-1: #A6C0E8, Style7-2: #4664BA, Style8-1: #A2A3E4, Style8-2: #9156FC, Style9-1: #ADAEFF, Style9-2: #7E71FB, Style10-1: #A9ED39, Style10-2: #A9ED39 ); } @for $i from 1 through 10 { .card-style-#{$i} { border: 2px solid white; border-radius: 25px; $color1: map-get($map-color, Style#{$i}-1); $color2: map-get($map-color, Style#{$i}-2); background: linear-gradient(90deg, $color1, $color2); font-size: 22px; color: #fff; // -webkit-text-stroke: 0.8px #000; } } .card-title { font-size: 22px; color: #fff; // -webkit-text-stroke: 0.6px #000; } .canvas-container { position: relative; perspective: 1000px; } .canvas { transform: rotateX(60deg); } @media (prefers-color-scheme: dark) { #chartdiv { background-color: #212529; color: #ffffff; width: 100%; max-height: 550px; height: 100vh; } } @media (prefers-color-scheme: light) { #chartdiv { background-color: #212529; color: #ffffff; width: 100%; max-height: 550px; height: 100vh; } }