Hugging Face's logo

Spaces:
Crocolil
/
HackatonSmall
Running

App Files Community
1
HackatonSmall
File size: 3,564 Bytes
b9709b4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
/* === App shell ============================================================ */
.gradio-container {
    max-width: 1400px !important;
    margin: 0 auto !important;
}

.gradio-container, .gradio-container .prose {
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
}

body, .gradio-container {
    background: linear-gradient(180deg, #eef7ee 0%, #f7f4ec 100%) !important;
}

/* === Header ================================================================ */
#header-bar {
    align-items: center;
    padding: 0.25rem 0 0.75rem 0;
}

#header-bar h1 {
    margin: 0 !important;
}

/* === Floating "add plant" button ========================================== */
#add-plant-fab {
    position: fixed;
    top: 1.25rem;
    right: 1.5rem;
    z-index: 1000;
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 50% !important;
    font-size: 1.6rem;
    line-height: 1;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    background: #4caf50 !important;
    color: #ffffff !important;
    border: none !important;
}

#add-plant-fab:hover {
    background: #43a047 !important;
}

/* === Add-plant drawer (inline card) ========================================= */
#add-drawer {
    background: #fffdf8;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 1.5rem;
    margin-bottom: 1rem;
}

#close-drawer-btn {
    margin-top: 0.5rem;
}

/* === Garden board (gallery) ================================================ */
#garden-grid {
    background: repeating-linear-gradient(
        to bottom,
        #e7f3e3 0px, #e7f3e3 96px, #d9ecd2 96px, #d9ecd2 100px
    );
    border-radius: 16px !important;
    padding: 12px !important;
}

#garden-grid img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

#garden-grid .thumbnail-item {
    background: transparent !important;
    border: none !important;
}

/* === Detail card =========================================================== */
#plant-detail {
    background: #ffffffcc;
    border-radius: 12px;
    padding: 0.5rem 1rem;
    margin-top: 0.5rem;
}

/* === Sidebar ================================================================ */
#sidebar {
    background: #ffffffaa;
    border-radius: 16px;
    padding: 1rem !important;
}

#sidebar h3 {
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
}

/* Card-ify the recommendation / forecast tables */
#watering-cards .table-wrap, #forecast-strip .table-wrap {
    border: none !important;
    background: transparent !important;
}

#watering-cards .header-table thead, #forecast-strip .header-table thead {
    display: none;
}

#watering-cards .virtual-body, #forecast-strip .virtual-body {
    width: 100% !important;
}

#watering-cards .virtual-row, #forecast-strip .virtual-row {
    background: transparent !important;
    width: 100% !important;
}

#watering-cards .body-cell, #forecast-strip .body-cell {
    border: none !important;
    background: #f3f9f1 !important;
    border-radius: 8px !important;
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 0 !important;
}

#watering-cards .cell-wrap, #forecast-strip .cell-wrap {
    padding: 0.4rem 0.5rem !important;
    width: auto !important;
}

/* === Location gate (welcome card) ========================================== */
#location-gate {
    max-width: 480px;
    margin: 4rem auto !important;
    text-align: center;
    background: #ffffffcc;
    border-radius: 16px;
    padding: 2rem !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}