quests.css

body {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    height: calc(100vh - 16px);
    width: calc(100vw - 16px);
    display: grid;
	grid-template-columns: auto minmax(auto, 100%);
	grid-auto-rows: 100%;
}

div#selector-container {
    display: grid;
    grid-template-rows: auto minmax(auto, 100%);
    padding-right: 4px;
    height: 100%;
}
div#level-selector {
    padding: 8px;
    text-align: center;
}
div#level-selector input[type='range'] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 1em;
    border: none;
    background: repeating-linear-gradient(to right, #EEEEEE calc(0% / 32) calc(45% / 32), #000000 calc(45% / 32) calc(55% / 32), #EEEEEE calc(55% / 32) calc(100% / 32) );
}
div#level-selector input[type='range']::-webkit-slider-thumb{
    -webkit-appearance: none;
    width: calc(100%/32);
    height: 1em;
    clip-path: polygon(0 0, 35% 100%, 65% 100%, 25% 0, 75% 0, 35% 100%, 65% 100%, 100% 0);
    background: #0044FF;
}
div#level-selector input[type='range']::-moz-range-thumb {
    -moz-appearance: none;
    width: calc(100%/32);
    height: 1em;
    clip-path: polygon(0 0, 35% 100%, 65% 100%, 25% 0, 75% 0, 35% 100%, 65% 100%, 100% 0);
    background: #0044FF;
}

div#pack-picker {
    box-sizing: content-box;
    padding-right: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    display: grid;
    gap: 4px;
    grid-template-columns: 50% 50%;
    grid-auto-rows: min-content;
}
@media only screen and (max-width: 1200px) {
    div#pack-picker {
        grid-template-columns: none;
        overflow-y: scroll;
    }
}
button {
    font-family: Verdana, sans-serif;
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 4px 8px;
    text-align: center;
    vertical-align:top;

    color: #000000;
    border-color: #787878;
    border-style: outset;
    border-width: 1px;
    border-radius: 2px;
    outline: none;
    
    --left-background: #F4F4F4;
    --right-background: #F4F4F4;
    background-image: linear-gradient(135deg, var(--left-background) 45%, var(--right-background) 55%);
}
@media (pointer: coarse) {
    button {
        width: 55%;
    }
}
button:hover {
    filter: brightness(93%);
}
button:active {
    filter: brightness(86%);
}
button.pack-excluded {
    --right-background: #D0D0D0;
    font-style: italic; 
}
button.pack-required {
    --right-background: #88EE88;
}
button.pack-prefer-heroic {
    --left-background: #00F8F8;
}
button.mobile {
    width: 15%;
    background-image: none;
}
@media (pointer: fine) {
    button.mobile {
        display: none;
    }
}
button.mobile.require {
    background-color: #88EE88; 
}
button.mobile.prefer-heroic {
    background-color: #00F8F8; 
}
button.mobile.restore-quests {
    background-color: #FF7777; 
}

div#quest-table { overflow-y: auto; }
#quest-table table {
    width: 100%;
    text-align: center;
    vertical-align: middle;
    border-collapse: collapse;
}
#quest-table table thead tr {
    border-bottom: 4px solid black;
    font-weight: bolder;
}
#quest-table table td { padding: 2px 6px; }
#quest-table table td + td { border-left: 1.5px solid black; }
#quest-table table tbody tr { background-color: #FFFFFF; }
#quest-table table tbody tr.raid { background-color: #FFCCCC; }
#quest-table table tbody tr.solo { background-color: #CCFFFF; }
#quest-table table tbody tr:nth-child(even) { background-image: linear-gradient(#3332 0 0); }
#quest-table table tbody tr:hover { filter: brightness(97%) contrast(97%); }