website/static/css/admonition.css

/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */

.admonition, details {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12), 0 3px 1px -2px rgba(0, 0, 0, .2);
    position: relative;
    margin: 1.5625em 0;
    padding: 0.6rem 0.6rem 0.25rem;
    border-left: .4rem solid #448aff;
    border-radius: .2rem;
    font-size: 14px;
}

.admonition>p {
    margin-top:1em;
}


.admonition .admonition, .admonition details, details .admonition, details details {
    margin: 1em 0
}

.admonition > .admonition-title, .admonition > summary, details > .admonition-title, details > summary {
    margin: -0.6rem -0.6rem 0;
    padding: .8rem 1.2rem .8rem 4rem;
    border-bottom: .1rem solid rgba(68, 138, 255, .1);
    background-color: rgba(68, 138, 255, .1);
    font-weight: 700
}

.admonition > .admonition-title:before, .admonition > summary:before, details > .admonition-title:before, details > summary:before {
    position: absolute;
    left: 1.2rem;
    top:0.25rem;
    color: #448aff;
    font-size: 1.5rem;
    content: "\E3C9";
    font-family: 'Material Icons';
}

.admonition.summary, .admonition.tldr, details.summary, details.tldr {
    border-left: .4rem solid #00b0ff
}

.admonition.summary > .admonition-title, .admonition.summary > summary, .admonition.tldr > .admonition-title, .admonition.tldr > summary, details.summary > .admonition-title, details.summary > summary, details.tldr > .admonition-title, details.tldr > summary {
    border-bottom: .1rem solid rgba(0, 176, 255, .1);
    background-color: rgba(0, 176, 255, .1)
}

.admonition.summary > .admonition-title:before, .admonition.summary > summary:before, .admonition.tldr > .admonition-title:before, .admonition.tldr > summary:before, details.summary > .admonition-title:before, details.summary > summary:before, details.tldr > .admonition-title:before, details.tldr > summary:before {
    color: #00b0ff;
    content: ""
}

.admonition.info, .admonition.todo, details.info, details.todo {
    border-left: .4rem solid #00b8d4
}

.admonition.info > .admonition-title, .admonition.info > summary, .admonition.todo > .admonition-title, .admonition.todo > summary, details.info > .admonition-title, details.info > summary, details.todo > .admonition-title, details.todo > summary {
    border-bottom: .1rem solid rgba(0, 184, 212, .1);
    background-color: rgba(0, 184, 212, .1)
}

.admonition.info > .admonition-title:before, .admonition.info > summary:before, .admonition.todo > .admonition-title:before, .admonition.todo > summary:before, details.info > .admonition-title:before, details.info > summary:before, details.todo > .admonition-title:before, details.todo > summary:before {
    color: #00b8d4;
    content: "\E88E";
    font-family: 'Material Icons';
}

.admonition.hint, .admonition.important, .admonition.tip, details.hint, details.important, details.tip {
    border-left: .4rem solid #00bfa5
}

.admonition.hint > .admonition-title, .admonition.hint > summary, .admonition.important > .admonition-title, .admonition.important > summary, .admonition.tip > .admonition-title, .admonition.tip > summary, details.hint > .admonition-title, details.hint > summary, details.important > .admonition-title, details.important > summary, details.tip > .admonition-title, details.tip > summary {
    border-bottom: .1rem solid rgba(0, 191, 165, .1);
    background-color: rgba(0, 191, 165, .1)
}

.admonition.hint > .admonition-title:before, .admonition.hint > summary:before, .admonition.important > .admonition-title:before, .admonition.important > summary:before, .admonition.tip > .admonition-title:before, .admonition.tip > summary:before, details.hint > .admonition-title:before, details.hint > summary:before, details.important > .admonition-title:before, details.important > summary:before, details.tip > .admonition-title:before, details.tip > summary:before {
    color: #00bfa5;
    content: ""
}

.admonition.check, .admonition.done, .admonition.success, details.check, details.done, details.success {
    border-left: .4rem solid #00c853
}

.admonition.check > .admonition-title, .admonition.check > summary, .admonition.done > .admonition-title, .admonition.done > summary, .admonition.success > .admonition-title, .admonition.success > summary, details.check > .admonition-title, details.check > summary, details.done > .admonition-title, details.done > summary, details.success > .admonition-title, details.success > summary {
    border-bottom: .1rem solid rgba(0, 200, 83, .1);
    background-color: rgba(0, 200, 83, .1)
}

.admonition.check > .admonition-title:before, .admonition.check > summary:before, .admonition.done > .admonition-title:before, .admonition.done > summary:before, .admonition.success > .admonition-title:before, .admonition.success > summary:before, details.check > .admonition-title:before, details.check > summary:before, details.done > .admonition-title:before, details.done > summary:before, details.success > .admonition-title:before, details.success > summary:before {
    color: #00c853;
    content: ""
}

.admonition.faq, .admonition.help, .admonition.question, details.faq, details.help, details.question {
    border-left: .4rem solid #64dd17
}

