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 2020/04/05 04:40:24 UTC
[openmeetings] branch OPENMEETINGS-2225-alternative created (now
8e901ab)
This is an automated email from the ASF dual-hosted git repository.
solomax pushed a change to branch OPENMEETINGS-2225-alternative
in repository https://gitbox.apache.org/repos/asf/openmeetings.git.
at 8e901ab [OPENMEETINGS-2225] alternative fix for menu issue
This branch includes the following new commits:
new 8e901ab [OPENMEETINGS-2225] alternative fix for menu issue
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
[openmeetings] 01/01: [OPENMEETINGS-2225] alternative fix for menu
issue
Posted by so...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
solomax pushed a commit to branch OPENMEETINGS-2225-alternative
in repository https://gitbox.apache.org/repos/asf/openmeetings.git
commit 8e901ab752440d8ffbcdb171e51f3d4e9014bc56
Author: Maxim Solodovnik <so...@gmail.com>
AuthorDate: Sun Apr 5 11:39:59 2020 +0700
[OPENMEETINGS-2225] alternative fix for menu issue
---
.../apache/openmeetings/web/room/RoomPanel.html | 10 +-
openmeetings-web/src/main/webapp/css/raw-menu.css | 7 +-
openmeetings-web/src/main/webapp/css/raw-room.css | 110 ++++++++++----------
.../src/main/webapp/css/raw-variables.css | 3 +-
openmeetings-web/src/main/webapp/css/raw-wb.css | 112 ++++++++++-----------
5 files changed, 123 insertions(+), 119 deletions(-)
diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/RoomPanel.html b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/RoomPanel.html
index 2a51e15..787b877 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/RoomPanel.html
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/RoomPanel.html
@@ -23,10 +23,12 @@
<div class="room-block">
<div class="room-container" wicket:id="roomContainer">
<div class="menu" wicket:id="menu"></div>
- <div class="sidebar" wicket:id="sidebar"></div>
- <div wicket:id="wb-area" class="wb-block">
- <div class="wb-drop-area"></div>
- <div class="wb-area" wicket:id="whiteboard"></div>
+ <div class="sb-wb">
+ <div class="sidebar" wicket:id="sidebar"></div>
+ <div wicket:id="wb-area" class="wb-block">
+ <div class="wb-drop-area"></div>
+ <div class="wb-area" wicket:id="whiteboard"></div>
+ </div>
</div>
</div>
<div class="event-details" wicket:id="event-details"></div>
diff --git a/openmeetings-web/src/main/webapp/css/raw-menu.css b/openmeetings-web/src/main/webapp/css/raw-menu.css
index 3565289..b628f34 100644
--- a/openmeetings-web/src/main/webapp/css/raw-menu.css
+++ b/openmeetings-web/src/main/webapp/css/raw-menu.css
@@ -3,9 +3,6 @@
padding-top: 0;
padding-bottom: 0;
}
-.room-block .menu {
- height: var(--room-menu-height);
-}
.room-block .menu .top.exit {
padding-left: 0;
}
@@ -26,9 +23,7 @@
font-weight: bold;
}
.room-block .menu .details .room.name.screen {
- color: red;
-}
-.room-block .menu .details .room.demo {
+ color: var(--danger);
}
.room-block .menu .details .icon {
width: 30px;
diff --git a/openmeetings-web/src/main/webapp/css/raw-room.css b/openmeetings-web/src/main/webapp/css/raw-room.css
index cd24fc1..dcdc81b 100644
--- a/openmeetings-web/src/main/webapp/css/raw-room.css
+++ b/openmeetings-web/src/main/webapp/css/raw-room.css
@@ -3,18 +3,6 @@
width: 100%;
height: 100%;
}
-.room-block .sidebar .user-list .user .om-icon.user-status {
- border-radius: 50%;
-}
-.room-block .sidebar .user-list .user .om-icon.user-status.user {
- background-color: var(--success);
-}
-.room-block .sidebar .user-list .user .om-icon.user-status.wb {
- background-color: var(--warning);
-}
-.room-block .sidebar .user-list .user .om-icon.user-status.mod {
- background-color: var(--danger);
-}
.room-block .event-details.modal {
position: absolute;
width: 300px;
@@ -28,37 +16,44 @@
padding: 0;
margin: 0;
}
-.room-block .sidebar {
+.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(--room-sidebar-width);
position: absolute;
- height: calc(100% - var(--room-menu-height));
+ height: 100%;
+ top: 0;
right: auto;
left: 0;
}
-.room-block .sidebar #room-sidebar-tabs {
+.room-block .sb-wb .sidebar #room-sidebar-tabs {
height: calc(100% - var(--buffer-size) - var(--activities-height));
}
-.room-block .sidebar .tab {
+.room-block .sb-wb .sidebar .tab {
padding: 5px 0 0 0;
}
-.room-block .sidebar .tab i {
+.room-block .sb-wb .sidebar .tab i {
font-size: 2.0em;
vertical-align: top;
}
-html[dir="rtl"] .room-block .sidebar {
+html[dir="rtl"] .room-block .sb-wb .sidebar {
right: 0;
left: auto;
}
-.room-block .sidebar #busy-indicator {
+.room-block .sb-wb .sidebar #busy-indicator {
margin: 8px;
}
-.room-block .sidebar .ui-resizable-handle, #chatPanel.room .ui-resizable-handle {
+.room-block .sb-wb .sidebar .ui-resizable-handle, #chatPanel.room .ui-resizable-handle {
width: 4px;
background-color: #f3f3f4;
border: 1px solid #dedee0;
}
-.room-block .sidebar .ui-resizable-handle:hover, #chatPanel.room .ui-resizable-handle:hover {
+.room-block .sb-wb .sidebar .ui-resizable-handle:hover, #chatPanel.room .ui-resizable-handle:hover {
background-color: #b6bdca;
border-color: #bebec3;
}
@@ -74,11 +69,11 @@ html[dir="rtl"] .room-block .sidebar {
font-size: 2.0em;
line-height: 1.2em;
}
-.room-block .sidebar .user-list {
+.room-block .sb-wb .sidebar .user-list {
overflow-y: auto;
height: calc(100% - var(--room-sidebar-header-height) - var(--buffer-size));
}
-.room-block .sidebar .user-list .user.entry {
+.room-block .sb-wb .sidebar .user-list .user.entry {
min-height: 60px;
padding-left: 5px;
padding-top: 5px;
@@ -87,27 +82,27 @@ html[dir="rtl"] .room-block .sidebar {
background-position: 2px 2px;
position: relative;
}
-.room-block .sidebar .user-list .user.entry:hover {
+.room-block .sb-wb .sidebar .user-list .user.entry:hover {
background-size: 80px 80px;
min-height: 80px;
}
-.room-block .sidebar .user-list .user.entry:hover .user.name {
+.room-block .sb-wb .sidebar .user-list .user.entry:hover .user.name {
padding: 0;
margin-top: 84px;
min-height: 18px;
}
-.room-block .sidebar .user-list .user.entry .user.actions {
+.room-block .sb-wb .sidebar .user-list .user.entry .user.actions {
display: none;
}
.room-block.narrow .sidebar .user-list .user.entry:hover .user.actions {
margin-top: 84px;
}
-.room-block .sidebar .user-list .user.entry:hover .user.actions {
+.room-block .sb-wb .sidebar .user-list .user.entry:hover .user.actions {
display: block;
padding: 0;
margin-right: 35px;
}
-.room-block .sidebar .user-list .user.name {
+.room-block .sb-wb .sidebar .user-list .user.name {
line-height: 18px;
height: 18px;
padding: 0;
@@ -118,7 +113,19 @@ html[dir="rtl"] .room-block .sidebar {
.room-block.narrow .sidebar .user-list .user.name {
display: none;
}
-.room-block .sidebar .user-list .user.entry .om-icon.audio-activity {
+.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(--success);
+}
+.room-block .sb-wb .sidebar .user-list .user.entry .om-icon.user-status.wb {
+ background-color: var(--warning);
+}
+.room-block .sb-wb .sidebar .user-list .user.entry .om-icon.user-status.mod {
+ background-color: var(--danger);
+}
+.room-block .sb-wb .sidebar .user-list .user.entry .om-icon.audio-activity {
position: absolute;
bottom: 2px;
right: 2px;
@@ -143,23 +150,23 @@ html[dir="rtl"] .room-block .sidebar {
.user-list .user.entry .video-container .footer {
display: none !important;
}
-.room-block .sidebar .icon-undock, .room-block .sidebar .icon-dock {
+.room-block .sb-wb .sidebar .icon-undock, .room-block .sb-wb .sidebar .icon-dock {
font-size: 1.6em;
padding-top: 3px;
}
-.room-block .sidebar .icon-dock:before {
+.room-block .sb-wb .sidebar .icon-dock:before {
content: "\f101";
}
-.room-block .sidebar .icon-undock::before {
+.room-block .sb-wb .sidebar .icon-undock::before {
content: "\f100";
}
-.room-block .sidebar #room-sidebar-tabs .tab-content {
+.room-block .sb-wb .sidebar #room-sidebar-tabs .tab-content {
height: calc(100% - 44px);
}
-.room-block .sidebar #room-sidebar-tabs .tab-content .tab-pane {
+.room-block .sb-wb .sidebar #room-sidebar-tabs .tab-content .tab-pane {
height: 100%;
}
-.room-block .sidebar.closed .tab-content .tab-pane {
+.room-block .sb-wb .sidebar.closed .tab-content .tab-pane {
display: none;
}
.om-icon.ulist-small {
@@ -306,7 +313,7 @@ html[dir="rtl"] .room-block .sidebar {
.right.mute-others.om-icon::before {
content: '\f6a9';
}
-.room-block .sidebar .user-list .user.entry .kick i {
+.room-block .sb-wb .sidebar .user-list .user.entry .kick i {
font-size: 1.5em;
}
.settings.om-icon::before {
@@ -336,7 +343,7 @@ html[dir="rtl"] .room-block .sidebar {
content: '\f131';
color: var(--warning);
}
-.room-block .sidebar .user-list .user.entry.current {
+.room-block .sb-wb .sidebar .user-list .user.entry.current {
font-weight: bold;
background-color: var(--light);
}
@@ -364,18 +371,18 @@ html[dir="rtl"] .room-block .sidebar {
.sip .button-row #sip-dialer-btn-erase {
margin-left: 5px;
}
-.room-block .sidebar .tab.om-icon.big {
+.room-block .sb-wb .sidebar .tab.om-icon.big {
line-height: 30px;
width: auto;
max-width: 80px;
position: relative;
}
-.room-block .sidebar .tab .badge {
+.room-block .sb-wb .sidebar .tab .badge {
position: absolute;
bottom: 0;
right: 2px;
}
-.room-block .sidebar .tab.om-icon.big .label {
+.room-block .sb-wb .sidebar .tab.om-icon.big .label {
max-width: 50px;
display: inline-block;
text-overflow: ellipsis;
@@ -748,36 +755,35 @@ html[dir="rtl"] .room-block .sidebar {
height: var(--vdialog-footer-height) !important;
}
@media screen and (max-width: 1280px) {
- .room-block .sidebar .tab.om-icon.big {
- max-width: 0px;
+ .room-block .sb-wb .sidebar .tab.om-icon.big {
padding-right: 0;
}
- .room-block.big .sidebar .tab.om-icon.big {
+ .room-block.big .sb-wb .sidebar .tab.om-icon.big {
max-width: 80px;
}
- .room-block .sidebar .user-list .user.name {
+ .room-block .sb-wb .sidebar .user-list .user.name {
display: none;
}
- .room-block.big .sidebar .user-list .user.name {
+ .room-block.big .sb-wb .sidebar .user-list .user.name {
display: block;
}
- .room-block .sidebar .file-tree .file.item .name
- , .room-block .sidebar .file-tree .file.item .name span
+ .room-block .sb-wb .sidebar .file-tree .file.item .name
+ , .room-block .sb-wb .sidebar .file-tree .file.item .name span
{
width: 40px;
}
- .room-block.big .sidebar .file-tree .file.item .name
- , .room-block.big .sidebar .file-tree .file.item .name span
+ .room-block.big .sb-wb .sidebar .file-tree .file.item .name
+ , .room-block.big .sb-wb .sidebar .file-tree .file.item .name span
{
width: 255px;
}
- .room-block .sidebar .file-tree .file.item .name span {
+ .room-block .sb-wb .sidebar .file-tree .file.item .name span {
padding: 0;
}
- .room-block .sidebar .file-tree .file.item {
+ .room-block .sb-wb .sidebar .file-tree .file.item {
width: 80px;
}
- .room-block.big .sidebar .file-tree .file.item {
+ .room-block.big .sb-wb .sidebar .file-tree .file.item {
width: auto;
}
}
diff --git a/openmeetings-web/src/main/webapp/css/raw-variables.css b/openmeetings-web/src/main/webapp/css/raw-variables.css
index 35c8200..55b38dc 100644
--- a/openmeetings-web/src/main/webapp/css/raw-variables.css
+++ b/openmeetings-web/src/main/webapp/css/raw-variables.css
@@ -42,7 +42,7 @@ body.no-menu {
}
.main.room {
--header-height: 0px;
- --room-menu-height: 34px;
+ --room-menu-height: calc(22px + 1rem);
--room-sidebar-width: 315px;
--room-wb-tabs-height: 45px;
--room-sidebar-header-height: 37px;
@@ -52,6 +52,7 @@ body.no-menu {
--vdialog-titlebar-height: 27px;
--vdialog-footer-height: 0px;
--wb-zoom-height: 33px;
+ --menu-height: 0px;
}
.main.room.INTERVIEW {
--rec-btn-height: 40px;
diff --git a/openmeetings-web/src/main/webapp/css/raw-wb.css b/openmeetings-web/src/main/webapp/css/raw-wb.css
index 3942014..b49f668 100644
--- a/openmeetings-web/src/main/webapp/css/raw-wb.css
+++ b/openmeetings-web/src/main/webapp/css/raw-wb.css
@@ -1,34 +1,34 @@
/* Licensed under the Apache License, Version 2.0 (the "License") http://www.apache.org/licenses/LICENSE-2.0 */
-.room-block .wb-block {
+.room-block .sb-wb .wb-block {
position: absolute;
- height: calc(100% - var(--room-menu-height));
- width: calc(100% - var(--room-sidebar-width) - var(--chat-width) - 2 * var(--buffer-size));
- top: var(--room-menu-height);
+ height: 100%;
+ width: calc(100% - var(--room-sidebar-width) - var(--buffer-size));
+ top: 0;
left: calc(var(--room-sidebar-width) + var(--buffer-size));
}
-html[dir="rtl"] .room-block .wb-block {
+html[dir="rtl"] .room-block .sb-wb .wb-block {
right: calc(var(--room-sidebar-width) + var(--buffer-size));
left: auto;
}
-.room-block .wb-block.droppable-hover {
+.room-block .sb-wb .wb-block.droppable-hover {
border: 0;
}
-.room-block .wb-block .wb-area {
+.room-block .sb-wb .wb-block .wb-area {
height: 100%;
}
-.room-block .wb-block.droppable-hover .wb-area {
+.room-block .sb-wb .wb-block.droppable-hover .wb-area {
visibility: hidden;
height: 1px !important;
}
-.room-block .wb-block .wb-drop-area {
+.room-block .sb-wb .wb-block .wb-drop-area {
display: none;
}
-.room-block .wb-block.droppable-hover .wb-drop-area {
+.room-block .sb-wb .wb-block.droppable-hover .wb-drop-area {
display: block;
height: inherit;
background-position: center;
}
-.room-block .wb-block.droppable-hover .wb-drop-area::before {
+.room-block .sb-wb .wb-block.droppable-hover .wb-drop-area::before {
font-family: 'Font Awesome 5 Free';
font-weight: 400;
font-size: 20em;
@@ -38,14 +38,14 @@ html[dir="rtl"] .room-block .wb-block {
text-align: center;
color: var(--success);
}
-.room-block .wb-block .tabs {
+.room-block .sb-wb .wb-block .tabs {
height: calc(100% - var(--buffer-size));
}
-.room-block .wb-block .tabs .wb-tabbar li a {
+.room-block .sb-wb .wb-block .tabs .wb-tabbar li a {
position: relative;
padding-right: 25px;
}
-.room-block .wb-block .tabs .wb-tabbar li a button {
+.room-block .sb-wb .wb-block .tabs .wb-tabbar li a button {
width: 20px;
height: 20px;
padding: 0;
@@ -53,106 +53,106 @@ html[dir="rtl"] .room-block .wb-block {
top: 2px;
right: 2px;
}
-.room-block .wb-block .tabs .wb-tab-content {
+.room-block .sb-wb .wb-block .tabs .wb-tab-content {
height: calc(100% - var(--room-wb-tabs-height));
position: relative;
}
-.room-block .wb-block .tabs .wb-tab-content .tab-pane {
+.room-block .sb-wb .wb-block .tabs .wb-tab-content .tab-pane {
height: 100%;
}
-.room-block .wb-block .tools {
+.room-block .sb-wb .wb-block .tools {
position: relative;
display: inline-block;
border: 0;
}
-.room-block .wb-block .tools .btn-group, .room-block .wb-block .tools .om-icon.big {
+.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 .wb-block .tools .om-icon.big {
+.room-block .sb-wb .wb-block .tools .om-icon.big {
vertical-align: top;
background-size: 27px;
margin: 0;
background-position: 4px !important;
position: relative;
}
-.room-block .wb-block .tools .om-icon.big.stub {
+.room-block .sb-wb .wb-block .tools .om-icon.big.stub {
width: 30px;
height: 30px;
}
-.room-block .wb-block .tools .dropleft .dropdown-toggle::before {
+.room-block .sb-wb .wb-block .tools .dropleft .dropdown-toggle::before {
vertical-align: bottom;
margin-right: 0;
}
-.room-block .wb-block .tools .dropdown-menu .om-icon.big {
+.room-block .sb-wb .wb-block .tools .dropdown-menu .om-icon.big {
float: none;
}
-.room-block .wb-block .tools .om-icon.big.active {
+.room-block .sb-wb .wb-block .tools .om-icon.big.active {
background-color: whitesmoke;
}
-.room-block .wb-block .tools .dropdown-menu .om-icon.big.active {
+.room-block .sb-wb .wb-block .tools .dropdown-menu .om-icon.big.active {
border: 1px solid #6b6565;
}
-.room-block .wb-block .tools .om-icon.big::before {
+.room-block .sb-wb .wb-block .tools .om-icon.big::before {
padding-left: 5px;
}
-.room-block .wb-block .tools .drawings .om-icon.big.stub::before
-, .room-block .wb-block .tools .om-icon.big.math::before
+.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 .wb-block .tools .om-icon.big.paint::before {
+.room-block .sb-wb .wb-block .tools .om-icon.big.paint::before {
content: '\f304'
}
-.room-block .wb-block .tools .om-icon.big.pointer::before {
+.room-block .sb-wb .wb-block .tools .om-icon.big.pointer::before {
content: '\f245';
}
-.room-block .wb-block .tools .om-icon.big.apointer::before {
+.room-block .sb-wb .wb-block .tools .om-icon.big.apointer::before {
content: '\f3c5';
}
-.room-block .wb-block .tools .om-icon.big.line::before {
+.room-block .sb-wb .wb-block .tools .om-icon.big.line::before {
content: '\f715';
}
-.room-block .wb-block .tools .om-icon.big.uline::before {
+.room-block .sb-wb .wb-block .tools .om-icon.big.uline::before {
content: '\f591'
}
-.room-block .wb-block .tools .om-icon.big.rect::before {
+.room-block .sb-wb .wb-block .tools .om-icon.big.rect::before {
content: '\f5cb'
}
-.room-block .wb-block .tools .om-icon.big.ellipse::before {
+.room-block .sb-wb .wb-block .tools .om-icon.big.ellipse::before {
content: '\f111'
}
-.room-block .wb-block .tools .om-icon.big.text::before {
+.room-block .sb-wb .wb-block .tools .om-icon.big.text::before {
content: 'T';
}
-.room-block .wb-block .tools .om-icon.big.arrow::before {
+.room-block .sb-wb .wb-block .tools .om-icon.big.arrow::before {
content: '\f30b';
}
-.room-block .wb-block .tools .om-icon.big.eraser::before {
+.room-block .sb-wb .wb-block .tools .om-icon.big.eraser::before {
content: '\f12d';
}
-.room-block .wb-block .tools .om-icon.big.clear-all::before {
+.room-block .sb-wb .wb-block .tools .om-icon.big.clear-all::before {
content: '\f2ed';
}
-.room-block .wb-block .tools .om-icon.big.clear-slide::before {
+.room-block .sb-wb .wb-block .tools .om-icon.big.clear-slide::before {
content: '\f1c3';
}
-.room-block .wb-block .tools .om-icon.big.save::before {
+.room-block .sb-wb .wb-block .tools .om-icon.big.save::before {
content: '\f0c7';
}
-.room-block .wb-block .tools .om-icon.big.undo::before {
+.room-block .sb-wb .wb-block .tools .om-icon.big.undo::before {
content: '\f0e2';
}
-.room-block .wb-block .tools .om-icon.big.math::before {
+.room-block .sb-wb .wb-block .tools .om-icon.big.math::before {
content: '\f534';
}
-.room-block .wb-block .tools .om-icon.big.textbox {
+.room-block .sb-wb .wb-block .tools .om-icon.big.textbox {
background-image: url(images/textbox.png);
}
-.room-block .wb-block .om-icon.big.next::before {
+.room-block .sb-wb .wb-block .om-icon.big.next::before {
content: '\f054';
}
-.room-block .wb-block .om-icon.big.prev::before {
+.room-block .sb-wb .wb-block .om-icon.big.prev::before {
content: '\f053';
}
.wb-tool-settings, .wb-formula {
@@ -162,27 +162,27 @@ html[dir="rtl"] .room-block .wb-block {
.wb-formula .latex-guide {
padding: 0 10px;
}
-.room-block .wb-block .tools.vertical .dropdown-toggle {
+.room-block .sb-wb .wb-block .tools.vertical .dropdown-toggle {
width: 35px;
height: 28px;
}
-.room-block .wb-block .tools.horisontal .dropdown-toggle {
+.room-block .sb-wb .wb-block .tools.horisontal .dropdown-toggle {
width: 35px;
height: 23px;
}
-.room-block .wb-block .tools .dropdown-toggle {
+.room-block .sb-wb .wb-block .tools .dropdown-toggle {
position: relative;
display: inline-block;
}
-.room-block .wb-block .tools.horisontal .dropdown-toggle .caret {
+.room-block .sb-wb .wb-block .tools.horisontal .dropdown-toggle .caret {
left: -1px;
bottom: -12px;
}
-.room-block .wb-block .tools.vertical .dropdown-toggle .caret {
+.room-block .sb-wb .wb-block .tools.vertical .dropdown-toggle .caret {
left: -1px;
bottom: -7px;
}
-.room-block .wb-block .tools .dropdown-toggle .caret {
+.room-block .sb-wb .wb-block .tools .dropdown-toggle .caret {
position: absolute;
border-top: 8px solid transparent;
border-left: 8px solid blue;
@@ -296,25 +296,25 @@ html[dir="rtl"] .room-block .wb-block {
.wb-tabbar .next {
right: 2px;
}
-.room-block .wb-block .tabs .wb-tab-content .wb-with-zoom {
+.room-block .sb-wb .wb-block .tabs .wb-tab-content .wb-with-zoom {
width: calc(100% - 40px);
height: 100%;
display: inline-block;
}
-.room-block .wb-block .tabs .wb-tab-content .scroll-container {
+.room-block .sb-wb .wb-block .tabs .wb-tab-content .scroll-container {
overflow: auto;
height: calc(100% - var(--wb-zoom-height));
}
-.room-block .wb-block .tabs .wb-tab-content .wb-zoom-block {
+.room-block .sb-wb .wb-block .tabs .wb-tab-content .wb-zoom-block {
height: var(--wb-zoom-height);
}
-.room-block .wb-block .tabs .wb-tab-content .tools {
+.room-block .sb-wb .wb-block .tabs .wb-tab-content .tools {
width: 35px;
height: 100%;
display: inline-block;
vertical-align: top;
}
-.room-block .wb-block .tabs .wb-tab-content .scroll-container .canvas-container {
+.room-block .sb-wb .wb-block .tabs .wb-tab-content .scroll-container .canvas-container {
margin-top: 5px;
margin-left: 5px;
border: 1px solid #888888;