mirror of
https://github.com/agent0ai/agent-zero.git
synced 2026-05-17 04:01:13 +00:00
330a0c5790
Add a builtin _editor plugin that owns Markdown API/WebSocket sessions, canvas and modal UI, live refresh, tabs, prompt Extras for active-context open files, inline close confirmation, and Close All handling. Route Markdown document artifacts to Editor while keeping Office/Desktop focused on LibreOffice formats, and update Desktop/Office prompts, menus, compatibility shims, and regression coverage.
728 lines
19 KiB
HTML
728 lines
19 KiB
HTML
<html>
|
|
<head>
|
|
<script type="module">
|
|
import { store } from "/plugins/_desktop/webui/desktop-store.js";
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div x-data>
|
|
<template x-if="$store.desktop">
|
|
<div class="office-panel" x-create="$store.desktop.onMount($el, xAttrs($el) || {})" x-destroy="$store.desktop.cleanup()">
|
|
<div class="office-shell">
|
|
<div class="office-document-header" x-show="$store.desktop.hasActiveFile()" style="display: none;">
|
|
<div class="office-document-title" :title="$store.desktop.tabLabel($store.desktop.session)">
|
|
<span class="material-symbols-outlined office-document-icon" aria-hidden="true" x-text="$store.desktop.tabIcon($store.desktop.session)"></span>
|
|
<span class="office-document-name" x-text="$store.desktop.tabTitle($store.desktop.session)"></span>
|
|
<span class="office-document-dirty" x-show="$store.desktop.dirty" aria-hidden="true">*</span>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
class="office-icon-button office-document-save-button"
|
|
title="Save"
|
|
aria-label="Save"
|
|
:class="{ 'is-primary': $store.desktop.dirty }"
|
|
:disabled="$store.desktop.saving"
|
|
@click="$store.desktop.save()"
|
|
>
|
|
<span class="material-symbols-outlined" :class="{ spinning: $store.desktop.saving }" x-text="$store.desktop.saving ? 'progress_activity' : 'save'"></span>
|
|
</button>
|
|
|
|
<div class="office-file-actions" x-data="{ open: false }" @click.outside="open = false" @keydown.escape.window="open = false">
|
|
<button
|
|
type="button"
|
|
class="office-icon-button office-file-menu-button"
|
|
title="File actions"
|
|
aria-label="File actions"
|
|
aria-haspopup="menu"
|
|
:aria-expanded="open.toString()"
|
|
:disabled="$store.desktop.saving"
|
|
@click.stop="open = !open"
|
|
>
|
|
<span class="material-symbols-outlined">more_vert</span>
|
|
</button>
|
|
<div class="office-new-menu office-file-menu" role="menu" x-show="open" @click.stop>
|
|
<button type="button" class="office-new-menu-item" role="menuitem" :disabled="$store.desktop.saving" @click="open = false; $store.desktop.renameActiveFile()">
|
|
<span class="material-symbols-outlined" aria-hidden="true">edit</span>
|
|
<span>Rename</span>
|
|
</button>
|
|
<button type="button" class="office-new-menu-item" role="menuitem" :disabled="$store.desktop.loading" @click="open = false; $store.desktop.closeActiveFile()">
|
|
<span class="material-symbols-outlined" aria-hidden="true">close</span>
|
|
<span>Close File</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="office-state-line" x-show="$store.desktop.message || $store.desktop.error || $store.desktop.loading" style="display: none;">
|
|
<span class="material-symbols-outlined" :class="{ spinning: $store.desktop.loading }" x-text="$store.desktop.loading ? 'progress_activity' : ($store.desktop.error ? 'error' : 'check_circle')"></span>
|
|
<span x-text="$store.desktop.error || $store.desktop.message || 'Working'"></span>
|
|
</div>
|
|
|
|
<div class="office-body">
|
|
<div class="office-editor-wrap" x-show="$store.desktop.session" style="display: none;">
|
|
<div class="office-editor-scroll" :class="{ 'is-desktop': $store.desktop.hasOfficialOffice() }" @click.self="$store.desktop.focusEditor()">
|
|
<template x-if="$store.desktop.hasOfficialOffice()">
|
|
<div
|
|
class="office-desktop-wrap"
|
|
data-office-desktop-host
|
|
x-init="$nextTick(() => $store.desktop.mountDesktopFrameHost($el))"
|
|
>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="office-desktop-empty" x-show="$store.desktop.shouldShowDesktopEmptyState()" style="display: none;">
|
|
<span class="material-symbols-outlined" aria-hidden="true">power_settings_new</span>
|
|
<span class="office-desktop-empty-title">Desktop is shut down</span>
|
|
<button type="button" class="office-icon-button office-command-button" @click="$store.desktop.restartDesktopSession()">
|
|
<span class="material-symbols-outlined" aria-hidden="true">restart_alt</span>
|
|
<span class="office-button-label">Restart Desktop</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<style>
|
|
.office-panel,
|
|
.office-shell {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
background: var(--color-background);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.office-panel {
|
|
container-type: inline-size;
|
|
}
|
|
|
|
.modal-inner.office-modal {
|
|
box-sizing: border-box;
|
|
width: min(1120px, calc(100vw - 32px));
|
|
height: min(820px, calc(100vh - 32px));
|
|
min-width: min(720px, calc(100vw - 16px));
|
|
min-height: min(520px, calc(100vh - 16px));
|
|
max-width: none;
|
|
max-height: none;
|
|
resize: none;
|
|
overflow: hidden;
|
|
will-change: width, height, left, top;
|
|
}
|
|
|
|
.modal-inner.office-modal.is-resizing,
|
|
.modal-inner.office-modal.is-dragging {
|
|
user-select: none;
|
|
}
|
|
|
|
.modal-inner.office-modal.is-focus-mode {
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.modal-inner.office-modal .modal-scroll {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
max-height: none;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
}
|
|
|
|
.modal-inner.office-modal .modal-header {
|
|
grid-template-columns: minmax(0, 1fr) repeat(5, auto);
|
|
}
|
|
|
|
.office-modal-input-shield {
|
|
position: absolute;
|
|
inset: 42px 0 0 0;
|
|
z-index: 4;
|
|
display: none;
|
|
background: transparent;
|
|
}
|
|
|
|
.office-modal-resizer {
|
|
position: absolute;
|
|
z-index: 5;
|
|
display: block;
|
|
touch-action: none;
|
|
}
|
|
|
|
.office-modal-resizer.is-right {
|
|
top: 42px;
|
|
right: -4px;
|
|
bottom: 12px;
|
|
width: 10px;
|
|
cursor: ew-resize;
|
|
}
|
|
|
|
.office-modal-resizer.is-bottom {
|
|
right: 12px;
|
|
bottom: -4px;
|
|
left: 0;
|
|
height: 10px;
|
|
cursor: ns-resize;
|
|
}
|
|
|
|
.office-modal-resizer.is-corner {
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 22px;
|
|
height: 22px;
|
|
cursor: nwse-resize;
|
|
}
|
|
|
|
.office-modal-resizer.is-corner::after {
|
|
content: "";
|
|
position: absolute;
|
|
right: 6px;
|
|
bottom: 6px;
|
|
width: 9px;
|
|
height: 9px;
|
|
border-right: 2px solid color-mix(in srgb, var(--color-text) 42%, transparent);
|
|
border-bottom: 2px solid color-mix(in srgb, var(--color-text) 42%, transparent);
|
|
border-radius: 1px;
|
|
}
|
|
|
|
.modal-inner.office-modal.is-focus-mode .office-modal-resizer {
|
|
display: none;
|
|
}
|
|
|
|
.modal-inner.office-modal .modal-bd.office-modal-body,
|
|
.modal-inner.office-modal .modal-bd.office-modal-body > x-component,
|
|
.modal-inner.office-modal .modal-bd.office-modal-body > x-component > div[x-data],
|
|
.modal-inner.office-modal .modal-bd.office-modal-body > x-component > .office-panel,
|
|
.modal-inner.office-modal .modal-bd.office-modal-body > x-component > div[x-data] > .office-panel {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
min-width: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0;
|
|
}
|
|
|
|
.office-toolbar {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: stretch;
|
|
flex-wrap: nowrap;
|
|
min-height: 0;
|
|
padding: 6px 10px;
|
|
overflow: hidden;
|
|
border-bottom: 1px solid color-mix(in srgb, var(--color-border), transparent 20%);
|
|
background: color-mix(in srgb, var(--color-background), var(--color-panel) 48%);
|
|
}
|
|
|
|
.office-toolbar-row {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 0 0 auto;
|
|
flex-wrap: nowrap;
|
|
gap: 6px;
|
|
width: 100%;
|
|
min-width: 0;
|
|
min-height: 32px;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
.office-tool-group {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
flex: 0 0 auto;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.office-editor-tools {
|
|
gap: 3px;
|
|
}
|
|
|
|
.office-tool-actions {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.office-toolbar-spacer {
|
|
flex: 1 1 16px;
|
|
min-width: 8px;
|
|
}
|
|
|
|
.office-toolbar-divider {
|
|
flex: 0 0 auto;
|
|
width: 1px;
|
|
height: 22px;
|
|
margin-inline: 2px;
|
|
background: color-mix(in srgb, var(--color-border), transparent 18%);
|
|
}
|
|
|
|
.office-document-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-height: 38px;
|
|
padding: 5px 10px 5px 12px;
|
|
border-bottom: 1px solid color-mix(in srgb, var(--color-border), transparent 22%);
|
|
background: color-mix(in srgb, var(--color-panel), var(--color-background) 30%);
|
|
}
|
|
|
|
.office-document-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
min-width: 0;
|
|
flex: 1 1 auto;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.office-document-icon {
|
|
flex: 0 0 auto;
|
|
font-size: 19px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.office-document-name {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 13px;
|
|
font-weight: 750;
|
|
letter-spacing: 0;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.office-document-dirty {
|
|
flex: 0 0 auto;
|
|
color: #2ca58d;
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
line-height: 1;
|
|
}
|
|
|
|
.office-file-actions {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.office-document-save-button,
|
|
.office-file-menu-button {
|
|
width: 30px;
|
|
height: 30px;
|
|
min-width: 30px;
|
|
}
|
|
|
|
.office-header-actions {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.office-header-new-button {
|
|
appearance: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
height: 34px;
|
|
min-height: 34px;
|
|
padding: 0 9px 0 8px;
|
|
border: 1px solid transparent;
|
|
border-radius: 7px;
|
|
background: transparent;
|
|
color: var(--color-text);
|
|
cursor: pointer;
|
|
font: inherit;
|
|
font-size: 12px;
|
|
font-weight: 750;
|
|
letter-spacing: 0;
|
|
line-height: 1;
|
|
opacity: 0.82;
|
|
white-space: nowrap;
|
|
transition: background-color 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;
|
|
}
|
|
|
|
.office-header-new-button:hover,
|
|
.office-header-actions.is-open .office-header-new-button {
|
|
opacity: 1;
|
|
border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
|
|
background: color-mix(in srgb, var(--color-background-hover) 72%, transparent);
|
|
}
|
|
|
|
.office-header-new-button .material-symbols-outlined {
|
|
font-size: 18px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.office-header-new-button .office-new-chevron {
|
|
margin-left: -2px;
|
|
font-size: 16px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.office-new-menu {
|
|
position: absolute;
|
|
top: calc(100% + 6px);
|
|
right: 0;
|
|
z-index: 100;
|
|
min-width: 184px;
|
|
padding: 5px;
|
|
border: 1px solid color-mix(in srgb, var(--color-border), transparent 10%);
|
|
border-radius: 8px;
|
|
background: color-mix(in srgb, var(--color-panel), var(--color-background) 10%);
|
|
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
|
|
}
|
|
|
|
.right-canvas-desktop-actions .office-new-menu {
|
|
z-index: 4000;
|
|
}
|
|
|
|
.office-new-menu[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.office-new-menu-item {
|
|
appearance: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
width: 100%;
|
|
height: 32px;
|
|
padding: 0 8px;
|
|
border: 1px solid transparent;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--color-text);
|
|
cursor: pointer;
|
|
font: inherit;
|
|
font-size: 12px;
|
|
font-weight: 650;
|
|
letter-spacing: 0;
|
|
line-height: 1;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.office-new-menu-item:hover {
|
|
border-color: color-mix(in srgb, var(--color-primary) 22%, transparent);
|
|
background: color-mix(in srgb, var(--color-background-hover) 76%, transparent);
|
|
}
|
|
|
|
.office-new-menu-item:disabled {
|
|
cursor: default;
|
|
opacity: 0.46;
|
|
}
|
|
|
|
.office-new-menu-item .material-symbols-outlined {
|
|
flex: 0 0 auto;
|
|
width: 18px;
|
|
font-size: 18px;
|
|
line-height: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
.office-icon-button,
|
|
.office-tab,
|
|
.office-tab-close {
|
|
border: 1px solid color-mix(in srgb, var(--color-border), transparent 12%);
|
|
border-radius: 8px;
|
|
background: color-mix(in srgb, var(--color-panel), var(--color-background) 16%);
|
|
color: inherit;
|
|
transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
|
|
}
|
|
|
|
.office-icon-button {
|
|
display: inline-grid;
|
|
place-items: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
min-width: 32px;
|
|
padding: 0;
|
|
}
|
|
|
|
.office-command-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
width: auto;
|
|
max-width: 126px;
|
|
padding: 0 8px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.office-command-button .office-button-label {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
}
|
|
|
|
.office-icon-button.is-primary {
|
|
border-color: color-mix(in srgb, #2c7be5, var(--color-border) 20%);
|
|
background: color-mix(in srgb, #2c7be5, var(--color-panel) 82%);
|
|
}
|
|
|
|
.office-icon-button.is-active {
|
|
border-color: color-mix(in srgb, #2ca58d, var(--color-border) 24%);
|
|
background: color-mix(in srgb, #2ca58d, var(--color-panel) 84%);
|
|
}
|
|
|
|
.office-icon-button:hover:not(:disabled),
|
|
.office-tab:hover,
|
|
.office-tab-close:hover {
|
|
border-color: color-mix(in srgb, #2c7be5, var(--color-border) 45%);
|
|
background: color-mix(in srgb, var(--color-panel), #2c7be5 8%);
|
|
}
|
|
|
|
.office-icon-button:disabled {
|
|
cursor: default;
|
|
opacity: 0.42;
|
|
}
|
|
|
|
.office-icon-button .material-symbols-outlined,
|
|
.office-tab-icon {
|
|
font-size: 19px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.office-tabs {
|
|
display: flex;
|
|
gap: 6px;
|
|
min-height: 42px;
|
|
padding: 7px 10px;
|
|
overflow-x: auto;
|
|
border-bottom: 1px solid color-mix(in srgb, var(--color-border), transparent 22%);
|
|
background: color-mix(in srgb, var(--color-panel), var(--color-background) 28%);
|
|
}
|
|
|
|
.office-tab-shell {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 28px;
|
|
align-items: center;
|
|
min-width: 150px;
|
|
max-width: 240px;
|
|
}
|
|
|
|
.office-tab-shell.is-system {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
min-width: 172px;
|
|
}
|
|
|
|
.office-tab,
|
|
.office-tab-close {
|
|
height: 28px;
|
|
min-height: 28px;
|
|
border-radius: 7px;
|
|
}
|
|
|
|
.office-tab {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
padding: 0 8px;
|
|
text-align: left;
|
|
}
|
|
|
|
.office-tab-shell.is-system .office-tab {
|
|
border-radius: 7px;
|
|
}
|
|
|
|
.office-tab-close {
|
|
display: grid;
|
|
place-items: center;
|
|
border-left: 0;
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.office-tab-close .material-symbols-outlined {
|
|
font-size: 17px;
|
|
}
|
|
|
|
.office-tab-shell.is-active .office-tab,
|
|
.office-tab-shell.is-active .office-tab-close {
|
|
border-color: color-mix(in srgb, #2c7be5, var(--color-border) 36%);
|
|
background: color-mix(in srgb, #2c7be5, var(--color-panel) 88%);
|
|
}
|
|
|
|
.office-tab-shell.is-dirty .office-tab-title::after {
|
|
content: " *";
|
|
color: #2ca58d;
|
|
}
|
|
|
|
.office-tab-title {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 12px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.office-state-line {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 0 0 auto;
|
|
gap: 8px;
|
|
width: 100%;
|
|
min-width: 0;
|
|
min-height: 34px;
|
|
box-sizing: border-box;
|
|
padding: 6px 12px;
|
|
border-bottom: 1px solid color-mix(in srgb, var(--color-border), transparent 28%);
|
|
color: var(--color-text-secondary);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.office-state-line > .material-symbols-outlined {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.office-state-line > span:not(.material-symbols-outlined) {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.office-body {
|
|
position: relative;
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
background: var(--color-background);
|
|
}
|
|
|
|
.office-body.is-source {
|
|
background: transparent;
|
|
}
|
|
|
|
.office-editor-wrap {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
.office-editor-scroll {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
padding: 30px 24px;
|
|
}
|
|
|
|
.office-editor-scroll.is-source {
|
|
display: flex;
|
|
overflow: hidden;
|
|
padding: var(--spacing-md);
|
|
background: transparent;
|
|
}
|
|
|
|
.office-editor-scroll.is-desktop {
|
|
display: flex;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
background: #1f2329;
|
|
}
|
|
|
|
.office-desktop-wrap {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
aspect-ratio: auto;
|
|
background: #1f2329;
|
|
}
|
|
|
|
.office-desktop-empty {
|
|
display: grid;
|
|
flex: 1 1 auto;
|
|
place-items: center;
|
|
align-content: center;
|
|
gap: 12px;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
padding: 24px;
|
|
color: var(--color-text-secondary);
|
|
text-align: center;
|
|
}
|
|
|
|
.office-desktop-empty > .material-symbols-outlined {
|
|
font-size: 32px;
|
|
color: color-mix(in srgb, var(--color-text) 68%, transparent);
|
|
}
|
|
|
|
.office-desktop-empty-title {
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.office-desktop-frame {
|
|
flex: 1 1 auto;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 0;
|
|
aspect-ratio: auto;
|
|
border: 0;
|
|
background: #20242a;
|
|
}
|
|
|
|
.office-panel .spinning {
|
|
animation: office-spin 0.8s linear infinite;
|
|
}
|
|
|
|
@keyframes office-spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
@container (max-width: 680px) {
|
|
.office-toolbar {
|
|
padding-inline: 8px;
|
|
}
|
|
|
|
.office-toolbar-row {
|
|
gap: 5px;
|
|
}
|
|
|
|
.office-command-button {
|
|
width: 32px;
|
|
max-width: 32px;
|
|
padding-inline: 0;
|
|
}
|
|
|
|
.office-command-button .office-button-label {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
overflow: hidden;
|
|
clip: rect(0 0 0 0);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
}
|
|
</style>
|
|
</body>
|
|
</html>
|