fleet/website/assets/styles/pages/admin/query-generator.less
Eric b2ec6d8c20
Website: Update login and register page redirects for logged in users. (#34900)
Related to: https://github.com/fleetdm/fleet/issues/33798

Changes:
- Updated the redirects for logged-in users for the /login and /register
pages to take users to the /try page.
- Updated the primary button color in the query generator and the
landing page generator stylesheet template
2025-10-28 17:44:22 -05:00

311 lines
7.2 KiB
Text
Vendored

// lesshint-disable spaceAroundComma
#query-generator {
h2 {
color: #192147;
font-size: 32px;
font-style: normal;
font-weight: 800;
line-height: 1.2;
margin-bottom: 16px;
}
h3 {
color: #192147;
font-size: 20px;
font-style: normal;
font-weight: 800;
line-height: 1.2;
margin-bottom: 16px;
}
p {
color: @core-fleet-black-75;
}
label {
font-weight: 700;
color: #192147;
font-size: 14px;
line-height: 1.2;
margin-bottom: 16px;
}
[purpose='page-container'] {
padding: 64px;
}
[purpose='page-content'] {
max-width: 800px;
margin: auto;
}
[purpose='page-headline'] {
margin-bottom: 32px;
}
[purpose='query-form'] {
padding-bottom: 32px;
}
[purpose='ai-note'] {
padding-bottom: 32px;
p {
margin-bottom: 0px;
color: #515774;
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}
}
[purpose='caveats'] {
margin-bottom: 32px;
li {
color: #515774;
font-family: Inter;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 160% */
}
}
[purpose='form'] {
margin-bottom: 16px;
textarea {
&::placeholder {
font-style: italic;
}
border-radius: 6px;
border: 1px solid var(--Fleet-Black-25, #C5C7D1);
background: var(--White, #FFF);
}
}
[purpose='submit-button'], [purpose='reset-button'] {
display: flex;
width: 150px;
font-size: 14px;
line-height: 1.5;
margin-top: 16px;
padding: 16px 32px;
justify-content: center;
align-items: center;
gap: 4px;
border-radius: 8px;
background: @core-vibrant-green;
}
[purpose='note'] {
display: flex;
padding: 16px 24px;
align-items: center;
gap: 8px;
align-self: stretch;
border-radius: 8px;
background: #F4F4FF;
margin-bottom: 32px;
img {
width: 16px;
height: 16px;
}
p {
margin-bottom: 0px;
color: #515774;
font-size: 14px;
font-weight: 400;
line-height: 150%;
}
}
[purpose='codeblock'] {
margin-top: 24px;
[purpose='codeblock-tabs'] {
background: var(--UI-Fleet-Black-5, #F4F4F6);
border-top: 1px solid var(--UI-Fleet-Black-10, #E2E4EA);
border-radius: 4px 4px 0px 0px;
height: 35px;
display: flex;
flex-direction: row;
align-items: flex-end;
}
[purpose='codeblock-tab'] {
border-bottom: 1px solid var(--UI-Fleet-Black-10, #E2E4EA);
cursor: pointer;
height: 35px;
padding: 8px 24px;
color: #000;
display: flex;
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 18px; /* 150% */
[purpose='new-badge'] {
color: #FFF;
font-family: 'Source Code Pro';
font-size: 10px;
font-style: normal;
font-weight: 600;
line-height: 11px; /* 110% */
display: inline-flex;
padding: 2px 8px;
justify-content: center;
align-items: center;
margin-left: 10px;
border-radius: var(--spacing-half, 4px);
border: 1px solid var(--UI-Fleet-Black-50, #8B8FA2);
background: var(--UI-Fleet-Black-50, #8B8FA2);
height: 19px;
}
&.selected {
[purpose='new-badge'] {
height: 19px;
border-radius: var(--spacing-half, 4px);
border: 1px solid var(--color-brand-blue, #0587FF);
background: var(--color-brand-blue, #0587FF);
}
background: #F9FAFC;
border-radius: 4px 4px 0px 0px;
border-top: 1px solid var(--UI-Fleet-Black-10, #E2E4EA);
border-right: 1px solid var(--UI-Fleet-Black-10, #E2E4EA);
border-left: 1px solid var(--UI-Fleet-Black-10, #E2E4EA);
border-bottom: 1px solid var(--UI-Fleet-Black-10, #F9FAFC);
}
}
padding: 0;
position: relative;
[purpose='copy-button-tab'] {
width: 100%;
height: 35px;
border-radius: 4px 4px 0px 0px;
border-right: 1px solid var(--UI-Fleet-Black-10, #E2E4EA);
border-bottom: 1px solid var(--UI-Fleet-Black-10, #E2E4EA);
}
[purpose='copy-button'] {
position: absolute;
top: 2px;
right: 10px;
border-radius: 8px;
height: 32px;
width: 32px;
background: url('/images/icon-copy-16x16@2x.png');
background-size: 14px 14px;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
&.copied {
background: url('/images/icon-copy-clicked-checkmark-no-background-32x32@2x.png');
background-size: 32px 32px;
background-repeat: no-repeat;
background-position: center;
}
}
}
pre {
width: 100%;
max-width: 100%;
margin-bottom: 24px;
padding: 16px 44px 16px 24px;
border-right: 1px solid var(--UI-Fleet-Black-10, #E2E4EA);
border-left: 1px solid var(--UI-Fleet-Black-10, #E2E4EA);
border-bottom: 1px solid var(--UI-Fleet-Black-10, #E2E4EA);
background: #F9FAFC;
border-radius: 0px 0px 4px 4px;
.ps, .sh {
.hljs-keyword,
.hljs-selector-tag,
.hljs-name {
color: #AE6DDF;
}
.hljs-symbol,
.hljs-attribute,
.hljs-function-keyword,
.hljs-attr,
.hljs-class,
.hljs-title,
.hljs-string,
.hljs-type,
.hljs-builtin-name,
.hljs-selector-id,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-variable {
color: #4fd061;
}
.hljs-comment,
.hljs-deletion,
.hljs-meta {
color: @core-fleet-black-50;
}
}
code {
color: #515774;
&.has-linebreaks {
white-space: break-spaces;
}
&.no-linebreaks {
word-break: break-word;
white-space: normal;
}
font-family: 'Source Code Pro';
font-size: 14px;
font-weight: 400;
line-height: 150%;
.hljs-keyword { // SQL keywords (SELECT, FROM, WHERE, IN, etc.)
color: #AE6DDF;
}
[purpose='line-break']:not(:first-of-type)::before {
content: '\a';
}
.hljs-attr { // For table and column names
.hljs-keyword {
color: #FFF;
}
.hljs-string { // For words wrapped in quotation marks
color: #FFF;
}
color: #FFF;
background-color: #AE6DDF;
border-radius: 3px;
white-space: pre;
vertical-align: baseline;
span {
padding: 0;
}
}
.hljs-number {
color: #f5871f;
}
.hljs-string { // For words wrapped in quotation marks
color: #4fd061;
.hljs-keyword {
color: #4fd061;
}
}
background-color: @ui-off-white;
border: none;
padding: 0;
}
}
@media (max-width: 991px) {
[purpose='page-container'] {
padding: 32px 32px 64px 32px;
}
}
@media (max-width: 768px) {
}
@media (max-width: 575px) {
[purpose='page-container'] {
padding: 32px 24px 64px 24px;
}
[purpose='codeblock'] {
[purpose='copy-button'] {
top: 2px;
right: 5px;
}
}
}
}