updated protocols
This commit is contained in:
Andrew Gundersen
parent
7283e3f6f9
commit
531a32a5a5
37 changed files with 682 additions and 650 deletions
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<div :class="`bubble ${modifier}-bubble ${modifier}-${child}`">
|
||||
{{ content }}
|
||||
<div v-show="!seen" class="notify"></div>
|
||||
{{ text }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -11,7 +12,7 @@
|
|||
export default defineComponent({
|
||||
name: "Bubble",
|
||||
|
||||
props: ["modifier", "content", "child"],
|
||||
props: ["modifier", "text", "child", "seen"],
|
||||
|
||||
})
|
||||
|
||||
|
|
@ -70,4 +71,28 @@
|
|||
border-top-right-radius: 9px;
|
||||
}
|
||||
|
||||
.notify {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background-color: #58D9FF;
|
||||
top: -5px;
|
||||
left: -5px;
|
||||
border: 2px solid #EBEBEB;
|
||||
// transform: scale(0);
|
||||
|
||||
// animation-name: notify-anim;
|
||||
// animation-duration: 5s;
|
||||
}
|
||||
|
||||
@keyframes notify-anim {
|
||||
0%, 90% {
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,20 +1,34 @@
|
|||
<template>
|
||||
<div class="statusContainer">
|
||||
<div>{{status}}</div>
|
||||
<div id="container">
|
||||
<img id="logo" src="@/render/assets/connectLogo.svg">
|
||||
<div id="connect">
|
||||
<div class="dot"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
import { defineComponent } from 'vue'
|
||||
import { status } from "@/render/shared/connectionStatus";
|
||||
import { defineComponent, onMounted, watch } from 'vue'
|
||||
import { hiddenState, useAnim, status, show, hide } from "@/render/shared/connectionStatus";
|
||||
|
||||
export default defineComponent({
|
||||
name: "ConnectionStatus",
|
||||
|
||||
setup() {
|
||||
|
||||
watch(status, (val, _oldval) => {
|
||||
if (val === "Connected" || val === "Nominal") {
|
||||
if (!hiddenState) hide();
|
||||
} else {
|
||||
if (hiddenState)
|
||||
show();
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(useAnim);
|
||||
|
||||
return {
|
||||
status
|
||||
}
|
||||
|
|
@ -25,13 +39,65 @@ export default defineComponent({
|
|||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.statusContainer {
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
:first-child {
|
||||
margin-right: 2px;
|
||||
}
|
||||
<style lang="scss" scoped>
|
||||
|
||||
#container {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 54px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#connect {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
shape {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: #48E065;
|
||||
}
|
||||
|
||||
.dot {
|
||||
@extend shape;
|
||||
position: relative;
|
||||
transform: translateX(-15px);
|
||||
animation: flashing 1s infinite linear alternate;
|
||||
animation-delay: .25s;
|
||||
}
|
||||
|
||||
.dot::before, .dot::after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.dot::before {
|
||||
@extend shape;
|
||||
left: -9px;
|
||||
animation: flashing 1s infinite alternate;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.dot::after {
|
||||
@extend shape;
|
||||
left: 9px;
|
||||
animation: flashing 1s infinite alternate;
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
@keyframes flashing {
|
||||
0% {
|
||||
background-color: #48E065;
|
||||
}
|
||||
50%,
|
||||
100% {
|
||||
background-color: #9B9B9B;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,35 +1,27 @@
|
|||
<template>
|
||||
|
||||
<span :class="`context ${modifier}-context`">
|
||||
<div v-if="modifier==='ai'" class="avatar"></div>
|
||||
{{ contextRef }}
|
||||
|
||||
<div v-if="context.img" class="avatar">
|
||||
<img v-if="context.img === 'crimata'" :src="require('@/render/assets/crimataAvatar.svg')">
|
||||
<div v-else>{{ context.img }}</div>
|
||||
</div>
|
||||
|
||||
{{ context.text == false ? " " : context.text }}
|
||||
|
||||
</span>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang='ts'>
|
||||
|
||||
import { defineComponent, ref, watch } from 'vue';
|
||||
import { annotateAnim } from "@/render/components/controllers/helpers";
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: "Context",
|
||||
|
||||
props: ["modifier", "context", "uid"],
|
||||
|
||||
setup(props) {
|
||||
|
||||
const contextRef = ref(" ");
|
||||
contextRef.value = props.context;
|
||||
|
||||
watch(() => props.context, (val: string, _oldval: string) => {
|
||||
annotateAnim(props.uid, val, contextRef);
|
||||
});
|
||||
|
||||
return {
|
||||
contextRef
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
|
|
@ -56,11 +48,14 @@
|
|||
}
|
||||
|
||||
.avatar {
|
||||
margin-right: 5px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-color: white;
|
||||
border-radius: 15px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.playing {
|
||||
|
|
|
|||
|
|
@ -85,31 +85,6 @@ export function animateAudioInput () {
|
|||
|
||||
}
|
||||
|
||||
// animate a message annotation.
|
||||
//! probably could be improved.
|
||||
export function annotateAnim (uid: string, val: string, contextRef: Ref) {
|
||||
|
||||
anime({
|
||||
targets: `#${uid} span`,
|
||||
opacity: [1, 0],
|
||||
duration: 250,
|
||||
easing: 'easeOutExpo'
|
||||
})
|
||||
|
||||
.finished.then(() => {
|
||||
contextRef.value = val;
|
||||
})
|
||||
|
||||
.then(() => {
|
||||
anime({
|
||||
targets: `#${uid} span`,
|
||||
opacity: [0, 1],
|
||||
duration: 250,
|
||||
easing: 'easeOutExpo'
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// Given index and length of content, return message child status.
|
||||
export function calcChild (index: number, len: number) {
|
||||
if (len === 1) {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
class="menuButton minimizeButton"
|
||||
@click.prevent="postNavBarMin"
|
||||
/>
|
||||
<connection-status />
|
||||
</span>
|
||||
</template>
|
||||
|
||||
|
|
@ -19,11 +18,8 @@
|
|||
import { defineComponent } from "vue";
|
||||
import { postNavBar } from "@/render/ipc";
|
||||
|
||||
import ConnectionStatus from "./connectionStatus.vue";
|
||||
|
||||
export default defineComponent({
|
||||
name: "Header",
|
||||
components: { ConnectionStatus },
|
||||
setup() {
|
||||
const postNavBarExit = () => postNavBar('close');
|
||||
const postNavBarMin = () => postNavBar('min');
|
||||
|
|
|
|||
|
|
@ -5,8 +5,9 @@
|
|||
:class="{ playing: recording }"
|
||||
:style="{ top: `${elementY}px`, left: `${elementX}px` }"
|
||||
>
|
||||
<div>{{ initials }}</div>
|
||||
|
||||
<!-- show the profile photo in the center of the input item -->
|
||||
<div>{{ profile.photo }}</div>
|
||||
|
||||
<!-- Recording animation on space bar -->
|
||||
<span v-if="recording" class="play"></span>
|
||||
|
|
@ -28,7 +29,7 @@
|
|||
|
||||
import { defineComponent } from "vue";
|
||||
import draggify from "@/render/composables/useDraggify";
|
||||
|
||||
import { profile } from "@/render/shared/profile";
|
||||
|
||||
import useTextInputController from
|
||||
"@/render/components/controllers/inputItem.control.text";
|
||||
|
|
@ -38,8 +39,6 @@ import useTextInputController from
|
|||
export default defineComponent({
|
||||
name: "InputItem",
|
||||
|
||||
props: ["initials"],
|
||||
|
||||
setup() {
|
||||
|
||||
// Default values for position.
|
||||
|
|
@ -55,6 +54,7 @@ export default defineComponent({
|
|||
const recording = false;
|
||||
|
||||
return {
|
||||
profile,
|
||||
elementX,
|
||||
elementY,
|
||||
recording
|
||||
|
|
|
|||
|
|
@ -1,14 +1,8 @@
|
|||
<template>
|
||||
<form id="login" @submit.prevent="submitForm">
|
||||
|
||||
|
||||
<!-- login title -->
|
||||
<div id="loginTitle">
|
||||
<div>Login</div>
|
||||
</div>
|
||||
|
||||
<!-- username and password forms -->
|
||||
<div id="loginBox">
|
||||
<div id="form">
|
||||
<!-- username -->
|
||||
<div class="inputBox">
|
||||
<input class="input" type="text" v-model="usr" />
|
||||
|
|
@ -24,18 +18,15 @@
|
|||
</div>
|
||||
|
||||
<!-- submit button; position: fixed -->
|
||||
<button class="submitButton button" type="submit">Submit</button>
|
||||
<button class="submit button" type="submit">Login</button>
|
||||
|
||||
</form>
|
||||
|
||||
<!-- back to login button: position: fixed -->
|
||||
<!-- <button class="createAccountButton button" @click.prevent="switchView">Create account</button> -->
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
import { defineComponent, ref } from "vue";
|
||||
import { setProfile } from '@/render/shared/profile';
|
||||
import { invokeLogin } from "@/render/ipc";
|
||||
|
||||
export default defineComponent({
|
||||
|
|
@ -50,21 +41,26 @@ export default defineComponent({
|
|||
const submitForm = async () => {
|
||||
|
||||
try {
|
||||
|
||||
const profile = await invokeLogin({
|
||||
email: usr.value,
|
||||
password: pwd.value
|
||||
}) as Profile;
|
||||
|
||||
setProfile(profile)
|
||||
|
||||
|
||||
await invokeLogin({email: usr.value, password: pwd.value});
|
||||
} catch(e) {
|
||||
shake("form");
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const shake = (elementId: string) => {
|
||||
const el = document.getElementById(elementId);
|
||||
|
||||
if (el)
|
||||
el.classList.remove("shake");
|
||||
|
||||
setTimeout(() => {
|
||||
if (el) el.classList.add("shake");
|
||||
}, 250);
|
||||
|
||||
}
|
||||
|
||||
return {
|
||||
usr,
|
||||
pwd,
|
||||
|
|
@ -87,16 +83,7 @@ export default defineComponent({
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
#loginTitle {
|
||||
font-family: "SF Pro Text";
|
||||
min-width: 181px;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
#loginBox {
|
||||
#form {
|
||||
font-family: "SF Compact Display";
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -132,7 +119,7 @@ export default defineComponent({
|
|||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.submitButton {
|
||||
.submit {
|
||||
font-family: "SF Compact Display";
|
||||
position: fixed;
|
||||
margin-top: 141px;
|
||||
|
|
@ -144,21 +131,10 @@ export default defineComponent({
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
.submitButton:active {
|
||||
.submit:active {
|
||||
background-color: #4296C3;
|
||||
}
|
||||
|
||||
.createAccountButton {
|
||||
position: absolute;
|
||||
border: none;
|
||||
background-color: #EBEBEB;
|
||||
text-decoration: none;
|
||||
color: #58C4FD;
|
||||
font-weight: bold;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.button {
|
||||
border: none;
|
||||
outline: none;
|
||||
|
|
@ -169,12 +145,29 @@ export default defineComponent({
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.invalid {
|
||||
margin-bottom: 30px;
|
||||
font-family: "SF Compact Display";
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
color: #F53737;
|
||||
.shake {
|
||||
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
|
||||
transform: translate3d(0, 0, 0);
|
||||
backface-visibility: hidden;
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
10%, 90% {
|
||||
transform: translate3d(-1px, 0, 0);
|
||||
}
|
||||
|
||||
20%, 80% {
|
||||
transform: translate3d(2px, 0, 0);
|
||||
}
|
||||
|
||||
30%, 50%, 70% {
|
||||
transform: translate3d(-4px, 0, 0);
|
||||
}
|
||||
|
||||
40%, 60% {
|
||||
transform: translate3d(4px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,13 +4,14 @@
|
|||
<Bubble
|
||||
v-for="(val, index) in content"
|
||||
:modifier="modifier"
|
||||
:content="val"
|
||||
:text="val.text"
|
||||
:child="calcChild(index, content.length)"
|
||||
:seen="seen"
|
||||
/>
|
||||
|
||||
<Context
|
||||
<Context
|
||||
:modifier="modifier"
|
||||
:context="context"
|
||||
:context="context"
|
||||
:uid="uid"
|
||||
/>
|
||||
|
||||
|
|
@ -19,7 +20,7 @@
|
|||
|
||||
<script lang='ts'>
|
||||
|
||||
import { defineComponent } from 'vue';
|
||||
import { defineComponent, onMounted } from 'vue';
|
||||
import Bubble from "@/render/components/bubble.vue";
|
||||
import Context from "@/render/components/context.vue";
|
||||
import { calcChild } from "@/render/components/controllers/helpers";
|
||||
|
|
@ -27,7 +28,7 @@
|
|||
export default defineComponent({
|
||||
name: "Message",
|
||||
|
||||
props: ["modifier", "content", "context", "uid"],
|
||||
props: ["modifier", "content", "context", "seen", "uid"],
|
||||
|
||||
components: {
|
||||
Bubble,
|
||||
|
|
@ -36,6 +37,15 @@
|
|||
|
||||
setup() {
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
const messengerEl = document.getElementById("messenger");
|
||||
|
||||
if (messengerEl)
|
||||
messengerEl.dispatchEvent(new CustomEvent('adjust-scroll'))
|
||||
|
||||
});
|
||||
|
||||
return {
|
||||
calcChild
|
||||
};
|
||||
|
|
@ -55,7 +65,7 @@
|
|||
padding-top: 9px;
|
||||
padding-bottom: 9px;
|
||||
animation-name: message-init-anim;
|
||||
animation-duration: 0.25s;
|
||||
animation-duration: 0.25s;
|
||||
}
|
||||
|
||||
@keyframes message-init-anim {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
<template>
|
||||
|
||||
<!-- Position fixed items -->
|
||||
<InputItem :initials="profile.initials"/>
|
||||
<Settings />
|
||||
<ConnectionStatus />
|
||||
<div id="recIcon" />
|
||||
<InputItem />
|
||||
|
||||
<!-- List of message bubbles. -->
|
||||
<div id="messenger">
|
||||
|
|
@ -12,6 +13,7 @@
|
|||
:modifier="message.modifier"
|
||||
:content="message.content"
|
||||
:context="message.context"
|
||||
:seen="message.seen"
|
||||
:uid="message.uid"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -20,24 +22,63 @@
|
|||
|
||||
<script lang="ts">
|
||||
|
||||
import { defineComponent } from "vue";
|
||||
import { defineComponent, onMounted, onUnmounted } from "vue";
|
||||
import InputItem from "@/render/components/inputItem.vue";
|
||||
import Settings from "@/render/components/settings.vue";
|
||||
import Message from "@/render/components/message.vue";
|
||||
import ConnectionStatus from "./connectionStatus.vue";
|
||||
|
||||
import { profile } from "@/render/shared/profile";
|
||||
import { messages } from "@/render/shared/messages";
|
||||
import useScroll from "@/render/composables/useScroll";
|
||||
import { postMessage } from "@/render/ipc";
|
||||
|
||||
export default defineComponent({
|
||||
name: "Messenger",
|
||||
|
||||
components: {
|
||||
ConnectionStatus,
|
||||
InputItem,
|
||||
Settings,
|
||||
Message
|
||||
Message,
|
||||
},
|
||||
|
||||
setup() {
|
||||
|
||||
const onFocus = () => {
|
||||
postMessage({
|
||||
intent: "focus",
|
||||
params: { "focus": true },
|
||||
epic: false,
|
||||
confidence: 1.0
|
||||
} as PlatformRequest);
|
||||
}
|
||||
|
||||
const onBlur = () => {
|
||||
postMessage({
|
||||
intent: "focus",
|
||||
params: { "focus": false },
|
||||
epic: false,
|
||||
confidence: 1.0
|
||||
} as PlatformRequest);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
useScroll("messenger");
|
||||
|
||||
window.addEventListener('blur', onBlur);
|
||||
window.addEventListener('focus', onFocus);
|
||||
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
|
||||
window.removeEventListener("blur", onBlur);
|
||||
window.removeEventListener("focus", onFocus);
|
||||
|
||||
});
|
||||
|
||||
return {
|
||||
messages,
|
||||
profile
|
||||
|
|
|
|||
|
|
@ -1,35 +1,38 @@
|
|||
<template>
|
||||
|
||||
<!-- Settings icon. -->
|
||||
<button
|
||||
class="settingsIcon"
|
||||
v-if="toggleSettings == false"
|
||||
@click="onActive"
|
||||
>
|
||||
<div class="settingsButtonDot"></div>
|
||||
<div class="settingsButtonDot"></div>
|
||||
<div class="settingsButtonDot"></div>
|
||||
</button>
|
||||
<!-- Settings content -->
|
||||
<div v-if="toggleSettings" id="settings" >
|
||||
|
||||
<!-- Settings div. -->
|
||||
<div id="settings" v-show="toggleSettings">
|
||||
</div>
|
||||
<p class="account">{{ `Hi, ${account}` }}</p>
|
||||
|
||||
<button
|
||||
v-if="toggleSettings"
|
||||
class="settingsOption"
|
||||
class="logout"
|
||||
@click="onLogout"
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
|
||||
<p class="version">{{ `Version ${version}` }}</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Icon -->
|
||||
<button
|
||||
v-else
|
||||
class="icon"
|
||||
@click="onActive"
|
||||
>
|
||||
<img src="@/render/assets/settingsIcon.svg">
|
||||
</button>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
import { defineComponent, ref } from "vue";
|
||||
import { clearProfile } from "@/render/shared/profile"
|
||||
import { invokeLogout } from "@/render/ipc";
|
||||
import { version } from "@/render/shared/version";
|
||||
import { ready, account, setAccount, clearAccount } from "@/render/shared/account";
|
||||
|
||||
export default defineComponent({
|
||||
name: "Settings",
|
||||
|
|
@ -58,7 +61,6 @@
|
|||
|
||||
try {
|
||||
await invokeLogout();
|
||||
clearProfile();
|
||||
} catch(e) {
|
||||
console.log('error')
|
||||
}
|
||||
|
|
@ -66,6 +68,8 @@
|
|||
}
|
||||
|
||||
return {
|
||||
account,
|
||||
version,
|
||||
onActive,
|
||||
toggleSettings,
|
||||
onLogout
|
||||
|
|
@ -79,67 +83,52 @@
|
|||
|
||||
#settings {
|
||||
position: fixed;
|
||||
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(235, 235, 235, 0.75);
|
||||
z-index: 4;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
background-color: #EBEBEB;
|
||||
|
||||
opacity: 0.75;
|
||||
|
||||
z-index: 4;
|
||||
|
||||
animation-name: appear;
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
|
||||
@keyframes appear {
|
||||
from {
|
||||
opacity: 0
|
||||
background-color: rgba(235, 235, 235, 0);
|
||||
}
|
||||
to {
|
||||
opacity: 0.75
|
||||
background-color: rgba(235, 235, 235, 0.75);
|
||||
}
|
||||
}
|
||||
|
||||
.settingsIcon {
|
||||
.icon {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
|
||||
border: none;
|
||||
outline: none;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
padding: 5px;
|
||||
margin-right: 20px;
|
||||
margin-top: 19px;
|
||||
|
||||
z-index: 2;
|
||||
background-color: Transparent;
|
||||
}
|
||||
|
||||
.settingsIcon:hover {
|
||||
.icon:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.settingsButtonDot {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
|
||||
margin: 2px;
|
||||
border-radius: 2.5px;
|
||||
background-color: #9B9B9B;
|
||||
|
||||
.account {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.settingsOption {
|
||||
.logout {
|
||||
font-family: "SF Compact Display";
|
||||
background-color: #B7B7B7;
|
||||
padding: 10px 30px;
|
||||
|
|
@ -149,16 +138,21 @@
|
|||
border: none;
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.settingsOption:hover {
|
||||
.logout:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.version {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 75%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: #575757;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue