slipshow/dist/css/theorem.css

This is not another slide engine, but a slip engine.

/*************************************/
/*    Blocks                         */
/*************************************/

.block, .theorem, .lemma, .definition, .example, .my-theorem, .corollary, .remark {
    display: block;
    margin-top: 20px;
    margin-bottom: 40px;
    padding: 30px;
    border-radius: 10px;
    -webkit-box-shadow: 5px 5px 18px 5px rgba(0,0,0,0.42); 
    box-shadow: 5px 5px 18px 5px rgba(0,0,0,0.42);
    background-color:white;    
}
.block:before, .theorem:before, .lemma:before, .definition:before, .example:before, .my-theorem:before, .corollary:before, .remark:before {
    font-weight: bold;
    display: block;
    margin-top: -30px;
    margin-left: -30px;
    border-radius: 5px 5px 0 0;
    margin-right: -30px;
    margin-bottom: 15px;
    padding: 6px;
    padding-left: 30px;
    color: white;
    font-style: normal;
}
.block[title]:before {
    content: "" attr(title) "";
    background-color: darkgrey;
}


/*************************************/
/*    Theorems                       */
/*************************************/

.theorem {
    font-style: italic;
    background-color: lightpink;
    border: 1px solid darkred;
}
.theorem:before {
    text-align:left;
    content: "Theorem";
    background-color: darkred;
}
.theorem[title]:before {
    content: "Theorem (" attr(title) ") ";
}

/*************************************/
/*    Theorems                       */
/*************************************/

.my-theorem {
    font-style: italic;
    background-color: lightgoldenrodyellow;
    border: 1px solid darkgoldenrod;
}
.my-theorem:before {
    text-align:left;
    content: "Theorem";
    background-color: darkgoldenrod;
}
.my-theorem[title]:before {
    content: "Theorem (" attr(title) ") ";
}

/*************************************/
/*    Lemmas                         */
/*************************************/

.lemma {
    font-style: italic;
    background-color: lightgray;
    border: 1px solid darkgray;
}
.lemma:before {
    content: "Lemma";
    background-color: darkgray;
}
.lemma[title]:before {
    content: "Lemma (" attr(title) ") ";
}

/*************************************/
/*    Proof                          */
/*************************************/

.proof {
    display: block;
    margin: 12px 0;
    font-style: normal;
}
.proof:before {
    content: "Proof.";
    font-style: italic;
}
.proof:after {
    content: "\25FC";
    float:right;
}

/*************************************/
/*    Definitions                    */
/*************************************/

.definition {
    font-style: normal;
    background-color: lightblue;
    border: 1px solid darkblue;
}
.definition:before {
    content: "Definition.";
    background-color: darkblue;
}
.definition[title]:before {
    content: "Definition (" attr(title) ") ";
}

/*************************************/
/*    Examples                       */
/*************************************/

.example {
    font-style: normal;
    background-color: lightgreen;
    border: 1px solid darkgreen;
}
.example:before {
    content: "Example.";
    background-color: darkgreen;
}
.example[title]:before {
    content: "Example (" attr(title) ") ";
}


/*************************************/
/*    Remark                         */
/*************************************/

.remark {
    font-style: normal;
    background-color: lightgreen;
    border: 1px solid darkgreen;
}
.remark:before {
    content: "Remark.";
    background-color: darkgreen;
}
.remark[title]:before {
    content: "Remark (" attr(title) ") ";
}

/*************************************/
/*    Corollary                      */
/*************************************/

.corollary {
    font-style: normal;
    background-color: lightyellow;
    border: 1px solid #CCCC00;
}
.corollary:before {
    content: "Corollary.";
    background-color: #CCCC00;
}
.corollary[title]:before {
    content: "Corollary (" attr(title) ") ";
}