reconcile/plugin/src/styles.scss
2025-01-03 11:16:58 +00:00

146 lines
2.4 KiB
SCSS

.status-description {
margin: var(--p-spacing) 0;
.number {
padding: var(--size-2-1) var(--size-4-1);
border-radius: var(--radius-s);
background-color: var(--color-base-30);
font-family: var(--font-monospace-default);
font-weight: var(--bold-weight);
font-size: var(--font-ui-small);
&.good {
background-color: rgba(var(--color-green-rgb), 0.35);
}
&.bad {
background-color: rgba(var(--color-red-rgb), 0.35);
}
}
.error {
color: rgb(var(--color-red-rgb));
}
.warning {
color: rgb(var(--color-yellow-rgb));
}
}
.vault-link-settings {
h2 {
display: flex;
align-items: center;
font-size: var(--h2-size);
.version {
display: block;
font-size: var(--font-ui-smaller);
margin-top: var(--size-2-2);
margin-left: var(--size-4-2);
padding: var(--size-2-1) var(--size-4-1);
background-color: var(--color-base-30);
color: var(--color-base-70);
border-radius: var(--radius-s);
}
}
.button-container {
display: flex;
gap: var(--size-4-2);
}
h3 {
font-size: var(--font-ui-large);
margin-top: var(--heading-spacing);
}
button,
input[type="range"],
.checkbox-container,
.slider::-webkit-slider-thumb {
cursor: pointer;
}
textarea {
resize: none;
width: 100%;
height: 60px;
}
}
.sync-status {
display: flex;
gap: var(--size-4-2);
* {
display: block;
}
.initialize-button {
padding: 0 var(--size-4-2);
background: rgba(var(--color-red-rgb), 0.4);
cursor: pointer;
}
}
.log-message {
font: var(--font-monospace-theme);
&.DEBUG {
color: var(--color-base-50);
}
&.INFO {
color: var(--color-green-rgb);
}
&.WARNING {
color: var(--color-yellow-rgb);
}
&.ERROR {
color: var(--color-red-rgb);
}
}
.history-card {
padding: var(--size-4-4) var(--size-4-6);
margin: var(--size-4-2);
background-color: var(--color-base-00);
border-radius: var(--radius-l);
&.success {
background-color: rgba(var(--color-green-rgb), 0.2);
}
&.error {
background-color: rgba(var(--color-red-rgb), 0.2);
}
* {
margin: 0;
padding: 0;
}
.history-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--size-4-4);
.history-card-title {
font: var(--font-monospace-theme);
}
.history-card-timestamp {
font-size: var(--font-ui-small);
color: var(--color-base-70);
}
}
.history-card-message {
font-size: var(--font-ui-medium);
color: var(--color-base-70);
}
}