diff --git a/assets/css/_bs-custom-post.scss b/assets/css/_bs-custom-post.scss index 4485c76..00f9108 100644 --- a/assets/css/_bs-custom-post.scss +++ b/assets/css/_bs-custom-post.scss @@ -4,7 +4,7 @@ $theme-colors: map-merge($theme-colors, $custom-colors); /* general styles */ $link-color: $gray-200; $link-decoration: underline; -$link-shade-percentage: 20% !default; +$link-shade-percentage: 20%; $link-hover-color: $primary; /* tables */ @@ -26,18 +26,31 @@ $input-placeholder-color: shade-color($spaceblue-600, 20%); /* pagination */ $pagination-bg: $dark; $pagination-border-color: $spaceblue-600; -$pagination-active-color: $dark; $pagination-hover-color: tint-color($primary, 10%); -$pagination-hover-bg: tint-color($dark, 7%); +$pagination-hover-bg: $component-hover-bg; $pagination-hover-border-color: $spaceblue-600; $pagination-focus-color: tint-color($primary, 10%); $pagination-focus-bg: tint-color($dark, 7%); /* dropdown menus */ $dropdown-dark-bg: $dark; -$dropdown-link-color: $light; -$dropdown-link-hover-color: tint-color($light, 10%); -$dropdown-link-hover-bg: $spaceblue-700; +$dropdown-dark-divider-bg: $spaceblue-600; +$dropdown-dark-link-color: $light; +$dropdown-dark-link-hover-color: $component-hover-color; +$dropdown-dark-link-hover-bg: $component-hover-bg; // was $spaceblue-600 +$dropdown-dark-link-active-color: $component-active-color; +$dropdown-dark-link-active-bg: $component-active-bg; -// $dropdown-link-active-color: tint-color($dark, 10%); -// $dropdown-link-active-bg: $spaceblue-700; \ No newline at end of file +/* alerts */ +// scss-docs-start alert-variables +$alert-padding-y: $spacer; +$alert-padding-x: $spacer; +$alert-margin-bottom: 1rem; +$alert-border-radius: $border-radius; +$alert-link-font-weight: $font-weight-bold; +$alert-border-width: $border-width; +$alert-bg-scale: -40%; +$alert-border-scale: -30%; +$alert-color-scale: 60%; +$alert-dismissible-padding-r: $alert-padding-x * 3; // 3x covers width of x plus default padding on either side +// scss-docs-end alert-variables diff --git a/assets/css/_bs-load.scss b/assets/css/_bs-load.scss index b3f4359..94cbe55 100644 --- a/assets/css/_bs-load.scss +++ b/assets/css/_bs-load.scss @@ -37,9 +37,9 @@ // @import "../../node_modules/bootstrap/scss/breadcrumb"; @import "../../node_modules/bootstrap/scss/pagination"; // @import "../../node_modules/bootstrap/scss/badge"; -// @import "../../node_modules/bootstrap/scss/alert"; +@import "../../node_modules/bootstrap/scss/alert"; // @import "../../node_modules/bootstrap/scss/progress"; -// @import "../../node_modules/bootstrap/scss/list-group"; +@import "../../node_modules/bootstrap/scss/list-group"; // @import "../../node_modules/bootstrap/scss/close"; // @import "../../node_modules/bootstrap/scss/toasts"; // @import "../../node_modules/bootstrap/scss/modal"; diff --git a/assets/css/_bs-vars-pre.scss b/assets/css/_bs-vars-pre.scss index 1f53146..df89e78 100644 --- a/assets/css/_bs-vars-pre.scss +++ b/assets/css/_bs-vars-pre.scss @@ -4,10 +4,10 @@ $blue: #0d6efd; $indigo: #6610f2; $purple: #6f42c1; $pink: #d63384; -$red: #dc3545; +$red: #eb2744; $orange: #fd7e14; -$yellow: #ffc107; -$green: #198754; +$yellow: #EECF6D; +$green: #1db954; $teal: #20c997; $cyan: #0dcaf0; // scss-docs-end color-variables @@ -30,7 +30,7 @@ $gray-800: shade-color($gray, 60%); $gray-900: shade-color($gray, 80%); -// spaceblue is based on coolors.co 'space cadet' #212c40 which was bg color in Lester's original design +// spaceblue is based on coolors.co 'space cadet' #/* 212c40 */ which was bg color in Lester's original design // background will be spaceblue-800 $spaceblue-100: #aebcd5; $spaceblue-200: #93a6c8; @@ -47,7 +47,7 @@ $spaceblue-900: #151c28; // scss-docs-start theme-color-variables $primary: #51A39F; -$secondary: $gray; +$secondary: #BF98A0; $success: $green; $info: $cyan; $warning: $yellow; @@ -77,3 +77,6 @@ $body-color: $gray-200; $text-muted: $gray-400; $component-active-color: $dark; $component-active-bg: $primary; + +$component-hover-color: tint-color($light, 5%); +$component-hover-bg: rgba($white, .125); diff --git a/assets/css/_layout-top-navbar-main.scss b/assets/css/_layout-top-navbar-main.scss index f50cc50..a0262dd 100644 --- a/assets/css/_layout-top-navbar-main.scss +++ b/assets/css/_layout-top-navbar-main.scss @@ -229,14 +229,14 @@ nav#top-navbar-grid-outer { text-transform: inherit !important; &:hover { @extend .text-decoration-none; - color: $dropdown-link-hover-color; - background-color: $dropdown-link-hover-bg; + color: $dropdown-dark-link-hover-color; + background-color: $dropdown-dark-link-hover-bg; } } &.active { .dropdown-item.top-navbar-grid-main-menu-item-link { - color: $dropdown-link-active-color; - background-color: $dropdown-link-active-bg; + color: $dropdown-dark-link-active-color; + background-color: $dropdown-dark-link-active-bg; } } } diff --git a/assets/css/_meetings-plugin.scss b/assets/css/_meetings-plugin.scss index 9d60164..d18af57 100644 --- a/assets/css/_meetings-plugin.scss +++ b/assets/css/_meetings-plugin.scss @@ -1,11 +1,29 @@ #tsml { + .form-control { + background-color: $input-bg; border: 1px solid $primary; + &::-ms-clear, + &::-ms-reveal { display: none; } + &::-webkit-input-placeholder, /* WebKit, Blink, Edge */ + &:-ms-input-placeholder, /* Internet Explorer 10-11 */ + &::-ms-input-placeholder, /* Microsoft Edge */ + &::placeholder /* Most modern browsers support this now. */ + { + color: shade-color($primary, 45%) !important; + } + &:-moz-placeholder, /* Mozilla Firefox 4 to 18 */ + &::-moz-placeholder { /* Mozilla Firefox 19+ */ + color: shade-color($primary, 45%) !important; + opacity: 1; + } } + & .btn, & .btn a { text-decoration: none !important; } - .btn-default { + + .btn.btn-default, a.btn.btn-default { color: $spaceblue-800; background-color: $primary; border: 1px solid $primary; @@ -14,41 +32,213 @@ } &.toggle-view { color: $primary; - background-color: inherit; + background-color: $dark; border: 1px solid $primary; &:hover { - color: $spaceblue-900; - background-color: tint-color($primary, 30%); + color: $pagination-hover-color; + background-color: $pagination-hover-bg; border: 1px solid $primary; } &.active { - color: $spaceblue-900; + color: $dark; background-color: $primary; border: 1px solid $primary; + box-shadow: none !important; &:hover { - color: $spaceblue-900; + color: $dark; background-color: $primary; border: 1px solid $primary; + box-shadow: none !important; } } } } - .table-wrapper { - color: #fff; - } + .dropdown-menu { - color: $gray-200; - // background-color: $spaceblue-900; + @extend .dropdown-menu; + @extend .dropdown-menu-dark; + .divider { + background-color: $dropdown-dark-divider-bg; + } } .dropdown-menu > li > a { - color: $gray-200 !important; - text-decoration: none !important; + @extend .dropdown-item; + color: $gray-300 !important; } - .dropdown-menu > li > a:hover, .dropdown-menu > li.active > a, .dropdown-menu > li.active > a:hover { - color: $spaceblue-900 !important; - text-decoration: none !important; - background-color: $primary !important; + color: $dropdown-dark-link-active-color !important; + background-color: $dropdown-dark-link-active-bg !important; + } + .dropdown-menu > li > a:hover { + color: $dropdown-dark-link-hover-color !important; + background-color: $dropdown-dark-link-hover-bg !important; + } + +} + +// for some reason this needs to be outside of the above styling +#tsml { + #meetings { + .results { + @extend .mt-3; + table { + @extend .table; + @extend .table-dark; + @extend .table-striped; + thead { + th { + padding: $table-cell-padding-y $table-cell-padding-x !important; + } + } + tbody { + tr { + @include media-breakpoint-down(md) { + background-color: $dark; + border-color: $spaceblue-600; + } + + } + } + } + } } } +#tsml .table-striped > tbody > tr:nth-of-type(2n+1), +#tsml #meetings .results table > tbody > tr:nth-of-type(2n+1) { + background-color: var(--bs-table-bg) !important; + box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg); + // @include media-breakpoint-down(md) { + // background-color: var(--bs-table-bg) !important; + // } +} +#tsml #meetings .results table tbody tr.attendance-online .region, +#tsml #meetings .results table tbody tr.attendance-inactive .region { + opacity: inherit; +} +#tsml #meetings .results table tbody tr.attendance-online .location small { + color: $success; +} +#tsml #meetings .results table tbody tr.attendance-inactive .location small { + color: $danger; +} + +#tsml #meetings .results { + .alert { + @extend .alert; + } + .alert-primary { + @extend .alert-primary; + } + .alert-secondary { + @extend .alert-secondary; + } + .alert-success { + @extend .alert-success; + } + .alert-danger { + @extend .alert-danger; + } + .alert-warning { + @extend .alert-warning; + } + .alert-info { + @extend .alert-info; + } + .alert-light { + @extend .alert-light; + } + .alert-dark { + @extend .alert-dark; + } +} + + + +#tsml .page-header { + border-bottom-color: $spaceblue-600 !important; + border-bottom-style: dashed !important; +} + + +#tsml { + + .panel { + @extend .card; + background-color: shade-color($gray-800, 50%) !important; + color: $body-color !important; + &.panel-default { + ul { + &.list-group { + @extend .list-group; + @extend .list-group-flush; + background-color: shade-color($gray-800, 50%) !important; + color: $body-color !important; + li, a { + &.list-group-item { + @extend .list-group-item; + @extend .list-group-item-dark; + background-color: shade-color($gray-800, 50%) !important; + color: $body-color !important; + &.meeting-info { + ul { + li { + hr { + border-color: $spaceblue-300; + } + } + } + } + } + .list-group-item-heading { + color: $text-muted; + } + } + } + } + .panel-heading { + @extend .card-body; + background-color: shade-color($gray-800, 50%) !important; + padding: 1rem 1rem .5rem 1rem !important; + .panel-title { + @extend .card-title; + background-color: inherit !important; + } + } + } + } + +} + + +#tsml #meeting a.btn.btn-default { + @extend .btn; + @extend .btn-outline-primary; + @extend .btn-sm; + color: $primary !important; + margin-bottom: .25rem !important; + // background-color: $spaceblue-900 !important; + // border: 1px solid $primary !important; + svg.icon { + height: 1em; + width: 1em; + top: -0.15em; + position: relative; + } + &:hover { + color: $spaceblue-800 !important; + background-color: $primary !important; + // @extend .btn, :hover; + // @extend .btn-primary, :hover; + } +} + +#tsml #meeting .panel.panel-expandable.expanded .panel-heading { + border-color: $spaceblue-700 !important; +} + +#tsml #meeting #feedback .panel .list-group .list-group-item button { + @extend .btn; + @extend .btn-primary; + @extend .btn-sm; +} diff --git a/assets/css/app.scss b/assets/css/app.scss index 08759f5..07f252e 100644 --- a/assets/css/app.scss +++ b/assets/css/app.scss @@ -23,13 +23,14 @@ body { } /* links */ -a, -#tsml a { +a { &:hover, &:focus { text-decoration-color: $gray-200 !important; } } - +#tsml a { + @extend a; +} /* post styling */ diff --git a/footer.php b/footer.php index 28a8e37..a845aab 100644 --- a/footer.php +++ b/footer.php @@ -31,27 +31,27 @@ namespace WP_RDNYC;