1+ /* 커스텀 팔레트 */
2+
3+
4+
5+ /* MAIN STYLES */
6+
7+ * {
8+ margin : 0 ;
9+ padding : 0 ;
10+ }
11+
12+ body {
13+ background-color : # F5F5F5 !important ;
14+ }
15+
16+ .ui .main .grid {
17+ left : 18.75% ;
18+ position : relative;
19+ width : 81.25% ;
20+ }
21+
22+ # mainwidget {
23+ height : auto!important ;
24+ }
25+
26+ .ui .main .grid .ui .secondary .pointing .fluid .menu h2 {
27+ margin : calc (2rem - .14285em ) 0 1rem ;
28+ }
29+
30+ .ui .fixed .inverted .main .menu {
31+ display : none;
32+ }
33+
34+ .ui .left .fixed .vertical .inverted .menu {
35+ padding-left : 0 ;
36+ padding-right : 0 ;
37+ }
38+
39+ .ui .left .fixed .vertical .inverted .menu a .item : first-child {
40+ padding-bottom : 30px ;
41+ padding-top : 60px ;
42+ }
43+
44+ .ui .sidebar .inverted .vertical .menu a .item : first-child {
45+ padding-bottom : 15px ;
46+ padding-top : 30px ;
47+ }
48+
49+ /* LOGIN STYLES */
50+
51+ [data-page = "login" ] .ui .container {
52+ display : flex;
53+ flex-direction : column;
54+ height : 100% ;
55+ justify-content : center;
56+ margin : 0 auto;
57+ width : 465px ;
58+ }
59+
60+ .dashboard .brand .icon {
61+ width : 100% ;
62+ margin-bottom : 36px ;
63+ }
64+
65+ [data-page = "login" ] .ui .container .ui .segment {
66+ padding : 35px ;
67+ }
68+
69+ p .signup {
70+ padding-top : 25px ;
71+ }
72+
73+ p .dashboard {
74+ font-size : 12px ;
75+ padding-top : 10px ;
76+ text-transform : uppercase;
77+ }
78+
79+ p .signup , p .dashboard {
80+ color : # 999999 ;
81+ text-align : center;
82+ }
83+
84+ /* PRODUCTS STYLES */
85+ .ui .striped .table {
86+ padding-left : 0 ;
87+ padding-right : 0 ;
88+ }
89+
90+ .ui .main .grid .products .column , .ui .main .grid .products .column .basic .segment {
91+ padding : 1rem 0 ;
92+ }
93+
94+ .ui .divided .product .items {
95+ width : 100% ;
96+ }
97+
98+ .ui .divided .product .items img {
99+ height : 187px ;
100+ width : 150px ;
101+ }
102+
103+ /* CUSTOMER STYLES */
104+
105+ .customer .statistics {
106+ width : 100% ;
107+ }
108+
109+ .feedback .segments {
110+ width : 100% ;
111+ }
112+
113+ /* EMPLOYEES STYLES */
114+
115+ .ui .mobile .cards {
116+ display : none;
117+ }
118+
119+ /* DASHBOARD STYLES */
120+
121+ .ui .dashboard .segment {
122+ display : flex;
123+ flex-direction : column;
124+ justify-content : center;
125+ min-height : 171px ;
126+ }
127+
128+ .ui .dashboard .statistic .value {
129+ color : # FFFFFF ;
130+ }
131+
132+ .ui .dashboard .statistic .label {
133+ color : # F5F5F5 ;
134+ }
135+
136+ .harlf .column {
137+ width : 50% !important ;
138+ }
139+
140+ .top-table .column {
141+ width : 33.33333333% !important ;
142+ }
143+
144+ .top-table .column .ui .segment : last-child , .doughnut-chart .column .ui .segment : last-child {
145+ height : 219px ;
146+ }
147+
148+ .doughnut-chart .column {
149+ width : 66.66666666% !important ;
150+ }
151+
152+ ul # dashboard_legend {
153+ display : inline-block;
154+ vertical-align : top;
155+ }
156+
157+ ul .doughnut-legend {
158+ list-style-type : none;
159+ }
160+
161+ .doughnut-legend li span {
162+ border-radius : 50% ;
163+ display : inline-block;
164+ margin-right : 8px ;
165+ height : 12px ;
166+ width : 12px ;
167+ }
168+
169+ /* SMARTPHONE */
170+ @media only screen and (min-width : 320px ) and (max-width : 767px ) {
171+ .ui .mobile .cards {
172+ display : flex;
173+ }
174+
175+ .ui .special .three .cards {
176+ display : none;
177+ }
178+
179+ .row {
180+ padding-top : 0 ;
181+ padding-bottom : 0 ;
182+ }
183+
184+ .top-table .column .ui .segment : last-child , .doughnut-chart .column .ui .segment : last-child {
185+ height : auto;
186+ }
187+
188+ .ui .special .three .cards .card .content a .header ,
189+ .ui .special .three .cards .card .content div .header {
190+ font-size : 1em ;
191+ }
192+
193+ .ui .four .customer .statistics .statistic .value {
194+ font-size : 1.5em ;
195+ }
196+
197+ .ui .grid .nine .wide .products .column , .ui .grid .seven .wide .products .column {
198+ padding : 0 ;
199+ width : 100% !important ;
200+ }
201+
202+ .ui .grid .seven .wide .products .column .ui .basic .right .aligned .segment {
203+ text-align : left;
204+ }
205+
206+ /* 메인페이지 칼럼 스타일 */
207+ .one .column , .harlf .column {
208+ margin-bottom : 30px !important ;
209+ width : 100% !important ;
210+ padding-left : 0.5rem !important ;
211+ padding-right : 0.5rem !important ;
212+ }
213+
214+ .ui .grid .ui .three .column .row .dashboard-stat .column ,
215+ .top-table .column , .doughnut-chart .column , .ui .grid .four .wide .sales .column ,
216+ .ui .grid .twelve .wide .sales .column {
217+ margin-bottom : 30px ;
218+ width : 100% !important ;
219+ }
220+
221+ .ui .header .datetime {
222+ margin : 3rem 0 1rem ;
223+ }
224+
225+ .ui .left .fixed .vertical .inverted .menu {
226+ display : none;
227+ }
228+
229+ .ui .fixed .inverted .main .menu {
230+ display : block;
231+ }
232+
233+ .ui .main .grid {
234+ left : 0% ;
235+ margin : 40px auto!important ;
236+ padding : 1rem 0 0 !important ;
237+ position : relative;
238+ width : 100% ;
239+ }
240+ }
241+
242+ /* TABLET */
243+ @media only screen and (min-width : 768px ) and (max-width : 991px ) {
244+ .ui .header .datetime {
245+ margin : 3rem 0 1rem ;
246+ }
247+
248+ .ui .left .fixed .vertical .inverted .menu {
249+ display : none;
250+ }
251+
252+ .ui .fixed .inverted .main .menu {
253+ display : block;
254+ }
255+
256+ .ui .main .grid {
257+ margin-top : 40px !important ;
258+ left : 0% ;
259+ padding-top : 1rem !important ;
260+ position : relative;
261+ width : 100% ;
262+ }
263+ }
264+
265+ @media only screen and (min-width : 992px ) {
266+ .ui .fixed .inverted .main .menu {
267+ display : none;
268+ }
269+
270+ .ui .left .fixed .vertical .inverted .menu .sidebar {
271+ display : block;
272+ }
273+
274+ .ui .sidebar {
275+ visibility : visible!important ;
276+ }
277+ }
0 commit comments