waveterm/frontend/app/block/block.less

285 lines
8.1 KiB
Plaintext
Raw Normal View History

// 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%;
2024-05-13 23:48:59 +02:00
overflow: hidden;
2024-05-14 00:10:31 +02:00
min-height: 0;
position: relative;
2024-07-06 00:47:35 +02:00
border-radius: 8px;
2024-06-22 00:15:38 +02:00
.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;
}
}
2024-07-06 00:47:35 +02:00
&.block-frame-default {
2024-07-09 07:31:38 +02:00
position: relative;
padding: 2px;
.block-frame-default-inner {
background-color: var(--block-bg-color);
2024-07-09 07:31:38 +02:00
width: 100%;
height: 100%;
border-radius: 8px;
2024-07-06 00:47:35 +02:00
display: flex;
2024-07-09 07:31:38 +02:00
flex-direction: column;
.block-frame-default-header {
2024-07-06 00:47:35 +02:00
display: flex;
2024-07-09 07:31:38 +02:00
height: 34px;
padding: 4px 5px 4px 10px;
2024-07-06 00:47:35 +02:00
align-items: center;
gap: 8px;
2024-07-09 07:31:38 +02:00
align-self: stretch;
font: var(--header-font);
2024-07-12 21:12:34 +02:00
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
2024-07-09 07:31:38 +02:00
border-radius: 8px 8px 0 0;
2024-07-06 00:47:35 +02:00
.block-frame-preicon-button {
opacity: 0.7;
cursor: pointer;
&:hover {
opacity: 1;
}
}
2024-07-09 07:31:38 +02:00
.block-frame-default-header-iconview {
display: flex;
align-items: center;
gap: 8px;
color: var(--main-text-color);
.block-frame-view-icon {
font-size: var(--header-icon-size);
opacity: 0.5;
width: var(--header-icon-width);
i {
margin-right: 0;
}
2024-07-06 00:47:35 +02:00
}
2024-07-09 07:31:38 +02:00
.block-frame-view-type {
line-height: 12px;
font-weight: 700;
}
2024-07-06 00:47:35 +02:00
2024-07-09 07:31:38 +02:00
.block-frame-blockid {
opacity: 0.5;
}
2024-07-06 00:47:35 +02:00
}
2024-07-09 07:31:38 +02:00
.block-frame-text {
font: var(--fixed-font);
font-size: 11px;
opacity: 0.7;
}
2024-07-15 18:40:28 +02:00
.block-frame-textelems-wrapper {
display: flex;
flex-grow: 1;
gap: 8px;
height: 20px;
align-items: center;
.block-frame-header-iconbutton {
cursor: pointer;
opacity: 0.5;
&:hover {
opacity: 1;
}
&.disabled {
opacity: 0.5;
&:hover {
opacity: 0.5;
}
}
}
.block-frame-div {
display: flex;
width: 100%;
height: 100%;
justify-content: space-between;
border-radius: 3px;
align-items: center;
padding-left: 7px;
&.hovered {
background: rgba(255, 255, 255, 0.2);
cursor: text;
transition: background 0.2s ease;
}
&.focused {
outline: 2px solid rgba(88, 193, 66, 0.5);
background: #181818;
}
.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;
2024-07-18 08:41:33 +02:00
opacity: 0.7;
font-weight: 500;
2024-07-15 18:40:28 +02:00
}
}
2024-07-18 08:41:33 +02:00
.button {
margin-left: 3px;
}
// webview specific. for refresh button
2024-07-15 18:40:28 +02:00
.block-frame-header-iconbutton {
height: 100%;
width: 27px;
display: flex;
align-items: center;
justify-content: center;
}
}
2024-07-18 08:41:33 +02:00
.block-frame-div-url {
background: rgba(255, 255, 255, 0.1);
input {
opacity: 1;
}
}
2024-07-15 18:40:28 +02:00
}
2024-07-09 07:31:38 +02:00
.block-frame-end-icons {
2024-07-06 00:47:35 +02:00
display: flex;
align-items: center;
2024-07-09 07:31:38 +02:00
.block-frame-endicon-button {
opacity: 0.7;
cursor: pointer;
padding: 4px 6px;
&:hover {
opacity: 1;
}
2024-07-06 00:47:35 +02:00
}
2024-07-09 07:31:38 +02:00
.block-frame-settings {
display: flex;
width: 24px;
padding: 6px;
justify-content: center;
align-items: center;
opacity: 0.5;
cursor: pointer;
&:hover {
opacity: 1;
}
}
2024-07-06 00:47:35 +02:00
2024-07-09 07:31:38 +02:00
.block-frame-default-close {
display: flex;
justify-content: center;
align-items: center;
opacity: 0.5;
font-size: 11px;
width: 24px;
padding: 4px 6px;
cursor: pointer;
&:hover {
opacity: 1;
}
2024-07-06 00:47:35 +02:00
}
}
}
2024-07-09 07:31:38 +02:00
.block-frame-preview {
background-color: rgba(0, 0, 0, 0.7);
width: 100%;
flex-grow: 1;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
2024-07-06 00:47:35 +02:00
}
2024-07-09 07:31:38 +02:00
.block-mask {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid transparent;
pointer-events: none;
padding: 2px;
border-radius: 8px;
}
&.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);
}
}
}
}
}