unika-components 1.0.282 → 1.0.284

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,44 +1,10 @@
1
1
 
2
- h2.uni-text-component, p.uni-text-component {
3
- margin-top: 0;
4
- margin-bottom: 0;
5
- }
6
- button.uni-text-component {
7
- padding: 5px 10px;
8
- cursor: pointer;
9
- }
10
- .uni-text-component {
11
- box-sizing: border-box;
12
- white-space: pre-wrap;
13
- }
14
-
15
2
  .uni-image-component {
16
3
  max-width: 100%;
17
4
  }
18
5
  .uni-image-mask-wrapper {
19
6
  display: inline-block;
20
7
  }
21
-
22
- .uni-video-component {
23
- position: relative;
24
- text-align: center;
25
- }
26
- .play-pause-button {
27
- position: absolute;
28
- top: 50%;
29
- left: 50%;
30
- transform: translate(-50%, -50%);
31
- cursor: pointer;
32
- font-size: 2rem;
33
- color: #fff;
34
- background: rgba(0, 0, 0, 0.6);
35
- border-radius: 50%;
36
- padding: 10px;
37
- transition: background 0.3s;
38
- }
39
- .play-pause-button:hover {
40
- background: rgba(0, 0, 0, 0.8);
41
- }
42
8
 
43
9
  .slide-guide {
44
10
  position: absolute;
@@ -124,10 +90,39 @@ body, html {
124
90
  position: static !important;
125
91
  }
126
92
 
127
- .effect {
128
- width: 100%;
129
- height: 100%;
130
- }
93
+ .uni-video-component {
94
+ position: relative;
95
+ text-align: center;
96
+ }
97
+ .play-pause-button {
98
+ position: absolute;
99
+ top: 50%;
100
+ left: 50%;
101
+ transform: translate(-50%, -50%);
102
+ cursor: pointer;
103
+ font-size: 2rem;
104
+ color: #fff;
105
+ background: rgba(0, 0, 0, 0.6);
106
+ border-radius: 50%;
107
+ padding: 10px;
108
+ transition: background 0.3s;
109
+ }
110
+ .play-pause-button:hover {
111
+ background: rgba(0, 0, 0, 0.8);
112
+ }
113
+
114
+ h2.uni-text-component, p.uni-text-component {
115
+ margin-top: 0;
116
+ margin-bottom: 0;
117
+ }
118
+ button.uni-text-component {
119
+ padding: 5px 10px;
120
+ cursor: pointer;
121
+ }
122
+ .uni-text-component {
123
+ box-sizing: border-box;
124
+ white-space: pre-wrap;
125
+ }
131
126
 
132
127
 
133
128
  .uni-calendar-component {
@@ -168,6 +163,18 @@ body, html {
168
163
  height: 100%;
169
164
  }
170
165
 
166
+ .effect {
167
+ width: 100%;
168
+ height: 100%;
169
+ }
170
+
171
+ .uni-svg-component {
172
+ display: inline-block;
173
+ }
174
+
175
+ .uni-build-up-component {
176
+ }
177
+
171
178
  .swiper-warp {
172
179
  width: 100%;
173
180
  height: 100%;
@@ -182,13 +189,6 @@ body, html {
182
189
  max-height: 100%;
183
190
  }
184
191
 
185
- .uni-build-up-component {
186
- }
187
-
188
- .uni-svg-component {
189
- display: inline-block;
190
- }
191
-
192
192
  .ant-input-number {
193
193
  box-sizing: border-box;
194
194
  margin: 0;
@@ -771,6 +771,193 @@ button.swiper-pagination-bullet {
771
771
  backface-visibility: hidden;
772
772
  }
773
773
 
774
+
775
+ .no-animation__card {
776
+ font-weight: 500;
777
+ font-size: var(--countdown-size, 2rem);
778
+ line-height: 1.5;
779
+ display: block;
780
+ color: var(--main-color, #EC685C);
781
+ }
782
+
783
+ .flip-clock {
784
+ text-align: center;
785
+ perspective: 600px;
786
+ margin: 0 auto;
787
+ }
788
+
789
+ .flip-clock *,
790
+ .flip-clock *:before,
791
+ .flip-clock *:after {
792
+ box-sizing: border-box;
793
+ }
794
+
795
+ .flip-clock__piece {
796
+ display: inline-block;
797
+ margin: 0 0.2vw;
798
+ }
799
+
800
+ @media (min-width: 1000px) {
801
+ .flip-clock__piece {
802
+ margin: 0 5px;
803
+ }
804
+ }
805
+
806
+ .flip-clock__slot {
807
+ font-size: var(--label-size, 1rem);
808
+ line-height: 1.5;
809
+ display: block;
810
+ color: var(--label-color, #222222);
811
+ }
812
+
813
+ .flip-card {
814
+ display: block;
815
+ position: relative;
816
+ padding-bottom: 0.72em; /* halfHeight */
817
+ font-size: var(--countdown-size, 2.25rem);
818
+ line-height: 0.95;
819
+ }
820
+
821
+ @media (min-width: 1000px) {
822
+ .flip-clock__slot {
823
+ font-size: 1.2rem;
824
+ }
825
+
826
+ .flip-card {
827
+ font-size: 3rem;
828
+ }
829
+ }
830
+
831
+ .flip-card__top,
832
+ .flip-card__bottom,
833
+ .flip-card__back-bottom,
834
+ .flip-card__back::before,
835
+ .flip-card__back::after{
836
+ display: block;
837
+ height: 0.72em; /* halfHeight */
838
+ color: var(--main-color, #EC685C);
839
+ background: var(--main-flip-background-color, #222222);
840
+ padding: 0.23em 0.15em 0.4em;
841
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
842
+ backface-visibility: hidden;
843
+ -webkit-backface-visibility: hidden;
844
+ transform-style: preserve-3d;
845
+ width: 2.1em;
846
+ }
847
+
848
+ .flip-card__top-4digits,
849
+ .flip-card__bottom-4digits,
850
+ .flip-card__back-bottom-4digits,
851
+ .flip-card__back-4digits::before,
852
+ .flip-card__back-4digits::after {
853
+ display: block;
854
+ height: 0.72em; /* halfHeight */
855
+ color: var(--main-color, #EC685C);
856
+ background: var(--main-flip-background-color, #222222);
857
+ padding: 0.23em 0.15em 0.4em;
858
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
859
+ backface-visibility: hidden;
860
+ -webkit-backface-visibility: hidden;
861
+ transform-style: preserve-3d;
862
+ width: 2.65em;
863
+ }
864
+
865
+ .flip-card__bottom,
866
+ .flip-card__back-bottom,
867
+ .flip-card__bottom-4digits,
868
+ .flip-card__back-bottom-4digits {
869
+ color: var(--second-flip-color, #EC685C);
870
+ position: absolute;
871
+ top: 50%;
872
+ left: 0;
873
+ border-top: solid 1px var(--second-flip-background-color, #000);
874
+ background: var(--second-flip-background-color, #393939);
875
+ border-radius: 0 0 0.15em 0.15em; /* borderRadius */
876
+ pointer-events: none;
877
+ overflow: hidden;
878
+ z-index: 2;
879
+ }
880
+
881
+ .flip-card__back-bottom,
882
+ .flip-card__back-bottom-4digits {
883
+ z-index: 1;
884
+ }
885
+
886
+ .flip-card__bottom::after,
887
+ .flip-card__back-bottom::after,
888
+ .flip-card__bottom-4digits::after,
889
+ .flip-card__back-bottom-4digits::after {
890
+ display: block;
891
+ margin-top: -0.72em; /* Negative halfHeight */
892
+ }
893
+ .flip-card__back::before,
894
+ .flip-card__bottom::after,
895
+ .flip-card__back-bottom::after,
896
+ .flip-card__back-4digits::before,
897
+ .flip-card__bottom-4digits::after,
898
+ .flip-card__back-bottom-4digits::after {
899
+ content: attr(data-value);
900
+ }
901
+
902
+ .flip-card__back,
903
+ .flip-card__back-4digits {
904
+ position: absolute;
905
+ top: 0;
906
+ height: 100%;
907
+ left: 0%;
908
+ pointer-events: none;
909
+ }
910
+ .flip-card__back::before,
911
+ .flip-card__back-4digits::before {
912
+ position: relative;
913
+ overflow: hidden;
914
+ z-index: -1;
915
+ }
916
+
917
+ .flip .flip-card__back::before,
918
+ .flip .flip-card__back-4digits::before {
919
+ z-index: 1;
920
+ animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
921
+ animation-fill-mode: both;
922
+ transform-origin: center bottom;
923
+ }
924
+
925
+ .flip .flip-card__bottom,
926
+ .flip .flip-card__bottom-4digits {
927
+ transform-origin: center top;
928
+ animation-fill-mode: both;
929
+ animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
930
+ }
931
+ @keyframes flipTop {
932
+ 0% {
933
+ transform: rotateX(0deg);
934
+ z-index: 2;
935
+ }
936
+ 0%, 99% {
937
+ opacity: 1;
938
+ }
939
+ 100% {
940
+ transform: rotateX(-90deg);
941
+ opacity: 0;
942
+ }
943
+ }
944
+
945
+ @keyframes flipBottom {
946
+ 0%, 50% {
947
+ z-index: -1;
948
+ transform: rotateX(90deg);
949
+ opacity: 0;
950
+ }
951
+ 51% {
952
+ opacity: 1;
953
+ }
954
+ 100% {
955
+ opacity: 1;
956
+ transform: rotateX(0deg);
957
+ z-index: 5;
958
+ }
959
+ }
960
+
774
961
  .unika-calendar-box {
775
962
  position: relative;
776
963
  width: 325px !important;
@@ -1031,204 +1218,3 @@ button.swiper-pagination-bullet {
1031
1218
  padding: 0 0px;
1032
1219
  border-bottom: 1px solid
1033
1220
  }
1034
-
1035
- .particles-js-box{
1036
- position:fixed;
1037
- width: 100%;
1038
- height: 100%;
1039
- top:0;
1040
- left:0;
1041
- z-index:1;
1042
- }
1043
- #particles-js{
1044
- background-color:#2d3a4b;
1045
- width: 100%;
1046
- height: 100%;
1047
- }
1048
-
1049
-
1050
- .no-animation__card {
1051
- font-weight: 500;
1052
- font-size: var(--countdown-size, 2rem);
1053
- line-height: 1.5;
1054
- display: block;
1055
- color: var(--main-color, #EC685C);
1056
- }
1057
-
1058
- .flip-clock {
1059
- text-align: center;
1060
- perspective: 600px;
1061
- margin: 0 auto;
1062
- }
1063
-
1064
- .flip-clock *,
1065
- .flip-clock *:before,
1066
- .flip-clock *:after {
1067
- box-sizing: border-box;
1068
- }
1069
-
1070
- .flip-clock__piece {
1071
- display: inline-block;
1072
- margin: 0 0.2vw;
1073
- }
1074
-
1075
- @media (min-width: 1000px) {
1076
- .flip-clock__piece {
1077
- margin: 0 5px;
1078
- }
1079
- }
1080
-
1081
- .flip-clock__slot {
1082
- font-size: var(--label-size, 1rem);
1083
- line-height: 1.5;
1084
- display: block;
1085
- color: var(--label-color, #222222);
1086
- }
1087
-
1088
- .flip-card {
1089
- display: block;
1090
- position: relative;
1091
- padding-bottom: 0.72em; /* halfHeight */
1092
- font-size: var(--countdown-size, 2.25rem);
1093
- line-height: 0.95;
1094
- }
1095
-
1096
- @media (min-width: 1000px) {
1097
- .flip-clock__slot {
1098
- font-size: 1.2rem;
1099
- }
1100
-
1101
- .flip-card {
1102
- font-size: 3rem;
1103
- }
1104
- }
1105
-
1106
- .flip-card__top,
1107
- .flip-card__bottom,
1108
- .flip-card__back-bottom,
1109
- .flip-card__back::before,
1110
- .flip-card__back::after{
1111
- display: block;
1112
- height: 0.72em; /* halfHeight */
1113
- color: var(--main-color, #EC685C);
1114
- background: var(--main-flip-background-color, #222222);
1115
- padding: 0.23em 0.15em 0.4em;
1116
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1117
- backface-visibility: hidden;
1118
- -webkit-backface-visibility: hidden;
1119
- transform-style: preserve-3d;
1120
- width: 2.1em;
1121
- }
1122
-
1123
- .flip-card__top-4digits,
1124
- .flip-card__bottom-4digits,
1125
- .flip-card__back-bottom-4digits,
1126
- .flip-card__back-4digits::before,
1127
- .flip-card__back-4digits::after {
1128
- display: block;
1129
- height: 0.72em; /* halfHeight */
1130
- color: var(--main-color, #EC685C);
1131
- background: var(--main-flip-background-color, #222222);
1132
- padding: 0.23em 0.15em 0.4em;
1133
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1134
- backface-visibility: hidden;
1135
- -webkit-backface-visibility: hidden;
1136
- transform-style: preserve-3d;
1137
- width: 2.65em;
1138
- }
1139
-
1140
- .flip-card__bottom,
1141
- .flip-card__back-bottom,
1142
- .flip-card__bottom-4digits,
1143
- .flip-card__back-bottom-4digits {
1144
- color: var(--second-flip-color, #EC685C);
1145
- position: absolute;
1146
- top: 50%;
1147
- left: 0;
1148
- border-top: solid 1px var(--second-flip-background-color, #000);
1149
- background: var(--second-flip-background-color, #393939);
1150
- border-radius: 0 0 0.15em 0.15em; /* borderRadius */
1151
- pointer-events: none;
1152
- overflow: hidden;
1153
- z-index: 2;
1154
- }
1155
-
1156
- .flip-card__back-bottom,
1157
- .flip-card__back-bottom-4digits {
1158
- z-index: 1;
1159
- }
1160
-
1161
- .flip-card__bottom::after,
1162
- .flip-card__back-bottom::after,
1163
- .flip-card__bottom-4digits::after,
1164
- .flip-card__back-bottom-4digits::after {
1165
- display: block;
1166
- margin-top: -0.72em; /* Negative halfHeight */
1167
- }
1168
- .flip-card__back::before,
1169
- .flip-card__bottom::after,
1170
- .flip-card__back-bottom::after,
1171
- .flip-card__back-4digits::before,
1172
- .flip-card__bottom-4digits::after,
1173
- .flip-card__back-bottom-4digits::after {
1174
- content: attr(data-value);
1175
- }
1176
-
1177
- .flip-card__back,
1178
- .flip-card__back-4digits {
1179
- position: absolute;
1180
- top: 0;
1181
- height: 100%;
1182
- left: 0%;
1183
- pointer-events: none;
1184
- }
1185
- .flip-card__back::before,
1186
- .flip-card__back-4digits::before {
1187
- position: relative;
1188
- overflow: hidden;
1189
- z-index: -1;
1190
- }
1191
-
1192
- .flip .flip-card__back::before,
1193
- .flip .flip-card__back-4digits::before {
1194
- z-index: 1;
1195
- animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
1196
- animation-fill-mode: both;
1197
- transform-origin: center bottom;
1198
- }
1199
-
1200
- .flip .flip-card__bottom,
1201
- .flip .flip-card__bottom-4digits {
1202
- transform-origin: center top;
1203
- animation-fill-mode: both;
1204
- animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
1205
- }
1206
- @keyframes flipTop {
1207
- 0% {
1208
- transform: rotateX(0deg);
1209
- z-index: 2;
1210
- }
1211
- 0%, 99% {
1212
- opacity: 1;
1213
- }
1214
- 100% {
1215
- transform: rotateX(-90deg);
1216
- opacity: 0;
1217
- }
1218
- }
1219
-
1220
- @keyframes flipBottom {
1221
- 0%, 50% {
1222
- z-index: -1;
1223
- transform: rotateX(90deg);
1224
- opacity: 0;
1225
- }
1226
- 51% {
1227
- opacity: 1;
1228
- }
1229
- 100% {
1230
- opacity: 1;
1231
- transform: rotateX(0deg);
1232
- z-index: 5;
1233
- }
1234
- }