uio-plus/src/stylus/adjusters.styl

User Interface Options Plus (UIO+) allows you to customize websites to match your own personal needs and preferences.

@import "utils/selection"

// variables

panelHeight = 183px;
panelWidth = 450px;
spinnerSize = 5em;

// Overriding the fonts to correct the path to the font file
@font-face {
    font-family: "OpenSans";
    src: url("../fonts/OpenSans-Light.woff");
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'OpenSans';
    src: url("../fonts/OpenSans-Regular.woff");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'OpenSans';
    src: url("../fonts/OpenSans-Semibold.woff");
    font-weight: 600;
    font-style: normal;
}

/**
 * CSS Spinner adapted from Lea Verou's Cleanest CSS Spinner
 * http://lea.verou.me/2013/11/cleanest-css-spinner-ever/
 */

@keyframes spin {
    to { transform: rotate(1turn); }
}

.uioPlus-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: panelHeight;
}

.uioPlus-spinner {
    position: relative;
    display: inline-block;
    width: spinnerSize;
    height: spinnerSize;
    margin: 0 0.5rem;
    text-indent: -999rem; /* to hide the loading text */
    overflow: hidden;
    animation: spin 1s infinite steps(8);
}

.uioPlus-spinner:before,
.uioPlus-spinner:after,
.uioPlus-spinner > div:before,
.uioPlus-spinner > div:after {
    content: '';
    position: absolute;
    width: 0.5rem;
    height: 1.5rem;
    top: 0;
    left: ((spinnerSize - @width) / 2);
    border-radius: 0.2rem;
    background: #eee;
    box-shadow: 0 (spinnerSize - @height) #eee;
    transform-origin: 50% (spinnerSize / 2);
}

.uioPlus-spinner:before {
    background: #555;
}

.uioPlus-spinner:after {
    transform: rotate(-45deg);
    background: #777;
}

.uioPlus-spinner > div:before {
    transform: rotate(-90deg);
    background: #999;
}

.uioPlus-spinner > div:after {
    transform: rotate(-135deg);
    background: #bbb;
}

// Selection Highlight Preview
selectionThemes = {
    ".uioPlus-selection-preview-yellow": {
        foregroundColor: #000000,
        backgroundColor: #eeee1a
    }
    ".uioPlus-selection-preview-green": {
        foregroundColor: #000000,
        backgroundColor: #318712
    }
    ".uioPlus-selection-preview-pink": {
        foregroundColor: #000000,
        backgroundColor: #de00a2
    }
}

uioPlus-stylus-selectionPreviewThemes(selectionThemes);

// Overrides

// Separated Panel Prefs Editor
.fl-prefsEditor-separatedPanel {
    background-image: none;

    .fl-prefsEditor-panels {
        .fl-prefsEditor-panel {
            border-top: transparent;
            border-bottom: transparent;
        }
    }
}

.fl-prefsEditor-separatedPanel .fl-prefsEditor-panels .fl-prefsEditor-panel
body {
    font-size: 1rem;
    width: panelWidth;
    min-height: panelHeight;
}

// Textfield Stepper
.fl-prefsEditor .fl-textfieldStepper .fl-textfieldStepper-textField {
    font-size: 2em;
    height: auto;
    width: 4ch;
}