277 lines
6.5 KiB
Vue
277 lines
6.5 KiB
Vue
<template>
|
|
<router-view :key="route.fullPath" />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { watch } from "vue"
|
|
import { $, $$ } from "vue/macros"
|
|
import { useRoute } from "vue-router"
|
|
|
|
import { useInstanceInfo } from "@/composables/instance"
|
|
import { useCurrentUser } from "@/composables/user"
|
|
|
|
const route = useRoute()
|
|
const { currentUser } = $(useCurrentUser())
|
|
const { loadInstanceInfo } = useInstanceInfo()
|
|
|
|
loadInstanceInfo()
|
|
|
|
watch($$(currentUser), () => {
|
|
const title = currentUser ? `@${currentUser.username}` : "Federated social network"
|
|
document.title = `FediMovies.rocks | ${title}`
|
|
}, { immediate: true })
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "styles/reset";
|
|
@import "styles/layout";
|
|
@import "styles/theme";
|
|
|
|
:root {
|
|
--background-color: #{$background-color};
|
|
--text-color: #{$text-color};
|
|
--text-colorizer: #{$text-colorizer};
|
|
--secondary-text-color: #{$secondary-text-color};
|
|
--secondary-text-colorizer: #{$secondary-text-colorizer};
|
|
--secondary-text-hover-color: #{$secondary-text-hover-color};
|
|
--secondary-text-hover-colorizer: #{$secondary-text-hover-colorizer};
|
|
--link-color: #{$link-color};
|
|
--link-colorizer: #{$link-colorizer};
|
|
--link-hover-color: #{$link-hover-color};
|
|
--link-hover-colorizer: #{$link-hover-colorizer};
|
|
--btn-background-color: #{$btn-background-color};
|
|
--btn-background-hover-color: #{$btn-background-hover-color};
|
|
--btn-text-color: #{$btn-text-color};
|
|
--btn-text-colorizer: #{$btn-text-colorizer};
|
|
--btn-text-hover-color: #{$btn-text-hover-color};
|
|
--btn-text-hover-colorizer: #{$btn-text-hover-colorizer};
|
|
--btn-secondary-background-color: #{$btn-secondary-background-color};
|
|
--btn-secondary-text-color: #{$btn-secondary-text-color};
|
|
--btn-disabled-background-color: #{$btn-disabled-background-color};
|
|
--btn-disabled-text-color: #{$btn-disabled-text-color};
|
|
--block-background-color: #{$block-background-color};
|
|
--block-link-color: #{$block-link-color};
|
|
--block-link-hover-color: #{$block-link-hover-color};
|
|
--separator-color: #{$separator-color};
|
|
--widget-background-color: #{$widget-background-color};
|
|
--highlight-color: #{$highlight-color};
|
|
--loader-color: #{$loader-color};
|
|
--shadow-color: #{$shadow-color};
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--background-color: #{$dark-background-color};
|
|
--text-color: #{$dark-text-color};
|
|
--text-colorizer: #{$dark-text-colorizer};
|
|
--secondary-text-color: #{$dark-secondary-text-color};
|
|
--secondary-text-colorizer: #{$dark-secondary-text-colorizer};
|
|
--secondary-text-hover-color: #{$dark-secondary-text-hover-color};
|
|
--secondary-text-hover-colorizer: #{$dark-secondary-text-hover-colorizer};
|
|
--link-color: #{$dark-link-color};
|
|
--link-colorizer: #{$dark-link-colorizer};
|
|
--link-hover-color: #{$dark-link-hover-color};
|
|
--link-hover-colorizer: #{$dark-link-hover-colorizer};
|
|
--btn-background-color: #{$dark-btn-background-color};
|
|
--btn-background-hover-color: #{$dark-btn-background-hover-color};
|
|
--btn-text-color: #{$dark-btn-text-color};
|
|
--btn-text-colorizer: #{$dark-btn-text-colorizer};
|
|
--btn-text-hover-color: #{$dark-btn-text-hover-color};
|
|
--btn-text-hover-colorizer: #{$dark-btn-text-hover-colorizer};
|
|
--btn-secondary-background-color: #{$dark-btn-secondary-background-color};
|
|
--btn-secondary-text-color: #{$dark-btn-secondary-text-color};
|
|
--btn-disabled-background-color: #{$dark-btn-disabled-background-color};
|
|
--btn-disabled-text-color: #{$dark-btn-disabled-text-color};
|
|
--block-background-color: #{$dark-block-background-color};
|
|
--block-link-color: #{$dark-block-link-color};
|
|
--block-link-hover-color: #{$dark-block-link-hover-color};
|
|
--separator-color: #{$dark-separator-color};
|
|
--widget-background-color: #{$dark-widget-background-color};
|
|
--highlight-color: #{$dark-highlight-color};
|
|
--loader-color: #{$dark-loader-color};
|
|
--shadow-color: #{$dark-shadow-color};
|
|
}
|
|
|
|
html {
|
|
background: var(--background-color);
|
|
color: var(--text-color);
|
|
font-family: $text-font;
|
|
font-size: $text-font-size;
|
|
min-height: 100%;
|
|
}
|
|
|
|
a {
|
|
color: var(--link-color);
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
color: var(--link-hover-color);
|
|
}
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-weight: bold;
|
|
margin: 0 0 $block-outer-padding;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2.2rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.6rem;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
h5 {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
h6 {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.static-text {
|
|
line-height: 2;
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin: 0;
|
|
}
|
|
|
|
p a {
|
|
text-decoration: underline;
|
|
text-decoration-skip-ink: none;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
ol,
|
|
ul {
|
|
padding-left: 1.5em;
|
|
}
|
|
|
|
ul {
|
|
list-style-type: disc;
|
|
}
|
|
}
|
|
|
|
input,
|
|
textarea {
|
|
background-color: var(--block-background-color);
|
|
border: 1px solid var(--block-background-color);
|
|
box-shadow: none;
|
|
box-sizing: border-box;
|
|
color: var(--text-color);
|
|
font-family: $text-font;
|
|
font-size: $text-font-size;
|
|
margin: 0;
|
|
padding: $input-padding;
|
|
width: 100%;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
&::placeholder {
|
|
color: var(--secondary-text-color);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
input[type="file"] {
|
|
background-color: transparent;
|
|
border: none;
|
|
padding: 2px 1px;
|
|
}
|
|
|
|
textarea {
|
|
resize: vertical;
|
|
}
|
|
|
|
button {
|
|
background-color: transparent;
|
|
border: none;
|
|
color: var(--link-color);
|
|
cursor: pointer;
|
|
font-family: $text-font;
|
|
font-size: $text-font-size;
|
|
padding: 0;
|
|
|
|
&:hover {
|
|
color: var(--link-hover-color);
|
|
}
|
|
|
|
&[disabled] {
|
|
cursor: initial;
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
background-color: var(--btn-background-color);
|
|
border: none;
|
|
border-radius: $btn-border-radius;
|
|
box-shadow: $btn-shadow-size var(--shadow-color);
|
|
color: var(--btn-text-color);
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
font-size: $text-font-size;
|
|
font-weight: bold;
|
|
padding: $input-padding 30px;
|
|
white-space: nowrap;
|
|
|
|
&:hover {
|
|
background-color: var(--btn-background-hover-color);
|
|
color: var(--btn-text-hover-color);
|
|
}
|
|
|
|
&[disabled] {
|
|
background-color: var(--btn-disabled-background-color) !important;
|
|
box-shadow: none;
|
|
color: var(--btn-disabled-text-color) !important;
|
|
}
|
|
}
|
|
|
|
.btn.secondary {
|
|
background-color: var(--btn-secondary-background-color);
|
|
color: var(--btn-secondary-text-color);
|
|
|
|
&:hover {
|
|
background-color: var(--btn-background-hover-color);
|
|
color: var(--btn-text-hover-color);
|
|
}
|
|
}
|
|
|
|
menu {
|
|
list-style: none;
|
|
}
|
|
|
|
.wide {
|
|
/* Reserve space for floating avatar */
|
|
padding: $body-padding $content-gap * 1.5;
|
|
}
|
|
|
|
@media screen and (max-width: $screen-breakpoint-medium) {
|
|
.wide {
|
|
padding: $body-padding;
|
|
}
|
|
}
|
|
</style>
|