merge newui branch
This commit is contained in:
Gani Georgiev
37
ui/src/css/_main.css
Normal file
37
ui/src/css/_main.css
Normal file
@@ -0,0 +1,37 @@
|
||||
@import "./fonts.css";
|
||||
@import "./remixicon.css";
|
||||
@import "./vars.css";
|
||||
@import "./animations.css";
|
||||
@import "./prism.css";
|
||||
@import "./base.css";
|
||||
@import "./tooltip.css";
|
||||
@import "./toast.css";
|
||||
@import "./list.css";
|
||||
@import "./grid.css";
|
||||
@import "./table.css";
|
||||
@import "./form.css";
|
||||
@import "./dropdown.css";
|
||||
@import "./accordion.css";
|
||||
@import "./bulkbar.css";
|
||||
@import "./tabs.css";
|
||||
@import "./modal.css";
|
||||
@import "./layout.css";
|
||||
|
||||
/* --------------------------------------------------------------- */
|
||||
|
||||
@import "./ruleField.css";
|
||||
@import "./ratelimit.css";
|
||||
@import "./export.css";
|
||||
@import "./logs.css";
|
||||
@import "./map.css";
|
||||
@import "./recordSummary.css";
|
||||
@import "./recordFilePicker.css";
|
||||
@import "./recordsPicker.css";
|
||||
@import "./recordFields.css";
|
||||
@import "./collectionModal.css";
|
||||
@import "./providers.css";
|
||||
@import "./apiPreviewModal.css";
|
||||
@import "./colorPicker.css";
|
||||
@import "./collectionsOverview.css";
|
||||
@import "./erd.css";
|
||||
@import "./hideControls.css";
|
||||
163
ui/src/css/accordion.css
Normal file
163
ui/src/css/accordion.css
Normal file
@@ -0,0 +1,163 @@
|
||||
.accordion {
|
||||
--siblingSpacing: var(--smSpacing);
|
||||
--contentPadding: var(--smSpacing);
|
||||
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: var(--surfaceTxtColor);
|
||||
border-radius: var(--borderRadius);
|
||||
background: var(--surfaceAlt1Color);
|
||||
border: 1px solid var(--surfaceAlt3Color);
|
||||
transition:
|
||||
border var(--animationSpeed),
|
||||
border-radius var(--animationSpeed),
|
||||
box-shadow var(--animationSpeed),
|
||||
margin var(--animationSpeed);
|
||||
|
||||
summary {
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
min-height: var(--lgBtnHeight);
|
||||
cursor: pointer;
|
||||
padding: 10px var(--smSpacing);
|
||||
padding-right: calc(var(--smSpacing) + 30px);
|
||||
background: var(--surfaceColor);
|
||||
border-radius: var(--borderRadius);
|
||||
user-select: none;
|
||||
transition:
|
||||
background var(--animationSpeed),
|
||||
border var(--animationSpeed),
|
||||
border-radius var(--animationSpeed);
|
||||
&::marker {
|
||||
content: "";
|
||||
display: none;
|
||||
}
|
||||
&::before {
|
||||
position: absolute;
|
||||
right: calc(var(--smSpacing) - 3px);
|
||||
top: 50%;
|
||||
margin-top: -10px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
align-content: center;
|
||||
content: "\EA4E";
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
font-size: 1.3rem;
|
||||
font-weight: normal;
|
||||
font-family: var(--iconFontFamily);
|
||||
color: var(--surfaceTxtHintColor);
|
||||
transition: color var(--animationSpeed);
|
||||
}
|
||||
&:not([tabindex="-1"]) {
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
outline: 0;
|
||||
background: var(--surfaceAlt1Color);
|
||||
&::before {
|
||||
color: var(--surfaceTxtColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
&[tabindex="-1"] {
|
||||
outline: 0;
|
||||
cursor: default;
|
||||
user-select: auto;
|
||||
padding-right: var(--smSpacing);
|
||||
&::before {
|
||||
content: none;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
&::details-content {
|
||||
height: 0;
|
||||
overflow: clip;
|
||||
padding: 0 var(--contentPadding);
|
||||
background: var(--surfaceColor);
|
||||
border-bottom-left-radius: var(--borderRadius);
|
||||
border-bottom-right-radius: var(--borderRadius);
|
||||
transition:
|
||||
border var(--slideAnimationSpeed) step-end,
|
||||
height var(--slideAnimationSpeed),
|
||||
padding var(--slideAnimationSpeed),
|
||||
content-visibility var(--slideAnimationSpeed),
|
||||
overflow var(--slideAnimationSpeed) step-start;
|
||||
transition-behavior: allow-discrete;
|
||||
}
|
||||
&:has(+ .accordion) {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
summary {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
&:not([open]):has(+ .accordion[open]) {
|
||||
border-bottom-left-radius: var(--borderRadius);
|
||||
border-bottom-right-radius: var(--borderRadius);
|
||||
border-bottom-width: 1px;
|
||||
summary {
|
||||
border-bottom-left-radius: var(--borderRadius);
|
||||
border-bottom-right-radius: var(--borderRadius);
|
||||
}
|
||||
}
|
||||
+ .accordion {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-top-width: 0;
|
||||
summary {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
& + .accordion[open] {
|
||||
margin-top: var(--siblingSpacing);
|
||||
}
|
||||
&[open] {
|
||||
border-width: 1px;
|
||||
border-radius: var(--borderRadius);
|
||||
box-shadow: var(--boxShadow);
|
||||
summary {
|
||||
background: var(--surfaceAlt1Color);
|
||||
border-radius: var(--borderRadius) var(--borderRadius) 0 0;
|
||||
&::before {
|
||||
content: "\EA78";
|
||||
}
|
||||
}
|
||||
&::details-content {
|
||||
border-top: 1px solid var(--surfaceAlt3Color);
|
||||
padding-top: var(--contentPadding);
|
||||
padding-bottom: var(--contentPadding);
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
/* same transition but with step-end overflow */
|
||||
transition:
|
||||
height var(--slideAnimationSpeed),
|
||||
padding var(--slideAnimationSpeed),
|
||||
content-visibility var(--slideAnimationSpeed),
|
||||
overflow var(--slideAnimationSpeed) step-end;
|
||||
transition-behavior: allow-discrete;
|
||||
}
|
||||
& + .accordion {
|
||||
border-top-width: 1px;
|
||||
margin-top: var(--siblingSpacing);
|
||||
border-top-left-radius: var(--borderRadius);
|
||||
border-top-right-radius: var(--borderRadius);
|
||||
summary {
|
||||
border-top-left-radius: var(--borderRadius);
|
||||
border-top-right-radius: var(--borderRadius);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.noanimation {
|
||||
&::details-content {
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
50
ui/src/css/animations.css
Normal file
50
ui/src/css/animations.css
Normal file
@@ -0,0 +1,50 @@
|
||||
@keyframes rotate {
|
||||
from {
|
||||
pointer-events: none;
|
||||
}
|
||||
to {
|
||||
pointer-events: none;
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes halfRotate {
|
||||
from {
|
||||
pointer-events: none;
|
||||
}
|
||||
to {
|
||||
pointer-events: none;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideTop {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.85);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
128
ui/src/css/apiPreviewModal.css
Normal file
128
ui/src/css/apiPreviewModal.css
Normal file
@@ -0,0 +1,128 @@
|
||||
.api-preview-content {
|
||||
flex-grow: 1;
|
||||
overflow: auto;
|
||||
scrollbar-width: thin;
|
||||
padding: calc(var(--smSpacing) + 5px) var(--spacing) calc(var(--spacing) - 5px);
|
||||
padding: calc(var(--spacing) - 5px) var(--spacing) calc(var(--spacing) - 5px);
|
||||
}
|
||||
|
||||
.api-preview-content-header {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
margin: 0 0 calc(var(--smSpacing) + 5px);
|
||||
.preview-close-btn {
|
||||
margin: -10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.api-preview-sidebar {
|
||||
width: 190px;
|
||||
flex-shrink: 0;
|
||||
overflow: auto;
|
||||
scrollbar-width: thin;
|
||||
background: var(--surfaceAlt1Color);
|
||||
padding: var(--inputPadding);
|
||||
border-right: 1px solid var(--surfaceAlt2Color);
|
||||
}
|
||||
|
||||
.api-preview-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
hr {
|
||||
margin: var(--inputPadding) 0;
|
||||
}
|
||||
.nav-item {
|
||||
outline: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
width: 100%;
|
||||
padding: 5px var(--inputPadding);
|
||||
cursor: pointer;
|
||||
font-size: var(--lgFontSize);
|
||||
min-height: var(--btnHeight);
|
||||
border-radius: var(--borderRadius);
|
||||
color: var(--surfaceTxtHintColor);
|
||||
transition: color var(--animationSpeed),
|
||||
background var(--animationSpeed);
|
||||
&:hover,
|
||||
&:focus-visible,
|
||||
&.active {
|
||||
background: var(--surfaceAlt2Color);
|
||||
}
|
||||
&.active {
|
||||
color: var(--surfaceTxtColor);
|
||||
}
|
||||
&:active {
|
||||
background: var(--surfaceAlt3Color);
|
||||
transition-duration: var(--activeAnimationSpeed);
|
||||
}
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
color: var(--surfaceTxtDisabledColor);
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.api-preview-alert {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
margin: var(--smSpacing) 0;
|
||||
.method {
|
||||
font-weight: bold;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.path {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.extra {
|
||||
color: var(--surfaceTxtHintColor);
|
||||
max-width: 180px;
|
||||
text-align: right;
|
||||
margin: -3px 0 -3px auto;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
}
|
||||
|
||||
.api-preview-table {
|
||||
width: 100%;
|
||||
margin: var(--smSpacing) 0;
|
||||
}
|
||||
|
||||
code.filter-op {
|
||||
min-width: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.api-preview-modal {
|
||||
width: 900px;
|
||||
max-width: 95%;
|
||||
.modal-content {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
padding: 0;
|
||||
&::before,
|
||||
&::after {
|
||||
content: none;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 550px) {
|
||||
.modal-content {
|
||||
flex-direction: column;
|
||||
}
|
||||
.api-preview-content > .content {
|
||||
min-width: 550px;
|
||||
}
|
||||
.api-preview-sidebar {
|
||||
width: 100%;
|
||||
max-height: 150px;
|
||||
border: 0;
|
||||
border-bottom: 2px solid var(--surfaceAlt3Color);
|
||||
}
|
||||
}
|
||||
}
|
||||
1283
ui/src/css/base.css
Normal file
1283
ui/src/css/base.css
Normal file
File diff suppressed because it is too large
Load Diff
74
ui/src/css/bulkbar.css
Normal file
74
ui/src/css/bulkbar.css
Normal file
@@ -0,0 +1,74 @@
|
||||
.bulkbar {
|
||||
position: fixed;
|
||||
z-index: 11;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
bottom: var(--spacing);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
opacity: 1;
|
||||
width: 450px;
|
||||
max-width: 95%;
|
||||
padding: 5px var(--smSpacing);
|
||||
min-height: var(--lgBtnHeight);
|
||||
background: var(--surfaceColor);
|
||||
border-radius: 50px;
|
||||
box-shadow: var(--boxShadow);
|
||||
border: 1px solid var(--surfaceAlt3Color);
|
||||
transition-property: opacity, transform, display;
|
||||
transition-behavior: allow-discrete;
|
||||
transition-duration: var(--animationSpeed);
|
||||
transform: translate(-50%, 10px);
|
||||
@starting-style {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, 10px);
|
||||
}
|
||||
&[hidden],
|
||||
&.hidden {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, 10px);
|
||||
}
|
||||
> .btn:first-child {
|
||||
margin-left: -5px;
|
||||
}
|
||||
> .btn:last-child {
|
||||
margin-right: -5px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
border-radius: var(--borderRadius);
|
||||
padding: min(10px, var(--smSpacing)) var(--smSpacing);
|
||||
> .txt,
|
||||
> .content {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bulkbar-wrapper {
|
||||
position: sticky;
|
||||
z-index: 11;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
bottom: var(--smSpacing);
|
||||
right: 0;
|
||||
|
||||
.bulkbar {
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
left: auto;
|
||||
right: auto;
|
||||
margin: var(--smSpacing) auto;
|
||||
transform: translateY(0);
|
||||
@starting-style {
|
||||
transform: translateY(10px);
|
||||
}
|
||||
&[hidden],
|
||||
&.hidden {
|
||||
transform: translateY(10px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
95
ui/src/css/collectionModal.css
Normal file
95
ui/src/css/collectionModal.css
Normal file
@@ -0,0 +1,95 @@
|
||||
.collection-upsert-modal {
|
||||
width: 720px;
|
||||
.modal-content {
|
||||
scrollbar-gutter: stable both-edges;
|
||||
}
|
||||
.modal-title {
|
||||
min-height: var(--smBtnHeight);
|
||||
.collection-name {
|
||||
max-width: 220px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.new-collection-field-btn-wrapper {
|
||||
margin: var(--smSpacing) 0;
|
||||
}
|
||||
|
||||
.field-types-dropdown {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 0;
|
||||
margin: -5px 0;
|
||||
border: 2px solid var(--primaryColor);
|
||||
.dropdown-item {
|
||||
width: 25%;
|
||||
padding: 10px;
|
||||
margin: 2px 0;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.dropdown-item {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.indexes-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
.code-editor.collection-index-input {
|
||||
min-height: 101px;
|
||||
}
|
||||
|
||||
.query-caveats-dropdown {
|
||||
width: 300px;
|
||||
padding: 10px;
|
||||
ul {
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
.query-state {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.collection-changes-list {
|
||||
margin: 10px 0;
|
||||
li {
|
||||
margin: 10px 0;
|
||||
align-content: center;
|
||||
line-height: var(--smLineHeight);
|
||||
i {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.rule-content {
|
||||
margin: 5px 0;
|
||||
font-family: var(--monospaceFontFamily);
|
||||
font-size: var(--smFontSize);
|
||||
line-height: var(--smLineHeight);
|
||||
white-space: pre-wrap;
|
||||
text-align: left;
|
||||
&.old-rule {
|
||||
color: var(--surfaceTxtHintColor);
|
||||
}
|
||||
&.new-rule {
|
||||
color: var(--successColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.oidc-userinfo-options {
|
||||
border: 2px solid var(--inputFocusColor);
|
||||
border-radius: var(--borderRadius);
|
||||
padding: var(--smSpacing);
|
||||
}
|
||||
|
||||
.view-query-sample code {
|
||||
max-height: 300px;
|
||||
background: none;
|
||||
border: 1px solid var(--surfaceAlt2Color);
|
||||
}
|
||||
70
ui/src/css/collectionsOverview.css
Normal file
70
ui/src/css/collectionsOverview.css
Normal file
@@ -0,0 +1,70 @@
|
||||
.modal.collections-overview-modal {
|
||||
width: 1500px;
|
||||
max-width: 90%;
|
||||
min-height: 90%;
|
||||
max-height: 90%;
|
||||
|
||||
/* note: don't use scale to avoid interfering with the erd sizing */
|
||||
transform: translateY(3px);
|
||||
&[data-modal-state="open"] {
|
||||
transform: translateY(0);
|
||||
@starting-style {
|
||||
transform: translateY(3px);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding-top: var(--smSpacing);
|
||||
}
|
||||
.modal-content.erd-tab {
|
||||
padding: 0;
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
&::before,
|
||||
&::after {
|
||||
content: none;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.modal-content.rules-tab {
|
||||
padding-top: 0;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
.rules-table {
|
||||
min-width: 700px;
|
||||
word-break: break-word;
|
||||
margin-top: calc(var(--spacing) - 5px);
|
||||
.collection-name {
|
||||
width: 200px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
thead {
|
||||
top: -3px;
|
||||
}
|
||||
}
|
||||
.col-rule-btns {
|
||||
/*padding: 5px;*/
|
||||
}
|
||||
.rule-btns {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
gap: 5px;
|
||||
.btn {
|
||||
flex: 1 1 0;
|
||||
padding: 5px;
|
||||
&.outline {
|
||||
padding: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
max-width: 95%;
|
||||
min-height: 95%;
|
||||
max-height: 95%;
|
||||
.rules-table .collection-name {
|
||||
max-width: 130px;
|
||||
}
|
||||
}
|
||||
}
|
||||
97
ui/src/css/colorPicker.css
Normal file
97
ui/src/css/colorPicker.css
Normal file
@@ -0,0 +1,97 @@
|
||||
.color-picker {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: stretch;
|
||||
min-height: 28px;
|
||||
padding: 0px;
|
||||
background: none;
|
||||
border-radius: var(--borderRadius);
|
||||
padding: 3px;
|
||||
gap: 3px;
|
||||
background: var(--surfaceColor);
|
||||
.predefined-colors-btn {
|
||||
padding: 0 3px;
|
||||
}
|
||||
.color-picker-input-wrapper {
|
||||
position: relative;
|
||||
display: block;
|
||||
flex-grow: 1;
|
||||
height: auto;
|
||||
input[type="color"] {
|
||||
-webkit-appearance: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
cursor: cell;
|
||||
border-radius: var(--borderRadius);
|
||||
&::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
&::-webkit-color-swatch {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
.result {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0 2px;
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
line-height: 1;
|
||||
font-size: 0.85rem;
|
||||
font-family: var(--monospaceFontFamily);
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.predefined-colors-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
user-select: none;
|
||||
.color {
|
||||
cursor: pointer;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
flex-shrink: 0;
|
||||
border-radius: var(--borderRadius);
|
||||
transition: opacity var(--animationSpeed);
|
||||
&:focus-visible {
|
||||
outline-color: var(--surfaceAlt5Color);
|
||||
}
|
||||
&:hover,
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
&:active {
|
||||
opacity: 0.7;
|
||||
transition-duration: var(--activeAnimationSpeed);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.predefined-colors-dropdown {
|
||||
width: auto;
|
||||
min-width: 25px;
|
||||
max-width: 170px;
|
||||
}
|
||||
|
||||
.field {
|
||||
.color-picker {
|
||||
margin: 4px;
|
||||
width: auto;
|
||||
}
|
||||
label ~ .color-picker {
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
163
ui/src/css/dropdown.css
Normal file
163
ui/src/css/dropdown.css
Normal file
@@ -0,0 +1,163 @@
|
||||
@keyframes popoverHide {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateY(3px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes popoverShow {
|
||||
from {
|
||||
transform: translateY(3px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
width: anchor-size(width);
|
||||
min-width: 150px;
|
||||
max-height: 330px;
|
||||
overflow: auto;
|
||||
padding: 5px;
|
||||
margin: 5px 0;
|
||||
outline: 0;
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
font-size: var(--fontSize);
|
||||
line-height: var(--smLineHeight);
|
||||
color: var(--surfaceTxtColor);
|
||||
background: var(--surfaceColor);
|
||||
box-shadow: var(--boxShadow);
|
||||
scrollbar-width: thin;
|
||||
border-radius: var(--borderRadius);
|
||||
border: 1px solid var(--surfaceAlt3Color);
|
||||
&[popover] {
|
||||
display: none;
|
||||
position-area: bottom span-left;
|
||||
position-try-fallbacks: flip-block;
|
||||
transition:
|
||||
display var(--animationSpeed) allow-discrete,
|
||||
overlay var(--animationSpeed) allow-discrete;
|
||||
animation: popoverHide var(--animationSpeed) forwards;
|
||||
&:popover-open {
|
||||
animation: popoverShow var(--animationSpeed) forwards;
|
||||
display: inline-flex;
|
||||
}
|
||||
&.left {
|
||||
position-area: bottom span-right;
|
||||
}
|
||||
}
|
||||
hr {
|
||||
margin: 0;
|
||||
}
|
||||
.dropdown-item {
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
user-select: none;
|
||||
text-decoration: none;
|
||||
word-break: break-word;
|
||||
color: inherit;
|
||||
transition: background var(--animationSpeed);
|
||||
border-radius: var(--borderRadius);
|
||||
&:hover {
|
||||
background: var(--surfaceAlt1Color);
|
||||
}
|
||||
&:focus-visible {
|
||||
outline: 2px dotted var(--surfaceAlt3Color);
|
||||
}
|
||||
&:active {
|
||||
background: var(--surfaceAlt2Color);
|
||||
transition-duration: var(--activeAnimationSpeed);
|
||||
}
|
||||
&.active {
|
||||
background: var(--surfaceAlt2Color);
|
||||
transition-duration: var(--activeAnimationSpeed);
|
||||
&:hover {
|
||||
background: var(--surfaceAlt3Color);
|
||||
transition-duration: var(--animationSpeed);
|
||||
}
|
||||
}
|
||||
&[disabled],
|
||||
&.disabled {
|
||||
cursor: default;
|
||||
background: none;
|
||||
color: var(--surfaceTxtDisabledColor);
|
||||
}
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
~ label {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .field,
|
||||
> .fields-group {
|
||||
margin: 0;
|
||||
}
|
||||
.field:has(.search),
|
||||
.fields-group:has(.search) {
|
||||
margin: 0;
|
||||
background: none;
|
||||
border-bottom: 1px solid var(--surfaceAlt1Color);
|
||||
.field,
|
||||
input.search {
|
||||
background: none;
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
.dropdown-search {
|
||||
border-bottom: 1px solid var(--surfaceAlt2Color);
|
||||
.field {
|
||||
background: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.nowrap,
|
||||
&.txt-nowrap {
|
||||
width: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&.sm {
|
||||
min-width: 100px;
|
||||
font-size: var(--smFontSize);
|
||||
.dropdown-item {
|
||||
gap: 5px;
|
||||
padding: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
&.autocomplete {
|
||||
position: fixed;
|
||||
z-index: 99999;
|
||||
max-width: 350px;
|
||||
max-height: 200px;
|
||||
padding: 3px;
|
||||
gap: 3px;
|
||||
word-break: break-word;
|
||||
font-size: var(--smFontSize);
|
||||
.dropdown-item {
|
||||
padding: 2px 4px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
&.history-searchbar-dropdown[popover] {
|
||||
min-width: 300px;
|
||||
max-width: 450px;
|
||||
}
|
||||
}
|
||||
183
ui/src/css/erd.css
Normal file
183
ui/src/css/erd.css
Normal file
@@ -0,0 +1,183 @@
|
||||
.erd-table-row {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
border: 0;
|
||||
padding: 2px 5px;
|
||||
font-weight: normal;
|
||||
min-height: var(--smBtnHeight);
|
||||
background: var(--surfaceColor);
|
||||
color: var(--surfaceTxtColor);
|
||||
border-top: 1px solid var(--surfaceAlt2Color);
|
||||
.txt-ellipsis {
|
||||
min-width: 0;
|
||||
}
|
||||
&.header {
|
||||
color: inherit;
|
||||
background: inherit;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
border: 0;
|
||||
}
|
||||
&.type-relation {
|
||||
background: var(--surfaceAlt1Color);
|
||||
}
|
||||
&:first-child,
|
||||
&.header + .erd-table-row {
|
||||
border-top: 0;
|
||||
border-top-left-radius: var(--borderRadius);
|
||||
border-top-right-radius: var(--borderRadius);
|
||||
}
|
||||
&:last-child {
|
||||
border-bottom-left-radius: var(--borderRadius);
|
||||
border-bottom-right-radius: var(--borderRadius);
|
||||
}
|
||||
i {
|
||||
font-size: 1em;
|
||||
}
|
||||
.field-icon {
|
||||
color: var(--surfaceTxtHintColor);
|
||||
}
|
||||
.field-name {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
flex-shrink: 1;
|
||||
min-width: 10px;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.field-hidden-label {
|
||||
padding: 3px;
|
||||
min-height: 0;
|
||||
line-height: 1;
|
||||
font-size: 0.78em;
|
||||
}
|
||||
.meta {
|
||||
display: flex;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
font-size: 0.9em;
|
||||
margin-left: auto;
|
||||
white-space: nowrap;
|
||||
color: var(--surfaceTxtHintColor);
|
||||
}
|
||||
}
|
||||
|
||||
.erd-table {
|
||||
position: relative;
|
||||
display: block;
|
||||
z-index: 2;
|
||||
width: 200px;
|
||||
text-align: left;
|
||||
user-select: none;
|
||||
padding: 2px;
|
||||
word-break: break-word;
|
||||
background: var(--surfaceAlt4Color);
|
||||
color: var(--surfaceTxtHintColor);
|
||||
border-radius: var(--borderRadius);
|
||||
font-size: var(--smFontSize);
|
||||
line-height: var(--smLineHeight);
|
||||
transition:
|
||||
opacity var(--animationSpeed),
|
||||
background var(--animationSpeed),
|
||||
color var(--animationSpeed),
|
||||
box-shadow var(--animationSpeed);
|
||||
&.active {
|
||||
color: var(--surfaceTxtColor);
|
||||
background: var(--surfaceAlt5Color);
|
||||
}
|
||||
&.system {
|
||||
color: var(--dangerTxtColor);
|
||||
background: var(--dangerColor);
|
||||
}
|
||||
&.active,
|
||||
&:hover {
|
||||
box-shadow: var(--boxShadow);
|
||||
}
|
||||
}
|
||||
|
||||
.erd {
|
||||
display: block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: grab;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
min-height: 300px;
|
||||
background-image: radial-gradient(var(--surfaceAlt3Color) 1px, transparent 1px);
|
||||
background-size: 20px 20px;
|
||||
border-radius: var(--borderRadius);
|
||||
touch-action: none; /* handled by js */
|
||||
|
||||
.erd-area {
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 0;
|
||||
user-select: none;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
.erd-table {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* svg paths */
|
||||
.erd-paths {
|
||||
--pathColor: var(--surfaceAlt2Color);
|
||||
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 2000px; /* something large enough to fit the lines */
|
||||
height: 8000px;
|
||||
pointer-events: none;
|
||||
transition: opacity var(--animationSpeed);
|
||||
}
|
||||
.paths-group {
|
||||
fill: none;
|
||||
stroke-width: 2;
|
||||
stroke: var(--pathColor);
|
||||
}
|
||||
.erd-paths.front {
|
||||
--pathColor: var(--surfaceAlt5Color);
|
||||
|
||||
z-index: 2;
|
||||
.active-from {
|
||||
stroke: var(--surfaceTxtHintColor);
|
||||
}
|
||||
}
|
||||
|
||||
.erd-nav {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
right: var(--smSpacing);
|
||||
bottom: var(--smSpacing);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* states */
|
||||
&.updating {
|
||||
.erd-paths,
|
||||
.erd-table {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
&.panning {
|
||||
cursor: grabbing;
|
||||
}
|
||||
&.active {
|
||||
.erd-paths.back {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
}
|
||||
156
ui/src/css/export.css
Normal file
156
ui/src/css/export.css
Normal file
@@ -0,0 +1,156 @@
|
||||
.export-panel {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 550px;
|
||||
align-items: stretch;
|
||||
background: var(--surfaceAlt1Color);
|
||||
border-radius: var(--borderRadius);
|
||||
|
||||
.export-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--smSpacing);
|
||||
width: 230px;
|
||||
min-height: 0;
|
||||
flex-shrink: 0;
|
||||
overflow: auto;
|
||||
scrollbar-width: thin;
|
||||
padding: var(--smSpacing);
|
||||
word-break: break-word;
|
||||
.list-item {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.export-preview {
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
.ctrls {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
right: var(--smSpacing);
|
||||
top: calc(var(--smSpacing) - 5px);
|
||||
}
|
||||
.code-wrapper {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
code {
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
white-space: pre;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> * {
|
||||
border-left: 1px solid var(--surfaceAlt2Color);
|
||||
}
|
||||
> :first-child {
|
||||
border-left: 0;
|
||||
border-top-left-radius: var(--borderRadius);
|
||||
border-bottom-left-radius: var(--borderRadius);
|
||||
}
|
||||
> :last-child {
|
||||
border-top-right-radius: var(--borderRadius);
|
||||
border-bottom-right-radius: var(--borderRadius);
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
height: auto;
|
||||
> * {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
border-top: 1px solid var(--surfaceAlt2Color);
|
||||
}
|
||||
> :first-child {
|
||||
border-top: 0;
|
||||
border-top-left-radius: var(--borderRadius);
|
||||
border-top-right-radius: var(--borderRadius);
|
||||
}
|
||||
> :last-child {
|
||||
border-bottom-left-radius: var(--borderRadius);
|
||||
border-bottom-right-radius: var(--borderRadius);
|
||||
}
|
||||
.export-list {
|
||||
width: 100%;
|
||||
max-height: 200px;
|
||||
}
|
||||
.export-preview {
|
||||
max-height: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.import-change-label {
|
||||
min-width: 65px;
|
||||
}
|
||||
|
||||
.collections-diff-table-title {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 0 var(--smSpacing);
|
||||
.import-change-label {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.collections-diff-table {
|
||||
color: var(--surfaceTxtHintColor);
|
||||
border-radius: var(--borderRadius);
|
||||
tr {
|
||||
background: none;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
height: auto;
|
||||
padding: 2px 10px;
|
||||
}
|
||||
th {
|
||||
padding: 4px 10px;
|
||||
color: var(--surfaceTxtColor);
|
||||
}
|
||||
thead tr {
|
||||
background: var(--surfaceAlt2Color);
|
||||
th {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
.changed-none-col {
|
||||
color: var(--surfaceTxtDisabledColor);
|
||||
background: var(--surfaceAlt1Color);
|
||||
}
|
||||
.changed-old-col {
|
||||
color: var(--surfaceTxtColor);
|
||||
background: var(--surfaceDangerColor);
|
||||
}
|
||||
.changed-new-col {
|
||||
color: var(--surfaceTxtColor);
|
||||
background: var(--surfaceSuccessColor);
|
||||
}
|
||||
.field-key-col {
|
||||
padding-left: var(--spacing);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.diff-value {
|
||||
white-space: break-spaces;
|
||||
}
|
||||
tbody th {
|
||||
background: var(--surfaceAlt1Color);
|
||||
}
|
||||
}
|
||||
|
||||
.collections-diff-table-wrapper {
|
||||
& + .collections-diff-table-wrapper {
|
||||
margin-top: var(--spacing);
|
||||
}
|
||||
}
|
||||
57
ui/src/css/fonts.css
Normal file
57
ui/src/css/fonts.css
Normal file
@@ -0,0 +1,57 @@
|
||||
@font-face {
|
||||
font-display: block;
|
||||
font-family: "remixicon";
|
||||
src: url("/fonts/remixicon/remixicon.woff2?t=1734404658139") format("woff2");
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------- */
|
||||
|
||||
@font-face {
|
||||
font-display: block;
|
||||
font-family: "IBM Plex Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url("/fonts/ibm-plex-sans/ibm-plex-sans-v23-cyrillic_latin_latin-ext-regular.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: block;
|
||||
font-family: "IBM Plex Sans";
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: url("/fonts/ibm-plex-sans/ibm-plex-sans-v23-cyrillic_latin_latin-ext-italic.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: block;
|
||||
font-family: "IBM Plex Sans";
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: url("/fonts/ibm-plex-sans/ibm-plex-sans-v23-cyrillic_latin_latin-ext-600.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: block;
|
||||
font-family: "IBM Plex Sans";
|
||||
font-style: italic;
|
||||
font-weight: 600;
|
||||
src: url("/fonts/ibm-plex-sans/ibm-plex-sans-v23-cyrillic_latin_latin-ext-600italic.woff2") format("woff2");
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------- */
|
||||
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: "IBM Plex Mono";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url("/fonts/ibm-plex-mono/ibm-plex-mono-v20-latin-regular.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: "IBM Plex Mono";
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: url("/fonts/ibm-plex-mono/ibm-plex-mono-v20-latin-600.woff2") format("woff2");
|
||||
}
|
||||
1122
ui/src/css/form.css
Normal file
1122
ui/src/css/form.css
Normal file
File diff suppressed because it is too large
Load Diff
184
ui/src/css/grid.css
Normal file
184
ui/src/css/grid.css
Normal file
@@ -0,0 +1,184 @@
|
||||
.grid {
|
||||
--gridGap: var(--spacing);
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-wrap: wrap;
|
||||
row-gap: var(--gridGap);
|
||||
margin: 0 calc(-0.5 * var(--gridGap));
|
||||
container-type: inline-size;
|
||||
|
||||
&.center {
|
||||
align-items: center;
|
||||
}
|
||||
&.sm {
|
||||
--gridGap: var(--smSpacing);
|
||||
}
|
||||
& > [class^="col-"] {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: 1px;
|
||||
margin: 0 calc(0.5 * var(--gridGap));
|
||||
> hr:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
> hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.col-12 {
|
||||
width: calc(100% - var(--gridGap));
|
||||
}
|
||||
.col-11 {
|
||||
width: calc(91.6666666667% - var(--gridGap));
|
||||
}
|
||||
.col-10 {
|
||||
width: calc(83.3333333333% - var(--gridGap));
|
||||
}
|
||||
.col-9 {
|
||||
width: calc(75% - var(--gridGap));
|
||||
}
|
||||
.col-8 {
|
||||
width: calc(66.6666666667% - var(--gridGap));
|
||||
}
|
||||
.col-7 {
|
||||
width: calc(58.3333333333% - var(--gridGap));
|
||||
}
|
||||
.col-6 {
|
||||
width: calc(50% - var(--gridGap));
|
||||
}
|
||||
.col-5 {
|
||||
width: calc(41.6666666667% - var(--gridGap));
|
||||
}
|
||||
.col-4 {
|
||||
width: calc(33.3333333333% - var(--gridGap));
|
||||
}
|
||||
.col-3 {
|
||||
width: calc(25% - var(--gridGap));
|
||||
}
|
||||
.col-2 {
|
||||
width: calc(16.6666666667% - var(--gridGap));
|
||||
}
|
||||
.col-1 {
|
||||
width: calc(8.3333333333% - var(--gridGap));
|
||||
}
|
||||
|
||||
@container (width >= 380px) {
|
||||
.col-sm-12 {
|
||||
width: calc(100% - var(--gridGap));
|
||||
}
|
||||
.col-sm-11 {
|
||||
width: calc(91.6666666667% - var(--gridGap));
|
||||
}
|
||||
.col-sm-10 {
|
||||
width: calc(83.3333333333% - var(--gridGap));
|
||||
}
|
||||
.col-sm-9 {
|
||||
width: calc(75% - var(--gridGap));
|
||||
}
|
||||
.col-sm-8 {
|
||||
width: calc(66.6666666667% - var(--gridGap));
|
||||
}
|
||||
.col-sm-7 {
|
||||
width: calc(58.3333333333% - var(--gridGap));
|
||||
}
|
||||
.col-sm-6 {
|
||||
width: calc(50% - var(--gridGap));
|
||||
}
|
||||
.col-sm-5 {
|
||||
width: calc(41.6666666667% - var(--gridGap));
|
||||
}
|
||||
.col-sm-4 {
|
||||
width: calc(33.3333333333% - var(--gridGap));
|
||||
}
|
||||
.col-sm-3 {
|
||||
width: calc(25% - var(--gridGap));
|
||||
}
|
||||
.col-sm-2 {
|
||||
width: calc(16.6666666667% - var(--gridGap));
|
||||
}
|
||||
.col-sm-1 {
|
||||
width: calc(8.3333333333% - var(--gridGap));
|
||||
}
|
||||
}
|
||||
|
||||
@container (width >= 550px) {
|
||||
.col-md-12 {
|
||||
width: calc(100% - var(--gridGap));
|
||||
}
|
||||
.col-md-11 {
|
||||
width: calc(91.6666666667% - var(--gridGap));
|
||||
}
|
||||
.col-md-10 {
|
||||
width: calc(83.3333333333% - var(--gridGap));
|
||||
}
|
||||
.col-md-9 {
|
||||
width: calc(75% - var(--gridGap));
|
||||
}
|
||||
.col-md-8 {
|
||||
width: calc(66.6666666667% - var(--gridGap));
|
||||
}
|
||||
.col-md-7 {
|
||||
width: calc(58.3333333333% - var(--gridGap));
|
||||
}
|
||||
.col-md-6 {
|
||||
width: calc(50% - var(--gridGap));
|
||||
}
|
||||
.col-md-5 {
|
||||
width: calc(41.6666666667% - var(--gridGap));
|
||||
}
|
||||
.col-md-4 {
|
||||
width: calc(33.3333333333% - var(--gridGap));
|
||||
}
|
||||
.col-md-3 {
|
||||
width: calc(25% - var(--gridGap));
|
||||
}
|
||||
.col-md-2 {
|
||||
width: calc(16.6666666667% - var(--gridGap));
|
||||
}
|
||||
.col-md-1 {
|
||||
width: calc(8.3333333333% - var(--gridGap));
|
||||
}
|
||||
}
|
||||
|
||||
@container (width >= 650px) {
|
||||
.col-lg-12 {
|
||||
width: calc(100% - var(--gridGap));
|
||||
}
|
||||
.col-lg-11 {
|
||||
width: calc(91.6666666667% - var(--gridGap));
|
||||
}
|
||||
.col-lg-10 {
|
||||
width: calc(83.3333333333% - var(--gridGap));
|
||||
}
|
||||
.col-lg-9 {
|
||||
width: calc(75% - var(--gridGap));
|
||||
}
|
||||
.col-lg-8 {
|
||||
width: calc(66.6666666667% - var(--gridGap));
|
||||
}
|
||||
.col-lg-7 {
|
||||
width: calc(58.3333333333% - var(--gridGap));
|
||||
}
|
||||
.col-lg-6 {
|
||||
width: calc(50% - var(--gridGap));
|
||||
}
|
||||
.col-lg-5 {
|
||||
width: calc(41.6666666667% - var(--gridGap));
|
||||
}
|
||||
.col-lg-4 {
|
||||
width: calc(33.3333333333% - var(--gridGap));
|
||||
}
|
||||
.col-lg-3 {
|
||||
width: calc(25% - var(--gridGap));
|
||||
}
|
||||
.col-lg-2 {
|
||||
width: calc(16.6666666667% - var(--gridGap));
|
||||
}
|
||||
.col-lg-1 {
|
||||
width: calc(8.3333333333% - var(--gridGap));
|
||||
}
|
||||
}
|
||||
}
|
||||
7
ui/src/css/hideControls.css
Normal file
7
ui/src/css/hideControls.css
Normal file
@@ -0,0 +1,7 @@
|
||||
.app.hide-controls {
|
||||
.btn-collection-settings,
|
||||
.sidebar-content.new-collection,
|
||||
.settings-sidebar [data-group="Sync"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
616
ui/src/css/layout.css
Normal file
616
ui/src/css/layout.css
Normal file
@@ -0,0 +1,616 @@
|
||||
.app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%; /* don't use vh because it doesn't account for the mobile url bar */
|
||||
padding: 0;
|
||||
|
||||
&:has(.accent-surface) {
|
||||
background: var(--accentColor);
|
||||
color: var(--accentTxtColor);
|
||||
}
|
||||
}
|
||||
|
||||
.app-header {
|
||||
--headerItemsGap: var(--inputPadding);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 2px 10px;
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
min-height: 38px;
|
||||
gap: var(--headerItemsGap);
|
||||
font-size: var(--smFontSize);
|
||||
line-height: var(--smLineHeight);
|
||||
/* for when the page is opened in "app" mode */
|
||||
@media (display-mode: minimal-ui) or (display-mode: standalone) {
|
||||
border-top: 1px solid var(--accentAlt1Color);
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
.logo {
|
||||
display: inline-flex;
|
||||
vertical-align: top;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
text-decoration: none;
|
||||
border-radius: var(--borderRadius);
|
||||
img {
|
||||
vertical-align: top;
|
||||
max-height: 26px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 400px) {
|
||||
gap: 7px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.app-main-nav {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: max(var(--headerItemsGap), 5px);
|
||||
|
||||
/* responsive */
|
||||
scrollbar-width: thin;
|
||||
overflow: auto;
|
||||
overflow: overlay;
|
||||
|
||||
/* overflow clipping workaround */
|
||||
padding: 3px;
|
||||
margin: 0 -3px;
|
||||
|
||||
/* scroll shadows */
|
||||
container-type: scroll-state;
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
position: sticky;
|
||||
display: block;
|
||||
align-self: stretch;
|
||||
z-index: 9;
|
||||
width: 1px;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
flex-shrink: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
&::before {
|
||||
left: -5px;
|
||||
margin-right: calc(-1 * (var(--headerItemsGap) + 1px));
|
||||
box-shadow: 2px 0px 4px 1px rgba(0, 0, 0, 0.4);
|
||||
@container scroll-state(scrollable: left) {
|
||||
opacity: 1;
|
||||
transition: opacity var(--animationSpeed);
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
right: -5px;
|
||||
margin-left: calc(-1 * (var(--headerItemsGap) + 1px));
|
||||
box-shadow: -2px 0px 4px 1px rgba(0, 0, 0, 0.4);
|
||||
@container scroll-state(scrollable: right) {
|
||||
opacity: 1;
|
||||
transition: opacity var(--animationSpeed);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
--headerItemsGap: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.app-header .header-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 4px 5px;
|
||||
font-weight: bold;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
color: var(--accentTxtHintColor);
|
||||
border-radius: var(--borderRadius);
|
||||
transition:
|
||||
color var(--animationSpeed),
|
||||
background var(--animationSpeed);
|
||||
&[data-popover-state="true"],
|
||||
&.active,
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
color: var(--accentTxtColor);
|
||||
background: var(--surfaceAlt2Color);
|
||||
}
|
||||
&:active {
|
||||
background: var(--surfaceAlt3Color);
|
||||
transition-duration: var(--activeAnimationSpeed);
|
||||
}
|
||||
}
|
||||
.app-header .logged-user {
|
||||
max-width: 300px;
|
||||
@media (max-width: 600px) {
|
||||
.superuser-name {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------- */
|
||||
|
||||
.page {
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
color: var(--surfaceTxtColor);
|
||||
background: var(--surfaceColor);
|
||||
border-radius: var(--lgBorderRadius);
|
||||
&:first-child {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
&:last-child {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
.page-content {
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
flex-grow: 1;
|
||||
overflow: auto;
|
||||
padding: var(--spacing);
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
column-gap: var(--smSpacing);
|
||||
row-gap: calc(var(--smSpacing) - 5px);
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
margin: -5px 0 calc(var(--spacing) - 5px);
|
||||
.searchbar {
|
||||
width: auto;
|
||||
flex-grow: 1;
|
||||
}
|
||||
&.compact {
|
||||
margin-top: -10px;
|
||||
margin-bottom: calc(var(--spacing) - 10px);
|
||||
}
|
||||
.page-header-secondary-btns,
|
||||
.page-header-primary-btns {
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
.page-header-secondary-btns {
|
||||
gap: 10px;
|
||||
@media (max-width: 550px) {
|
||||
gap: 5px;
|
||||
}
|
||||
}
|
||||
.page-header-primary-btns {
|
||||
gap: var(--smSpacing);
|
||||
margin-left: auto;
|
||||
.btn {
|
||||
flex-wrap: nowrap;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
gap: 5px;
|
||||
flex-grow: 1;
|
||||
.flex-nowrap & {
|
||||
flex-grow: 0;
|
||||
}
|
||||
.btn {
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 550px) {
|
||||
gap: 5px;
|
||||
flex-grow: 0;
|
||||
.api-preview-btn {
|
||||
display: none;
|
||||
}
|
||||
.btn:not(.circle) {
|
||||
padding: 0;
|
||||
width: auto;
|
||||
aspect-ratio: 1 / 1;
|
||||
border-radius: 50%;
|
||||
i + .txt {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-footer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
width: auto;
|
||||
z-index: 10;
|
||||
color: var(--surfaceTxtHintColor);
|
||||
font-size: var(--smFontSize);
|
||||
line-height: var(--smLineHeight);
|
||||
box-shadow: 0px -1px 0px 0px var(--surfaceAlt2Color); /* not border so that it can overlap */
|
||||
padding: 10px var(--spacing);
|
||||
margin: auto calc(-1 * var(--spacing)) calc(-1 * var(--spacing));
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
transition: color var(--animationSpeed);
|
||||
border-radius: var(--borderRadius);
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
color: var(--surfaceTxtColor);
|
||||
}
|
||||
}
|
||||
|
||||
.credits {
|
||||
--creditsGap: 20px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--creditsGap);
|
||||
margin: 0 0 0 auto;
|
||||
.credit-item {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
color: var(--surfaceTxtDisabledColor);
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
top: 50%;
|
||||
left: calc(var(--creditsGap) / -2);
|
||||
width: 1px;
|
||||
height: 10px;
|
||||
margin-top: -5px;
|
||||
opacity: 0.5;
|
||||
background: var(--surfaceTxtDisabledColor);
|
||||
}
|
||||
&:first-child::before {
|
||||
content: none;
|
||||
display: none;
|
||||
}
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus-within {
|
||||
color: var(--surfaceTxtColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-sidebar {
|
||||
--sidebarSpacing: calc(var(--spacing) / 2);
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: var(--pageSidebarWidth);
|
||||
min-width: var(--pageSidebarWidth);
|
||||
max-width: min(400px, 80%);
|
||||
flex-shrink: 0;
|
||||
overflow: auto;
|
||||
background: var(--surfaceAlt1Color);
|
||||
border-right: 1px solid var(--surfaceAlt2Color);
|
||||
backface-visibility: hidden; /* helps "smoothing" the clipped edge */
|
||||
.sidebar-content {
|
||||
position: relative;
|
||||
padding: var(--sidebarSpacing);
|
||||
&.scrollable {
|
||||
scrollbar-width: thin;
|
||||
overflow: auto;
|
||||
|
||||
/* scroll shadows */
|
||||
--topShadowOffset: calc(var(--sidebarSpacing) + 1px);
|
||||
--bottomShadowOffset: calc(var(--sidebarSpacing) + 1px);
|
||||
container-type: scroll-state;
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
position: sticky;
|
||||
display: block;
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
width: auto;
|
||||
height: 1px;
|
||||
margin-left: calc(-1 * var(--sidebarSpacing));
|
||||
margin-right: calc(-1 * var(--sidebarSpacing));
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
}
|
||||
&::before {
|
||||
top: calc(100% + var(--bottomShadowOffset));
|
||||
margin-bottom: calc(-1 * var(--bottomShadowOffset));
|
||||
margin-top: var(--bottomShadowOffset);
|
||||
box-shadow: var(--bottomScrollShadow);
|
||||
@container scroll-state(scrollable: bottom) {
|
||||
opacity: 1;
|
||||
transition: opacity var(--animationSpeed);
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
top: auto;
|
||||
bottom: calc(100% + var(--topShadowOffset));
|
||||
margin-top: calc(-1 * var(--topShadowOffset));
|
||||
margin-bottom: var(--topShadowOffset);
|
||||
box-shadow: var(--topScrollShadow);
|
||||
@container scroll-state(scrollable: top) {
|
||||
opacity: 1;
|
||||
transition: opacity var(--animationSpeed);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.sidebar-content:has(+ .sidebar-content) {
|
||||
padding-bottom: 0;
|
||||
--bottomShadowOffset: 1px;
|
||||
}
|
||||
.sidebar-search {
|
||||
--inputPadding: var(--sidebarSpacing);
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--surfaceAlt2Color);
|
||||
min-height: 50px;
|
||||
--inputColor: var(--surfaceAlt1Color);
|
||||
--inputFocusColor: var(--surfaceAlt2Color);
|
||||
--inputBorderColor: var(--surfaceAlt3Color);
|
||||
.fields {
|
||||
height: 100%;
|
||||
}
|
||||
.field {
|
||||
border-radius: 0;
|
||||
height: 100%;
|
||||
input {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
hr {
|
||||
margin: var(--sidebarSpacing) 0;
|
||||
}
|
||||
.nav-group {
|
||||
border: 0;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
margin: 0 0 var(--sidebarSpacing);
|
||||
transition: none;
|
||||
&:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: 30px;
|
||||
font-weight: bold;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
user-select: none;
|
||||
font-size: var(--smFontSize);
|
||||
color: var(--surfaceTxtHintColor);
|
||||
transition: color var(--animationSpeed);
|
||||
&::marker {
|
||||
content: "";
|
||||
display: none;
|
||||
}
|
||||
&::before {
|
||||
content: "\EA4E";
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
align-content: center;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
top: auto;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
right: auto;
|
||||
order: 1;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 1em;
|
||||
font-weight: normal;
|
||||
font-family: var(--iconFontFamily);
|
||||
}
|
||||
.actions {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
order: 100;
|
||||
gap: 5px;
|
||||
opacity: 0;
|
||||
margin: 0 0 0 auto;
|
||||
transform: translateX(3px);
|
||||
transition:
|
||||
transform var(--animationSpeed),
|
||||
opacity var(--animationSpeed);
|
||||
&:focus-within {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus-visible {
|
||||
cursor: pointer;
|
||||
color: var(--surfaceTxtColor);
|
||||
.actions {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
&[tabindex="-1"] {
|
||||
cursor: default;
|
||||
color: var(--surfaceTxtHintColor);
|
||||
&::before {
|
||||
content: none;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&::details-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
gap: 5px;
|
||||
background: none;
|
||||
}
|
||||
|
||||
&[open] {
|
||||
summary {
|
||||
&::before {
|
||||
content: "\EA78";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.compact &::details-content,
|
||||
&.compact::details-content {
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
outline: 0;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
font-size: var(--lgFontSize);
|
||||
color: var(--surfaceTxtHintColor);
|
||||
min-height: var(--btnHeight);
|
||||
border-radius: var(--borderRadius);
|
||||
transition:
|
||||
color var(--animationSpeed),
|
||||
background var(--animationSpeed);
|
||||
.txt {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.pin {
|
||||
font-size: 0.8em;
|
||||
margin-left: auto;
|
||||
margin-right: -5px;
|
||||
padding: 2px;
|
||||
color: var(--surfaceTxtDisabledColor);
|
||||
border-radius: var(--borderRadius);
|
||||
opacity: 0;
|
||||
transform: translateX(3px);
|
||||
transition: color var(--animationSpeed),
|
||||
opacity var(--animationSpeed),
|
||||
transform var(--animationSpeed);
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
color: var(--surfaceTxtColor);
|
||||
}
|
||||
}
|
||||
&:hover .pin,
|
||||
&:focus-visible .pin,
|
||||
&:active .pin,
|
||||
.pin:hover,
|
||||
.pin:focus-visible,
|
||||
.pin:active,
|
||||
.pin.active {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
&:hover,
|
||||
&:focus-visible,
|
||||
&:active,
|
||||
&.active {
|
||||
background: var(--surfaceAlt2Color);
|
||||
}
|
||||
&.active {
|
||||
color: var(--surfaceTxtColor);
|
||||
}
|
||||
&:active {
|
||||
background: var(--surfaceAlt3Color);
|
||||
transition-duration: var(--activeAnimationSpeed);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dragline {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&[data-responsive="true"] {
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateX(-30px);
|
||||
transition: opacity var(--animationSpeed),
|
||||
visibility var(--animationSpeed),
|
||||
transform var(--animationSpeed);
|
||||
.dragline {
|
||||
display: none;
|
||||
}
|
||||
&.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateX(0);
|
||||
box-shadow: 100px 0px 0px 1000px var(--modalOverlayColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn.responsive-sidebar-btn {
|
||||
padding: 0 10px;
|
||||
margin: 0 -5px;
|
||||
min-height: var(--smBtnHeight);
|
||||
height: auto;
|
||||
align-self: stretch;
|
||||
i {
|
||||
margin-top: 2px; /* visual alignment */
|
||||
}
|
||||
}
|
||||
|
||||
.collections-sidebar {
|
||||
.sidebar-content.collections-list {
|
||||
--topShadowOffset: 6px;
|
||||
--bottomShadowOffset: 6px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.page-content.full-height {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: normal;
|
||||
gap: 0;
|
||||
}
|
||||
136
ui/src/css/list.css
Normal file
136
ui/src/css/list.css
Normal file
@@ -0,0 +1,136 @@
|
||||
.list {
|
||||
--borderColor: var(--surfaceAlt3Color);
|
||||
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
color: var(--surfaceTxtColor);
|
||||
background: var(--surfaceColor);
|
||||
border: 1px solid var(--borderColor);
|
||||
border-radius: var(--borderRadius);
|
||||
scrollbar-width: thin;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
word-break: break-word;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
gap: 10px;
|
||||
outline: 0;
|
||||
padding: 10px var(--inputPadding);
|
||||
min-height: 54px;
|
||||
box-shadow: 0px -1px 0 0 var(--borderColor);
|
||||
transition: background var(--animationSpeed);
|
||||
.content {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
user-select: text;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.actions {
|
||||
gap: 10px;
|
||||
flex-shrink: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin: -1px -5px -1px 0;
|
||||
&.autohide {
|
||||
opacity: 0;
|
||||
transform: translateX(5px);
|
||||
transition:
|
||||
transform var(--animationSpeed),
|
||||
opacity var(--animationSpeed),
|
||||
visibility var(--animationSpeed);
|
||||
|
||||
/* not mouse-pointer interfaces */
|
||||
@media only screen and (hover: none) {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .btn.block {
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
&.sm {
|
||||
border-radius: var(--borderRadius);
|
||||
}
|
||||
}
|
||||
&:has(> .btn.block) {
|
||||
padding: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
&:has(> .btn.sm.block) {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus-visible,
|
||||
&:focus-within,
|
||||
&:active {
|
||||
.actions.autohide {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
&[data-dragstart="true"],
|
||||
&.active {
|
||||
background: var(--surfaceAlt1Color);
|
||||
}
|
||||
|
||||
&[data-dragstart="true"] {
|
||||
.actions.autohide {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.disabled).highlight,
|
||||
&:not(.disabled).handle {
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
background: var(--surfaceAlt1Color);
|
||||
}
|
||||
&:active {
|
||||
background: var(--surfaceAlt2Color);
|
||||
transition-duration: var(--activeAnimationSpeed);
|
||||
}
|
||||
}
|
||||
&.handle {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&.deleted {
|
||||
cursor: default;
|
||||
.content {
|
||||
opacity: 0.6;
|
||||
.txt {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled:not(.active) {
|
||||
cursor: default;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
&.sm {
|
||||
.list-item {
|
||||
min-height: var(--btnHeight);
|
||||
padding: 5px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
248
ui/src/css/logs.css
Normal file
248
ui/src/css/logs.css
Normal file
@@ -0,0 +1,248 @@
|
||||
.logs-chart {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
max-height: 0; /* fallback for interpolate-size */
|
||||
margin: 0;
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
overflow: hidden;
|
||||
touch-action: none;
|
||||
transition:
|
||||
opacity var(--animationSpeed),
|
||||
max-height var(--slideAnimationSpeed),
|
||||
height var(--slideAnimationSpeed);
|
||||
|
||||
.chart-tooltip {
|
||||
width:;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
padding: 5px;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
font-size: var(--smFontSize);
|
||||
line-height: 1;
|
||||
border-radius: var(--borderRadius);
|
||||
color: var(--tooltipTxtColor);
|
||||
background: var(--tooltipSurfaceColor);
|
||||
pointer-events: none;
|
||||
box-shadow: var(--boxShadow);
|
||||
.content-primary {
|
||||
font-weight: bold;
|
||||
}
|
||||
.content-secondary {
|
||||
opacity: 0.6;
|
||||
font-size: 0.85em;
|
||||
margin: 3px 0 1px;
|
||||
}
|
||||
}
|
||||
|
||||
/* chart inited */
|
||||
&:has(.uplot) {
|
||||
height: auto;
|
||||
max-height: 200px; /* fallback for interpolate-size */
|
||||
}
|
||||
.uplot {
|
||||
padding-bottom: var(--smSpacing);
|
||||
}
|
||||
|
||||
/* states */
|
||||
&.loading {
|
||||
opacity: 0.7;
|
||||
}
|
||||
&.nodata {
|
||||
height: 0;
|
||||
max-height: 0;
|
||||
}
|
||||
&.zoomed {
|
||||
/* x axis pan handle */
|
||||
.u-over + .u-axis {
|
||||
cursor: ew-resize;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logs-reset-zoom-ctrl {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
left: 50%;
|
||||
top: 0px;
|
||||
transform: translateX(-50%);
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
text-align: center;
|
||||
gap: 5px;
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
font-weight: bold;
|
||||
font-size: var(--smFontSize);
|
||||
line-height: 1;
|
||||
padding: 5px 8px;
|
||||
border-radius: var(--borderRadius);
|
||||
color: var(--surfaceTxtColor);
|
||||
background: var(--surfaceAlt3Color);
|
||||
transition: opacity var(--animationSpeed);
|
||||
.content-secondary {
|
||||
font-weight: normal;
|
||||
font-size: 0.85em;
|
||||
margin-top: 5px;
|
||||
}
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.logs-chart-loader {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -80%);
|
||||
}
|
||||
|
||||
.logs-chart-container {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.logs-table {
|
||||
.col-field-name-level {
|
||||
width: 1px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.col-field-name-message {
|
||||
word-break: break-word;
|
||||
.content-primary {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
.content-secondary {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 7px;
|
||||
}
|
||||
}
|
||||
.log-request {
|
||||
/* requests use the url as message */
|
||||
.col-field-name-message .content-primary {
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logs-include-superuser-requests {
|
||||
width: 150px;
|
||||
.txt {
|
||||
line-height: 1;
|
||||
margin-top: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
.log-level-label {
|
||||
min-width: 80px;
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
justify-content: center;
|
||||
&::before {
|
||||
content: "";
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 6px;
|
||||
background: var(--surfaceAlt4Color);
|
||||
}
|
||||
|
||||
/* levels */
|
||||
&.level-0::before {
|
||||
background: var(--successColor);
|
||||
}
|
||||
&.level-4::before {
|
||||
background: var(--warningColor);
|
||||
}
|
||||
&.level-8::before {
|
||||
background: var(--dangerColor);
|
||||
}
|
||||
}
|
||||
|
||||
.page-logs {
|
||||
.page-content {
|
||||
padding-top: 0;
|
||||
}
|
||||
.page-header {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 750px) {
|
||||
.page-header .logs-searchbar {
|
||||
order: 99;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.page-table-wrapper .logs-table {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
table-layout: fixed;
|
||||
thead {
|
||||
display: none;
|
||||
}
|
||||
tbody {
|
||||
tr {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 10px 0;
|
||||
border-top: 1px solid var(--surfaceAlt2Color);
|
||||
}
|
||||
td {
|
||||
display: block;
|
||||
height: auto;
|
||||
padding: 5px var(--spacing);
|
||||
border: 0;
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
white-space: normal;
|
||||
background: none !important;
|
||||
&.col-bulk-select {
|
||||
width: auto;
|
||||
padding: 0 0 0 var(--spacing);
|
||||
align-content: center;
|
||||
}
|
||||
&.col-field-name-level {
|
||||
width: auto;
|
||||
flex-grow: 1;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.log-level-label {
|
||||
width: 100%;
|
||||
}
|
||||
.col-field-name-message .content-secondary {
|
||||
gap: 5px;
|
||||
.label {
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
.col-meta {
|
||||
display: none;
|
||||
}
|
||||
~ .bulkbar {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
transform: none !important;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
41
ui/src/css/map.css
Normal file
41
ui/src/css/map.css
Normal file
@@ -0,0 +1,41 @@
|
||||
.map-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 200px;
|
||||
}
|
||||
.map-box {
|
||||
z-index: 1;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.map-search {
|
||||
--searchWidth: 400px;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 10px;
|
||||
left: calc((100% - var(--searchWidth)) / 2);
|
||||
height: auto;
|
||||
width: var(--searchWidth);
|
||||
max-width: 90%;
|
||||
opacity: 0.8;
|
||||
transition: opacity var(--animationSpeed);
|
||||
input {
|
||||
background: inherit;
|
||||
}
|
||||
.field {
|
||||
background: var(--surfaceColor) !important;
|
||||
box-shadow: var(--boxShadow);
|
||||
}
|
||||
.dropdown {
|
||||
border: 0;
|
||||
max-height: 180px;
|
||||
}
|
||||
&:focus-within {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
302
ui/src/css/modal.css
Normal file
302
ui/src/css/modal.css
Normal file
@@ -0,0 +1,302 @@
|
||||
.modal {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
width: 620px;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
opacity: 0;
|
||||
word-break: break-word;
|
||||
color: var(--surfaceTxtColor);
|
||||
background: var(--surfaceColor);
|
||||
transform: translateX(30px);
|
||||
backface-visibility: hidden;
|
||||
transition-property: opacity, transform, width, display;
|
||||
transition-duration: var(--modalAnimationSpeed);
|
||||
transition-behavior: allow-discrete;
|
||||
box-shadow: var(--leftBoxShadow);
|
||||
overscroll-behavior: none;
|
||||
|
||||
&[data-modal-state="open"] {
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
@starting-style {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
}
|
||||
|
||||
/* overlays */
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: -2;
|
||||
left: -100vw;
|
||||
top: -100vh;
|
||||
width: 200vw;
|
||||
height: 200vh;
|
||||
background: var(--modalOverlayColor);
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
.modal-header,
|
||||
.modal-content,
|
||||
.modal-footer {
|
||||
outline: 0;
|
||||
padding: var(--spacing);
|
||||
}
|
||||
.modal-header,
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
gap: var(--smSpacing);
|
||||
padding-top: calc(var(--spacing) - 10px);
|
||||
padding-bottom: calc(var(--spacing) - 10px);
|
||||
}
|
||||
.modal-footer {
|
||||
margin-top: auto;
|
||||
border-top: 1px solid var(--surfaceAlt2Color);
|
||||
}
|
||||
.modal-content {
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
overflow: auto;
|
||||
scrollbar-width: thin;
|
||||
> :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.modal-header .modal-close-btn.transparent {
|
||||
margin-right: -10px; /* visually align */
|
||||
}
|
||||
.modal-header:not(.isolated) ~ .modal-content {
|
||||
padding-top: 5px;
|
||||
}
|
||||
.modal-header.isolated {
|
||||
background: var(--surfaceAlt1Color);
|
||||
border-bottom: 1px solid var(--surfaceAlt2Color);
|
||||
border-top-left-radius: inherit;
|
||||
border-top-right-radius: inherit;
|
||||
}
|
||||
.modal-title {
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
/* sizes */
|
||||
&.sm {
|
||||
width: 480px;
|
||||
}
|
||||
&.lg {
|
||||
width: 880px;
|
||||
}
|
||||
&.full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.preview,
|
||||
&.popup {
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
height: min-content;
|
||||
max-width: 95%;
|
||||
max-height: 95%;
|
||||
box-shadow: var(--boxShadow);
|
||||
border-radius: var(--lgBorderRadius);
|
||||
transform: scale(0.98);
|
||||
|
||||
&.full {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.modal-header,
|
||||
.modal-content,
|
||||
.modal-footer {
|
||||
border-radius: inherit;
|
||||
}
|
||||
.modal-header,
|
||||
.modal-footer {
|
||||
padding-top: calc(var(--spacing) - 5px);
|
||||
padding-bottom: calc(var(--spacing) - 5px);
|
||||
}
|
||||
.modal-header:has(~ .modal-content),
|
||||
.modal-header:has(~ .modal-footer),
|
||||
.modal-content:has(~ .modal-footer) {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.modal-header ~ .modal-content,
|
||||
.modal-content ~ .modal-footer,
|
||||
.modal-header ~ .modal-footer {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.modal-footer {
|
||||
background: var(--surfaceAlt1Color);
|
||||
}
|
||||
|
||||
&[data-modal-state="open"] {
|
||||
transform: scale(1);
|
||||
@starting-style {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.preview {
|
||||
width: min-content;
|
||||
min-width: 400px;
|
||||
min-height: 300px;
|
||||
.modal-footer {
|
||||
padding: var(--smSpacing);
|
||||
}
|
||||
.modal-content {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
&:has(img) {
|
||||
width: max-content;
|
||||
}
|
||||
&::before,
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
object {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* non-image preview */
|
||||
&:has(object) {
|
||||
width: 75%;
|
||||
height: 85%;
|
||||
@media (max-width: 900px) {
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
}
|
||||
}
|
||||
&.preview-audio {
|
||||
width: 500px;
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* content scroll shadows */
|
||||
.modal-content {
|
||||
--topShadowOffset: calc(var(--spacing) + 1px);
|
||||
--bottomShadowOffset: calc(var(--spacing) + 1px);
|
||||
min-height: 92px; /* ensure that the content is large enough for the negative shadow margins */
|
||||
container-type: scroll-state;
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
position: sticky;
|
||||
display: block;
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
width: auto;
|
||||
height: 1px;
|
||||
margin-left: calc(-1 * var(--spacing));
|
||||
margin-right: calc(-1 * var(--spacing));
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
}
|
||||
&::before {
|
||||
top: calc(100% + var(--bottomShadowOffset));
|
||||
margin-bottom: calc(-1 * var(--bottomShadowOffset));
|
||||
margin-top: var(--bottomShadowOffset);
|
||||
box-shadow: var(--bottomScrollShadow);
|
||||
@container scroll-state(scrollable: bottom) {
|
||||
opacity: 1;
|
||||
transition: opacity var(--animationSpeed);
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
top: auto;
|
||||
bottom: calc(100% + var(--topShadowOffset));
|
||||
margin-top: calc(-1 * var(--topShadowOffset));
|
||||
margin-bottom: var(--topShadowOffset);
|
||||
box-shadow: var(--topScrollShadow);
|
||||
@container scroll-state(scrollable: top) {
|
||||
opacity: 1;
|
||||
transition: opacity var(--animationSpeed);
|
||||
}
|
||||
}
|
||||
.modal-header:not(.isolated) ~ &::after {
|
||||
--topShadowOffset: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-header .tabs-header {
|
||||
width: auto;
|
||||
flex-grow: 1;
|
||||
|
||||
.tab-item {
|
||||
font-size: var(--lgFontSize);
|
||||
}
|
||||
|
||||
/* "merge" with the header bottom */
|
||||
.modal-header.isolated &:last-child {
|
||||
padding: 0 var(--spacing);
|
||||
border-bottom: 0;
|
||||
margin-left: calc(-1 * var(--spacing));
|
||||
margin-right: calc(-1 * var(--spacing));
|
||||
margin-bottom: calc(-1 * var(--spacing) + 9px);
|
||||
.tab-item {
|
||||
border: 1px solid transparent;
|
||||
border-bottom: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
background: var(--surfaceAlt2Color);
|
||||
}
|
||||
&:active {
|
||||
background: var(--surfaceAlt3Color);
|
||||
}
|
||||
&.active {
|
||||
background: var(--surfaceColor);
|
||||
border-color: var(--surfaceAlt2Color);
|
||||
}
|
||||
}
|
||||
}
|
||||
.popup .modal-header.isolated &:last-child {
|
||||
margin-bottom: calc(-1 * var(--spacing) + 4px);
|
||||
}
|
||||
}
|
||||
74
ui/src/css/prism.css
Normal file
74
ui/src/css/prism.css
Normal file
@@ -0,0 +1,74 @@
|
||||
/* PrismJS 1.30.0 theme based on prism-solarized-light */
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: var(--surfaceTxtHintColor);
|
||||
font-family: var(--monospaceFontFamily);
|
||||
font-size: 1em;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
tab-size: 4;
|
||||
hyphens: none;
|
||||
}
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: 0.5em 0;
|
||||
overflow: auto;
|
||||
}
|
||||
.token.cdata,
|
||||
.token.comment,
|
||||
.token.doctype,
|
||||
.token.prolog {
|
||||
color: var(--prismCommentColor);
|
||||
}
|
||||
.token.punctuation {
|
||||
color: var(--prismPunctuationColor);
|
||||
}
|
||||
.token.namespace {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.token.constant,
|
||||
.token.boolean,
|
||||
.token.number {
|
||||
color: var(--prismNumberColor);
|
||||
}
|
||||
.token.deleted,
|
||||
.token.property,
|
||||
.token.symbol,
|
||||
.token.tag,
|
||||
.token.tag .token.punctuation {
|
||||
color: var(--prismPropertyColor);
|
||||
}
|
||||
.token.attr-name,
|
||||
.token.builtin,
|
||||
.token.char,
|
||||
.token.inserted,
|
||||
.token.selector,
|
||||
.token.string,
|
||||
.token.url {
|
||||
color: var(--prismStringColor);
|
||||
}
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: var(--prismKeywordColor);
|
||||
}
|
||||
.token.class-name,
|
||||
.token.function,
|
||||
.token.important,
|
||||
.token.regex,
|
||||
.token.variable {
|
||||
color: var(--prismFunctionColor);
|
||||
}
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
98
ui/src/css/providers.css
Normal file
98
ui/src/css/providers.css
Normal file
@@ -0,0 +1,98 @@
|
||||
.provider-logo {
|
||||
--size: 40px;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
padding: 8px;
|
||||
line-height: 1;
|
||||
font-size: var(--fontSize);
|
||||
color: var(--surfaceTxtDisabledColor);
|
||||
background: var(--surfaceAlt1Color);
|
||||
border-radius: var(--borderRadius);
|
||||
&:empty {
|
||||
&::before {
|
||||
content: "\f452";
|
||||
font-family: var(--iconFontFamily);
|
||||
}
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.provider-card {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
min-height: var(--lgBtnHeight);
|
||||
border-radius: var(--borderRadius);
|
||||
border: 1px solid var(--surfaceAlt2Color);
|
||||
|
||||
.content {
|
||||
flex-grow: 1;
|
||||
word-break: break-word;
|
||||
font-size: var(--fontSize);
|
||||
line-height: 1.1;
|
||||
p {
|
||||
margin: 5px 0;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.primary-txt,
|
||||
.secondary-txt {
|
||||
display: block;
|
||||
}
|
||||
.secondary-txt {
|
||||
color: var(--surfaceTxtHintColor);
|
||||
font-size: var(--smFontSize);
|
||||
margin: 2px 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.handle {
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
text-decoration: none;
|
||||
transition: background var(--animationSpeed);
|
||||
.provider-logo {
|
||||
transition: background var(--animationSpeed);
|
||||
}
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
background: var(--surfaceAlt1Color);
|
||||
.provider-logo {
|
||||
background: var(--surfaceAlt2Color);
|
||||
}
|
||||
}
|
||||
&.active,
|
||||
&:active {
|
||||
.provider-logo {
|
||||
transition-duration: var(--activeAnimationSpeed);
|
||||
background: var(--surfaceAlt3Color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.error {
|
||||
border-color: var(--dangerColor);
|
||||
background: var(--surfaceDangerColor);
|
||||
}
|
||||
}
|
||||
|
||||
.btn.add-provider-btn {
|
||||
font-size: var(--fontSize);
|
||||
line-height: var(--lineHeight);
|
||||
height: 100%;
|
||||
}
|
||||
91
ui/src/css/ratelimit.css
Normal file
91
ui/src/css/ratelimit.css
Normal file
@@ -0,0 +1,91 @@
|
||||
.rate-limit-table {
|
||||
background: none;
|
||||
tr,
|
||||
td,
|
||||
th {
|
||||
background: none;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
min-height: 0;
|
||||
height: auto;
|
||||
}
|
||||
th {
|
||||
padding: 0 0 10px;
|
||||
font-size: var(--smFontSize);
|
||||
line-height: var(--smLineHeight);
|
||||
}
|
||||
.rate-limit-row {
|
||||
.fields,
|
||||
.field,
|
||||
input,
|
||||
select,
|
||||
.input,
|
||||
.select {
|
||||
background: none;
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
}
|
||||
td {
|
||||
background: var(--surfaceAlt2Color);
|
||||
border-left: 1px solid var(--surfaceAlt3Color);
|
||||
border-top: 1px solid var(--surfaceAlt3Color);
|
||||
transition: background var(--animationSpeed);
|
||||
&:first-child {
|
||||
border-left: 0px;
|
||||
}
|
||||
&:focus-within {
|
||||
background: var(--surfaceAlt3Color);
|
||||
}
|
||||
&:has(.error:not(.hidden)) {
|
||||
background: var(--surfaceDangerColor);
|
||||
}
|
||||
}
|
||||
&:first-child {
|
||||
td {
|
||||
border-top: 0px;
|
||||
}
|
||||
td:first-child {
|
||||
border-top-left-radius: var(--borderRadius);
|
||||
}
|
||||
td:last-child {
|
||||
border-top-right-radius: var(--borderRadius);
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
td:first-child {
|
||||
border-bottom-left-radius: var(--borderRadius);
|
||||
}
|
||||
td:last-child {
|
||||
border-bottom-right-radius: var(--borderRadius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.col-label {
|
||||
width: 60%;
|
||||
}
|
||||
.col-requests,
|
||||
.col-duration {
|
||||
width: 15%;
|
||||
}
|
||||
.col-audience {
|
||||
width: 1px;
|
||||
min-width: 130px;
|
||||
white-space: nowrap;
|
||||
.selected-container {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
.col-action {
|
||||
width: 1px;
|
||||
min-width: 0;
|
||||
padding: 0 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.rate-limit-table-wrapper {
|
||||
overflow: auto;
|
||||
.rate-limit-table {
|
||||
min-width: 550px;
|
||||
}
|
||||
}
|
||||
325
ui/src/css/recordFields.css
Normal file
325
ui/src/css/recordFields.css
Normal file
@@ -0,0 +1,325 @@
|
||||
.accordion.record-field-settings {
|
||||
--fieldsGap: 10px;
|
||||
border-color: var(--surfaceAlt4Color);
|
||||
|
||||
summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--fieldsGap);
|
||||
padding: 4px;
|
||||
min-height: 0;
|
||||
background: var(--inputColor);
|
||||
container-type: inline-size;
|
||||
.header-fields {
|
||||
display: flex;
|
||||
gap: var(--fieldsGap);
|
||||
width: 100%;
|
||||
align-content: center;
|
||||
align-items: stretch;
|
||||
.header-select {
|
||||
max-width: 150px;
|
||||
}
|
||||
/* auto delimiter */
|
||||
> * {
|
||||
position: relative;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
bottom: -4px;
|
||||
right: -5px;
|
||||
width: 1px;
|
||||
height: auto;
|
||||
min-height: 0;
|
||||
flex-shrink: 0;
|
||||
background: var(--surfaceAlt4Color);
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
i.ri-settings-3-line {
|
||||
transition:
|
||||
color var(--animationSpeed),
|
||||
transform var(--animationSpeed);
|
||||
}
|
||||
}
|
||||
.sort-handle {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
left: -30px;
|
||||
width: 30px;
|
||||
height: 100%;
|
||||
padding-left: 7px;
|
||||
align-content: center;
|
||||
flex-shrink: 0;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
color: var(--surfaceTxtHintColor);
|
||||
opacity: 0;
|
||||
transform: translateX(3px);
|
||||
transition:
|
||||
color var(--animationSpeed),
|
||||
opacity var(--animationSpeed),
|
||||
transform var(--animationSpeed);
|
||||
&:hover,
|
||||
&:active {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
color: var(--surfaceTxtColor);
|
||||
}
|
||||
}
|
||||
|
||||
@container (width <= 480px) {
|
||||
.header-fields {
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
padding: 5px;
|
||||
border-radius: var(--borderRadius);
|
||||
background: var(--surfaceColor);
|
||||
> * {
|
||||
flex-grow: 1;
|
||||
max-width: none !important;
|
||||
&::before {
|
||||
content: none;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
summary .sort-handle {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.record-field-settings-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--smSpacing);
|
||||
margin-top: var(--smSpacing);
|
||||
> .field,
|
||||
> .fields {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
summary + .record-field-settings-footer {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.field-labels {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
gap: 2px;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
.label {
|
||||
min-height: 0;
|
||||
line-height: 1.2;
|
||||
font-size: 0.7em;
|
||||
padding: 2px 3px;
|
||||
}
|
||||
}
|
||||
|
||||
&[open] {
|
||||
box-shadow: 0px 0px 0px 1px var(--surfaceAlt3Color);
|
||||
summary {
|
||||
outline: 0;
|
||||
.btn i.ri-settings-3-line {
|
||||
color: var(--surfaceTxtColor);
|
||||
transform: rotate(-30deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.deleted {
|
||||
summary {
|
||||
background: var(--surfaceAlt1Color);
|
||||
.field,
|
||||
.fields {
|
||||
background: none !important;
|
||||
}
|
||||
}
|
||||
.header-fields {
|
||||
opacity: 0.7;
|
||||
> *::after {
|
||||
background: var(--surfaceAlt2Color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-select.field-select-choices-input,
|
||||
.header-select.collections-select {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.record-field-view {
|
||||
display: block;
|
||||
vertical-align: top;
|
||||
align-content: center;
|
||||
text-align: left;
|
||||
max-width: 100%;
|
||||
min-width: 0; /* flex summary ellipsis fix */
|
||||
&:empty {
|
||||
display: none !important;
|
||||
}
|
||||
.missing-value {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
color: var(--surfaceTxtDisabledColor);
|
||||
font-size: var(--smFontSize);
|
||||
align-content: center;
|
||||
&::before {
|
||||
content: "N/A";
|
||||
}
|
||||
}
|
||||
.delimiter {
|
||||
line-height: 1;
|
||||
font-size: var(--smFontSize);
|
||||
color: var(--surfaceTxtDisabledColor);
|
||||
}
|
||||
.marker {
|
||||
line-height: 1;
|
||||
padding-right: 5px;
|
||||
align-content: center;
|
||||
font-size: var(--smFontSize);
|
||||
color: var(--surfaceTxtHintColor);
|
||||
}
|
||||
}
|
||||
|
||||
.record-field-input {
|
||||
.record-summary {
|
||||
animation: fadeIn var(--animationSpeed);
|
||||
}
|
||||
}
|
||||
|
||||
.field-type-bool {
|
||||
&.record-field-view .label {
|
||||
min-width: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.field-type-json {
|
||||
&.record-field-view {
|
||||
overflow: auto;
|
||||
max-height: 400px;
|
||||
white-space: pre-wrap;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
.input.code-editor {
|
||||
min-height: 38px;
|
||||
}
|
||||
.json-state {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.field-type-geoPoint {
|
||||
&.record-field-view {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.field-type-select {
|
||||
.field-select-choices-input {
|
||||
> input {
|
||||
font-size: var(--smFontSize);
|
||||
}
|
||||
}
|
||||
.field-select-choices-dropdown {
|
||||
max-height: 400px;
|
||||
textarea {
|
||||
font-size: var(--smFontSize);
|
||||
max-height: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.more-marker {
|
||||
align-self: flex-end;
|
||||
color: var(--surfaceTxtHintColor);
|
||||
}
|
||||
|
||||
.field-type-file {
|
||||
&.record-field-view {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.field-type-editor {
|
||||
&.record-field-view {
|
||||
width: 100%;
|
||||
}
|
||||
&.record-field-input {
|
||||
/* fixed size to minimize flickering */
|
||||
.field {
|
||||
min-height: 296px;
|
||||
}
|
||||
.loading-textarea {
|
||||
resize: none
|
||||
}
|
||||
.pb-tinymce {
|
||||
animation: fadeIn var(--animationSpeed);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.field-type-relation {
|
||||
&.record-field-view {
|
||||
display: inline-flex;
|
||||
align-items: stretch;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
.record-summary & {
|
||||
gap: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hidden-field-blur {
|
||||
filter: blur(2.5px);
|
||||
transition: filter var(--animationSpeed);
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus-within {
|
||||
filter: none;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------- */
|
||||
|
||||
.records-list-columns-dropdown {
|
||||
max-height: 230px;
|
||||
}
|
||||
|
||||
.record-upsert-modal {
|
||||
width: 720px;
|
||||
.modal-title {
|
||||
min-height: var(--smBtnHeight); /* minimize flickering */
|
||||
align-content: center;
|
||||
}
|
||||
.modal-content {
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
}
|
||||
.record-upsert-modal,
|
||||
.record-preview-modal {
|
||||
&:has(.large-modal) {
|
||||
width: 832px;
|
||||
}
|
||||
}
|
||||
56
ui/src/css/recordFilePicker.css
Normal file
56
ui/src/css/recordFilePicker.css
Normal file
@@ -0,0 +1,56 @@
|
||||
.record-file-picker-collection-select-btn {
|
||||
padding-left: var(--smSpacing);
|
||||
padding-right: calc(var(--smSpacing) - 5px);
|
||||
width: 27%;
|
||||
white-space: nowrap;
|
||||
.collection-name {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.record-file-picker-thumb-select {
|
||||
min-width: 170px;
|
||||
}
|
||||
|
||||
.record-file-picker-list {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
grid-gap: var(--smSpacing);
|
||||
.list-item {
|
||||
--thumbSize: 100%;
|
||||
border-width: 2px;
|
||||
}
|
||||
@media only screen and (max-width: 700px) {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
@media only screen and (max-width: 450px) {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.record-file-picker-modal {
|
||||
width: var(--wrapperWidth);
|
||||
@media only screen and (max-width: 550px) {
|
||||
.modal-header {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.record-file-picker-collection-select-btn {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.records-searchbar-wrapper {
|
||||
flex-grow: 1;
|
||||
order: 99;
|
||||
}
|
||||
.record-file-picker-thumb-select {
|
||||
min-width: 100px;
|
||||
}
|
||||
.modal-footer .btn.expanded,
|
||||
.modal-footer .btn.expanded-sm,
|
||||
.modal-footer .btn.expanded-lg {
|
||||
min-width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
71
ui/src/css/recordSummary.css
Normal file
71
ui/src/css/recordSummary.css
Normal file
@@ -0,0 +1,71 @@
|
||||
.record-summary {
|
||||
padding: 3px 5px;
|
||||
flex-shrink: 1;
|
||||
justify-content: flex-start;
|
||||
.thumb {
|
||||
--thumbSize: 28px;
|
||||
border-width: 1px;
|
||||
font-size: 75%;
|
||||
}
|
||||
i {
|
||||
font-size: 1em;
|
||||
}
|
||||
.record-preview-icon {
|
||||
padding: 0 5px;
|
||||
margin: 0 -5px;
|
||||
height: 100%;
|
||||
align-content: center;
|
||||
}
|
||||
.record-summary {
|
||||
.thumb {
|
||||
--thumbSize: 24px;
|
||||
}
|
||||
.record-summary .thumb {
|
||||
--thumbSize: 20px;
|
||||
}
|
||||
}
|
||||
.field-content & {
|
||||
border-width: 1px;
|
||||
}
|
||||
.record-field-view {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
/* reduce the max width of common large text fields inside table */
|
||||
td .record-summary {
|
||||
.field-type-text,
|
||||
.field-type-editor,
|
||||
.field-type-json {
|
||||
max-width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
.record-summary-dropdown {
|
||||
font-family: var(--monospaceFontFamily);
|
||||
font-size: var(--smFontSize);
|
||||
line-height: var(--smLineHeight);
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
max-height: 305px;
|
||||
min-width: anchor-size(width);
|
||||
user-select: text;
|
||||
cursor: default;
|
||||
&[popover] {
|
||||
position-area: bottom span-right;
|
||||
position-try-fallbacks: flip-block;
|
||||
}
|
||||
.record-header {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
gap: 10px;
|
||||
padding: 5px;
|
||||
align-items: center;
|
||||
font-family: var(--baseFontFamily);
|
||||
}
|
||||
.record-json {
|
||||
overflow: auto;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
}
|
||||
38
ui/src/css/recordsPicker.css
Normal file
38
ui/src/css/recordsPicker.css
Normal file
@@ -0,0 +1,38 @@
|
||||
.records-picker-list {
|
||||
max-height: 400px;
|
||||
}
|
||||
|
||||
.records-picker-selected-list {
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
align-items: stretch;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.records-picker-modal {
|
||||
.modal-header .collection-name {
|
||||
max-width: 250px;
|
||||
min-width: 0;
|
||||
flex-shrink: 0;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 550px) {
|
||||
.modal-header {
|
||||
flex-wrap: wrap;
|
||||
.collection-name {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
max-width: 80%;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
.searchbar {
|
||||
flex-grow: 1;
|
||||
order: 99;
|
||||
}
|
||||
}
|
||||
}
|
||||
9185
ui/src/css/remixicon.css
Normal file
9185
ui/src/css/remixicon.css
Normal file
File diff suppressed because it is too large
Load Diff
133
ui/src/css/ruleField.css
Normal file
133
ui/src/css/ruleField.css
Normal file
@@ -0,0 +1,133 @@
|
||||
.rule-field {
|
||||
min-height: 67px;
|
||||
.code-editor {
|
||||
z-index: 0;
|
||||
min-height: 41px;
|
||||
.highlight-overlay {
|
||||
color: var(--surfaceTxtColor);
|
||||
}
|
||||
.editor-content,
|
||||
.highlight-overlay {
|
||||
white-space: pre-line;
|
||||
}
|
||||
.editor-content:empty::before {
|
||||
font-family: var(--baseFontFamily);
|
||||
}
|
||||
}
|
||||
.superuser-toggle,
|
||||
.superuser-toggle:last-child:not(.btn) {
|
||||
border-radius: 0;
|
||||
border-bottom-left-radius: var(--borderRadius);
|
||||
border-top-right-radius: var(--borderRadius);
|
||||
}
|
||||
.superuser-toggle {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
right: 0;
|
||||
top: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
font-size: var(--smFontSize);
|
||||
padding: 8px 10px;
|
||||
color: var(--surfaceTxtHintColor);
|
||||
background: var(--surfaceAlt4Color);
|
||||
box-shadow: inset 1px -1px 2px rgba(0,0,0,0.03);
|
||||
transition:
|
||||
color var(--animationSpeed),
|
||||
background var(--animationSpeed);
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus-visible {
|
||||
color: var(--successColor);
|
||||
background: var(--surfaceAlt5Color);
|
||||
}
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
color: var(--surfaceTxtDisabledColor);
|
||||
background: var(--surfaceAlt4Color);
|
||||
}
|
||||
}
|
||||
label {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
.superusers-label {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateX(0);
|
||||
transition:
|
||||
opacity var(--animationSpeed),
|
||||
visibility var(--animationSpeed),
|
||||
transform var(--animationSpeed);
|
||||
&.hidden,
|
||||
&[hidden] {
|
||||
display: inline !important;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateX(3px);
|
||||
}
|
||||
}
|
||||
}
|
||||
.unlock-overlay {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
font-weight: bold;
|
||||
font-size: var(--smFontSize);
|
||||
color: var(--successColor);
|
||||
padding: 5px var(--smSpacing);
|
||||
border-radius: var(--borderRadius);
|
||||
background: var(--surfaceAlt1Color);
|
||||
border: 2px solid var(--surfaceAlt2Color);
|
||||
transition: border-color var(--animationSpeed);
|
||||
.txt {
|
||||
opacity: 0;
|
||||
transform: translateX(3px);
|
||||
transition:
|
||||
opacity var(--animationSpeed),
|
||||
transform var(--animationSpeed);
|
||||
}
|
||||
i {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus-visible {
|
||||
border-color: var(--surfaceAlt4Color);
|
||||
.txt {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
border-color: var(--surfaceAlt5Color);
|
||||
transition-duration: var(--activeAnimationSpeed);
|
||||
}
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
.txt {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.locked {
|
||||
label {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
505
ui/src/css/table.css
Normal file
505
ui/src/css/table.css
Normal file
@@ -0,0 +1,505 @@
|
||||
table {
|
||||
--tableSpacing: var(--inputPadding);
|
||||
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
td,
|
||||
th {
|
||||
padding: 10px max(var(--tableSpacing), 10px);
|
||||
vertical-align: middle;
|
||||
text-align: left;
|
||||
height: var(--btnHeight);
|
||||
background: var(--surfaceColor);
|
||||
border: 1px solid var(--surfaceAlt2Color);
|
||||
border-bottom-width: 0;
|
||||
&:not(:first-child) {
|
||||
border-left: 0;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
border-right: 0;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
> :first-child > tr:first-child {
|
||||
> :first-child {
|
||||
border-top-left-radius: var(--borderRadius);
|
||||
}
|
||||
> :last-child {
|
||||
border-top-right-radius: var(--borderRadius);
|
||||
}
|
||||
}
|
||||
> :last-child > tr:last-child {
|
||||
> :first-child {
|
||||
border-bottom-left-radius: var(--borderRadius);
|
||||
}
|
||||
> :last-child {
|
||||
border-bottom-right-radius: var(--borderRadius);
|
||||
}
|
||||
> td,
|
||||
> th {
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
th {
|
||||
font-weight: bold;
|
||||
font-size: 0.98em;
|
||||
line-height: 1.4;
|
||||
color: var(--surfaceTxtHintColor);
|
||||
}
|
||||
|
||||
/* special cols */
|
||||
th.sort-handle {
|
||||
position: relative;
|
||||
padding-right: 40px;
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
&.asc,
|
||||
&.desc {
|
||||
&::before {
|
||||
content: "\EA4C";
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: var(--tableSpacing);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-weight: normal;
|
||||
color: inherit;
|
||||
opacity: 0.5;
|
||||
font-family: var(--iconFontFamily);
|
||||
transition: opacity var(--animationSpeed);
|
||||
}
|
||||
}
|
||||
&.desc::before {
|
||||
content: "\EA76";
|
||||
}
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
background: var(--surfaceAlt1Color);
|
||||
&::before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
background: var(--surfaceAlt2Color);
|
||||
}
|
||||
}
|
||||
td,
|
||||
th {
|
||||
&.min-width {
|
||||
width: 1% !important;
|
||||
min-width: 0 !important;
|
||||
white-space: nowrap;
|
||||
}
|
||||
&.col-bulk-select,
|
||||
&.col-meta {
|
||||
position: sticky;
|
||||
z-index: 2;
|
||||
word-break: normal;
|
||||
white-space: nowrap;
|
||||
}
|
||||
&.col-bulk-select {
|
||||
min-width: 62px;
|
||||
width: 1%;
|
||||
left: 0;
|
||||
padding-right: 5px;
|
||||
.field {
|
||||
width: auto;
|
||||
}
|
||||
.loader {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
margin-left: -2px;
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
box-shadow: var(--leftScrollShadow);
|
||||
@container scroll-state(scrollable: left) {
|
||||
opacity: 1;
|
||||
transition: opacity var(--animationSpeed);
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
padding-right: 0;
|
||||
min-width: 50px;
|
||||
}
|
||||
}
|
||||
&.col-meta {
|
||||
width: 1%;
|
||||
right: 0;
|
||||
text-align: right;
|
||||
padding-left: 10px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 5px;
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
box-shadow: var(--rightScrollShadow);
|
||||
@container scroll-state(scrollable: right) {
|
||||
opacity: 1;
|
||||
transition: opacity var(--animationSpeed);
|
||||
}
|
||||
}
|
||||
> i {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
color: var(--surfaceTxtDisabledColor);
|
||||
transition:
|
||||
color var(--animationSpeed),
|
||||
transform var(--animationSpeed);
|
||||
will-change: transform, color;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
&.col-field-type-date,
|
||||
&.col-field-type-autodate,
|
||||
&.col-field-type-geopoint {
|
||||
width: 1%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
&.col-field-type-relation {
|
||||
min-width: 190px;
|
||||
max-width: 500px;
|
||||
}
|
||||
&.col-field-type-text {
|
||||
max-width: 300px;
|
||||
}
|
||||
&.col-field-type-editor {
|
||||
min-width: 400px;
|
||||
}
|
||||
&.col-field-type-select {
|
||||
min-width: 180px;
|
||||
}
|
||||
&.col-field-type-email {
|
||||
min-width: 120px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
&.col-field-type-number {
|
||||
white-space: nowrap;
|
||||
}
|
||||
&.col-field-type-file {
|
||||
min-width: 120px;
|
||||
}
|
||||
&.col-field-type-json {
|
||||
max-width: 300px;
|
||||
}
|
||||
&.col-field-name-id {
|
||||
width: 190px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.col-copy {
|
||||
padding-left: 0;
|
||||
.copy-to-clipboard {
|
||||
opacity: 0;
|
||||
transform: translateX(3px);
|
||||
transition:
|
||||
color var(--animationSpeed),
|
||||
opacity var(--animationSpeed),
|
||||
transform var(--animationSpeed);
|
||||
}
|
||||
}
|
||||
tr:hover .col-copy {
|
||||
.copy-to-clipboard {
|
||||
opacity: 1;
|
||||
transform: translateX(0px);
|
||||
}
|
||||
}
|
||||
|
||||
thead th {
|
||||
background: var(--surfaceAlt1Color);
|
||||
}
|
||||
|
||||
thead.sticky {
|
||||
position: sticky;
|
||||
z-index: 3;
|
||||
top: 0;
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
box-shadow: var(--topScrollShadow);
|
||||
@container scroll-state(scrollable: top) {
|
||||
opacity: 1;
|
||||
transition: opacity var(--animationSpeed);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tr.handle {
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
td,
|
||||
th {
|
||||
transition: background var(--animationSpeed);
|
||||
will-change: background;
|
||||
}
|
||||
&:hover,
|
||||
&:focus-within {
|
||||
td,
|
||||
th {
|
||||
background: var(--surfaceAlt1Color);
|
||||
}
|
||||
.col-meta > i {
|
||||
color: var(--surfaceTxtColor);
|
||||
transform: translateX(3px);
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
td,
|
||||
th {
|
||||
background: var(--surfaceAlt2Color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* performance optimizations for large tables */
|
||||
&.optimize {
|
||||
td,
|
||||
th,
|
||||
.col-bulk-select label::before,
|
||||
.col-bulk-select label::after,
|
||||
.col-meta i {
|
||||
transition: none !important;
|
||||
}
|
||||
.col-meta i {
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-table-wrapper {
|
||||
display: block;
|
||||
width: auto;
|
||||
overflow: auto;
|
||||
margin-left: calc(-1 * var(--spacing));
|
||||
margin-right: calc(-1 * var(--spacing));
|
||||
container-type: inline-size scroll-state;
|
||||
|
||||
.load-more-btn,
|
||||
.sticky-content {
|
||||
position: sticky;
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
left: var(--spacing);
|
||||
right: var(--spacing);
|
||||
max-width: calc(100cqw - (2 * var(--spacing)));
|
||||
}
|
||||
table {
|
||||
min-width: 1000px;
|
||||
border-radius: 0;
|
||||
}
|
||||
tr {
|
||||
animation: fadeIn var(--animationSpeed);
|
||||
}
|
||||
td,
|
||||
th {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
border-bottom: 1px solid var(--surfaceAlt2Color);
|
||||
&:first-child {
|
||||
padding-left: var(--spacing);
|
||||
}
|
||||
&:last-child {
|
||||
padding-right: var(--spacing);
|
||||
}
|
||||
}
|
||||
th {
|
||||
background: var(--surfaceColor);
|
||||
}
|
||||
th.sort-handle {
|
||||
border-radius: var(--borderRadius) var(--borderRadius) 0 0;
|
||||
}
|
||||
tbody {
|
||||
td,
|
||||
th {
|
||||
height: 59px;
|
||||
}
|
||||
}
|
||||
|
||||
/* content shadow */
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
position: sticky;
|
||||
display: block;
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
&::before {
|
||||
top: 0;
|
||||
box-shadow: var(--topScrollShadow);
|
||||
@container scroll-state(scrollable: top) {
|
||||
opacity: 1;
|
||||
transition: opacity var(--animationSpeed);
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
bottom: 0;
|
||||
margin-top: -1px;
|
||||
box-shadow: var(--bottomScrollShadow);
|
||||
@container scroll-state(scrollable: bottom) {
|
||||
opacity: 1;
|
||||
transition: opacity var(--animationSpeed);
|
||||
}
|
||||
}
|
||||
|
||||
&:has(thead.sticky) {
|
||||
&::before {
|
||||
content: none;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
table.responsive-table {
|
||||
min-width: 0;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
tr {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
gap: 5px;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--surfaceAlt2Color);
|
||||
~ tr {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
.col-copy {
|
||||
display: none;
|
||||
}
|
||||
.label {
|
||||
word-break: break-word;
|
||||
}
|
||||
td,
|
||||
th {
|
||||
display: block;
|
||||
height: auto;
|
||||
min-height: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
word-break: break-word;
|
||||
white-space: normal !important;
|
||||
border: 0 !important;
|
||||
width: 100% !important;
|
||||
max-width: none !important;
|
||||
min-width: 0 !important;
|
||||
background: none !important;
|
||||
&::before {
|
||||
content: attr(data-name);
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-weight: bold;
|
||||
color: var(--surfaceTxtHintColor);
|
||||
font-size: var(--smFontSize);
|
||||
line-height: var(--lineHeight);
|
||||
}
|
||||
&.col-bulk-select {
|
||||
padding: 0;
|
||||
margin-top: 0;
|
||||
align-content: center;
|
||||
}
|
||||
&.col-meta {
|
||||
display: none;
|
||||
}
|
||||
&.col-bulk-select,
|
||||
&.col-meta {
|
||||
&::before,
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.formatted-date.short {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
.secondary-date,
|
||||
.primary-date {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.record-field-view {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
td.col-bulk-select {
|
||||
width: auto !important;
|
||||
}
|
||||
td.col-field-name-id {
|
||||
width: auto !important;
|
||||
flex-grow: 1;
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
.label {
|
||||
width: 100%;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
thead tr {
|
||||
flex-direction: row;
|
||||
background: var(--surfaceColor);
|
||||
border: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
thead th {
|
||||
display: none;
|
||||
&.col-meta,
|
||||
&.col-bulk-select {
|
||||
width: auto !important;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
&.col-meta {
|
||||
padding: 0;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-table-wrapper .responsive-table {
|
||||
border: 0;
|
||||
tr {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
padding-left: var(--spacing);
|
||||
padding-right: var(--spacing);
|
||||
}
|
||||
}
|
||||
}
|
||||
58
ui/src/css/tabs.css
Normal file
58
ui/src/css/tabs.css
Normal file
@@ -0,0 +1,58 @@
|
||||
.tabs-header {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
border-bottom: 2px solid var(--surfaceAlt2Color);
|
||||
.tab-item {
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
min-width: 0;
|
||||
user-select: none;
|
||||
min-height: var(--btnHeight);
|
||||
padding: 5px var(--smSpacing);
|
||||
border-top-left-radius: var(--borderRadius);
|
||||
border-top-right-radius: var(--borderRadius);
|
||||
color: var(--surfaceTxtHintColor);
|
||||
transition:
|
||||
color var(--animationSpeed),
|
||||
background var(--animationSpeed);
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
color: var(--surfaceTxtColor);
|
||||
background: var(--surfaceAlt1Color);
|
||||
}
|
||||
&.active,
|
||||
&:active {
|
||||
color: var(--surfaceTxtColor);
|
||||
background: var(--surfaceAlt2Color);
|
||||
transition-duration: var(--activeAnimationSpeed);
|
||||
}
|
||||
}
|
||||
|
||||
&.equal-width {
|
||||
.tab-item {
|
||||
padding: 5px;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
flex-basis: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.code-block-tabs-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: calc(-1 * (var(--borderRadius)));
|
||||
code.block {
|
||||
padding: max(10px, calc(var(--smSpacing) - 5px)) max(10px, var(--smSpacing));
|
||||
}
|
||||
}
|
||||
|
||||
0
ui/src/css/tinymce.css
Normal file
0
ui/src/css/tinymce.css
Normal file
114
ui/src/css/toast.css
Normal file
114
ui/src/css/toast.css
Normal file
@@ -0,0 +1,114 @@
|
||||
@keyframes toastEntrance {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes toastContentEntrance {
|
||||
0% {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.toast {
|
||||
--toastWidth: 420px;
|
||||
--toastSurfaceColor: var(--surfaceInfoColor);
|
||||
--toastSurfaceTxtColor: var(--surfaceTxtColor);
|
||||
--toastAccentColor: var(--infoColor);
|
||||
|
||||
position: sticky;
|
||||
top: 0;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
width: var(--toastWidth);
|
||||
max-width: 95%;
|
||||
margin: 0 0 var(--smSpacing);
|
||||
animation: toastEntrance var(--animationSpeed);
|
||||
.toast-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: stretch;
|
||||
border-radius: var(--borderRadius);
|
||||
line-height: var(--lineHeight);
|
||||
color: var(--toastSurfaceTxtColor);
|
||||
background: var(--toastSurfaceColor);
|
||||
box-shadow: var(--boxShadow);
|
||||
animation: toastContentEntrance var(--animationSpeed);
|
||||
}
|
||||
.toast-content {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
word-break: break-word;
|
||||
min-height: var(--lgBtnHeight);
|
||||
padding: max(5px, calc(var(--inputPadding) - 5px)) var(--inputPadding);
|
||||
}
|
||||
.toast-icon {
|
||||
align-content: center;
|
||||
font-size: 1.2em;
|
||||
min-height: 0;
|
||||
padding: 5px 10px;
|
||||
margin-left: -1px;
|
||||
color: var(--toastAccentColor);
|
||||
border-top-left-radius: var(--borderRadius);
|
||||
border-bottom-left-radius: var(--borderRadius);
|
||||
border-right: 1px solid color-mix(in srgb, var(--toastAccentColor), transparent 90%);
|
||||
&::before {
|
||||
content: "\F414";
|
||||
font-family: var(--iconFontFamily);
|
||||
}
|
||||
}
|
||||
.toast-remove {
|
||||
margin: -5px -10px -5px 0;
|
||||
}
|
||||
|
||||
/* variants */
|
||||
&.success {
|
||||
--toastSurfaceColor: var(--surfaceSuccessColor);
|
||||
--toastAccentColor: var(--successColor);
|
||||
.toast-icon::before {
|
||||
content: "\EB7B";
|
||||
}
|
||||
}
|
||||
&.error {
|
||||
--toastSurfaceColor: var(--surfaceDangerColor);
|
||||
--toastAccentColor: var(--dangerColor);
|
||||
.toast-icon::before {
|
||||
content: "\EA20";
|
||||
}
|
||||
}
|
||||
&.removing {
|
||||
transition:
|
||||
opacity var(--animationSpeed),
|
||||
margin var(--animationSpeed),
|
||||
grid-template-rows var(--animationSpeed);
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
grid-template-rows: 0fr;
|
||||
.toast-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toasts-container {
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
bottom: var(--spacing);
|
||||
left: 0;
|
||||
width: 100%;
|
||||
pointer-events: none !important;
|
||||
.toast {
|
||||
pointer-events: auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
30
ui/src/css/tooltip.css
Normal file
30
ui/src/css/tooltip.css
Normal file
@@ -0,0 +1,30 @@
|
||||
.pb-tooltip {
|
||||
position: fixed;
|
||||
z-index: 99999;
|
||||
max-width: 300px;
|
||||
min-width: 30px;
|
||||
text-align: center;
|
||||
white-space: pre-line;
|
||||
word-break: break-word;
|
||||
background: var(--tooltipSurfaceColor);
|
||||
border-radius: var(--borderRadius);
|
||||
color: var(--tooltipTxtColor);
|
||||
font-weight: normal;
|
||||
font-size: var(--smFontSize);
|
||||
line-height: var(--smLineHeight);
|
||||
font-family: var(--baseFontFamily);
|
||||
margin: 3px;
|
||||
padding: 3px 5px;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition:
|
||||
opacity var(--animationSpeed),
|
||||
display var(--animationSpeed) allow-discrete;
|
||||
&:popover-open {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
@starting-style {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
246
ui/src/css/vars.css
Normal file
246
ui/src/css/vars.css
Normal file
@@ -0,0 +1,246 @@
|
||||
:root,
|
||||
.dropdown,
|
||||
.base-surface {
|
||||
--baseFontFamily: "IBM Plex Sans", system-ui, sans-serif, emoji;
|
||||
--monospaceFontFamily: "IBM Plex Mono", ui-monospace, monospace, emoji;
|
||||
--iconFontFamily: "remixicon";
|
||||
|
||||
--primaryColor: #25272d;
|
||||
--primaryAlt1Color: color-mix(in srgb, var(--primaryColor), white 8%);
|
||||
--primaryAlt2Color: color-mix(in srgb, var(--primaryColor), white 13%);
|
||||
--primaryTxtColor: #fff;
|
||||
--primaryTxtHintColor: color-mix(in srgb, var(--primaryTxtColor), transparent 35%);
|
||||
--primaryTxtDisabledColor: color-mix(in srgb, var(--primaryTxtColor), transparent 50%);
|
||||
|
||||
--secondaryColor: #e8eaee;
|
||||
--secondaryAlt1Color: #dcdfe5;
|
||||
--secondaryAlt2Color: #c4cbd4;
|
||||
--secondaryTxtColor: var(--primaryColor);
|
||||
--secondaryTxtHintColor: color-mix(in srgb, var(--secondaryTxtColor), transparent 35%);
|
||||
--secondaryTxtDisabledColor: color-mix(in srgb, var(--secondaryTxtColor), transparent 50%);
|
||||
|
||||
--infoColor: #3376e5;
|
||||
--infoAlt1Color: color-mix(in srgb, var(--infoColor), white 10%);
|
||||
--infoAlt2Color: color-mix(in srgb, var(--infoColor), white 15%);
|
||||
--infoTxtColor: var(--primaryTxtColor);
|
||||
--infoTxtHintColor: var(--primaryTxtHintColor);
|
||||
--infoTxtDisabledColor: var(--primaryTxtDisabledColor);
|
||||
|
||||
--successColor: #22a96d;
|
||||
--successAlt1Color: color-mix(in srgb, var(--successColor), white 10%);
|
||||
--successAlt2Color: color-mix(in srgb, var(--successColor), white 15%);
|
||||
--successTxtColor: var(--primaryTxtColor);
|
||||
--successTxtHintColor: var(--primaryTxtHintColor);
|
||||
--successTxtDisabledColor: var(--primaryTxtDisabledColor);
|
||||
|
||||
--warningColor: #e57534;
|
||||
--warningAlt1Color: color-mix(in srgb, var(--warningColor), white 10%);
|
||||
--warningAlt2Color: color-mix(in srgb, var(--warningColor), white 15%);
|
||||
--warningTxtColor: var(--primaryTxtColor);
|
||||
--warningTxtHintColor: var(--primaryTxtHintColor);
|
||||
--warningTxtDisabledColor: var(--primaryTxtDisabledColor);
|
||||
|
||||
--dangerColor: #c33751;
|
||||
--dangerAlt1Color: color-mix(in srgb, var(--dangerColor), white 10%);
|
||||
--dangerAlt2Color: color-mix(in srgb, var(--dangerColor), white 15%);
|
||||
--dangerTxtColor: var(--primaryTxtColor);
|
||||
--dangerTxtHintColor: var(--primaryTxtHintColor);
|
||||
--dangerTxtDisabledColor: var(--primaryTxtDisabledColor);
|
||||
|
||||
--accentColor: #1055c9;
|
||||
--accentAlt1Color: color-mix(in srgb, var(--accentColor), white 10%);
|
||||
--accentAlt2Color: color-mix(in srgb, var(--accentColor), white 15%);
|
||||
--accentTxtColor: #fff;
|
||||
--accentTxtHintColor: color-mix(in srgb, var(--accentTxtColor), transparent 40%);
|
||||
--accentTxtDisabledColor: color-mix(in srgb, var(--accentTxtColor), transparent 50%);
|
||||
|
||||
--surfaceColor: #fff;
|
||||
--surfaceAlt1Color: #f6f7f9;
|
||||
--surfaceAlt2Color: #e8eaee;
|
||||
--surfaceAlt3Color: #dfe2e7;
|
||||
--surfaceAlt4Color: #d9dde2;
|
||||
--surfaceAlt5Color: #d1d6dc;
|
||||
--surfaceTxtColor: #25272d;
|
||||
--surfaceTxtHintColor: #6b747b;
|
||||
--surfaceTxtDisabledColor: #abaeba;
|
||||
--surfaceAccentColor: color-mix(in srgb, var(--accentColor), white 80%);
|
||||
--surfaceInfoColor: color-mix(in srgb, var(--infoColor), white 80%);
|
||||
--surfaceSuccessColor: color-mix(in srgb, var(--successColor), white 80%);
|
||||
--surfaceWarningColor: color-mix(in srgb, var(--warningColor), white 80%);
|
||||
--surfaceDangerColor: color-mix(in srgb, var(--dangerColor), white 80%);
|
||||
--selectionColor: var(--surfaceAlt3Color);
|
||||
--inputColor: var(--surfaceAlt2Color);
|
||||
--inputFocusColor: var(--surfaceAlt3Color);
|
||||
--inputBorderColor: var(--surfaceAlt4Color);
|
||||
scrollbar-color: var(--surfaceAlt4Color) transparent;
|
||||
|
||||
--prismFunctionColor: #7c00aa;
|
||||
--prismStringColor: #116b00;
|
||||
--prismNumberColor: #246f86;
|
||||
--prismPropertyColor: #246f86;
|
||||
--prismKeywordColor: #a04900;
|
||||
--prismCommentColor: var(--surfaceTxtHintColor);
|
||||
--prismPunctuationColor: var(--surfaceTxtColor);
|
||||
|
||||
/* ---------------- */
|
||||
|
||||
--modalAnimationSpeed: 200ms;
|
||||
--modalOverlayColor: rgba(34, 36, 42, 0.22);
|
||||
|
||||
--tooltipTxtColor: #fff;
|
||||
--tooltipSurfaceColor: rgba(34, 36, 36, 0.9);
|
||||
|
||||
--boxShadow: 0px 8px 5px -5px rgba(34, 36, 36, 0.1);
|
||||
--leftBoxShadow: -1px 0px 5px 0 rgba(34, 36, 36, 0.1);
|
||||
--rightBoxShadow: 1px 0px 5px 0 rgba(34, 36, 36, 0.1);
|
||||
--topScrollShadow: 0px 2px 8px 1px rgba(34, 36, 36, 0.15);
|
||||
--bottomScrollShadow: 0px -2px 8px 1px rgba(34, 36, 36, 0.15);
|
||||
--leftScrollShadow: 3px 0px 5px 0px rgba(34, 36, 36, 0.2);
|
||||
--rightScrollShadow: -3px 0px 5px 0px rgba(34, 36, 36, 0.2);
|
||||
|
||||
--fontSize: 14px;
|
||||
--smFontSize: 13px;
|
||||
--lgFontSize: 15px;
|
||||
|
||||
--lineHeight: 22px;
|
||||
--smLineHeight: 16px;
|
||||
--lgLineHeight: 24px;
|
||||
|
||||
--btnHeight: 45px;
|
||||
--smBtnHeight: 35px;
|
||||
--lgBtnHeight: 52px;
|
||||
|
||||
--spacing: 30px;
|
||||
--smSpacing: 20px;
|
||||
|
||||
--inputPadding: 13px;
|
||||
--inputBorderRadius: var(--borderRadius);
|
||||
|
||||
--borderRadius: 5px;
|
||||
--lgBorderRadius: 15px;
|
||||
|
||||
--pageSidebarWidth: 240px;
|
||||
|
||||
--wrapperWidth: 840px;
|
||||
--smWrapperWidth: 430px;
|
||||
--lgWrapperWidth: 1150px;
|
||||
|
||||
--loaderIcon: "\eec4";
|
||||
--loaderAnimationSpeed: 1.2s;
|
||||
|
||||
--animationSpeed: 150ms;
|
||||
--activeAnimationSpeed: 70ms;
|
||||
--slideAnimationSpeed: 200ms;
|
||||
|
||||
accent-color: var(--primaryColor);
|
||||
}
|
||||
|
||||
/* dark */
|
||||
[data-color-scheme="dark"],
|
||||
[data-color-scheme="dark"] .dropdown {
|
||||
--surfaceColor: #282828;
|
||||
--surfaceAlt1Color: color-mix(in srgb, var(--surfaceColor), white 2%);
|
||||
--surfaceAlt2Color: color-mix(in srgb, var(--surfaceColor), white 4%);
|
||||
--surfaceAlt3Color: color-mix(in srgb, var(--surfaceColor), white 6%);
|
||||
--surfaceAlt4Color: color-mix(in srgb, var(--surfaceColor), white 9%);
|
||||
--surfaceAlt5Color: color-mix(in srgb, var(--surfaceColor), white 12%);
|
||||
|
||||
--surfaceTxtColor: #dedede;
|
||||
--tooltipTxtColor: var(--surfaceTxtColor);
|
||||
--surfaceTxtHintColor: color-mix(in srgb, var(--surfaceTxtColor), transparent 45%);
|
||||
--surfaceTxtDisabledColor: color-mix(in srgb, var(--surfaceTxtColor), transparent 65%);
|
||||
|
||||
--secondaryColor: var(--surfaceAlt3Color);
|
||||
--secondaryTxtColor: var(--surfaceTxtColor);
|
||||
--secondaryTxtColor: var(--surfaceTxtColor);
|
||||
--secondaryAlt1Color: var(--surfaceAlt4Color);
|
||||
--secondaryAlt2Color: var(--surfaceAlt5Color);
|
||||
|
||||
--primaryColor: #1e1e1e;
|
||||
--primaryTxtColor: var(--surfaceTxtColor);
|
||||
--primaryAlt1Color: color-mix(in srgb, var(--primaryColor), black 8%);
|
||||
--primaryAlt2Color: color-mix(in srgb, var(--primaryColor), black 16%);
|
||||
--primaryTxtHintColor: color-mix(in srgb, var(--primaryTxtColor), transparent 35%);
|
||||
--primaryTxtDisabledColor: color-mix(in srgb, var(--primaryTxtColor), transparent 50%);
|
||||
|
||||
--infoColor: #4273bd;
|
||||
--infoTxtColor: var(--surfaceTxtColor);
|
||||
--infoAlt1Color: color-mix(in srgb, var(--infoColor), black 10%);
|
||||
--infoAlt2Color: color-mix(in srgb, var(--infoColor), black 15%);
|
||||
--surfaceInfoColor: color-mix(in srgb, var(--infoColor), var(--surfaceColor) 45%);
|
||||
|
||||
--successColor: #257e58;
|
||||
--successTxtColor: var(--surfaceTxtColor);
|
||||
--successAlt1Color: color-mix(in srgb, var(--successColor), black 10%);
|
||||
--successAlt2Color: color-mix(in srgb, var(--successColor), black 15%);
|
||||
--surfaceSuccessColor: color-mix(in srgb, var(--successColor), var(--surfaceColor) 45%);
|
||||
|
||||
--warningColor: #ae4d0e;
|
||||
--warningTxtColor: var(--surfaceTxtColor);
|
||||
--warningAlt1Color: color-mix(in srgb, var(--warningColor), black 10%);
|
||||
--warningAlt2Color: color-mix(in srgb, var(--warningColor), black 15%);
|
||||
--surfaceWarningColor: color-mix(in srgb, var(--warningColor), var(--surfaceColor) 45%);
|
||||
|
||||
--dangerColor: #b6354c;
|
||||
--dangerTxtColor: var(--surfaceTxtColor);
|
||||
--dangerAlt1Color: color-mix(in srgb, var(--dangerColor), black 10%);
|
||||
--dangerAlt2Color: color-mix(in srgb, var(--dangerColor), black 15%);
|
||||
--surfaceDangerColor: color-mix(in srgb, var(--dangerColor), var(--surfaceColor) 45%);
|
||||
|
||||
--inputColor: var(--surfaceAlt2Color);
|
||||
--inputFocusColor: var(--surfaceAlt3Color);
|
||||
--inputBorderColor: var(--surfaceAlt4Color);
|
||||
scrollbar-color: var(--surfaceAlt5Color) transparent;
|
||||
|
||||
--modalOverlayColor: rgb(0,0,0,0.5);
|
||||
|
||||
--boxShadow: 0px 8px 5px -5px rgba(0,0,0, 0.3);
|
||||
--leftBoxShadow: -1px 0px 5px 0 rgba(0,0,0, 0.3);
|
||||
--rightBoxShadow: 1px 0px 5px 0 rgba(0,0,0, 0.3);
|
||||
--topScrollShadow: 0px 2px 8px 1px rgba(0,0,0, 0.45);
|
||||
--bottomScrollShadow: 0px -2px 8px 1px rgba(0,0,0, 0.45);
|
||||
--leftScrollShadow: 3px 0px 5px 0px rgba(0,0,0, 0.4);
|
||||
--rightScrollShadow: -3px 0px 5px 0px rgba(0,0,0, 0.4);
|
||||
|
||||
--prismFunctionColor: #ab7abd;
|
||||
--prismStringColor: #87b47e;
|
||||
--prismNumberColor: #86b9bb;
|
||||
--prismPropertyColor: #90c2d1;
|
||||
--prismKeywordColor: #b3703d;
|
||||
--prismCommentColor: var(--surfaceTxtHintColor);
|
||||
--prismPunctuationColor: var(--surfaceTxtColor);
|
||||
}
|
||||
|
||||
html .accent-surface {
|
||||
--surfaceColor: var(--accentColor);
|
||||
--surfaceAlt1Color: color-mix(in srgb, var(--surfaceColor), white 5%);
|
||||
--surfaceAlt2Color: color-mix(in srgb, var(--surfaceColor), white 10%);
|
||||
--surfaceAlt3Color: color-mix(in srgb, var(--surfaceColor), white 20%);
|
||||
--surfaceAlt4Color: color-mix(in srgb, var(--surfaceColor), white 30%);
|
||||
--surfaceAlt5Color: color-mix(in srgb, var(--surfaceColor), white 40%);
|
||||
--surfaceTxtColor: #fff;
|
||||
--surfaceTxtHintColor: color-mix(in srgb, var(--surfaceTxtColor), transparent 35%);
|
||||
--surfaceTxtDisabledColor: color-mix(in srgb, var(--surfaceTxtColor), transparent 60%);
|
||||
--surfaceAccentColor: color-mix(in srgb, var(--surfaceColor), white 20%);
|
||||
--surfaceInfoColor: color-mix(in srgb, var(--infoColor), transparent 40%);
|
||||
--surfaceSuccessColor: color-mix(in srgb, var(--successColor), transparent 40%);
|
||||
--surfaceWarningColor: color-mix(in srgb, var(--warningColor), transparent 40%);
|
||||
--surfaceDangerColor: color-mix(in srgb, var(--dangerColor), transparent 40%);
|
||||
--inputColor: var(--surfaceAlt3Color);
|
||||
--inputFocusColor: var(--surfaceAlt4Color);
|
||||
--inputBorderColor: var(--surfaceAlt5Color);
|
||||
--selectionColor: var(--surfaceAccentColor);
|
||||
scrollbar-color: var(--surfaceAlt4Color) transparent;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
:root,
|
||||
.dropdown,
|
||||
.base-surface {
|
||||
--spacing: 20px;
|
||||
--smSpacing: 15px;
|
||||
--btnHeight: 40px;
|
||||
--smBtnHeight: 30px;
|
||||
--lgBtnHeight: 47px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user