/*
 * ============================================================
 * DCV Web Viewer - Login Page Custom CSS
 * ============================================================
 *
 * 只作用于：
 *
 *     .dcv-login-container
 *     .dcv-login-header
 *
 * 这两个 class 只存在于登录界面。
 *
 * 登录成功进入远程桌面以后：
 *
 *     .dcv-login-container
 *     .dcv-login-header
 *
 * 都会被 React 销毁。
 *
 * 因此不会修改登录后的 DCV Remote Desktop 页面。
 *
 * ============================================================
 */


/* ============================================================
 * 1. 页面基础
 * ============================================================
 */

html,
body {

    height: 100%;

    margin: 0;

    padding: 0;

}


/* ============================================================
 * 2. 登录页面背景
 * ============================================================
 *
 * 只通过 body:has(.dcv-login-container)
 * 判断当前是否处于登录页面。
 *
 * ============================================================
 */

body:has(.dcv-login-container) {

    /*
     * 自定义背景图片
     */
    background-image: url("../images/openapps-bg.jpg") !important;

    /*
     * 以背景图片高度为基准
     *
     * 高度 = 浏览器可视区域高度
     *
     * 宽度按照原始比例自动计算
     */
    background-size: auto 100% !important;

    /*
     * 水平 + 垂直居中
     */
    background-position: center center !important;

    /*
     * 不重复
     */
    background-repeat: no-repeat !important;

    /*
     * 固定背景
     */
    background-attachment: fixed !important;

    /*
     * 背景图片两侧如果存在空白，
     * 使用黑色填充
     */
    background-color: #000000 !important;

    /*
     * DCV 原来的页面背景透明
     */
    --color-background-layout-main-5ilwcb: transparent !important;

    --color-background-layout-main: transparent !important;

    /*
     * 登录页面文字颜色
     */
    --color-text-body-default-vvtq8u: #ffffff !important;

    --color-text-body-secondary-bcbgoi: #ffffff !important;

    --color-text-form-label-6sbm75: #ffffff !important;

    --color-text-label-8248dg: #ffffff !important;

    --color-text-heading-default-izpp46: #ffffff !important;

    --color-text-heading-secondary-iwtvf6: #ffffff !important;

    --color-text-group-label-a2qc05: #ffffff !important;

}


/* ============================================================
 * 3. Root 透明
 * ============================================================
 */

body:has(.dcv-login-container) #root {

    background-color: transparent !important;

}


/*
 * DCV React 外层 div
 */

body:has(.dcv-login-container) #root > div {

    background-color: transparent !important;

}


/* ============================================================
 * 4. 登录窗口
 * ============================================================
 *
 * main.js 中原始位置：
 *
 *     top: 33%
 *     left: 50%
 *     width: 25%
 *
 * 现在只修改位置和宽度。
 *
 * ============================================================
 */

.dcv-login-container {

    /*
     * 取消原来的 25% 宽度
     */
    width: 400px !important;

    /*
     * 最大不能超过屏幕
     */
    max-width: calc(100vw - 40px) !important;

    /*
     * 保持原来的水平居中
     */
    left: 50% !important;

    transform: translateX(-50%) !important;

    -webkit-transform: translateX(-50%) !important;

    /*
     * 原来的 top:33%
     *
     * 改成更适合登录页面的位置。
     */
    top: 20% !important;

    /*
     * 不限制高度
     */
    height: auto !important;

    min-height: 0 !important;

    /*
     * 防止 box model 导致宽度异常
     */
    box-sizing: border-box !important;

}


/* ============================================================
 * 5. 登录窗口内部
 * ============================================================
 */

.dcv-login-container {

    /*
     * 让内部内容按照正常垂直方向排列
     */
    display: block !important;

}


/* ============================================================
 * 6. Logo + Sign in with your credentials
 * ============================================================
 *
 * 这是这次调整的核心。
 *
 * main.js 现在明确生成：
 *
 *     class="dcv-login-header"
 *
 * 所以不再使用：
 *
 *     div:has(> svg...)
 *
 * 这种不稳定的方式。
 *
 * ============================================================
 */

.dcv-login-header {

    /*
     * Logo
     *
     * ↓
     *
     * Sign in with your credentials
     *
     * 使用纵向布局。
     */
    display: flex !important;

    flex-direction: column !important;

    /*
     * 水平居中
     */
    align-items: center !important;

    /*
     * 从上向下排列
     */
    justify-content: flex-start !important;

    /*
     * Logo 与标题之间的距离
     */
    gap: 16px !important;

    /*
     * 宽度
     */
    width: 100% !important;

    /*
     * 自动高度
     */
    height: auto !important;

    min-height: 0 !important;

    /*
     * 不使用 padding
     */
    padding: 0 !important;

    /*
     * 不使用 margin
     */
    margin: 0 !important;

    /*
     * 透明背景
     */
    background: transparent !important;

    /*
     * 防止文字继承奇怪的布局
     */
    white-space: normal !important;

    /*
     * 居中
     */
    text-align: center !important;

    /*
     * box model
     */
    box-sizing: border-box !important;

}


