You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

125 lines
2.5 KiB

@import '~apps/client/src/styles/ghostfolio-style';
:host {
display: block;
.button-container {
.mat-stroked-button {
background-color: var(--light-background);
}
}
.downloads {
img {
height: 2.5rem;
}
}
.intro {
font-size: 4vw;
line-height: 1;
@media (max-width: 575.98px) {
font-size: 10vw;
}
}
.logo {
height: 3rem;
width: 7.5rem;
&.mask {
background-color: rgba(var(--dark-secondary-text));
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
}
&.logo-agplv3 {
mask-image: url('/assets/images/logo-AGPLv3.svg');
}
&.logo-alternative-to {
mask-image: url('/assets/images/logo-alternative-to.svg');
}
&.logo-awesome {
background-image: url('/assets/images/logo-awesome.png');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
filter: grayscale(1);
}
&.logo-openstartup {
background-image: url('/assets/images/logo-openstartup.png');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
filter: grayscale(1);
}
&.logo-privacy-tools {
mask-image: url('/assets/images/logo-privacy-tools.svg');
}
&.logo-product-hunt {
background-image: url('/assets/images/logo-product-hunt.png');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
filter: grayscale(1);
}
&.logo-unraid {
mask-image: url('/assets/images/logo-unraid.svg');
}
}
.outro-inner-container {
aspect-ratio: 16 / 9;
max-height: 66vh;
div {
background-image: url('/assets/intro.jpg');
background-position: top left;
background-repeat: no-repeat;
background-size: contain;
}
}
.video {
border: 1px solid rgba(var(--dark-dividers));
&:hover {
border-color: rgba(var(--palette-primary-500), 1);
}
}
}
:host-context(.is-dark-theme) {
.button-container {
.mat-stroked-button {
background-color: var(--dark-background);
}
}
.logo {
&.logo-agplv3,
&.logo-alternative-to,
&.logo-privacy-tools,
&.logo-unraid {
background-color: rgba(var(--light-primary-text));
}
}
.outro-inner-container {
div {
background-image: url('/assets/intro-dark.jpg') !important;
}
}
.video {
border-color: rgba(var(--light-dividers));
}
}