mirror of
https://github.com/turt2live/matrix-dimension.git
synced 2024-10-01 01:05:53 -04:00
Add a dark theme
Fixes https://github.com/turt2live/matrix-dimension/issues/153
This commit is contained in:
Travis Ralston
parent
52708afa7c
commit
c9bb3aba37
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,2 +1,4 @@
|
||||
// component styles are encapsulated and only applied to their components
|
||||
@import "../../../../node_modules/spinkit/scss/spinners/11-folding-cube";
|
||||
@import "../../../../node_modules/spinkit/scss/spinners/11-folding-cube";
|
||||
|
||||
// see app.scss for the spinner color stuff
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
@ -1,9 +1,11 @@
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<h2 class="pageName">{{ pageName }}</h2>
|
||||
<breadcrumb [allowBootstrap]="true" class="dimension-breadcrumb"></breadcrumb>
|
||||
</div>
|
||||
<div class="quickAction">
|
||||
<ng-content></ng-content>
|
||||
<div class="wrapper">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<h2 class="pageName">{{ pageName }}</h2>
|
||||
<breadcrumb [allowBootstrap]="true" class="dimension-breadcrumb"></breadcrumb>
|
||||
</div>
|
||||
<div class="quickAction">
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,31 +1,40 @@
|
||||
// component styles are encapsulated and only applied to their components
|
||||
.header {
|
||||
width: 100%;
|
||||
margin-top: 30px;
|
||||
border-top: 1px solid #e7eaec;
|
||||
border-bottom: 1px solid #e7eaec;
|
||||
background-color: #fff;
|
||||
}
|
||||
@import "../../style/themes/themes";
|
||||
|
||||
.header .title {
|
||||
margin: 0;
|
||||
width: 83.333333%; // col-sm-10
|
||||
padding: 15px;
|
||||
display: inline-block;
|
||||
}
|
||||
@include themifyComponent() {
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
padding-top: 10px;
|
||||
background: linear-gradient(to right, themed(headerGradientStartColor), themed(headerGradientEndColor));
|
||||
}
|
||||
|
||||
.header .title .pageName {
|
||||
font-weight: 100;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.header {
|
||||
width: 100%;
|
||||
border-top: 1px solid themed(headerBorderColor);
|
||||
border-bottom: 1px solid themed(headerBorderColor);
|
||||
background-color: themed(headerBgColor);
|
||||
}
|
||||
|
||||
.header .quickAction {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
float: right;
|
||||
text-align: right;
|
||||
display: inline-block;
|
||||
width: 15.666667%; // col-sm-2
|
||||
position: relative;
|
||||
.header .title {
|
||||
margin: 0;
|
||||
width: 83.333333%; // col-sm-10
|
||||
padding: 15px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.header .title .pageName {
|
||||
font-weight: 100;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header .quickAction {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
float: right;
|
||||
text-align: right;
|
||||
display: inline-block;
|
||||
width: 15.666667%; // col-sm-2
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
@ -1,8 +1,12 @@
|
||||
// component styles are encapsulated and only applied to their components
|
||||
.stickerpacks {
|
||||
position: relative;
|
||||
top: -15px;
|
||||
padding-left: 10px;
|
||||
font-size: 0.8em;
|
||||
color: #525252;
|
||||
@import "../../../style/themes/themes";
|
||||
|
||||
@include themifyComponent() {
|
||||
.stickerpacks {
|
||||
position: relative;
|
||||
top: -15px;
|
||||
padding-left: 10px;
|
||||
font-size: 0.8em;
|
||||
color: themed(stickerpacksNotifFgColor);
|
||||
}
|
||||
}
|
||||
@ -1,47 +1,51 @@
|
||||
// component styles are encapsulated and only applied to their components
|
||||
.control-page {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #eee;
|
||||
color: #222;
|
||||
}
|
||||
@import "../../../style/themes/themes";
|
||||
|
||||
.loading-badge {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
position: relative;
|
||||
top: calc(50% - 10px);
|
||||
}
|
||||
@include themifyComponent() {
|
||||
.control-page {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: themed(genericControlBgColor);
|
||||
color: themed(genericControlFgColor);
|
||||
}
|
||||
|
||||
.embed-failed {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
height: 300px;
|
||||
top: calc(50% - 150px);
|
||||
}
|
||||
.loading-badge {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
position: relative;
|
||||
top: calc(50% - 10px);
|
||||
}
|
||||
|
||||
.embed-failed .ban {
|
||||
font-size: 145px;
|
||||
color: #bd362f;
|
||||
}
|
||||
.embed-failed {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
height: 300px;
|
||||
top: calc(50% - 150px);
|
||||
}
|
||||
|
||||
iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.embed-failed .ban {
|
||||
font-size: 145px;
|
||||
color: themed(widgetBannedSymbolColor);
|
||||
}
|
||||
|
||||
.toggleFullscreen {
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.toggleFullscreen {
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
@ -1,29 +1,33 @@
|
||||
// component styles are encapsulated and only applied to their components
|
||||
#jitsiContainer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: none;
|
||||
}
|
||||
@import "../../../style/themes/themes";
|
||||
|
||||
.join-conference-wrapper {
|
||||
display: table;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
@include themifyComponent() {
|
||||
#jitsiContainer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.join-conference-boat {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.join-conference-wrapper {
|
||||
display: table;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: themed(jitsiWelcomeBgColor);
|
||||
}
|
||||
|
||||
.join-conference-prompt {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 90%;
|
||||
text-align: center;
|
||||
.join-conference-boat {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.join-conference-prompt {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 90%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@ -1,80 +1,84 @@
|
||||
// component styles are encapsulated and only applied to their components
|
||||
.control-page {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #eee;
|
||||
color: #222;
|
||||
}
|
||||
@import "../../../style/themes/themes";
|
||||
|
||||
.loading-badge {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
position: relative;
|
||||
top: calc(50% - 10px);
|
||||
}
|
||||
@include themifyComponent() {
|
||||
.control-page {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: themed(stickerPickerControlBgColor);
|
||||
color: themed(stickerPickerControlFgColor);
|
||||
}
|
||||
|
||||
.auth-error {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
height: 300px;
|
||||
top: calc(50% - 150px);
|
||||
color: #bd362f;
|
||||
}
|
||||
.loading-badge {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
position: relative;
|
||||
top: calc(50% - 10px);
|
||||
}
|
||||
|
||||
.sticker-picker {
|
||||
margin: 15px 15px 30px;
|
||||
.auth-error {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
height: 300px;
|
||||
top: calc(50% - 150px);
|
||||
color: themed(stickerPickerErrorColor);
|
||||
}
|
||||
|
||||
.sticker-pack {
|
||||
.header {
|
||||
margin-top: 15px;
|
||||
margin-left: 3px;
|
||||
.sticker-picker {
|
||||
margin: 15px 15px 30px;
|
||||
|
||||
.title {
|
||||
font-weight: 700;
|
||||
color: #222222;
|
||||
}
|
||||
.sticker-pack {
|
||||
.header {
|
||||
margin-top: 15px;
|
||||
margin-left: 3px;
|
||||
|
||||
.license {
|
||||
font-size: 0.6em;
|
||||
font-weight: 300;
|
||||
color: #b5b5b5;
|
||||
margin-top: 3px;
|
||||
float: right;
|
||||
.title {
|
||||
font-weight: 700;
|
||||
color: themed(stickerPickerTitleColor);
|
||||
}
|
||||
|
||||
a {
|
||||
color: #b5b5b5;
|
||||
.license {
|
||||
font-size: 0.6em;
|
||||
font-weight: 300;
|
||||
color: themed(stickerPickerLicenseColor);
|
||||
margin-top: 3px;
|
||||
float: right;
|
||||
|
||||
a {
|
||||
color: themed(stickerPickerLicenseColor);
|
||||
}
|
||||
}
|
||||
|
||||
.author {
|
||||
font-size: 0.6em;
|
||||
font-weight: 300;
|
||||
color: themed(stickerPickerAuthorColor);
|
||||
display: block;
|
||||
|
||||
a {
|
||||
color: themed(stickerPickerAuthorColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.author {
|
||||
font-size: 0.6em;
|
||||
font-weight: 300;
|
||||
color: #222222;
|
||||
display: block;
|
||||
.stickers {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
a {
|
||||
color: #222222;
|
||||
.sticker {
|
||||
padding: 5px;
|
||||
margin: 2px;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
background-color: themed(stickerPickerStickerBgColor);
|
||||
box-shadow: 0 2px 6px themed(stickerPickerShadowColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stickers {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.sticker {
|
||||
padding: 5px;
|
||||
margin: 2px;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 6px hsla(0, 0%, 0%, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.9 KiB After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.4 KiB After Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.3 KiB After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.5 KiB After Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.2 KiB After Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.3 KiB After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 4.0 KiB |
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="description" content="An alternative integrations manager for Riot. Check out #dimension:t2l.io for more information.">
|
||||
<meta name="description" content="An open source integrations manager for Matrix. Check out #dimension:t2bot.io for more information.">
|
||||
|
||||
<title>Dimension</title>
|
||||
|
||||
@ -16,11 +16,94 @@
|
||||
<meta name="msapplication-config" content="img/logo/favicon/browserconfig.xml">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
|
||||
<style type="text/css">
|
||||
body, html {
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
body.theme-dark {
|
||||
background-color: #4a4a4a;
|
||||
}
|
||||
|
||||
body.theme-light {
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
|
||||
.app-loading {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.app-loading .spinner {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
animation: rotate 2s linear infinite;
|
||||
transform-origin: center center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.app-loading .spinner .path {
|
||||
stroke-dasharray: 1, 200;
|
||||
stroke-dashoffset: 0;
|
||||
animation: dash 1.5s ease-in-out infinite;
|
||||
stroke-linecap: round;
|
||||
stroke: #a0a0a0;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dash {
|
||||
0% {
|
||||
stroke-dasharray: 1, 200;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
50% {
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: -35px;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: -124px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<base href="/">
|
||||
</head>
|
||||
<body>
|
||||
<my-app>Loading...</my-app>
|
||||
<body class="app-body">
|
||||
<script type="text/javascript">
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const theme = urlParams.get("theme") || "light";
|
||||
const allowedThemes = ["dark", "light"];
|
||||
if (theme && allowedThemes.indexOf(theme) !== -1) {
|
||||
const body = document.getElementsByTagName("body");
|
||||
for (const element of body) {
|
||||
element.className += " theme-" + theme;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<my-app class="main-app">
|
||||
<div class="app-loading">
|
||||
<svg class="spinner" viewBox="25 25 50 50">
|
||||
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
</my-app>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -2,48 +2,62 @@
|
||||
// In it's current position (as a component), the component-level stylesheet cannot access the
|
||||
// elements, so we specify it in a more generic location.
|
||||
|
||||
.dimension-breadcrumb {
|
||||
.fluid-bread {
|
||||
padding: 0;
|
||||
@import "themes/themes";
|
||||
|
||||
.main-app {
|
||||
@include themify() {
|
||||
.dimension-breadcrumb {
|
||||
.fluid-bread {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.fluid-bread .container {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.fluid-bread .container .breadcrumb {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.fluid-bread .breadcrumb-item a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.fluid-bread .breadcrumb-item.active {
|
||||
color: themed(activeBreadcrumbColor);
|
||||
}
|
||||
|
||||
font-size: 13px;
|
||||
display: block;
|
||||
padding-top: 4px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.header .quickAction .closeButton .scalarClose {
|
||||
position: absolute;
|
||||
top: 19px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.header .quickAction .adminButton {
|
||||
position: absolute;
|
||||
top: 19px;
|
||||
right: 55px;
|
||||
}
|
||||
|
||||
.header .quickAction .headerButton {
|
||||
font-size: 35px;
|
||||
cursor: pointer;
|
||||
color: themed(quickActionColor);
|
||||
}
|
||||
|
||||
.header .quickAction .headerButton:hover {
|
||||
color: themed(quickActionHoverColor);
|
||||
}
|
||||
}
|
||||
|
||||
.fluid-bread .container {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.fluid-bread .container .breadcrumb {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.fluid-bread .breadcrumb-item a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
font-size: 13px;
|
||||
display: block;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.header .quickAction .closeButton .scalarClose {
|
||||
position: absolute;
|
||||
top: 19px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.header .quickAction .adminButton {
|
||||
position: absolute;
|
||||
top: 19px;
|
||||
right: 55px;
|
||||
}
|
||||
|
||||
.header .quickAction .headerButton {
|
||||
font-size: 35px;
|
||||
cursor: pointer;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.header .quickAction .headerButton:hover {
|
||||
color: #888;
|
||||
}
|
||||
@ -1,19 +1,28 @@
|
||||
// styles in src/style directory are applied to the whole page
|
||||
@import url('https://fonts.googleapis.com/css?family=Open+Sans:100|Roboto:300');
|
||||
@import '../../node_modules/angular2-toaster/toaster';
|
||||
@import "themes/themes";
|
||||
@import "components/ibox";
|
||||
@import "components/dialog";
|
||||
@import "components/bootstrap_override";
|
||||
@import "riot";
|
||||
|
||||
body {
|
||||
background: #b0bbbf1f;
|
||||
//background: #6268680d;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #333;
|
||||
font-family: 'Roboto', 'Open Sans', Arial, sans-serif;
|
||||
}
|
||||
|
||||
@include themifyRoot(){
|
||||
color: themed(defaultFgColor);
|
||||
|
||||
// HACK: We specify the spinner color here because we can't use the mixin
|
||||
// in the spinner's css due to angular scoping
|
||||
.sk-cube:before {
|
||||
background-color: themed(spinnerColor) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// HACK: Work around dialog not showing up
|
||||
// ref: https://github.com/shlomiassaf/angular2-modal/issues/280
|
||||
.fade.in {
|
||||
|
||||
30
web/style/components/bootstrap_override.scss
vendored
Normal file
30
web/style/components/bootstrap_override.scss
vendored
Normal file
@ -0,0 +1,30 @@
|
||||
@import "../themes/themes";
|
||||
|
||||
.main-app {
|
||||
@include themify(){
|
||||
a {
|
||||
color: themed(anchorColor);
|
||||
}
|
||||
|
||||
table, td, th {
|
||||
border-color: themed(tableBorderColor);
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: themed(codeBgColor);
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: themed(altMutedColor) !important;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
color: themed(formControlFgColor);
|
||||
background-color: themed(formControlBgColor);
|
||||
}
|
||||
|
||||
.form-control::placeholder {
|
||||
color: themed(formControlPlaceholderColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,21 +1,27 @@
|
||||
.dialog {
|
||||
.dialog-header {
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding: 20px;
|
||||
@import "../themes/themes";
|
||||
|
||||
h4 {
|
||||
margin: 0;
|
||||
@include themifyRoot() {
|
||||
.dialog {
|
||||
background-color: themed(dialogBgColor);
|
||||
color: themed(dialogFgColor);
|
||||
|
||||
.dialog-header {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid themed(dialogBorderColor);
|
||||
|
||||
h4 {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
padding: 20px;
|
||||
border-top: 1px solid themed(dialogFooterBorderColor);
|
||||
background-color: themed(dialogFooterBackgroundColor);
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-content {
|
||||
padding: 20px;
|
||||
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
padding: 20px;
|
||||
border-top: 1px solid #bbb;
|
||||
background-color: #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,34 +1,40 @@
|
||||
.ibox {
|
||||
background-color: #fff;
|
||||
padding: 0;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: 0 2px 4px hsla(0, 0%, 0%, 0.2);
|
||||
}
|
||||
@import "../themes/themes";
|
||||
|
||||
.ibox .ibox-title {
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid #e7eaec;
|
||||
border-top: 2px solid #e7eaec;
|
||||
}
|
||||
.main-app {
|
||||
@include themify() {
|
||||
.ibox {
|
||||
background-color: themed('containerBgColor');
|
||||
padding: 0;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: 0 2px 4px themed('containerShadowColor');
|
||||
}
|
||||
|
||||
.ibox .ibox-title h5 {
|
||||
display: inline;
|
||||
font-size: 1.1em;
|
||||
padding: 5px;
|
||||
margin: 0;
|
||||
}
|
||||
.ibox .ibox-title {
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid themed('containerBorderColor');
|
||||
border-top: 2px solid themed('containerBorderColor');
|
||||
}
|
||||
|
||||
.ibox .ibox-content {
|
||||
padding: 15px;
|
||||
}
|
||||
.ibox .ibox-title h5 {
|
||||
display: inline;
|
||||
font-size: 1.1em;
|
||||
padding: 5px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ibox .ibox-title .ibox-icon {
|
||||
float: right;
|
||||
margin-top: 4px;
|
||||
margin-right: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ibox .ibox-content {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.ibox .ibox-title.ibox-title-collapsible {
|
||||
cursor: pointer;
|
||||
.ibox .ibox-title .ibox-icon {
|
||||
float: right;
|
||||
margin-top: 4px;
|
||||
margin-right: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ibox .ibox-title.ibox-title-collapsible {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
62
web/style/themes/_themes.scss
Normal file
62
web/style/themes/_themes.scss
Normal file
@ -0,0 +1,62 @@
|
||||
@import "light";
|
||||
@import "dark";
|
||||
|
||||
$themes: (
|
||||
dark: $theme_dark,
|
||||
light: $theme_light,
|
||||
);
|
||||
|
||||
@mixin themify($themes: $themes) {
|
||||
@each $theme, $map in $themes {
|
||||
|
||||
.theme-#{$theme} & {
|
||||
$theme-map: () !global;
|
||||
@each $key, $submap in $map {
|
||||
$value: map-get(map-get($themes, $theme), '#{$key}');
|
||||
$theme-map: map-merge($theme-map, ($key: $value)) !global;
|
||||
}
|
||||
|
||||
@content;
|
||||
$theme-map: null !global;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@mixin themifyRoot($themes: $themes) {
|
||||
@each $theme, $map in $themes {
|
||||
|
||||
.theme-#{$theme} {
|
||||
$theme-map: () !global;
|
||||
@each $key, $submap in $map {
|
||||
$value: map-get(map-get($themes, $theme), '#{$key}');
|
||||
$theme-map: map-merge($theme-map, ($key: $value)) !global;
|
||||
}
|
||||
|
||||
@content;
|
||||
$theme-map: null !global;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@mixin themifyComponent($themes: $themes) {
|
||||
@each $theme, $map in $themes {
|
||||
|
||||
:host-context(.theme-#{$theme}) {
|
||||
$theme-map: () !global;
|
||||
@each $key, $submap in $map {
|
||||
$value: map-get(map-get($themes, $theme), '#{$key}');
|
||||
$theme-map: map-merge($theme-map, ($key: $value)) !global;
|
||||
}
|
||||
|
||||
@content;
|
||||
$theme-map: null !global;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@function themed($key) {
|
||||
@return map-get($theme-map, $key);
|
||||
}
|
||||
85
web/style/themes/dark.scss
Normal file
85
web/style/themes/dark.scss
Normal file
@ -0,0 +1,85 @@
|
||||
$theme_dark: (
|
||||
bodyBgColor: rgba(47, 50, 51, 0.85),
|
||||
defaultFgColor: #eaeaea,
|
||||
headerColor: #f9f9f9,
|
||||
mutedColor: #d6d6d6,
|
||||
altMutedColor: #c4cdd4,
|
||||
anchorColor: #82c5ff,
|
||||
tableBorderColor: #1e1e1e,
|
||||
codeBgColor: #323233,
|
||||
spinnerColor: #d4d4d4,
|
||||
formControlBgColor: #494b4e,
|
||||
formControlFgColor: #fff,
|
||||
formControlPlaceholderColor: #969696,
|
||||
activeBreadcrumbColor: #afbfca,
|
||||
|
||||
stickerpacksNotifBgColor: #525252,
|
||||
stickerpackBgColor: #676a6d,
|
||||
stickerpackFgColor: #eee,
|
||||
stickerpackDescriptionColor: #dedddd,
|
||||
stickerpackAuthorLicenseColor: #dedddd,
|
||||
stickerPreviewBgColor: #676a6d,
|
||||
stickerPreviewFgColor: #dedddd,
|
||||
|
||||
headerBgColor: rgb(47, 47, 47),
|
||||
headerBorderColor: #585858,
|
||||
headerGradientStartColor: rgba(201, 80, 54, 0.7),
|
||||
headerGradientEndColor: rgba(143, 45, 86, 0.7),
|
||||
|
||||
containerBgColor: rgba(47, 47, 47, 0.66),
|
||||
containerShadowColor: hsla(0, 0%, 0%, 0.2),
|
||||
containerBorderColor: rgb(79, 79, 79),
|
||||
|
||||
quickActionColor: #7b7b7b,
|
||||
quickActionHoverColor: #fff,
|
||||
|
||||
dialogBgColor: #464646,
|
||||
dialogFgColor: #ececec,
|
||||
dialogBorderColor: #212121,
|
||||
dialogFooterBorderColor: #212121,
|
||||
dialogFooterBackgroundColor: #2d2d2d,
|
||||
|
||||
stickerPickerControlBgColor: #eee,
|
||||
stickerPickerControlFgColor: #222,
|
||||
stickerPickerErrorColor: #bd362f,
|
||||
stickerPickerTitleColor: #222,
|
||||
stickerPickerLicenseColor: #b5b5b5,
|
||||
stickerPickerAuthorColor: #222,
|
||||
stickerPickerStickerBgColor: #fff,
|
||||
stickerPickerShadowColor: hsla(0, 0%, 0%, 0.2),
|
||||
|
||||
jitsiWelcomeBgColor: #fff,
|
||||
|
||||
genericControlBgColor: #eee,
|
||||
genericControlFgColor: #222,
|
||||
widgetBannedSymbolColor: #bd362f,
|
||||
|
||||
integrationBorderColor: rgba(148, 148, 148, 0.19),
|
||||
integrationShadowColor: rgba(89, 98, 105, 0.28),
|
||||
integrationDescriptionColor: #bcc0c1,
|
||||
|
||||
promoSpacerColor: rgba(206, 222, 235, 0.85),
|
||||
promoShadowColor: rgba(206, 222, 235, 0.34),
|
||||
promoInfoBgColor: #fff,
|
||||
promoInfoBorderColor: rgba(143, 45, 86, 0.2),
|
||||
promoPreBorderColor: rgba(143, 45, 86, 0.7),
|
||||
promoFooterFgColor: #fff,
|
||||
promoGradientStartColor: #c95036,
|
||||
promoGradientEndColor: #8F2D56,
|
||||
promoIntroColor: #868686,
|
||||
promoIntegrationBgColor: #fff,
|
||||
promoIntegrationBorderColor: rgba(143, 45, 86, 0.2),
|
||||
promoLinksColor: #dadada,
|
||||
promoHeroFgColor: #fff,
|
||||
|
||||
adminBgColor: #233046,
|
||||
adminFgColor: #fff,
|
||||
adminHoverColor: #374752,
|
||||
adminAccentColor: #DE6657,
|
||||
adminVersionColor: #7d7d7d,
|
||||
|
||||
appserviceConfigPreFgColor: #eff8ff,
|
||||
appserviceConfigPreBorderColor: #717171,
|
||||
appserviceConfigPreBgColor: #333,
|
||||
);
|
||||
|
||||
84
web/style/themes/light.scss
Normal file
84
web/style/themes/light.scss
Normal file
@ -0,0 +1,84 @@
|
||||
$theme_light: (
|
||||
bodyBgColor: rgba(176, 187, 191, 0.12),
|
||||
defaultFgColor: #333,
|
||||
headerColor: #333,
|
||||
mutedColor: #999,
|
||||
altMutedColor: #636c72,
|
||||
anchorColor: #0275d8,
|
||||
tableBorderColor: #eceeef,
|
||||
codeBgColor: #f7f7f9,
|
||||
spinnerColor: #333,
|
||||
formControlBgColor: #fff,
|
||||
formControlFgColor: #464a4c,
|
||||
formControlPlaceholderColor: #7d8487,
|
||||
activeBreadcrumbColor: #636c72,
|
||||
|
||||
stickerpacksNotifFgColor: #525252,
|
||||
stickerpackBgColor: #f6fbff,
|
||||
stickerpackFgColor: #222,
|
||||
stickerpackDescriptionColor: #7d7d7d,
|
||||
stickerpackAuthorLicenseColor: #7d7d7d,
|
||||
stickerPreviewBgColor: #f6fbff,
|
||||
stickerPreviewFgColor: #7d7d7d,
|
||||
|
||||
headerBgColor: #fff,
|
||||
headerBorderColor: #e7eaec,
|
||||
headerGradientStartColor: rgba(201, 80, 54, 0.7),
|
||||
headerGradientEndColor: rgba(143, 45, 86, 0.7),
|
||||
|
||||
containerBgColor: #fff,
|
||||
containerShadowColor: hsla(0, 0%, 0%, 0.2),
|
||||
containerBorderColor: #e7eaec,
|
||||
|
||||
quickActionColor: #313131,
|
||||
quickActionHoverColor: #0b0b0b,
|
||||
|
||||
dialogBgColor: #fff,
|
||||
dialogFgColor: #222,
|
||||
dialogBorderColor: #ddd,
|
||||
dialogFooterBorderColor: #bbb,
|
||||
dialogFooterBackgroundColor: #ddd,
|
||||
|
||||
stickerPickerControlBgColor: #eee,
|
||||
stickerPickerControlFgColor: #222,
|
||||
stickerPickerErrorColor: #bd362f,
|
||||
stickerPickerTitleColor: #222,
|
||||
stickerPickerLicenseColor: #b5b5b5,
|
||||
stickerPickerAuthorColor: #222,
|
||||
stickerPickerStickerBgColor: #fff,
|
||||
stickerPickerShadowColor: hsla(0, 0%, 0%, 0.2),
|
||||
|
||||
jitsiWelcomeBgColor: #fff,
|
||||
|
||||
genericControlBgColor: #eee,
|
||||
genericControlFgColor: #222,
|
||||
widgetBannedSymbolColor: #bd362f,
|
||||
|
||||
integrationBorderColor: rgba(143, 45, 86, 0.2),
|
||||
integrationShadowColor: rgba(206, 222, 235, 0.34),
|
||||
integrationDescriptionColor: #999,
|
||||
|
||||
promoSpacerColor: rgba(206, 222, 235, 0.85),
|
||||
promoShadowColor: rgba(206, 222, 235, 0.34),
|
||||
promoInfoBgColor: #fff,
|
||||
promoInfoBorderColor: rgba(143, 45, 86, 0.2),
|
||||
promoPreBorderColor: rgba(143, 45, 86, 0.7),
|
||||
promoFooterFgColor: #fff,
|
||||
promoGradientStartColor: #c95036,
|
||||
promoGradientEndColor: #8F2D56,
|
||||
promoIntroColor: #868686,
|
||||
promoIntegrationBgColor: #fff,
|
||||
promoIntegrationBorderColor: rgba(143, 45, 86, 0.2),
|
||||
promoLinksColor: #dadada,
|
||||
promoHeroFgColor: #fff,
|
||||
|
||||
adminBgColor: #233046,
|
||||
adminFgColor: #fff,
|
||||
adminHoverColor: #374752,
|
||||
adminAccentColor: #DE6657,
|
||||
adminVersionColor: #7d7d7d,
|
||||
|
||||
appserviceConfigPreFgColor: rgb(41, 43, 44),
|
||||
appserviceConfigPreBorderColor: #ccc,
|
||||
appserviceConfigPreBgColor: #eee,
|
||||
);
|
||||
Loading…
Reference in New Issue
Block a user