/* ============================================================
 * 7. DCV 原始 Logo SVG
 * ============================================================
 *
 * 不删除 DOM。
 *
 * 只是隐藏。
 *
 * 这样不会影响 React。
 *
 * ============================================================
 */

.dcv-login-header svg {

    display: none !important;

}


/* ============================================================
 * 8. 自定义 Logo
 * ============================================================
 *
 * 使用 openappsLogo0.png。
 *
 * 原图片：
 *
 *     5669 × 872
 *
 * 比例约：
 *
 *     6.5 : 1
 *
 * ============================================================
 */

.dcv-login-header {

    /*
     * 自定义 Logo
     */
    background-image: url("../images/openappsLogo0.png") !important;

    /*
     * 不重复
     */
    background-repeat: no-repeat !important;

    /*
     * Logo 居中
     */
    background-position: center top !important;

    /*
     * 保持图片比例
     */
    background-size: 280px auto !important;

    /*
     * 给 Logo 留出空间
     */
    padding-top: 55px !important;

}


/* ============================================================
 * 9. Sign in with your credentials
 * ============================================================
 *
 * 标题不能和 Logo 重叠。
 *
 * Logo 高度区域：
 *
 *     55px
 *
 * gap：
 *
 *     16px
 *
 * 所以标题从 Logo 下方开始。
 *
 * ============================================================
 */


/*
 * 登录 Header 中除 SVG 外的文字
 */

.dcv-login-header > *:not(svg) {

    /*
     * 不允许绝对定位
     */
    position: static !important;

    /*
     * 正常参与 flex 布局
     */
    flex: 0 0 auto !important;

    /*
     * 自动高度
     */
    height: auto !important;

    /*
     * 不允许重叠
     */
    margin: 0 !important;

}


/*
 * 标题文字
 */

.dcv-login-header [class*="heading"] {

    color: #ffffff !important;

    text-align: center !important;

    white-space: normal !important;

}


/*
 * Header 中的普通文字
 */

.dcv-login-header {

    color: #ffffff !important;

}


/* ============================================================
 * 10. 登录表单
 * ============================================================
 *
 * Header 下面就是：
 *
 * Username
 * Password
 *
 * ============================================================
 */


/*
 * 登录容器内部所有输入框
 */

.dcv-login-container input {

    box-sizing: border-box !important;

    width: 100% !important;

    max-width: 100% !important;

    min-height: 42px !important;

}


/* ============================================================
 * 11. Username
 * ============================================================
 */

.dcv-login-container #username-input {

    width: 100% !important;

    min-height: 42px !important;

    box-sizing: border-box !important;

}


/* ============================================================
 * 12. Password
 * ============================================================
 */

.dcv-login-container #password-input {

    width: 100% !important;

    min-height: 42px !important;

    box-sizing: border-box !important;

}


/* ============================================================
 * 13. 输入框文字
 * ============================================================
 */

.dcv-login-container input {

    color: #ffffff !important;

}


/* ============================================================
 * 14. Placeholder
 * ============================================================
 */

.dcv-login-container input::placeholder {

    color: rgba(255,255,255,0.70) !important;

}


.dcv-login-container input::-webkit-input-placeholder {

    color: rgba(255,255,255,0.70) !important;

}


.dcv-login-container input::-moz-placeholder {

    color: rgba(255,255,255,0.70) !important;

}


/* ============================================================
 * 15. Label
 * ============================================================
 */

.dcv-login-container label {

    color: #ffffff !important;

}


/* ============================================================
 * 16. 表单文字
 * ============================================================
 */

.dcv-login-container [class*="label"] {

    color: #ffffff !important;

}


.dcv-login-container [class*="form-label"] {

    color: #ffffff !important;

}


/* ============================================================
 * 17. 登录按钮
 * ============================================================
 *
 * 不修改按钮的 JS。
 *
 * 只保证可以点击。
 *
 * ============================================================
 */

.dcv-login-container button {

    cursor: pointer !important;

}


/* ============================================================
 * 18. 小屏幕
 * ============================================================
 */

@media (max-width: 600px) {

    .dcv-login-container {

        width: calc(100vw - 40px) !important;

        max-width: calc(100vw - 40px) !important;

        top: 12% !important;

    }


    .dcv-login-header {

        /*
         * 手机 Logo
         */
        background-size: 240px auto !important;

        padding-top: 48px !important;

        gap: 14px !important;

    }

}


/* ============================================================
 * 19. 超小屏幕
 * ============================================================
 */

@media (max-width: 400px) {

    .dcv-login-container {

        width: calc(100vw - 30px) !important;

        max-width: calc(100vw - 30px) !important;

    }


    .dcv-login-header {

        background-size: 210px auto !important;

        padding-top: 42px !important;

    }

}


/* ============================================================
 * 20. 登录页面结束
 * ============================================================
 *
 * 非登录页面：
 *
 *     .dcv-login-container
 *
 * 不存在。
 *
 * 因此本文件中所有登录相关 CSS 都不会影响
 * DCV Remote Desktop。
 *
 * ============================================================
 */