calefaction/static/campaigns.css

#campaigns-select {
    display: inline-block;
    padding-right: 1em;
    background: transparent 100% 50%/contain no-repeat;
    border-width: 1px;
}

#campaigns-select select {
    max-width: 120px;
    padding: 0 0.25em;
    font-size: 100%;
    color: inherit;
    background: transparent;
    border: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

h2 .disabled {
    color: #989898;
    text-decoration: line-through;
}

h2 .disabled-info {
    margin-left: 0.5em;
    color: #989898;
    font-size: 85%;
    font-variant: none;
}

.breadcrumb {
    margin-top: 1em;
    font-size: 90%;
}

.breadcrumb::after {
    content: "»";
}

#operations {
    margin-bottom: 1em;
}

#operations section {
    display: flex;
}

.operation {
    flex: 1;
}

.operation .primary .num {
    height: 60px;
    line-height: 60px;
}

.operation .big {
    font-size: 300%;
}

.operation .medium {
    font-size: 200%;
}

.operation .small {
    font-size: 150%;
}

.operation .secondary {
    font-size: 105%;
}

.operation .unit {
    font-style: italic;
}

.operation .summary {
    font-size: 14px;
}

.operation .summary .head {
    margin-top: 1em;
    font-weight: normal;
}

.operation .summary .contents {
    position: relative;
    margin-top: 0.5em;
    border: 1px solid #282828;
}

.operation .board {
    border-spacing: 0;
    border-collapse: collapse;
    text-align: left;
}

.operation .board:not(.expanded) tr:nth-child(2n) {
    background-color: #181818;
}

.operation .board:not(.expanded) tr:nth-child(2n+1) {
    background-color: #0A0A0A;
}

.operation .board td {
    padding: 0.25em 0;
}

.operation .board td:first-child {
    padding-left: 1em;
}

.operation .board td:last-child {
    padding-right: 1em;
}

.operation .board .fluid {
    padding-right: 0.5em;
}

.operation:not(.detail) .board .icon {
    width: 46px;
}

.operation.detail .board .icon {
    width: 52px;
}

.operation .board.expanded {
    position: absolute;
    z-index: 1;
    transition: clip-path 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    clip-path: inset(0 100% 0 0);
}

.operation:not(.detail) .board:not(.expanded) .extra {
    display: none;
}

.operation .board.expanded .spacer {
    display: none;
}

.operation .board img {
    vertical-align: middle;
}

.operation:not(.detail) .board img {
    width: 42px;
    height: 42px;
}

.operation.detail .board img {
    width: 48px;
    height: 48px;
}

.operation .board abbr {
    border-bottom: none;
}

.operation .board a:hover {
    text-decoration: none;
}

.operation .itemboard td:last-child {
    padding-left: 0.5em;
    text-align: right;
}

.operation .itemboard .count {
    font-weight: bold;
}

.operation .itemboard .count::before {
    content: "×";
    font-weight: normal;
    color: #AAA;
}

.operation.detail {
    margin-bottom: 1em;
}

.operation.detail .overview {
    margin-left: 1em;
}

.operation.detail .primary, .operation.detail .primary .unit {
    display: inline-block;
}

.operation.detail .unit {
    margin-left: 0.15em;
}

.operation.detail .contents, .operation.detail .board:not(.expanded) {
    width: 100%;
}

.operation.detail .detail-item {
    padding-left: 0.5em;
}

.operation.detail .detail-list > :not(:last-child)::after {
    margin-left: 0.25em;
    content: "/";
    color: #AAA;
}

.last-updated {
    margin-bottom: 1em;
    font-size: 90%;
    font-style: italic;
}

@media (min-width: 800px) {
    #operations {
        margin: 1em 0;
    }

    #operations section {
        margin-bottom: 2em;
    }

    .operation:not(.detail) {
        margin: 0 0.75em;
        text-align: center;
    }

    .operation:not(.detail) .secondary {
        margin-top: 0.5em;
    }

    .operation .secondary .unit {
        margin-left: 0.15em;
    }

    .operation .summary .contents {
        display: inline-block;
        margin-bottom: -4px;
    }
}

@media (max-width: 799px) {
    #operations section {
        flex-direction: column;
    }

    .operation {
        margin: 0.5em 0;
    }

    .operation .overview {
        margin-left: 1em;
    }

    .operation .primary, .operation .primary .unit {
        display: inline-block;
    }

    .operation .unit {
        margin-left: 0.15em;
    }

    .operation .board:not(.expanded) {
        width: 100%;
    }
}