Add a dark theme
Fixes https://github.com/turt2live/matrix-dimension/issues/153
@ -1,60 +1,56 @@
|
|||||||
//$bgColor: #625F72;
|
@import "../../style/themes/themes";
|
||||||
//$hoverColor: #6E8ABC;
|
|
||||||
//$accentColor: #8ABBFF;
|
|
||||||
|
|
||||||
$bgColor: #233046;
|
@include themifyComponent() {
|
||||||
$hoverColor: #374752;
|
.adminNav {
|
||||||
$accentColor: #DE6657;
|
width: 200px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
position: fixed;
|
||||||
|
top: 100px;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: themed(adminBgColor);
|
||||||
|
}
|
||||||
|
|
||||||
.adminNav {
|
.adminNav li {
|
||||||
width: 200px;
|
list-style: none;
|
||||||
margin: 0;
|
background-color: themed(adminBgColor);
|
||||||
padding: 0;
|
border-left: 5px solid themed(adminBgColor);
|
||||||
position: fixed;
|
padding: 5px 5px 5px 11px;
|
||||||
top: 120px;
|
color: themed(adminFgColor);
|
||||||
left: 0;
|
opacity: 0.5;
|
||||||
bottom: 0;
|
cursor: pointer;
|
||||||
background-color: $bgColor;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.adminNav li {
|
.adminNav li:hover,
|
||||||
list-style: none;
|
.adminNav li.active {
|
||||||
background-color: $bgColor;
|
opacity: 1;
|
||||||
border-left: 5px solid $bgColor;
|
background-color: themed(adminHoverColor);
|
||||||
padding: 5px 5px 5px 11px;
|
border-left: 5px solid themed(adminHoverColor);
|
||||||
color: #fff;
|
}
|
||||||
opacity: 0.5;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.adminNav li:hover,
|
.adminNav li.active {
|
||||||
.adminNav li.active {
|
border-left: 5px solid themed(adminAccentColor);
|
||||||
opacity: 1;
|
}
|
||||||
background-color: $hoverColor;
|
|
||||||
border-left: 5px solid $hoverColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
.adminNav li.active {
|
.adminContent {
|
||||||
border-left: 5px solid $accentColor;
|
position: fixed;
|
||||||
}
|
top: 120px;
|
||||||
|
left: 200px;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: 15px;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.adminContent {
|
.version {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 120px;
|
bottom: 0;
|
||||||
left: 200px;
|
left: 0;
|
||||||
bottom: 0;
|
width: 200px;
|
||||||
right: 0;
|
text-align: center;
|
||||||
padding: 15px;
|
color: themed(adminVersionColor);
|
||||||
overflow: auto;
|
font-size: 11px;
|
||||||
}
|
font-family: monospace;
|
||||||
|
}
|
||||||
.version {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 200px;
|
|
||||||
text-align: center;
|
|
||||||
color: #7d7d7d;
|
|
||||||
font-size: 11px;
|
|
||||||
font-family: monospace;
|
|
||||||
}
|
}
|
@ -1,6 +1,10 @@
|
|||||||
pre {
|
@import "../../../../style/themes/themes";
|
||||||
margin-top: 10px;
|
|
||||||
padding: 5px;
|
@include themifyComponent() {
|
||||||
border: 1px solid #ccc;
|
pre {
|
||||||
background-color: #eee;
|
margin-top: 10px;
|
||||||
|
padding: 5px;
|
||||||
|
border: 1px solid themed(appserviceConfigPreBorderColor);
|
||||||
|
background-color: themed(appserviceConfigPreBgColor);
|
||||||
|
}
|
||||||
}
|
}
|
@ -1,22 +1,26 @@
|
|||||||
.sticker {
|
@import "../../../../style/themes/themes";
|
||||||
margin: 20px;
|
|
||||||
padding: 5px;
|
|
||||||
background-color: #f6fbff;
|
|
||||||
|
|
||||||
.caption {
|
@include themifyComponent() {
|
||||||
display: inline-block;
|
.sticker {
|
||||||
vertical-align: middle;
|
margin: 20px;
|
||||||
margin-left: 20px;
|
padding: 5px;
|
||||||
|
background-color: themed(stickerPreviewBgColor);
|
||||||
|
|
||||||
.name {
|
.caption {
|
||||||
font-size: 1.1em;
|
display: inline-block;
|
||||||
font-weight: bold;
|
vertical-align: middle;
|
||||||
display: block;
|
margin-left: 20px;
|
||||||
}
|
|
||||||
|
|
||||||
.description {
|
.name {
|
||||||
color: #7d7d7d;
|
font-size: 1.1em;
|
||||||
display: block;
|
font-weight: bold;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
color: themed(stickerPreviewFgColor);
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
@ -1,37 +1,42 @@
|
|||||||
.pack {
|
@import "../../../style/themes/themes";
|
||||||
display: flex;
|
|
||||||
margin: 20px;
|
|
||||||
padding: 5px;
|
|
||||||
background-color: #f6fbff;
|
|
||||||
|
|
||||||
.caption {
|
@include themifyComponent() {
|
||||||
flex: 1;
|
.pack {
|
||||||
margin-left: 20px;
|
display: flex;
|
||||||
padding-top: 20px;
|
margin: 20px;
|
||||||
|
padding: 5px;
|
||||||
|
background-color: themed(stickerpackBgColor);
|
||||||
|
color: themed(stickerpackFgColor);
|
||||||
|
|
||||||
.name {
|
.caption {
|
||||||
font-size: 1.1em;
|
flex: 1;
|
||||||
font-weight: bold;
|
margin-left: 20px;
|
||||||
display: block;
|
padding-top: 20px;
|
||||||
}
|
|
||||||
|
|
||||||
.description {
|
.name {
|
||||||
color: #7d7d7d;
|
font-size: 1.1em;
|
||||||
display: block;
|
font-weight: bold;
|
||||||
}
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
.toggle-switch {
|
.description {
|
||||||
margin-top: 20px;
|
color: themed(stickerpackDescriptionColor);
|
||||||
margin-right: 10px;
|
display: block;
|
||||||
float: right;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.author, .license {
|
.toggle-switch {
|
||||||
font-size: 0.8em;
|
margin-top: 20px;
|
||||||
color: #7d7d7d;
|
margin-right: 10px;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
a {
|
.author, .license {
|
||||||
color: #7d7d7d;
|
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
|
// 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
|
// component styles are encapsulated and only applied to their components
|
||||||
|
@import "../../style/themes/themes";
|
||||||
|
|
||||||
.spacer {
|
@include themifyComponent() {
|
||||||
width: 85%;
|
.spacer {
|
||||||
display: block;
|
width: 85%;
|
||||||
border-color: rgba(206, 222, 235, 0.85);
|
display: block;
|
||||||
margin-top: 60px;
|
border-color: themed(promoSpacerColor);
|
||||||
margin-bottom: 60px;
|
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;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
.shadowed {
|
||||||
border: 1px solid rgba(143, 45, 86, 0.7);
|
box-shadow: 0 20px 40px 20px thtmed(promoShadowColor);
|
||||||
padding: 5px;
|
}
|
||||||
width: 590px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
.info-box {
|
||||||
color: white;
|
display: inline-block;
|
||||||
text-align: center;
|
margin: auto;
|
||||||
padding: 50px;
|
background-color: themed(promoInfoBgColor);
|
||||||
background: linear-gradient(to right, #c95036, #8F2D56);
|
padding: 50px;
|
||||||
|
border: 1px solid themed(promoInfoBorderColor);
|
||||||
|
|
||||||
a {
|
h3 {
|
||||||
color: white;
|
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;
|
font-size: 0.9em;
|
||||||
|
color: themed(promoLinksColor);
|
||||||
margin-left: 20px;
|
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 {
|
.hero {
|
||||||
padding-top: 50px;
|
color: themed(promoHeroFgColor);
|
||||||
padding-bottom: 100px;
|
text-align: center;
|
||||||
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 3vw));
|
background: linear-gradient(to right, themed(promoGradientStartColor), themed(promoGradientEndColor));
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.wrapper {
|
||||||
padding: 20px 20px 40px;
|
min-width: 700px;
|
||||||
|
max-width: 1500px;
|
||||||
|
padding: 20px;
|
||||||
|
margin: 70px auto auto;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.banner {
|
.made-for-matrix {
|
||||||
font-size: 1.2em;
|
height: 45px;
|
||||||
margin-top: 30px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.try-dimension {
|
.made-for-matrix-anchor {
|
||||||
width: 695px;
|
margin-left: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.screenshot {
|
.promo {
|
||||||
display: inline-block;
|
.hero {
|
||||||
margin: 0 70px;
|
padding-top: 50px;
|
||||||
|
padding-bottom: 100px;
|
||||||
img {
|
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 3vw));
|
||||||
width: 595px;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.integrations {
|
.logo {
|
||||||
display: block;
|
padding: 20px 20px 40px;
|
||||||
width: 100%;
|
}
|
||||||
|
|
||||||
.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;
|
display: block;
|
||||||
text-align: center;
|
width: 100%;
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.intro {
|
.title {
|
||||||
font-size: 1.3em;
|
display: block;
|
||||||
color: #868686;
|
text-align: center;
|
||||||
text-align: center;
|
margin-bottom: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.integration-list {
|
.intro {
|
||||||
display: flex;
|
font-size: 1.3em;
|
||||||
flex-wrap: wrap;
|
color: themed(promoIntroColor);
|
||||||
justify-content: center;
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
.integration {
|
.integration-list {
|
||||||
width: 350px;
|
display: flex;
|
||||||
background-color: #ffffff;
|
flex-wrap: wrap;
|
||||||
padding: 20px;
|
justify-content: center;
|
||||||
margin: 15px;
|
|
||||||
border: 1px solid rgba(143, 45, 86, 0.2);
|
|
||||||
|
|
||||||
img {
|
.integration {
|
||||||
margin-right: 25px;
|
width: 350px;
|
||||||
width: 48px;
|
background-color: themed(promoIntegrationBgColor);
|
||||||
vertical-align: middle;
|
padding: 20px;
|
||||||
}
|
margin: 15px;
|
||||||
|
border: 1px solid themed(promoIntegrationBorderColor);
|
||||||
|
|
||||||
span {
|
img {
|
||||||
font-size: 1.2em;
|
margin-right: 25px;
|
||||||
|
width: 48px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.non-promo {
|
.non-promo {
|
||||||
.hero {
|
.hero {
|
||||||
padding-top: 20px;
|
padding-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
padding: 20px 20px 40px;
|
padding: 20px 20px 40px;
|
||||||
height: 150px;
|
height: 150px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.welcome {
|
.welcome {
|
||||||
min-width: 700px;
|
min-width: 700px;
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
margin-top: 45px;
|
margin-top: 45px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
margin-top: 100px;
|
margin-top: 100px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
@ -1,55 +1,58 @@
|
|||||||
// component styles are encapsulated and only applied to their components
|
// component styles are encapsulated and only applied to their components
|
||||||
.integration-bag {
|
@import "../../style/themes/themes";
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: stretch;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.integration {
|
@include themifyComponent() {
|
||||||
border: 1px solid #eee;
|
.integration-bag {
|
||||||
border-radius: 5px;
|
display: flex;
|
||||||
margin: 7px;
|
flex-direction: row;
|
||||||
padding: 6px;
|
align-items: stretch;
|
||||||
width: calc(325px - 14px);
|
flex-wrap: wrap;
|
||||||
position: relative;
|
justify-content: flex-start;
|
||||||
cursor: pointer;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.integration .integration-arrow {
|
.integration {
|
||||||
display: none;
|
border: 1px solid themed(integrationBorderColor);
|
||||||
position: absolute;
|
margin: 7px;
|
||||||
top: calc(50% - 12px); // icon happens to be 24px tall
|
padding: 6px;
|
||||||
right: 1px;
|
width: calc(325px - 14px);
|
||||||
color: #bbb;
|
position: relative;
|
||||||
}
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
.integration:hover {
|
.integration .integration-arrow {
|
||||||
box-shadow: 0 0 9px #888;
|
display: none;
|
||||||
}
|
position: absolute;
|
||||||
|
top: calc(50% - 12px); // icon happens to be 24px tall
|
||||||
|
right: 1px;
|
||||||
|
color: #bbb;
|
||||||
|
}
|
||||||
|
|
||||||
.integration:hover .integration-arrow {
|
.integration:hover {
|
||||||
display: block;
|
box-shadow: 0 0 5px 5px themed(integrationShadowColor);
|
||||||
}
|
}
|
||||||
|
|
||||||
.integration .integration-avatar {
|
.integration:hover .integration-arrow {
|
||||||
width: 50px;
|
display: block;
|
||||||
height: 50px;
|
}
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.integration .integration-name {
|
.integration .integration-avatar {
|
||||||
display: inline-block;
|
width: 50px;
|
||||||
font-size: 1.1em;
|
height: 50px;
|
||||||
font-weight: 100;
|
float: left;
|
||||||
padding-left: 10px;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.integration .integration-description {
|
.integration .integration-name {
|
||||||
display: block;
|
display: inline-block;
|
||||||
font-size: 0.8em;
|
font-size: 1.1em;
|
||||||
margin-left: 60px;
|
font-weight: 100;
|
||||||
margin-right: 5px;
|
padding-left: 10px;
|
||||||
color: #999;
|
}
|
||||||
|
|
||||||
|
.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="wrapper">
|
||||||
<div class="title">
|
<div class="header">
|
||||||
<h2 class="pageName">{{ pageName }}</h2>
|
<div class="title">
|
||||||
<breadcrumb [allowBootstrap]="true" class="dimension-breadcrumb"></breadcrumb>
|
<h2 class="pageName">{{ pageName }}</h2>
|
||||||
</div>
|
<breadcrumb [allowBootstrap]="true" class="dimension-breadcrumb"></breadcrumb>
|
||||||
<div class="quickAction">
|
</div>
|
||||||
<ng-content></ng-content>
|
<div class="quickAction">
|
||||||
|
<ng-content></ng-content>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
@ -1,31 +1,40 @@
|
|||||||
// component styles are encapsulated and only applied to their components
|
// component styles are encapsulated and only applied to their components
|
||||||
.header {
|
@import "../../style/themes/themes";
|
||||||
width: 100%;
|
|
||||||
margin-top: 30px;
|
|
||||||
border-top: 1px solid #e7eaec;
|
|
||||||
border-bottom: 1px solid #e7eaec;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header .title {
|
@include themifyComponent() {
|
||||||
margin: 0;
|
.wrapper {
|
||||||
width: 83.333333%; // col-sm-10
|
width: 100%;
|
||||||
padding: 15px;
|
padding-top: 10px;
|
||||||
display: inline-block;
|
background: linear-gradient(to right, themed(headerGradientStartColor), themed(headerGradientEndColor));
|
||||||
}
|
}
|
||||||
|
|
||||||
.header .title .pageName {
|
.header {
|
||||||
font-weight: 100;
|
width: 100%;
|
||||||
padding: 0;
|
border-top: 1px solid themed(headerBorderColor);
|
||||||
margin: 0;
|
border-bottom: 1px solid themed(headerBorderColor);
|
||||||
}
|
background-color: themed(headerBgColor);
|
||||||
|
}
|
||||||
|
|
||||||
.header .quickAction {
|
.header .title {
|
||||||
padding: 0;
|
margin: 0;
|
||||||
margin: 0;
|
width: 83.333333%; // col-sm-10
|
||||||
float: right;
|
padding: 15px;
|
||||||
text-align: right;
|
display: inline-block;
|
||||||
display: inline-block;
|
}
|
||||||
width: 15.666667%; // col-sm-2
|
|
||||||
position: relative;
|
.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
|
// component styles are encapsulated and only applied to their components
|
||||||
.stickerpacks {
|
@import "../../../style/themes/themes";
|
||||||
position: relative;
|
|
||||||
top: -15px;
|
@include themifyComponent() {
|
||||||
padding-left: 10px;
|
.stickerpacks {
|
||||||
font-size: 0.8em;
|
position: relative;
|
||||||
color: #525252;
|
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
|
// component styles are encapsulated and only applied to their components
|
||||||
.control-page {
|
@import "../../../style/themes/themes";
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
background-color: #eee;
|
|
||||||
color: #222;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-badge {
|
@include themifyComponent() {
|
||||||
text-align: center;
|
.control-page {
|
||||||
font-size: 20px;
|
position: fixed;
|
||||||
position: relative;
|
top: 0;
|
||||||
top: calc(50% - 10px);
|
bottom: 0;
|
||||||
}
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background-color: themed(genericControlBgColor);
|
||||||
|
color: themed(genericControlFgColor);
|
||||||
|
}
|
||||||
|
|
||||||
.embed-failed {
|
.loading-badge {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
position: relative;
|
font-size: 20px;
|
||||||
height: 300px;
|
position: relative;
|
||||||
top: calc(50% - 150px);
|
top: calc(50% - 10px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.embed-failed .ban {
|
.embed-failed {
|
||||||
font-size: 145px;
|
text-align: center;
|
||||||
color: #bd362f;
|
position: relative;
|
||||||
}
|
height: 300px;
|
||||||
|
top: calc(50% - 150px);
|
||||||
|
}
|
||||||
|
|
||||||
iframe {
|
.embed-failed .ban {
|
||||||
position: absolute;
|
font-size: 145px;
|
||||||
top: 0;
|
color: themed(widgetBannedSymbolColor);
|
||||||
bottom: 0;
|
}
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggleFullscreen {
|
iframe {
|
||||||
position: fixed;
|
position: absolute;
|
||||||
bottom: 10px;
|
top: 0;
|
||||||
right: 10px;
|
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
|
// component styles are encapsulated and only applied to their components
|
||||||
#jitsiContainer {
|
@import "../../../style/themes/themes";
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.join-conference-wrapper {
|
@include themifyComponent() {
|
||||||
display: table;
|
#jitsiContainer {
|
||||||
position: absolute;
|
position: fixed;
|
||||||
height: 100%;
|
top: 0;
|
||||||
width: 100%;
|
bottom: 0;
|
||||||
background-color: #fff;
|
left: 0;
|
||||||
}
|
right: 0;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.join-conference-boat {
|
.join-conference-wrapper {
|
||||||
display: table-cell;
|
display: table;
|
||||||
vertical-align: middle;
|
position: absolute;
|
||||||
}
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
background-color: themed(jitsiWelcomeBgColor);
|
||||||
|
}
|
||||||
|
|
||||||
.join-conference-prompt {
|
.join-conference-boat {
|
||||||
margin-left: auto;
|
display: table-cell;
|
||||||
margin-right: auto;
|
vertical-align: middle;
|
||||||
width: 90%;
|
}
|
||||||
text-align: center;
|
|
||||||
|
.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
|
// component styles are encapsulated and only applied to their components
|
||||||
.control-page {
|
@import "../../../style/themes/themes";
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
background-color: #eee;
|
|
||||||
color: #222;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-badge {
|
@include themifyComponent() {
|
||||||
text-align: center;
|
.control-page {
|
||||||
font-size: 20px;
|
position: fixed;
|
||||||
position: relative;
|
top: 0;
|
||||||
top: calc(50% - 10px);
|
bottom: 0;
|
||||||
}
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background-color: themed(stickerPickerControlBgColor);
|
||||||
|
color: themed(stickerPickerControlFgColor);
|
||||||
|
}
|
||||||
|
|
||||||
.auth-error {
|
.loading-badge {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
position: relative;
|
font-size: 20px;
|
||||||
height: 300px;
|
position: relative;
|
||||||
top: calc(50% - 150px);
|
top: calc(50% - 10px);
|
||||||
color: #bd362f;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.sticker-picker {
|
.auth-error {
|
||||||
margin: 15px 15px 30px;
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
height: 300px;
|
||||||
|
top: calc(50% - 150px);
|
||||||
|
color: themed(stickerPickerErrorColor);
|
||||||
|
}
|
||||||
|
|
||||||
.sticker-pack {
|
.sticker-picker {
|
||||||
.header {
|
margin: 15px 15px 30px;
|
||||||
margin-top: 15px;
|
|
||||||
margin-left: 3px;
|
|
||||||
|
|
||||||
.title {
|
.sticker-pack {
|
||||||
font-weight: 700;
|
.header {
|
||||||
color: #222222;
|
margin-top: 15px;
|
||||||
}
|
margin-left: 3px;
|
||||||
|
|
||||||
.license {
|
.title {
|
||||||
font-size: 0.6em;
|
font-weight: 700;
|
||||||
font-weight: 300;
|
color: themed(stickerPickerTitleColor);
|
||||||
color: #b5b5b5;
|
}
|
||||||
margin-top: 3px;
|
|
||||||
float: right;
|
|
||||||
|
|
||||||
a {
|
.license {
|
||||||
color: #b5b5b5;
|
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 {
|
.stickers {
|
||||||
font-size: 0.6em;
|
display: flex;
|
||||||
font-weight: 300;
|
flex-wrap: wrap;
|
||||||
color: #222222;
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
a {
|
.sticker {
|
||||||
color: #222222;
|
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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
Before Width: | Height: | Size: 2.4 KiB |
Before Width: | Height: | Size: 9.9 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 4.7 KiB |
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 5.4 KiB |
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 6.3 KiB |
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 4.3 KiB |
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.1 KiB |
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 3.9 KiB |
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 4.8 KiB |
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 5.3 KiB |
Before Width: | Height: | Size: 5.4 KiB After Width: | Height: | Size: 5.4 KiB |
Before Width: | Height: | Size: 8.3 KiB After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.7 KiB |
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 3.7 KiB |
Before Width: | Height: | Size: 3.2 KiB |
Before Width: | Height: | Size: 8.5 KiB After Width: | Height: | Size: 9.7 KiB |
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 7.2 KiB |
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 8.2 KiB After Width: | Height: | Size: 8.5 KiB |
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.3 KiB |
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 20 KiB |
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.9 KiB |
Before Width: | Height: | Size: 9.3 KiB After Width: | Height: | Size: 4.0 KiB |
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 20 KiB |
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 4.0 KiB |
@ -2,7 +2,7 @@
|
|||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<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>
|
<title>Dimension</title>
|
||||||
|
|
||||||
@ -16,11 +16,94 @@
|
|||||||
<meta name="msapplication-config" content="img/logo/favicon/browserconfig.xml">
|
<meta name="msapplication-config" content="img/logo/favicon/browserconfig.xml">
|
||||||
<meta name="theme-color" content="#ffffff">
|
<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="/">
|
<base href="/">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="app-body">
|
||||||
<my-app>Loading...</my-app>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
@ -2,48 +2,62 @@
|
|||||||
// In it's current position (as a component), the component-level stylesheet cannot access the
|
// 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.
|
// elements, so we specify it in a more generic location.
|
||||||
|
|
||||||
.dimension-breadcrumb {
|
@import "themes/themes";
|
||||||
.fluid-bread {
|
|
||||||
padding: 0;
|
.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
|
// 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 url('https://fonts.googleapis.com/css?family=Open+Sans:100|Roboto:300');
|
||||||
@import '../../node_modules/angular2-toaster/toaster';
|
@import '../../node_modules/angular2-toaster/toaster';
|
||||||
|
@import "themes/themes";
|
||||||
@import "components/ibox";
|
@import "components/ibox";
|
||||||
@import "components/dialog";
|
@import "components/dialog";
|
||||||
|
@import "components/bootstrap_override";
|
||||||
@import "riot";
|
@import "riot";
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: #b0bbbf1f;
|
|
||||||
//background: #6268680d;
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: #333;
|
|
||||||
font-family: 'Roboto', 'Open Sans', Arial, sans-serif;
|
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
|
// HACK: Work around dialog not showing up
|
||||||
// ref: https://github.com/shlomiassaf/angular2-modal/issues/280
|
// ref: https://github.com/shlomiassaf/angular2-modal/issues/280
|
||||||
.fade.in {
|
.fade.in {
|
||||||
|
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 {
|
@import "../themes/themes";
|
||||||
.dialog-header {
|
|
||||||
border-bottom: 1px solid #ddd;
|
|
||||||
padding: 20px;
|
|
||||||
|
|
||||||
h4 {
|
@include themifyRoot() {
|
||||||
margin: 0;
|
.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 {
|
@import "../themes/themes";
|
||||||
background-color: #fff;
|
|
||||||
padding: 0;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
box-shadow: 0 2px 4px hsla(0, 0%, 0%, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ibox .ibox-title {
|
.main-app {
|
||||||
padding: 5px;
|
@include themify() {
|
||||||
border-bottom: 1px solid #e7eaec;
|
.ibox {
|
||||||
border-top: 2px solid #e7eaec;
|
background-color: themed('containerBgColor');
|
||||||
}
|
padding: 0;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
box-shadow: 0 2px 4px themed('containerShadowColor');
|
||||||
|
}
|
||||||
|
|
||||||
.ibox .ibox-title h5 {
|
.ibox .ibox-title {
|
||||||
display: inline;
|
padding: 5px;
|
||||||
font-size: 1.1em;
|
border-bottom: 1px solid themed('containerBorderColor');
|
||||||
padding: 5px;
|
border-top: 2px solid themed('containerBorderColor');
|
||||||
margin: 0;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.ibox .ibox-content {
|
.ibox .ibox-title h5 {
|
||||||
padding: 15px;
|
display: inline;
|
||||||
}
|
font-size: 1.1em;
|
||||||
|
padding: 5px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.ibox .ibox-title .ibox-icon {
|
.ibox .ibox-content {
|
||||||
float: right;
|
padding: 15px;
|
||||||
margin-top: 4px;
|
}
|
||||||
margin-right: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ibox .ibox-title.ibox-title-collapsible {
|
.ibox .ibox-title .ibox-icon {
|
||||||
cursor: pointer;
|
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
@ -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
@ -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
@ -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,
|
||||||
|
);
|