bootstrap: Fork CSS into app, portico copies.

This aims to reduce the cognitive overhead of doing Bootstrap CSS
cleanup by concerning contributors only with Zulip or the portico.
This commit is contained in:
Karl Stolley 2024-01-26 10:39:56 -06:00 committed by Tim Abbott
parent fd4897137b
commit f07dae6b25
7 changed files with 698 additions and 3 deletions

View File

@ -258,7 +258,12 @@ Copyright: 2022, Quansight Labs
License: BSD-3-Clause
Comment: GitHub theme (light and dark); Selectors have been modified for use with Zulip
Files: web/third/bootstrap/css/bootstrap.css
Files: web/third/bootstrap/css/bootstrap.app.css
Copyright: 2012 Twitter, Inc.
License: Apache-2.0
Comment: The software has been modified.
Files: web/third/bootstrap/css/bootstrap.portico.css
Copyright: 2012 Twitter, Inc.
License: Apache-2.0
Comment: The software has been modified.

View File

@ -25,6 +25,7 @@ import "spectrum-colorpicker/spectrum.css";
import "katex/dist/katex.css";
import "flatpickr/dist/flatpickr.css";
import "flatpickr/dist/plugins/confirmDate/confirmDate.css";
import "../../third/bootstrap/css/bootstrap.app.css";
import "../../styles/tooltips.css";
import "../../styles/components.css";
import "../../styles/app_components.css";

View File

@ -3,7 +3,6 @@ import "../../debug-require";
import "../alert_popup";
import "../csrf";
import "../blueslip";
import "../../third/bootstrap/css/bootstrap.css";
import "../../third/bootstrap/css/bootstrap-btn.css";
import "simplebar/dist/simplebar.css";
import "font-awesome/css/font-awesome.css";

View File

@ -2,5 +2,6 @@ import "./common";
import "../portico/header";
import "../portico/google-analytics";
import "../portico/portico_modals";
import "../../third/bootstrap/css/bootstrap.portico.css";
import "../../styles/portico/portico_styles.css";
import "tippy.js/dist/tippy.css";

View File

