client/src/app/device/device.component.scss - master - tisit/FUXA_SCADA

client/src/app/device/device.component.scss
158 строк3 KB
Umberto Nocelli
Upgrade Angular from v16 to v17 (#2113)
08 янв 2026, 21:56
08 янв 2026, 21:56905235d
:host {
    .header-panel {
        /* z-index: 9999 !important; */
        top: 0px;
        left: 0px;
        background-color: var(--headerBackground);
        color: var(--headerColor);
        height: 36px;
        width: 100%;
        text-align: center;
        line-height: 36px;
        border-bottom: 1px solid var(--headerBorder);

        mat-icon {
            display: inline-block;
            vertical-align: text-top;
        }
    }

    .device-btn {
        height: 34px;
        width: 34px;
        min-width: unset !important;
        padding:unset !important;
        line-height: 34px;
        margin-left: 5px;
        margin-right: 5px;
        float: right;
    }

    .device-btn mat-icon {
        font-size: 24px;
        height: unset;
        width: unset;
    }

    .work-panel {
        position: absolute;
        top: 37px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        overflow: auto;
        background-color: var(--workPanelBackground);
    }

    .mat-table {
        overflow: auto;
        /* min-width: 1500px; */
        height: 100%;
    }

    .mat-row {
        min-height: 34px;
        height: 34px;
        border-bottom-color: rgba(0,0,0,0.06);
    }

    .mat-cell {
        font-size: 13px;
    }

    .mat-cell ::ng-deep .mat-checkbox-inner-container {
        height: 16px;
        width: 16px;
        margin-left: 2px;
    }

    .mat-header-row {
        top: 0;
        position: sticky;
        z-index: 1;
        /* background-color: rgba(0,0,0,0.7); */
        /* background-color: rgb(30, 30, 30); */
        /* color: white; */
    }
    .mat-header-cell {
        /* color: white; */
        font-size: 11px;
    }

    .mat-column-toogle {
        overflow: visible;
        flex: 0 0 40px;
    }

    .mat-column-name {
        flex: 0 0 220px;
    }

    .mat-column-address {
        flex: 0 0 380px;
    }

    .mat-column-device {
        flex: 0 0 220px;
    }

    .mat-column-select {
        flex: 0 0 40px;
    }

    .my-header-filter ::ng-deep .mat-sort-header-content {
        display: unset;
        text-align: left;
    }

    .my-header-filter ::ng-deep .mat-sort-header-button {
        display: block;
        text-align: left;
        margin-top: 5px;
    }

    .my-header-filter span {
        padding-left: 5px;

    }

    .my-header-filter ::ng-deep .mat-sort-header-arrow {
        /* color: white; */
        top: -14px;
        right: 20px;
    }

    .my-header-filter-input {
        display: block;
        margin-top: 4px;
        margin-bottom: 6px;
        /* color: white; */
        padding: 3px 1px 3px 2px;
        border-radius: 2px;
        border: 1px solid var(--formInputBackground);
        background-color: var(--formInputBackground);
        color: var(--formInputColor);
    }

    .my-header-filter-input:focus {
        padding: 3px 1px 3px 2px;
        border: 1px solid var(--formInputBorderFocus);
        background-color: var(--formInputBackgroundFocus);
    }

    .fab-reload {
        position: fixed !important;
        right: 10px !important;
        top: 40px !important;
        z-index: 9999 !important;
        color: var(--headerColor);
    }

    .fab-reload-active {
        transform: rotate(360deg);
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }
}