mirror of
https://github.com/TwilitRealm/dusklight
synced 2026-09-11 11:15:12 -04:00
Luke Street
982 lines
19 KiB
Plaintext
982 lines
19 KiB
Plaintext
body {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 64dp;
|
|
font-family: var(--font-family-body);
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-size: var(--font-size-base);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
b {
|
|
font-weight: bold;
|
|
}
|
|
|
|
window {
|
|
display: flex;
|
|
flex-flow: column;
|
|
position: relative;
|
|
height: 100%;
|
|
width: 100%;
|
|
max-width: 1088dp;
|
|
max-height: 768dp;
|
|
margin: auto;
|
|
border-radius: var(--radius-window);
|
|
overflow: hidden;
|
|
border-width: 2dp;
|
|
border-color: var(--color-border);
|
|
backdrop-filter: blur(5dp);
|
|
box-shadow: 0 0 25dp 5dp;
|
|
background-color: rgba(var(--color-surface-rgb), 90%);
|
|
filter: opacity(0);
|
|
transform: scale(0.9);
|
|
transform-origin: center;
|
|
transition: filter transform 0.2s cubic-in-out;
|
|
}
|
|
|
|
window.small {
|
|
height: auto;
|
|
width: auto;
|
|
}
|
|
|
|
window.modal {
|
|
max-width: 640dp;
|
|
}
|
|
|
|
@media (max-height: 896dp) {
|
|
window.modal {
|
|
max-height: 100%;
|
|
}
|
|
}
|
|
|
|
window[open] {
|
|
filter: opacity(1);
|
|
transform: scale(1);
|
|
}
|
|
|
|
@media (max-height: 640dp) {
|
|
body {
|
|
padding: var(--space-lg);
|
|
}
|
|
window {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768dp) {
|
|
body {
|
|
padding: var(--space-lg);
|
|
}
|
|
window.modal {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
window tab-bar {
|
|
flex: 0 0 var(--toolbar-height);
|
|
height: var(--toolbar-height);
|
|
background-color: rgba(var(--color-neutral-rgb), 10%);
|
|
font-family: var(--font-family-heading);
|
|
font-weight: bold;
|
|
font-size: var(--font-size-xl);
|
|
border-bottom-width: 2dp;
|
|
border-bottom-color: var(--color-border);
|
|
}
|
|
|
|
window tab-bar tab {
|
|
opacity: 0.25;
|
|
}
|
|
|
|
window content {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
window content pane {
|
|
display: flex;
|
|
flex-flow: column;
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
padding: var(--space-xl);
|
|
gap: var(--space-sm);
|
|
overflow: hidden auto;
|
|
font-size: var(--font-size-2xl);
|
|
}
|
|
|
|
window content pane:not(:last-of-type) {
|
|
border-right-width: 1dp;
|
|
border-right-color: var(--color-border);
|
|
}
|
|
|
|
window content pane > * {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
ui-list {
|
|
display: flex;
|
|
flex-flow: column;
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
window content pane > ui-list,
|
|
modal-content pane > ui-list {
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
ui-list-viewport {
|
|
display: block;
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: hidden auto;
|
|
}
|
|
|
|
ui-list-content {
|
|
display: flex;
|
|
flex-flow: column;
|
|
gap: var(--space-sm);
|
|
min-width: 0;
|
|
}
|
|
|
|
ui-list-content > button.ui-list-row {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
ui-list-empty {
|
|
display: block;
|
|
padding: var(--space-lg);
|
|
text-align: center;
|
|
opacity: 0.45;
|
|
}
|
|
|
|
window content pane > ui-list {
|
|
margin-left: -24dp;
|
|
margin-right: -24dp;
|
|
}
|
|
|
|
window content pane > ui-list:first-child {
|
|
margin-top: -24dp;
|
|
}
|
|
|
|
window content pane > ui-list:last-child {
|
|
margin-bottom: -24dp;
|
|
}
|
|
|
|
window content pane > ui-list ui-list-content,
|
|
window content pane > ui-list ui-list-empty {
|
|
padding-left: var(--space-xl);
|
|
padding-right: var(--space-xl);
|
|
}
|
|
|
|
window content pane > ui-list:first-child ui-list-content,
|
|
window content pane > ui-list:first-child ui-list-empty {
|
|
padding-top: var(--space-xl);
|
|
}
|
|
|
|
window content pane > ui-list:last-child ui-list-content,
|
|
window content pane > ui-list:last-child ui-list-empty {
|
|
padding-bottom: var(--space-xl);
|
|
}
|
|
|
|
window content pane:last-of-type > div {
|
|
line-height: 1.625;
|
|
}
|
|
|
|
data-folder-current {
|
|
display: block;
|
|
font-size: var(--font-size-md);
|
|
color: rgba(var(--color-text-rgb), 65%);
|
|
}
|
|
|
|
scrollbarvertical {
|
|
width: 8dp;
|
|
margin: var(--space-xs) var(--space-xs) var(--space-xs) 0;
|
|
}
|
|
|
|
scrollbarvertical sliderarrowdec,
|
|
scrollbarvertical sliderarrowinc {
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
scrollbarvertical slidertrack {
|
|
width: 8dp;
|
|
}
|
|
|
|
scrollbarvertical sliderbar {
|
|
width: 8dp;
|
|
min-height: 24dp;
|
|
background-color: rgba(var(--color-text-rgb), 45%);
|
|
border-radius: 2dp;
|
|
transition: background-color 0.2s cubic-in-out;
|
|
}
|
|
|
|
scrollbarvertical sliderbar:hover,
|
|
scrollbarvertical sliderbar:active {
|
|
background-color: rgba(var(--color-accent-rgb), 80%);
|
|
}
|
|
|
|
scrollbarhorizontal {
|
|
height: 0;
|
|
}
|
|
|
|
scrollbarhorizontal sliderarrowdec,
|
|
scrollbarhorizontal sliderarrowinc {
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
scrollbarhorizontal slidertrack,
|
|
scrollbarhorizontal sliderbar {
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
section-heading {
|
|
font-family: var(--font-family-heading);
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
font-size: var(--font-size-3xl);
|
|
opacity: 0.25;
|
|
}
|
|
|
|
section-heading:not(:first-of-type) {
|
|
padding-top: var(--space-md);
|
|
}
|
|
|
|
button {
|
|
text-align: center;
|
|
color: var(--button-color);
|
|
background-color: var(--button-background);
|
|
opacity: 0.9;
|
|
padding: var(--space-sm) var(--space-lg);
|
|
border-radius: var(--radius-window);
|
|
box-shadow: rgba(var(--color-border-rgb), 25%) 0 0 0 1dp;
|
|
font-size: var(--font-size-2xl);
|
|
transition: background-color 0.1s linear-in-out, opacity 0.1s linear-in-out;
|
|
cursor: pointer;
|
|
focus: auto;
|
|
}
|
|
|
|
button:not(:disabled):hover,
|
|
button:not(:disabled):focus-visible {
|
|
background-color: var(--button-background-hover);
|
|
box-shadow: var(--color-accent) 0 0 0 2dp;
|
|
}
|
|
|
|
button:not(:disabled):selected {
|
|
opacity: 1;
|
|
background-color: var(--button-background-selected);
|
|
}
|
|
|
|
button:not(:disabled):active {
|
|
opacity: 1;
|
|
background-color: var(--button-background-active);
|
|
box-shadow: var(--color-accent) 0 0 0 2dp;
|
|
}
|
|
|
|
button:disabled {
|
|
opacity: 0.35;
|
|
cursor: default;
|
|
}
|
|
|
|
button.modal-btn {
|
|
flex: 1 1 0;
|
|
text-align: center;
|
|
}
|
|
|
|
select-button {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
color: var(--button-color);
|
|
background-color: var(--button-background);
|
|
opacity: 0.9;
|
|
padding: var(--space-sm) var(--space-lg);
|
|
border-radius: var(--radius-window);
|
|
box-shadow: rgba(var(--color-border-rgb), 25%) 0 0 0 1dp;
|
|
transition: background-color 0.1s linear-in-out, opacity 0.1s linear-in-out;
|
|
cursor: pointer;
|
|
focus: auto;
|
|
}
|
|
|
|
select-button:not(:disabled):hover,
|
|
select-button:not(:disabled):focus-visible {
|
|
background-color: var(--button-background-hover);
|
|
box-shadow: var(--color-accent) 0 0 0 2dp;
|
|
}
|
|
|
|
select-button:not(:disabled):selected {
|
|
opacity: 1;
|
|
background-color: var(--button-background-selected);
|
|
}
|
|
|
|
select-button:not(:disabled):active {
|
|
opacity: 1;
|
|
background-color: var(--button-background-active);
|
|
box-shadow: var(--color-accent) 0 0 0 2dp;
|
|
}
|
|
|
|
select-button:disabled {
|
|
opacity: 0.35;
|
|
cursor: default;
|
|
}
|
|
|
|
select-button key {
|
|
font-family: var(--font-family-heading);
|
|
font-weight: bold;
|
|
font-size: var(--font-size-xl);
|
|
text-transform: uppercase;
|
|
flex: 0 1 auto;
|
|
}
|
|
|
|
select-button value {
|
|
flex: 1 1 auto;
|
|
text-align: right;
|
|
font-size: var(--font-size-2xl);
|
|
}
|
|
|
|
select-button value.modified {
|
|
font-weight: bold;
|
|
}
|
|
|
|
select-button input {
|
|
text-align: right;
|
|
font-size: var(--font-size-2xl);
|
|
}
|
|
|
|
select-button.group-button icon {
|
|
flex: 0 0 24dp;
|
|
margin-left: auto;
|
|
width: 24dp;
|
|
height: 24dp;
|
|
font-size: var(--font-size-4xl);
|
|
color: var(--button-color);
|
|
decorator: text("" center center);
|
|
}
|
|
|
|
select-button.group-button value {
|
|
display: none;
|
|
}
|
|
|
|
select-button.color-input value {
|
|
min-width: 0;
|
|
font-family: var(--font-family-monospace);
|
|
font-size: var(--font-size-base);
|
|
}
|
|
|
|
select-button.color-input color-swatch {
|
|
display: block;
|
|
flex: 0 0 48dp;
|
|
width: 48dp;
|
|
height: 24dp;
|
|
border-radius: var(--radius-control);
|
|
box-shadow: rgba(var(--color-white-rgb), 45%) 0 0 0 1dp;
|
|
}
|
|
|
|
select-button.color-input color-swatch.empty {
|
|
background-color: rgba(var(--color-text-rgb), 12%);
|
|
decorator: linear-gradient(135deg, rgba(var(--color-text-rgb), 0) 45%, rgba(var(--color-accent-rgb), 70%) 48%, rgba(var(--color-accent-rgb), 70%) 52%, rgba(var(--color-text-rgb), 0) 55%);
|
|
}
|
|
|
|
icon {
|
|
width: 1em;
|
|
height: 1em;
|
|
font-family: var(--font-family-icons);
|
|
font-weight: normal;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
icon.warning {
|
|
decorator: text("" center center);
|
|
}
|
|
|
|
icon.error {
|
|
decorator: text("" center center);
|
|
}
|
|
|
|
icon.verifying {
|
|
decorator: text("" center center);
|
|
}
|
|
|
|
icon.download {
|
|
decorator: text("" center center);
|
|
}
|
|
|
|
icon.celebration {
|
|
decorator: text("" center center);
|
|
}
|
|
|
|
icon.question-mark {
|
|
decorator: text("" center center);
|
|
}
|
|
|
|
achievement-total {
|
|
position: absolute;
|
|
top: 0;
|
|
right: var(--toolbar-height);
|
|
height: var(--toolbar-height);
|
|
line-height: var(--toolbar-height);
|
|
font-family: var(--font-family-heading);
|
|
font-weight: bold;
|
|
font-size: var(--font-size-md);
|
|
color: rgba(var(--color-text-rgb), 55%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
achievement-row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10dp;
|
|
padding: var(--space-md) 0;
|
|
border-bottom-width: 1dp;
|
|
border-bottom-color: rgba(var(--color-border-rgb), 30%);
|
|
}
|
|
|
|
achievement-info {
|
|
display: block;
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
achievement-header {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
achievement-name {
|
|
flex: 1;
|
|
font-weight: bold;
|
|
}
|
|
|
|
achievement-name.unlocked {
|
|
color: var(--color-warning);
|
|
}
|
|
|
|
achievement-badge {
|
|
font-size: var(--font-size-sm);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
achievement-badge.unlocked {
|
|
color: var(--color-success);
|
|
opacity: 1;
|
|
}
|
|
|
|
achievement-badge.locked {
|
|
color: var(--color-error);
|
|
opacity: 1;
|
|
}
|
|
|
|
.achievement-desc {
|
|
display: block;
|
|
color: rgba(var(--color-text-rgb), 55%);
|
|
font-size: var(--font-size-md);
|
|
margin: var(--space-xs) 0 0 0;
|
|
}
|
|
|
|
achievement-progress {
|
|
display: block;
|
|
font-size: var(--font-size-xs);
|
|
color: rgba(var(--color-text-rgb), 45%);
|
|
}
|
|
|
|
progress {
|
|
display: block;
|
|
width: 100%;
|
|
height: 6dp;
|
|
border-radius: 3dp;
|
|
background-color: rgba(var(--color-white-rgb), 10%);
|
|
margin: 6dp 0 var(--space-2xs) 0;
|
|
}
|
|
|
|
progress fill {
|
|
background-color: rgba(var(--color-accent-rgb), 80%);
|
|
border-radius: 3dp;
|
|
}
|
|
|
|
progress.progress-done fill {
|
|
background-color: var(--color-progress-done);
|
|
}
|
|
|
|
progress.progress-ongoing fill {
|
|
background-color: var(--color-progress-ongoing);
|
|
}
|
|
|
|
button.achievement-clear {
|
|
flex: 0 0 auto;
|
|
align-self: center;
|
|
font-size: var(--font-size-sm);
|
|
padding: var(--space-2xs) var(--space-sm);
|
|
opacity: 0.45;
|
|
}
|
|
|
|
preset-grid {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 20dp;
|
|
flex: 0 1 auto;
|
|
align-items: flex-start;
|
|
width: 100%;
|
|
}
|
|
|
|
preset-option {
|
|
display: flex;
|
|
flex-flow: column;
|
|
gap: var(--space-md);
|
|
flex: 1 1 0;
|
|
}
|
|
|
|
preset-description {
|
|
display: block;
|
|
font-size: var(--font-size-md);
|
|
text-align: center;
|
|
}
|
|
|
|
modal-dialog {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
padding: var(--space-xl);
|
|
gap: 20dp;
|
|
flex: 0 1 auto;
|
|
min-height: 0;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
text-align: left;
|
|
}
|
|
|
|
window.modal.danger {
|
|
border: 2dp var(--color-danger-border);
|
|
}
|
|
|
|
modal-header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
flex: 0 0 auto;
|
|
gap: var(--space-lg);
|
|
}
|
|
|
|
modal-header icon {
|
|
font-size: var(--font-size-4xl);
|
|
color: var(--color-border);
|
|
}
|
|
|
|
modal-title {
|
|
display: block;
|
|
font-family: var(--font-family-heading);
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
font-size: var(--font-size-xl);
|
|
color: var(--color-border);
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
window.modal.danger modal-title,
|
|
window.modal.danger modal-header icon {
|
|
color: var(--color-danger-heading);
|
|
}
|
|
|
|
modal-body {
|
|
display: block;
|
|
width: 100%;
|
|
flex: 0 0 auto;
|
|
min-width: 0;
|
|
font-size: var(--font-size-2xl);
|
|
color: var(--color-white);
|
|
font-weight: normal;
|
|
}
|
|
|
|
modal-body modal-tip {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-border);
|
|
}
|
|
|
|
modal-content {
|
|
display: none;
|
|
width: 100%;
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
modal-content.active {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
modal-content pane {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
width: 100%;
|
|
gap: var(--space-sm);
|
|
overflow: hidden auto;
|
|
}
|
|
|
|
modal-content pane > * {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
window.modal.install-queue {
|
|
max-height: 768dp;
|
|
}
|
|
|
|
window.modal.drop-install {
|
|
max-height: 720dp;
|
|
}
|
|
|
|
window.modal.drop-install package-row {
|
|
padding-right: 0;
|
|
}
|
|
|
|
window.modal.install-queue modal-body {
|
|
display: none;
|
|
}
|
|
|
|
window.modal.install-queue modal-content pane {
|
|
gap: 0;
|
|
padding-right: 14dp;
|
|
padding-bottom: 6dp;
|
|
}
|
|
|
|
package-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
position: relative;
|
|
width: 100%;
|
|
gap: 10dp;
|
|
padding: var(--space-md) 0;
|
|
border-bottom-width: 1dp;
|
|
border-bottom-color: rgba(var(--color-border-rgb), 30%);
|
|
}
|
|
|
|
package-row:last-child {
|
|
border-bottom-width: 0;
|
|
}
|
|
|
|
package-row > mod-icon {
|
|
display: none;
|
|
flex: 0 0 36dp;
|
|
width: 36dp;
|
|
height: 36dp;
|
|
margin-top: var(--space-2xs);
|
|
overflow: hidden;
|
|
border-radius: var(--radius-panel);
|
|
background-color: rgba(var(--color-control-rgb), 45%);
|
|
color: rgba(var(--color-text-rgb), 45%);
|
|
font-family: var(--font-family-icons);
|
|
font-size: var(--font-size-4xl);
|
|
decorator: text("" center center);
|
|
}
|
|
|
|
package-row > mod-icon.visible {
|
|
display: block;
|
|
}
|
|
|
|
package-row > mod-icon.has-image {
|
|
background-color: transparent;
|
|
}
|
|
|
|
package-row.paused > mod-icon,
|
|
package-row.retrying > mod-icon,
|
|
package-row.failed > mod-icon {
|
|
filter: grayscale(1);
|
|
opacity: 0.55;
|
|
}
|
|
|
|
package-row > section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
package-row > section > header {
|
|
display: flex;
|
|
width: 100%;
|
|
gap: var(--space-sm);
|
|
align-items: center;
|
|
margin: 0;
|
|
padding: 0 0 6dp 0;
|
|
}
|
|
|
|
package-row h3 {
|
|
display: flex;
|
|
align-items: baseline;
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
gap: var(--space-xs);
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
package-row h3 > span {
|
|
display: block;
|
|
flex: 0 1 auto;
|
|
min-width: 0;
|
|
font-weight: bold;
|
|
color: var(--color-white);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
package-row h3 > small {
|
|
display: block;
|
|
flex: 0 0 auto;
|
|
font-size: var(--font-size-xs);
|
|
font-weight: normal;
|
|
color: rgba(var(--color-text-rgb), 50%);
|
|
}
|
|
|
|
package-row header > small {
|
|
display: block;
|
|
flex: 0 0 auto;
|
|
font-size: var(--font-size-sm);
|
|
color: rgba(var(--color-text-rgb), 60%);
|
|
}
|
|
|
|
package-row.downloading header > small {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
package-row.retrying header > small {
|
|
color: var(--color-warning);
|
|
}
|
|
|
|
package-row.failed header > small,
|
|
package-row.failed footer > small {
|
|
color: var(--color-error);
|
|
}
|
|
|
|
package-row.installed header > small,
|
|
package-row.installed footer > small {
|
|
color: var(--color-success);
|
|
}
|
|
|
|
package-row progress {
|
|
width: 100%;
|
|
height: 6dp;
|
|
margin: 0 0 var(--space-sm) 0;
|
|
border-radius: 3dp;
|
|
}
|
|
|
|
package-row.failed progress fill {
|
|
background-color: var(--color-error);
|
|
}
|
|
|
|
package-row.paused progress fill {
|
|
background-color: rgba(var(--color-text-rgb), 35%);
|
|
}
|
|
|
|
package-row.retrying progress fill {
|
|
background-color: rgba(var(--color-warning-rgb), 55%);
|
|
}
|
|
|
|
package-row.installed progress fill {
|
|
background-color: var(--color-success);
|
|
}
|
|
|
|
package-row footer {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
width: 100%;
|
|
min-width: 0;
|
|
gap: var(--space-sm);
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
package-row footer > small {
|
|
display: block;
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
font-size: var(--font-size-xs);
|
|
line-height: 1;
|
|
color: rgba(var(--color-text-rgb), 45%);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
package-row nav {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
gap: 6dp;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
package-row nav > button.icon-action {
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 0 0 30dp;
|
|
width: 30dp;
|
|
min-width: 30dp;
|
|
height: 26dp;
|
|
padding: 0;
|
|
border-radius: 14dp;
|
|
font-size: var(--font-size-md);
|
|
}
|
|
|
|
package-row nav > button.icon-action icon {
|
|
flex: 0 0 var(--font-size-md);
|
|
width: var(--font-size-md);
|
|
height: var(--font-size-md);
|
|
font-size: var(--font-size-md);
|
|
line-height: 1;
|
|
}
|
|
|
|
package-row.installed {
|
|
align-items: center;
|
|
}
|
|
|
|
package-row.installed > mod-icon {
|
|
margin-top: 0;
|
|
}
|
|
|
|
package-row.installed > section {
|
|
padding-right: 38dp;
|
|
}
|
|
|
|
package-row.installed header > small {
|
|
display: none;
|
|
}
|
|
|
|
package-row.installed nav {
|
|
position: absolute;
|
|
top: 17dp;
|
|
right: 0;
|
|
}
|
|
|
|
package-row.installed nav > button.icon-action {
|
|
opacity: 0.45;
|
|
}
|
|
|
|
verification-progress {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10dp;
|
|
width: 100%;
|
|
}
|
|
|
|
verification-file {
|
|
display: block;
|
|
font-size: var(--font-size-lg);
|
|
color: var(--color-white);
|
|
}
|
|
|
|
progress.verification-progress-bar {
|
|
height: 8dp;
|
|
margin: var(--space-2xs) 0 0 0;
|
|
}
|
|
|
|
verification-detail {
|
|
display: block;
|
|
font-size: var(--font-size-sm);
|
|
color: rgba(var(--color-text-rgb), 65%);
|
|
}
|
|
|
|
modal-actions {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
align-items: stretch;
|
|
gap: var(--space-md);
|
|
width: 100%;
|
|
flex: 0 0 auto;
|
|
padding-top: var(--space-xs);
|
|
}
|
|
|
|
modal-actions.vertical {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
modal-actions.vertical button.modal-btn {
|
|
flex: 0 0 auto;
|
|
width: 100%;
|
|
}
|
|
|
|
@media (max-height: 640dp) {
|
|
modal-dialog {
|
|
padding: var(--space-lg);
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
modal-body {
|
|
font-size: var(--font-size-lg);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640dp) {
|
|
modal-actions {
|
|
flex-direction: column;
|
|
}
|
|
|
|
modal-actions button.modal-btn {
|
|
flex: 0 0 auto;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
button.icon-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 44dp;
|
|
height: 44dp;
|
|
padding: var(--space-sm);
|
|
box-sizing: border-box;
|
|
flex-shrink: 0;
|
|
font-size: var(--font-size-5xl);
|
|
}
|
|
|
|
button.icon-button icon {
|
|
display: block;
|
|
flex-shrink: 0;
|
|
line-height: 1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
ui-tooltip {
|
|
display: none;
|
|
position: absolute;
|
|
z-index: 1000;
|
|
max-width: 240dp;
|
|
padding: 6dp 10dp;
|
|
border: 1dp var(--color-border);
|
|
border-radius: var(--radius-panel);
|
|
background-color: rgba(var(--color-surface-rgb), 96%);
|
|
color: var(--color-text);
|
|
font-size: var(--font-size-md);
|
|
word-break: break-word;
|
|
pointer-events: none;
|
|
focus: none;
|
|
}
|
|
|
|
ui-tooltip.visible {
|
|
display: block;
|
|
}
|