@ -0,0 +1,683 @@
/*!
* 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.
*/
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;
}
.container {
width: 940px;
}
.row-fluid {
width: 100%;
}
.row-fluid:before,
.row-fluid:after {
display: table;
content: "";
line-height: 0;
}
.row-fluid:after {
clear: both;
}
.container {
margin-right: auto;
margin-left: auto;
}
.container:before,
.container:after {
display: table;
content: "";
line-height: 0;
}
.container:after {
clear: both;
}
p {
margin: 0 0 10px;
}
.lead {
margin-bottom: 20px;
font-size: 21px;
font-weight: 200;
line-height: 30px;
}
.text-warning {
color: #c09853;
}
a.text-warning:hover,
a.text-warning:focus {
color: #a47e3c;
}
.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,
.form-inline .btn-group {
display: inline-block;
}
.nav {
margin-left: 0;
margin-bottom: 20px;
list-style: none;
}
.nav > li > a {
display: block;
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: #eeeeee;
}
.nav > li > a > img {
max-width: none;
}
.nav-list {
padding-left: 15px;
padding-right: 15px;
margin-bottom: 0;
}
.nav-list > li > a {
margin-left: -15px;
margin-right: -15px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.nav-list > li > a {
padding: 3px 15px;
}
.nav-list > .active > a,
.nav-list > .active > a:hover,
.nav-list > .active > a:focus {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
background-color: #0088cc;
}
.nav-list .divider {
height: 1px;
margin: 9px 1px;
overflow: hidden;
background-color: #e5e5e5;
border-bottom: 1px solid #ffffff;
}
.nav .dropdown-toggle .caret {
border-top-color: #0088cc;
border-bottom-color: #0088cc;
margin-top: 6px;
}
.nav .dropdown-toggle:hover .caret,
.nav .dropdown-toggle:focus .caret {
border-top-color: #005580;
border-bottom-color: #005580;
}
/* move down carets for tabs */
.nav .active .dropdown-toggle .caret {
border-top-color: #fff;
border-bottom-color: #fff;
}
.nav > .dropdown.active > a:hover,
.nav > .dropdown.active > a:focus {
cursor: pointer;
}
.nav > li.dropdown.open.active > a:hover,
.nav > li.dropdown.open.active > a:focus {
color: #ffffff;
background-color: #999999;
border-color: #999999;
}
.nav li.dropdown.open .caret,
.nav li.dropdown.open.active .caret,
.nav li.dropdown.open a:hover .caret,
.nav li.dropdown.open a:focus .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
opacity: 1;
}
.tab-content {
overflow: auto;
}
.tab-content > .tab-pane {
display: none;
}
.tab-content > .active {
display: block;
}
.nav > .disabled > a {
color: #999999;
}
.nav > .disabled > a:hover,
.nav > .disabled > a:focus {
text-decoration: none;
background-color: transparent;
cursor: default;
}
.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 .close {
position: relative;
top: -2px;
right: -21px;
line-height: 20px;
}
.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;
}
.dropup,
.dropdown {
position: relative;
}
.dropdown-toggle:active,
.open .dropdown-toggle {
outline: 0;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
background-color: #ffffff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
.dropdown-menu .divider {
height: 1px;
margin: 9px 1px;
overflow: hidden;
background-color: #e5e5e5;
border-bottom: 1px solid #ffffff;
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 20px;
color: #333333;
white-space: nowrap;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
text-decoration: none;
color: #ffffff;
background-color: #0081c2;
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat: repeat-x;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
color: #ffffff;
text-decoration: none;
outline: 0;
background-color: #0081c2;
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat: repeat-x;
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
color: #999999;
}
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
cursor: default;
}
.open > .dropdown-menu {
display: block;
}
.dropdown-backdrop {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: 990;
}
.dropup .caret {
border-top: 0;
border-bottom: 4px solid #000000;
content: "";
}
.dropup .dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: 1px;
}
.typeahead {
z-index: 1051;
margin-top: 2px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.close {
float: right;
font-size: 20px;
font-weight: bold;
line-height: 20px;
color: #000000;
text-shadow: 0 1px 0 #ffffff;
opacity: 0.2;
}
.close:hover,
.close:focus {
color: #000000;
text-decoration: none;
cursor: pointer;
opacity: 0.4;
}
button.close {
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
}
.hide {
display: none;
}
.show {
display: block;
}
.invisible {
visibility: hidden;
}
.fade {
opacity: 0;
-webkit-transition: opacity 0.15s linear;
-moz-transition: opacity 0.15s linear;
-o-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
}
.fade.in {
opacity: 1;
}
@-ms-viewport {
width: device-width;
}
.hidden {
display: none;
visibility: hidden;
}
@media (max-width: 767px) {
body {
padding-left: 20px;
padding-right: 20px;
}
.container {
width: auto;
}
.row-fluid {
width: 100%;
}
.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;
}
.container {
width: 724px;
}
.row-fluid {
width: 100%;
}
.row-fluid:before,
.row-fluid:after {
display: table;
content: "";
line-height: 0;
}
.row-fluid: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;
}
.container {
width: 1170px;
}
.row-fluid {
width: 100%;
}
.row-fluid:before,
.row-fluid:after {
display: table;
content: "";
line-height: 0;
}
.row-fluid:after {
clear: both;
}
input {
margin-left: 0;
}
}
@media (max-width: 979px) {
body {
padding-top: 0;
}
.navbar .container {
width: auto;
max-width: 724px; /* same as a normal container */
padding: 0;
}
.navbar .brand {
padding-left: 10px;
padding-right: 10px;
margin: 0 0 0 -5px;
}
}

View File

@ -1,5 +1,6 @@
{
"activity": [
"./third/bootstrap/css/bootstrap.portico.css",
"./src/bundles/common",
"sorttable",
"./src/analytics/activity",
@ -40,7 +41,10 @@
"./styles/portico/billing.css"
],
"portico": ["./src/bundles/portico"],
"error-styles": ["./third/bootstrap/css/bootstrap.css", "./styles/portico/portico_styles.css"],
"error-styles": [
"./third/bootstrap/css/bootstrap.portico.css",
"./styles/portico/portico_styles.css"
],
"common": ["./src/bundles/common"],
"help": [
"./src/bundles/portico",
@ -96,10 +100,12 @@
"signup": ["./src/bundles/portico", "jquery-validation", "./src/portico/signup"],
"register": ["./src/bundles/portico", "jquery-validation", "./src/portico/signup"],
"confirm-preregistrationuser": [
"./third/bootstrap/css/bootstrap.portico.css",
"./src/bundles/common",
"./src/portico/confirm-preregistrationuser"
],
"support": [
"./third/bootstrap/css/bootstrap.portico.css",
"./src/bundles/common",
"sorttable",
"./src/analytics/activity",