From 97dcead4c4abd7eaa4ae3ba29be02ab85c9230e0 Mon Sep 17 00:00:00 2001 From: "Ron.wang" Date: Thu, 24 Dec 2020 14:30:38 +0800 Subject: [PATCH] =?UTF-8?q?2020.12.24=201.=E6=B7=B1=E8=89=B2=E4=B8=BB?= =?UTF-8?q?=E9=A1=8C=E5=AD=97=E9=AB=94=E5=A4=A7=E5=B0=8F=E6=94=B9=E8=AE=8A?= =?UTF-8?q?=202.=E6=B7=BA=E8=89=B2=E4=B8=BB=E9=A1=8C=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E5=8D=A1=E7=89=87=E9=99=B0=E5=BD=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/css/cyborg-theme.css | 296 ++++++++++++++++++++++++++--- src/css/spacelab-theme.css | 5 + src/scss/cyborg-theme.scss | 2 + src/scss/cyborg/_variables.scss | 12 +- src/scss/spacelab/_bootswatch.scss | 6 + 5 files changed, 293 insertions(+), 28 deletions(-) diff --git a/src/css/cyborg-theme.css b/src/css/cyborg-theme.css index abb3f7c..cfd0cfa 100644 --- a/src/css/cyborg-theme.css +++ b/src/css/cyborg-theme.css @@ -239,7 +239,7 @@ article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { body { margin: 0; font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; - font-size: 0.875rem; + font-size: 1rem; font-weight: 400; line-height: 1.5; color: #adafae; @@ -548,31 +548,31 @@ h1, h2, h3, h4, h5, h6, } h1, .h1 { - font-size: 4rem; + font-size: 2.5rem; } h2, .h2 { - font-size: 3rem; + font-size: 2rem; } h3, .h3 { - font-size: 2.5rem; + font-size: 1.75rem; } h4, .h4 { - font-size: 2rem; + font-size: 1.5rem; } h5, .h5 { - font-size: 1.5rem; + font-size: 1.25rem; } h6, .h6 { - font-size: 0.875rem; + font-size: 1rem; } .lead { - font-size: 1.09375rem; + font-size: 1.25rem; font-weight: 300; } @@ -644,7 +644,7 @@ mark, .blockquote { margin-bottom: 1rem; - font-size: 1.09375rem; + font-size: 1.25rem; } .blockquote-footer { @@ -1993,7 +1993,7 @@ mark, background-color: transparent; border: 1px solid transparent; padding: 0.375rem 1rem; - font-size: 0.875rem; + font-size: 1rem; line-height: 1.5; border-radius: 0.25rem; -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; @@ -2639,14 +2639,14 @@ fieldset:disabled a.btn { .btn-lg { padding: 0.5rem 1rem; - font-size: 1.09375rem; + font-size: 1.25rem; line-height: 1.5; border-radius: 0.3rem; } .btn-sm { padding: 0.25rem 0.5rem; - font-size: 0.76562rem; + font-size: 0.875rem; line-height: 1.5; border-radius: 0.2rem; } @@ -6954,7 +6954,7 @@ a.text-dark:hover, a.text-dark:focus { .pagination-lg .page-link { padding: 0.75rem 1.5rem; - font-size: 1.09375rem; + font-size: 1.25rem; line-height: 1.5; } @@ -6970,7 +6970,7 @@ a.text-dark:hover, a.text-dark:focus { .pagination-sm .page-link { padding: 0.25rem 0.5rem; - font-size: 0.76562rem; + font-size: 0.875rem; line-height: 1.5; } @@ -6989,7 +6989,7 @@ a.text-dark:hover, a.text-dark:focus { width: 100%; height: calc(1.5em + 0.75rem + 2px); padding: 0.375rem 1rem; - font-size: 0.875rem; + font-size: 1rem; font-weight: 400; line-height: 1.5; color: #282828; @@ -7085,14 +7085,14 @@ select.form-control:focus::-ms-value { .col-form-label-lg { padding-top: calc(0.5rem + 1px); padding-bottom: calc(0.5rem + 1px); - font-size: 1.09375rem; + font-size: 1.25rem; line-height: 1.5; } .col-form-label-sm { padding-top: calc(0.25rem + 1px); padding-bottom: calc(0.25rem + 1px); - font-size: 0.76562rem; + font-size: 0.875rem; line-height: 1.5; } @@ -7101,7 +7101,7 @@ select.form-control:focus::-ms-value { width: 100%; padding: 0.375rem 0; margin-bottom: 0; - font-size: 0.875rem; + font-size: 1rem; line-height: 1.5; color: #adafae; background-color: transparent; @@ -7117,7 +7117,7 @@ select.form-control:focus::-ms-value { .form-control-sm { height: calc(1.5em + 0.5rem + 2px); padding: 0.25rem 0.5rem; - font-size: 0.76562rem; + font-size: 0.875rem; line-height: 1.5; border-radius: 0.2rem; } @@ -7125,7 +7125,7 @@ select.form-control:focus::-ms-value { .form-control-lg { height: calc(1.5em + 1rem + 2px); padding: 0.5rem 1rem; - font-size: 1.09375rem; + font-size: 1.25rem; line-height: 1.5; border-radius: 0.3rem; } @@ -7219,7 +7219,7 @@ textarea.form-control { max-width: 100%; padding: 0.25rem 0.5rem; margin-top: .1rem; - font-size: 0.76562rem; + font-size: 0.875rem; line-height: 1.5; color: #fff; background-color: #77b300; @@ -7324,7 +7324,7 @@ textarea.form-control { max-width: 100%; padding: 0.25rem 0.5rem; margin-top: .1rem; - font-size: 0.76562rem; + font-size: 0.875rem; line-height: 1.5; color: #fff; background-color: #cc0000; @@ -7504,6 +7504,258 @@ textarea.form-control { } } +.modal-open { + overflow: hidden; +} + +.modal-open .modal { + overflow-x: hidden; + overflow-y: auto; +} + +.modal { + position: fixed; + top: 0; + left: 0; + z-index: 1050; + display: none; + width: 100%; + height: 100%; + overflow: hidden; + outline: 0; +} + +.modal-dialog { + position: relative; + width: auto; + margin: 0.5rem; + pointer-events: none; +} + +.modal.fade .modal-dialog { + -webkit-transition: -webkit-transform 0.3s ease-out; + transition: -webkit-transform 0.3s ease-out; + transition: transform 0.3s ease-out; + transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; + -webkit-transform: translate(0, -50px); + transform: translate(0, -50px); +} + +@media (prefers-reduced-motion: reduce) { + .modal.fade .modal-dialog { + -webkit-transition: none; + transition: none; + } +} + +.modal.show .modal-dialog { + -webkit-transform: none; + transform: none; +} + +.modal.modal-static .modal-dialog { + -webkit-transform: scale(1.02); + transform: scale(1.02); +} + +.modal-dialog-scrollable { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + max-height: calc(100% - 1rem); +} + +.modal-dialog-scrollable .modal-content { + max-height: calc(100vh - 1rem); + overflow: hidden; +} + +.modal-dialog-scrollable .modal-header, +.modal-dialog-scrollable .modal-footer { + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.modal-dialog-scrollable .modal-body { + overflow-y: auto; +} + +.modal-dialog-centered { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: calc(100% - 1rem); +} + +.modal-dialog-centered::before { + display: block; + height: calc(100vh - 1rem); + height: -webkit-min-content; + height: -moz-min-content; + height: min-content; + content: ""; +} + +.modal-dialog-centered.modal-dialog-scrollable { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + height: 100%; +} + +.modal-dialog-centered.modal-dialog-scrollable .modal-content { + max-height: none; +} + +.modal-dialog-centered.modal-dialog-scrollable::before { + content: none; +} + +.modal-content { + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + width: 100%; + pointer-events: auto; + background-color: #222; + background-clip: padding-box; + border: 1px solid rgba(0, 0, 0, 0.2); + border-radius: 0.3rem; + outline: 0; +} + +.modal-backdrop { + position: fixed; + top: 0; + left: 0; + z-index: 1040; + width: 100vw; + height: 100vh; + background-color: #000; +} + +.modal-backdrop.fade { + opacity: 0; +} + +.modal-backdrop.show { + opacity: 0.5; +} + +.modal-header { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + padding: 1rem 1rem; + border-bottom: 1px solid #282828; + border-top-left-radius: calc(0.3rem - 1px); + border-top-right-radius: calc(0.3rem - 1px); +} + +.modal-header .close { + padding: 1rem 1rem; + margin: -1rem -1rem -1rem auto; +} + +.modal-title { + margin-bottom: 0; + line-height: 1.5; +} + +.modal-body { + position: relative; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + padding: 1rem; +} + +.modal-footer { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + padding: 0.75rem; + border-top: 1px solid #282828; + border-bottom-right-radius: calc(0.3rem - 1px); + border-bottom-left-radius: calc(0.3rem - 1px); +} + +.modal-footer > * { + margin: 0.25rem; +} + +.modal-scrollbar-measure { + position: absolute; + top: -9999px; + width: 50px; + height: 50px; + overflow: scroll; +} + +@media (min-width: 576px) { + .modal-dialog { + max-width: 500px; + margin: 1.75rem auto; + } + .modal-dialog-scrollable { + max-height: calc(100% - 3.5rem); + } + .modal-dialog-scrollable .modal-content { + max-height: calc(100vh - 3.5rem); + } + .modal-dialog-centered { + min-height: calc(100% - 3.5rem); + } + .modal-dialog-centered::before { + height: calc(100vh - 3.5rem); + height: -webkit-min-content; + height: -moz-min-content; + height: min-content; + } + .modal-sm { + max-width: 300px; + } +} + +@media (min-width: 992px) { + .modal-lg, + .modal-xl { + max-width: 800px; + } +} + +@media (min-width: 1200px) { + .modal-xl { + max-width: 1140px; + } +} + .navbar.bg-primary { border: 1px solid #282828; } diff --git a/src/css/spacelab-theme.css b/src/css/spacelab-theme.css index 66bc6ed..c6c0f7a 100644 --- a/src/css/spacelab-theme.css +++ b/src/css/spacelab-theme.css @@ -7957,4 +7957,9 @@ textarea.form-control { .list-group-item h6 { color: inherit; } + +.card { + -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.04); + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.04); +} /*# sourceMappingURL=spacelab-theme.css.map */ \ No newline at end of file diff --git a/src/scss/cyborg-theme.scss b/src/scss/cyborg-theme.scss index ddf9496..1e976a3 100644 --- a/src/scss/cyborg-theme.scss +++ b/src/scss/cyborg-theme.scss @@ -25,6 +25,8 @@ @import "../../node_modules/bootstrap/scss/tables"; @import "../../node_modules/bootstrap/scss/pagination"; @import "../../node_modules/bootstrap/scss/forms"; +@import "../../node_modules/bootstrap/scss/modal"; + @import "../scss/cyborg/bootswatch"; diff --git a/src/scss/cyborg/_variables.scss b/src/scss/cyborg/_variables.scss index 5cd55ee..0949052 100644 --- a/src/scss/cyborg/_variables.scss +++ b/src/scss/cyborg/_variables.scss @@ -49,12 +49,12 @@ $body-color: $gray-400 !default; // stylelint-disable-next-line value-keyword-case $font-family-sans-serif: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif !default; -$font-size-base: .875rem !default; -$h1-font-size: 4rem !default; -$h2-font-size: 3rem !default; -$h3-font-size: 2.5rem !default; -$h4-font-size: 2rem !default; -$h5-font-size: 1.5rem !default; +// $font-size-base: .875rem !default; +// $h1-font-size: 4rem !default; +// $h2-font-size: 3rem !default; +// $h3-font-size: 2.5rem !default; +// $h4-font-size: 2rem !default; +// $h5-font-size: 1.5rem !default; $headings-color: $white !default; // Tables diff --git a/src/scss/spacelab/_bootswatch.scss b/src/scss/spacelab/_bootswatch.scss index e225ae5..bb6bda3 100644 --- a/src/scss/spacelab/_bootswatch.scss +++ b/src/scss/spacelab/_bootswatch.scss @@ -95,3 +95,9 @@ $web-font-path: "https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0, color: inherit; } } + +//Card ================================================================== + +.card{ + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.04); +}