@akropolys/kiku 1.0.2 → 1.2.0

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.
package/dist/styles.css CHANGED
@@ -1404,10 +1404,17 @@
1404
1404
  max-height: 800px;
1405
1405
  }
1406
1406
  @media (max-width: 768px) {
1407
+ .hsk-sp-backdrop {
1408
+ padding: 0;
1409
+ }
1407
1410
  .hsk-sp-card.hsk-sp-fullscreen {
1408
- width: 95vw;
1409
- height: 90vh;
1410
- max-height: none;
1411
+ width: 100vw;
1412
+ height: 100vh;
1413
+ height: 100dvh;
1414
+ max-height: 100vh;
1415
+ max-height: 100dvh;
1416
+ border: none;
1417
+ border-radius: 0;
1411
1418
  }
1412
1419
  }
1413
1420
  @keyframes hsk-card-in {
@@ -1738,16 +1745,43 @@
1738
1745
  @media (max-width: 768px) {
1739
1746
  .hsk-sp-body {
1740
1747
  flex-direction: column;
1741
- overflow-y: auto;
1748
+ overflow: hidden;
1749
+ }
1750
+ .hsk-sp-header {
1751
+ padding: 14px 12px 10px;
1742
1752
  }
1743
1753
  .hsk-sp-details-pane {
1744
1754
  border-right: none;
1745
1755
  border-bottom: 1px solid var(--hsk-modal-divide, #f1f3f4);
1746
- flex: none;
1756
+ flex: 0 1 auto;
1757
+ max-height: 35vh;
1758
+ overflow-y: auto;
1759
+ padding: 12px;
1747
1760
  }
1748
1761
  .hsk-sp-chat-pane {
1749
- flex: none;
1750
- height: 400px;
1762
+ flex: 1;
1763
+ display: flex;
1764
+ flex-direction: column;
1765
+ overflow: hidden;
1766
+ height: auto;
1767
+ }
1768
+ .hsk-cb-msgs {
1769
+ flex: 1;
1770
+ overflow-y: auto;
1771
+ padding: 8px 12px 0;
1772
+ }
1773
+ .hsk-cb-input-wrap {
1774
+ padding: 8px 12px 12px;
1775
+ flex-shrink: 0;
1776
+ }
1777
+ .hsk-cb-input-box {
1778
+ padding: 10px 10px 10px 14px;
1779
+ }
1780
+ .hsk-cb-user-bubble {
1781
+ max-width: 85%;
1782
+ }
1783
+ .hsk-sp-footer {
1784
+ padding: 8px 12px;
1751
1785
  }
1752
1786
  }
1753
1787
  @media (prefers-color-scheme: dark) {
@@ -3741,5 +3775,362 @@
3741
3775
  min-width: unset;
3742
3776
  }
3743
3777
  }
3778
+ .hsk-sp-tabs-mobile {
3779
+ display: none;
3780
+ }
3781
+ @media (max-width: 768px) {
3782
+ .hsk-sp-tabs-mobile {
3783
+ display: flex;
3784
+ border-bottom: 1px solid var(--hsk-modal-divide, #f1f3f4);
3785
+ background: var(--hsk-modal-card-bg, #ffffff);
3786
+ flex-shrink: 0;
3787
+ }
3788
+ .hsk-sp-tab-btn {
3789
+ flex: 1;
3790
+ padding: 12px 8px;
3791
+ background: none;
3792
+ border: none;
3793
+ border-bottom: 2px solid transparent;
3794
+ font-size: 13px;
3795
+ font-weight: 600;
3796
+ color: var(--hsk-modal-muted, #5f6368);
3797
+ cursor: pointer;
3798
+ text-align: center;
3799
+ transition: all 0.15s;
3800
+ font-family: inherit;
3801
+ }
3802
+ .hsk-sp-tab-btn.active {
3803
+ color: var(--hsk-primary);
3804
+ border-bottom-color: var(--hsk-primary);
3805
+ }
3806
+ .hsk-sp-pane-hidden-mobile {
3807
+ display: none !important;
3808
+ }
3809
+ .hsk-sp-details-pane,
3810
+ .hsk-sp-chat-pane {
3811
+ flex: 1 !important;
3812
+ height: 100% !important;
3813
+ max-height: none !important;
3814
+ }
3815
+ }
3816
+ @media (max-width: 768px) {
3817
+ .hsk-sp-header-title-row {
3818
+ display: flex;
3819
+ align-items: center;
3820
+ justify-content: space-between;
3821
+ gap: 12px;
3822
+ width: 100%;
3823
+ }
3824
+ .hsk-sp-header-specs-btn {
3825
+ flex-shrink: 0;
3826
+ padding: 4px 10px;
3827
+ font-size: 11px;
3828
+ font-weight: 600;
3829
+ color: var(--hsk-modal-muted, #5f6368);
3830
+ background: var(--hsk-action-sec-bg, #f1f3f4);
3831
+ border: 1px solid var(--hsk-modal-divide, #f1f3f4);
3832
+ border-radius: 20px;
3833
+ cursor: pointer;
3834
+ font-family: inherit;
3835
+ transition: all 0.2s ease;
3836
+ }
3837
+ .hsk-sp-header-specs-btn:hover {
3838
+ background: var(--hsk-action-sec-bg-hover, #e8eaed);
3839
+ color: var(--hsk-primary);
3840
+ }
3841
+ .hsk-sp-mobile-attachment-deck {
3842
+ margin-top: 10px;
3843
+ display: flex;
3844
+ flex-direction: column;
3845
+ gap: 10px;
3846
+ width: 100%;
3847
+ }
3848
+ .hsk-sp-mobile-main-card {
3849
+ display: flex;
3850
+ align-items: center;
3851
+ gap: 12px;
3852
+ padding: 10px 12px;
3853
+ background: var(--hsk-modal-item-bg, #f8f9fa);
3854
+ border: 1px solid var(--hsk-modal-divide, #f1f3f4);
3855
+ border-radius: 8px;
3856
+ width: 100%;
3857
+ box-sizing: border-box;
3858
+ }
3859
+ .hsk-sp-mobile-main-card-img {
3860
+ width: 44px;
3861
+ height: 44px;
3862
+ flex-shrink: 0;
3863
+ border: 1px solid var(--hsk-modal-divide, #f1f3f4);
3864
+ border-radius: 6px;
3865
+ background: #ffffff;
3866
+ display: flex;
3867
+ align-items: center;
3868
+ justify-content: center;
3869
+ padding: 3px;
3870
+ overflow: hidden;
3871
+ }
3872
+ .hsk-sp-mobile-main-card-img img {
3873
+ max-width: 100%;
3874
+ max-height: 100%;
3875
+ object-fit: contain;
3876
+ }
3877
+ .hsk-sp-mobile-main-card-info {
3878
+ flex: 1;
3879
+ min-width: 0;
3880
+ }
3881
+ .hsk-sp-mobile-main-card-brand {
3882
+ font-size: 9px;
3883
+ font-weight: 700;
3884
+ color: var(--hsk-modal-muted, #888);
3885
+ text-transform: uppercase;
3886
+ letter-spacing: 0.05em;
3887
+ white-space: nowrap;
3888
+ overflow: hidden;
3889
+ text-overflow: ellipsis;
3890
+ }
3891
+ .hsk-sp-mobile-main-card-name {
3892
+ font-size: 12.5px;
3893
+ font-weight: 600;
3894
+ color: var(--hsk-modal-text, #1f1f1f);
3895
+ line-height: 1.3;
3896
+ white-space: nowrap;
3897
+ overflow: hidden;
3898
+ text-overflow: ellipsis;
3899
+ margin-top: 1px;
3900
+ }
3901
+ .hsk-sp-mobile-main-card-price {
3902
+ font-size: 11.5px;
3903
+ font-weight: 700;
3904
+ color: var(--hsk-primary);
3905
+ margin-top: 1px;
3906
+ }
3907
+ .hsk-sp-mobile-main-card-specs-btn {
3908
+ padding: 5px 10px;
3909
+ font-size: 10.5px;
3910
+ font-weight: 600;
3911
+ color: var(--hsk-primary);
3912
+ background: transparent;
3913
+ border: 1px solid var(--hsk-primary);
3914
+ border-radius: 4px;
3915
+ cursor: pointer;
3916
+ font-family: inherit;
3917
+ transition: all 0.2s ease;
3918
+ }
3919
+ .hsk-sp-mobile-main-card-specs-btn:hover {
3920
+ background: var(--hsk-primary);
3921
+ color: #ffffff;
3922
+ }
3923
+ .hsk-sp-mobile-similar-carousel-inline {
3924
+ display: flex;
3925
+ flex-direction: column;
3926
+ gap: 6px;
3927
+ width: 100%;
3928
+ }
3929
+ .hsk-sp-mobile-similar-carousel-title {
3930
+ font-size: 10px;
3931
+ font-weight: 700;
3932
+ color: var(--hsk-modal-muted, #888);
3933
+ text-transform: uppercase;
3934
+ letter-spacing: 0.05em;
3935
+ padding-left: 2px;
3936
+ }
3937
+ .hsk-sp-mobile-similar-carousel-list {
3938
+ display: flex;
3939
+ gap: 8px;
3940
+ overflow-x: auto;
3941
+ scrollbar-width: none;
3942
+ -webkit-overflow-scrolling: touch;
3943
+ padding-bottom: 2px;
3944
+ }
3945
+ .hsk-sp-mobile-similar-carousel-list::-webkit-scrollbar {
3946
+ display: none;
3947
+ }
3948
+ .hsk-sp-mobile-similar-carousel-item {
3949
+ flex: 0 0 160px;
3950
+ display: flex;
3951
+ align-items: center;
3952
+ gap: 8px;
3953
+ padding: 6px 8px;
3954
+ background: var(--hsk-modal-item-bg, #f8f9fa);
3955
+ border: 1px solid var(--hsk-modal-divide, #f1f3f4);
3956
+ border-radius: 6px;
3957
+ cursor: pointer;
3958
+ box-sizing: border-box;
3959
+ transition: transform 0.15s ease, border-color 0.15s ease;
3960
+ }
3961
+ .hsk-sp-mobile-similar-carousel-item:hover {
3962
+ border-color: var(--hsk-primary);
3963
+ }
3964
+ .hsk-sp-mobile-similar-carousel-img {
3965
+ width: 32px;
3966
+ height: 32px;
3967
+ flex-shrink: 0;
3968
+ border-radius: 4px;
3969
+ background: #ffffff;
3970
+ border: 1px solid var(--hsk-modal-divide, #f1f3f4);
3971
+ display: flex;
3972
+ align-items: center;
3973
+ justify-content: center;
3974
+ padding: 2px;
3975
+ overflow: hidden;
3976
+ }
3977
+ .hsk-sp-mobile-similar-carousel-img img {
3978
+ max-width: 100%;
3979
+ max-height: 100%;
3980
+ object-fit: contain;
3981
+ }
3982
+ .hsk-sp-mobile-similar-carousel-meta {
3983
+ flex: 1;
3984
+ min-width: 0;
3985
+ display: flex;
3986
+ flex-direction: column;
3987
+ justify-content: center;
3988
+ }
3989
+ .hsk-sp-mobile-similar-carousel-name {
3990
+ font-size: 11px;
3991
+ font-weight: 600;
3992
+ color: var(--hsk-modal-text, #1f1f1f);
3993
+ line-height: 1.25;
3994
+ white-space: nowrap;
3995
+ overflow: hidden;
3996
+ text-overflow: ellipsis;
3997
+ }
3998
+ .hsk-sp-mobile-similar-carousel-price {
3999
+ font-size: 10px;
4000
+ font-weight: 700;
4001
+ color: var(--hsk-primary);
4002
+ margin-top: 1px;
4003
+ }
4004
+ .hsk-sp-mobile-chat-container {
4005
+ flex: 1;
4006
+ display: flex;
4007
+ flex-direction: column;
4008
+ overflow: hidden;
4009
+ background: var(--hsk-chat-bg, #ffffff);
4010
+ }
4011
+ .hsk-sp-mobile-specs-overlay {
4012
+ position: fixed;
4013
+ inset: 0;
4014
+ z-index: 100000;
4015
+ background: rgba(0, 0, 0, 0.4);
4016
+ display: flex;
4017
+ align-items: flex-end;
4018
+ animation: hsk-bd-in 0.2s ease-out;
4019
+ }
4020
+ .hsk-sp-mobile-specs-drawer {
4021
+ width: 100%;
4022
+ background: var(--hsk-modal-card-bg, #ffffff);
4023
+ border-top-left-radius: 12px;
4024
+ border-top-right-radius: 12px;
4025
+ max-height: 70vh;
4026
+ display: flex;
4027
+ flex-direction: column;
4028
+ animation: hsk-drawer-in 0.25s cubic-bezier(0, 0, 0.2, 1);
4029
+ box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.15);
4030
+ }
4031
+ @keyframes hsk-drawer-in {
4032
+ from {
4033
+ transform: translateY(100%);
4034
+ }
4035
+ to {
4036
+ transform: translateY(0);
4037
+ }
4038
+ }
4039
+ .hsk-sp-mobile-specs-header {
4040
+ display: flex;
4041
+ justify-content: space-between;
4042
+ align-items: center;
4043
+ padding: 14px 16px;
4044
+ border-bottom: 1px solid var(--hsk-modal-divide, #f1f3f4);
4045
+ }
4046
+ .hsk-sp-mobile-specs-header h3 {
4047
+ margin: 0;
4048
+ font-size: 14px;
4049
+ font-weight: 700;
4050
+ color: var(--hsk-modal-text, #1f1f1f);
4051
+ }
4052
+ .hsk-sp-mobile-specs-header button {
4053
+ background: none;
4054
+ border: none;
4055
+ font-size: 12px;
4056
+ font-weight: 600;
4057
+ color: var(--hsk-primary);
4058
+ cursor: pointer;
4059
+ font-family: inherit;
4060
+ }
4061
+ .hsk-sp-mobile-specs-body {
4062
+ flex: 1;
4063
+ overflow-y: auto;
4064
+ padding: 16px;
4065
+ display: flex;
4066
+ flex-direction: column;
4067
+ gap: 16px;
4068
+ }
4069
+ .hsk-sp-mobile-specs-title {
4070
+ font-size: 15px;
4071
+ font-weight: 700;
4072
+ color: var(--hsk-modal-text, #1f1f1f);
4073
+ margin: 0;
4074
+ }
4075
+ .hsk-sp-mobile-specs-desc h5,
4076
+ .hsk-sp-mobile-specs-list h5 {
4077
+ margin: 0 0 6px 0;
4078
+ font-size: 11px;
4079
+ font-weight: 700;
4080
+ color: var(--hsk-modal-muted, #888);
4081
+ text-transform: uppercase;
4082
+ letter-spacing: 0.05em;
4083
+ }
4084
+ .hsk-sp-mobile-specs-desc p {
4085
+ margin: 0;
4086
+ font-size: 12.5px;
4087
+ line-height: 1.5;
4088
+ color: var(--hsk-modal-text, #333);
4089
+ }
4090
+ .hsk-sp-mobile-specs-list {
4091
+ display: flex;
4092
+ flex-direction: column;
4093
+ gap: 8px;
4094
+ }
4095
+ .hsk-sp-mobile-spec-row {
4096
+ display: flex;
4097
+ justify-content: space-between;
4098
+ padding: 8px 10px;
4099
+ background: var(--hsk-modal-item-bg, #f8f9fa);
4100
+ border: 1px solid var(--hsk-modal-divide, #f1f3f4);
4101
+ border-radius: var(--hsk-border-radius, 4px);
4102
+ font-size: 11.5px;
4103
+ gap: 12px;
4104
+ }
4105
+ .hsk-sp-mobile-spec-label {
4106
+ color: var(--hsk-modal-muted, #5f6368);
4107
+ font-weight: 500;
4108
+ }
4109
+ .hsk-sp-mobile-spec-value {
4110
+ color: var(--hsk-modal-text, #1f1f1f);
4111
+ font-weight: 600;
4112
+ text-align: right;
4113
+ }
4114
+ }
4115
+ @media (prefers-color-scheme: dark) {
4116
+ .hsk-sp-mobile-main-card {
4117
+ background: #0a0a0a !important;
4118
+ }
4119
+ .hsk-sp-mobile-main-card-img {
4120
+ background: #1a1a1b !important;
4121
+ }
4122
+ .hsk-sp-mobile-similar-carousel-item {
4123
+ background: #0a0a0a !important;
4124
+ }
4125
+ .hsk-sp-mobile-similar-carousel-img {
4126
+ background: #1a1a1b !important;
4127
+ }
4128
+ .hsk-sp-mobile-specs-drawer {
4129
+ background: #0a0a0a !important;
4130
+ }
4131
+ .hsk-sp-mobile-spec-row {
4132
+ background: #1a1a1b !important;
4133
+ }
4134
+ }
3744
4135
  }
3745
4136
  /*# sourceMappingURL=styles.css.map */