smms_law_re/public/scss/dashboard.scss

// 案件區塊漸層顏色


$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;
    }
}