410 lines
17 KiB
SCSS
410 lines
17 KiB
SCSS
// Fusion Chatter Enhance - Styles
|
|
// Copyright 2024-2026 Nexa Systems Inc.
|
|
// License OPL-1
|
|
//
|
|
// NOTE: The chatter/form flex percentages are NOT set here.
|
|
// They are injected by chatter_panel.js as a <style> tag in <head>
|
|
// from localStorage, so the correct width is applied BEFORE first paint.
|
|
|
|
// =============================================================================
|
|
// FORM LAYOUT FOUNDATION (flex row, no-wrap) -- percentages come from JS
|
|
// =============================================================================
|
|
|
|
@media (min-width: 992px) {
|
|
.o_action_manager > .o_action > .o_form_view .o_form_renderer:not(.fce-chatter-bottom) {
|
|
display: flex !important;
|
|
flex-wrap: nowrap !important;
|
|
|
|
> .o_form_sheet_bg {
|
|
min-width: 0 !important;
|
|
}
|
|
|
|
> .o-mail-ChatterContainer,
|
|
> .o-mail-Form-chatter,
|
|
> .o-aside {
|
|
min-width: 200px !important;
|
|
max-width: 50% !important;
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
.o_action_manager .o_form_sheet_bg {
|
|
max-width: none !important;
|
|
}
|
|
|
|
.o_action_manager .o_form_sheet {
|
|
max-width: none !important;
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// CHATTER BOTTOM LAYOUT (per-user preference)
|
|
// High specificity to override Odoo's flex layout.
|
|
// =============================================================================
|
|
|
|
.o_action_manager .o_form_view .o_form_renderer.fce-chatter-bottom {
|
|
display: block !important;
|
|
flex-direction: column !important;
|
|
flex-wrap: wrap !important;
|
|
|
|
> .o_form_sheet_bg {
|
|
flex: none !important;
|
|
width: 100% !important;
|
|
min-width: 100% !important;
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
> .o-mail-ChatterContainer,
|
|
> .o-mail-Form-chatter,
|
|
> .o-aside {
|
|
flex: none !important;
|
|
width: 100% !important;
|
|
min-width: 100% !important;
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
> .fce-resize-handle {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// CHATTER HIDDEN STATE
|
|
// =============================================================================
|
|
|
|
.fce-chatter-hidden {
|
|
> .o-mail-ChatterContainer,
|
|
> .o-mail-Form-chatter,
|
|
> .o-aside {
|
|
display: none !important;
|
|
}
|
|
|
|
> .o_form_sheet_bg {
|
|
flex: 1 1 100% !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// RESIZE HANDLE
|
|
// Idle: subtle dotted line so users know where to grab.
|
|
// Hover: dots merge into a solid line with a glow pulse.
|
|
// Dragging: bold solid accent bar.
|
|
// =============================================================================
|
|
|
|
.fce-resize-handle {
|
|
width: 7px;
|
|
cursor: col-resize;
|
|
background: transparent;
|
|
position: relative;
|
|
z-index: 10;
|
|
flex-shrink: 0;
|
|
align-self: stretch;
|
|
|
|
// --- idle dotted line (always visible) ---
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 10%;
|
|
bottom: 10%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 2px;
|
|
border: none;
|
|
background-image: repeating-linear-gradient(
|
|
to bottom,
|
|
var(--o-border-color, #ced4da) 0px,
|
|
var(--o-border-color, #ced4da) 3px,
|
|
transparent 3px,
|
|
transparent 8px
|
|
);
|
|
opacity: 0.45;
|
|
border-radius: 1px;
|
|
transition: opacity 0.3s ease, background-image 0.3s ease, width 0.25s ease,
|
|
box-shadow 0.3s ease, top 0.3s ease, bottom 0.3s ease;
|
|
}
|
|
|
|
// --- hover grip dots (centered cluster) ---
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 5px;
|
|
height: 28px;
|
|
opacity: 0;
|
|
border-radius: 3px;
|
|
background-image: radial-gradient(
|
|
circle,
|
|
var(--o-border-color, #adb5bd) 1.2px,
|
|
transparent 1.2px
|
|
);
|
|
background-size: 5px 7px;
|
|
background-repeat: repeat-y;
|
|
background-position: center;
|
|
transition: opacity 0.25s ease, height 0.3s ease, transform 0.25s ease;
|
|
}
|
|
|
|
// --- HOVER STATE ---
|
|
&:hover {
|
|
&::before {
|
|
opacity: 0.85;
|
|
width: 2px;
|
|
top: 4%;
|
|
bottom: 4%;
|
|
background-image: repeating-linear-gradient(
|
|
to bottom,
|
|
var(--o-action, #0077b6) 0px,
|
|
var(--o-action, #0077b6) 3px,
|
|
transparent 3px,
|
|
transparent 8px
|
|
);
|
|
box-shadow: 0 0 6px rgba(0, 119, 182, 0.2);
|
|
}
|
|
|
|
&::after {
|
|
opacity: 1;
|
|
height: 36px;
|
|
}
|
|
}
|
|
|
|
// --- DRAGGING STATE ---
|
|
&.fce-dragging {
|
|
&::before {
|
|
opacity: 1;
|
|
width: 3px;
|
|
top: 0;
|
|
bottom: 0;
|
|
background-image: none;
|
|
background-color: var(--o-action, #0077b6);
|
|
box-shadow: 0 0 10px rgba(0, 119, 182, 0.35);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
&::after {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// TOGGLE BUTTON
|
|
// =============================================================================
|
|
|
|
.fce-toggle-btn {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: -11px;
|
|
transform: translateY(-50%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
z-index: 20;
|
|
width: 22px;
|
|
height: 22px;
|
|
border: none;
|
|
border-radius: 50%;
|
|
background: rgba(0, 0, 0, 0.06);
|
|
backdrop-filter: blur(6px);
|
|
-webkit-backdrop-filter: blur(6px);
|
|
color: var(--o-text-muted, #8b95a2);
|
|
font-size: 10px;
|
|
padding: 0;
|
|
opacity: 0;
|
|
transition: opacity 0.25s ease,
|
|
transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
|
|
background 0.2s ease,
|
|
color 0.2s ease,
|
|
box-shadow 0.2s ease;
|
|
|
|
&:hover {
|
|
background: var(--o-action, #714b67);
|
|
color: #fff;
|
|
transform: translateY(-50%) scale(1.15);
|
|
box-shadow: 0 2px 10px rgba(113, 75, 103, 0.35);
|
|
}
|
|
|
|
&:active {
|
|
transform: translateY(-50%) scale(0.9);
|
|
}
|
|
}
|
|
|
|
.o-mail-ChatterContainer:hover .fce-toggle-btn,
|
|
.o-mail-Form-chatter:hover .fce-toggle-btn,
|
|
.o-aside:hover .fce-toggle-btn {
|
|
opacity: 1;
|
|
}
|
|
|
|
.fce-expand-btn {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 28px;
|
|
height: 56px;
|
|
border-radius: 6px 0 0 6px;
|
|
border: 1px solid var(--o-border-color, #dee2e6);
|
|
border-right: none;
|
|
background: var(--o-bg-card, #fff);
|
|
color: var(--o-text-muted, #6c757d);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
z-index: 20;
|
|
box-shadow: -2px 0 6px rgba(0, 0, 0, 0.08);
|
|
font-size: 14px;
|
|
padding: 0;
|
|
transition: background-color 0.15s ease, color 0.15s ease;
|
|
|
|
&:hover {
|
|
background: var(--o-action, #0077b6);
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// COMPACT CHATTER CONTENT
|
|
// =============================================================================
|
|
|
|
.o-mail-Thread .o-mail-Message {
|
|
padding: 6px 10px !important;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.o-mail-Activity {
|
|
padding: 4px 8px !important;
|
|
}
|
|
|
|
// =============================================================================
|
|
// MESSAGE ACTIONS: HOVER-ONLY
|
|
// Hide the per-message action icons (react, star, edit, menu) by default.
|
|
// Show them as a compact floating bar on message hover.
|
|
// =============================================================================
|
|
|
|
.o-mail-Message {
|
|
position: relative;
|
|
|
|
.o-mail-Message-actions {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
position: absolute !important;
|
|
top: 2px;
|
|
right: 4px;
|
|
z-index: 5;
|
|
background: var(--o-bg-card, #fff);
|
|
border: 1px solid var(--o-border-color, #dee2e6);
|
|
border-radius: 6px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
padding: 2px 4px;
|
|
gap: 2px;
|
|
transition: opacity 0.15s ease;
|
|
}
|
|
|
|
&:hover .o-mail-Message-actions {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// ICON-ONLY TOPBAR BUTTONS
|
|
// =============================================================================
|
|
|
|
.o-mail-Chatter-topbar {
|
|
gap: 4px;
|
|
|
|
.o-mail-Chatter-sendMessage {
|
|
font-size: 0 !important;
|
|
padding: 8px 12px !important;
|
|
min-width: auto;
|
|
line-height: 1;
|
|
|
|
&::before {
|
|
font-family: "Font Awesome 5 Free", FontAwesome;
|
|
font-weight: 900;
|
|
font-size: 15px;
|
|
content: "\f0e0";
|
|
}
|
|
}
|
|
|
|
.o-mail-Chatter-logNote {
|
|
font-size: 0 !important;
|
|
padding: 8px 12px !important;
|
|
min-width: auto;
|
|
line-height: 1;
|
|
|
|
&::before {
|
|
font-family: "Font Awesome 5 Free", FontAwesome;
|
|
font-weight: 900;
|
|
font-size: 15px;
|
|
content: "\f044";
|
|
}
|
|
}
|
|
|
|
button[data-hotkey="shift+w"] {
|
|
> span { display: none !important; }
|
|
padding: 8px 12px !important;
|
|
min-width: auto;
|
|
line-height: 1;
|
|
|
|
&::before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 17px;
|
|
height: 17px;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E");
|
|
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E");
|
|
-webkit-mask-size: contain;
|
|
mask-size: contain;
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
background-color: currentColor;
|
|
}
|
|
}
|
|
|
|
.o-mail-Chatter-activity {
|
|
> span { display: none !important; }
|
|
padding: 8px 12px !important;
|
|
min-width: auto;
|
|
line-height: 1;
|
|
|
|
&::before {
|
|
font-family: "Font Awesome 5 Free", FontAwesome;
|
|
font-weight: 900;
|
|
font-size: 15px;
|
|
content: "\f073";
|
|
}
|
|
}
|
|
|
|
.o-mail-Chatter-messageAuthorizer {
|
|
> span { display: none !important; }
|
|
padding: 8px 12px !important;
|
|
min-width: auto;
|
|
line-height: 1;
|
|
|
|
&::before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 17px;
|
|
height: 17px;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath d='M 25 -0.03125 C 11.839844 -0.03125 10.148438 4.851563 10 5.40625 C 9.988281 5.453125 9.976563 5.484375 9.96875 5.53125 L 7.96875 21.5 C 7.929688 21.828125 8.070313 22.148438 8.3125 22.375 C 8.410156 22.464844 8.503906 22.546875 8.625 22.59375 C 8.363281 23.386719 8.015625 24.71875 7.75 27.03125 C 7.75 27.042969 7.75 27.050781 7.75 27.0625 C 7.304688 27.746094 7 28.65625 7 29.8125 C 7 32.0625 8.582031 33.878906 10.65625 34.40625 C 12.003906 37.898438 13.675781 41.625 15.90625 44.59375 C 18.230469 47.683594 21.238281 50 25 50 C 28.761719 50 31.769531 47.683594 34.09375 44.59375 C 36.324219 41.625 37.996094 37.898438 39.34375 34.40625 C 41.429688 33.886719 43 32.070313 43 29.8125 C 43 28.613281 42.699219 27.6875 42.25 27 C 41.984375 24.707031 41.636719 23.382813 41.375 22.59375 C 41.496094 22.546875 41.589844 22.464844 41.6875 22.375 C 41.929688 22.148438 42.074219 21.828125 42.03125 21.5 L 40.03125 5.53125 C 40.023438 5.484375 40.011719 5.453125 40 5.40625 C 39.851563 4.851563 38.160156 -0.03125 25 -0.03125 Z M 24 6 L 26 6 L 26 10 L 30 10 L 30 12 L 26 12 L 26 16 L 24 16 L 24 12 L 20 12 L 20 10 L 24 10 Z M 25 20.78125 C 29.371094 20.78125 34.777344 21.605469 38 22.15625 L 38 27.65625 L 39.15625 27.46875 C 39.15625 27.46875 39.628906 27.390625 40.0625 27.59375 C 40.496094 27.796875 41 28.15625 41 29.8125 C 41 31.300781 39.898438 32.449219 38.5 32.59375 L 37.90625 32.65625 L 37.6875 33.25 C 36.34375 36.785156 34.621094 40.554688 32.5 43.375 C 30.378906 46.195313 27.941406 48 25 48 C 22.058594 48 19.621094 46.195313 17.5 43.375 C 15.378906 40.554688 13.6875 36.785156 12.34375 33.25 L 12.125 32.65625 L 11.5 32.59375 C 10.097656 32.449219 9 31.300781 9 29.8125 C 9 28.234375 9.484375 27.878906 9.9375 27.65625 C 10.390625 27.433594 10.875 27.46875 10.875 27.46875 L 12 27.59375 L 12 22.15625 C 15.222656 21.605469 20.625 20.78125 25 20.78125 Z'/%3E%3C/svg%3E");
|
|
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath d='M 25 -0.03125 C 11.839844 -0.03125 10.148438 4.851563 10 5.40625 C 9.988281 5.453125 9.976563 5.484375 9.96875 5.53125 L 7.96875 21.5 C 7.929688 21.828125 8.070313 22.148438 8.3125 22.375 C 8.410156 22.464844 8.503906 22.546875 8.625 22.59375 C 8.363281 23.386719 8.015625 24.71875 7.75 27.03125 C 7.75 27.042969 7.75 27.050781 7.75 27.0625 C 7.304688 27.746094 7 28.65625 7 29.8125 C 7 32.0625 8.582031 33.878906 10.65625 34.40625 C 12.003906 37.898438 13.675781 41.625 15.90625 44.59375 C 18.230469 47.683594 21.238281 50 25 50 C 28.761719 50 31.769531 47.683594 34.09375 44.59375 C 36.324219 41.625 37.996094 37.898438 39.34375 34.40625 C 41.429688 33.886719 43 32.070313 43 29.8125 C 43 28.613281 42.699219 27.6875 42.25 27 C 41.984375 24.707031 41.636719 23.382813 41.375 22.59375 C 41.496094 22.546875 41.589844 22.464844 41.6875 22.375 C 41.929688 22.148438 42.074219 21.828125 42.03125 21.5 L 40.03125 5.53125 C 40.023438 5.484375 40.011719 5.453125 40 5.40625 C 39.851563 4.851563 38.160156 -0.03125 25 -0.03125 Z M 24 6 L 26 6 L 26 10 L 30 10 L 30 12 L 26 12 L 26 16 L 24 16 L 24 12 L 20 12 L 20 10 L 24 10 Z M 25 20.78125 C 29.371094 20.78125 34.777344 21.605469 38 22.15625 L 38 27.65625 L 39.15625 27.46875 C 39.15625 27.46875 39.628906 27.390625 40.0625 27.59375 C 40.496094 27.796875 41 28.15625 41 29.8125 C 41 31.300781 39.898438 32.449219 38.5 32.59375 L 37.90625 32.65625 L 37.6875 33.25 C 36.34375 36.785156 34.621094 40.554688 32.5 43.375 C 30.378906 46.195313 27.941406 48 25 48 C 22.058594 48 19.621094 46.195313 17.5 43.375 C 15.378906 40.554688 13.6875 36.785156 12.34375 33.25 L 12.125 32.65625 L 11.5 32.59375 C 10.097656 32.449219 9 31.300781 9 29.8125 C 9 28.234375 9.484375 27.878906 9.9375 27.65625 C 10.390625 27.433594 10.875 27.46875 10.875 27.46875 L 12 27.59375 L 12 22.15625 C 15.222656 21.605469 20.625 20.78125 25 20.78125 Z'/%3E%3C/svg%3E");
|
|
-webkit-mask-size: contain;
|
|
mask-size: contain;
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
background-color: currentColor;
|
|
}
|
|
}
|
|
|
|
.fusion-notes-mic-btn,
|
|
.o-mail-Chatter-voiceNote {
|
|
padding: 8px 12px !important;
|
|
}
|
|
}
|