Mercurial > nebulaweb3

comparison default/assets/scss/components/_weather.scss @ 0:1d038bc9b3d2 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1d038bc9b3d2
1 // main: ../style.scss
2 /********************************
3 *********************************
4 Weather
5 *********************************
6 *********************************/
7
8 .weather-card-image {
9 figure {
10 overflow: hidden;
11 height: em(290);
12 position: relative;
13 background-size: cover;
14 background-position: center center;
15 margin-bottom: 0;
16 }
17 img {
18 width: 100%;
19 }
20
21 figcaption {
22 @include position(absolute, 0);
23 h6 {
24 position: absolute;
25 bottom: em(10);
26 }
27 span{
28 position: absolute;
29 right: em(20,20);
30 bottom: em(10,20);
31 font-size: em(20);
32 sup {
33 font-size: em(10,20);
34 vertical-align: super;
35 }
36 }
37 }
38
39 .weather-footer {
40 div {
41 padding: 0 em(15);
42 margin: em(30) 0 em(30) 0;
43 border-left: rem(1) solid #eee;
44 &:first-child {
45 border: 0;
46 }
47 }
48 }
49 }
50
51
52 .weather-card-image-dark {
53 position: relative;
54 height: em(430);
55 overflow: hidden;
56 background-size: cover;
57 background-position: center center;
58
59 i {
60 position: absolute;
61 text-align: center;
62 top: 50%;
63 left: 50%;
64 transform: translateY(-50%) translateX(-50%);
65 font-size: em(50);
66 }
67
68 .weather-caption{
69 position: absolute;
70 bottom: em(30);
71 left: em(20);
72 }
73
74 .weather-date {
75 padding: em(10) em(15);
76 position: absolute;
77 bottom: em(45);
78 right: 0;
79 }
80 }
81
82 .weather-status {
83 font-size: em(30);
84 margin-left: em(-10,30);
85 }
86
87 .weather-card-default {
88 table tr td {
89 border: 0;
90 }
91
92 li {
93 padding: 0 em(15,16);
94 font-size: em(16);
95 }
96 }
97
98 .weather-card-simple {
99 h3 {
100 font-weight: 400;
101 }
102 i {
103 font-size: em(35);
104 margin-top: em(10,35);
105 }
106 }
107
108
109 // .weather-widget-tablist {
110 // margin-top: -20px;
111 // margin-bottom: -20px;
112 // figure {
113 // img {
114 // height: 285px;
115 // }
116 // position: relative;
117 // figcaption {
118 // position: absolute;
119 // left: 50%;
120 // top: 50%;
121 // transform: translate(-50%,-50%);
122 // h5 {
123 // font-size: 80px;
124 // }
125 // span {
126 // font-size: 20px;
127 // }
128 // }
129 // }
130 //
131 // section {
132 // i {
133 // font-size: 60px;
134 // }
135 // li {
136 // line-height: 25px;
137 // }
138 // }
139 //
140 // footer {
141 // .carousel {
142 // i {
143 // font-size: 22px;
144 // }
145 // .slick-arrow {
146 // z-index: -1;
147 // }
148 // }
149 //
150 // .slick-list {
151 // top: 40px;
152 // }
153 // .slick-dots {
154 // top: 0;
155 // li{
156 // &:first-child {
157 // margin-right: 15px;
158 // }
159 // button {
160 // height: 4px;
161 // width: 30px;
162 // padding: 0;
163 // background-color: #e6e6e6;
164 // &::before {
165 // opacity: 0;
166 // }
167 // }
168 // }
169 // li.slick-active button {
170 // background-color: #9a9a9a;
171 // }
172 // }
173 //
174 // }
175 //
176 // }