Browse Source

2020.12.24

1.深色主題字體大小改變
2.淺色主題新增卡片陰影
master
Ron.wang 4 months ago
parent
commit
97dcead4c4
5 changed files with 293 additions and 28 deletions
  1. +274
    -22
      src/css/cyborg-theme.css
  2. +5
    -0
      src/css/spacelab-theme.css
  3. +2
    -0
      src/scss/cyborg-theme.scss
  4. +6
    -6
      src/scss/cyborg/_variables.scss
  5. +6
    -0
      src/scss/spacelab/_bootswatch.scss

+ 274
- 22
src/css/cyborg-theme.css View File

@ -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;
}


+ 5
- 0
src/css/spacelab-theme.css View File

@ -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 */

+ 2
- 0
src/scss/cyborg-theme.scss View File

@ -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";


+ 6
- 6
src/scss/cyborg/_variables.scss View File

@ -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


+ 6
- 0
src/scss/spacelab/_bootswatch.scss View File

@ -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);
}

Loading…
Cancel
Save