Hugging Face's logo

Spaces:
The-Ultimate-RAG-HF
/
frontend
Running

App Files Community
frontend
File size: 3,746 Bytes
cf9641a
 
 
 
 
 
 
 
 
 
 
 
562432c
cf9641a
 
 
 
 
 
 
562432c
cf9641a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
562432c
cf9641a
 
 
 
 
 
 
562432c
 
cf9641a
 
562432c
 
cf9641a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
562432c
 
cf9641a
 
 
 
 
 
 
 
 
 
 
562432c
cf9641a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
562432c
cf9641a
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
@import '../../_variables.css';

:root {
     --bezier-custom: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


.inputContainer {
    position: relative;
    margin: 0 auto;
    font-family: Inter, sans-serif;
    color: var(--text-color-secondary);
    font-weight: var(--font-weight-medium);

    display: flex;
    align-items: center;
}

.inputField {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-xxl) var(--spacing-md) var(--spacing-lg); /* 12px 24px 12px 14px */
    border: none;
    outline: none;
    border-bottom: var(--text-color-secondary) 1px solid;
    /* Used transition speed variables */
    transition: border-color var(--transition-timing-ease-in-out) var(--transition-speed-default),
                box-shadow var(--transition-timing-ease-in-out) var(--transition-speed-fast),
                border-bottom var(--transition-timing-ease-in-out) var(--transition-speed-medium);
    box-sizing: border-box;

    background-color: transparent;

    /* Remove default eye icon */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    &::-ms-reveal {
        display: none;
        width: 0;
        height: 0;
    }
}

.inputField:focus {
    border-bottom: var(--text-color-primary) 1.5px solid;
    transition: border-bottom var(--transition-speed-medium) var(--bezier-custom);
}

.inputField p {
    color: var(--text-color-primary)
}

.inputLabel {
    top: var(--spacing-lg); /* 14px */
    left: var(--spacing-sm); /* 10px */
    position: absolute;
    pointer-events: none;
    transition: transform-origin var(--transition-speed-default) var(--bezier-custom),
                transform var(--transition-speed-default) var(--bezier-custom),
                color var(--transition-speed-default) var(--transition-timing-ease-in-out),
                text-shadow var(--transition-speed-default) var(--transition-timing-ease-in-out);
}

.inputLabelFloating {
    transform: translate(calc(-1 * var(--spacing-xxs)), calc(-1 * var(--spacing-xxxl))) scale(var(--font-scale-sm)); /* Used spacing and font scale variables */
    color: var(--text-color-primary);
    text-shadow: 0.5px 0 0;
    transform-origin: top left;
}

.inputFieldIcon {
    /* Adjusted top and right based on original padding and available spacing variables */
    top: var(--spacing-xl); /* Roughly 16px */
    right: var(--spacing-sm); /* Roughly 10px */
    position: absolute;
    color: var(--text-color-secondary);
    background-color: var(--background-color-primary);
    transition: transform var(--transition-speed-default) var(--bezier-custom), /* Used --bezier-custom */
                color var(--transition-speed-default) var(--transition-timing-ease-in-out),
                text-shadow var(--transition-speed-default) var(--transition-timing-ease-in-out);
}

.inputField:hover {
    border-bottom-color: var(--text-color-primary);
}


.eyeIconWrapper {
    position: relative;
    width: var(--icon-size-default);
    height: var(--icon-size-default);
    cursor: pointer;
    perspective: 1000px;
}

.eyeIcon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: transform var(--transition-speed-default) var(--bezier-custom),
                opacity var(--transition-speed-default) var(--transition-timing-ease-in-out);
    backface-visibility: hidden;
}

.eyeIcon.visible {
    opacity: 1;
    transform: rotateX(0deg);
}

.eyeIcon.visible:hover {
    transform: scale(1.06);
}

.openEyeIcon {
    transform: rotateX(90deg);
}

.closedEyeIcon {
    transform: rotateX(-90deg);
}

.inputFieldIconFloating {
    transform: translateY(calc(-1 * var(--spacing-xxs)));
    color: var(--text-color-primary);
    text-shadow: 0.5px 0 0;
}