mirror of
https://github.com/wavetermdev/waveterm.git
synced 2025-01-06 19:18:22 +01:00
e29cb2debe
I'm updating the magnify button to be always visible and animate a transition between being a "Magnify" button and a "Minimize" button. This also cleans up some text shrinking behavior in the block frame header so the end icons are always visible. Also fixes some height discrepancies in the block frame header. Also implements a `prefers-reduced-motion` query for the tilelayout and block frame to ensure transitions are not set if the user does not want them.
298 lines
8.6 KiB
Plaintext
298 lines
8.6 KiB
Plaintext
// Copyright 2024, Command Line Inc.
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
|
|
.block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
min-height: 0;
|
|
border-radius: var(--block-border-radius);
|
|
|
|
.block-frame-icon {
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
.block-content {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
min-height: 0;
|
|
padding: 5px;
|
|
}
|
|
|
|
.block-focuselem {
|
|
height: 0;
|
|
width: 0;
|
|
input {
|
|
width: 0;
|
|
height: 0;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
.block-header-animation-wrap {
|
|
max-height: 0;
|
|
transition:
|
|
max-height 0.3s ease-out,
|
|
opacity 0.3s ease-out;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 30px;
|
|
z-index: var(--zindex-header-hover);
|
|
|
|
&.is-showing {
|
|
max-height: 30px;
|
|
}
|
|
}
|
|
|
|
&.block-preview.block-frame-default .block-frame-default-inner .block-frame-default-header {
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
}
|
|
|
|
&.block-frame-default {
|
|
position: relative;
|
|
padding: 2px;
|
|
|
|
.block-frame-default-inner {
|
|
background-color: var(--block-bg-color);
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: var(--block-border-radius);
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.block-frame-default-header {
|
|
max-height: var(--header-height);
|
|
min-height: var(--header-height);
|
|
display: flex;
|
|
padding: 4px 5px 4px 10px;
|
|
align-items: center;
|
|
gap: 8px;
|
|
align-self: stretch;
|
|
font: var(--header-font);
|
|
border-bottom: 1px solid var(--border-color);
|
|
border-radius: var(--block-border-radius) var(--block-border-radius) 0 0;
|
|
|
|
.block-frame-preicon-button {
|
|
opacity: 0.7;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.block-frame-default-header-iconview {
|
|
display: flex;
|
|
flex-shrink: 1;
|
|
align-items: center;
|
|
gap: 8px;
|
|
overflow-x: hidden;
|
|
|
|
.block-frame-view-icon {
|
|
font-size: var(--header-icon-size);
|
|
opacity: 0.5;
|
|
width: var(--header-icon-width);
|
|
i {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.block-frame-view-type {
|
|
font-weight: 700;
|
|
overflow-x: hidden;
|
|
text-wrap: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.block-frame-blockid {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
.block-frame-text {
|
|
font: var(--fixed-font);
|
|
font-size: 11px;
|
|
opacity: 0.7;
|
|
overflow-x: hidden;
|
|
text-wrap: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.iconbutton {
|
|
cursor: pointer;
|
|
opacity: 0.5;
|
|
align-items: center;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
&.disabled {
|
|
opacity: 0.5;
|
|
|
|
&:hover {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
}
|
|
|
|
.block-frame-textelems-wrapper {
|
|
display: flex;
|
|
flex: 1 100 auto;
|
|
min-width: 0;
|
|
gap: 8px;
|
|
align-items: center;
|
|
overflow-x: hidden;
|
|
|
|
.block-frame-div {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-left: 7px;
|
|
|
|
.input-wrapper {
|
|
flex-grow: 1;
|
|
|
|
input {
|
|
background-color: transparent;
|
|
outline: none;
|
|
border: none;
|
|
color: var(--app-text-color);
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
box-sizing: border-box;
|
|
opacity: 0.7;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.button {
|
|
margin-left: 3px;
|
|
}
|
|
|
|
// webview specific. for refresh button
|
|
.iconbutton {
|
|
height: 100%;
|
|
width: 27px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.block-frame-div-url {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
|
|
input {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.block-frame-end-icons {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
|
|
.iconbutton {
|
|
display: flex;
|
|
width: 24px;
|
|
padding: 4px 6px;
|
|
align-items: center;
|
|
}
|
|
|
|
.block-frame-magnify {
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 0;
|
|
|
|
svg {
|
|
#arrow1,
|
|
#arrow2 {
|
|
fill: var(--main-text-color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.block-frame-preview {
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
width: 100%;
|
|
flex-grow: 1;
|
|
border-bottom-left-radius: var(--block-border-radius);
|
|
border-bottom-right-radius: var(--block-border-radius);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.iconbutton {
|
|
opacity: 0.7;
|
|
font-size: 45px;
|
|
margin: -30px 0 0 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.block-mask {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
border: 2px solid transparent;
|
|
pointer-events: none;
|
|
padding: 2px;
|
|
border-radius: calc(var(--block-border-radius) + 2px);
|
|
z-index: var(--zindex-block-mask-inner);
|
|
|
|
&.is-layoutmode {
|
|
user-select: none;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
&.is-layoutmode .block-mask-inner {
|
|
margin-top: 35px; // TODO fix this magic
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
height: calc(100% - 35px);
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.bignum {
|
|
margin-top: -15%;
|
|
font-size: 60px;
|
|
font-weight: bold;
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.block-focused {
|
|
.block-mask {
|
|
border: 2px solid var(--accent-color);
|
|
}
|
|
|
|
&.block-no-highlight,
|
|
&.block-preview {
|
|
.block-mask {
|
|
border: 2px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|