roll20-character-sheets/Firefly/styles.less

@import (reference) "buttons.less";
@import "mixins.less";
@img-sprites: "https://i.imgur.com/zkgyBOi.png";
@img-frame-top: "https://i.imgur.com/WTTBLUo.png";
@img-frame-bottom: "https://i.imgur.com/hwYnUHT.png";
@import "dropdowns.less";
@import "dropdowns-repeat.less";
@import "sprites.less";

/* Sheet-wide styles */

.sheet-main-outer {
    background: url(@img-frame-top) top left no-repeat, url(@img-frame-bottom) bottom left no-repeat, white;
    border-style: solid;
    border-width: 1px;
    border-color: #a7a5a6;
    margin-top: 50px;
}

.sheet-main {
    position: relative;
    min-height: 795px;
    background-position: top left;
    background-repeat: no-repeat;
    width: 713px;
    background: white;
    margin: 125px 30px 90px 30px;
    border: none;
    border-left: 2px solid #a7a5a6;
    border-right: 2px solid #a7a5a6;
    padding: 0;
    .fontSerif();
    font-size: 16px;
    line-height: 14px;
    color: #000000;
}


.sheet-page {
    padding: 5px 5px;

    .sheet-section {
        display: inline-block;
        width: 100%;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 2px 1px;
        min-height: 50px;
        h2 {
            border-bottom: none;
            background-color: #a1a8c2;
            color: white;
            margin-top: 3px;
            font-size: 18px;
            font-weight: normal;
            letter-spacing: 3px;
            margin-bottom: 5px;
            font-variant: small-caps;
            width: 300px;
            position: relative;
            left: 7px;
            padding: 0;
            line-height: 28px;
            .hexagon();
        }
        button[type=roll] {
            .btn-clear();
            &:before {
                content: "";
            }
        }
        button:not([type=roll]) {
            .fontSansSerif();
        }
        input, textarea {
            .fontSerif();
        }
        .sheet-dropdown {
            & > div:hover {
                .fadeIn();
            }
        }
        input {
            .input();
            &[type=text] {
                .inputLine();
            }
        }
        input[type=checkbox] {
            .fakeRadioCheckBoxDims();
            .fakeCheckboxBlue();
        }
    }
}

/* Section: Header */

.sheet-pagehead {
    margin: 22px auto 30px auto;
    width: 510px;
    position: absolute;
    top: -95px;
    left: 180px;
    text-align: left;
    input {
        .input();
        &[type=text] {
            .inputLine();
        }
    }
    .attr_ID {
        .fontSerif();
        font-size: 20pt;
        text-align: left;
        font-variant: small-caps;
        margin: 0px 0px 9px 0px;
        display: inline-block;
        width: 65%;
        display: block;
    }
    .attr_Desc {
        .fontSerif();
        text-align: left;
        font-size: 14px;
        display: inline-block;
        line-height: 14px;
        padding-bottom: 3px;
        width: 100%;
        display: block;
    }
    .sheet-portraitholder {
        display: inline-block;
        position: relative;
        float: right;
        z-index: 1;
        top: -30px;
        right: 0;
        margin: 0;
        padding: 0;
        border: none;

    }
}

/* Section: Attributes */
.sheet-attributes{
    width: 100%;
    height: 35px;
    margin-left: 18%;
    .sheet-attribute {
        display:inline-block;
        clear: both;
        width: 18%;
        margin-left: 0px;
        margin-right: 30px;
        & > div {
            float: left;
            vertical-align: middle;
            margin: 0;
        }
        & > button {
            float: right;
            display: inline-block;
            height: 35px;
            margin: 0px;
        }
    }
}

