You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@openmeetings.apache.org by so...@apache.org on 2023/08/24 14:12:48 UTC
[openmeetings] branch master updated: [OPENMEETINGS-2232] CSS is converted to SASS
This is an automated email from the ASF dual-hosted git repository.
solomax pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/openmeetings.git
The following commit(s) were added to refs/heads/master by this push:
new 4424fc4a5 [OPENMEETINGS-2232] CSS is converted to SASS
4424fc4a5 is described below
commit 4424fc4a53be4be4a8a924bf05b8ec4967142a29
Author: Maxim Solodovnik <so...@gmail.com>
AuthorDate: Thu Aug 24 21:12:28 2023 +0700
[OPENMEETINGS-2232] CSS is converted to SASS
---
.../src/main/front/src/css/_activities.scss | 47 +-
.../src/main/front/src/css/_admin.scss | 64 +-
.../src/main/front/src/css/_calendar.scss | 27 +-
openmeetings-web/src/main/front/src/css/_chat.scss | 324 ++---
.../src/main/front/src/css/_cssemoticons.scss | 167 +--
.../src/main/front/src/css/_general.scss | 579 ++++-----
.../src/main/front/src/css/_interview.scss | 106 ++
openmeetings-web/src/main/front/src/css/_menu.scss | 102 +-
.../src/main/front/src/css/_nettest.scss | 131 +-
.../src/main/front/src/css/_polls.scss | 48 +
.../src/main/front/src/css/_responsive.scss | 34 +-
openmeetings-web/src/main/front/src/css/_room.scss | 1315 +++++++++-----------
openmeetings-web/src/main/front/src/css/_tree.scss | 378 +++---
openmeetings-web/src/main/front/src/css/_wb.scss | 655 +++++-----
.../web/common/OmAjaxClientInfoBehavior.java | 16 +-
.../openmeetings/web/room/VideoSettings.java | 13 +-
16 files changed, 2093 insertions(+), 1913 deletions(-)
diff --git a/openmeetings-web/src/main/front/src/css/_activities.scss b/openmeetings-web/src/main/front/src/css/_activities.scss
index 819810488..e7476d980 100644
--- a/openmeetings-web/src/main/front/src/css/_activities.scss
+++ b/openmeetings-web/src/main/front/src/css/_activities.scss
@@ -2,32 +2,35 @@
#activities {
height: var(--activities-height);
overflow: hidden;
-}
-#activities .ui-resizable-handle {
- width: 100%;
-}
-#activities .control.block {
- white-space: nowrap;
-}
-#activities .control.block .label {
- display: inline-block;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-#activities .ctrl {
- padding-left: 20px;
- padding-right: 20px;
-}
-#activities .area {
- height: calc(100% - 46px);
- overflow-y: auto;
+
+ .ui-resizable-handle {
+ width: 100%;
+ }
+ .control.block {
+ white-space: nowrap;
+
+ .label {
+ display: inline-block;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ }
+ .ctrl {
+ padding-left: 20px;
+ padding-right: 20px;
+ }
+ .area {
+ height: calc(100% - 46px);
+ overflow-y: auto;
+ }
}
.activity.item {
position: relative;
padding: 5px;
margin-bottom: 3px;
border-bottom: 1px solid var(--bs-secondary);
-}
-.activity.item button {
- padding: 0 5px;
+
+ button {
+ padding: 0 5px;
+ }
}
diff --git a/openmeetings-web/src/main/front/src/css/_admin.scss b/openmeetings-web/src/main/front/src/css/_admin.scss
index e29fe2994..532b31f45 100644
--- a/openmeetings-web/src/main/front/src/css/_admin.scss
+++ b/openmeetings-web/src/main/front/src/css/_admin.scss
@@ -6,39 +6,43 @@
}
.adminNav {
height: var(--nav-height);
-}
-.adminNav .goto {
- text-overflow: ellipsis;
- max-width: 25px;
- overflow: hidden;
- display: inline-block;
+
+ .goto {
+ text-overflow: ellipsis;
+ max-width: 25px;
+ overflow: hidden;
+ display: inline-block;
+ }
}
.adminPanelColumnTable {
display: inline-block;
vertical-align: top;
height: 100%;
min-width: var(--list-width);
-}
-.adminPanelColumnTable.label .lblNav {
- height: var(--lbl-nav-height);
+
+ &.label .lblNav {
+ height: var(--lbl-nav-height);
+ }
}
.adminPanelColumnForm {
display: inline-block;
vertical-align: top;
height: calc(100% - var(--buffer-size));
min-width: 450px;
-}
-.adminPanelColumnForm .adminForm {
- height: 100%;
-}
-.adminPanelColumnForm .adminForm .actions {
- height: var(--actions-height);
- padding-top: 5px;
-}
-.adminPanelColumnForm div.scrollcontent {
- height: calc(100% - var(--actions-height));
- vertical-align: top;
- overflow-y: auto;
+
+ .adminForm {
+ height: 100%;
+
+ .actions {
+ height: var(--actions-height);
+ padding-top: 5px;
+ }
+ }
+ div.scrollcontent {
+ height: calc(100% - var(--actions-height));
+ vertical-align: top;
+ overflow-y: auto;
+ }
}
.adminForm legend, .installer legend {
padding: 0.5em 1em;
@@ -62,17 +66,19 @@
}
.onoffswitch {
display:inline-block;
-}
-.onoffswitch .onoff-checkbox {
- display: none !important;
+
+ .onoff-checkbox {
+ display: none !important;
+ }
}
.onoff-label {
margin: 0;
-}
-.onoff-label::before {
- font-family: 'Font Awesome 6 Free';
- font-weight: 900;
- font-size: 2.2em;
+
+ &::before {
+ font-family: 'Font Awesome 6 Free';
+ font-weight: 900;
+ font-size: 2.2em;
+ }
}
.onoff-checkbox + .onoff-label::before {
content: '\f204';
diff --git a/openmeetings-web/src/main/front/src/css/_calendar.scss b/openmeetings-web/src/main/front/src/css/_calendar.scss
index d9f4027ba..77b5aa29c 100644
--- a/openmeetings-web/src/main/front/src/css/_calendar.scss
+++ b/openmeetings-web/src/main/front/src/css/_calendar.scss
@@ -5,17 +5,19 @@
content: "\f133";
font-size: 1em;
}
-.calendarlist li {
- list-style-type: none;
- margin: 0.3em;
-}
-.calendarlist li input {
- width: 100%;
- text-align: center;
- vertical-align: middle;
-}
.calendarlist {
padding: 0;
+
+ li {
+ list-style-type: none;
+ margin: 0.3em;
+
+ input {
+ width: 100%;
+ text-align: center;
+ vertical-align: middle;
+ }
+ }
}
#calendarlistcontainer {
width: 20%;
@@ -33,7 +35,8 @@
/* bootstrap override */
.table-bordered {
border: 1px solid #dee2e6;
-}
-.table-bordered td, .table-bordered th {
- border: 1px solid #dee2e6;
+
+ td, th {
+ border: 1px solid #dee2e6;
+ }
}
diff --git a/openmeetings-web/src/main/front/src/css/_chat.scss b/openmeetings-web/src/main/front/src/css/_chat.scss
index a57aff0a5..bbdea48e3 100644
--- a/openmeetings-web/src/main/front/src/css/_chat.scss
+++ b/openmeetings-web/src/main/front/src/css/_chat.scss
@@ -5,164 +5,152 @@
bottom: 0px;
width: var(--chat-width);
height: var(--chat-height);
-}
-#chatPanel #chatPopup {
- height: 100%;
+
+ #chatPopup {
+ height: 100%;
+
+ .control.block{
+ .label {
+ display: inline-block;
+ width: 70px;
+ padding-inline-start: 5px;
+ }
+ i::before {
+ content: "\f107";
+ }
+ }
+ }
+
+ &.closed #chatPopup .control.block i::before {
+ content: "\f106";
+ }
}
#chat {
height: calc(100% - 20px);
-}
-#chat .chat-toolbar.btn-toolbar .dropdown-menu {
- min-width: unset;
-}
-#chat .chat-toolbar.btn-toolbar .dropdown-menu.btns-only li {
- display: inline-block;
-}
-#chat #chatTabs {
- padding: 0;
- height: calc(100% - var(--chat-tools-height) - var(--chat-msg-height) - var(--buffer-size));
-}
-#chat #chatTabs .nav.nav-tabs .nav-item {
- max-height: var(--chat-tabs-height);
- height: var(--chat-tabs-height);
- overflow: hidden;
-}
-#chat #chatTabs .nav.nav-tabs .nav-item .nav-link {
- padding: 1px 0.9rem;
-}
-#chat #chatTabs .nav.nav-tabs .nav-item .nav-link .close-chat {
- padding: 2px;
- line-height:.5em
-}
-#chatPopup .control.block .label {
- display: inline-block;
- width: 70px;
- padding-inline-start: 5px;
-}
-#chatPanel #chatPopup .control.block i::before {
- content: "\f107";
-}
-#chatPanel.closed #chatPopup .control.block i::before {
- content: "\f106";
-}
-.main.room #chatPanel #chatPopup .control.block i::before {
- content: "\f105";
-}
-.main.room #chatPanel.closed #chatPopup .control.block i::before {
- content: "\f104";
-}
-#chat .messageArea .msg-row.need-moderation {
- background-color: var(--bs-warning);
-}
-#chat .messageArea .time {
- margin-inline-end: 5px;
- font-style: italic;
- font-size: smaller;
-}
-#chat .messageArea .user-row {
- background-size: 38px, 38px;
- background-repeat: no-repeat;
- padding-inline-start: 40px;
- min-height: 40px;
-}
-#chat .messageArea .icons {
- display: none;
- position: absolute;
- z-index: 1;
- margin-inline-start: 50px;
-}
-#chat .messageArea .icons div {
- display: inline-block;
- vertical-align: super;
- margin-inline-end: 2px;
-}
-#chat .messageArea .from {
- margin-left: 5px;
- margin-right: 5px;
- font-weight: bold;
-}
-#chat .messageArea .date-row {
- text-align: center;
- font-style: italic;
- padding: 5px 0;
-}
-#chat #chatTabs .tab-content {
- height: calc(100% - var(--chat-tabs-height));
-}
-#chat #chatTabs .tab-content .tab-pane.messageArea {
- overflow-y: auto;
- padding: 0 5px;
- position: relative;
+
+ .chat-toolbar.btn-toolbar .dropdown-menu {
+ min-width: unset;
+
+ &.btns-only li {
+ display: inline-block;
+ }
+ }
+
+ #chatTabs {
+ padding: 0;
+ height: calc(100% - var(--chat-tools-height) - var(--chat-msg-height) - var(--buffer-size));
+
+ .nav.nav-tabs .nav-item {
+ max-height: var(--chat-tabs-height);
+ height: var(--chat-tabs-height);
+ overflow: hidden;
+
+ .nav-link {
+ padding: 1px 0.9rem;
+
+ .close-chat {
+ padding: 2px;
+ line-height:.5em
+ }
+ }
+ }
+ .tab-content {
+ height: calc(100% - var(--chat-tabs-height));
+
+ .tab-pane.messageArea {
+ overflow-y: auto;
+ padding: 0 5px;
+ position: relative;
+ }
+ }
+ }
+
+ .messageArea {
+ .msg-row.need-moderation {
+ background-color: var(--bs-warning);
+ }
+ .time {
+ margin-inline-end: 5px;
+ font-style: italic;
+ font-size: smaller;
+ }
+ .user-row {
+ background-size: 38px, 38px;
+ background-repeat: no-repeat;
+ padding-inline-start: 40px;
+ min-height: 40px;
+ }
+ .icons {
+ display: none;
+ position: absolute;
+ z-index: 1;
+ margin-inline-start: 50px;
+
+ div {
+ display: inline-block;
+ vertical-align: super;
+ margin-inline-end: 2px;
+ }
+ }
+ .from {
+ margin-left: 5px;
+ margin-right: 5px;
+ font-weight: bold;
+ }
+ .date-row {
+ text-align: center;
+ font-style: italic;
+ padding: 5px 0;
+ }
+ }
+ .chat-tool-icon, .chat.btn {
+ font-size: 1.1em;
+ max-height: var(--chat-tools-height);
+ }
+ .chat-tool-icon {
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 16px;
+ display: inline-block;
+
+ &.list {
+ background-image: url(images/list.png);
+ }
+ &.send-ctrl {
+ background-image: url(images/key_ctrl.png);
+ background-position: 0px 0px;
+ background-size: 25px;
+ }
+ &.sound i::before {
+ content: '\f028';
+ }
+ &.sound-mute i::before {
+ content: '\f6a9';
+ }
+ }
+ .chat-btn {
+ display: inline-block;
+ }
+ .send {
+ width: 16px;
+ padding-left: 0;
+ padding-right: 0;
+ margin-right: 0;
+ margin-left: 0;
+ }
+ .tool-container {
+ min-height: var(--chat-tools-height);
+ }
}
#chatMessage {
width: calc(100% - 16px);
height: var(--chat-msg-height);
max-height: var(--chat-msg-height);
-}
-#chatMessage .wysiwyg-editor {
- min-height: 70px;
- max-height: 70px;
-}
-.chat-tool-icon {
- background-repeat: no-repeat;
- background-position: center;
- background-size: 16px;
- display: inline-block;
-}
-.list.chat-tool-icon {
- background-image: url(images/list.png);
-}
-#chat .chat-tool-icon, #chat .chat.btn {
- font-size: 1.1em;
- max-height: var(--chat-tools-height);
-}
-#chat .sound.chat-tool-icon i::before {
- content: '\f028';
-}
-#chat .sound-mute.chat-tool-icon i::before {
- content: '\f6a9';
-}
-.send-ctrl.chat-tool-icon {
- background-image: url(images/key_ctrl.png);
- background-position: 0px 0px;
- background-size: 25px;
-}
-#chat .chat-btn {
- display: inline-block;
-}
-#chat .send {
- width: 16px;
- padding-left: 0;
- padding-right: 0;
- margin-right: 0;
- margin-left: 0;
-}
-#chat .tool-container {
- min-height: var(--chat-tools-height);
-}
-/* room mode */
-.main.room #chatPanel {
- margin: 0 !important;
- right: 0px;
- top: var(--room-menu-height);
-}
-.main.room #chatPanel #chat form {
- position: absolute;
- bottom: 0px;
- width: 100%;
-}
-.main.room #chatPanel.closed #chatPopup .control.block {
- height: 100% !important;
-}
-.main.room #chatPanel.closed #chatPopup .control.block .label {
- transform: rotate(90deg);
- transform-origin: -15% 68% 0;
- position: absolute;
- top: 0;
- right: -67px;
-}
-.main.room #chatPanel.closed #chatPopup #chat {
- display: none;
+
+ .wysiwyg-editor {
+ min-height: 70px;
+ max-height: 70px;
+ }
}
.emt {
font-size: 10pt;
@@ -195,4 +183,40 @@
z-index: calc(var(--chat-zindex) + 1);
}
+/* room mode */
+.main.room #chatPanel {
+ margin: 0 !important;
+ right: 0px;
+ top: var(--room-menu-height);
+
+ #chat form {
+ position: absolute;
+ bottom: 0px;
+ width: 100%;
+ }
+ .control.block i::before {
+ content: "\f105";
+ }
+
+ &.closed #chatPopup {
+ #chat {
+ display: none;
+ }
+ .control.block {
+ height: 100% !important;
+
+ i::before {
+ content: "\f104";
+ }
+ .label {
+ transform: rotate(90deg);
+ transform-origin: -15% 68% 0;
+ position: absolute;
+ top: 0;
+ right: -67px;
+ }
+ }
+ }
+}
+
@import "cssemoticons";
diff --git a/openmeetings-web/src/main/front/src/css/_cssemoticons.scss b/openmeetings-web/src/main/front/src/css/_cssemoticons.scss
index 784ab3c17..a3108709f 100644
--- a/openmeetings-web/src/main/front/src/css/_cssemoticons.scss
+++ b/openmeetings-web/src/main/front/src/css/_cssemoticons.scss
@@ -33,12 +33,87 @@ span.css-emoticon {
transition-property: color, background, transform;
transition-duration: 1s, 1s;
transition-timing-function: linear, ease-in;
-}
-/* Styles for two-character emoticons that need more letter-spacing for proportionality */
-span.css-emoticon.spaced-emoticon {
- padding-left: 0.2em;
- width: 1.34em;
- letter-spacing: 0.2em;
+
+ /* Styles for two-character emoticons that need more letter-spacing for proportionality */
+ &.spaced-emoticon {
+ padding-left: 0.2em;
+ width: 1.34em;
+ letter-spacing: 0.2em;
+
+ &.small-emoticon {
+ padding-left: 0;
+ width: 1.82em;
+ letter-spacing: 0.1em;
+ }
+ }
+ /* Styles for emoticons that need to have smaller characters to fit inside the circle */
+ &.small-emoticon {
+ font-size: 0.55em;
+ width: 1.82em;
+ height: 1.82em;
+ line-height: 1.72em;
+ border-radius: 1.82em;
+ }
+ /* Styles for additional colors */
+ &.red-emoticon {
+ background-color: #eb0542;
+ background-image: linear-gradient(to right, #fa376e, #eb0542);
+ }
+ &.pink-emoticon {
+ background-color: #ff8fd4;
+ background-image: linear-gradient(to right, #ffade1, #ff8fd4);
+ }
+ /* styles for emoticons that need no rotation, like O_o */
+ &.no-rotate {
+ transform: rotate(0deg);
+ box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
+ font-size: 0.45em;
+ width: 2.2em;
+ height: 2.2em;
+ line-height: 1.9em;
+ border-radius: 2.2em;
+ background-image: linear-gradient(#fff4c8, #fc0);
+
+ &.red-emoticon {
+ background-image: linear-gradient(#fa376e, #eb0542);
+ }
+ &.pink-emoticon {
+ background-image: linear-gradient(#ffade1, #ff8fd4);
+ }
+ }
+ /* Styles for emoticons that need to be rotated counter-clockwise, like <3 */
+ &.counter-rotated {
+ transform: rotate(-90deg);
+ box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
+ background-image: linear-gradient(to left, #fff4c8, #fc0);
+
+ &.red-emoticon {
+ background-image: linear-gradient(to left, #fa376e, #eb0542);
+ }
+ &.pink-emoticon {
+ background-image: linear-gradient(to left, #ffade1, #ff8fd4);
+ }
+ }
+ /* Styles for animated states */
+ &.un-transformed-emoticon, &.animated-emoticon:hover {
+ letter-spacing: inherit;
+ color: inherit;
+ overflow: visible;
+ transform: rotate(0deg);
+ background: none;
+ background-image: none;
+ box-shadow: none;
+ border-color: transparent;
+ }
+ &.nintendo-controller {
+ font-size: .8em;
+ height: 1.2em;
+ line-height: 1em;
+ width: 2.7em;
+ vertical-align: bottom;
+ border-radius: 0;
+ background: linear-gradient(to right, #a5aabd, #74798c);
+ }
}
/* This is a dirty dirty hack, because webkit doesn't properly do the padding+width=total-width as it should
I think the width of the border may be throwing things off, because it's more noticable for small icons */
@@ -47,83 +122,11 @@ span.css-emoticon.spaced-emoticon {
width: 1.4em;
}
}
-/* Styles for emoticons that need to have smaller characters to fit inside the circle */
-span.css-emoticon.small-emoticon {
- font-size: 0.55em;
- width: 1.82em;
- height: 1.82em;
- line-height: 1.72em;
- border-radius: 1.82em;
-}
-span.css-emoticon.small-emoticon.spaced-emoticon {
- padding-left: 0;
- width: 1.82em;
- letter-spacing: 0.1em;
-}
-/* Styles for additional colors */
-span.css-emoticon.red-emoticon {
- background-color: #eb0542;
- background-image: linear-gradient(to right, #fa376e, #eb0542);
-}
-span.css-emoticon.pink-emoticon {
- background-color: #ff8fd4;
- background-image: linear-gradient(to right, #ffade1, #ff8fd4);
-}
-/* styles for emoticons that need no rotation, like O_o */
-span.css-emoticon.no-rotate {
- transform: rotate(0deg);
- box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
- font-size: 0.45em;
- width: 2.2em;
- height: 2.2em;
- line-height: 1.9em;
- border-radius: 2.2em;
- background-image: linear-gradient(#fff4c8, #fc0);
-}
-span.css-emoticon.no-rotate.red-emoticon {
- background-image: linear-gradient(#fa376e, #eb0542);
-}
-span.css-emoticon.no-rotate.pink-emoticon {
- background-image: linear-gradient(#ffade1, #ff8fd4);
-}
-/* Styles for emoticons that need to be rotated counter-clockwise, like <3 */
-span.css-emoticon.counter-rotated {
- transform: rotate(-90deg);
- box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
- background-image: linear-gradient(to left, #fff4c8, #fc0);
-}
-span.css-emoticon.counter-rotated.red-emoticon {
- background-image: linear-gradient(to left, #fa376e, #eb0542);
-}
-span.css-emoticon.counter-rotated.pink-emoticon {
- background-image: linear-gradient(to left, #ffade1, #ff8fd4);
-}
-/* Styles for animated states */
-span.css-emoticon.un-transformed-emoticon, span.css-emoticon.animated-emoticon:hover {
- letter-spacing: inherit;
- color: inherit;
- overflow: visible;
- transform: rotate(0deg);
- background: none;
- background-image: none;
- box-shadow: none;
- border-color: transparent;
-}
-span.css-emoticon.nintendo-controller {
- font-size: .8em;
- height: 1.2em;
- line-height: 1em;
- width: 2.7em;
- vertical-align: bottom;
- border-radius: 0;
- background: linear-gradient(to right, #a5aabd, #74798c);
-}
-html[dir="rtl"] span.css-emoticon.un-transformed-emoticon
-, html[dir="rtl"] span.css-emoticon.animated-emoticon:hover
-{
- transform: rotate(0deg) !important;
-}
html[dir="rtl"] span.css-emoticon {
transform: rotate(-90deg) !important;
+
+ &.un-transformed-emoticon, &.animated-emoticon:hover {
+ transform: rotate(0deg) !important;
+ }
}
diff --git a/openmeetings-web/src/main/front/src/css/_general.scss b/openmeetings-web/src/main/front/src/css/_general.scss
index 8055dfdf4..488ecaa6d 100644
--- a/openmeetings-web/src/main/front/src/css/_general.scss
+++ b/openmeetings-web/src/main/front/src/css/_general.scss
@@ -64,10 +64,6 @@ html, body {
overflow-y: auto;
padding: 5px;
}
-#searchUsersTable.list-table {
- max-width: 100%;
- height: calc(100% - 50px);
-}
.pagedEntityListPanel, .addLanguagePanel {
margin-inline-start: 2px;
display: inline-block;
@@ -145,9 +141,10 @@ html, body {
}
.widget {
width: 100%;
-}
-.widget td {
- min-width: 150px;
+
+ td {
+ min-width: 150px;
+ }
}
#contents {
height: calc(100% - var(--menu-height));
@@ -207,97 +204,98 @@ html, body {
border: 1px solid black;
padding: 15px;
border-radius: 8px;
-}
-.private.message.body {
- border: 0;
- margin: 0;
- padding: 0;
-}
-.private.message.body .quote {
- --bs-border-width: 1px;
- --bs-border-style: solid;
- --bs-border-color: #cccccc;
- margin-inline-start: 10px;
- padding-inline-start: 10px;
+ &.private.body {
+ border: 0;
+ margin: 0;
+ padding: 0;
+
+ .quote {
+ --bs-border-width: 1px;
+ --bs-border-style: solid;
+ --bs-border-color: #cccccc;
+
+ margin-inline-start: 10px;
+ padding-inline-start: 10px;
+ }
+ }
}
table.messages {
width: 100%;
min-height: 500px;
-}
-table.messages td.side, table.messages td.main {
- vertical-align: top;
-}
-table.messages td.side.left {
- min-width: 150px;
- overflow-x: hidden;
-}
-table.messages td.side.right {
- min-width: 200px;
- overflow-x: hidden;
-}
-table.messages td.side.right .del-contact {
- padding: 0;
- margin: 0;
- height: 16px;
- width: 16px;
- position: relative;
-}
-table.messages td.side.right .del-contact i {
- position: absolute;
- top: 1px;
- left: 3px;
-}
-table.messages td.main {
- width: 100%;
-}
-table.messages td.from, table.messages td.subject {
- overflow-wrap: break-word;
+
+ td.side, td.main {
+ vertical-align: top;
+ }
+ td.side.left {
+ min-width: 150px;
+ overflow-x: hidden;
+ }
+ td.side.right {
+ min-width: 200px;
+ overflow-x: hidden;
+
+ .del-contact {
+ padding: 0;
+ margin: 0;
+ height: 16px;
+ width: 16px;
+ position: relative;
+
+ i {
+ position: absolute;
+ top: 1px;
+ left: 3px;
+ }
+ }
+ }
+ td.main {
+ width: 100%;
+ }
+ td.from, td.subject {
+ overflow-wrap: break-word;
+ }
}
.email {
padding-top: 2px;
display: block;
+
+ &.selected {
+ border: 1px solid #cccccc;
+ background-color:var(--bs-light);
+ }
+ &.folder {
+ font-weight: normal;
+ position: relative;
+
+ .delete {
+ position:absolute;
+ top: 2px;
+ font-weight: normal;
+ padding: 0;
+ display: inline-block;
+ width: 18px;
+ height: 18px;
+
+ i {
+ top: 2px;
+ position: absolute;
+ left: 4px;
+ }
+ }
+ }
}
-.email.selected {
- border: 1px solid #cccccc;
- background-color:var(--bs-light);
-}
-.email.folder {
- font-weight: normal;
- position: relative;
-}
-.email.folder .delete {
- position:absolute;
- top: 2px;
- font-weight: normal;
- padding: 0;
- display: inline-block;
- width: 18px;
- height: 18px;
-}
-.email.folder .delete i {
- top: 2px;
- position: absolute;
- left: 4px;
-}
-input[type="text"].messages.text {
- width: 100%;
-}
-textarea.messages.body {
- width: 100%;
- height: 300px;
-}
-select.messages.selector {
- width: 220px;
-}
-#messagesTable tr.selected {
- background-color: var(--bs-light);
-}
-#messagesTable tr.unread {
- font-weight: bold;
-}
-#messagesTable tr.unread>td:nth-child(1)::before {
- content: '*'
+#messagesTable tr {
+ &.selected {
+ background-color: var(--bs-light);
+ }
+ &.unread {
+ font-weight: bold;
+
+ &>td:nth-child(1)::before {
+ content: '*'
+ }
+ }
}
.fht-tbody {
background-color: white;
@@ -308,69 +306,70 @@ select.messages.selector {
.room-list .room-row button.refresh {
padding: 0 0.25rem;
}
-.select2-results .user.external, .select2-selection .user.external
-, .select2-results .user.internal, .select2-selection .user.internal {
- padding-inline-start: 18px;
- background-repeat: no-repeat;
- background-position: var(--background-start) 2px;
-}
-.select2-results .user.external, .select2-selection .user.external {
- background-image: url(images/user_go.png);
-}
-.select2-results .user.internal, .select2-selection .user.internal {
- background-image: url(images/user.png);
+.select2-results, .select2-selection {
+ .user {
+ &.internal, &.external {
+ padding-inline-start: 18px;
+ background-repeat: no-repeat;
+ background-position: var(--background-start) 2px;
+ }
+ &.internal {
+ background-image: url(images/user.png);
+ }
+ &.external {
+ background-image: url(images/user_go.png);
+ }
+ }
}
.om-select2 .select2.select2-container {
max-height: 80px;
overflow-y: auto;
width: 100% !important;
}
-.om-select2.full-width .select2.select2-container {
- width: 100% !important;
-}
.recording-panel {
display: flex;
height: 100%;
-}
-.recording-panel .file-tree {
- height: 100%;
-}
-.recording-panel .tree-panel {
- height: calc(100% - var(--info-height));
-}
-.recording-panel .file-tree
-, .recording-panel .tree-panel
-, .recording-panel .info
-{
- width: 325px;
-}
-.recording-panel .info .details .value {
- padding: 0;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
-}
-.recording-panel .file-tree .info {
- height: var(--info-height);
-}
-.recording-panel .video {
- width: 100%;
- display: inline-block;
- box-shadow: 0 0 10px 1px rgba(74, 137, 151, 0.5);
-}
-.recording-panel .video video {
- width: 100%;
-}
-.page.recording-panel {
- padding-top: 40px;
-}
-.page.recording-panel .video, .page.recording-panel .info {
- display: inline-block;
- float: inline-start;
- padding-inline-start: 20px;
-}
-.page.recording-panel .video {
- min-width: 400px;
+
+ .file-tree {
+ height: 100%;
+
+ .info {
+ height: var(--info-height);
+ }
+ }
+ .tree-panel {
+ height: calc(100% - var(--info-height));
+ }
+ .file-tree, .tree-panel, .info {
+ width: 325px;
+ }
+ .info .details .value {
+ padding: 0;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+ .video {
+ width: 100%;
+ display: inline-block;
+ box-shadow: 0 0 10px 1px rgba(74, 137, 151, 0.5);
+
+ video {
+ width: 100%;
+ }
+ }
+ &.page {
+ padding-top: 40px;
+
+ .video, .info {
+ display: inline-block;
+ float: inline-start;
+ padding-inline-start: 20px;
+ }
+ .video {
+ min-width: 400px;
+ }
+ }
}
.rooms-header {
min-height: var(--rooms-header-height);
@@ -399,30 +398,29 @@ select.messages.selector {
min-width: 415px;
height: 100%;
overflow-y: auto;
+
+ .room-row .container {
+ margin: 0;
+ }
}
-.rooms-table .room-row .container {
- margin: 0;
-}
-.rooms.title {
- font-weight: bold;
- padding: 10px;
- padding-bottom: 0;
-}
-.rooms.desc {
- margin: 10px;
- max-width: 900px;
-}
-.overflow-y-auto {
- overflow-y: auto;
-}
-.overflow-x-hidden {
- overflow-x: hidden;
-}
-.user.info.panel legend {
- font-style: italic;
+.rooms {
+ &.title {
+ font-weight: bold;
+ padding: 10px;
+ padding-bottom: 0;
+ }
+ &.desc {
+ margin: 10px;
+ max-width: 900px;
+ }
}
-.user.info.panel fieldset table, .user.info.panel fieldset table textarea {
- width: 100%;
+.user.info.panel {
+ legend {
+ font-style: italic;
+ }
+ fieldset table, fieldset table textarea {
+ width: 100%;
+ }
}
.main-container #wicketDebugBar {
right: initial;
@@ -434,18 +432,19 @@ select.messages.selector {
.profile {
position: relative;
display: inline-block;
-}
-.profile img {
- max-width: 125px;
- max-height: 125px;
+
+ img {
+ max-width: 125px;
+ max-height: 125px;
+ }
+ .remove {
+ border: 1px solid #cccccc;
+ padding: 0px 7px;
+ }
}
.date.time.picker {
font-size: 12px;
}
-.profile .remove {
- border: 1px solid #cccccc;
- padding: 0px 7px;
-}
.room.list.container {
height: 150px;
max-height: 150px;
@@ -461,53 +460,59 @@ select.messages.selector {
.col-wrapper {
word-wrap: break-word;
}
+#searchUsersTable.list-table {
+ max-width: 100%;
+ height: calc(100% - 50px);
+}
.list-table {
display: flex;
flex-flow: column;
width: 100%;
min-width: 518px;
height: calc(100% - var(--nav-height) - var(--lbl-nav-height) - var(--buffer-size));
-}
-.list-table thead {
- /* head takes the height it requires,
- and it's not scaled when table is resized */
- flex: 0 0 auto;
- width: calc(100% - 1.0em);
-}
-.list-table tbody {
- /* body takes all the remaining available space */
- flex: 1 1 auto;
- display: block;
- overflow-y: scroll;
- overflow-x: hidden;
- background-color: white;
-}
-.list-table tbody tr {
- width: 100%;
-}
-.list-table thead, .list-table tbody tr {
- display: table;
- table-layout: fixed;
-}
-.list-table th {
- overflow: hidden;
- text-align: var(--text-align-start);
+
+ thead {
+ /* head takes the height it requires,
+ and it's not scaled when table is resized */
+ flex: 0 0 auto;
+ width: calc(100% - 1.0em);
+ }
+ tbody {
+ /* body takes all the remaining available space */
+ flex: 1 1 auto;
+ display: block;
+ overflow-y: scroll;
+ overflow-x: hidden;
+ background-color: white;
+
+ tr {
+ width: 100%;
+ }
+ }
+ thead, tbody tr {
+ display: table;
+ table-layout: fixed;
+ }
+ th {
+ overflow: hidden;
+ text-align: var(--text-align-start);
+ }
+ &.small {
+ height: 150px;
+ }
+ &.full-width {
+ max-width: initial;
+ }
+ tr.deleted {
+ background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, /* gap */ #cccccc 6px, /* overall width incluing gap */ #cccccc 6px);
+ }
}
.bottom-bumper {
height: 30px;
}
-.list-table.small {
- height: 150px;
-}
-.list-table.full-width {
- max-width: initial;
-}
.list-table tr:nth-child(odd), .striped-table .striped-row:nth-child(odd) {
opacity: .8;
}
-.list-table tr.deleted {
- background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, /* gap */ #cccccc 6px, /* overall width incluing gap */ #cccccc 6px);
-}
.tableWrapper {
background-color: #FFFFFF;
border: solid 1px #aacfe4;
@@ -530,49 +535,59 @@ select.messages.selector {
vertical-align: super;
margin: 0;
}
-.dragbox .dragbox-header .dragbox-actions .icon {
- vertical-align: middle;
-}
-.dragbox .dragbox-header .dragbox-toggle.expanded::before {
- content: "\f0d7";
-}
-.dragbox .dragbox-header .dragbox-toggle.collapsed::before {
- content: "\f0d8";
-}
-.dragbox .dragbox-header .dragbox-actions .icon.refresh::before {
- content: "\f2f1";
-}
-.dragbox .dragbox-header .dragbox-actions .icon.delete::before {
- content: "\f00d";
- color: var(--bs-danger);
-}
-.dragbox-content .tableWrapper {
- /* room users on dashboard */
- width: auto;
- height: 100px;
-}
-.dragbox-content .rooms-widget {
- display: flex;
-}
-.sort-icon a {
- vertical-align: middle;
- text-decoration: none;
-}
-.sort-icon.none a::before {
- content: '\f0dc';
+.dragbox .dragbox-header {
+ .dragbox-actions .icon {
+ vertical-align: middle;
+
+ &.refresh::before {
+ content: "\f2f1";
+ }
+ &.delete::before {
+ content: "\f00d";
+ color: var(--bs-danger);
+ }
+ }
+ .dragbox-toggle {
+ &.expanded::before {
+ content: "\f0d7";
+ }
+ &.collapsed::before {
+ content: "\f0d8";
+ }
+ }
}
-.sort-icon.desc a::before {
- content: '\f0dd';
+.dragbox-content {
+ .tableWrapper {
+ /* room users on dashboard */
+ width: auto;
+ height: 100px;
+
+ .list-table {
+ min-width: auto;
+ }
+ }
+ .rooms-widget {
+ display: flex;
+ }
}
-.sort-icon.asc a::before {
- content: '\f0de';
+.sort-icon {
+ a {
+ vertical-align: middle;
+ text-decoration: none;
+ }
+ &.none a::before {
+ content: '\f0dc';
+ }
+ &.desc a::before {
+ content: '\f0dd';
+ }
+ &.asc a::before {
+ content: '\f0de';
+ }
}
.tableWrapper .list-table {
height: 100%;
}
-.dragbox-content .tableWrapper .list-table {
- min-width: auto;
-}
.level-meter {
border-radius: 3px;
}
@@ -584,18 +599,21 @@ select.messages.selector {
.om-tbl {
display: table;
width: 100%;
-}
-.om-tbl .om-tbl-row {
- display: table-row;
-}
-.om-tbl .om-tbl-row .om-tbl-cell {
- display: table-cell;
+
+ .om-tbl-row {
+ display: table-row;
+
+ .om-tbl-cell {
+ display: table-cell;
+ }
+ }
}
.access-denied.outer {
margin: 4em;
-}
-.access-denied.outer .inner {
- padding: 2em;
+
+ .inner {
+ padding: 2em;
+ }
}
.captcha-text {
margin-bottom: 5px;
@@ -608,34 +626,35 @@ select.messages.selector {
padding: 20px;
border: 1px solid #cccccc;
border-radius: 10px;
-}
-.main.privacy h2 {
- font-size: 30px;
- font-weight: 300;
- margin: 10px 0;
- color: #333;
-}
-.main.privacy h3 {
- color: #325d72;
- font-weight: 700;
- font-size: 24px;
- margin: 1.5em 0 1em;
- border-bottom: 1px solid #ddd;
-}
-.main.privacy h4 {
- color: #333;
- font-weight: 700;
- font-size: 1.2em;
- margin: 1em 0;
-}
-.main.privacy h5 {
- color: #325D72;
- font-weight: 700;
- font-size: 1em;
- margin: 1em 0;
-}
-.main.privacy p {
- margin: 1em 0;
+
+ h2 {
+ font-size: 30px;
+ font-weight: 300;
+ margin: 10px 0;
+ color: #333;
+ }
+ h3 {
+ color: #325d72;
+ font-weight: 700;
+ font-size: 24px;
+ margin: 1.5em 0 1em;
+ border-bottom: 1px solid #ddd;
+ }
+ h4 {
+ color: #333;
+ font-weight: 700;
+ font-size: 1.2em;
+ margin: 1em 0;
+ }
+ h5 {
+ color: #325D72;
+ font-weight: 700;
+ font-size: 1em;
+ margin: 1em 0;
+ }
+ p {
+ margin: 1em 0;
+ }
}
.private-message .ui-autocomplete {
z-index: 999 !important;
diff --git a/openmeetings-web/src/main/front/src/css/_interview.scss b/openmeetings-web/src/main/front/src/css/_interview.scss
new file mode 100644
index 000000000..ac98b1d61
--- /dev/null
+++ b/openmeetings-web/src/main/front/src/css/_interview.scss
@@ -0,0 +1,106 @@
+/* Licensed under the Apache License, Version 2.0 (the "License") http://www.apache.org/licenses/LICENSE-2.0 */
+.main.room.INTERVIEW .wb-block .wb-area {
+ .pod-area {
+ width: 100%;
+ height: calc(100% - var(--rec-btn-height));
+ }
+ .rec-btn {
+ z-index: 100;
+ border-radius: 30px;
+ position: absolute;
+ right: 50%;
+ bottom: 0px;
+ width: 40px;
+ height: var(--rec-btn-height);
+
+ .ui-button-icon.ui-icon.stop, .ui-button-icon.ui-icon.record {
+ background-image: none;
+ background-color: red;
+ }
+ .ui-button-icon.ui-icon.record {
+ border-radius: 15px;
+ }
+ }
+}
+.pod-area {
+ display: inline-grid;
+
+ .empty {
+ grid-area: e;
+ }
+
+ &.max2, &.max3 {
+ grid-template-columns: repeat(3, 1fr);
+ grid-template-rows: repeat(2, 1fr);
+ }
+ &.max2 {
+ grid-template-areas:
+ "e a a"
+ "b a a";
+ }
+ &.max3 {
+ grid-template-areas:
+ "b1 a a"
+ "b2 a a";
+ }
+ &.max5, &.max9, &.max13 {
+ grid-template-columns: repeat(4, 1fr);
+ grid-template-areas:
+ "b1 a a b2"
+ "b3 a a b4";
+ }
+ &.max5 {
+ grid-template-rows: repeat(2, 1fr);
+ }
+ &.max9 {
+ grid-template-rows: repeat(3, 1fr);
+ }
+ &.max13 {
+ grid-template-rows: repeat(4, 1fr);
+ }
+ &.max17, &.max25, &.max33 {
+ grid-template-columns: repeat(8, 1fr);
+ grid-template-areas:
+ "b01 b02 a a a a b03 b04"
+ "b05 b06 a a a a b07 b08"
+ "b09 b10 a a a a b11 b12"
+ "b13 b14 a a a a b15 b16";
+ }
+ &.max17 {
+ grid-template-rows: repeat(4, 1fr);
+ }
+ &.max25 {
+ grid-template-rows: repeat(5, 1fr);
+ }
+ &.max33 {
+ grid-template-rows: repeat(6, 1fr);
+ }
+ .pod-big, .pod {
+ position: relative;
+ padding: 2px;
+ margin: 2px;
+ overflow: hidden;
+
+ .user-video.ui-dialog {
+ height: calc(100% - var(--buffer-size)) !important;
+ width: calc(100% - var(--buffer-size)) !important;
+ }
+ }
+ .pod-big {
+ grid-area: a;
+ border: 1px solid #cccccc;
+ border-radius: 8px;
+ background-image: url(images/drop.png);
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 64px;
+
+ &.ui-hightlight {
+ box-shadow: 3px 3px 4px blue;
+ }
+ }
+ .pod.ui-sortable-placeholder {
+ background-color: whitesmoke;
+ visibility: visible !important;
+ }
+}
diff --git a/openmeetings-web/src/main/front/src/css/_menu.scss b/openmeetings-web/src/main/front/src/css/_menu.scss
index 4550aac60..30bd9e946 100644
--- a/openmeetings-web/src/main/front/src/css/_menu.scss
+++ b/openmeetings-web/src/main/front/src/css/_menu.scss
@@ -3,50 +3,60 @@
padding-top: 0;
padding-bottom: 0;
}
-.room-block .menu .top.exit {
- padding-inline-start: 0;
-}
-.room-block .menu .details {
- position: absolute;
- top: 0;
- margin-inline-end: 5px;
- display: inline-block;
- z-index: calc(var(--menu-zindex) + 1);
-}
-.room-block .menu .details .room {
- padding-top: 5px;
- padding-inline-end: 5px;
-}
-.room-block .menu .details .room.name {
- font-weight: bold;
-}
-.room-block .menu .details .room.name.screen {
- color: var(--bs-danger);
-}
-.room-block .menu .details .icon {
- width: 30px;
- height: 30px;
- padding: 0;
-}
-.room-block .menu .details .detail-btn {
- padding: 0.1rem 0.4rem;
- position: relative;
-}
-.room-block .menu .details .detail-btn i::before {
- font-size: 1.4em;
- line-height: 1.2em;
-}
-.room-block .menu .details .detail-btn.shared {
- display: none;
-}
-.room-block .menu .details .detail-btn i.add-on {
- position: absolute;
- color: var(--bs-warning);
- bottom: 0;
-}
-.room-block .menu .details .icon .profile {
- margin-top: 3px;
-}
-.room-block .menu .details .icon .profile img {
- width: 28px;
+.room-block .menu {
+ .top.exit {
+ padding-inline-start: 0;
+ }
+ .details {
+ position: absolute;
+ top: 0;
+ margin-inline-end: 5px;
+ display: inline-block;
+ z-index: calc(var(--menu-zindex) + 1);
+
+ .room {
+ padding-top: 5px;
+ padding-inline-end: 5px;
+
+ &.name {
+ font-weight: bold;
+
+ &.screen {
+ color: var(--bs-danger);
+ }
+ }
+ }
+ .icon {
+ width: 30px;
+ height: 30px;
+ padding: 0;
+
+ .profile {
+ margin-top: 3px;
+
+ img {
+ width: 28px;
+ }
+ }
+ }
+ .detail-btn {
+ padding: 0.1rem 0.4rem;
+ position: relative;
+
+ i {
+ &.add-on {
+ position: absolute;
+ color: var(--bs-warning);
+ bottom: 0;
+ }
+ &::before {
+ font-size: 1.4em;
+ line-height: 1.2em;
+ }
+ }
+ &.shared {
+ display: none;
+ }
+ }
+ }
}
diff --git a/openmeetings-web/src/main/front/src/css/_nettest.scss b/openmeetings-web/src/main/front/src/css/_nettest.scss
index ee11cba4f..d496ee00b 100644
--- a/openmeetings-web/src/main/front/src/css/_nettest.scss
+++ b/openmeetings-web/src/main/front/src/css/_nettest.scss
@@ -6,68 +6,71 @@
.nettest {
padding: 20px;
height: 100%;
-}
-.nettest .test-container {
- display: inline-block;
- position: relative;
- width: 200px;
-}
-.nettest .test-container button.not-started
-, .nettest .test-container button.started
-{
- color: var(--bs-secondary);
- border-color: var(--bs-secondary);
-}
-.nettest .test-container button:hover {
- color: var(--bs-white);
- border-color: transparent;
-}
-.nettest .test-container button.not-started:hover
-, .nettest .test-container button.started:hover
-{
- background-color: var(--bs-secondary);
-}
-.nettest .test-container button.complete {
- color: var(--bs-success);
- border-color: var(--bs-success);
-}
-.nettest .test-container button.complete:hover {
- background-color: var(--bs-success);
-}
-.nettest .test-container button.not-started i::before {
- content: '\f04b';
-}
-.nettest .test-container button.started i {
- animation: fa-spin 2s linear infinite;
-}
-.nettest .test-container button.started i::before {
- content: '\f110';
-}
-.nettest .test-container button.complete i::before {
- content: '\f00c';
-}
-.nettest .test-container .value {
- min-height: 3em;
-}
-.nettest .test-container .card-title {
- white-space: nowrap;
-}
-.nettest .output {
- border-radius: 10px;
- border: 1px solid #cccccc;
- min-height: calc(100% - 170px);
- max-height: calc(100% - 170px);
- margin-top: 20px;
- overflow: auto;
-}
-.nettest output .module {
- color: #6b0df7;
- padding: 0 5px;
-}
-.nettest output .delim {
- color: green;
-}
-.nettest output .value {
- color: green;
- padding: 0 5px;
+
+ .test-container {
+ display: inline-block;
+ position: relative;
+ width: 200px;
+
+ button {
+ &.not-started, &.started {
+ color: var(--bs-secondary);
+ border-color: var(--bs-secondary);
+ }
+ &:hover {
+ color: var(--bs-white);
+ border-color: transparent;
+ }
+ &.not-started:hover, &.started:hover {
+ background-color: var(--bs-secondary);
+ }
+ &.complete {
+ color: var(--bs-success);
+ border-color: var(--bs-success);
+
+ &:hover {
+ background-color: var(--bs-success);
+ }
+ i::before {
+ content: '\f00c';
+ }
+ }
+ &.not-started i::before {
+ content: '\f04b';
+ }
+ &.started i {
+ animation: fa-spin 2s linear infinite;
+
+ &::before {
+ content: '\f110';
+ }
+ }
+ }
+ .value {
+ min-height: 3em;
+ }
+ .card-title {
+ white-space: nowrap;
+ }
+ }
+ .output {
+ border-radius: 10px;
+ border: 1px solid #cccccc;
+ min-height: calc(100% - 170px);
+ max-height: calc(100% - 170px);
+ margin-top: 20px;
+ overflow: auto;
+
+ .module {
+ color: #6b0df7;
+ padding: 0 5px;
+ }
+ .delim {
+ color: green;
+ }
+ .value {
+ color: green;
+ padding: 0 5px;
+ }
+ }
}
diff --git a/openmeetings-web/src/main/front/src/css/_polls.scss b/openmeetings-web/src/main/front/src/css/_polls.scss
new file mode 100644
index 000000000..196eab074
--- /dev/null
+++ b/openmeetings-web/src/main/front/src/css/_polls.scss
@@ -0,0 +1,48 @@
+/* Licensed under the Apache License, Version 2.0 (the "License") http://www.apache.org/licenses/LICENSE-2.0 */
+#room-poll-chart {
+ height: 300px;
+}
+#quick-vote {
+ position: absolute;
+ margin-inline-end: 40px;
+ bottom: 40px;
+ padding: 5px;
+ border: 1px solid;
+ border-radius: 0.2rem;
+ background-color:var(--bs-light);
+ border-color: var(--bs-info);
+
+ .control {
+ display: inline-block;
+ width: 48px;
+ height: 48px;
+ position: relative;
+ font-size: 1.5em;
+
+ .badge {
+ position: absolute;
+ bottom: 0;
+ font-size: 0.5em;
+ }
+ i::before {
+ font-size: 2.0em;
+ line-height: 1.2em;
+ }
+ &.pro i::before {
+ color: var(--bs-success);
+ }
+ &.con i::before {
+ color: var(--bs-danger);
+ }
+ }
+ .close-btn {
+ padding: 0 0.4rem;
+ }
+}
+.main.room.INTERVIEW #quick-vote {
+ z-index: 100;
+ right: 10px;
+ bottom: 0;
+ padding: 0px 5px 0px 5px;
+ height: 40px;
+}
diff --git a/openmeetings-web/src/main/front/src/css/_responsive.scss b/openmeetings-web/src/main/front/src/css/_responsive.scss
index 9b02db24f..7e92b41b0 100644
--- a/openmeetings-web/src/main/front/src/css/_responsive.scss
+++ b/openmeetings-web/src/main/front/src/css/_responsive.scss
@@ -2,16 +2,17 @@
/* dashboard more responsive */
#contents .dashboard {
display: flex;
-}
-#contents .dashboard > div:nth-child(1) {
- width: 50%;
-}
-#contents .dashboard > div:nth-child(2) {
- width: 50%;
-}
-#contents .dashboard .column {
- width: 100%;
- float: none;
+
+ > div:nth-child(1) {
+ width: 50%;
+ }
+ > div:nth-child(2) {
+ width: 50%;
+ }
+ .column {
+ width: 100%;
+ float: none;
+ }
}
/* Chat send button width */
@@ -25,12 +26,13 @@
@media screen and (max-width: 900px), (orientation: portrait) {
.dashboard {
flex-wrap: wrap;
- }
- .dashboard > div:nth-child(1) {
- flex-basis: 100%;
- }
- .dashboard > div:nth-child(2) {
- flex-basis: 100%;
+
+ > div:nth-child(1) {
+ flex-basis: 100%;
+ }
+ > div:nth-child(2) {
+ flex-basis: 100%;
+ }
}
body {
font-size: 1.5vmax;
diff --git a/openmeetings-web/src/main/front/src/css/_room.scss b/openmeetings-web/src/main/front/src/css/_room.scss
index ec0db326f..f5354b65f 100644
--- a/openmeetings-web/src/main/front/src/css/_room.scss
+++ b/openmeetings-web/src/main/front/src/css/_room.scss
@@ -1,203 +1,317 @@
/* Licensed under the Apache License, Version 2.0 (the "License") http://www.apache.org/licenses/LICENSE-2.0 */
-.room-block, .room-block .room-container {
- width: 100%;
- height: 100%;
-}
-.room-block .event-details.modal {
- position: absolute;
- width: 300px;
- height: 300px;
- top: 30px;
- z-index: 3050;
-}
-.room-block .event-details.modal .modal-dialog {
- padding: 0;
- margin: 0;
-}
-.room-block .sb-wb {
- height: calc(100% - var(--room-menu-height));
- width: calc(100% - var(--chat-width) - var(--buffer-size));
- display: inline-block;
- position: relative;
-}
-.room-block .sb-wb .sidebar {
- min-width: 155px;
- width: var(--sidebar-width);
- position: absolute;
- height: 100%;
- top: 0;
-}
-.room-block .sb-wb .sidebar #room-sidebar-tabs {
- height: calc(100% - var(--activities-height));
-}
-.room-block .sb-wb .sidebar #room-sidebar-tabs .nav.nav-tabs {
- flex-wrap: nowrap;
- padding-inline-end: 40px;
- gap: 5px;
-}
-.room-block .sb-wb .sidebar #room-sidebar-tabs .nav.nav-tabs .nav-item {
- flex-direction: column;
- flex-grow: 1;
-}
-.room-block .sb-wb .sidebar .tab {
- padding: 5px 0 0 0;
- width: 100%;
- overflow: hidden;
-}
-.room-block .sb-wb .sidebar .tab i {
- font-size: 2.0em;
- vertical-align: top;
-}
-.room-block .sb-wb .sidebar .tab .label {
- width: calc((var(--sidebar-width) - 50px) / 2 - 40px);
- display: inline-block;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-.room-block .sb-wb .sidebar .tab.user {
- padding-inline-end: 15px;
-}
-.room-block .sb-wb .sidebar .tab.user .label {
- width: calc((var(--sidebar-width) - 50px) / 2 - 80px);
-}
-.room-block .sb-wb .sidebar #busy-indicator {
- margin: 8px;
+.room-block {
+
+ &, .room-container {
+ width: 100%;
+ height: 100%;
+ }
+ .room-container {
+ .user-video {
+ display: inline-block !important;
+ max-width: 95vw;
+ max-height: 95vh;
+
+ .ui-resizable-se {
+ position: absolute;
+ display: inline-block;
+ width: 16px;
+ height: 16px;
+ right: 0px;
+ bottom: 0px;
+ overflow: hidden;
+ background: none;
+
+ &:before {
+ content: ' ';
+ width: 32px;
+ height: 32px;
+ transform: rotate(-45deg);
+ position: absolute;
+ top: 0;
+ right: 0;
+ right: -21px;
+ bottom: -16px;
+ background: repeating-linear-gradient(
+ var(--bs-dark), var(--bs-dark) 3px, transparent 3px, transparent 5px
+ );
+ }
+ }
+ .header {
+ height: 20px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+
+ .ui-dialog-title {
+ padding-inline-start: 5px;
+ }
+ }
+ .video {
+ min-width: 40px;
+ min-height: 30px;
+ overflow: hidden;
+ position: relative;
+
+ &.audio-only {
+ background-repeat: no-repeat;
+ background-size: auto 100%;
+ background-position: center;
+ }
+ }
+ }
+ .btn.shared {
+ display: none;
+ }
+ }
+ .event-details.modal {
+ position: absolute;
+ width: 300px;
+ height: 300px;
+ top: 30px;
+ z-index: 3050;
+
+ .modal-dialog {
+ padding: 0;
+ margin: 0;
+ }
+ }
+ .sb-wb {
+ height: calc(100% - var(--room-menu-height));
+ width: calc(100% - var(--chat-width) - var(--buffer-size));
+ display: inline-block;
+ position: relative;
+ }
+ .sidebar {
+ min-width: 155px;
+ width: var(--sidebar-width);
+ position: absolute;
+ height: 100%;
+ top: 0;
+
+ .tab {
+ padding: 5px 0 0 0;
+ width: 100%;
+ overflow: hidden;
+
+ i {
+ font-size: 2.0em;
+ vertical-align: top;
+ }
+ .label {
+ width: calc((var(--sidebar-width) - 50px) / 2 - 40px);
+ display: inline-block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ &.user {
+ padding-inline-end: 15px;
+
+ .label {
+ width: calc((var(--sidebar-width) - 50px) / 2 - 80px);
+ }
+ }
+ &.om-icon.big {
+ line-height: 30px;
+ padding-inline-start: 10px;
+ position: relative;
+ }
+ .badge {
+ position: absolute;
+ bottom: 0;
+ margin-inline-end: 2px;
+ }
+ }
+ #busy-indicator {
+ margin: 8px;
+ }
+ .icon-undock, .icon-dock {
+ font-size: 1.2em;
+ padding-top: 3px;
+ }
+ .icon-dock:before {
+ content: "\f101";
+ }
+ .icon-undock::before {
+ content: "\f100";
+ }
+ &.closed .tab-content .tab-pane {
+ display: none;
+ }
+ }
+ .wait-moder {
+ position: fixed;
+ bottom: 30px;
+ right: 30px;
+
+ strong {
+ display: block;
+ padding-bottom: 20px;
+ }
+ }
+ &.narrow .sidebar {
+ .user-list .user.name {
+ display: none;
+ }
+ .tab.om-icon.big {
+ padding-inline-start: 6px;
+ padding-inline-end: 0;
+ }
+ }
}
-.room-block .sb-wb .sidebar .ui-resizable-handle, #chatPanel.room .ui-resizable-handle {
+.room-block .sidebar .ui-resizable-handle, #chatPanel.room .ui-resizable-handle {
width: 4px;
background-color: #f3f3f4;
border: 1px solid #dedee0;
+
+ &:hover {
+ background-color: #b6bdca;
+ border-color: #bebec3;
+ }
}
-.room-block .sb-wb .sidebar .ui-resizable-handle:hover, #chatPanel.room .ui-resizable-handle:hover {
- background-color: #b6bdca;
- border-color: #bebec3;
+#room-sidebar-tabs {
+ height: calc(100% - var(--activities-height));
+
+ .nav.nav-tabs {
+ flex-wrap: nowrap;
+ padding-inline-end: 40px;
+ gap: 5px;
+
+ .nav-item {
+ flex-direction: column;
+ flex-grow: 1;
+ }
+ }
+ &.tabs .btn-dock {
+ display: inline-block;
+ list-style: none;
+ list-style-type: none;
+ padding: 0 .3em;
+ border-bottom-width: inherit;
+ height: 25px;
+ position: absolute;
+ top: 5px;
+ margin-inline-end: 5px;
+ }
+ .tab-content {
+ height: calc(100% - 44px);
+
+ .tab-pane {
+ height: 100%;
+ }
+ }
}
#room-sidebar-tab-users .header {
padding-inline-start: 5px;
height: var(--room-sidebar-header-height);
+
+ .om-icon {
+ width: 34px;
+ height: 34px;
+
+ &::before {
+ font-size: 2.0em;
+ line-height: 1.2em;
+ }
+ i {
+ font-size: 1.2em;
+ }
+ }
}
-#room-sidebar-tab-users .header .om-icon {
- width: 34px;
- height: 34px;
-}
-#room-sidebar-tab-users .header .om-icon::before {
- font-size: 2.0em;
- line-height: 1.2em;
-}
-.room-block .sb-wb .sidebar .user-list {
+.user-list {
overflow-y: auto;
height: calc(100% - var(--room-sidebar-header-height) - var(--buffer-size));
-}
-.room-block .sb-wb .sidebar .user-list .user.entry {
- min-height: 90px;
- padding-inline-start: 5px;
- padding-top: 5px;
- background-size: 80px;
- background-repeat: no-repeat;
- background-position: var(--background-start) 2px;
- position: relative;
-}
-.room-block .sb-wb .sidebar .user-list .user.entry:hover {
- background-size: 55px;
-}
-.room-block .sb-wb .sidebar .user-list .user.entry .user.actions {
- display: none;
-}
-.room-block .sb-wb .sidebar .user-list .user.entry:hover .user.actions {
- display: block;
- padding: 0;
- margin-top: 45px;
-}
-.room-block .sb-wb .sidebar .user-list .user.name {
- line-height: 18px;
- height: 18px;
- padding: 0;
- padding-inline-start: 64px;
- margin-inline-end: 20px;
- overflow: hidden;
-}
-.room-block.narrow .sidebar .user-list .user.name {
- display: none;
-}
-.room-block .sb-wb .sidebar .user-list .user.entry .om-icon.user-status {
- border-radius: 50%;
-}
-.room-block .sb-wb .sidebar .user-list .user.entry .om-icon.user-status.user {
- background-color: var(--bs-success);
-}
-.room-block .sb-wb .sidebar .user-list .user.entry .om-icon.user-status.wb {
- background-color: var(--bs-warning);
-}
-.room-block .sb-wb .sidebar .user-list .user.entry .om-icon.user-status.mod {
- background-color: var(--bs-danger);
-}
-.room-block .sb-wb .sidebar .user-list .user.entry .om-icon.audio-activity {
- position: absolute;
- bottom: 2px;
- right: 2px;
-}
-.user-list .user.entry:hover .video-container {
- position: absolute;
- top: 0;
- left: 0;
-}
-.user-list .user.entry:hover .video-container
-, .user-list .user.entry:hover .video-container .video.audio-only
-{
- width: 50px;
- height: 50px;
-}
-.user-list .user.entry .video-container
-, .user-list .user.entry .video-container .video.audio-only
-{
- width: 80px;
- height: 80px;
-}
-.user-list .user.entry .video-container .footer {
- display: none !important;
-}
-.room-block .sb-wb .sidebar .icon-undock, .room-block .sb-wb .sidebar .icon-dock {
- font-size: 1.2em;
- padding-top: 3px;
-}
-.room-block .sb-wb .sidebar .icon-dock:before {
- content: "\f101";
-}
-.room-block .sb-wb .sidebar .icon-undock::before {
- content: "\f100";
-}
-.room-block .sb-wb .sidebar #room-sidebar-tabs .tab-content {
- height: calc(100% - 44px);
-}
-.room-block .sb-wb .sidebar #room-sidebar-tabs .tab-content .tab-pane {
- height: 100%;
-}
-.room-block .sb-wb .sidebar.closed .tab-content .tab-pane {
- display: none;
-}
-.om-icon.ulist-small {
- width: 14px;
- height: 14px;
- min-height: 14px;
- margin-inline-end: 2px;
- margin-left: unset;
-}
-.audio-activity.om-icon {
- opacity: 0.2;
- border-radius: 50%;
- background-color: var(--bs-success);
- border: 1px solid var(--bs-gray-dark);
+
+ .user.name {
+ line-height: 18px;
+ height: 18px;
+ padding: 0;
+ padding-inline-start: 64px;
+ margin-inline-end: 20px;
+ overflow: hidden;
+ }
+ .user.entry {
+ min-height: 90px;
+ padding-inline-start: 5px;
+ padding-top: 5px;
+ background-size: 80px;
+ background-repeat: no-repeat;
+ background-position: var(--background-start) 2px;
+ position: relative;
+
+ .video-container {
+ &, video.audio-only {
+ width: 80px;
+ height: 80px;
+ }
+ .footer {
+ display: none !important;
+ }
+ }
+ &:hover {
+ background-size: 55px;
+
+ .user.actions {
+ display: block;
+ padding: 0;
+ margin-top: 45px;
+ }
+ .video-container {
+ position: absolute;
+ top: 0;
+ left: 0;
+
+ &, .video.audio-only {
+ width: 50px;
+ height: 50px;
+ }
+ }
+ }
+ .user.actions {
+ display: none;
+ }
+ .kick i {
+ font-size: 1.5em;
+ }
+ &.current {
+ font-weight: bold;
+ background-color: var(--bs-light);
+ }
+ .om-icon {
+ &.user-status {
+ border-radius: 50%;
+
+ &.user {
+ background-color: var(--bs-success);
+ }
+ &.wb {
+ background-color: var(--bs-warning);
+ }
+ &.mod {
+ background-color: var(--bs-danger);
+ }
+ }
+ &.audio-activity {
+ position: absolute;
+ bottom: 2px;
+ right: 2px;
+ }
+ }
+ }
}
.typing-activity {
display: none;
width: 20px;
position: relative;
-}
-.typing-activity i {
- position: absolute;
- left: 0;
- animation: typing-ani 2s infinite;
- color: var(--bs-primary);
+
+ i {
+ position: absolute;
+ left: 0;
+ animation: typing-ani 2s infinite;
+ color: var(--bs-primary);
+ }
+ &.typing {
+ display: inline-block;
+ }
}
@keyframes typing-ani {
0% {
@@ -210,161 +324,212 @@
left: 0;
}
}
-.typing-activity.typing {
- display: inline-block;
-}
-.audio-activity.om-icon.speaking {
- opacity: 1;
-}
-.om-icon.volume-control a:hover {
- text-decoration: none;
-}
-.om-icon.volume-control a.volume-on::before {
- content: "\f027";
- font-size: 1.2em;
- color: var(--bs-secondary);
-}
-.om-icon.volume-control a.volume-off::before {
- content: "\f6a9";
- font-size: 1.2em;
- color: var(--bs-danger);
-}
-.om-icon.volume-control .dropdown-menu {
- width: 20px;
- min-width: 20px;
- border-radius: 0;
- border: 0;
- box-shadow: initial;
- background-color: transparent;
-}
-.om-icon.volume-control .dropdown-menu .slider {
- border-radius: 0;
- background-color: white;
- border-color: var(--bs-secondary);
-}
-.om-icon.volume-control .dropdown-menu .slider .ui-slider-range {
- border-radius: 0;
- background-color: var(--bs-light);
-}
-.om-icon.volume-control .dropdown-menu .slider .handle {
- border-radius: 0;
- background-color: var(--bs-light);
- border-color: var(--bs-secondary);
- color: var(--bs-secondary);
-}
-.user-video .om-icon.volume-control
-, .user-video .btn.btn-refresh
-, .user-video .btn.btn-toggle
-, .user-video .btn.btn-wclose
-{
- width: 20px;
- height: 20px;
-}
-.user-video .om-icon.volume-control {
- border-radius: 0.2rem;
- border: 1px solid var(--bs-secondary);
- margin-top: 3px;
- padding: 1px;
+.om-icon {
+ &.disabled {
+ filter: grayscale(100%);
+ pointer-events: none;
+ opacity: .2;
+ }
+ &.ulist-small {
+ width: 14px;
+ height: 14px;
+ min-height: 14px;
+ margin-inline-end: 2px;
+ margin-left: unset;
+ }
+ &.audio-activity {
+ opacity: 0.2;
+ border-radius: 50%;
+ background-color: var(--bs-success);
+ border: 1px solid var(--bs-gray-dark);
+
+ &.speaking {
+ opacity: 1;
+ }
+ }
+ &.volume-control {
+ a {
+ &:hover {
+ text-decoration: none;
+ }
+ &.volume-on::before {
+ content: "\f027";
+ font-size: 1.2em;
+ color: var(--bs-secondary);
+ }
+ &.volume-off::before {
+ content: "\f6a9";
+ font-size: 1.2em;
+ color: var(--bs-danger);
+ }
+ }
+ .dropdown-menu {
+ width: 20px;
+ min-width: 20px;
+ border-radius: 0;
+ border: 0;
+ box-shadow: initial;
+ background-color: transparent;
+
+ .slider {
+ border-radius: 0;
+ background-color: white;
+ border-color: var(--bs-secondary);
+
+ .ui-slider-range {
+ border-radius: 0;
+ background-color: var(--bs-light);
+ }
+ .handle {
+ border-radius: 0;
+ background-color: var(--bs-light);
+ border-color: var(--bs-secondary);
+ color: var(--bs-secondary);
+ }
+ }
+ }
+ }
+ .right {
+ i {
+ position: absolute;
+ bottom: 1px;
+ right: 1px;
+ font-size: .6em;
+
+ &::before {
+ color: var(--bs-success);
+ content: "\f055";
+ }
+ }
+ &.granted i::before {
+ color: var(--bs-danger);
+ content: "\f056";
+ }
+ &.moderator::before {
+ content: "\f007";
+ }
+ &.presenter::before {
+ content: "\f0d0";
+ }
+ &.wb::before {
+ content: "\f303";
+ }
+ &.screen-share::before {
+ content: "\f108";
+ }
+ &.remote-control::before {
+ content: "\f8cc";
+ }
+ &.audio::before {
+ content: "\f130";
+ }
+ &.camera::before {
+ content: '\f03d';
+ }
+ &.mute-others::before {
+ content: '\f6a9';
+ }
+ }
+ &.settings::before {
+ content: '\f013';
+ }
+ &.activity {
+ &.cam, &.mic {
+ display: none;
+ }
+ &.cam {
+ &.enabled::before {
+ content: '\f03d';
+ color: var(--bs-success);
+ }
+ &::before {
+ content: '\f4e2';
+ color: var(--bs-warning);
+ }
+ }
+ &.mic {
+ &.enabled::before {
+ content: '\f130';
+ color: var(--bs-success);
+ }
+ &::before {
+ content: '\f131';
+ color: var(--bs-warning);
+ }
+ &.push-to-talk::before {
+ color: var(--bs-info);
+ }
+ }
+ }
}
-.user-video .btn.btn-refresh
-, .user-video .btn.btn-toggle
-, .user-video .btn.btn-wclose
+.user-video .ui-dialog-titlebar
+, .sharer .ui-dialog-titlebar
+, .wb-tool-settings .ui-dialog-titlebar
{
- padding: 0;
-}
-.user-video .btn.btn-toggle i::before {
- content: '\f2d1';
-}
-.user-video .btn.btn-toggle.minimized i::before {
- content: '\f2d2';
-}
-#room-sidebar-tab-users .header .om-icon i {
- font-size: 1.2em;
-}
-.right.om-icon i {
- position: absolute;
- bottom: 1px;
- right: 1px;
- font-size: .6em;
-}
-.right.om-icon i::before {
- color: var(--bs-success);
- content: "\f055";
-}
-.right.om-icon.granted i::before {
- color: var(--bs-danger);
- content: "\f056";
-}
-.right.moderator.om-icon::before {
- content: "\f007";
-}
-.right.presenter.om-icon::before {
- content: "\f0d0";
-}
-.right.wb.om-icon::before {
- content: "\f303";
-}
-.right.screen-share.om-icon::before {
- content: "\f108";
-}
-.right.remote-control.om-icon::before {
- content: "\f8cc";
-}
-.right.audio.om-icon::before {
- content: "\f130";
-}
-.right.camera.om-icon::before {
- content: '\f03d';
-}
-.right.mute-others.om-icon::before {
- content: '\f6a9';
-}
-.room-block .sb-wb .sidebar .user-list .user.entry .kick i {
- font-size: 1.5em;
-}
-.settings.om-icon::before {
- content: '\f013';
-}
-.activity.cam.enabled.om-icon::before {
- content: '\f03d';
- color: var(--bs-success);
-}
-.activity.cam.om-icon, .activity.mic.om-icon {
- display: none;
-}
-.activity.cam.om-icon::before {
- content: '\f4e2';
- color: var(--bs-warning);
-}
-.activity.mic.enabled.om-icon::before {
- content: '\f130';
- color: var(--bs-success);
-}
-.om-icon.disabled {
- filter: grayscale(100%);
- pointer-events: none;
- opacity: .2;
-}
-.activity.mic.om-icon::before {
- content: '\f131';
- color: var(--bs-warning);
-}
-.activity.mic.om-icon.push-to-talk::before {
- color: var(--bs-info);
+ background-color: var(--bs-white);
}
-.room-block .sb-wb .sidebar .user-list .user.entry.current {
- font-weight: bold;
- background-color: var(--bs-light);
+.user-video {
+ .om-icon.volume-control, .btn.btn-refresh, .btn.btn-toggle, .btn.btn-wclose {
+ width: 20px;
+ height: 20px;
+ }
+ .om-icon.volume-control {
+ border-radius: 0.2rem;
+ border: 1px solid var(--bs-secondary);
+ margin-top: 3px;
+ padding: 1px;
+ }
+ .btn.btn-refresh, .btn.btn-toggle, .btn.btn-wclose {
+ padding: 0;
+ }
+ .btn.btn-toggle {
+ i::before {
+ content: '\f2d1';
+ }
+ &.minimized i::before {
+ content: '\f2d2';
+ }
+ }
+ .buttonpane {
+ background-color: var(--bs-white);
+ }
+ &.ui-dialog {
+ &.video.user-speaks {
+ box-shadow: 3px 3px 4px green;
+ }
+ .ui-dialog-content {
+ height: calc(100% - var(--vdialog-titlebar-height)) !important;
+ width: 100% !important;
+
+ .video {
+ height: calc(100% - var(--vdialog-footer-height)) !important;
+ width: 100% !important;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 100%;
+
+ video, audio {
+ height: 100% !important;
+ width: 100% !important;
+ }
+ }
+ .footer {
+ height: var(--vdialog-footer-height) !important;
+ }
+ }
+ }
}
-.dropdown-menu.video.volume, .dropdown-menu.video.volume li {
- width: 20px;
- min-width: 20px;
- border-radius: 0;
- border: 0;
- box-shadow: initial;
- left: 70px;
- top: -50px;
- background-color: transparent;
+.dropdown-menu.video.volume {
+ &, li {
+ width: 20px;
+ min-width: 20px;
+ border-radius: 0;
+ border: 0;
+ box-shadow: initial;
+ left: 70px;
+ top: -50px;
+ background-color: transparent;
+ }
}
.input .select2-container {
max-height: 100px;
@@ -380,396 +545,132 @@
.sip .button-row #sip-dialer-btn-erase {
margin-inline-start: 5px;
}
-.room-block .sb-wb .sidebar .tab.om-icon.big {
- line-height: 30px;
- padding-inline-start: 10px;
- position: relative;
-}
-.room-block .sb-wb .sidebar .tab .badge {
- position: absolute;
- bottom: 0;
- margin-inline-end: 2px;
-}
-.room-block.narrow .sidebar .tab.om-icon.big {
- padding-inline-start: 6px;
- padding-inline-end: 0;
-}
-.room-block .wait-moder {
- position: fixed;
- bottom: 30px;
- right: 30px;
-}
-.room-block .wait-moder strong {
- display: block;
- padding-bottom: 20px;
-}
/************ VIDEO **************/
.mic-on {
background-color: var(--bs-warning);
}
-.ui-dialog.video
-, .ui-dialog.sharer
-, .ui-dialog.video .ui-dialog-titlebar
-, .ui-dialog.video .ui-dialog-content
-{
- padding: 0;
-}
-.user-video .ui-dialog-titlebar
-, .sharer .ui-dialog-titlebar
-, .wb-tool-settings .ui-dialog-titlebar
-{
- background-color: var(--bs-white);
+.ui-dialog {
+ &.video, &.sharer, &.video .ui-dialog-titlebar, &.video .ui-dialog-content {
+ padding: 0;
+ }
+ &.video {
+ .ui-dialog-content {
+ overflow: hidden;
+ }
+ .ui-dialog-titlebar {
+ padding-inline-start: 10px;
+ border: none;
+ }
+ }
}
.sharer .ui-dialog-titlebar-close {
position: absolute;
top: 20px
}
-.user-video .buttonpane {
- background-color: var(--bs-white);
-}
-.ui-dialog.video .ui-dialog-content {
- overflow: hidden;
-}
-.ui-dialog.video .ui-dialog-titlebar {
- padding-inline-start: 10px;
- border: none;
-}
-.ui-dialog.video.user-video.user-speaks {
- box-shadow: 3px 3px 4px green;
-}
-.video-container .level-meter {
- display: inline-block;
- position: absolute;
- bottom: 5px;
- left: 5px;
- width: 10px;
+.video-container {
+ .level-meter {
+ display: inline-block;
+ position: absolute;
+ bottom: 5px;
+ left: 5px;
+ width: 10px;
+ }
+ .video .level-meter {
+ height: calc(100% - 10px) !important;
+ }
}
#video-settings {
padding: 5px 10px;
+
+ .modal-dialog {
+ max-width: 640px;
+ }
+ .title {
+ font-weight: bold;
+ }
+ .sett-container {
+ position: relative;
+ min-height: 250px;
+
+ .opt-block {
+ width: 300px;
+ display: inline-block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ .vid-block {
+ min-width: 300px;
+ padding-inline-start: 305px;
+
+ .video-conainer {
+ overflow: auto;
+ max-height: 300px;
+ position: relative;
+ }
+ .timer {
+ float: inline-start;
+ padding: 2px 4px;
+ }
+ }
+ .sett-row {
+ padding-top: 10px;
+
+ .warn {
+ float: inline-end;
+ margin-inline-end: .3em;
+ }
+ &.right {
+ text-align: var(--text-align-end);
+ }
+ }
+ }
}
-#video-settings.video .modal-dialog {
- max-width: 640px;
-}
-.modal.video .title {
- font-weight: bold;
-}
-.modal.video .opt-block {
- width: 300px;
- display: inline-block;
- position: absolute;
- top: 0;
- left: 0;
-}
-.modal.video .vid-block {
- min-width: 300px;
- padding-inline-start: 305px;
-}
-.modal.video .warn {
- float: right;
- margin-inline-end: .3em;
-}
-.modal.video .sett-container {
- position: relative;
- min-height: 250px;
-}
-.modal.video .sett-row {
- padding-top: 10px;
-}
-.modal.video .sett-row.right {
- text-align: var(--text-align-end);
-}
-.modal.video .vid-block .video-conainer {
- overflow: auto;
- max-height: 300px;
- position: relative;
-}
-.sett-container .vid-block .timer {
- float: left;
- padding: 2px 4px;
-}
-#video-settings .close {
- margin: 0 0 0 auto;
-}
-.modal.video .footer {
- display: none;
-}
-.modal.video.mic-status .footer {
- display: block;
-}
-.room-block .room-container .user-video {
- display: inline-block !important;
- max-width: 95vw;
- max-height: 95vh;
-}
-.room-block .room-container .user-video .ui-resizable-se {
- position: absolute;
- display: inline-block;
- width: 16px;
- height: 16px;
- right: 0px;
- bottom: 0px;
- overflow: hidden;
- background: none;
-}
-.room-block .room-container .user-video .ui-resizable-se:before {
- content: ' ';
- width: 32px;
- height: 32px;
- transform: rotate(-45deg);
- position: absolute;
- top: 0;
- right: 0;
- right: -21px;
- bottom: -16px;
- background: repeating-linear-gradient(
- var(--bs-dark), var(--bs-dark) 3px, transparent 3px, transparent 5px
- );
-}
-.room-block .room-container .user-video .header {
- height: 20px;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
-}
-.room-block .room-container .user-video .header .ui-dialog-title {
- padding-inline-start: 5px;
-}
-.room-block .room-container .user-video .video {
- min-width: 40px;
- min-height: 30px;
- overflow: hidden;
- position: relative;
-}
-.room-block .room-container .user-video .video.audio-only {
- background-repeat: no-repeat;
- background-size: auto 100%;
- background-position: center;
-}
-.room-block .room-container .btn.shared {
- display: none;
-}
-.pod-area {
- display: inline-grid;
-}
-.pod-area.max2, .pod-area.max3 {
- grid-template-columns: repeat(3, 1fr);
- grid-template-rows: repeat(2, 1fr);
-}
-.pod-area.max2 {
- grid-template-areas:
- "e a a"
- "b a a";
-}
-.pod-area.max3 {
- grid-template-areas:
- "b1 a a"
- "b2 a a";
-}
-.pod-area.max5, .pod-area.max9, .pod-area.max13 {
- grid-template-columns: repeat(4, 1fr);
- grid-template-areas:
- "b1 a a b2"
- "b3 a a b4";
-}
-.pod-area.max5 {
- grid-template-rows: repeat(2, 1fr);
-}
-.pod-area.max9 {
- grid-template-rows: repeat(3, 1fr);
-}
-.pod-area.max13 {
- grid-template-rows: repeat(4, 1fr);
-}
-.pod-area.max17, .pod-area.max25, .pod-area.max33 {
- grid-template-columns: repeat(8, 1fr);
- grid-template-areas:
- "b01 b02 a a a a b03 b04"
- "b05 b06 a a a a b07 b08"
- "b09 b10 a a a a b11 b12"
- "b13 b14 a a a a b15 b16";
-}
-.pod-area.max17 {
- grid-template-rows: repeat(4, 1fr);
-}
-.pod-area.max25 {
- grid-template-rows: repeat(5, 1fr);
-}
-.pod-area.max33 {
- grid-template-rows: repeat(6, 1fr);
-}
-.pod-area .pod-big, .pod-area .pod {
- position: relative;
- padding: 2px;
- margin: 2px;
- overflow: hidden;
-}
-.pod-area .empty {
- grid-area: e;
-}
-.pod-area .pod-big {
- grid-area: a;
- border: 1px solid #cccccc;
- border-radius: 8px;
- background-image: url(images/drop.png);
- background-repeat: no-repeat;
- background-position: center;
- background-size: 64px;
-}
-.pod-area .pod .user-video.ui-dialog
-, .pod-area .pod-big .user-video.ui-dialog
-{
- height: calc(100% - var(--buffer-size)) !important;
- width: calc(100% - var(--buffer-size)) !important;
-}
-.pod-area .pod.ui-sortable-placeholder {
- background-color: whitesmoke;
- visibility: visible !important;
-}
-.pod-area .pod-big.ui-hightlight {
- box-shadow: 3px 3px 4px blue;
-}
-.width250 {
- min-width: 250px;
- max-width: 250px;
-}
-.main.room.INTERVIEW .wb-block .wb-area .rec-btn {
- z-index: 100;
- border-radius: 30px;
- position: absolute;
- right: 50%;
- bottom: 0px;
- width: 40px;
- height: var(--rec-btn-height);
-}
-.main.room.INTERVIEW .wb-block .wb-area .pod-area {
- width: 100%;
- height: calc(100% - var(--rec-btn-height));
-}
-.main.room.INTERVIEW .wb-block .wb-area .rec-btn .ui-button-icon.ui-icon.stop
-, .main.room.INTERVIEW .wb-block .wb-area .rec-btn .ui-button-icon.ui-icon.record
-{
- background-image: none;
- background-color: red;
-}
-.main.room.INTERVIEW .wb-block .wb-area .rec-btn .ui-button-icon.ui-icon.record {
- border-radius: 15px;
-}
-#room-poll-chart {
- height: 300px;
-}
-#quick-vote {
- position: absolute;
- margin-inline-end: 40px;
- bottom: 40px;
- padding: 5px;
- border: 1px solid;
- border-radius: 0.2rem;
- background-color:var(--bs-light);
- border-color: var(--bs-info);
-}
-#quick-vote .control {
- display: inline-block;
- width: 48px;
- height: 48px;
- position: relative;
- font-size: 1.5em;
-}
-#quick-vote .control .badge {
- position: absolute;
- bottom: 0;
- font-size: 0.5em;
-}
-#quick-vote .control i::before {
- font-size: 2.0em;
- line-height: 1.2em;
-}
-#quick-vote .control.pro i::before {
- color: var(--bs-success);
-}
-#quick-vote .control.con i::before {
- color: var(--bs-danger);
-}
-#quick-vote .close-btn {
- padding: 0 0.4rem;
-}
-.main.room.INTERVIEW #quick-vote {
- z-index: 100;
- right: 10px;
- bottom: 0;
- padding: 0px 5px 0px 5px;
- height: 40px;
+.video {
+ &:hover .mute-others.enabled {
+ display: block;
+ }
+ .mute-others {
+ position: absolute;
+ top: calc(50% - 32px);
+ left: calc(50% - 32px);
+ width: 64px;
+ height: 64px;
+ background-size: 64px;
+ z-index: 2;
+ display: none;
+
+ &::before {
+ content: '\f3c9';
+ color: var(--bs-warning);
+ line-height: 1em;
+ font-size: 2.5em;
+ }
+ }
+ &.audio-only .mute-others {
+ top: calc(50% - 16px);
+ left: calc(50% - 10px);
+ width: 32px;
+ height: 32px;
+ }
}
+@import "interview";
+@import "polls";
+
#sharer .alert {
display: none;
}
-.sharer .share-start-stop i::before {
- content: '\f03e';
-}
-.sharer .share-start-stop.stop i::before
-, .sharer .record-start-stop i::before
-{
- content: '\f28d';
-}
-.sharer .record-start-stop i::before {
- content: '\f111';
-}
-#room-sidebar-tabs.tabs .btn-dock {
- display: inline-block;
- list-style: none;
- list-style-type: none;
- padding: 0 .3em;
- border-bottom-width: inherit;
- height: 25px;
- position: absolute;
- top: 5px;
- margin-inline-end: 5px;
-}
-.video .mute-others {
- position: absolute;
- top: calc(50% - 32px);
- left: calc(50% - 32px);
- width: 64px;
- height: 64px;
- background-size: 64px;
- z-index: 2;
- display: none;
-}
-.video.audio-only .mute-others {
- top: calc(50% - 16px);
- left: calc(50% - 10px);
- width: 32px;
- height: 32px;
-}
-.video .mute-others::before {
- content: '\f3c9';
- color: var(--bs-warning);
- line-height: 1em;
- font-size: 2.5em;
-}
-.video:hover .mute-others.enabled {
- display: block;
-}
-.user-video.ui-dialog .ui-dialog-content {
- height: calc(100% - var(--vdialog-titlebar-height)) !important;
- width: 100% !important;
-}
-.user-video.ui-dialog .ui-dialog-content .video {
- height: calc(100% - var(--vdialog-footer-height)) !important;
- width: 100% !important;
- background-repeat: no-repeat;
- background-position: center;
- background-size: 100%;
-}
-.user-video.ui-dialog .ui-dialog-content .video video, .user-video.ui-dialog .ui-dialog-content .video audio {
- height: 100% !important;
- width: 100% !important;
-}
-.video-container .video .level-meter {
- height: calc(100% - 10px) !important;
-}
-.user-video.ui-dialog .ui-dialog-content .footer {
- height: var(--vdialog-footer-height) !important;
+.sharer {
+ .share-start-stop i::before {
+ content: '\f03e';
+ }
+ .record-start-stop i::before {
+ content: '\f111';
+ }
+ .stop i::before {
+ content: '\f28d';
+ }
}
@media screen and (max-width: 1280px) {
.room-block .sb-wb .sidebar .tab.om-icon.big {
@@ -784,6 +685,6 @@
}
html[dir="rtl"] .main.room #chatPanel {
- right: initial;
- left: 0px;
+ right: initial;
+ left: 0px;
}
diff --git a/openmeetings-web/src/main/front/src/css/_tree.scss b/openmeetings-web/src/main/front/src/css/_tree.scss
index 5430bf369..6f6cd0783 100644
--- a/openmeetings-web/src/main/front/src/css/_tree.scss
+++ b/openmeetings-web/src/main/front/src/css/_tree.scss
@@ -4,46 +4,107 @@
height: 100%;
width: 100%;
display: inline-block;
-}
-.file-tree .trees {
- height: calc(100% - var(--tree-header-height) - var(--tree-footer-height));
- width: var(--sidebar-width);
- overflow-x: auto;
- overflow-y: auto;
-}
-.file-tree .trees #tree-anchor {
- height: 2px;
- width: 2px;
-}
-.trees .tree-theme-windows
-, .trees .tree-theme-windows > :first-child
-, .trees .tree-theme-windows .tree-branch
-, .trees .tree-theme-windows .tree-branch .tree-node
-, .trees .tree-theme-windows .tree-subtree .tree-branch
-, .trees .tree-theme-windows .tree-node .om-icon
-, .trees .tree-theme-windows .tree-node .om-icon .file.item
-, .trees .tree-theme-windows .tree-node .om-icon .file.item .name
-, .trees .tree-theme-windows .tree-node .om-icon .file.item .name span
-{
- width: 100%;
-}
-.trees .tree-theme-windows div.tree-subtree
-, .trees .tree-theme-windows .tree-node .om-icon
-{
- width: calc(100% - 20px);
-}
-.trees .tree-theme-windows .tree-node .om-icon.broken .file.item .name {
- width: calc(100% - 32px);
-}
-.file-tree .footer {
- height: var(--tree-footer-height);
-}
-.file-tree .footer .sizes {
- display: inline-block;
-}
-.file-tree .footer .buttons .other-buttons {
- display: inline-block;
- margin: 0 2px;
+
+ .trees {
+ height: calc(100% - var(--tree-header-height) - var(--tree-footer-height));
+ width: var(--sidebar-width);
+ overflow-x: auto;
+ overflow-y: auto;
+
+ #tree-anchor {
+ height: 2px;
+ width: 2px;
+ }
+ .om-icon.active {
+ background-color: var(--bs-info);
+ }
+ .om-icon i {
+ display: none;
+ position: absolute;
+ bottom: 1px;
+ left: 5px;
+ font-size: .8em;
+ }
+ .tree-theme-windows {
+ /* wicket overrides */
+ &, > :first-child
+ , .tree-branch
+ , .tree-branch .tree-node
+ , .tree-subtree .tree-branch
+ , .tree-node .om-icon
+ , .tree-node .om-icon .file.item
+ , .tree-node .om-icon .file.item .name
+ , .tree-node .om-icon .file.item .name span
+ {
+ width: 100%;
+ }
+ div.tree-subtree, .tree-node .om-icon {
+ width: calc(100% - 20px);
+ }
+ .tree-node .om-icon.broken .file.item .name {
+ width: calc(100% - 32px);
+ }
+ span.tree-content {
+ display: flex !important;
+ }
+ }
+ .om-icon {
+ width: auto;
+ margin-top: 0;
+
+ &.big {
+ position: relative;
+
+ &::before {
+ position: absolute;
+ left: 3px;
+ }
+ }
+ .processing i {
+ display: block;
+ }
+ }
+ .tree-node {
+ white-space: nowrap;
+
+ .tree-junction {
+ text-decoration: none;
+ }
+ }
+ }
+ .footer {
+ height: var(--tree-footer-height);
+
+ .sizes {
+ display: inline-block;
+ }
+ .buttons .other-buttons {
+ display: inline-block;
+ margin: 0 2px;
+ }
+ }
+ .info {
+ .details {
+ width: 100%;
+ display: table;
+ }
+ .row {
+ display: table-row;
+
+ .label, .value {
+ display: table-cell;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ .label {
+ max-width: 50px;
+ }
+ .value {
+ max-width: 270px;
+ }
+ }
+ }
}
.trash-toolbar {
font-weight: bold;
@@ -51,104 +112,72 @@
color: transparent;
height: var(--tree-header-height);
overflow: hidden;
-}
-.trash-toolbar .om-confirm-dialog {
- color: var(--bs-danger);
-}
-.trash-toolbar .om-icon.fileitem, .trash-toolbar .om-icon.recorditem {
- display: none !important;
+
+ .om-confirm-dialog {
+ color: var(--bs-danger);
+ }
+ .om-icon.fileitem, .om-icon.recorditem {
+ display: none !important;
+ }
}
.trash-toolbar-hover {
color: inherit;
background-color: var(--bs-light);
-}
-.file-tree .info .details {
- width: 100%;
- display: table;
-}
-.file-tree .info .row {
- display: table-row;
-}
-.file-tree .info .row .label, .file-tree .info .row .value {
- display: table-cell;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-.file-tree .info .row .label {
- max-width: 50px;
-}
-.file-tree .info .row .value {
- max-width: 270px;
-}
-.trees .om-icon {
- width: auto;
- margin-top: 0;
-}
-.trees .om-icon.big {
- position: relative;
-}
-.trees .om-icon.big::before {
- position: absolute;
- left: 3px;
-}
-.trees .tree-node {
- white-space: nowrap;
-}
-.trees .tree-node .tree-junction {
- text-decoration: none;
-}
-.file-tree .trees .om-icon.active {
- background-color: var(--bs-info);
-}
-.file-tree .trees .om-icon i {
- display: none;
- position: absolute;
- bottom: 1px;
- left: 5px;
- font-size: .8em;
-}
-.refresh.om-icon::before {
- content: '\f2f1';
-}
-.trash.om-icon::before {
- content: '\f2ed';
-}
-.trash-toolbar-hover .trash.om-icon::before {
- font-weight: 400;
-}
-.folder-create.om-icon::before {
- content: '\f65e';
-}
-.recording.om-icon::before {
- content: '\f008';
-}
-.broken.om-icon::before {
- color: var(--bs-danger);
-}
-.file-tree .trees .processing.om-icon i {
- display: block;
-}
-.public.file.om-icon::before {
- content: '\f0ac';
-}
-.image.file.om-icon::before {
- content: '\f1c5';
-}
-.chart.file.om-icon::before {
- content: '\f200';
-}
-.wml.file.om-icon::before {
- content: '\f56f';
-}
-.doc.file.om-icon::before {
- content: '\f15b';
-}
-.folder.file.om-icon::before {
- content: '\f07b';
-}
-.folder-open.file.om-icon::before {
- content: '\f07c';
+
+ .trash.om-icon::before {
+ font-weight: 400;
+ }
+}
+.om-icon {
+ &.refresh::before {
+ content: '\f2f1';
+ }
+ &.trash::before {
+ content: '\f2ed';
+ }
+ &.folder-create::before {
+ content: '\f65e';
+ }
+ &.recording::before {
+ content: '\f008';
+ }
+ &.broken::before {
+ color: var(--bs-danger);
+ }
+ &.upload {
+ margin-top: 0;
+
+ &::before {
+ content: '\f574';
+ padding: 0 7px;
+ }
+ }
+ &.file {
+ &.public::before {
+ content: '\f0ac';
+ }
+ &.image::before {
+ content: '\f1c5';
+ }
+ &.chart::before {
+ content: '\f200';
+ }
+ &.wml::before {
+ content: '\f56f';
+ }
+ &.doc::before {
+ content: '\f15b';
+ }
+ &.folder::before {
+ content: '\f07b';
+ }
+ &.folder-open::before {
+ content: '\f07c';
+ }
+ &.my::before {
+ content: '\f015';
+ }
+ }
}
.drag-container .om-icon {
display: block !important;
@@ -156,28 +185,27 @@
.selected .file.item {
background-color: #0099FF;
}
-.my.file.om-icon::before {
- content: '\f015';
-}
-.tree-theme-windows span.tree-content {
- display: flex !important;
-}
.file.item {
position: relative;
display: inline-block;
vertical-align: top;
-}
-.file.item .name, .file.item .name span {
- color: black;
- display: block;
- /* Required for text-overflow to do anything */
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
-}
-.file.item .name {
- padding-top: 10px;
- padding-inline-start: 5px;
+
+ .name, .name span {
+ color: black;
+ display: block;
+ /* Required for text-overflow to do anything */
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ }
+ .name {
+ padding-top: 10px;
+ padding-inline-start: 5px;
+ }
+ .errors::before {
+ color: var(--bs-warning);
+ content: '\f071';
+ }
}
.tree-node .file.item .errors {
position: absolute;
@@ -188,37 +216,27 @@
margin: 0px;
padding: 0px;
}
-.file.item .errors::before {
- color: var(--bs-warning);
- content: '\f071';
-}
.dialog.errors {
height: 500px;
font-size: small;
-}
-.dialog.errors .scroll-container {
- overflow: auto;
- height: calc(100% - 50px);
-}
-.dialog.errors .alert {
- color: var(--bs-danger);
-}
-.dialog.errors .warn {
- color: var(--bs-warning);
-}
-.dialog.errors .message {
- display: block;
- unicode-bidi: embed;
- font-family: monospace;
- white-space: pre;
- margin: 0;
-}
-.upload.om-icon {
- margin-top: 0;
-}
-.upload.om-icon::before {
- content: '\f574';
- padding: 0 7px;
+
+ .scroll-container {
+ overflow: auto;
+ height: calc(100% - 50px);
+ }
+ .alert {
+ color: var(--bs-danger);
+ }
+ .warn {
+ color: var(--bs-warning);
+ }
+ .message {
+ display: block;
+ unicode-bidi: embed;
+ font-family: monospace;
+ white-space: pre;
+ margin: 0;
+ }
}
diff --git a/openmeetings-web/src/main/front/src/css/_wb.scss b/openmeetings-web/src/main/front/src/css/_wb.scss
index ac6f151df..70499fa91 100644
--- a/openmeetings-web/src/main/front/src/css/_wb.scss
+++ b/openmeetings-web/src/main/front/src/css/_wb.scss
@@ -1,46 +1,217 @@
/* Licensed under the Apache License, Version 2.0 (the "License") http://www.apache.org/licenses/LICENSE-2.0 */
-.room-block .sb-wb .wb-block {
+.wb-block {
position: absolute;
height: 100%;
width: calc(100% - var(--sidebar-width) - var(--buffer-size));
top: 0;
left: calc(var(--sidebar-width) + var(--buffer-size));
-}
-.room-block .sb-wb .wb-block.droppable-hover {
- border: 0;
-}
-.room-block .sb-wb .wb-block .wb-area {
- height: 100%;
- background-color: var(--bs-body-bg);
-}
-.room-block .sb-wb .wb-block.droppable-hover .wb-area {
- visibility: hidden;
- height: 1px !important;
-}
-.room-block .sb-wb .wb-block .wb-drop-area {
- display: none;
-}
-.room-block .sb-wb .wb-block.droppable-hover .wb-drop-area {
- display: block;
- height: inherit;
- background-position: center;
-}
-.room-block .sb-wb .wb-block.droppable-hover .wb-drop-area::before {
- font-family: 'Font Awesome 6 Free';
- font-weight: 400;
- font-size: 20em;
- content: '\f358';
- display: inline-block;
- width: 100%;
- text-align: center;
- color: var(--bs-success);
-}
-.room-block .sb-wb .wb-block .tabs {
- height: calc(100% - var(--buffer-size));
-}
-.room-block .sb-wb .wb-block .tabs .wb-tabbar li a {
- position: relative;
- padding-inline-end: 25px;
+
+ &.droppable-hover {
+ border: 0;
+
+ .wb-area {
+ visibility: hidden;
+ height: 1px !important;
+ }
+ .wb-drop-area {
+ display: block;
+ height: inherit;
+ background-position: center;
+
+ &::before {
+ font-family: 'Font Awesome 6 Free';
+ font-weight: 400;
+ font-size: 20em;
+ content: '\f358';
+ display: inline-block;
+ width: 100%;
+ text-align: center;
+ color: var(--bs-success);
+ }
+ }
+ }
+ .wb-area {
+ height: 100%;
+ background-color: var(--bs-body-bg);
+ }
+ .wb-drop-area {
+ display: none;
+ }
+ .tabs {
+ height: calc(100% - var(--buffer-size));
+
+ .wb-tabbar li a {
+ position: relative;
+ padding-inline-end: 25px;
+ }
+ .wb-tab-content {
+ height: calc(100% - var(--room-wb-tabs-height));
+ position: relative;
+
+ .fullscreen {
+ position: absolute;
+ margin-inline-end: 40px;
+ }
+ .tab-pane {
+ height: 100%;
+ }
+ .wb-with-zoom {
+ width: calc(100% - 40px);
+ height: 100%;
+ display: inline-block;
+ }
+ .scroll-container {
+ overflow: auto;
+ height: calc(100% - var(--wb-zoom-height));
+
+ .canvas-container {
+ margin-top: 5px;
+ margin-inline-start: 5px;
+ border: 1px solid #888888;
+ box-shadow: 5px 5px 5px #888888;
+ }
+ }
+ .wb-zoom-block {
+ height: var(--wb-zoom-height);
+ }
+ .tools {
+ width: 35px;
+ height: 100%;
+ display: inline-block;
+ vertical-align: top;
+ }
+ }
+ }
+ .tools {
+ position: relative;
+ display: inline-block;
+ border: 0;
+
+ .btn-group, .om-icon.big {
+ width: 35px;
+ height: 35px;
+ }
+ .dropstart .dropdown-toggle::before {
+ vertical-align: bottom;
+ margin-inline-end: 0;
+ }
+ .dropdown-menu .om-icon.big {
+ float: none;
+
+ &.active {
+ border: 1px solid #6b6565;
+ }
+ }
+ .drawings .om-icon.big.stub::before, .om-icon.big.math::before {
+ font-size: 1.5em;
+ }
+ .om-icon.big {
+ vertical-align: top;
+ background-size: 27px;
+ margin: 0;
+ background-position: var(--background-start) !important;
+ position: relative;
+
+ &.stub {
+ width: 30px;
+ height: 30px;
+ }
+ &.active {
+ background-color: whitesmoke;
+ }
+ &::before {
+ padding-inline-start: 5px;
+ }
+ &.paint::before {
+ content: '\f304';
+ }
+ &.pointer::before {
+ content: '\f245';
+ }
+ &.apointer::before {
+ content: '\f3c5';
+ }
+ &.line::before {
+ content: '\f715';
+ }
+ &.uline::before {
+ content: '\f591';
+ }
+ &.rect::before {
+ content: '\f5cb';
+ }
+ &.ellipse::before {
+ content: '\f111'
+ }
+ &.text::before {
+ content: 'T';
+ }
+ &.arrow::before {
+ content: '\f30b';
+ }
+ &.eraser::before {
+ content: '\f12d';
+ }
+ &.clear-all::before {
+ content: '\f2ed';
+ }
+ &.clear-slide::before {
+ content: '\f1c3';
+ }
+ &.save::before {
+ content: '\f0c7';
+ }
+ &.undo::before {
+ content: '\f3e5';
+ }
+ &.redo::before {
+ content: '\f064';
+ }
+ &.math::before {
+ content: '\f534';
+ }
+ &.textbox {
+ background-image: url(images/textbox.png);
+ }
+ }
+ &.vertical .dropdown-toggle {
+ width: 35px;
+ height: 28px;
+
+ .caret {
+ left: -1px;
+ bottom: -7px;
+ }
+ }
+ &.horisontal .dropdown-toggle {
+ width: 35px;
+ height: 23px;
+
+ .caret {
+ left: -1px;
+ bottom: -12px;
+ }
+ }
+ .dropdown-toggle {
+ position: relative;
+ display: inline-block;
+
+ .caret {
+ position: absolute;
+ border-top: 8px solid transparent;
+ border-left: 8px solid blue;
+ border-right: 8px solid transparent;
+ }
+ }
+ }
+ .om-icon.big {
+ &.next::before {
+ content: '\f054';
+ }
+ &.prev::before {
+ content: '\f053';
+ }
+ }
}
.wb-tab-close {
width: 20px;
@@ -53,225 +224,97 @@
border: none;
padding: 0;
}
-.room-block .sb-wb .wb-block .tabs .wb-tab-content {
- height: calc(100% - var(--room-wb-tabs-height));
- position: relative;
-}
-.room-block .sb-wb .wb-block .tabs .wb-tab-content .fullscreen {
- position: absolute;
- margin-inline-end: 40px;
-}
-.room-block .sb-wb .wb-block .tabs .wb-tab-content .tab-pane {
- height: 100%;
-}
-.room-block .sb-wb .wb-block .tools {
- position: relative;
- display: inline-block;
- border: 0;
-}
-.room-block .sb-wb .wb-block .tools .btn-group, .room-block .sb-wb .wb-block .tools .om-icon.big {
- width: 35px;
- height: 35px;
-}
-.room-block .sb-wb .wb-block .tools .om-icon.big {
- vertical-align: top;
- background-size: 27px;
- margin: 0;
- background-position: var(--background-start) !important;
- position: relative;
-}
-.room-block .sb-wb .wb-block .tools .om-icon.big.stub {
- width: 30px;
- height: 30px;
-}
-.room-block .sb-wb .wb-block .tools .dropstart .dropdown-toggle::before {
- vertical-align: bottom;
- margin-inline-end: 0;
-}
-.room-block .sb-wb .wb-block .tools .dropdown-menu .om-icon.big {
- float: none;
-}
-.room-block .sb-wb .wb-block .tools .om-icon.big.active {
- background-color: whitesmoke;
-}
-.room-block .sb-wb .wb-block .tools .dropdown-menu .om-icon.big.active {
- border: 1px solid #6b6565;
-}
-.room-block .sb-wb .wb-block .tools .om-icon.big::before {
- padding-inline-start: 5px;
-}
-.room-block .sb-wb .wb-block .tools .drawings .om-icon.big.stub::before
-, .room-block .sb-wb .wb-block .tools .om-icon.big.math::before
-{
- font-size: 1.5em;
-}
-.room-block .sb-wb .wb-block .tools .om-icon.big.paint::before {
- content: '\f304'
-}
-.room-block .sb-wb .wb-block .tools .om-icon.big.pointer::before {
- content: '\f245';
-}
-.room-block .sb-wb .wb-block .tools .om-icon.big.apointer::before {
- content: '\f3c5';
-}
-.room-block .sb-wb .wb-block .tools .om-icon.big.line::before {
- content: '\f715';
-}
-.room-block .sb-wb .wb-block .tools .om-icon.big.uline::before {
- content: '\f591'
-}
-.room-block .sb-wb .wb-block .tools .om-icon.big.rect::before {
- content: '\f5cb'
-}
-.room-block .sb-wb .wb-block .tools .om-icon.big.ellipse::before {
- content: '\f111'
-}
-.room-block .sb-wb .wb-block .tools .om-icon.big.text::before {
- content: 'T';
-}
-.room-block .sb-wb .wb-block .tools .om-icon.big.arrow::before {
- content: '\f30b';
-}
-.room-block .sb-wb .wb-block .tools .om-icon.big.eraser::before {
- content: '\f12d';
-}
-.room-block .sb-wb .wb-block .tools .om-icon.big.clear-all::before {
- content: '\f2ed';
-}
-.room-block .sb-wb .wb-block .tools .om-icon.big.clear-slide::before {
- content: '\f1c3';
-}
-.room-block .sb-wb .wb-block .tools .om-icon.big.save::before {
- content: '\f0c7';
-}
-.room-block .sb-wb .wb-block .tools .om-icon.big.undo::before {
- content: '\f3e5';
-}
-.room-block .sb-wb .wb-block .tools .om-icon.big.redo::before {
- content: '\f064';
-}
-.room-block .sb-wb .wb-block .tools .om-icon.big.math::before {
- content: '\f534';
-}
-.room-block .sb-wb .wb-block .tools .om-icon.big.textbox {
- background-image: url(images/textbox.png);
-}
-.room-block .sb-wb .wb-block .om-icon.big.next::before {
- content: '\f054';
-}
-.room-block .sb-wb .wb-block .om-icon.big.prev::before {
- content: '\f053';
-}
-.wb-tool-settings, .wb-formula {
- position: absolute;
- z-index: 95;
-}
-.wb-formula .latex-guide {
- padding: 0 10px;
-}
-.room-block .sb-wb .wb-block .tools.vertical .dropdown-toggle {
- width: 35px;
- height: 28px;
-}
-.room-block .sb-wb .wb-block .tools.horisontal .dropdown-toggle {
- width: 35px;
- height: 23px;
-}
-.room-block .sb-wb .wb-block .tools .dropdown-toggle {
- position: relative;
- display: inline-block;
-}
-.room-block .sb-wb .wb-block .tools.horisontal .dropdown-toggle .caret {
- left: -1px;
- bottom: -12px;
-}
-.room-block .sb-wb .wb-block .tools.vertical .dropdown-toggle .caret {
- left: -1px;
- bottom: -7px;
-}
-.room-block .sb-wb .wb-block .tools .dropdown-toggle .caret {
- position: absolute;
- border-top: 8px solid transparent;
- border-left: 8px solid blue;
- border-right: 8px solid transparent;
-}
.wb-tool-settings, .wb-tool-settings .tab.props, .wb-formula {
display: inline-block;
width: 310px;
}
-.wb-tool-settings .ui-dialog-titlebar-close, .wb-formula .ui-dialog-titlebar-close {
+.wb-tool-settings, .wb-formula {
position: absolute;
- margin-inline-end: .3em;
- top: 5px;
- width: 20px;
- padding: 1px;
- height: 20px;
-}
-.wb-tool-settings .header, .wb-formula .header {
- padding: 5px;
-}
-.wb-tool-settings .header .ui-dialog-title, .wb-formula .header .ui-dialog-title {
- padding-inline-start: 10px;
+ z-index: 95;
+
+ .ui-dialog-titlebar-close {
+ position: absolute;
+ margin-inline-end: .3em;
+ top: 5px;
+ width: 20px;
+ padding: 1px;
+ height: 20px;
+ }
+ .header {
+ padding: 5px;
+
+ .ui-dialog-title {
+ padding-inline-start: 10px;
+ }
+ }
}
.wb-tool-settings .tab.props {
padding: 5px 10px;
-}
-.wb-tool-settings .tab.props .prop-row {
- padding-top: 5px;
- margin: 0;
- font-size: small;
-}
-.wb-tool-settings .tab.props .block {
- display: inline;
- padding-inline-start: 5px;
-}
-.wb-tool-settings .tab.props .block.lbl {
- width: 1em;
-}
-.wb-tool-settings .tab.props .block.but {
- width: 2.5em;
-}
-.wb-tool-settings .tab.props .block.input {
- width: 40px;
-}
-.wb-tool-settings .tab.props .block.input input {
- width: 30px;
-}
-.wb-tool-settings .tab.props .block.input input[type=number] {
- width: 40px;
-}
-.wb-tool-settings .tab.props .block.input input[type=color] {
- padding: 0;
-}
-.wb-tool-settings .tab.props .block.input input[type=color]:disabled {
- opacity:.3;
-}
-.wb-tool-settings .tab.props .block.but button {
- width: 2.5em;
-}
-.wb-tool-settings .tab.props .wb-prop-i.selected {
- font-style: italic;
-}
-.wb-tool-settings .tab.props .wb-prop-b.selected {
- font-weight: bold;
-}
-.wb-tool-settings .tab.props .block.but .wb-prop-i
- , .wb-tool-settings .tab.props .block.but .wb-prop-b
-{
- width: 5px;
-}
-.wb-formula .text-container {
- margin: 0 5px 5px 0;
- padding: 5px;
- height: calc(100% - 90px);
-}
-.wb-formula .status {
- min-height: 16px;
-}
-.wb-formula textarea {
- width: 100%;
- height: 100%;
- resize: none;
+
+ .prop-row {
+ padding-top: 5px;
+ margin: 0;
+ font-size: small;
+ }
+ .block {
+ display: inline;
+ padding-inline-start: 5px;
+
+ &.lbl {
+ width: 1em;
+ }
+ &.but {
+ width: 2.5em;
+
+ button {
+ width: 2.5em;
+ }
+ .wb-prop-i, .wb-prop-b {
+ width: 5px;
+ }
+ }
+ &.input {
+ width: 40px;
+
+ input {
+ width: 30px;
+
+ &[type=number] {
+ width: 40px;
+ }
+ &[type=color] {
+ padding: 0;
+ }
+ &[type=color]:disabled {
+ opacity:.3;
+ }
+ }
+ }
+ }
+ .wb-prop-i.selected {
+ font-style: italic;
+ }
+ .wb-prop-b.selected {
+ font-weight: bold;
+ }
+}
+.wb-formula {
+ .text-container {
+ margin: 0 5px 5px 0;
+ padding: 5px;
+ height: calc(100% - 90px);
+ }
+ .status {
+ min-height: 16px;
+ }
+ textarea {
+ width: 100%;
+ height: 100%;
+ resize: none;
+ }
+ .latex-guide {
+ padding: 0 10px;
+ }
}
.dropdown-menu.om-left {
right: 0;
@@ -281,79 +324,57 @@
padding-inline-start: 70px !important;
padding-inline-end: 35px !important;
min-height: 40px;
-}
-.wb-tabbar .scroll-container {
- overflow: hidden;
-}
-.wb-tabbar .scroll-container .scrollable {
- width: max-content;
-}
-.wb-tabbar .scroll-container .scrollable, .wb-tabbar .scroll-container .scrollable li {
- display: flex;
-}
-.wb-tabbar .add.disabled, .wb-tabbar .prev.disabled, .wb-tabbar .next.disabled {
- opacity: .3;
-}
-.wb-tabbar .add, .wb-tabbar .prev, .wb-tabbar .next {
- position: absolute;
- top: 3px;
-}
-.wb-tabbar .add {
- margin-inline-start: 2px;
-}
-.wb-tabbar .prev {
- margin-inline-start: 35px;
-}
-.wb-tabbar .next {
- margin-inline-end: 2px;
-}
-.room-block .sb-wb .wb-block .tabs .wb-tab-content .wb-with-zoom {
- width: calc(100% - 40px);
- height: 100%;
- display: inline-block;
-}
-.room-block .sb-wb .wb-block .tabs .wb-tab-content .scroll-container {
- overflow: auto;
- height: calc(100% - var(--wb-zoom-height));
-}
-.room-block .sb-wb .wb-block .tabs .wb-tab-content .wb-zoom-block {
- height: var(--wb-zoom-height);
-}
-.room-block .sb-wb .wb-block .tabs .wb-tab-content .tools {
- width: 35px;
- height: 100%;
- display: inline-block;
- vertical-align: top;
-}
-.room-block .sb-wb .wb-block .tabs .wb-tab-content .scroll-container .canvas-container {
- margin-top: 5px;
- margin-inline-start: 5px;
- border: 1px solid #888888;
- box-shadow: 5px 5px 5px #888888;
+
+ .scroll-container {
+ overflow: hidden;
+
+ .scrollable {
+ width: max-content;
+
+ &, li {
+ display: flex;
+ }
+ }
+ }
+ .add, .prev, .next {
+ position: absolute;
+ top: 3px;
+
+ &.disabled {
+ opacity: .3;
+ }
+ }
+ .add {
+ margin-inline-start: 2px;
+ }
+ .prev {
+ margin-inline-start: 35px;
+ }
+ .next {
+ margin-inline-end: 2px;
+ }
}
.wb-area .wb-zoom {
display: flex;
padding-top: 2px;
- min-width: 360px
-}
-.wb-area .wb-zoom .doc-group
-, .wb-area .wb-zoom .zoom-group
-, .wb-area .wb-zoom .settings-group
-{
- width: auto;
-}
-.wb-area .wb-zoom input {
- width: 50px
-}
-.wb-area .wb-zoom .settings-group {
- display: none;
- margin-inline-start: 2px;
-}
-.wb-area .wb-zoom .doc-group {
- margin-inline-start: 5px;
-}
-.wb-area .wb-zoom .zoom-group {
- margin-inline-start: 2px;
+ min-width: 360px;
+
+ .doc-group, .zoom-group, .settings-group {
+ width: auto;
+ }
+ input {
+ width: 50px
+ }
+ .settings-group {
+ display: none;
+ margin-inline-start: 2px;
+ }
+ .doc-group {
+ margin-inline-start: 5px;
+ }
+ .zoom-group {
+ margin-inline-start: 2px;
+ }
}
#wb-rename-menu {
display: none;
diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/common/OmAjaxClientInfoBehavior.java b/openmeetings-web/src/main/java/org/apache/openmeetings/web/common/OmAjaxClientInfoBehavior.java
index 3e58c0556..a44845171 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/common/OmAjaxClientInfoBehavior.java
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/common/OmAjaxClientInfoBehavior.java
@@ -39,23 +39,25 @@ import com.github.openjson.JSONObject;
public class OmAjaxClientInfoBehavior extends AjaxClientInfoBehavior {
private static final long serialVersionUID = 1L;
- private static final JavaScriptUrlReferenceHeaderItem MAIN_JS = new JavaScriptUrlReferenceHeaderItem("js/main.js", "om-main") {
+ public static final PriorityHeaderItem MAIN_JS = new PriorityHeaderItem(new JavaScriptUrlReferenceHeaderItem("js/main.js", "om-main") {
private static final long serialVersionUID = 1L;
@Override
public List<HeaderItem> getDependencies() {
return List.of(JavaScriptHeaderItem.forReference(BrowserInfoForm.JS));
}
- };
+ });
+ public static final PriorityHeaderItem MAIN_JS_INIT = new PriorityHeaderItem(
+ JavaScriptHeaderItem.forScript(
+ String.format("OmUtil.init(%s)", new JSONObject()
+ .put("debug", DEVELOPMENT == Application.get().getConfigurationType()))
+ , "om-util-init"));
@Override
public void renderHead(Component component, IHeaderResponse response) {
super.renderHead(component, response);
- response.render(new PriorityHeaderItem(MAIN_JS));
- response.render(new PriorityHeaderItem(JavaScriptHeaderItem.forScript(
- String.format("OmUtil.init(%s)", new JSONObject()
- .put("debug", DEVELOPMENT == Application.get().getConfigurationType()))
- , "om-util-init")));
+ response.render(MAIN_JS);
+ response.render(MAIN_JS_INIT);
}
@Override
diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/VideoSettings.java b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/VideoSettings.java
index 229617892..e7de0f492 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/VideoSettings.java
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/VideoSettings.java
@@ -20,6 +20,10 @@ package org.apache.openmeetings.web.room;
import static org.apache.openmeetings.util.OpenmeetingsVariables.getRoomSettings;
+import java.util.List;
+
+import org.apache.openmeetings.web.common.OmAjaxClientInfoBehavior;
+import org.apache.wicket.markup.head.HeaderItem;
import org.apache.wicket.markup.head.IHeaderResponse;
import org.apache.wicket.markup.head.JavaScriptHeaderItem;
import org.apache.wicket.markup.head.PriorityHeaderItem;
@@ -30,7 +34,14 @@ import com.github.openjson.JSONObject;
public class VideoSettings extends Panel {
private static final long serialVersionUID = 1L;
- public static final PriorityHeaderItem VIDEO_SETTINGS_JS = new PriorityHeaderItem(JavaScriptHeaderItem.forUrl("js/settings.js"));
+ public static final PriorityHeaderItem VIDEO_SETTINGS_JS = new PriorityHeaderItem(JavaScriptHeaderItem.forUrl("js/settings.js")) {
+ private static final long serialVersionUID = 1L;
+
+ @Override
+ public List<HeaderItem> getDependencies() {
+ return List.of(OmAjaxClientInfoBehavior.MAIN_JS, OmAjaxClientInfoBehavior.MAIN_JS_INIT);
+ }
+ };
public static final String URL = "url";
public static final String FALLBACK = "fallback";