.admonition.faq > .admonition-title, .admonition.faq > summary, .admonition.help > .admonition-title, .admonition.help > summary, .admonition.question > .admonition-title, .admonition.question > summary, details.faq > .admonition-title, details.faq > summary, details.help > .admonition-title, details.help > summary, details.question > .admonition-title, details.question > summary {
    border-bottom: .1rem solid rgba(100, 221, 23, .1);
    background-color: rgba(100, 221, 23, .1)
}

.admonition.faq > .admonition-title:before, .admonition.faq > summary:before, .admonition.help > .admonition-title:before, .admonition.help > summary:before, .admonition.question > .admonition-title:before, .admonition.question > summary:before, details.faq > .admonition-title:before, details.faq > summary:before, details.help > .admonition-title:before, details.help > summary:before, details.question > .admonition-title:before, details.question > summary:before {
    color: #64dd17;
    content: ""
}

.admonition.attention, .admonition.caution, .admonition.warning, details.attention, details.caution, details.warning {
    border-left: .4rem solid #ff9100
}

.admonition.attention > .admonition-title, .admonition.attention > summary, .admonition.caution > .admonition-title, .admonition.caution > summary, .admonition.warning > .admonition-title, .admonition.warning > summary, details.attention > .admonition-title, details.attention > summary, details.caution > .admonition-title, details.caution > summary, details.warning > .admonition-title, details.warning > summary {
    border-bottom: .1rem solid rgba(255, 145, 0, .1);
    background-color: rgba(255, 145, 0, .1)
}

.admonition.attention > .admonition-title:before, .admonition.attention > summary:before, .admonition.caution > .admonition-title:before, .admonition.caution > summary:before, .admonition.warning > .admonition-title:before, .admonition.warning > summary:before, details.attention > .admonition-title:before, details.attention > summary:before, details.caution > .admonition-title:before, details.caution > summary:before, details.warning > .admonition-title:before, details.warning > summary:before {
    color: #ff9100;
    content: ""
}

.admonition.fail, .admonition.failure, .admonition.missing, details.fail, details.failure, details.missing {
    border-left: .4rem solid #ff5252
}

.admonition.fail > .admonition-title, .admonition.fail > summary, .admonition.failure > .admonition-title, .admonition.failure > summary, .admonition.missing > .admonition-title, .admonition.missing > summary, details.fail > .admonition-title, details.fail > summary, details.failure > .admonition-title, details.failure > summary, details.missing > .admonition-title, details.missing > summary {
    border-bottom: .1rem solid rgba(255, 82, 82, .1);
    background-color: rgba(255, 82, 82, .1)
}

.admonition.fail > .admonition-title:before, .admonition.fail > summary:before, .admonition.failure > .admonition-title:before, .admonition.failure > summary:before, .admonition.missing > .admonition-title:before, .admonition.missing > summary:before, details.fail > .admonition-title:before, details.fail > summary:before, details.failure > .admonition-title:before, details.failure > summary:before, details.missing > .admonition-title:before, details.missing > summary:before {
    color: #ff5252;
    content: ""
}

.admonition.danger, .admonition.error, details.danger, details.error {
    border-left: .4rem solid #ff1744
}

.admonition.danger > .admonition-title, .admonition.danger > summary, .admonition.error > .admonition-title, .admonition.error > summary, details.danger > .admonition-title, details.danger > summary, details.error > .admonition-title, details.error > summary {
    border-bottom: .1rem solid rgba(255, 23, 68, .1);
    background-color: rgba(255, 23, 68, .1)
}

.admonition.danger > .admonition-title:before, .admonition.danger > summary:before, .admonition.error > .admonition-title:before, .admonition.error > summary:before, details.danger > .admonition-title:before, details.danger > summary:before, details.error > .admonition-title:before, details.error > summary:before {
    color: #ff1744;
    content: ""
}

.admonition.bug, details.bug {
    border-left: .4rem solid #f50057
}

.admonition.bug > .admonition-title, .admonition.bug > summary, details.bug > .admonition-title, details.bug > summary {
    border-bottom: .1rem solid rgba(245, 0, 87, .1);
    background-color: rgba(245, 0, 87, .1)
}

.admonition.bug > .admonition-title:before, .admonition.bug > summary:before, details.bug > .admonition-title:before, details.bug > summary:before {
    color: #f50057;
    content: ""
}

.admonition.cite, .admonition.quote, details.cite, details.quote {
    border-left: .4rem solid #9e9e9e
}

.admonition.cite > .admonition-title, .admonition.cite > summary, .admonition.quote > .admonition-title, .admonition.quote > summary, details.cite > .admonition-title, details.cite > summary, details.quote > .admonition-title, details.quote > summary {
    border-bottom: .1rem solid hsla(0, 0%, 62%, .1);
    background-color: hsla(0, 0%, 62%, .1)
}

.admonition.cite > .admonition-title:before, .admonition.cite > summary:before, .admonition.quote > .admonition-title:before, .admonition.quote > summary:before, details.cite > .admonition-title:before, details.cite > summary:before, details.quote > .admonition-title:before, details.quote > summary:before {
    color: #9e9e9e;
    content: ""
}