aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/newlightbox/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/newlightbox/components')
-rw-r--r--src/client/views/newlightbox/components/EditableText/EditableText.scss46
-rw-r--r--src/client/views/newlightbox/components/Recommendation/Recommendation.scss122
-rw-r--r--src/client/views/newlightbox/components/SkeletonDoc/SkeletonDoc.scss133
-rw-r--r--src/client/views/newlightbox/components/Template/Template.scss12
4 files changed, 156 insertions, 157 deletions
diff --git a/src/client/views/newlightbox/components/EditableText/EditableText.scss b/src/client/views/newlightbox/components/EditableText/EditableText.scss
index 7828538ab..8007e8d43 100644
--- a/src/client/views/newlightbox/components/EditableText/EditableText.scss
+++ b/src/client/views/newlightbox/components/EditableText/EditableText.scss
@@ -1,34 +1,34 @@
-@import '../../NewLightboxStyles.scss';
+@use '../../NewLightboxStyles.scss' as newstyles;
.lb-editableText,
.lb-displayText {
padding: 4px 7px !important;
- border: $standard-border !important;
- border-color: $gray-l2 !important;
+ border: newstyles.$standard-border !important;
+ border-color: newstyles.$gray-l2 !important;
}
.lb-editableText {
- -webkit-appearance: none;
- overflow: hidden;
- font-size: inherit;
- border: none;
- outline: none;
- width: 100%;
- margin: 0px;
- padding: 0px;
- box-shadow: none !important;
- background: none;
-
- &:focus {
+ -webkit-appearance: none;
+ overflow: hidden;
+ font-size: inherit;
+ border: none;
outline: none;
- background-color: $blue-l1;
- }
+ width: 100%;
+ margin: 0px;
+ padding: 0px;
+ box-shadow: none !important;
+ background: none;
+
+ &:focus {
+ outline: none;
+ background-color: newstyles.$blue-l1;
+ }
}
.lb-displayText {
- cursor: text !important;
- width: 100%;
- display: flex;
- align-items: center;
- font-size: inherit;
-} \ No newline at end of file
+ cursor: text !important;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ font-size: inherit;
+}
diff --git a/src/client/views/newlightbox/components/Recommendation/Recommendation.scss b/src/client/views/newlightbox/components/Recommendation/Recommendation.scss
index c86c63ba0..cf6b5ccb1 100644
--- a/src/client/views/newlightbox/components/Recommendation/Recommendation.scss
+++ b/src/client/views/newlightbox/components/Recommendation/Recommendation.scss
@@ -1,4 +1,4 @@
-@import '../../NewLightboxStyles.scss';
+@use '../../NewLightboxStyles.scss' as newstyles;
.recommendation-container {
width: 100%;
@@ -8,22 +8,22 @@
display: grid;
grid-template-columns: 0% 100%;
grid-template-rows: auto auto auto auto auto;
- gap: 5px 0px;
+ gap: 5px 0px;
padding: 10px;
cursor: pointer;
transition: 0.2s ease;
- border: $standard-border;
- border-color: $gray-l2;
+ border: newstyles.$standard-border;
+ border-color: newstyles.$gray-l2;
background: white;
&:hover {
- // background: white !important;
- transform: scale(1.02);
- z-index: 0;
+ // background: white !important;
+ transform: scale(1.02);
+ z-index: 0;
- .title {
- text-decoration: underline;
- }
+ .title {
+ text-decoration: underline;
+ }
}
&.previewUrl {
@@ -39,18 +39,18 @@
grid-template-rows: auto auto auto auto auto;
gap: 5px 10px;
- .image-container,
- .title,
- .info,
- .source,
- .explainer,
- .hide-rec {
- animation: skeleton-loading-l3 1s linear infinite alternate;
- }
+ .image-container,
+ .title,
+ .info,
+ .source,
+ .explainer,
+ .hide-rec {
+ animation: skeleton-loading-l3 1s linear infinite alternate;
+ }
- .title {
- border-radius: 20px;
- }
+ .title {
+ border-radius: 20px;
+ }
}
.distance-container,
@@ -64,62 +64,62 @@
}
.image-container {
- grid-row: 2/5;
- grid-column: 1;
- border-radius: 20px;
- overflow: hidden;
+ grid-row: 2/5;
+ grid-column: 1;
+ border-radius: 20px;
+ overflow: hidden;
- .image {
- width: 100%;
- height: 100%;
- object-fit: cover;
- }
+ .image {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
}
.title {
- grid-row: 1;
- grid-column: 1/3;
- border-radius: 20px;
- font-size: $h2-size;
- font-weight: $h2-weight;
- overflow: hidden;
- border-radius: 0px;
- min-height: 30px;
+ grid-row: 1;
+ grid-column: 1/3;
+ border-radius: 20px;
+ font-size: newstyles.$h2-size;
+ font-weight: newstyles.$h2-weight;
+ overflow: hidden;
+ border-radius: 0px;
+ min-height: 30px;
}
.info {
- grid-row: 2;
- grid-column: 2;
- border-radius: 20px;
- display: flex;
- flex-direction: row;
- gap: 5px;
- font-size: $body-size;
+ grid-row: 2;
+ grid-column: 2;
+ border-radius: 20px;
+ display: flex;
+ flex-direction: row;
+ gap: 5px;
+ font-size: newstyles.$body-size;
.lb-type {
padding: 2px 7px !important;
- background: $gray-l2;
+ background: newstyles.$gray-l2;
}
}
.lb-label {
- color: $gray-l3;
- font-weight: $h1-weight;
- font-size: $body-size;
+ color: newstyles.$gray-l3;
+ font-weight: newstyles.$h1-weight;
+ font-size: newstyles.$body-size;
}
.source {
grid-row: 3;
grid-column: 2;
border-radius: 20px;
- font-size: $body-size;
+ font-size: newstyles.$body-size;
display: flex;
justify-content: flex-start;
align-items: center;
.lb-source {
padding: 2px 7px !important;
- background: $gray-l2;
+ background: newstyles.$gray-l2;
border-radius: 10px;
white-space: nowrap;
max-width: 130px;
@@ -134,7 +134,7 @@
border-radius: 20px;
font-size: 10px;
width: 100%;
- background: $blue-l1;
+ background: newstyles.$blue-l1;
border-radius: 0;
padding: 10px;
@@ -145,7 +145,7 @@
gap: 3px;
.concept {
padding: 2px 7px !important;
- background: $gray-l2;
+ background: newstyles.$gray-l2;
}
}
}
@@ -154,7 +154,7 @@
grid-row: 5;
grid-column: 2;
border-radius: 20px;
- font-size: $body-size;
+ font-size: newstyles.$body-size;
display: flex;
align-items: center;
margin-top: 5px;
@@ -162,15 +162,15 @@
justify-content: flex-end;
text-transform: underline;
}
-
+
&.dark {
- background: $black;
- border-color: $white;
+ background: newstyles.$black;
+ border-color: newstyles.$white;
}
-
+
&.light,
&.default {
- background: $white;
- border-color: $white;
+ background: newstyles.$white;
+ border-color: newstyles.$white;
}
-} \ No newline at end of file
+}
diff --git a/src/client/views/newlightbox/components/SkeletonDoc/SkeletonDoc.scss b/src/client/views/newlightbox/components/SkeletonDoc/SkeletonDoc.scss
index e541e3f3c..bbc730144 100644
--- a/src/client/views/newlightbox/components/SkeletonDoc/SkeletonDoc.scss
+++ b/src/client/views/newlightbox/components/SkeletonDoc/SkeletonDoc.scss
@@ -1,82 +1,81 @@
-@import '../../NewLightboxStyles.scss';
+@use '../../NewLightboxStyles.scss' as newstyles;
.skeletonDoc-container {
- display: flex;
- flex-direction: column;
- height: calc(100% - 40px);
- margin: 20px;
- gap: 20px;
+ display: flex;
+ flex-direction: column;
+ height: calc(100% - 40px);
+ margin: 20px;
+ gap: 20px;
- .header {
- width: calc(100% - 20px);
- height: 80px;
- background: $gray-l2;
- animation: skeleton-loading-l2 1s linear infinite alternate;
- display: grid;
- grid-template-rows: 60% 40%;
- padding: 10px;
- grid-template-columns: auto auto auto auto;
- border-radius: 20px;
+ .header {
+ width: calc(100% - 20px);
+ height: 80px;
+ background: newstyles.$gray-l2;
+ animation: skeleton-loading-l2 1s linear infinite alternate;
+ display: grid;
+ grid-template-rows: 60% 40%;
+ padding: 10px;
+ grid-template-columns: auto auto auto auto;
+ border-radius: 20px;
- .title {
- grid-row: 1;
- grid-column: 1 / 5;
- display: flex;
- width: fit-content;
- height: 100%;
- min-width: 500px;
- font-size: $title-size;
- animation: skeleton-loading-l3 1s linear infinite alternate;
- border-radius: 20px;
- }
+ .title {
+ grid-row: 1;
+ grid-column: 1 / 5;
+ display: flex;
+ width: fit-content;
+ height: 100%;
+ min-width: 500px;
+ font-size: newstyles.$title-size;
+ animation: skeleton-loading-l3 1s linear infinite alternate;
+ border-radius: 20px;
+ }
- .type {
- display: flex;
- padding: 3px 7px;
- width: fit-content;
- height: fit-content;
- margin-top: 8px;
- min-height: 15px;
- min-width: 60px;
- grid-row: 2;
- grid-column: 1;
- animation: skeleton-loading-l3 1s linear infinite alternate;
- border-radius: 20px;
- }
+ .type {
+ display: flex;
+ padding: 3px 7px;
+ width: fit-content;
+ height: fit-content;
+ margin-top: 8px;
+ min-height: 15px;
+ min-width: 60px;
+ grid-row: 2;
+ grid-column: 1;
+ animation: skeleton-loading-l3 1s linear infinite alternate;
+ border-radius: 20px;
+ }
- .buttons-container {
- grid-row: 1 / 3;
- grid-column: 5;
- display: flex;
- justify-content: flex-end;
- align-items: center;
- gap: 10px;
+ .buttons-container {
+ grid-row: 1 / 3;
+ grid-column: 5;
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ gap: 10px;
- .button {
- width: 50px;
- height: 50px;
- border-radius: 100%;
- animation: skeleton-loading-l3 1s linear infinite alternate;
- }
+ .button {
+ width: 50px;
+ height: 50px;
+ border-radius: 100%;
+ animation: skeleton-loading-l3 1s linear infinite alternate;
+ }
+ }
}
- }
-
- .content {
- width: 100%;
- flex: 1;
- -webkit-flex: 1; /* Chrome */
- background: $gray-l2;
- animation: skeleton-loading-l2 1s linear infinite alternate;
- border-radius: 20px;
- }
+ .content {
+ width: 100%;
+ flex: 1;
+ -webkit-flex: 1; /* Chrome */
+ background: newstyles.$gray-l2;
+ animation: skeleton-loading-l2 1s linear infinite alternate;
+ border-radius: 20px;
+ }
// &.dark {
- // background: $black;
+ // background: newstyles.$black;
// }
-
+
// &.light,
// &.default {
- // background: $white;
+ // background: newstyles.$white;
// }
-} \ No newline at end of file
+}
diff --git a/src/client/views/newlightbox/components/Template/Template.scss b/src/client/views/newlightbox/components/Template/Template.scss
index 5b72ddaf9..c2fb9fba4 100644
--- a/src/client/views/newlightbox/components/Template/Template.scss
+++ b/src/client/views/newlightbox/components/Template/Template.scss
@@ -1,15 +1,15 @@
-@import '../../NewLightboxStyles.scss';
+@use '../../NewLightboxStyles.scss' as newstyles;
.template-container {
width: 100vw;
height: 100vh;
-
+
&.dark {
- background: $black;
+ background: newstyles.$black;
}
-
+
&.light,
&.default {
- background: $white;
+ background: newstyles.$white;
}
-} \ No newline at end of file
+}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-12-10 04:09:00 +0000