/* 
    Project: ShinSoft AI Sensor Dome NVR IPCAM
    File: titlebar.css
    Author: Eason Wang
    Created: 2024-10-30
    Description: 上方功能列的專屬樣式

    Version: 1.0.0
    Last Modified: 2024-10-30
    Last Modified By: Eason Wang
    Purpose: 管理所有上方功能列樣式，確保統一管理與響應式設計效果。
    Note: 最佳解析度 1920*1080。測試過的瀏覽器：Chrome,, IE。
*/

/* logo 按鈕的圖片設置 */
.button-logo {
    width: 16.15vw;
    height: 7.41vh;
    background-image: url('../assest/title/logo.png');
    cursor: default; /* 不可點擊 */
}

/* setting 按鈕的圖片設置 */
.button-setting {
    width: 4.6vh;
    height: 4.6vh;
    background-image: url('../assest/title/settings_1.png');
}
.button-setting:hover, .button-setting:active {
    background-image: url('../assest/title/settings_2.png');
}

/* home 按鈕的圖片設置 */
.button-home {
    width: 4.6vh;
    height: 4.6vh;
    background-image: url('../assest/title/home_1.png');
}
.button-home:hover, .button-home:active {
    background-image: url('../assest/title/home_2.png');
}

/* logout 按鈕的圖片設置 */
.button-logout {
    width: 4.6vh;
    height: 4.6vh;
    background-image: url('../assest/title/power_supply_1.png');
}
.button-logout:hover, .button-logout:active {
    background-image: url('../assest/title/power_supply_2.png');
}

/* 影像設定按鈕的圖片設置 */
#button-video_setting { /*中文*/
    width: 14vw;
    height: 7.41vh;
    background-image: url('../assest/title/video_setting_1.png');
}
#button-video_setting:hover, #button-video_setting.active {
    background-image: url('../assest/title/video_setting_2.png');
}
#button-video_setting_EN { /*英文*/
    width: 14vw;
    height: 7.41vh;
    background-image: url('../assest/title/EN/video_setting_1.png');
}
#button-video_setting_EN:hover, #button-video_setting_EN.active {
    background-image: url('../assest/title/EN/video_setting_2.png');
}

/* 儲存設定按鈕的圖片設置 */
#button-save_setting { /*中文*/
    width: 14vw;
    height: 7.41vh;
    background-image: url('../assest/title/save_setting_1.png');
}
#button-save_setting:hover, #button-save_setting.active {
    background-image: url('../assest/title/save_setting_2.png');
}
#button-save_setting_EN { /*英文*/
    width: 14vw;
    height: 7.41vh;
    background-image: url('../assest/title/EN/save_setting_1.png');
}
#button-save_setting_EN:hover, #button-save_setting_EN.active {
    background-image: url('../assest/title/EN/save_setting_2.png');
}

/* 事件設定按鈕的圖片設置 */
#button-event_setting { /*中文*/
    width: 14vw;
    height: 7.41vh;
    background-image: url('../assest/title/event_setting_1.png');
}
#button-event_setting:hover, #button-event_setting.active {
    background-image: url('../assest/title/event_setting_2.png');
}
#button-event_setting_EN { /*英文*/
    width: 14vw;
    height: 7.41vh;
    background-image: url('../assest/title/EN/event_setting_1.png');
}
#button-event_setting_EN:hover, #button-event_setting_EN.active {
    background-image: url('../assest/title/EN/event_setting_2.png');
}

/* 網路設定按鈕的圖片設置 */
#button-network_setting { /*中文*/
    width: 14vw;
    height: 7.41vh;
    background-image: url('../assest/title/network_setting_1.png');
}
#button-network_setting:hover, #button-network_setting.active {
    background-image: url('../assest/title/network_setting_2.png');
}
#button-network_setting_EN { /*英文*/
    width: 14vw;
    height: 7.41vh;
    background-image: url('../assest/title/EN/network_setting_1.png');
}
#button-network_setting_EN:hover, #button-network_setting_EN.active {
    background-image: url('../assest/title/EN/network_setting_2.png');
}

/* 系統設定按鈕的圖片設置 */
#button-system_setting { /*中文*/
    width: 14vw;
    height: 7.41vh;
    background-image: url('../assest/title/system_setting_1.png');
}
#button-system_setting:hover, #button-system_setting.active {
    background-image: url('../assest/title/system_setting_2.png');
}
#button-system_setting_EN { /*英文*/
    width: 14vw;
    height: 7.41vh;
    background-image: url('../assest/title/EN/system_setting_1.png');
}
#button-system_setting_EN:hover, #button-system_setting_EN.active {
    background-image: url('../assest/title/EN/system_setting_2.png');
}