Improve game overlay UI
This commit is contained in:
Alexis Faizeau
parent
5f1dd09cb9
commit
0bf1acfefb
63 changed files with 976 additions and 984 deletions
|
|
@ -30,7 +30,7 @@ section.section-input-send-text {
|
|||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px), only screen and (max-height: 800px) {
|
||||
@include media-breakpoint-up(md) {
|
||||
section.section-input-send-text {
|
||||
--height-toolbar: 30%;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,136 +0,0 @@
|
|||
@media (max-aspect-ratio: 1/1) {
|
||||
|
||||
#main-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
|
||||
#cowebsite {
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
|
||||
&.loading {
|
||||
transform: translateY(-90%);
|
||||
}
|
||||
&.hidden {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
main {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
aside {
|
||||
height: 50px;
|
||||
cursor: ns-resize;
|
||||
flex-direction: row-reverse;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
#cowebsite-aside-holder {
|
||||
pointer-events: none;
|
||||
height: 100%;
|
||||
|
||||
img {
|
||||
height: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
#cowebsite-sub-icons {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 0;
|
||||
height: 100%;
|
||||
visibility: visible;
|
||||
|
||||
img {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
cursor: pointer !important;
|
||||
border-radius: 50%;
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
|
||||
&>div {
|
||||
display: flex;
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
#cowebsite-aside-buttons {
|
||||
flex-direction: row-reverse;
|
||||
margin-left: auto;
|
||||
margin-bottom: 0;
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
img {
|
||||
cursor: ns-resize;
|
||||
}
|
||||
|
||||
#cowebsite-fullscreen {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.top-right-btn {
|
||||
img {
|
||||
width: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:960px) and (max-height:768px) {
|
||||
#cowebsite {
|
||||
|
||||
&-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
aside {
|
||||
#cowebsite-sub-icons {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 0;
|
||||
height: 100%;
|
||||
visibility: visible;
|
||||
|
||||
img {
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
cursor: pointer !important;
|
||||
border-radius: 50%;
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
|
||||
&>div {
|
||||
display: flex;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
cursor: ns-resize;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +1,5 @@
|
|||
@import "~@fontsource/press-start-2p/index.css";
|
||||
|
||||
@font-face {
|
||||
font-family: "Twemoji Mozilla";
|
||||
src: url("./fonts/TwemojiMozilla.ttf") format('truetype');
|
||||
}
|
||||
|
||||
*{
|
||||
font-family: PixelFont-7,monospace;
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -1,6 +1,6 @@
|
|||
@charset 'UTF-8';
|
||||
@import "breakpoints";
|
||||
@import "cowebsite.scss";
|
||||
@import "cowebsite-mobile.scss";
|
||||
@import "style";
|
||||
@import "mobile-style.scss";
|
||||
@import "fonts.scss";
|
||||
@import "style";
|
||||
@import "TextGlobalMessageSvelte-Style";
|
||||
|
|
|
|||
|
|
@ -1,48 +0,0 @@
|
|||
@media (hover: none) {
|
||||
/**
|
||||
* If we cannot hover over elements, let's display camera button in full.
|
||||
*/
|
||||
.btn-cam-action {
|
||||
div {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px),
|
||||
screen and (max-height: 700px){
|
||||
video.myCamVideo {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.div-myCamVideo.hide {
|
||||
right: -160px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 20%;
|
||||
min-width: 200px;
|
||||
position: absolute;
|
||||
display: block;
|
||||
right: 0;
|
||||
height: 80%;
|
||||
|
||||
&> div {
|
||||
min-width: 200px;
|
||||
max-height: 21vh;
|
||||
}
|
||||
|
||||
.video-container{
|
||||
min-width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.main-section {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
||||
& > div {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -36,15 +36,22 @@ body .message-info.warning{
|
|||
}
|
||||
|
||||
.video-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
transition: all 0.2s ease;
|
||||
background-color: #00000099;
|
||||
cursor: url('./images/cursor_pointer.png'), pointer;
|
||||
width: 100%;
|
||||
|
||||
&.no-clikable {
|
||||
video {
|
||||
cursor: url('./images/cursor_normal.png'), pointer;
|
||||
}
|
||||
}
|
||||
|
||||
video {
|
||||
height: fit-content;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
cursor: url('./images/cursor_pointer.png'), pointer;
|
||||
|
||||
&.mobile{
|
||||
|
|
@ -146,35 +153,6 @@ body .message-info.warning{
|
|||
}
|
||||
}
|
||||
|
||||
.video-container.div-myCamVideo{
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.div-myCamVideo {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
bottom: 30px;
|
||||
border-radius: 15px 15px 15px 15px;
|
||||
max-height: 20%;
|
||||
transition: right 350ms;
|
||||
}
|
||||
|
||||
.div-myCamVideo.hide {
|
||||
right: -20vw;
|
||||
}
|
||||
|
||||
video.myCamVideo{
|
||||
background-color: #00000099;
|
||||
max-height: 20vh;
|
||||
width: 15vw;
|
||||
-webkit-transform: scaleX(-1);
|
||||
transform: scaleX(-1);
|
||||
border-radius: 15px 15px 15px 15px;
|
||||
/*width: 200px;*/
|
||||
/*height: 113px;*/
|
||||
}
|
||||
|
||||
.sound-progress{
|
||||
display: none;
|
||||
position: absolute;
|
||||
|
|
@ -211,94 +189,6 @@ video.myCamVideo{
|
|||
top: calc(50% - 20px);
|
||||
}
|
||||
|
||||
.btn-cam-action {
|
||||
pointer-events: all;
|
||||
position: absolute;
|
||||
display: inline-flex;
|
||||
bottom: 10px;
|
||||
right: 15px;
|
||||
width: 240px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
justify-items: center;
|
||||
}
|
||||
/*btn animation*/
|
||||
.btn-cam-action div{
|
||||
cursor: url('./images/cursor_pointer.png'), pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: solid 0px black;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background: #666;
|
||||
box-shadow: 2px 2px 24px #444;
|
||||
border-radius: 48px;
|
||||
transform: translateY(15px);
|
||||
transition-timing-function: ease-in-out;
|
||||
margin: 0 4%;
|
||||
}
|
||||
.btn-cam-action div.disabled {
|
||||
background: #d75555;
|
||||
}
|
||||
.btn-cam-action div.enabled {
|
||||
background: #73c973;
|
||||
}
|
||||
.btn-cam-action:hover div{
|
||||
transform: translateY(0);
|
||||
}
|
||||
.btn-cam-action div:hover{
|
||||
background: #407cf7;
|
||||
box-shadow: 4px 4px 48px #666;
|
||||
transition: 120ms;
|
||||
}
|
||||
.btn-micro{
|
||||
pointer-events: auto;
|
||||
transition: all .3s;
|
||||
/*right: 44px;*/
|
||||
}
|
||||
.btn-video{
|
||||
pointer-events: auto;
|
||||
transition: all .25s;
|
||||
/*right: 134px;*/
|
||||
}
|
||||
.btn-monitor{
|
||||
pointer-events: auto;
|
||||
transition: all .2s;
|
||||
/*right: 224px;*/
|
||||
}
|
||||
.btn-monitor.hide {
|
||||
transform: translateY(60px);
|
||||
}
|
||||
.btn-cam-action:hover .btn-monitor.hide{
|
||||
transform: translateY(60px);
|
||||
}
|
||||
.btn-layout{
|
||||
pointer-events: auto;
|
||||
transition: all .15s;
|
||||
}
|
||||
.btn-layout.hide {
|
||||
transform: translateY(60px);
|
||||
}
|
||||
.btn-cam-action:hover .btn-layout.hide{
|
||||
transform: translateY(60px);
|
||||
}
|
||||
.btn-copy{
|
||||
pointer-events: auto;
|
||||
transition: all .3s;
|
||||
right: 44px;
|
||||
opacity: 1;
|
||||
}
|
||||
.btn-cam-action div img{
|
||||
height: 22px;
|
||||
width: 30px;
|
||||
position: relative;
|
||||
cursor: url('./images/cursor_pointer.png'), pointer;
|
||||
}
|
||||
|
||||
/* Spinner */
|
||||
.connecting-spinner {
|
||||
/*display: inline-block;*/
|
||||
|
|
@ -369,26 +259,6 @@ body {
|
|||
position: absolute;
|
||||
}
|
||||
|
||||
@media (min-aspect-ratio: 1/1) {
|
||||
.game-overlay {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar > div {
|
||||
max-height: 21%;
|
||||
}
|
||||
|
||||
.sidebar > div:hover {
|
||||
max-height: 25%;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
#game {
|
||||
position: relative; /* Position relative is needed for the game-overlay. */
|
||||
|
||||
|
|
@ -486,96 +356,6 @@ input[type=range]:focus::-ms-fill-upper {
|
|||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
|
||||
.game-overlay {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
/* TODO: DO WE NEED FLEX HERE???? WE WANT A SIDEBAR OF EXACTLY 25% (note: flex useful for direction!!!) */
|
||||
}
|
||||
|
||||
.game-overlay + div {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.game-overlay + div > div {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.game-overlay.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.game-overlay video {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.main-section {
|
||||
flex: 0 0 75%;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.main-section > div {
|
||||
margin: 2%;
|
||||
flex-basis: 96%;
|
||||
transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, flex-basis 0.2s;
|
||||
cursor: url('./images/cursor_pointer.png'), pointer;
|
||||
pointer-events: auto;
|
||||
/*flex-shrink: 2;*/
|
||||
}
|
||||
|
||||
.main-section > div:hover {
|
||||
margin: 0%;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
flex: 0 0 25%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sidebar > div {
|
||||
margin: 2%;
|
||||
transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, max-height 0.2s, max-width 0.2s;
|
||||
cursor: url('./images/cursor_pointer.png'), pointer;
|
||||
border-radius: 15px 15px 15px 15px;
|
||||
pointer-events: auto;
|
||||
|
||||
video {
|
||||
max-height: 21vh;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar > div:hover {
|
||||
margin: 0%;
|
||||
}
|
||||
|
||||
.sidebar > div video {
|
||||
cursor: url('./images/cursor_pointer.png'), pointer;
|
||||
}
|
||||
|
||||
/* Let's make sure videos are vertically centered if they need to be cropped */
|
||||
.media-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.chat-mode {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
|
||||
align-items: flex-start;
|
||||
|
||||
padding: 1%;
|
||||
}
|
||||
|
||||
.chat-mode > div {
|
||||
margin: 1%;
|
||||
max-height: 96%;
|
||||
|
|
@ -1061,13 +841,22 @@ div.action.danger p.action-body{
|
|||
}
|
||||
|
||||
|
||||
#svelte-overlay {
|
||||
#game-overlay {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
|
||||
& + div {
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
& + div > div {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
& > div {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
|
@ -1085,22 +874,10 @@ div.action.danger p.action-body{
|
|||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.is-silent {
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
border-radius: 15px 15px 15px 15px;
|
||||
max-height: 20%;
|
||||
transition: right 350ms;
|
||||
right: -300px;
|
||||
background-color: black;
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
padding: 30px 20px;
|
||||
}
|
||||
div.is-silent.hide {
|
||||
right: 15px;
|
||||
&.hide {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
div.emoji-picker {
|
||||
|
|
@ -1121,8 +898,3 @@ div.emoji-picker {
|
|||
user-select: none; /* Non-prefixed version, currently
|
||||
supported by Chrome, Edge, Opera and Firefox */
|
||||
}
|
||||
|
||||
.pixel {
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue