semsportal.com のソースコード

semsportal.com

Custom dark theme styling for GoodWe SEMS Portal
右端で折り返す
/* ==UserStyle==
@name           semsportal.com
@namespace      github.com/openstyles/stylus
@version        202511051
@description    Custom dark theme styling for GoodWe SEMS Portal
@author         shiftgeist
@license        MIT
==/UserStyle== */
/*
 * Adblock filters:
```
||www.semsportal.com/css/views/devicemineight.css$stylesheet
||static.semsportal.com/static/bundles/css/common.css$stylesheet
||www.semsportal.com/Images/banner/default_pw_banner493_223.jpg$image
||www.semsportal.com/Images/icon/3rd_EMS.png$image
```
 */
@-moz-document url-prefix("https://www.semsportal.com/") {
    @media (prefers-color-scheme: dark) {
        :root {
            --main-text: white;
            --gray-900: #181a1b;
            /* --gray-800: color of filter invert */
            --gray-800: #1e1e1e;
            --muted: #beb8b0;
            --filter: invert(0.75) brightness(1.5) contrast(3);
            --panel-inner-space: 8px;
            --panel-outer-space: 12px;
            --nav-height: 60px;
        }
    }
}

@-moz-document url-prefix("https://www.semsportal.com/powerstation/PowerStatusSnMin/") {
    body {
        background: var(--gray-900);
    }

    h5 {
        color: var(--muted) !important;
    }

    .info-right:has(> .goodwe-station-charts) {
        background: var(--gray-800);
    }

    .dash-board {
        background: var(--gray-800);
    }

    .dash-board p {
        padding-top: 5px;
        background: rgba(0, 0, 0, 0.1) !important;
    }

    .goodwe-power-flow,
    .key-api {
        background: transparent !important;
    }

    #acc_menu {
        display: none;
    }

    /* HEADER */
    @supports (backdrop-filter: blur()) or (-webkit-backdrop-filter: blur()) {
        #header {
            background: transparent;
            backdrop-filter: saturate(180%) blur(20px);
        }
    }

    #header {
        height: var(--nav-height);
    }

    #header h1 {
        display: flex;
    }

    @media (max-width: 768px) {
        #header ul,
        #header div,
        #header a {
            display: none;
        }
    }

    @media (max-width: 1100px) {
        #location_bigscreen {
            display: none;
        }
    }

    /* MAIN */
    .sn-min-8 {
        padding: var(--panel-outer-space);
        margin-top: var(--nav-height);
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: var(--panel-outer-space);
    }

    .station-title {
        display: none;
    }


    /* ROWS */
    .row {
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
    }

    .info-left {
        width: 100% !important;
    }

    .info-right {
        width: 100%;
    }

    .row:has(.dashboard-con) {
        height: auto !important;
        width: auto;
        margin-top: unset !important;
        padding-top: 0 !important;
        overflow: unset !important;
    }

    .row:has(.dashboard-con),
    .row:has(.station-detail),
    .dashboard-con,
    .dashboard-con .dash-board,
    .dashboard-con .key-api .kpi-wrapper {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .dashboard-con,
    .dashboard-con .dash-board {
        justify-content: space-evenly;
    }

    .dashboard-con {
        margin-left: 0;
    }

    /* ROW 1 */
    /* Row 1 - Col 1 */
    .search-station {
        display: none;
    }

    .search-station + .row > .info-left {
        display: none;
    }

    /* Row 1 - Col 2 */
    .dashboard-con,
    .dashboard-con .dash-board,
    .dashboard-con .key-api .kpi-wrapper {
        gap: var(--panel-inner-space);
    }

    .dashboard-con .dash-board #power_div,
    .dashboard-con .dash-board #power_div p,
    .dashboard-con .dash-board #power_div span,
    .dashboard-con .dash-board #power_div canvas,
    .dashboard-con .dash-board #battery_div,
    .dashboard-con .dash-board #battery_div .soc-num,
    .dashboard-con .dash-board #battery_div span {
        position: unset;
    }

    .dashboard-con .dash-board .battery_power_div,
    .dashboard-con .dash-board #battery_div {
        margin-top: 0;
    }

    .dashboard-con .dash-board #battery_div {
        height: auto;
    }

    .dashboard-con .dash-board .battery_power_div {
        display: flex;
        flex-direction: column-reverse;
        margin-left: 0;
        height: unset;
    }

    .dashboard-con .dash-board #power_div p {
        width: unset;
    }

    .dashboard-con .dash-board #power_div p,
    .dashboard-con .dash-board #battery_div .soc-num {
        margin-left: auto;
        margin-bottom: unset !important;
    }

    .dashboard-con .dash-board #battery_div .goodwe-battery-1 {
        margin-top: unset;
    }

    .dash-status {
        position: unset;
        flex: 1 0 100%;
    }

    /* Row 1 - Col 3 */
    .dashboard-con .key-api {
        flex: 1 0 300px;
        margin-left: 0;
    }

    .dashboard-con .dash-board {
        padding: var(--panel-inner-space);
        height: 100%;
        width: 100%;
        flex: 1 0 20%;
    }

    .dashboard-con .key-api .kpi-wrapper {
        padding: 0px;
        display: flex;
        flex-wrap: wrap;
    }

    .dashboard-con .key-api .kpi-wrapper::before,
    .dashboard-con .key-api .kpi-wrapper::after {
        display: none;
    }

    .dashboard-con .key-api .kpi-wrapper .kpi-item {
        flex: 1 0 140px;
        margin: 0;
    }

    /* Row 2 */
    .row:has(.station-detail) {
        display: flex;
        flex-direction: column;
        gap: var(--panel-outer-space);
    }

    .row:has(.station-detail) .info-left {
        display: flex;
        flex-wrap: wrap;
        gap: var(--panel-outer-space);
    }

    .row:has(.station-detail) .info-right {
        margin-left: unset;
    }

    .goodwe-station-charts__chart {
        margin-top: 8px;
        height: 400px;
    }

    .goodwe-station-charts__chart canvas {
        filter: var(--filter);
    }

    .station-detail {
        flex: 1 1;
        padding: var(--panel-inner-space);
        height: auto;
        background: var(--gray-800);
    }

    .station-detail-list {
        display: flex;
        flex-direction: column;
        gap: var(--panel-inner-space);
        width: 100%;
    }

    .station-detail-list li {
        color: var(--main-text);
        padding: 0;
        line-height: unset;
        width: 100%;
        white-space: normal;
    }

    .power-station-weather {
        flex: 2 0;
        gap: var(--panel-inner-space);
        display: flex;
        flex-wrap: nowrap;
        white-space: nowrap;
        width: 100%;
        margin-top: 0;
        height: auto;
    }

    .power-station-weather > .weather-today {
        flex: 1 0 100px;
    }

    .power-station-weather > div:not(.weather-today) {
        width: unset !important;
        flex: 1 0 50px;
    }

    .weather-item {
        background: var(--gray-800);
        margin-right: 0;
    }

    .weather-item.weather-today p {
        width: unset !important;
        margin-left: unset !important;
        position: unset !important;
    }

    .weather-item span {
        position: unset !important;
    }

    /* ROW 4 - DEVICES */
    #foot_tab {
        display: none;
    }

    #goodwePowerFlow {
        display: none;
    }

    .device-carousel:has(#data_carousel) {
        display: block !important;
        height: unset !important;
        min-height: 380px;
    }

    .device-carousel:has(#data_carousel) > div {
        height: unset !important;
    }

    .device-carousel-container {
        top: unset !important;
        position: unset !important;
    }

    #data_carousel {
        height: 100% !important;
        position: unset !important;
    }

    .device-carousel:has(#data_carousel) + div {
        display: none;
    }

    .el-carousel__container {
        height: 100%;
        position: unset;
    }

    .el-carousel__item {
        padding: var(--panel-inner-space);
        padding-top: var(--panel-inner-space) !important;
        overflow: unset !important;
        position: unset !important;
    }

    .el-carousel__item > div {
        display: flex;
        flex-direction: column-reverse;
    }

    ._btn_curve,
    ._btn_data {
        position: unset;
    }

    .device-chart {
        margin-left: 0 !important;
        width: 100%;
    }

    .device-item {
        position: static;
        height: unset !important;
        display: flex;
        flex-wrap: wrap;
    }

    .device-item > div {
        padding: var(--panel-inner-space);
    }

    .device-item > .left-list {
        order: 1;
        flex: 1 1 max(33.33%, 200px);
    }

    .device-item > .right-list + div {
        order: 2;
        flex: 1 0 max(33.33%, 250px);
        position: relative;
        min-height: 336px;
    }

    .device-item > .right-list {
        order: 3;
        flex: 1 1 max(33.33%, 200px);
        height: unset !important;
    }

    .left-total-list {
        left: var(--panel-inner-space) !important;
    }

    .el-scrollbar {
        height: unset !important;
    }

    .el-scrollbar__wrap {
        overflow: auto;
    }

    .today-power-center {
        top: 0;
    }

    .scroll-view {
        right: var(--panel-inner-space) !important;
    }

    .device-status-w {
        display: none;
    }

    .device-item .table-list {
        position: unset;
    }

    .device-detail-name {
        display: none;
    }

    .device-item .table-list li {
        display: flex;
    }

    .device-item .table-list li label {
        flex: 0 0 50%;
        width: unset;
        height: unset;
    }

    .device-item .table-list li span:nth-child(2) {
        float: unset;
    }

    .goodwe-scroll-vertical-bar-wrap {
        display: none;
    }
    
    .multi-charts-list, .goodwe-real-scroll {
        height: 200px;
    }

    .goodwe-real-scroll {
        overflow-y: scroll;
        overflow-x: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 180px;
    }
    
    .goodwe-scroll-lisen {
        opacity: 0;
    }
}