ui-debugger/assets/debugger-styles.css

ui development assistant

@keyframes border-pulsate {
    0% {
        box-shadow: 0 0 7px #0c0;
    }
    50% {
        box-shadow: 0 0 0 #fff;
    }
    100% {
        box-shadow: 0 0 7px #0c0;
    }
}

@keyframes show-fade {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    75% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes border-pulsate {
    0% {
        box-shadow: 0 0 7px #0c0;
    }
    50% {
        box-shadow: 0 0 0 #fff;
    }
    100% {
        box-shadow: 0 0 7px #0c0;
    }
}

@keyframes show-fade {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    75% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

.clear {
    clear: both;
}

.highlight {
    box-shadow: 0 0 7px #fff;
    animation: border-pulsate 2s 3;
}

.ruler {
    position: absolute;
    top: -10px;
    z-index: 100;
    width: 100%;
    border-collapse: collapse;
}

.ruler tr {
    border-bottom: 1px solid #f00;
    display: block;
}

.ruler tr td {
    height: 100px;
    width: 100px;
}

.locked {
    position: fixed !important;
}

.vruler {
    width: 100px;
    height: 100px;
    border-right: 1px solid #f00;
    background: url("/ce/assets/img/debugger-grid-bg.png") no-repeat;
}

#responsive-helper {
    margin: 0;
    padding: 0;
    background: #08c91f;
    width: 100%;
    z-index: 90000;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    opacity: .6;
    color: #fff;
    text-align: center;
}

#responsive-helper::before {
    content: "Desktop";
}

@media (min-width: 720px) and (max-width: 1027px) {
    #responsive-helper {
        background: #ffca14;
    }

    #responsive-helper::before {
        content: "Tablet";
    }
}

@media (max-width: 719px) {
    #responsive-helper {
        background: #f00;
    }

    #responsive-helper::before {
        content: "Mobile";
    }
}

#scrollMeter-Wrap {
    height: 5px;
    width: 100%;
    background: transparent;
}

#scrollMeter-Container {
    left: 0;
    top: 0;
    height: 5px;
    background: #ccc;
    position: fixed;
    width: 100%;
}

#scrollMeter {
    height: 5px;
    background: red;
    width: 0%;
}

.focusTabElements a, .focusTabElements button, .focusTabElements [tabindex], .focusTabElements input[type=button], .focusTabElements select {
    background: #4BF533 !important;
    color: black !important;
    border: 1px dotted #f00 !important;
}

.focusTabElements a img {
    background: rgba(50, 205, 50, 0.7);
    border: 1px dotted #f00 !important;
    box-sizing: border-box;
}

.vim-in-action {
    width: 140px;
    height: 105px;
    display: block;
    position: fixed;
    bottom: 50px;
    right: 10px;
    z-index: 900;
    background: url("/ce/assets/img/debugger-in-action.gif");
    background-size: 100% 100%;
    animation: show-fade 8s 1;
}

span.credit {
    opacity: .5;
    text-align: right;
    display: block;
}

.debug {
    width: 90%;
    background: #000;
    color: #fff;
    padding: 10px;
    box-sizing: border-box;
}

.centered {
    width: 1000px;
    height: 110px;
    background: #fff;
    filter: blur(10px) contrast(20);
}

@keyframes osc-l {
    0% {
        left: 20%;
    }
    50% {
        left: 50%;
    }
    100% {
        left: 20%;
    }
}

@keyframes osc-r {
    0% {
        left: 80%;
    }
    50% {
        left: 50%;
    }
    100% {
        left: 80%;
    }
}