web/third/bootstrap/css/bootstrap.portico.css - main - githubmirror/zulip

web/third/bootstrap/css/bootstrap.portico.css
365 строк8 KB
Karl Stolley
portico: Put Bootstrap in CSS @layer rule.
08 апр 2026, 00:12
08 апр 2026, 00:12f2eb430
/*!
 * Bootstrap v2.3.2
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */

/* We put bootstrap in a CSS @layer so that its rules are
   lower priority than other, layerless parts of the portico's
   stylesheets. This sidesteps ongoing frustrations with how
   webpack can reorder imports in different bundles, even
   bundles that are not touched by additions or changes to
   other bundles. See
   https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@layer */
@layer bootstrap {
    footer,
    header,
    nav,
    section {
        display: block;
    }
    html {
        font-size: 100%;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }
    a:focus {
        outline: thin dotted #333;
        outline: 5px auto -webkit-focus-ring-color;
        outline-offset: -2px;
    }
    a:hover,
    a:active {
        outline: 0;
    }
    img {
        /* Responsive images (ensure images don't scale beyond their parents) */
        max-width: 100%;
        /* Part 1: Set a maximum relative to the parent */
        height: auto;
        /* Part 2: Scale the height according to the width, otherwise you get stretching */
        vertical-align: middle;
        border: 0;
    }
    button,
    input {
        margin: 0;
        font-size: 100%;
        vertical-align: middle;
    }
    button,
    input {
        line-height: normal;
    }
    button::-moz-focus-inner,
    input::-moz-focus-inner {
        padding: 0;
        border: 0;
    }
    button {
        -webkit-appearance: button;
        cursor: pointer;
    }
    label,
    button {
        cursor: pointer;
    }
    body {
        margin: 0;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 14px;
        line-height: 20px;
        color: #333333;
        background-color: #ffffff;
    }
    a {
        color: #0088cc;
        text-decoration: none;
    }
    a:hover,
    a:focus {
        color: #005580;
        text-decoration: underline;
    }
    p {
        margin: 0 0 10px;
    }
    .lead {
        margin-bottom: 20px;
        font-size: 21px;
        font-weight: 200;
        line-height: 30px;
    }
    .text-error {
        color: #b94a48;
    }
    a.text-error:hover,
    a.text-error:focus {
        color: #953b39;
    }
    .text-success {
        color: #468847;
    }
    a.text-success:hover,
    a.text-success:focus {
        color: #356635;
    }
    h1,
    h2,
    h3,
    h4 {
        margin: 10px 0;
        font-family: inherit;
        font-weight: bold;
        line-height: 20px;
        color: inherit;
        text-rendering: optimizelegibility;
    }
    h1,
    h2,
    h3 {
        line-height: 40px;
    }
    h1 {
        font-size: 38.5px;
    }
    h2 {
        font-size: 31.5px;
    }
    h3 {
        font-size: 24.5px;
    }
    h4 {
        font-size: 17.5px;
    }
    ul,
    ol {
        padding: 0;
        margin: 0 0 10px 25px;
    }
    ul ul,
    ul ol,
    ol ol,
    ol ul {
        margin-bottom: 0;
    }
    li {
        line-height: 20px;
    }
    hr {
        margin: 20px 0;
        border: 0;
        border-top: 1px solid #eeeeee;
        border-bottom: 1px solid #ffffff;
    }
    q:before,
    q:after {
        content: "";
    }
    pre {
        padding: 0 3px 2px;
        font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
        font-size: 12px;
        color: #333333;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }
    pre {
        display: block;
        padding: 9.5px;
        margin: 0 0 10px;
        font-size: 13px;
        line-height: 20px;
        word-break: break-all;
        word-wrap: break-word;
        white-space: pre;
        white-space: pre-wrap;
        background-color: #f5f5f5;
        border: 1px solid #ccc;
        border: 1px solid rgba(0, 0, 0, 0.15);
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }
    form {
        margin: 0 0 20px;
    }
    label,
    input,
    button {
        font-size: 14px;
        font-weight: normal;
        line-height: 20px;
    }
    input,
    button {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    label {
        display: block;
        margin-bottom: 5px;
    }
    input:-moz-placeholder {
        color: #999999;
    }
    input:-ms-input-placeholder {
        color: #999999;
    }
    input::-webkit-input-placeholder {
        color: #999999;
    }
    input {
        margin-left: 0;
    }
    input[disabled],
    input[readonly] {
        cursor: not-allowed;
        background-color: #eeeeee;
    }
    input:focus:invalid {
        color: #b94a48;
        border-color: #ee5f5b;
    }
    input:focus:invalid:focus {
        border-color: #e9322d;
        -webkit-box-shadow: 0 0 6px #f8b9b7;
        -moz-box-shadow: 0 0 6px #f8b9b7;
        box-shadow: 0 0 6px #f8b9b7;
    }
    .help-inline {
        color: #595959;
    }
    .help-inline {
        display: inline-block;
        vertical-align: middle;
        padding-left: 5px;
    }
    .form-inline input,
    .form-inline .help-inline {
        display: inline-block;
        margin-bottom: 0;
        vertical-align: middle;
    }
    .form-inline .hide {
        display: none;
    }
    .form-inline label {
        display: inline-block;
    }
    .dropdown {
        position: relative;
    }
    .hide {
        display: none;
    }
    .show {
        display: block;
    }
    @-ms-viewport {
        width: device-width;
    }
    .hidden {
        display: none;
        visibility: hidden;
    }
    @media (max-width: 767px) {
        body {
        padding-left: 20px;
        padding-right: 20px;
        }
        .row {
        margin-left: 0;
        }
    }
    @media (min-width: 768px) and (max-width: 979px) {
        .row {
        margin-left: -20px;
        }
        .row:before,
        .row:after {
        display: table;
        content: "";
        line-height: 0;
        }
        .row:after {
        clear: both;
        }
        input {
        margin-left: 0;
        }
    }
    @media (min-width: 1180px) {
        .row {
        margin-left: -30px;
        }
        .row:before,
        .row:after {
        display: table;
        content: "";
        line-height: 0;
        }
        .row:after {
        clear: both;
        }
        input {
        margin-left: 0;
        }
    }
    @media (max-width: 979px) {
        body {
        padding-top: 0;
        }
    }

    /* Bootstrap alert CSS rules that have not been replaced with our own
        designs. */

    .alert {
        padding: 8px 35px 8px 14px;
        margin-bottom: 20px;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
        background-color: #fcf8e3;
        border: 1px solid #fbeed5;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }
    .alert,
    .alert h4 {
        color: #c09853;
    }
    .alert h4 {
        margin: 0;
    }
    .alert-success {
        background-color: #dff0d8;
        border-color: #d6e9c6;
        color: #468847;
    }
    .alert-success h4 {
        color: #468847;
    }
    .alert-danger,
    .alert-error {
        background-color: #f2dede;
        border-color: #eed3d7;
        color: #b94a48;
    }
    .alert-danger h4,
    .alert-error h4 {
        color: #b94a48;
    }
    .alert-info {
        background-color: #d9edf7;
        border-color: #bce8f1;
        color: #3a87ad;
    }
    .alert-info h4 {
        color: #3a87ad;
    }
}