mirror of
https://github.com/CharaChorder/DeviceManager.git
synced 2026-10-03 08:11:57 +00:00
refactor: swap stylelint css order plugin for prettier plugin
This commit is contained in:
@@ -131,14 +131,13 @@
|
||||
|
||||
<style lang="scss">
|
||||
.layout {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-areas:
|
||||
"sidebar main"
|
||||
"sidebar footer";
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -26,17 +26,17 @@
|
||||
dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: none;
|
||||
|
||||
background: var(--md-sys-color-error);
|
||||
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
color: var(--md-sys-color-on-error);
|
||||
|
||||
background: var(--md-sys-color-error);
|
||||
border: none;
|
||||
|
||||
> * {
|
||||
max-width: 20cm;
|
||||
}
|
||||
@@ -54,8 +54,8 @@
|
||||
|
||||
div > p {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -175,9 +175,9 @@
|
||||
<style lang="scss">
|
||||
.sync-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
button {
|
||||
text-wrap: nowrap;
|
||||
@@ -186,14 +186,14 @@
|
||||
|
||||
progress {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
right: 16px;
|
||||
bottom: 0;
|
||||
left: 16px;
|
||||
right: 16px;
|
||||
overflow: hidden;
|
||||
z-index: -1;
|
||||
border-radius: 4px;
|
||||
width: calc(100% - 32px);
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
progress::-webkit-progress-bar {
|
||||
@@ -205,32 +205,32 @@
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: var(--md-sys-color-error);
|
||||
gap: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--md-sys-color-error);
|
||||
}
|
||||
|
||||
input[type="color"] {
|
||||
cursor: pointer;
|
||||
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
|
||||
inline-size: 20px;
|
||||
block-size: 20px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
color: inherit;
|
||||
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
|
||||
&::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
@@ -242,16 +242,16 @@
|
||||
|
||||
footer {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
width: 100%;
|
||||
opacity: 0.4;
|
||||
padding: 8px;
|
||||
padding-inline-end: 16px;
|
||||
padding-block-start: 0;
|
||||
|
||||
opacity: 0.4;
|
||||
width: 100%;
|
||||
|
||||
@media (prefers-contrast: more) {
|
||||
opacity: 0.8;
|
||||
@@ -264,8 +264,8 @@
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -288,13 +288,13 @@
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
padding-inline: 12px;
|
||||
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
|
||||
padding-inline: 12px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
||||
@@ -81,15 +81,15 @@
|
||||
|
||||
<style lang="scss">
|
||||
.sidebar {
|
||||
margin: 8px;
|
||||
padding-inline-end: 8px;
|
||||
width: 64px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
grid-area: sidebar;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin: 8px;
|
||||
border-right: 1px solid var(--md-sys-color-outline);
|
||||
padding-inline-end: 8px;
|
||||
width: 64px;
|
||||
}
|
||||
|
||||
li {
|
||||
@@ -104,18 +104,18 @@
|
||||
font-size: 12px;
|
||||
|
||||
&.wip {
|
||||
color: var(--md-sys-color-error);
|
||||
opacity: 0.5;
|
||||
color: var(--md-sys-color-error);
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
|
||||
transition: all 250ms ease;
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
> .content {
|
||||
@@ -132,24 +132,24 @@
|
||||
}
|
||||
|
||||
.icon {
|
||||
border-radius: 50%;
|
||||
background: var(--md-sys-color-primary);
|
||||
color: var(--md-sys-color-on-primary);
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul + ul::before {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 1px;
|
||||
background: var(--md-sys-color-outline);
|
||||
margin: 16px 0;
|
||||
background: var(--md-sys-color-outline);
|
||||
height: 1px;
|
||||
content: "";
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -33,8 +33,8 @@
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
div {
|
||||
@@ -42,10 +42,10 @@
|
||||
}
|
||||
|
||||
progress {
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
progress::-webkit-progress-bar {
|
||||
@@ -53,7 +53,7 @@
|
||||
}
|
||||
|
||||
progress::-webkit-progress-value {
|
||||
background: var(--md-sys-color-primary);
|
||||
transition: width 2s ease;
|
||||
background: var(--md-sys-color-primary);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -97,8 +97,8 @@
|
||||
}
|
||||
|
||||
.correct-device {
|
||||
color: var(--md-sys-color-primary);
|
||||
opacity: 1;
|
||||
color: var(--md-sys-color-primary);
|
||||
}
|
||||
|
||||
.incorrect-device {
|
||||
|
||||
@@ -28,8 +28,8 @@
|
||||
<style lang="scss">
|
||||
ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
gap: 8px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li {
|
||||
@@ -38,13 +38,13 @@
|
||||
}
|
||||
|
||||
a {
|
||||
outline: 1px solid var(--md-sys-color-outline);
|
||||
border-radius: 8px;
|
||||
transition:
|
||||
background-color 200ms ease,
|
||||
color 200ms ease,
|
||||
outline-offset 200ms ease,
|
||||
outline-color 200ms ease;
|
||||
outline: 1px solid var(--md-sys-color-outline);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
@keyframes highlight {
|
||||
@@ -71,9 +71,9 @@
|
||||
}
|
||||
|
||||
.highlight {
|
||||
outline-width: 2px;
|
||||
outline-color: var(--md-sys-color-primary);
|
||||
animation: wiggle 500ms ease 2 alternate;
|
||||
outline-color: var(--md-sys-color-primary);
|
||||
outline-width: 2px;
|
||||
background-color: var(--md-sys-color-primary-container);
|
||||
color: var(--md-sys-color-on-primary-container);
|
||||
}
|
||||
|
||||
@@ -38,21 +38,21 @@
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li {
|
||||
height: 2em;
|
||||
overflow: hidden;
|
||||
transition:
|
||||
height 200ms ease,
|
||||
opacity 200ms ease;
|
||||
height: 2em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
label {
|
||||
padding: 0;
|
||||
opacity: 0.6;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
@@ -64,8 +64,8 @@
|
||||
margin-block-end: 0;
|
||||
|
||||
em {
|
||||
font-style: normal;
|
||||
color: var(--md-sys-color-primary);
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -73,13 +73,13 @@
|
||||
time {
|
||||
opacity: 0.5;
|
||||
&:before {
|
||||
content: "•";
|
||||
padding-inline: 0.4ch;
|
||||
content: "•";
|
||||
}
|
||||
}
|
||||
|
||||
div.title:has(input:not(:checked)) ~ ul .pre-release {
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -353,8 +353,8 @@
|
||||
}
|
||||
|
||||
.changelog ul {
|
||||
list-style: none;
|
||||
padding-inline-start: 0em;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.changelog li {
|
||||
@@ -364,11 +364,11 @@
|
||||
|
||||
.changelog b {
|
||||
display: inline-block;
|
||||
color: var(--md-sys-color-on-tertiary-container);
|
||||
translate: -0.5em -0.2em;
|
||||
border-radius: 8px;
|
||||
background: var(--md-sys-color-tertiary-container);
|
||||
padding: 0.2em 0.5em;
|
||||
border-radius: 8px;
|
||||
translate: -0.5em -0.2em;
|
||||
color: var(--md-sys-color-on-tertiary-container);
|
||||
}
|
||||
|
||||
pre {
|
||||
@@ -376,8 +376,8 @@
|
||||
}
|
||||
|
||||
.unsafe-opt-in {
|
||||
margin-block: 1em;
|
||||
opacity: 0.6;
|
||||
margin-block: 1em;
|
||||
font-size: 0.7em;
|
||||
|
||||
& + .unsafe-updates {
|
||||
@@ -425,22 +425,22 @@
|
||||
|
||||
button.inline-button {
|
||||
display: inline;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: unset;
|
||||
font-size: inherit;
|
||||
color: var(--md-sys-color-primary);
|
||||
font-size: inherit;
|
||||
|
||||
.icon {
|
||||
font-size: 1.2em;
|
||||
translate: 0 0.1em;
|
||||
padding-inline-end: 0.2em;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.icon.ok {
|
||||
font-size: 1.2em;
|
||||
translate: 0 0.1em;
|
||||
font-size: 1.2em;
|
||||
--icon-fill: 1;
|
||||
}
|
||||
|
||||
@@ -449,17 +449,7 @@
|
||||
}
|
||||
|
||||
button.update-button {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
height: 42px;
|
||||
|
||||
border: 2px solid currentcolor;
|
||||
border-radius: 8px;
|
||||
|
||||
outline: 2px dashed currentcolor;
|
||||
outline-offset: 4px;
|
||||
|
||||
background: var(--md-sys-color-background);
|
||||
transition:
|
||||
border 200ms ease,
|
||||
color 200ms ease;
|
||||
@@ -467,9 +457,19 @@
|
||||
margin: 6px;
|
||||
margin-block: 16px;
|
||||
|
||||
outline: 2px dashed currentcolor;
|
||||
outline-offset: 4px;
|
||||
|
||||
border: 2px solid currentcolor;
|
||||
border-radius: 8px;
|
||||
|
||||
background: var(--md-sys-color-background);
|
||||
height: 42px;
|
||||
overflow: hidden;
|
||||
|
||||
&.primary {
|
||||
color: var(--md-sys-color-primary);
|
||||
background: none;
|
||||
color: var(--md-sys-color-primary);
|
||||
}
|
||||
|
||||
&.progress,
|
||||
@@ -478,34 +478,34 @@
|
||||
}
|
||||
|
||||
&.working::before {
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
border-radius: 8px;
|
||||
background: var(--md-sys-color-background);
|
||||
width: calc(100% - 4px);
|
||||
height: calc(100% - 4px);
|
||||
border-radius: 8px;
|
||||
content: "";
|
||||
}
|
||||
|
||||
&.working::after {
|
||||
z-index: -2;
|
||||
position: absolute;
|
||||
content: "";
|
||||
background: var(--md-sys-color-primary);
|
||||
z-index: -2;
|
||||
animation: rotate 1s ease-out forwards infinite;
|
||||
height: 30%;
|
||||
background: var(--md-sys-color-primary);
|
||||
width: 120%;
|
||||
height: 30%;
|
||||
content: "";
|
||||
}
|
||||
|
||||
&.progress::after {
|
||||
z-index: -2;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
content: "";
|
||||
background: var(--md-sys-color-primary);
|
||||
opacity: 0.2;
|
||||
height: 100%;
|
||||
z-index: -2;
|
||||
background: var(--md-sys-color-primary);
|
||||
width: var(--progress);
|
||||
height: 100%;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -55,8 +55,8 @@
|
||||
|
||||
.layout {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
hr {
|
||||
@@ -65,20 +65,20 @@
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
button,
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
background: var(--md-sys-color-surface-variant);
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: var(--md-sys-color-surface-variant);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chats {
|
||||
@@ -86,7 +86,7 @@
|
||||
}
|
||||
|
||||
.space {
|
||||
font-size: 20px;
|
||||
margin-bottom: 8px;
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -174,7 +174,7 @@
|
||||
}
|
||||
|
||||
.members {
|
||||
width: 200px;
|
||||
flex-shrink: 0;
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -193,19 +193,19 @@
|
||||
<style lang="scss">
|
||||
.click-me {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: fit-content;
|
||||
align-items: center;
|
||||
margin-inline: 8px;
|
||||
padding-block: 2px;
|
||||
padding-inline-start: 8px;
|
||||
padding-inline-end: 12px;
|
||||
font-family: inherit;
|
||||
font-weight: bold;
|
||||
color: var(--md-sys-color-primary);
|
||||
border: 2px solid var(--md-sys-color-primary);
|
||||
border-radius: 18px;
|
||||
outline: 2px dashed var(--md-sys-color-primary);
|
||||
outline-offset: 2px;
|
||||
border: 2px solid var(--md-sys-color-primary);
|
||||
border-radius: 18px;
|
||||
padding-inline-start: 8px;
|
||||
padding-inline-end: 12px;
|
||||
padding-block: 2px;
|
||||
height: fit-content;
|
||||
color: var(--md-sys-color-primary);
|
||||
font-weight: bold;
|
||||
font-family: inherit;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -56,33 +56,32 @@
|
||||
nav {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
margin-inline: auto;
|
||||
margin-block: 8px;
|
||||
padding-inline: 16px;
|
||||
|
||||
width: calc(min(100%, 28cm));
|
||||
margin-block: 8px;
|
||||
margin-inline: auto;
|
||||
padding-inline: 16px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
aspect-ratio: 1;
|
||||
padding: 0;
|
||||
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
background: transparent;
|
||||
transition: all 250ms ease;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
|
||||
transition: all 250ms ease;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
|
||||
aspect-ratio: 1;
|
||||
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.actions {
|
||||
@@ -96,13 +95,13 @@
|
||||
|
||||
.profiles {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
:disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -360,8 +360,8 @@
|
||||
<style lang="scss">
|
||||
.search-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.paginator {
|
||||
@@ -386,14 +386,14 @@
|
||||
textarea {
|
||||
flex: 1;
|
||||
transition: outline-color 250ms ease;
|
||||
background: none;
|
||||
color: inherit;
|
||||
border: 1px dashed var(--md-sys-color-outline);
|
||||
margin: 2px;
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: -1px;
|
||||
margin: 2px;
|
||||
padding: 8px;
|
||||
border: 1px dashed var(--md-sys-color-outline);
|
||||
border-radius: 4px;
|
||||
background: none;
|
||||
padding: 8px;
|
||||
color: inherit;
|
||||
|
||||
&:focus {
|
||||
outline-color: var(--md-sys-color-primary);
|
||||
@@ -413,34 +413,33 @@
|
||||
}
|
||||
|
||||
input[type="search"] {
|
||||
width: 512px;
|
||||
transition: all 250ms ease;
|
||||
margin-block-start: 16px;
|
||||
padding-block: 8px;
|
||||
padding-inline: 16px;
|
||||
|
||||
font-size: 16px;
|
||||
color: inherit;
|
||||
|
||||
background: none;
|
||||
border: 0 solid var(--md-sys-color-surface-variant);
|
||||
border-bottom-width: 1px;
|
||||
|
||||
transition: all 250ms ease;
|
||||
background: none;
|
||||
padding-inline: 16px;
|
||||
padding-block: 8px;
|
||||
width: 512px;
|
||||
color: inherit;
|
||||
|
||||
font-size: 16px;
|
||||
|
||||
@media (prefers-contrast: more) {
|
||||
border-color: var(--md-sys-color-outline);
|
||||
border-style: dashed;
|
||||
border-color: var(--md-sys-color-outline);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
opacity: 0.8;
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--md-sys-color-primary);
|
||||
border-style: solid;
|
||||
outline: none;
|
||||
border-style: solid;
|
||||
border-color: var(--md-sys-color-primary);
|
||||
}
|
||||
|
||||
&.loading {
|
||||
@@ -449,25 +448,25 @@
|
||||
}
|
||||
|
||||
section {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
height: 100%;
|
||||
padding-inline: 8px;
|
||||
position: relative;
|
||||
|
||||
border-radius: 16px;
|
||||
padding-inline: 8px;
|
||||
|
||||
height: 100%;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.results {
|
||||
height: 100%;
|
||||
min-width: min(90vw, 16.5cm);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
table {
|
||||
transition: all 1s ease;
|
||||
height: fit-content;
|
||||
overflow-y: hidden;
|
||||
transition: all 1s ease;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -176,9 +176,9 @@
|
||||
}
|
||||
|
||||
.add {
|
||||
font-size: 18px;
|
||||
height: 20px;
|
||||
opacity: 0;
|
||||
height: 20px;
|
||||
font-size: 18px;
|
||||
--icon-fill: 1;
|
||||
}
|
||||
|
||||
@@ -187,13 +187,12 @@
|
||||
}
|
||||
|
||||
.chord {
|
||||
position: relative;
|
||||
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
gap: 4px;
|
||||
margin-inline: 4px;
|
||||
|
||||
height: 32px;
|
||||
margin-inline: 4px;
|
||||
|
||||
&:focus-within {
|
||||
outline: none;
|
||||
@@ -201,22 +200,21 @@
|
||||
}
|
||||
|
||||
.chord::after {
|
||||
content: "";
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform-origin: center left;
|
||||
translate: -20px 0;
|
||||
scale: 0 1;
|
||||
|
||||
width: calc(100% - 60px);
|
||||
height: 1px;
|
||||
|
||||
background: currentcolor;
|
||||
|
||||
transition:
|
||||
scale 250ms ease,
|
||||
color 250ms ease;
|
||||
|
||||
background: currentcolor;
|
||||
|
||||
width: calc(100% - 60px);
|
||||
height: 1px;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.edited {
|
||||
|
||||
@@ -133,11 +133,11 @@
|
||||
.separator {
|
||||
display: inline-flex;
|
||||
|
||||
width: 1px;
|
||||
height: 24px;
|
||||
|
||||
opacity: 0.2;
|
||||
background: currentcolor;
|
||||
|
||||
width: 1px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
button {
|
||||
@@ -153,12 +153,12 @@
|
||||
}
|
||||
|
||||
.table-buttons {
|
||||
opacity: 0;
|
||||
transition: opacity 75ms ease;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform: translate(100%, -50%);
|
||||
opacity: 0;
|
||||
transition: opacity 75ms ease;
|
||||
background: var(--md-sys-color-surface-variant);
|
||||
}
|
||||
|
||||
|
||||
@@ -260,26 +260,26 @@
|
||||
transform: translateX(-50%);
|
||||
translate: 0 0;
|
||||
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
transition: translate 50ms ease;
|
||||
|
||||
background: var(--md-sys-color-on-secondary-container);
|
||||
|
||||
transition: translate 50ms ease;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
top: -24px;
|
||||
left: 0;
|
||||
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
|
||||
color: var(--md-sys-color-on-secondary-container);
|
||||
|
||||
background: var(--md-sys-color-secondary-container);
|
||||
border: 2px solid currentcolor;
|
||||
border-radius: 12px 12px 12px 0;
|
||||
|
||||
background: var(--md-sys-color-secondary-container);
|
||||
padding: 0;
|
||||
|
||||
height: 24px;
|
||||
|
||||
color: var(--md-sys-color-on-secondary-container);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -292,13 +292,13 @@
|
||||
}
|
||||
|
||||
.auto-space-edit {
|
||||
padding-inline: 0;
|
||||
font-size: 1.3em;
|
||||
margin-inline: 8px;
|
||||
background: var(--md-sys-color-tertiary-container);
|
||||
color: var(--md-sys-color-on-tertiary-container);
|
||||
height: 1em;
|
||||
border-radius: 4px;
|
||||
background: var(--md-sys-color-tertiary-container);
|
||||
padding-inline: 0;
|
||||
height: 1em;
|
||||
color: var(--md-sys-color-on-tertiary-container);
|
||||
font-size: 1.3em;
|
||||
|
||||
&:first-of-type:not(:has(:checked)),
|
||||
&:last-of-type:has(:checked) {
|
||||
@@ -312,9 +312,9 @@
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
position: relative;
|
||||
align-items: center;
|
||||
|
||||
padding-block: 4px;
|
||||
|
||||
@@ -322,20 +322,19 @@
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
content: "";
|
||||
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
|
||||
width: calc(100% - 8px);
|
||||
height: 1px;
|
||||
|
||||
opacity: 0;
|
||||
background: currentcolor;
|
||||
|
||||
transition:
|
||||
opacity 150ms ease,
|
||||
scale 250ms ease;
|
||||
background: currentcolor;
|
||||
|
||||
width: calc(100% - 8px);
|
||||
height: 1px;
|
||||
content: "";
|
||||
}
|
||||
|
||||
&::after {
|
||||
@@ -354,12 +353,11 @@
|
||||
}
|
||||
|
||||
[role="textbox"] {
|
||||
cursor: text;
|
||||
display: flex;
|
||||
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: text;
|
||||
white-space: pre;
|
||||
|
||||
&:focus-within {
|
||||
|
||||
@@ -64,8 +64,8 @@
|
||||
<style lang="scss">
|
||||
section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@@ -179,17 +179,17 @@
|
||||
}
|
||||
|
||||
.content {
|
||||
max-width: 20cm;
|
||||
overflow-y: auto;
|
||||
scroll-behavior: smooth;
|
||||
max-width: 20cm;
|
||||
}
|
||||
|
||||
legend {
|
||||
color: var(--md-sys-color-primary);
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
color: var(--md-sys-color-primary);
|
||||
font-weight: bold;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
@@ -198,31 +198,31 @@
|
||||
|
||||
fieldset {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
margin-inline: 0;
|
||||
margin-block-end: 32px;
|
||||
border: none;
|
||||
|
||||
width: 100%;
|
||||
margin-inline: 0;
|
||||
border: none;
|
||||
margin-block-end: 32px;
|
||||
|
||||
> p {
|
||||
padding-inline-start: 16px;
|
||||
}
|
||||
|
||||
> label {
|
||||
appearance: none;
|
||||
position: relative;
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
height: auto;
|
||||
font-weight: normal;
|
||||
padding: 8px;
|
||||
width: fit-content;
|
||||
align-items: center;
|
||||
appearance: none;
|
||||
|
||||
margin-block: 4px;
|
||||
padding: 8px;
|
||||
width: fit-content;
|
||||
height: auto;
|
||||
font-weight: normal;
|
||||
|
||||
font-size: 14px;
|
||||
|
||||
@@ -235,11 +235,11 @@
|
||||
}
|
||||
|
||||
&.enable-item {
|
||||
background: var(--md-sys-color-surface-variant);
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
margin-inline-start: 8px;
|
||||
padding-inline-end: 16px;
|
||||
background: var(--md-sys-color-surface-variant);
|
||||
padding-inline-start: 8px;
|
||||
padding-inline-end: 16px;
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -251,41 +251,41 @@
|
||||
.description {
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
white-space: normal;
|
||||
text-wrap: wrap;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.unit {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
width: 67px;
|
||||
padding-inline-end: auto;
|
||||
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
border-radius: 16px;
|
||||
|
||||
background: var(--md-sys-color-secondary-container);
|
||||
border-radius: 16px;
|
||||
padding-inline-end: auto;
|
||||
|
||||
width: 67px;
|
||||
overflow: hidden;
|
||||
font-weight: bold;
|
||||
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
display: flex;
|
||||
border: none;
|
||||
|
||||
background: var(--md-sys-color-secondary);
|
||||
padding-block: 4px;
|
||||
|
||||
width: 5ch;
|
||||
height: 100%;
|
||||
padding-block: 4px;
|
||||
color: var(--md-sys-color-on-secondary);
|
||||
|
||||
font-family: "Noto Sans Mono", monospace;
|
||||
color: var(--md-sys-color-on-secondary);
|
||||
text-align: end;
|
||||
|
||||
background: var(--md-sys-color-secondary);
|
||||
border: none;
|
||||
|
||||
&::-webkit-inner-spin-button {
|
||||
display: none;
|
||||
}
|
||||
@@ -302,10 +302,10 @@
|
||||
|
||||
select {
|
||||
appearance: none;
|
||||
background: var(--md-sys-color-secondary);
|
||||
border: none;
|
||||
padding: 4px 8px;
|
||||
border-radius: 8px;
|
||||
background: var(--md-sys-color-secondary);
|
||||
padding: 4px 8px;
|
||||
font: inherit;
|
||||
font-size: 12px;
|
||||
}
|
||||
@@ -316,10 +316,10 @@
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
font-size: 16px;
|
||||
top: 0.5em;
|
||||
right: 0.25em;
|
||||
content: "•";
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -50,8 +50,8 @@
|
||||
}
|
||||
|
||||
button.icon {
|
||||
font-size: 20px;
|
||||
opacity: 0.5;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
form {
|
||||
@@ -62,12 +62,12 @@
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
color: inherit;
|
||||
font-family: inherit;
|
||||
background: none;
|
||||
border: none;
|
||||
border-bottom: 1px solid transparent;
|
||||
background: none;
|
||||
width: fit-content;
|
||||
color: inherit;
|
||||
font-family: inherit;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
@@ -79,8 +79,8 @@
|
||||
color: var(--md-sys-color-error);
|
||||
|
||||
& + button {
|
||||
color: var(--md-sys-color-error);
|
||||
opacity: 1;
|
||||
color: var(--md-sys-color-error);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -102,21 +102,21 @@
|
||||
left: 0;
|
||||
transition: opacity 0.1s;
|
||||
padding: 16px;
|
||||
padding-left: 0;
|
||||
padding-bottom: 5em;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding-right: 16px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
backdrop-filter: blur(10px);
|
||||
padding-right: 16px;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
|
||||
@@ -9,11 +9,11 @@
|
||||
|
||||
<style lang="scss">
|
||||
ul {
|
||||
margin: 16px;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
list-style-type: none;
|
||||
margin: 16px;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
a {
|
||||
|
||||
@@ -186,22 +186,21 @@
|
||||
@use "sass:math";
|
||||
|
||||
input {
|
||||
background: none;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
border: none;
|
||||
background: none;
|
||||
width: 5ch;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
div {
|
||||
min-width: 20ch;
|
||||
padding: 1ch;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1ch;
|
||||
min-width: 20ch;
|
||||
}
|
||||
|
||||
.stats {
|
||||
|
||||
@@ -117,8 +117,8 @@
|
||||
section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@@ -526,9 +526,9 @@
|
||||
}
|
||||
|
||||
.wpm {
|
||||
width: min-content;
|
||||
display: grid;
|
||||
transition: scale 0.2s ease;
|
||||
width: min-content;
|
||||
|
||||
* {
|
||||
grid-row: 1;
|
||||
@@ -538,25 +538,25 @@
|
||||
.finish {
|
||||
display: grid;
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
font-weight: bold;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.sentence {
|
||||
display: grid;
|
||||
width: min-content;
|
||||
gap: 4px 1ch;
|
||||
grid-template-rows: repeat(4, auto);
|
||||
gap: 4px 1ch;
|
||||
margin-block: 1rem;
|
||||
width: min-content;
|
||||
|
||||
.word,
|
||||
.arch {
|
||||
transition: opacity 0.2s ease;
|
||||
|
||||
&.mastered {
|
||||
color: var(--md-sys-color-primary);
|
||||
border-color: var(--md-sys-color-primary);
|
||||
color: var(--md-sys-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -568,40 +568,40 @@
|
||||
|
||||
.progress {
|
||||
position: relative;
|
||||
height: 1rem;
|
||||
width: auto;
|
||||
background: var(--md-sys-color-outline-variant);
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
grid-row: 2;
|
||||
border: none;
|
||||
background: var(--md-sys-color-outline-variant);
|
||||
width: auto;
|
||||
height: 1rem;
|
||||
overflow: hidden;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
transition: transform 0.2s;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
}
|
||||
|
||||
&::before {
|
||||
background: var(--md-sys-color-outline);
|
||||
transform: translateX(var(--progress));
|
||||
background: var(--md-sys-color-outline);
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: var(--md-sys-color-primary);
|
||||
transform: translateX(var(--mastered));
|
||||
background: var(--md-sys-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.threshold {
|
||||
width: auto;
|
||||
grid-row: 1;
|
||||
justify-self: center;
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.2s;
|
||||
grid-row: 1;
|
||||
width: auto;
|
||||
|
||||
&.mastered,
|
||||
&.active {
|
||||
@@ -626,15 +626,15 @@
|
||||
display: flex;
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
font-size: 1.5rem;
|
||||
padding: 1rem;
|
||||
max-width: 16cm;
|
||||
outline: 2px dashed transparent;
|
||||
border-radius: 0.25rem;
|
||||
margin-block: 1rem;
|
||||
transition:
|
||||
outline 0.2s ease,
|
||||
border-radius 0.2s ease;
|
||||
margin-block: 1rem;
|
||||
outline: 2px dashed transparent;
|
||||
border-radius: 0.25rem;
|
||||
padding: 1rem;
|
||||
max-width: 16cm;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.input-section:focus-within {
|
||||
|
||||
@@ -238,23 +238,22 @@
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
|
||||
width: min-content;
|
||||
background: var(--md-sys-color-primary);
|
||||
padding-inline-start: 0;
|
||||
padding-inline-end: 8px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
width: min-content;
|
||||
color: var(--md-sys-color-on-primary);
|
||||
font-weight: bold;
|
||||
|
||||
background: var(--md-sys-color-primary);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.editor-root {
|
||||
|
||||
@@ -8,15 +8,15 @@
|
||||
|
||||
<style lang="scss">
|
||||
section {
|
||||
contain: size;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
contain: size;
|
||||
margin-block-end: 48px;
|
||||
|
||||
width: calc(min(100%, 28cm));
|
||||
height: 100%;
|
||||
margin-block-end: 48px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user