niman/GUI/css/bttn.css

A Flexible Installation Manager for Node JS ( NVM plus )

@charset "UTF-8";

td {
    padding: 3px;
}
    .inUseV DIV             {
        display             :   block;
        background-color    :   #2EF;
        color               :   #48F;
        z-index: 1;
    }

    .arch   DIV             {
        text-align          :   center;
        text-decoration     :   none;
    }

    
    .btn                    {
        position            :   relative;
        display             :   block;
        padding             :   1px;
        xborder             :    1px solid #ccc;
        text-align          :   center;
        text-decoration     :   none;
        transform-style     :   flat;
        transition          :   all 250ms ease-in;
        z-index             :   3;

    }
    


    .paper-lift:hover {
       xborder-color        :   transparent;
        cursor              :   pointer;
    }

    .paper-lift:hover:before
,   .paper-lift:hover:after {
        box-shadow          :   0 9px 9px rgba(31, 31, 31, 0.7);
        z-index: -1;
    }
    

    
.paper {
    position: asolute;
    border: 1px solid #faeaaa;
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.3),0 0 40px rgba(128,128,128,.1)inset;
    box-shadow: 0 1px 4px rgba(0,0,0,.3),0 0 40px rgba(128,128,128,.1)inset;
}

.paper:after,
.paper:before {
    content: "";
    position: absolute;
    
}

.paper-lg {
    padding: 24px;
}

.paper-sm {
    padding: 9px;
}

.paper-photo {
    padding: 0;
}

.paper.paper-polar {
    background-color: #fff;
    border: 1px solid #fff;
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.3),0 0 40px rgba(128,128,128,.1)inset;
    box-shadow: 0 1px 4px rgba(0,0,0,.3),0 0 40px rgba(128,128,128,.1)inset;
}

.paper.paper-vintage {
    background-color: #faf8f0;
    border: 1px solid #faf8f0;
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.3),0 0 40px rgba(128,117,64,.1)inset;
    box-shadow: 0 1px 4px rgba(0,0,0,.3),0 0 40px rgba(128,117,64,.1)inset;
}

.paper.paper-pink {
    background-color: #faf0f0;
    border: 1px solid #faf0f0;
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.3),0 0 40px rgba(128,64,64,.1)inset;
    box-shadow: 0 1px 4px rgba(0,0,0,.3),0 0 40px rgba(128,64,64,.1)inset;
}

.paper.paper-green {
    background-color: #f3faf0;
    border: 1px solid #f3faf0;
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.3),0 0 40px rgba(85,128,64,.1)inset;
    box-shadow: 0 1px 4px rgba(0,0,0,.3),0 0 40px rgba(85,128,64,.1)inset;
}

.paper.paper-blue {
    background-color: #f0f6fa;
    border: 1px solid #f0f6fa;
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.3),0 0 40px rgba(64,106,128,.1)inset;
    box-shadow: 0 1px 4px rgba(0,0,0,.3),0 0 40px rgba(64,106,128,.1)inset;
}

.paper.paper-violet {
    background-color: #f2f0fa;
    border: 1px solid #f2f0fa;
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.3),0 0 40px rgba(74,64,128,.1)inset;
    box-shadow: 0 1px 4px rgba(0,0,0,.3),0 0 40px rgba(74,64,128,.1)inset;
}

.paper-lift:after,.paper-lift:before {
    bottom: 15px;
    width: 50%;
    height: 20%;
    max-width: 300px;
    max-height: 100px;
    -webkit-box-shadow: 0 15px 10px rgba(31,31,31,.7);
    box-shadow: 0 15px 10px rgba(31,31,31,.7);

}

.paper-lift:before {
    left: 10px;
    -webkit-transform: rotate(-4deg);
    -ms-transform: rotate(-4deg);
    transform: rotate(-4deg);
}

.paper-lift:after {
    right: 10px;
    -webkit-transform: rotate(4deg);
    -ms-transform: rotate(4deg);
    transform: rotate(4deg);
}

.paper-raise:before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-box-shadow: 0 16px 10px -10px rgba(31,31,31,.5),0 1px 4px rgba(31,31,31,.3);
    box-shadow: 0 16px 10px -10px rgba(31,31,31,.5),0 1px 4px rgba(31,31,31,.3);
}

.paper-curl {
    border-radius: 0 0 120px 120px / 0 0 6px 6px;
}

.paper-curl-left:after,.paper-curl-left:before,.paper-curl-right:after,.paper-curl-right:before,.paper-curl:after,.paper-curl:before {
    bottom: 12px;
    width: 50%;
    height: 55%;
    max-width: 200px;
    max-height: 100px;
    -webkit-box-shadow: 0 8px 14px rgba(31,31,31,.5);
    box-shadow: 0 8px 14px rgba(31,31,31,.5);
}

.paper-curl-left:before,.paper-curl-right:before,.paper-curl:before {
    left: 6px;
    -webkit-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

.paper-curl-left:after,.paper-curl-right:after,.paper-curl:after {
    right: 6px;
    -webkit-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
}

.paper-curl-left {
    border-radius: 0 0 0 120px / 0 0 0 6px;
}

.paper-curl-right {
    border-radius: 0 0 120px / 0 0 6px 0;
}

.paper-curve-above:before,.paper-curve-below:before,.paper-curve-horiz:before,.paper-curve-left:before,.paper-curve-right:before,.paper-curve-vert:before,.paper-curve:before {
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,.6);
    box-shadow: 0 0 15px rgba(0,0,0,.6);
}

.paper-curve-left:before,.paper-curve-right:before,.paper-curve-vert:before {
    top: 10px;
    bottom: 10px;
    border-radius: 10px / 100px;
}

.paper-curve-left:before,.paper-curve-vert:before {
    left: 0;
    right: 50%;
}

.paper-curve-right:before {
    left: 50%;
    right: 0;
}

.paper-curve-vert:before {
    right: 0;
}

.paper-curve-above:before,.paper-curve-below:before,.paper-curve-horiz:before {
    left: 10px;
    right: 10px;
    border-radius: 100px / 10px;
}

.paper-curve-above:before {
    top: 0;
    bottom: 50%;
}

.paper-curve-below:before,.paper-curve-horiz:before {
    top: 50%;
    bottom: 0;
}

.paper-curve-horiz:before {
    top: 0;
}