/* Section: Skills */
.sheet-skills table {
    margin: 0 auto;
    border-collapse: separate;
    td {
        border-bottom: 1px solid black;
        min-width: 90px;
        &:nth-child(2n) {
            border-right: 8px solid white;
        }
        &:last-child {
            border-right: none;
        }
        input.sheet-skill-spec {
            width: 80px;
            font-size: 12px;
            line-height: 1.5;
            & + button[type=roll] {
                .rollButton();
                height: 23px;
            }
        }
        .sheet-dropdown button[type=roll] {
            .btn-clear();
            .btn-sm;
            min-width: 80px;
            font-size: 0.75em;
        }
    }
    .sheet-dropdown {
        display:inline-block;
    }
}
/* Section: Shared Distinctions and Sig Assets*/

.triggersList() {
    .sheet-ul, ul {
        list-style: none;
        margin: 0 0 0 25px;
        .sheet-li, li {
            margin-bottom: 5px;
            textarea {
                height: auto;
                width: 90%;
                margin: 0;
            }
            input[type=checkbox] {
            }
        }
    }

}

.sheet-sigassets,
.sheet-distinctions {
    margin-bottom: 50px;
    &:last-of-type {
        margin-bottom: 5px;
    }
    .triggersList();
}

/* Section: Distinctions */
.sheet-distinctions {
    & > input[type=text].sheet-lore {
        .loreInput();
    }
    .sheet-distinct-head {
        input[type=text] {
            .headInput();
            font-size: 18px;
        }
        &:before {
            .sheet-ff-dice-d8-yellow;
            content: ' ';
            display: inline-block;
            vertical-align: middle;

        }
        button[type=roll] {
            .rollButton();
            width: 35px;
            height: 35px;
        }

    }
    .sheet-distinction-skills {
        font-variant: small-caps;
        margin: 0;
        input[type=text] {
            .fontSansSerif();
            width: 73px;
            margin-left: 2px;
            font-weight: bolder;
            line-height: 1.5;
        }
    }

}

/* Section: Signature Assets*/

.sheet-sigassets {
    .sheet-sigasset-head {
        height: 35px;
        .sheet-dropdown {
            width:41%;
            & > div {
                float: left;
                vertical-align: middle;
            }
            & > input[type=text] {
                .headInput();
                float:right;
                display: inline-block;
            }
        }
        
        button[type=roll] {
            .rollButton();
            display: inline-block;
            float:right;
            width: 35px;
            height: 35px;
        }

    }
    textarea {
        height: auto;
        width: 90%;
        margin: 0;
        margin-bottom: 5px;
    }
}


/* Create pseudo-dropdowns CSS */

.makeDropdown(attr_Mental, 5, 35px);
.makeDropdown(attr_Physical, 5, 35px);
.makeDropdown(attr_Social, 5, 35px);

.makeDropdown(attr_Craft, 5);
.makeDropdown(attr_Drive, 5);
.makeDropdown(attr_Fight, 5);
.makeDropdown(attr_Fix, 5);
.makeDropdown(attr_Fly, 5);
.makeDropdown(attr_Focus, 5);
.makeDropdown(attr_Influence, 5);
.makeDropdown(attr_Know, 5);
.makeDropdown(attr_Labor, 5);
.makeDropdown(attr_Move, 5);
.makeDropdown(attr_Notice, 5);
.makeDropdown(attr_Operate, 5);
.makeDropdown(attr_Perform, 5);
.makeDropdown(attr_Shoot, 5);
.makeDropdown(attr_Sneak, 5);
.makeDropdown(attr_Survive, 5);
.makeDropdown(attr_Throw, 5);
.makeDropdown(attr_Treat, 5);
.makeDropdown(attr_Trick, 5);

.makeDropdownRepeat(attr_sigasset_value, attr_sigasset_mark, sigasset, 2, 35px, 2);
.makeDropdownRepeat(attr_0_repeating_sigassets_sigasset_value, attr_0_repeating_sigassets_sigasset_mark, sigasset, 2, 35px, 2);
.makeDropdownRepeat(attr_1_repeating_sigassets_sigasset_value, attr_1_repeating_sigassets_sigasset_mark, sigasset, 2, 35px, 2);
.makeDropdownRepeat(attr_2_repeating_sigassets_sigasset_value, attr_2_repeating_sigassets_sigasset_mark, sigasset, 2, 35px, 2);