waveterm/frontend/app/modals/tos.less
2024-09-25 15:52:12 -07:00

247 lines
7.5 KiB
Plaintext

// Copyright 2024, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0
.tos-modal {
width: 560px;
border-radius: 10px;
padding: 0;
.modal-inner {
display: flex;
flex-direction: column;
overflow-y: auto;
padding: 30px;
width: 100%;
header.tos-header {
flex-direction: column;
gap: 8px;
border-bottom: none;
padding: 0;
margin-bottom: 36px;
width: 100%;
.logo {
margin-bottom: 10px;
display: flex;
justify-content: center;
}
.modal-title {
text-align: center;
font-size: 25px;
font-weight: 400;
color: var(--main-text-color);
}
.modal-subtitle {
color: var(--main-text-color);
text-align: center;
font-style: normal;
font-weight: 300;
line-height: 20px;
}
}
.tos-content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 32px;
width: 100%;
margin-bottom: 0;
margin-bottom: 20px;
.check-toggle-wrapper .toggle-label {
color: var(--secondary-text-color);
}
.tips-wrapper {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
.tips-section {
display: flex;
flex-direction: column;
flex-grow: 1;
gap: 5px;
.tip-section-header {
font-weight: bold;
margin-bottom: 5px;
margin-top: 10px;
&:first-child {
margin-top: 0;
}
}
.tip {
display: flex;
flex-direction: row;
align-items: center;
.keybinding2 {
font: var(--fixed-font);
background-color: var(--highlight-bg-color);
color: var(--main-text-color);
padding: 2px 8px;
border-radius: 4px;
}
.keybinding-group {
display: flex;
flex-direction: row;
align-items: center;
margin-left: 5px;
margin-right: 5px;
&:first-child {
margin-left: 0;
}
}
.keybinding {
display: inline-block;
padding: 0.1em 0.4em;
margin: 0 0.1em;
font-family: "SF Pro Text", "Segoe UI", sans-serif;
font-size: 0.85em;
color: #e0e0e0;
background-color: #333;
border-radius: 4px;
border: 1px solid #444;
box-shadow: none;
}
.keybinding3 {
color: black;
display: inline-block;
padding: 0.2em 0.4em;
min-width: 24px;
height: 22px;
margin: 0 0.1em;
font-family: "SF Pro Text", "Segoe UI", sans-serif;
font-size: 0.9em;
border: 1px solid #aaa;
border-radius: 4px;
background-color: #ddd;
color: var(--invert-text-color);
box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.1);
text-align: center;
}
.icon-wrap {
background-color: var(--highlight-bg-color);
padding: 2px;
color: var(--secondary-text-color);
font-size: 12px;
border-radius: 2px;
margin-right: 5px;
svg {
position: relative;
top: 3px;
left: 1px;
height: 13px;
#arrow1,
#arrow2 {
fill: var(--main-text-color);
}
}
}
}
}
}
.content-section {
display: flex;
width: 100%;
align-items: center;
gap: 18px;
.icon-wrapper {
.icon {
font-size: 32px;
color: rgba(255, 255, 255, 0.5);
}
.fa-people-group {
font-size: 25px;
}
}
.content-section-inner {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
flex: 1 0 0;
.content-section-title {
color: var(--main-text-color);
font-style: normal;
line-height: 18px;
font-size: 16px;
margin-bottom: 5px;
}
.content-section-text {
color: var(--secondary-text-color);
font-style: normal;
line-height: 20px;
b {
color: var(--main-text-color);
}
}
.content-section-field {
display: flex;
align-items: center;
gap: 8px;
}
.check-toggle-wrapper {
margin-top: 5px;
label {
font-size: 13px;
}
}
}
}
}
footer {
.content-section-text {
text-align: center;
color: rgba(255, 255, 255, 0.7);
font-size: 11px;
}
.button-wrapper {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
button {
font-size: 14px;
}
button:not(:first-child) {
margin-left: 10px;
}
button.disabled-button {
cursor: default;
}
}
}
}
}