MediaWiki:Common.less/timer.less

From the RuneScape Wiki, the wiki for all things RuneScape
Jump to: navigation, search
.timer-frame {
    border: 1px solid #E4EAEE;
    background-color: white;
    color: #444E5A;
    width: 45em;
}

// for title bar at the very top - bad name but whatever
.timer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #F9FAFA;
    border-bottom: 1px solid #E4EAEE;
    padding: 1em 2em;
}

.current-time {
    font-weight: bold;
    font-size: 1.25em;
    margin-top: -0.4em;
}

.timer-top {
	padding: 1.75em 2em;
}

.timer-main,
.timer-pvm {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 2em;
}

/* set border with css instead of using <hr> because pvm section may be disabled by the user */
.timer-pvm {
    border-top: 1px solid #EDF0F0;
    margin-top: 1.5em;
    padding-top: 1.25em;
}

.timer-bottom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: .8em;
    background: #F9FAFA;
    border-top: 1px solid #E4EAEE;
    padding: 1em 2em;
}

// temporary - remove this block when real buttons are live
.timer-button {
    display: inline-block;
    background: white;
    border: 1px solid black;
    border-radius: .25em;
    padding: .3em .8em;
}

/* ******************
        sections
   ****************** */

.timer-top .section + .section {
    margin-top: 1.25em;
}

/* need more specificity to override h2 defaults */
.timer-frame .section-header {
    font-family: 'IBM Plex Sans';
    font-weight: bold;
    font-size: 1.25em;
    border: none;
    margin: 0 0 .25em;
    padding: 0;
}

.section-minigame {
    white-space: nowrap;
}

/* *****************
      event lists
   ***************** */

.timer-frame .event-list {
    list-style: none;
    margin: 0;
}

/* event row (name, times) */
.event-list .event {
    display: flex;
    line-height: 1.5em;
    border-radius: .25em;
    transition: .2s ease;
    /* keep event names left-aligned while still having padding on left and right */
    padding: .05em .5em;
    margin: 0 -0.5em;
}

/* spacing between rows */
.event-list .event + .event {
    margin-top: .3em;
}

.event-list .event:hover {
    background-color: #F9FAFA;
}

/* event name expands and pushes times to right end */
.event-name {
    flex: 1;
}

.event-byline {
    font-size: .9em;
    color: #949EAA;
    margin-bottom: .75em;

    + .event-name {
        margin-top: -0.85em;
    }

    time {
        font-weight: bold;
    }

}

.event-time {
    text-align: right;
    font-weight: bold;
    min-width: 45px;
}

.event-time-next {
    text-align: right;
    color: #949EAA;
    margin-left: 1em;
    min-width: 45px;
}

/* *****************
      event boxes
   ***************** */

.event-boxes {
    display: grid;
    grid-gap: .8em;

    /* 3 columns */
    .section-resets &,
    .section-vorago &,
    .section-araxxor & {
        grid-template-columns: repeat(3, 1fr);
    }

    /* 2 columns */
    .section-vos &,
    .section-rots & {
        grid-template-columns: repeat(2, 1fr);
    }

    .section-resets &,
    .section-vorago &,
    .section-araxxor &,
    .section-rots & {
        text-align: center;
    }

    .section-vorago & {
        margin-bottom: .75em;
    }

}

.event-box {
    background-color: #F9FAFA;
    border-radius: .25em;
    padding: .95em .75em;
    transition: .2s ease;

    .event-name {
        line-height: 1.4;
    }

}

.section-vos {

	.vos-icon {
		float: left;
		margin-right: .5em;
	}

	.event-byline {
		margin-top: .5em;
	}

}

.section-vorago .event-box {
    display: flex;
    align-items: center;
}

.section-rots {

    .event-box {
        padding-top: .65em;
        padding-bottom: .65em;
    }

	// get direction labels next to each other
    .event-byline {
        width: 49%;
        display: inline-block;

        // "Eastern side"
        &:last-child {
            text-align: right;
        }

    }

    .event-name + .event-name {
        border-top: 1px solid #EDF0F0;
        margin-top: .5em;
        padding-top: .5em;
    }

}

/* *******************
      active styles
   ******************* */

.event-active {
    background-color: #DBF2C7;

    .event-name,
    .event-time {
        color: #3D6917;
    }

    .event-byline,
    .event-time-next {
        color: #699741;
    }

}

.event-list .event-active:hover {
    background-color: #d1ecb9;
}