From f07dae6b256b0b5cb246ca110be1f284af5d735f Mon Sep 17 00:00:00 2001 From: Karl Stolley Date: Fri, 26 Jan 2024 10:39:56 -0600 Subject: [PATCH] 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. --- docs/THIRDPARTY | 7 +- web/src/bundles/app.ts | 1 + web/src/bundles/common.ts | 1 - web/src/bundles/portico.ts | 1 + .../css/{bootstrap.css => bootstrap.app.css} | 0 web/third/bootstrap/css/bootstrap.portico.css | 683 ++++++++++++++++++ web/webpack.assets.json | 8 +- 7 files changed, 698 insertions(+), 3 deletions(-) rename web/third/bootstrap/css/{bootstrap.css => bootstrap.app.css} (100%) create mode 100644 web/third/bootstrap/css/bootstrap.portico.css diff --git a/docs/THIRDPARTY b/docs/THIRDPARTY index c9062bb773..fe7258deab 100644 --- a/docs/THIRDPARTY +++ b/docs/THIRDPARTY @@ -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. diff --git a/web/src/bundles/app.ts b/web/src/bundles/app.ts index c82a954690..82fa5c785f 100644 --- a/web/src/bundles/app.ts +++ b/web/src/bundles/app.ts @@ -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"; diff --git a/web/src/bundles/common.ts b/web/src/bundles/common.ts index da48a5d6ed..d8bd988202 100644 --- a/web/src/bundles/common.ts +++ b/web/src/bundles/common.ts @@ -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"; diff --git a/web/src/bundles/portico.ts b/web/src/bundles/portico.ts index 5c719708d2..d2eaf0104f 100644 --- a/web/src/bundles/portico.ts +++ b/web/src/bundles/portico.ts @@ -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"; diff --git a/web/third/bootstrap/css/bootstrap.css b/web/third/bootstrap/css/bootstrap.app.css similarity index 100% rename from web/third/bootstrap/css/bootstrap.css rename to web/third/bootstrap/css/bootstrap.app.css diff --git a/web/third/bootstrap/css/bootstrap.portico.css b/web/third/bootstrap/css/bootstrap.portico.css new file mode 100644 index 0000000000..7d127640be --- /dev/null +++ b/web/third/bootstrap/css/bootstrap.portico.css @@ -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; + } +} diff --git a/web/webpack.assets.json b/web/webpack.assets.json index 102909b84e..e918a3bcce 100644 --- a/web/webpack.assets.json +++ b/web/webpack.assets.json @@ -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",