diff --git a/src/app/common/elements/tooltip.less b/src/app/common/elements/tooltip.less index a0050911f..e51b85152 100644 --- a/src/app/common/elements/tooltip.less +++ b/src/app/common/elements/tooltip.less @@ -1,867 +1,5 @@ @import "../../../app/common/themes/themes.less"; -.info-message { - position: relative; - font-weight: normal; - - color: @term-white; - - .message-content { - position: absolute; - display: none; - flex-direction: row; - align-items: flex-start; - top: -6px; - left: -6px; - padding: 5px; - border: 1px solid #777; - background-color: #444; - border-radius: 5px; - z-index: 5; - overflow: hidden; - - .icon { - display: inline; - width: 1em; - height: 1em; - fill: @base-color; - padding-top: 0.2em; - } - - .info-icon { - margin-right: 5px; - flex-shrink: 0; - } - - .info-children { - flex: 1 0 0; - overflow: hidden; - } - } - - &:hover { - .message-content { - display: flex; - } - } -} - -.cmdstr-code { - position: relative; - display: flex; - flex-direction: row; - padding: 0px 10px 0px 0; - - &.is-large { - .use-button { - height: 28px; - width: 28px; - } - - .code-div code { - } - } - - &.limit-height .code-div { - max-height: 58px; - } - - &.limit-height.is-large .code-div { - max-height: 68px; - } - - .use-button { - flex-grow: 0; - padding: 3px; - border-radius: 3px 0 0 3px; - height: 22px; - width: 22px; - display: flex; - align-items: center; - justify-content: center; - align-self: flex-start; - cursor: pointer; - } - - .code-div { - background-color: @term-black; - display: flex; - flex-direction: row; - min-width: 100px; - overflow: auto; - border-left: 1px solid #777; - - code { - flex-shrink: 0; - min-width: 100px; - color: @term-white; - white-space: pre; - padding: 2px 8px 2px 8px; - background-color: @term-black; - font-size: 1em; - font-family: @fixed-font; - } - } - - .copy-control { - width: 0; - position: relative; - display: block; - visibility: hidden; - - .inner-copy { - position: absolute; - bottom: -1px; - right: -20px; - - padding: 2px; - padding-left: 4px; - cursor: pointer; - width: 20px; - - &:hover { - color: @term-white; - } - } - } - - &:hover .copy-control { - visibility: visible !important; - } -} - -.checkbox-toggle { - position: relative; - display: inline-block; - width: 40px; - height: 22px; - - input { - opacity: 0; - width: 0; - height: 0; - } - - .slider { - position: absolute; - content: ""; - cursor: pointer; - top: 0; - bottom: 0; - left: 0; - right: 0; - background-color: #333; - transition: 0.5s; - border-radius: 33px; - } - - .slider:before { - position: absolute; - content: ""; - height: 18px; - width: 18px; - left: 2px; - bottom: 2px; - background-color: @term-white; - transition: 0.5s; - border-radius: 50%; - } - - input:checked + .slider { - background-color: @term-green; - } - - input:checked + .slider:before { - transform: translateX(18px); - } -} - -.checkbox { - display: flex; - - input[type="checkbox"] { - height: 0; - width: 0; - } - - input[type="checkbox"] + label { - position: relative; - display: flex; - align-items: center; - color: @term-bright-white; - transition: color 250ms cubic-bezier(0.4, 0, 0.23, 1); - } - input[type="checkbox"] + label > span { - display: flex; - justify-content: center; - align-items: center; - margin-right: 10px; - width: 20px; - height: 20px; - background: transparent; - border: 2px solid #9e9e9e; - border-radius: 2px; - cursor: pointer; - transition: all 250ms cubic-bezier(0.4, 0, 0.23, 1); - } - - input[type="checkbox"] + label:hover > span, - input[type="checkbox"]:focus + label > span { - background: rgba(255, 255, 255, 0.1); - } - input[type="checkbox"]:checked + label > ins { - height: 100%; - } - - input[type="checkbox"]:checked + label > span { - border: 10px solid @term-green; - } - input[type="checkbox"]:checked + label > span:before { - content: ""; - position: absolute; - top: -2px; - left: 3px; - width: 7px; - height: 12px; - border-right: 2px solid #fff; - border-bottom: 2px solid #fff; - transform: rotate(45deg); - transform-origin: 0% 100%; - animation: checkbox-check 500ms cubic-bezier(0.4, 0, 0.23, 1); - } - - @keyframes checkbox-check { - 0% { - opacity: 0; - } - 33% { - opacity: 0.5; - } - 100% { - opacity: 1; - } - } -} - -.button.is-wave-green { - background-color: #222; - color: @term-white; - - &:hover { - background-color: @term-green; - color: @term-bright-white; - } -} - -.button.is-plain, -.button.is-prompt-cancel { - background-color: #222; - color: @term-white; - - &:hover { - background-color: #666; - color: @term-bright-white; - } -} - -.button.is-prompt-danger { - background-color: #222; - color: @term-white; - - &:hover { - background-color: @tab-red; - color: @term-bright-white; - } -} - -.button.is-inline-height { - height: 22px; -} - -.button input.confirm-checkbox { - margin-right: 5px; -} - -.cmd-hints { - display: flex; - flex-direction: row; - - .hint-item { - padding: 0px 5px 0px 5px; - border-radius: 0 0 3px 3px; - cursor: pointer; - } - - .hint-item:not(:last-child) { - margin-right: 8px; - } - - .hint-item.color-green { - color: @term-black; - background-color: @tab-green; - - &:hover { - color: @term-white; - } - } - - .hint-item.color-nohover-green { - color: @term-black; - background-color: @tab-green; - cursor: default; - } - - .hint-item.color-white { - color: @term-black; - background-color: @term-white; - - &:hover { - background-color: @term-bright-white; - } - } - - .hint-item.color-nohover-white { - color: @term-black; - background-color: @term-white; - cursor: default; - } - - .hint-item.color-blue { - color: @term-black; - background-color: @tab-blue; - - &:hover { - color: @term-white; - } - } - - .hint-item.color-nohover-blue { - color: @term-black; - background-color: @tab-blue; - cursor: default; - } -} - -.markdown { - color: @term-white; - margin-bottom: 10px; - font-family: @markdown-font; - font-size: 14px; - - code { - background-color: @markdown-highlight; - color: @term-white; - font-family: @terminal-font; - border-radius: 4px; - } - - code.inline { - padding-top: 0; - padding-bottom: 0; - font-family: @terminal-font; - } - - .title { - color: @term-white; - margin-top: 16px; - margin-bottom: 8px; - } - - strong { - color: @term-white; - } - - a { - color: #32afff; - } - - table { - tr th { - color: @term-white; - } - } - - ul { - list-style-type: disc; - list-style-position: outside; - margin-left: 16px; - } - - ol { - list-style-position: outside; - margin-left: 19px; - } - - blockquote { - margin: 4px 10px 4px 10px; - border-radius: 3px; - background-color: @markdown-highlight; - padding: 2px 4px 2px 6px; - } - - pre { - background-color: @markdown-highlight; - margin: 4px 10px 4px 10px; - padding: 6px 6px 6px 10px; - border-radius: 4px; - } - - pre.selected { - outline: 2px solid @term-green; - } - - .title.is-1 { - border-bottom: 1px solid #777; - padding-bottom: 6px; - } - .title.is-2 { - border-bottom: 1px solid #777; - padding-bottom: 6px; - } - .title.is-3 { - } - .title.is-4 { - } - .title.is-5 { - } - .title.is-6 { - } -} - -.markdown > *:first-child { - margin-top: 0 !important; -} - -.copied-indicator { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: @term-white; - opacity: 0; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - pointer-events: none; - animation-name: fade-in-out; - animation-duration: 0.3s; -} - -.loading-spinner { - display: inline-block; - position: absolute; - top: calc(40% - 8px); - left: 30px; - width: 20px; - height: 20px; - - div { - box-sizing: border-box; - display: block; - position: absolute; - width: 16px; - height: 16px; - margin: 2px; - border: 2px solid #777; - border-radius: 50%; - animation: loader-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; - border-color: #777 transparent transparent transparent; - } - - div:nth-child(1) { - animation-delay: -0.45s; - } - - div:nth-child(2) { - animation-delay: -0.3s; - } - - div:nth-child(3) { - animation-delay: -0.15s; - } -} - -#measure { - position: absolute; - z-index: -1; - top: -5000px; - - .pre { - white-space: pre; - } -} - -.text-button { - color: @term-white; - cursor: pointer; - background-color: #171717; - outline: 2px solid #171717; - - &:hover, - &:focus { - color: @term-white; - background-color: #333; - outline: 2px solid #333; - } - - &.connect-button { - color: @term-green; - &:hover { - color: @term-green; - } - } - - &.disconnect-button { - color: @term-red; - &:hover { - color: @term-red; - } - } - - &.success-button { - color: @term-green; - &:hover { - color: @term-green; - } - } - - &.error-button { - color: @term-red; - &:hover { - color: @term-red; - } - } - - &.grey-button { - color: #666; - &:hover { - color: #666; - } - } - - &.disabled-button { - &:hover, - &:focus { - outline: none; - background-color: #171717; - } - cursor: default; - } -} - -.focus-indicator { - position: absolute; - display: none; - width: 5px; - border-radius: 3px; - height: calc(100% - 20px); - top: 10px; - left: 0; - z-index: 8; - - &.selected { - display: block; - background-color: #666 !important; - } - - &.active, - &.active.selected { - display: block; - background-color: @tab-blue !important; - } - - &.active.selected.fg-focus { - display: block; - background-color: @tab-green !important; - } -} - -.focus-parent:hover .focus-indicator { - display: block; - background-color: #222; -} - -.remote-status { - width: 1em; - height: 1em; - display: inline; - fill: #c4a000; - - &.status-init, - &.status-disconnected { - fill: #c4a000; - } - - &.status-connecting { - fill: #c4a000; - } - - &.status-connected { - fill: #4e9a06; - } - - &.status-error { - fill: #cc0000; - } -} - -.wave-dropdown { - position: relative; - height: 44px; - min-width: 150px; - width: 100%; - border: 1px solid var(--element-separator, rgba(241, 246, 243, 0.15)); - border-radius: 6px; - background: var(--element-hover-2, rgba(255, 255, 255, 0.06)); - box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5), - 0px 0px 0.5px 0px rgba(255, 255, 255, 0.5) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset; - - &.no-label { - height: 34px; - } - - &-label { - position: absolute; - left: 16px; - top: 16px; - font-size: 12.5px; - transition: all 0.3s; - color: @term-white; - line-height: 10px; - - &.float { - font-size: 10px; - top: 5px; - } - - &.offset-left { - left: 42px; - } - } - - &-display { - position: absolute; - left: 16px; - bottom: 5px; - - &.offset-left { - left: 42px; - } - } - - &-arrow { - position: absolute; - right: 16px; - top: 50%; - transform: translateY(-50%); - transition: transform 0.3s; - pointer-events: none; - - i { - font-size: 14px; - } - } - - &-arrow-rotate { - transform: translateY(-50%) rotate(180deg); // Rotate the arrow when dropdown is open - } - - &-item { - display: flex; - min-width: 120px; - padding: 5px 8px; - justify-content: space-between; - align-items: center; - align-self: stretch; - border-radius: 6px; - - &-highlighted, - &:hover { - background: var(--element-active, rgba(241, 246, 243, 0.08)); - box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5), - 0px 0px 0.5px 0px rgba(255, 255, 255, 0.5) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset; - } - } - - .wave-input-decoration { - position: absolute; - top: 0; - height: 100%; - } - - .wave-input-decoration.end-position { - margin-right: 44px; - right: 0; - } - - .wave-input-decoration.start-position { - left: 0; - } - - &-error { - border-color: @term-red; - } - - &:focus { - border-color: @term-green; - } -} - -.wave-dropdown-menu { - position: absolute; - top: 100%; - left: 0; - right: 0; - margin-top: 2px; - max-height: 200px; - overflow-y: auto; - padding: 6px; - flex-direction: column; - align-items: flex-start; - gap: 4px; - border-radius: 6px; - background: var(--olive-dark-1, #151715); - box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 3px 8px 0px rgba(0, 0, 0, 0.35), 0px 0px 0.5px 0px #fff inset, - 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset; - animation-fill-mode: forwards; - z-index: 1000; -} - -.wave-dropdown-menu-close { - z-index: 0; - animation: waveDropdownMenuFadeOut 0.3s ease-out; -} - -.wave-textfield.wave-password { - .wave-textfield-inner-eye { - position: absolute; - right: 16px; - top: 52%; - transform: translateY(-50%); - transition: transform 0.3s; - - i { - font-size: 14px; - } - } - - .wave-input-decoration { - position: absolute; - top: 0; - height: 100%; - } - - .wave-input-decoration.end-position { - margin-right: 47px; - right: 0; - } - - .wave-input-decoration.start-position { - left: 0; - } -} - -.wave-textfield { - display: flex; - align-items: center; - border-radius: 6px; - position: relative; - height: 44px; - min-width: 412px; - gap: 6px; - border: 1px solid var(--element-separator, rgba(241, 246, 243, 0.15)); - background: var(--element-hover-2, rgba(255, 255, 255, 0.06)); - box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5), - 0px 0px 0.5px 0px rgba(255, 255, 255, 0.5) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset; - - &:hover { - cursor: text; - } - - &.focused { - border-color: @term-green; - } - - &.disabled { - opacity: 0.75; - } - - &.error { - border-color: @term-red; - } - - &-inner { - display: flex; - align-items: flex-end; - height: 100%; - position: relative; - flex-grow: 1; - - &-label { - position: absolute; - left: 16px; - top: 16px; - font-size: 12.5px; - transition: all 0.3s; - color: @text-secondary; - line-height: 10px; - - &.float { - font-size: 10px; - top: 5px; - } - - &.offset-left { - left: 0; - } - } - - &-input { - width: 100%; - height: 30px; - border: none; - padding: 5px 0 5px 16px; - font-size: 16px; - outline: none; - background-color: transparent; - color: @term-bright-white; - line-height: 20px; - - &.offset-left { - padding: 5px 16px 5px 0; - } - } - } - - &.no-label { - height: 34px; - - input { - height: 32px; - } - } -} - -.wave-input-decoration { - display: flex; - align-items: center; - justify-content: center; - - i { - font-size: 13px; - } -} - -.wave-input-decoration.start-position { - margin: 0 4px 0 16px; -} - -.wave-input-decoration.end-position { - margin: 0 16px 0 8px; -} - .wave-tooltip { display: flex; position: absolute; @@ -883,271 +21,3 @@ padding-top: 0.2em; } } - -.inline-edit { - .icon { - display: inline; - width: 12px; - height: 12px; - margin-left: 1em; - vertical-align: middle; - font-size: 14px; - } - - .button { - padding-top: 0; - } - - &.edit-not-active { - cursor: pointer; - - i.fa-pen { - margin-left: 5px; - } - - &:hover { - text-decoration: underline; - text-decoration-style: dotted; - } - } - - &.edit-active { - input.input { - padding: 0; - height: 20px; - } - - .button { - height: 20px; - } - } -} - -.wave-button { - background: none; - color: inherit; - border: none; - font: inherit; - cursor: pointer; - outline: inherit; - - display: flex; - padding: 6px 16px; - align-items: center; - gap: 4px; - border-radius: 6px; - height: auto; - - &:hover { - color: @term-white; - } - - i { - fill: rgba(255, 255, 255, 0.12); - } - - &.primary { - color: @term-green; - background: none; - - i { - fill: @term-green; - } - - &.solid { - color: @term-bright-white; - background: @term-green; - box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5), - 0px 0px 0.5px 0px rgba(255, 255, 255, 0.8) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.6) inset; - - i { - fill: @term-white; - } - } - - &.outlined { - border: 1px solid @term-green; - } - - &.ghost { - // Styles for .ghost are already defined above - } - - &:hover { - color: @term-bright-white; - } - } - - &.secondary { - color: @term-white; - background: none; - - &.solid { - background: rgba(255, 255, 255, 0.09); - box-shadow: none; - } - - &.outlined { - border: 1px solid rgba(255, 255, 255, 0.09); - } - - &.ghost { - padding: 6px 10px; - - i { - fill: @term-green; - } - } - } - - &.color-yellow { - &.solid { - border-color: @warning-yellow; - background-color: mix(@warning-yellow, @term-white, 50%); - box-shadow: none; - } - - &.outlined { - color: @warning-yellow; - border-color: @warning-yellow; - &:hover { - color: @term-white; - border-color: @term-white; - } - } - - &.ghost { - } - } - - &.color-red { - &.solid { - border-color: @term-red; - background-color: mix(@term-red, @term-white, 50%); - box-shadow: none; - } - - &.outlined { - color: @term-red; - border-color: @term-red; - } - - &.ghost { - } - } - - &.disabled { - opacity: 0.5; - } - - &.link-button { - cursor: pointer; - } -} - -.wave-status-container { - display: flex; - align-items: center; - - .dot { - height: 6px; - width: 6px; - border-radius: 50%; - display: inline-block; - margin-right: 8px; - } - - .dot.green { - background-color: @status-connected; - } - - .dot.red { - background-color: @status-error; - } - - .dot.gray { - background-color: @status-disconnected; - } - - .dot.yellow { - background-color: @status-connecting; - } -} - -.wave-modal-container { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - display: flex; - justify-content: center; - align-items: center; - z-index: 500; - - .wave-modal-backdrop { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: rgba(21, 23, 21, 0.7); - z-index: 1; - } -} - -.wave-modal { - z-index: 2; - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 16px; - border-radius: 10px; - background: #151715; - box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.35), 0px 10px 24px 0px rgba(0, 0, 0, 0.45), - 0px 0px 0.5px 0px rgba(255, 255, 255, 0.5) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset; - - .wave-modal-content { - display: flex; - flex-direction: column; - align-items: center; - width: 100%; - - .wave-modal-header { - width: 100%; - display: flex; - align-items: center; - padding: 12px 14px 12px 20px; - justify-content: space-between; - line-height: 20px; - border-bottom: 1px solid rgba(250, 250, 250, 0.1); - - .wave-modal-title { - color: #eceeec; - font-size: 15px; - } - - button { - i { - font-size: 18px; - } - } - } - - .wave-modal-body { - width: 100%; - padding: 0px 20px; - } - - .wave-modal-footer { - display: flex; - justify-content: flex-end; - width: 100%; - padding: 0 20px 20px; - - button:last-child { - margin-left: 8px; - } - } - } -}