diff --git a/web/app/admin/admin.component.scss b/web/app/admin/admin.component.scss index c64395d..5124dc2 100644 --- a/web/app/admin/admin.component.scss +++ b/web/app/admin/admin.component.scss @@ -1,60 +1,56 @@ -//$bgColor: #625F72; -//$hoverColor: #6E8ABC; -//$accentColor: #8ABBFF; +@import "../../style/themes/themes"; -$bgColor: #233046; -$hoverColor: #374752; -$accentColor: #DE6657; +@include themifyComponent() { + .adminNav { + width: 200px; + margin: 0; + padding: 0; + position: fixed; + top: 100px; + left: 0; + bottom: 0; + background-color: themed(adminBgColor); + } -.adminNav { - width: 200px; - margin: 0; - padding: 0; - position: fixed; - top: 120px; - left: 0; - bottom: 0; - background-color: $bgColor; -} + .adminNav li { + list-style: none; + background-color: themed(adminBgColor); + border-left: 5px solid themed(adminBgColor); + padding: 5px 5px 5px 11px; + color: themed(adminFgColor); + opacity: 0.5; + cursor: pointer; + } -.adminNav li { - list-style: none; - background-color: $bgColor; - border-left: 5px solid $bgColor; - padding: 5px 5px 5px 11px; - color: #fff; - opacity: 0.5; - cursor: pointer; -} + .adminNav li:hover, + .adminNav li.active { + opacity: 1; + background-color: themed(adminHoverColor); + border-left: 5px solid themed(adminHoverColor); + } -.adminNav li:hover, -.adminNav li.active { - opacity: 1; - background-color: $hoverColor; - border-left: 5px solid $hoverColor; -} + .adminNav li.active { + border-left: 5px solid themed(adminAccentColor); + } -.adminNav li.active { - border-left: 5px solid $accentColor; -} + .adminContent { + position: fixed; + top: 120px; + left: 200px; + bottom: 0; + right: 0; + padding: 15px; + overflow: auto; + } -.adminContent { - position: fixed; - top: 120px; - left: 200px; - bottom: 0; - right: 0; - padding: 15px; - overflow: auto; -} - -.version { - position: fixed; - bottom: 0; - left: 0; - width: 200px; - text-align: center; - color: #7d7d7d; - font-size: 11px; - font-family: monospace; + .version { + position: fixed; + bottom: 0; + left: 0; + width: 200px; + text-align: center; + color: themed(adminVersionColor); + font-size: 11px; + font-family: monospace; + } } \ No newline at end of file diff --git a/web/app/admin/neb/appservice-config/appservice-config.component.scss b/web/app/admin/neb/appservice-config/appservice-config.component.scss index 779f17d..7c411ea 100644 --- a/web/app/admin/neb/appservice-config/appservice-config.component.scss +++ b/web/app/admin/neb/appservice-config/appservice-config.component.scss @@ -1,6 +1,10 @@ -pre { - margin-top: 10px; - padding: 5px; - border: 1px solid #ccc; - background-color: #eee; +@import "../../../../style/themes/themes"; + +@include themifyComponent() { + pre { + margin-top: 10px; + padding: 5px; + border: 1px solid themed(appserviceConfigPreBorderColor); + background-color: themed(appserviceConfigPreBgColor); + } } \ No newline at end of file diff --git a/web/app/admin/sticker-packs/preview/preview.component.scss b/web/app/admin/sticker-packs/preview/preview.component.scss index a755e7a..7f85018 100644 --- a/web/app/admin/sticker-packs/preview/preview.component.scss +++ b/web/app/admin/sticker-packs/preview/preview.component.scss @@ -1,22 +1,26 @@ -.sticker { - margin: 20px; - padding: 5px; - background-color: #f6fbff; +@import "../../../../style/themes/themes"; - .caption { - display: inline-block; - vertical-align: middle; - margin-left: 20px; +@include themifyComponent() { + .sticker { + margin: 20px; + padding: 5px; + background-color: themed(stickerPreviewBgColor); - .name { - font-size: 1.1em; - font-weight: bold; - display: block; - } + .caption { + display: inline-block; + vertical-align: middle; + margin-left: 20px; - .description { - color: #7d7d7d; - display: block; + .name { + font-size: 1.1em; + font-weight: bold; + display: block; + } + + .description { + color: themed(stickerPreviewFgColor); + display: block; + } } } } \ No newline at end of file diff --git a/web/app/configs/stickerpicker/stickerpicker.component.scss b/web/app/configs/stickerpicker/stickerpicker.component.scss index 36ee5f5..a226755 100644 --- a/web/app/configs/stickerpicker/stickerpicker.component.scss +++ b/web/app/configs/stickerpicker/stickerpicker.component.scss @@ -1,37 +1,42 @@ -.pack { - display: flex; - margin: 20px; - padding: 5px; - background-color: #f6fbff; +@import "../../../style/themes/themes"; - .caption { - flex: 1; - margin-left: 20px; - padding-top: 20px; +@include themifyComponent() { + .pack { + display: flex; + margin: 20px; + padding: 5px; + background-color: themed(stickerpackBgColor); + color: themed(stickerpackFgColor); - .name { - font-size: 1.1em; - font-weight: bold; - display: block; - } + .caption { + flex: 1; + margin-left: 20px; + padding-top: 20px; - .description { - color: #7d7d7d; - display: block; - } + .name { + font-size: 1.1em; + font-weight: bold; + display: block; + } - .toggle-switch { - margin-top: 20px; - margin-right: 10px; - float: right; - } + .description { + color: themed(stickerpackDescriptionColor); + display: block; + } - .author, .license { - font-size: 0.8em; - color: #7d7d7d; + .toggle-switch { + margin-top: 20px; + margin-right: 10px; + float: right; + } - a { - color: #7d7d7d; + .author, .license { + font-size: 0.8em; + color: themed(stickerpackAuthorLicenseColor); + + a { + color: themed(stickerpackAuthorLicenseColor); + } } } } diff --git a/web/app/elements/spinner/spinner.component.scss b/web/app/elements/spinner/spinner.component.scss index 1a5c430..80c9e2a 100644 --- a/web/app/elements/spinner/spinner.component.scss +++ b/web/app/elements/spinner/spinner.component.scss @@ -1,2 +1,4 @@ // component styles are encapsulated and only applied to their components -@import "../../../../node_modules/spinkit/scss/spinners/11-folding-cube"; \ No newline at end of file +@import "../../../../node_modules/spinkit/scss/spinners/11-folding-cube"; + +// see app.scss for the spinner color stuff \ No newline at end of file diff --git a/web/app/home/home.component.scss b/web/app/home/home.component.scss index f72f470..631d632 100644 --- a/web/app/home/home.component.scss +++ b/web/app/home/home.component.scss @@ -1,176 +1,179 @@ // component styles are encapsulated and only applied to their components +@import "../../style/themes/themes"; -.spacer { - width: 85%; - display: block; - border-color: rgba(206, 222, 235, 0.85); - margin-top: 60px; - margin-bottom: 60px; -} - -.shadowed { - box-shadow: 0 20px 40px 20px rgba(206, 222, 235, 0.34); -} - -.info-box { - display: inline-block; - margin: auto; - background-color: #fff; - padding: 50px; - border: 1px solid rgba(143, 45, 86, 0.2); - - h3 { - margin-bottom: 20px; +@include themifyComponent() { + .spacer { + width: 85%; + display: block; + border-color: themed(promoSpacerColor); + margin-top: 60px; + margin-bottom: 60px; } -} -pre { - border: 1px solid rgba(143, 45, 86, 0.7); - padding: 5px; - width: 590px; -} + .shadowed { + box-shadow: 0 20px 40px 20px thtmed(promoShadowColor); + } -.footer { - color: white; - text-align: center; - padding: 50px; - background: linear-gradient(to right, #c95036, #8F2D56); + .info-box { + display: inline-block; + margin: auto; + background-color: themed(promoInfoBgColor); + padding: 50px; + border: 1px solid themed(promoInfoBorderColor); - a { - color: white; + h3 { + margin-bottom: 20px; + } + } + + pre { + border: 1px solid themed(promoPreBorderColor); + padding: 5px; + width: 590px; + } + + .footer { + color: themed(promoFooterFgColor); + text-align: center; + padding: 50px; + background: linear-gradient(to right, themed(promoGradientStartColor), themed(promoGradientEndColor)); + + a { + color: themed(promoFooterFgColor); + font-size: 0.9em; + margin-left: 20px; + } + } + + .links { + position: absolute; + right: 20px; + top: 20px; + } + + .links a { font-size: 0.9em; + color: themed(promoLinksColor); margin-left: 20px; } -} -.links { - position: absolute; - right: 20px; - top: 20px; -} - -.links a { - font-size: 0.9em; - color: #dadada; - margin-left: 20px; -} - -.hero { - color: white; - text-align: center; - background: linear-gradient(to right, #c95036, #8F2D56); -} - -.wrapper { - min-width: 700px; - max-width: 1500px; - padding: 20px; - margin: 70px auto auto; - display: flex; - flex-wrap: wrap; -} - -.made-for-matrix { - height: 45px; -} - -.made-for-matrix-anchor { - margin-left: 20px; -} - -.promo { .hero { - padding-top: 50px; - padding-bottom: 100px; - clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 3vw)); + color: themed(promoHeroFgColor); + text-align: center; + background: linear-gradient(to right, themed(promoGradientStartColor), themed(promoGradientEndColor)); } - .logo { - padding: 20px 20px 40px; + .wrapper { + min-width: 700px; + max-width: 1500px; + padding: 20px; + margin: 70px auto auto; + display: flex; + flex-wrap: wrap; } - .banner { - font-size: 1.2em; - margin-top: 30px; - margin-bottom: 20px; + .made-for-matrix { + height: 45px; } - .try-dimension { - width: 695px; + .made-for-matrix-anchor { + margin-left: 20px; } - .screenshot { - display: inline-block; - margin: 0 70px; - - img { - width: 595px; + .promo { + .hero { + padding-top: 50px; + padding-bottom: 100px; + clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 3vw)); } - } - .integrations { - display: block; - width: 100%; + .logo { + padding: 20px 20px 40px; + } - .title { + .banner { + font-size: 1.2em; + margin-top: 30px; + margin-bottom: 20px; + } + + .try-dimension { + width: 695px; + } + + .screenshot { + display: inline-block; + margin: 0 70px; + + img { + width: 595px; + } + } + + .integrations { display: block; - text-align: center; - margin-bottom: 40px; - } + width: 100%; - .intro { - font-size: 1.3em; - color: #868686; - text-align: center; - } + .title { + display: block; + text-align: center; + margin-bottom: 40px; + } - .integration-list { - display: flex; - flex-wrap: wrap; - justify-content: center; + .intro { + font-size: 1.3em; + color: themed(promoIntroColor); + text-align: center; + } - .integration { - width: 350px; - background-color: #ffffff; - padding: 20px; - margin: 15px; - border: 1px solid rgba(143, 45, 86, 0.2); + .integration-list { + display: flex; + flex-wrap: wrap; + justify-content: center; - img { - margin-right: 25px; - width: 48px; - vertical-align: middle; - } + .integration { + width: 350px; + background-color: themed(promoIntegrationBgColor); + padding: 20px; + margin: 15px; + border: 1px solid themed(promoIntegrationBorderColor); - span { - font-size: 1.2em; + img { + margin-right: 25px; + width: 48px; + vertical-align: middle; + } + + span { + font-size: 1.2em; + } } } } } -} -.non-promo { - .hero { - padding-top: 20px; - } + .non-promo { + .hero { + padding-top: 20px; + } - .logo { - padding: 20px 20px 40px; - height: 150px; - } + .logo { + padding: 20px 20px 40px; + height: 150px; + } - .welcome { - min-width: 700px; - max-width: 800px; - } + .welcome { + min-width: 700px; + max-width: 800px; + } - h4 { - margin-top: 45px; - margin-bottom: 20px; - } + h4 { + margin-top: 45px; + margin-bottom: 20px; + } - .footer { - margin-top: 100px; + .footer { + margin-top: 100px; + } } } \ No newline at end of file diff --git a/web/app/integration-bag/integration-bag.component.scss b/web/app/integration-bag/integration-bag.component.scss index 063ff49..50a70d5 100644 --- a/web/app/integration-bag/integration-bag.component.scss +++ b/web/app/integration-bag/integration-bag.component.scss @@ -1,55 +1,58 @@ // component styles are encapsulated and only applied to their components -.integration-bag { - display: flex; - flex-direction: row; - align-items: stretch; - flex-wrap: wrap; - justify-content: flex-start; -} +@import "../../style/themes/themes"; -.integration { - border: 1px solid #eee; - border-radius: 5px; - margin: 7px; - padding: 6px; - width: calc(325px - 14px); - position: relative; - cursor: pointer; -} +@include themifyComponent() { + .integration-bag { + display: flex; + flex-direction: row; + align-items: stretch; + flex-wrap: wrap; + justify-content: flex-start; + } -.integration .integration-arrow { - display: none; - position: absolute; - top: calc(50% - 12px); // icon happens to be 24px tall - right: 1px; - color: #bbb; -} + .integration { + border: 1px solid themed(integrationBorderColor); + margin: 7px; + padding: 6px; + width: calc(325px - 14px); + position: relative; + cursor: pointer; + } -.integration:hover { - box-shadow: 0 0 9px #888; -} + .integration .integration-arrow { + display: none; + position: absolute; + top: calc(50% - 12px); // icon happens to be 24px tall + right: 1px; + color: #bbb; + } -.integration:hover .integration-arrow { - display: block; -} + .integration:hover { + box-shadow: 0 0 5px 5px themed(integrationShadowColor); + } -.integration .integration-avatar { - width: 50px; - height: 50px; - float: left; -} + .integration:hover .integration-arrow { + display: block; + } -.integration .integration-name { - display: inline-block; - font-size: 1.1em; - font-weight: 100; - padding-left: 10px; -} + .integration .integration-avatar { + width: 50px; + height: 50px; + float: left; + } -.integration .integration-description { - display: block; - font-size: 0.8em; - margin-left: 60px; - margin-right: 5px; - color: #999; + .integration .integration-name { + display: inline-block; + font-size: 1.1em; + font-weight: 100; + padding-left: 10px; + } + + .integration .integration-description { + display: block; + font-size: 0.8em; + margin-left: 60px; + margin-right: 5px; + color: themed(integrationDescriptionColor); + } } \ No newline at end of file diff --git a/web/app/page-header/page-header.component.html b/web/app/page-header/page-header.component.html index a88a348..998218e 100644 --- a/web/app/page-header/page-header.component.html +++ b/web/app/page-header/page-header.component.html @@ -1,9 +1,11 @@ -