/*
    pusa.css
*/


/* подсветка фокуса */
.pusa-focus
{
    box-shadow: 
        0px 0px 3px #007c00ff;
    background: repeating-linear-gradient(
        45deg,
        #007c0022 0,
        #007c0022 2px,
        #007c0000 2px,
        #007c0000 0.25em
    )!important;
    color: #007c00ff!important;
}



/******************************************************************************
    Pusa load indicator
*/

/* Base style */
#pusa-indicator
{
    position: fixed;
    bottom: 2em;
    right: 2em;
    pointer-events: none;
    z-index: 9999;
    background-image: url(/content/read/images/pusa.svg);
    background-color: black;
    background-size: contain;
    background-repeat: no-repeat;
    width: 3em;
    height: 3em;
    opacity: 0;
    transition: opacity 0.5s ease;
    border-radius:1em;
}



/* Pusa indicator loading */
#pusa-indicator.show 
{
    opacity: 1;
}



/* Pusa indicator hide */
#pusa-indicator.hide
{
    opacity: 0;
}



/******************************************************************************
    Code css
*/
.code 
{
    display: block;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: monospace;
    padding-bottom: 1em;
    margin-bottom: 1em;
    border-left: 1em solid;
}



.code::before 
{
    display: block;
    font-weight: bold;
    color: #fff;
    padding: 0.5em;
}



.js      
{
    background: #80008033;
    border-color: #80008033;
}



.js::before 
{
    content: "JavaScript"; 
    background: #800080;
}



.html
{
    background: #00008033;
    border-color: #00008033;
}



.html::before
{
    content: "HTML";
    background: #000080;
}



.json
{
    background: #64640033;
    border-color: #64640033;
}



.json::before
{
    content: "json";
    background: #646400;
}



.php
{
    background: #00640033;
    border-color: #00640033;
}



.php::before
{
    content: "PHP";
    background: #006400;
}