mirror of
https://github.com/JulianGro/overte.git
synced 2025-04-05 23:42:58 +02:00
Electron app css UI changes
This commit is contained in:
Rebecca Stankus
parent
4af1ddf48b
commit
f806c930aa
4 changed files with 83 additions and 62 deletions
|
|
@ -64,10 +64,12 @@ function togglePage(){
|
|||
if (currentPage === "mainPage") {
|
||||
currentPage = "confirmationPage";
|
||||
document.getElementById("select_screen").style.display = "none";
|
||||
document.getElementById("subtitle").innerHTML = "Confirm that you'd like to share this content.";
|
||||
document.getElementById("confirmation_screen").style.display = "block";
|
||||
} else {
|
||||
currentPage = "mainPage";
|
||||
document.getElementById("select_screen").style.display = "block";
|
||||
document.getElementById("subtitle").innerHTML = "Please select the content you'd like to share.";
|
||||
document.getElementById("confirmation_screen").style.display = "none";
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<body id="main">
|
||||
<div id="title" class="text_title">
|
||||
<h1>Share your screen</h1>
|
||||
<h3>Please select the content you'd like to share.</h3>
|
||||
<h3 id="subtitle">Please select the content you'd like to share.</h3>
|
||||
</div>
|
||||
<button id="screenshare" onclick="stopSharing()" style="display: none;">Stop Screenshare</button>
|
||||
<div id="select_screen">
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
<!-- <div class="box"> -->
|
||||
<!-- <div class="heading"> -->
|
||||
<!-- <div class="circle"></div> -->
|
||||
<!-- <span class="screen_label">Screen 1</span> -->
|
||||
<!-- <span class=" abel">Screen 1</span> -->
|
||||
<!-- </div> heading -->
|
||||
<!-- <div class="image"> -->
|
||||
<!-- </div> -->
|
||||
|
|
@ -41,10 +41,10 @@
|
|||
</p>
|
||||
</div>
|
||||
<div id="button_selection">
|
||||
<div id="yes" class="button_confirmation" style="color: #ffffff" onClick="screenConfirmed(true)">
|
||||
<div id="yes" class="button_confirmation" onClick="screenConfirmed(true)">
|
||||
Yes, share this content
|
||||
</div>
|
||||
<div id="no" class="button_confirmation" style="color: #009ee0" onClick="screenConfirmed(false)">
|
||||
<div id="no" class="button_confirmation" onClick="screenConfirmed(false)">
|
||||
No, don't share this content
|
||||
</div>
|
||||
</div> button_selection
|
||||
|
|
@ -52,4 +52,4 @@
|
|||
<script src="app.js"></script>
|
||||
<script src="https://static.opentok.com/v2/js/opentok.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -26,8 +26,8 @@ function createWindow(){
|
|||
const zoomFactor = 1.0;
|
||||
window = new BrowserWindow({
|
||||
backgroundColor: "#000000",
|
||||
width: 1280 * zoomFactor,
|
||||
height: 720 * zoomFactor,
|
||||
width: 940 * zoomFactor,
|
||||
height: 660 * zoomFactor,
|
||||
center: true,
|
||||
frame: true,
|
||||
useContentSize: true,
|
||||
|
|
@ -53,4 +53,4 @@ app.on('ready', function() {
|
|||
createWindow();
|
||||
console.log("sending info");
|
||||
window.webContents.send('connectionInfo', JSON.stringify(connectionInfo))
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,14 +6,8 @@ body {
|
|||
/* -webkit-align-items: center; */
|
||||
/* -webkit-flex-direction: column; */
|
||||
font-family: "Graphik";
|
||||
margin: 0px;
|
||||
|
||||
margin: 0px 22px 10px 22px;
|
||||
}
|
||||
html::-webkit-scrollbar {
|
||||
overflow: scroll;
|
||||
overflow-x: hidden;
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
#confirmation_screen {
|
||||
/* background-color: orange; */
|
||||
|
|
@ -25,7 +19,7 @@ html::-webkit-scrollbar {
|
|||
}
|
||||
|
||||
#confirmation_text {
|
||||
margin-top: 25px;
|
||||
margin-top: 65px;
|
||||
font-size: 25px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
|
@ -44,9 +38,39 @@ html::-webkit-scrollbar {
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
.button_confirmation {
|
||||
margin: 4px;
|
||||
cursor: pointer;
|
||||
width: 250px;
|
||||
height: 75px;
|
||||
line-height: 75px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
color: white
|
||||
}
|
||||
|
||||
#no {
|
||||
color: rgba(1, 152, 203,0.7);
|
||||
}
|
||||
|
||||
#no:hover {
|
||||
color: rgba(1, 152, 203,1);
|
||||
}
|
||||
|
||||
#yes {
|
||||
outline: solid white 2px;
|
||||
}
|
||||
|
||||
#yes:hover {
|
||||
background: #0198CB;
|
||||
}
|
||||
|
||||
yes:hover + #yes_background {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#share_pick {
|
||||
/* background-color: blue; */
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.text_title {
|
||||
|
|
@ -59,19 +83,13 @@ html::-webkit-scrollbar {
|
|||
}
|
||||
|
||||
#title {
|
||||
margin-left: 21px;
|
||||
margin-top: 21px;
|
||||
}
|
||||
|
||||
#selects {
|
||||
margin-left: 21px;
|
||||
margin-top: 70px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
line-height: 48px;
|
||||
font-size: 48px;
|
||||
margin: 0px 0px 0px 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
|
|
@ -91,11 +109,15 @@ h3 {
|
|||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#selects {
|
||||
margin-right: 19px;
|
||||
padding-left: 3px;
|
||||
}
|
||||
|
||||
.screen_label {
|
||||
max-width: 220px;
|
||||
font-size: 25px;
|
||||
line-height: 25px;
|
||||
margin-left: 15px;
|
||||
color: white;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
|
@ -104,40 +126,39 @@ h3 {
|
|||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
background: #C4C4C4;
|
||||
background: #000000;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.circle:hover{
|
||||
background-color: yellow;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button_confirmation {
|
||||
margin: 4px;
|
||||
cursor: pointer;
|
||||
width: 250px;
|
||||
height: 75px;
|
||||
line-height: 75px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.button_confirmation:hover {
|
||||
outline: solid white 2px;
|
||||
width: 250px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.box {
|
||||
/* background-color: orange; */
|
||||
height: 165px;
|
||||
width: 265px;
|
||||
display: inline-block;
|
||||
margin-left: 35px;
|
||||
margin-bottom: 40px;
|
||||
margin-top: 20px;
|
||||
margin-top: 60px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.box:nth-child(1) {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.box:nth-child(2) {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.box:nth-child(3) {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.box:nth-child(3n) {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.box:nth-child(3n+1) {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.heading {
|
||||
|
|
@ -147,11 +168,11 @@ h3 {
|
|||
}
|
||||
|
||||
.image {
|
||||
background-color: blue;
|
||||
width: 265px;
|
||||
height: 165px;
|
||||
max-height: 165px;
|
||||
max-width: 265px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.image:hover {
|
||||
|
|
@ -159,7 +180,6 @@ h3 {
|
|||
}
|
||||
|
||||
.image_no_hover {
|
||||
background-color: blue;
|
||||
width: 265px;
|
||||
height: 165px;
|
||||
max-height: 165px;
|
||||
|
|
@ -169,37 +189,36 @@ h3 {
|
|||
img {
|
||||
width: 265px;
|
||||
height: 165px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.scrollbar {
|
||||
float: right;
|
||||
height: 470px;
|
||||
margin-right: 20px;
|
||||
height: 500px;
|
||||
width: 100%;
|
||||
overflow-y: scroll;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
#style-1::-webkit-scrollbar {
|
||||
width: 15px;
|
||||
background-color: red;
|
||||
width: 9px;
|
||||
overflow: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#style-1::-webkit-scrollbar-thumb {
|
||||
background-color: #0198CB;
|
||||
|
||||
width: 9px;
|
||||
}
|
||||
|
||||
#style-1::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #848484;
|
||||
margin-right: 22px;
|
||||
width: 9px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
button {
|
||||
display: inline-block;
|
||||
|
|
@ -227,4 +246,4 @@ button:active,
|
|||
button.active {
|
||||
background: -webkit-linear-gradient(#E3E3E3 40%, #F9F9F9 70%);
|
||||
background: linear-gradient(#E3E3E3 40%, #F9F9F9 70%);
|
||||
} */
|
||||
} */
|
||||
|
|
|
|||
Loading…
Reference in a new issue