Leader.DriveThru/bin/wwwroot/css/order.scss

$width: 1024px;
$height: 768px;
$main-font: Arial,'Times New Roman','Microsoft Himalaya', sans-serif; /*Arial;*/ /*基礎字形*/
$page-font: 'Times New Roman',Arial, sans-serif;

.d-none {
    display: none !important;
}


html, body, .root {
    margin: 0;
    padding: 0;
    width: $width;
    height: $height;
    position: relative;
    overflow: hidden; /* **防止頁面拖動** */
    display: flex;
    background-attachment: fixed; /* 背景固定 */
    z-index: -1;
    font-family: $main-font;
    color: #492718; /*基礎文字顏色*/
}

.fadeIn {
    animation-name: fadeIn;
    animation-duration: 500ms;
}

.no-drag {
    user-select: none; /* 禁止文本选择 */
    pointer-events: auto; /* 允许鼠标事件 */
    -webkit-user-drag: none; /* 禁止拖动（在 WebKit 浏览器中） */
    user-drag: none; /* 禁止拖动（在 Firefox 中） */
}

.home {
    position: absolute;
    top: 0;
    left: 0;
    width: 1024px;
    height: 768px;
    user-select: none;

    .title {
        flex: 1;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        background-color: #FFFFFF;
        height: 68px;

        .icon {
            width: 100px;
            font-size: 45px;
            color: #020202 !important;
        }

        .logo {
            width: 150px;
            height: 50px;
            display: block;
            right: 0px;
            margin-left: auto;
        }
    }

    .Items {
        flex: 9;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        height: 700px;


        .schedule_css,
        .schedule_css_error {
            position: fixed !important;
            top: 68px !important;
            left: 0 !important;
            width: 1024px !important;
            background-color: rgba(0, 0, 0, 0.5) !important;
            z-index: 100 !important;
            justify-items: center !important;
            align-content: center !important;
        }

        .schedule_css {
            height: 475px !important;

            .title {
                font-size: 20px;
                text-align: center;
                margin-bottom: 30px;
                height: 25px;
            }
        }

        .schedule_css_error {
            height: 700px !important;
        }


        .sidebar {
            background-color: rgba(133, 170, 110, 0.9) !important;
            background-color: #494949;
            position: fixed !important;
            top: 68px;
            left: 0px;
            overflow: hidden;
            z-index: 100 !important;
            height: 700px !important;
            overflow-y: auto;
            overflow-x: hidden;
            scrollbar-width: none;
            -ms-overflow-style: none;

            &.show {
                width: 370px !important;
            }

            &.hidden {
                width: 0px !important;
            }

            .img {
                width: 55px;
                height: 35px;
                opacity: 0.9;
                border-radius: 10px;
                margin-right: 15px;
            }

            .list {
                font-weight: bold;
                font-size: 20px;
                width: 240px;
                margin: 5px;
                margin-top: 10px;
            }


            .btn {
                border: 2px solid antiquewhite;
                width: 133.5px;
                height: 130.2px;
                border-radius: 10px;
            }
        }

        .sidebar_mask {
            position: fixed !important;
            top: 68px;
            left: 654px;
            z-index: 100 !important;
            height: 700px !important;
            background-color: rgba(0, 0, 0, 0.5) !important;

            &.show {
                width: 654px !important;
                left: 370px !important;
            }

            &.hidden {
                width: 0px !important;
                left: 0px !important;
            }
        }

        .item_menu {
            display: flex;
            flex-direction: column;
            height: 700px;

            .F_items {
                flex: 7;
                display: flex;
                flex-wrap: wrap;
                width: 1024px;
                background-color: #494949;
                width: 1024px;
                border-right: 1px solid #797979;
                position: relative;
                overflow-y: auto;
                overflow-x: hidden;
                scrollbar-width: none;
                -ms-overflow-style: none;

                .detial {
                    margin: 5.5px;
                    width: 192px;
                    height: 225px;
                    border-radius: 20px;
                    
                    text-align: center;
                    position: relative;

                    .image {
                        box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.3);
                        width: 126px;
                        height: 126px;
                        object-fit: cover;
                        display: block;
                        border-radius: 30%;
                        margin: auto;
                    }

                    .text {
                        color: #3C3C3C;
                        font-size: 25px;
                        font-weight: bold;
                        text-align: center;
                        line-height: 35px;
                    }
                }
            }
            /*.F_ticker {
                flex: 1;
                display: flex;
                align-items: center;
                justify-items: flex-start;
                height: 45px;
                background-color: white;
            }*/

            .F_detials {
                flex: 3;
                display: flex;
                flex-direction: row;
                width: 1024px;
                background-color: #FFFFFF;

                .Icon_css {
                    font-size: 35px !important;
                    color: #C6A971 !important;
                }

                .Icon_css_red {
                    font-size: 35px !important;
                    color: mediumvioletred !important;
                }


                @keyframes blink {
                    0% {
                        opacity: 0;
                    }

                    50% {
                        opacity: 1;
                    }

                    100% {
                        opacity: 0;
                    }
                }

                .flicker-image {
                    background-color: #C6AA71;
                    animation: blink 1s infinite;
                }

                .red {
                    background-color: red;
                }

                .gray {
                    background-color: lightgray;
                }
            }
        }
    }

    .Items2 {
        flex: 9;
        display: flex;
        flex-direction: column;
        //flex-wrap: wrap;
        height: 700px;
    }
}