Dwinzo_dev/app/src/styles/components/footer/footer.scss

156 lines
3.0 KiB
SCSS

@use "../../abstracts/variables" as *;
@use "../../abstracts/mixins" as *;
.footer-wrapper {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 1;
display: flex;
justify-content: space-between;
padding: 2px 12px;
.selection-wrapper {
display: flex;
gap: 6px;
.selector-wrapper {
display: flex;
gap: 6px;
align-items: center;
background: var(--background-color);
padding: 3px 6px;
border-radius: #{$border-radius-large};
color: var(--text-color);
backdrop-filter: blur(14px);
.selector {
color: var(--text-color);
font-size: var(--font-size-small)
}
.icon {
height: 17px;
}
}
}
.logs-wrapper {
display: flex;
gap: 6px;
position: relative;
// dummy
.bg-dummy {
background: var(--background-color-solid);
position: absolute;
z-index: -1;
}
.bg-dummy.left-top {
top: 1px;
left: 4px;
width: 60%;
height: 16px;
border-radius: #{$border-radius-extra-large};
}
.bg-dummy.right-bottom {
right: 68px;
bottom: 0;
width: 20%;
height: 100%;
border-radius: #{$border-radius-circle};
}
.log-container {
background: var(--background-color);
backdrop-filter: blur(20px);
border-radius: #{$border-radius-large};
@include flex-center;
overflow: hidden;
}
.logs-detail,
.version {
@include flex-center;
border-radius: #{$border-radius-extra-large};
padding: 3px 6px;
height: 100%;
color: var(--text-color);
gap: 6px;
}
.logs-detail {
padding: 2px 12px;
cursor: pointer;
outline: 0 solid var(--border-color);
outline-offset: -1px;
.log-icon {
@include flex-center;
}
.log-message {
max-width: 40vw;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.version {
background: var(--background-color);
font-size: var(--font-size-tiny);
.icon {
@include flex-center;
}
}
.log {
background: var(--log-default-background-color);
outline-color: var(--default-text-color);
.log-message {
color: var(--default-text-color);
}
}
.info {
background: var(--log-info-background-color);
outline-color: var(--log-info-text-color);
.log-message {
color: var(--log-info-text-color);
}
}
.error {
background: var(--log-error-background-color);
outline-color: var(--log-error-text-color);
.log-message {
color: var(--log-error-text-color);
}
}
.warning {
background: var(--log-warn-background-color);
outline-color: var(--log-warn-text-color);
.log-message {
color: var(--log-warn-text-color);
}
}
.success {
background: var(--log-success-background-color);
.log-message {
color: var(--log-success-text-color);
}
}
}
}