diff --git a/webclient/app.css b/webclient/app.css
index 16f9dd72b7..cd1820e155 100644..100755
--- a/webclient/app.css
+++ b/webclient/app.css
@@ -1,121 +1,194 @@
-/*** Mobile voodoo ***/
-@media all and (max-device-width: 640px) {
-
- #messageTableWrapper {
- margin-right: 0px ! important;
- }
-
- .leftBlock {
- width: 8em ! important;
- font-size: 8px ! important;
- }
-
- .rightBlock {
- width: 0px ! important;
- display: none ! important;
- }
-
- .avatar {
- width: 36px ! important;
- }
-
- #header,
- #messageTable,
- #wrapper,
- #roomName,
- #controls {
- max-width: 640px ! important;
- }
-
- #userIdCell,
- #usersTableWrapper,
- #extraControls {
- display: none;
- }
-
- #buttonsCell {
- width: 60px ! important;
- padding-left: 20px ! important;
- }
-
- #roomLogo {
- display: none;
- }
-
- #roomName {
- text-align: left ! important;
- top: -35px ! important;
- }
-
- .bubble {
- font-size: 12px ! important;
- min-height: 20px ! important;
- }
-
- #page {
- top: 35px ! important;
- bottom: 70px ! important;
- }
-
- #header,
- #page {
- margin: 5px ! important;
- }
-
- #header {
- padding: 5px ! important;
- }
-
- /* stop zoom on select */
- select:focus,
- textarea,
- input
- {
- font-size: 16px ! important;
- }
-
+/** Common layout **/
+
+html {
+ height: 100%;
}
body {
+ height: 100%;
font-family: "Myriad Pro", "Myriad", Helvetica, Arial, sans-serif;
font-size: 12pt;
margin: 0px;
}
h1 {
- font-family: Helvetica, Arial, sans-serif;
+ font-size: 20pt;
}
-/*** Overall page layout ***/
+a:link { color: #666; }
+a:visited { color: #666; }
+a:hover { color: #000; }
+a:active { color: #000; }
#page {
- position: absolute;
- top: 80px;
- bottom: 100px;
- left: 0px;
- right: 0px;
- margin: 20px;
+ min-height: 100%;
+ margin-bottom: -32px; /* to make room for the footer */
}
#wrapper {
margin: auto;
max-width: 1280px;
- height: 100%;
+ padding-top: 40px;
+ padding-bottom: 40px;
+ padding-left: 20px;
+ padding-right: 20px;
}
-#roomName {
+#header
+{
+ position: absolute;
+ top: 0px;
+ width: 100%;
+ background-color: #333;
+ height: 32px;
+}
+
+#headerContent {
+ color: #ccc;
max-width: 1280px;
+ margin: auto;
+ text-align: right;
+ height: 32px;
+ line-height: 32px;
+}
+
+#headerContent a:link,
+#headerContent a:visited,
+#headerContent a:hover,
+#headerContent a:active {
+ color: #fff;
+}
+
+#footer
+{
width: 100%;
+ border-top: #666 1px solid;
+ background-color: #aaa;
+ height: 32px;
+}
+
+#footerContent
+{
+ font-size: 8pt;
+ color: #fff;
+ max-width: 1280px;
+ margin: auto;
+ text-align: center;
+ height: 32px;
+ line-height: 32px;
+}
+
+#genericHeading
+{
+ margin-top: 13px;
+}
+
+#feedback {
+ color: #800;
+}
+
+.mouse-pointer {
+ cursor: pointer;
+}
+
+.invited {
+ opacity: 0.2;
+}
+
+/*** Login Pages ***/
+
+.loginWrapper {
+ text-align: center;
+}
+
+#loginForm {
+ text-align: left;
+ padding: 1em;
+ margin-bottom: 40px;
+ display: inline-block;
+
+ -webkit-border-radius: 10px;
+ -moz-border-radius: 10px;
+ border-radius: 10px;
+
+ -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15);
+ -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15);
+ box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15);
+
+ background-color: #f8f8f8;
+ border: 1px #ccc solid;
+}
+
+#loginForm input[type='radio'] {
+ margin-right: 1em;
+}
+
+#serverConfig {
+ text-align: center;
+}
+
+#serverConfig,
+#serverConfig input,
+#serverConfig button
+{
+ font-size: 10pt ! important;
+}
+
+.smallPrint {
+ color: #888;
+ font-size: 9pt ! important;
+ font-style: italic ! important;
+}
+
+#serverConfig label {
+ display: inline-block;
text-align: right;
- top: -40px;
+ margin-right: 0.5em;
+ width: 7em;
+}
+
+#loginForm,
+#loginForm input,
+#loginForm button,
+#loginForm select {
+ font-size: 18px;
+}
+
+/*** Room page ***/
+
+#roomPage {
position: absolute;
+ top: 120px;
+ bottom: 120px;
+ left: 20px;
+ right: 20px;
+}
+
+#roomWrapper {
+ margin: auto;
+ max-width: 1280px;
+ height: 100%;
+}
+
+#roomName {
+ float: right;
font-size: 16px;
+ margin-top: 15px;
+}
+
+#roomHeader {
+ margin: auto;
+ padding-left: 20px;
+ padding-right: 20px;
+ padding-top: 53px;
+ max-width: 1280px;
}
#controlPanel {
position: absolute;
bottom: 0px;
width: 100%;
+ height: 100px;
background-color: #f8f8f8;
border-top: #aaa 1px solid;
}
@@ -146,10 +219,6 @@ h1 {
background-color: #faa;
}
-.mouse-pointer {
- cursor: pointer;
-}
-
/*** Participant list ***/
#usersTableWrapper {
@@ -300,7 +369,7 @@ h1 {
display: inline-block;
margin-bottom: -1px;
max-width: 90%;
- font-size: 16px;
+ font-size: 14px;
word-wrap: break-word;
padding-top: 7px;
padding-bottom: 5px;
@@ -310,6 +379,11 @@ h1 {
-webkit-text-size-adjust:100%
}
+.bubble img {
+ max-width: 100%;
+ max-height: auto;
+}
+
.differentUser td {
padding-bottom: 5px ! important;
}
@@ -341,8 +415,8 @@ h1 {
}
#room-fullscreen-image img {
- max-width: 100%;
- max-height: 100%;
+ max-width: 90%;
+ max-height: 90%;
bottom: 0;
left: 0;
margin: auto;
@@ -350,9 +424,14 @@ h1 {
position: fixed;
right: 0;
top: 0;
+
+ -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
+ -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
+ box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
}
/*** Recents ***/
+
.recentsTable {
max-width: 480px;
width: 100%;
@@ -402,11 +481,14 @@ h1 {
}
/*** Recents in the room page ***/
+
#roomRecentsTableWrapper {
float: left;
max-width: 320px;
- margin-right: 20px;
+ padding-right: 10px;
+ margin-right: 10px;
height: 100%;
+ border-right: 1px solid #ddd;
overflow-y: auto;
}
@@ -421,55 +503,14 @@ h1 {
}
.profile-avatar img {
- max-width: 100%;
- max-height: 100%;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
}
/*** User profile page ***/
-#user-ids {
- padding-left: 1em;
-}
#user-displayname {
font-size: 24px;
}
-/******************************/
-#header
-{
- padding: 20px;
- max-width: 1280px;
- margin: auto;
-}
-
-#logo,
-#roomLogo {
- max-width: 1280px;
- margin: auto;
-}
-
-#header-buttons {
- float: right;
-}
-
-.text_entry_section {
- position: fixed;
- bottom: 0;
- z-index: 100;
- left: 0;
- right: 10em;
- width: 100%;
- background: #e0e0e0;
-}
-
-.member_invited {
- color: blue;
-}
-
-.member_joined {
-
-}
-
-.member_left {
- color: gray;
-}
|
