/* UBZ_GLOBAL_SOURCE_TOP_DECK_R511_CSS */
html[data-ubz-source-topdeck-r511="1"] {
--ubz-r511-topdeck-height:
88px;
--ubz-r511-topdeck-edge:
8px;
}
/* ==============================================================
SHARED HEADER REPLACEMENT
Only the global shell header is hidden.
Module workflow/navigation bars remain untouched.
============================================================== */
html[data-ubz-source-topdeck-r511="1"]
.dashboard-main
> .dashboard-header.dashboard-header--fixed.dashboard-header--refined {
display:
none
!important;
visibility:
hidden
!important;
opacity:
0
!important;
pointer-events:
none
!important;
}
/*
* Mobile equivalents of the replaced global navigation.
*/
html[data-ubz-source-topdeck-r511="1"]
.ubuzima-mobile-topbar,
html[data-ubz-source-topdeck-r511="1"]
.ubuzima-mobile-bottom-nav {
display:
none
!important;
visibility:
hidden
!important;
pointer-events:
none
!important;
}
/* ==============================================================
EXISTING SOURCE DOCK -> GLOBAL TOP DECK
============================================================== */
html[data-ubz-source-topdeck-r511="1"]
.ubuzima-source-dock {
position:
fixed
!important;
top:
var(--ubz-r511-topdeck-edge)
!important;
right:
var(--ubz-r511-topdeck-edge)
!important;
bottom:
auto
!important;
left:
var(--ubz-r511-topdeck-edge)
!important;
z-index:
100500
!important;
width:
auto
!important;
max-width:
none
!important;
min-width:
0
!important;
min-height:
var(--ubz-r511-topdeck-height)
!important;
display:
flex
!important;
align-items:
center
!important;
justify-content:
center
!important;
grid-template-columns:
none
!important;
gap:
0
!important;
margin:
0
!important;
padding:
8px 10px
!important;
border:
1px solid rgba(255,255,255,.84)
!important;
border-radius:
20px
!important;
background:
linear-gradient(
180deg,
rgba(255,255,255,.94),
rgba(231,239,249,.86)
)
!important;
box-shadow:
0 14px 36px rgba(15,23,42,.16),
inset 0 1px 0 rgba(255,255,255,.98)
!important;
transform:
none
!important;
backdrop-filter:
blur(24px)
saturate(1.12)
!important;
-webkit-backdrop-filter:
blur(24px)
saturate(1.12)
!important;
overflow:
visible
!important;
box-sizing:
border-box
!important;
}
/* ==============================================================
MAIN MODULE MENU ONLY
Recent/task area from the old bottom Deck is intentionally
removed from the new global navigation presentation.
============================================================== */
html[data-ubz-source-topdeck-r511="1"]
.ubuzima-source-dock__divider,
html[data-ubz-source-topdeck-r511="1"]
.ubuzima-source-dock__tasks,
html[data-ubz-source-topdeck-r511="1"]
.ubuzima-source-dock__update {
display:
none
!important;
}
/*
* Permanent labels replace the old hover tip.
*/
html[data-ubz-source-topdeck-r511="1"]
.ubuzima-source-dock__tip {
display:
none
!important;
}
html[data-ubz-source-topdeck-r511="1"]
.ubuzima-source-dock__main {
display:
flex
!important;
align-items:
stretch
!important;
justify-content:
center
!important;
flex:
1 1 auto
!important;
width:
100%
!important;
min-width:
0
!important;
max-width:
100%
!important;
gap:
7px
!important;
margin:
0
!important;
padding:
0
!important;
overflow-x:
auto
!important;
overflow-y:
hidden
!important;
scrollbar-width:
thin
!important;
overscroll-behavior-inline:
contain
!important;
-webkit-overflow-scrolling:
touch
!important;
}
/* ==============================================================
MODULE TILES
============================================================== */
html[data-ubz-source-topdeck-r511="1"]
.ubuzima-source-dock__app {
position:
relative
!important;
display:
grid
!important;
grid-template-rows:
43px auto
!important;
align-items:
center
!important;
justify-items:
center
!important;
flex:
0 0 74px
!important;
width:
74px
!important;
min-width:
74px
!important;
max-width:
74px
!important;
height:
70px
!important;
min-height:
70px
!important;
max-height:
70px
!important;
gap:
2px
!important;
margin:
0
!important;
padding:
5px 4px 4px
!important;
border:
1px solid rgba(148,163,184,.24)
!important;
border-radius:
14px
!important;
background:
linear-gradient(
180deg,
rgba(255,255,255,.94),
rgba(225,234,245,.82)
)
!important;
color:
#1f2d42
!important;
box-shadow:
0 5px 14px rgba(15,23,42,.11),
inset 0 1px 0 rgba(255,255,255,.98)
!important;
transform:
none
!important;
transform-origin:
center center
!important;
overflow:
hidden
!important;
box-sizing:
border-box
!important;
transition:
transform .15s ease,
border-color .15s ease,
box-shadow .15s ease
!important;
}
html[data-ubz-source-topdeck-r511="1"]
.ubuzima-source-dock__app:hover,
html[data-ubz-source-topdeck-r511="1"]
.ubuzima-source-dock__app:focus-visible {
transform:
translateY(-2px)
!important;
border-color:
rgba(37,99,235,.36)
!important;
box-shadow:
0 8px 19px rgba(15,23,42,.16),
inset 0 1px 0 rgba(255,255,255,.98)
!important;
outline:
none
!important;
}
/*
* Profile first without replacing/reparenting the button.
*/
html[data-ubz-source-topdeck-r511="1"]
.ubuzima-source-dock__app.ubz-r511-profile-first {
order:
-100
!important;
}
/*
* Preserve the existing icon artwork.
*/
html[data-ubz-source-topdeck-r511="1"]
.ubuzima-source-dock__glass-icon {
width:
40px
!important;
height:
40px
!important;
display:
grid
!important;
place-items:
center
!important;
margin:
0 auto
!important;
border-radius:
12px
!important;
overflow:
hidden
!important;
}
html[data-ubz-source-topdeck-r511="1"]
.ubuzima-source-dock__glass-icon
img {
width:
35px
!important;
height:
35px
!important;
max-width:
35px
!important;
max-height:
35px
!important;
display:
block
!important;
object-fit:
contain
!important;
pointer-events:
none
!important;
}
/* ==============================================================
PERMANENT MODULE LABELS
============================================================== */
html[data-ubz-source-topdeck-r511="1"]
.ubuzima-source-dock__label {
position:
static
!important;
display:
block
!important;
visibility:
visible
!important;
opacity:
1
!important;
width:
100%
!important;
max-width:
100%
!important;
margin:
0
!important;
padding:
0
!important;
color:
#243247
!important;
background:
transparent
!important;
box-shadow:
none
!important;
transform:
none
!important;
font-size:
.49rem
!important;
font-weight:
760
!important;
line-height:
1.05
!important;
text-align:
center
!important;
white-space:
nowrap
!important;
overflow:
hidden
!important;
text-overflow:
ellipsis
!important;
pointer-events:
none
!important;
}
/* ==============================================================
ACTIVE MODULE
============================================================== */
html[data-ubz-source-topdeck-r511="1"]
.ubuzima-source-dock__app.is-active {
border-color:
rgba(37,99,235,.48)
!important;
background:
linear-gradient(
180deg,
rgba(239,246,255,.99),
rgba(219,234,254,.92)
)
!important;
box-shadow:
0 7px 18px rgba(37,99,235,.14),
inset 0 1px 0 rgba(255,255,255,.98)
!important;
}
html[data-ubz-source-topdeck-r511="1"]
.ubuzima-source-dock__app.is-active::after {
bottom:
3px
!important;
width:
5px
!important;
height:
5px
!important;
}
html[data-ubz-source-topdeck-r511="1"]
.dashboard-main {
padding-bottom:
0
!important;
}
/* ==============================================================
TABLET
============================================================== */
@media (max-width: 1100px) {
html[data-ubz-source-topdeck-r511="1"] {
--ubz-r511-topdeck-height:
78px;
--ubz-r511-topdeck-edge:
6px;
}
html[data-ubz-source-topdeck-r511="1"]
.ubuzima-source-dock {
padding:
6px 7px
!important;
border-radius:
17px
!important;
}
html[data-ubz-source-topdeck-r511="1"]
.ubuzima-source-dock__main {
justify-content:
flex-start
!important;
gap:
5px
!important;
}
html[data-ubz-source-topdeck-r511="1"]
.ubuzima-source-dock__app {
flex-basis:
64px
!important;
width:
64px
!important;
min-width:
64px
!important;
max-width:
64px
!important;
height:
62px
!important;
min-height:
62px
!important;
max-height:
62px
!important;
grid-template-rows:
37px auto
!important;
border-radius:
12px
!important;
}
html[data-ubz-source-topdeck-r511="1"]
.ubuzima-source-dock__glass-icon {
width:
34px
!important;
height:
34px
!important;
}
html[data-ubz-source-topdeck-r511="1"]
.ubuzima-source-dock__glass-icon
img {
width:
30px
!important;
height:
30px
!important;
max-width:
30px
!important;
max-height:
30px
!important;
}
}
/* ==============================================================
MOBILE
============================================================== */
@media (max-width: 767px) {
html[data-ubz-source-topdeck-r511="1"] {
--ubz-r511-topdeck-height:
68px;
--ubz-r511-topdeck-edge:
4px;
}
html[data-ubz-source-topdeck-r511="1"]
.ubuzima-source-dock {
padding:
5px
!important;
border-radius:
14px
!important;
}
html[data-ubz-source-topdeck-r511="1"]
.ubuzima-source-dock__main {
gap:
4px
!important;
}
html[data-ubz-source-topdeck-r511="1"]
.ubuzima-source-dock__app {
flex-basis:
55px
!important;
width:
55px
!important;
min-width:
55px
!important;
max-width:
55px
!important;
height:
55px
!important;
min-height:
55px
!important;
max-height:
55px
!important;
grid-template-rows:
32px auto
!important;
padding:
3px
!important;
border-radius:
10px
!important;
}
html[data-ubz-source-topdeck-r511="1"]
.ubuzima-source-dock__glass-icon {
width:
29px
!important;
height:
29px
!important;
}
html[data-ubz-source-topdeck-r511="1"]
.ubuzima-source-dock__glass-icon
img {
width:
26px
!important;
height:
26px
!important;
max-width:
26px
!important;
max-height:
26px
!important;
}
html[data-ubz-source-topdeck-r511="1"]
.ubuzima-source-dock__label {
font-size:
.41rem
!important;
}
}
/* UBZ_GLOBAL_TOP_DECK_R5111_POSITION_FIX */
/* ==============================================================
R5.11.1
The underlying safe-foundation taskbar owns a bottom-position
rule. The element selected as the actual live Deck is marked:
data-ubz-r5111-top-owner="1"
This layer makes that same navigation the Top Deck.
============================================================== */
html[data-ubz-source-topdeck-r5111="1"] {
--ubz-r5111-deck-height:
88px;
--ubz-r5111-deck-edge:
8px;
}
/* ==============================================================
1. ACTUAL LIVE DECK — TOP
============================================================== */
html[data-ubz-source-topdeck-r5111="1"]
[data-ubz-r5111-top-owner="1"] {
position:
fixed
!important;
top:
var(--ubz-r5111-deck-edge)
!important;
right:
var(--ubz-r5111-deck-edge)
!important;
bottom:
auto
!important;
left:
var(--ubz-r5111-deck-edge)
!important;
z-index:
100600
!important;
width:
auto
!important;
min-width:
0
!important;
max-width:
none
!important;
min-height:
var(--ubz-r5111-deck-height)
!important;
height:
auto
!important;
margin:
0
!important;
padding:
8px 10px
!important;
transform:
none
!important;
scale:
1
!important;
display:
flex
!important;
align-items:
center
!important;
justify-content:
center
!important;
visibility:
visible
!important;
opacity:
1
!important;
pointer-events:
auto
!important;
border:
1px solid rgba(255,255,255,.88)
!important;
border-radius:
20px
!important;
background:
linear-gradient(
180deg,
rgba(255,255,255,.95),
rgba(231,239,249,.88)
)
!important;
box-shadow:
0 14px 35px rgba(15,23,42,.15),
inset 0 1px 0 rgba(255,255,255,.98)
!important;
backdrop-filter:
blur(24px)
saturate(1.14)
!important;
-webkit-backdrop-filter:
blur(24px)
saturate(1.14)
!important;
overflow:
visible
!important;
box-sizing:
border-box
!important;
}
/* ==============================================================
2. REAL MODULE GROUP
============================================================== */
html[data-ubz-source-topdeck-r5111="1"]
[data-ubz-r5111-top-owner="1"]
.ubuzima-source-dock
.ubuzima-source-dock__main,
html[data-ubz-source-topdeck-r5111="1"]
[data-ubz-r5111-top-owner="1"]
.ubuzima-source-dock__main,
html[data-ubz-source-topdeck-r5111="1"]
[data-ubz-r5111-top-owner="1"]
.ubuzima-mac-dock__main {
display:
flex
!important;
align-items:
stretch
!important;
justify-content:
center
!important;
flex:
1 1 auto
!important;
width:
100%
!important;
max-width:
100%
!important;
min-width:
0
!important;
gap:
7px
!important;
margin:
0
!important;
padding:
0
!important;
overflow-x:
auto
!important;
overflow-y:
hidden
!important;
scrollbar-width:
thin
!important;
}
/* ==============================================================
3. REMOVE BOTTOM-DECK TASK / RECENT CLUTTER
============================================================== */
html[data-ubz-source-topdeck-r5111="1"]
[data-ubz-r5111-top-owner="1"]
:is(
.ubuzima-source-dock__divider,
.ubuzima-source-dock__tasks,
.ubuzima-source-dock__update,
.ubuzima-source-dock__tip,
.ubuzima-mac-dock__recent
) {
display:
none
!important;
}
/* ==============================================================
4. MODULE BUTTONS WITH VISIBLE LABELS
============================================================== */
html[data-ubz-source-topdeck-r5111="1"]
[data-ubz-r5111-top-owner="1"]
.ubuzima-source-dock__app,
html[data-ubz-source-topdeck-r5111="1"]
[data-ubz-r5111-top-owner="1"]
.ubuzima-mac-dock__app {
position:
relative
!important;
display:
grid
!important;
grid-template-rows:
42px auto
!important;
place-items:
center
!important;
flex:
0 0 72px
!important;
width:
72px
!important;
min-width:
72px
!important;
max-width:
72px
!important;
height:
70px
!important;
min-height:
70px
!important;
max-height:
70px
!important;
gap:
2px
!important;
margin:
0
!important;
padding:
5px 4px 4px
!important;
border:
1px solid rgba(148,163,184,.24)
!important;
border-radius:
14px
!important;
background:
linear-gradient(
180deg,
rgba(255,255,255,.94),
rgba(225,234,245,.82)
)
!important;
box-shadow:
0 5px 14px rgba(15,23,42,.11),
inset 0 1px 0 rgba(255,255,255,.98)
!important;
transform:
none
!important;
scale:
1
!important;
color:
#243247
!important;
overflow:
hidden
!important;
box-sizing:
border-box
!important;
}
/*
* Profile is moved only through flex order.
* Existing click handler remains untouched.
*/
html[data-ubz-source-topdeck-r5111="1"]
[data-ubz-r5111-top-owner="1"]
.ubz-r5111-profile-first {
order:
-100
!important;
}
/*
* Undo legacy font-size:0 / hidden-label deck presentation.
*/
html[data-ubz-source-topdeck-r5111="1"]
[data-ubz-r5111-top-owner="1"]
.ubuzima-source-dock__label,
html[data-ubz-source-topdeck-r5111="1"]
[data-ubz-r5111-top-owner="1"]
.ubuzima-mac-dock__label {
position:
static
!important;
display:
block
!important;
visibility:
visible
!important;
opacity:
1
!important;
width:
100%
!important;
max-width:
100%
!important;
margin:
0
!important;
padding:
0
!important;
color:
#243247
!important;
background:
transparent
!important;
box-shadow:
none
!important;
transform:
none
!important;
font-size:
.48rem
!important;
font-weight:
760
!important;
line-height:
1.05
!important;
text-align:
center
!important;
white-space:
nowrap
!important;
overflow:
hidden
!important;
text-overflow:
ellipsis
!important;
pointer-events:
none
!important;
}
/* ==============================================================
5. CURRENT SHARED HEADER — COMPLETELY OUT OF LAYOUT
============================================================== */
html[data-ubz-source-topdeck-r5111="1"]
.dashboard-header.dashboard-header--fixed.dashboard-header--refined {
display:
none
!important;
visibility:
hidden
!important;
opacity:
0
!important;
height:
0
!important;
min-height:
0
!important;
max-height:
0
!important;
margin:
0
!important;
padding:
0
!important;
border:
0
!important;
overflow:
hidden
!important;
pointer-events:
none
!important;
}
/* Mobile replacements also disappear. */
html[data-ubz-source-topdeck-r5111="1"]
.ubuzima-mobile-topbar,
html[data-ubz-source-topdeck-r5111="1"]
.ubuzima-mobile-bottom-nav {
display:
none
!important;
}
html[data-ubz-source-topdeck-r5111="1"]
body {
padding-bottom:
0
!important;
}
/* ==============================================================
TABLET
============================================================== */
@media (max-width: 1100px) {
html[data-ubz-source-topdeck-r5111="1"] {
--ubz-r5111-deck-height:
78px;
--ubz-r5111-deck-edge:
6px;
}
html[data-ubz-source-topdeck-r5111="1"]
[data-ubz-r5111-top-owner="1"]
:is(
.ubuzima-source-dock__app,
.ubuzima-mac-dock__app
) {
flex-basis:
62px
!important;
width:
62px
!important;
min-width:
62px
!important;
max-width:
62px
!important;
height:
61px
!important;
min-height:
61px
!important;
max-height:
61px
!important;
grid-template-rows:
36px auto
!important;
}
}
/* ==============================================================
MOBILE
============================================================== */
@media (max-width: 767px) {
html[data-ubz-source-topdeck-r5111="1"] {
--ubz-r5111-deck-height:
67px;
--ubz-r5111-deck-edge:
4px;
}
html[data-ubz-source-topdeck-r5111="1"]
[data-ubz-r5111-top-owner="1"] {
padding:
5px
!important;
border-radius:
14px
!important;
}
html[data-ubz-source-topdeck-r5111="1"]
[data-ubz-r5111-top-owner="1"]
:is(
.ubuzima-source-dock__app,
.ubuzima-mac-dock__app
) {
flex-basis:
54px
!important;
width:
54px
!important;
min-width:
54px
!important;
max-width:
54px
!important;
height:
54px
!important;
min-height:
54px
!important;
max-height:
54px
!important;
grid-template-rows:
31px auto
!important;
padding:
3px
!important;
}
html[data-ubz-source-topdeck-r5111="1"]
[data-ubz-r5111-top-owner="1"]
:is(
.ubuzima-source-dock__label,
.ubuzima-mac-dock__label
) {
font-size:
.40rem
!important;
}
}