@@ -42,6 +66,7 @@ const glyphInputLabels = computed(() => [t('translation.enterfirstregion'), t('t
[t('translation.enterfirstregion'), t('t
{{ t('translation.check') }}
-
- {{ adjacency }}
-
+
+
+
+ {{ adjacency }}
+
+
@@ -70,13 +101,16 @@ const glyphInputLabels = computed(() => [t('translation.enterfirstregion'), t('t
.title {
margin-block-end: 2rem;
text-align: center;
+ font-weight: 700;
+ font-size: 2rem;
}
.input-wrapper {
display: flex;
flex-wrap: wrap;
gap: 2rem;
- justify-content: space-evenly;
+ justify-content: center;
+ margin-bottom: 1rem;
}
.action-button-wrapper {
@@ -85,17 +119,79 @@ const glyphInputLabels = computed(() => [t('translation.enterfirstregion'), t('t
text-align: center;
}
+.button {
+ background-color: #2c7a7b;
+ color: white;
+ font-weight: 600;
+ padding: 0.6rem 1.5rem;
+ border: none;
+ border-radius: 8px;
+ cursor: pointer;
+ transition:
+ background-color 0.3s ease,
+ opacity 0.3s ease,
+ transform 0.15s ease;
+ opacity: 1;
+}
+
+.button:disabled {
+ background-color: #94a3b8;
+ cursor: not-allowed;
+ opacity: 0.6;
+ transform: none;
+}
+
+.button:not(:disabled):hover {
+ background-color: #285e61;
+}
+
.output {
- text-align: center;
- padding: 1rem;
- border-radius: var(--pico-border-radius);
+ max-width: 400px;
+ margin: 1.5rem auto;
+ padding: 1rem 1.5rem;
+ border-radius: 12px;
+ box-shadow: 0 6px 12px rgb(0 0 0 / 0.1);
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ font-size: 1.125rem;
+ font-weight: 600;
+ color: white;
+ user-select: none;
+ transition:
+ background-color 0.4s ease,
+ box-shadow 0.4s ease;
+}
+
+.icon {
+ display: flex;
+ align-items: center;
}
.is-success {
- background-color: green;
+ background-color: #38a169; /* verde pastel */
+ box-shadow: 0 6px 12px rgb(56 161 105 / 0.4);
}
.is-error {
- background-color: red;
+ background-color: #e53e3e; /* rojo pastel */
+ box-shadow: 0 6px 12px rgb(229 62 62 / 0.4);
+}
+
+.message {
+ flex: 1;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+ transition: opacity 0.4s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+ opacity: 0;
+}
+.fade-enter-to,
+.fade-leave-from {
+ opacity: 1;
}