Mercurial > nebulaweb3

comparison default/assets/scss/components/_contacts.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 Contacts
5 *********************************
6 *********************************/
7
8 .contact-list {
9 position: relative;
10 width: 100%;
11 max-height: 100%;
12 margin: 15px 0;
13
14 tr {
15 border-bottom: 1px solid $theme-border-color;
16 }
17
18 td {
19 vertical-align: middle;
20 font-family: $headings-font-family;
21 letter-spacing: $headings-letter-spacing;
22 color: $headings-color;
23 font-weight: 500;
24 line-height: 1.5;
25 padding: 10px 0;
26
27 a {
28 color: $headings-color;
29 }
30
31 small {
32 font-size: em(13);
33 font-weight: 300;
34 color: $text-muted;
35 a {
36 color: $text-muted;
37 text-decoration: underline;
38 }
39 }
40
41 figure {
42 margin-bottom: 0;
43 }
44 }
45
46 a {
47 color: $body-color;
48 &:hover { color: $color-scheme; }
49 }
50
51 .list-icon {
52 font-size: em(18);
53 color: #666;
54 }
55
56 .unread td {
57 font-weight: 600;
58 }
59
60 label {
61 margin-bottom: 0;
62 }
63 }
64
65 .contact-list-user {
66 position: relative;
67 z-index: 12;
68
69 input[type="checkbox"],
70 figure {
71 cursor: pointer;
72 margin-bottom: 0;
73 padding: 2px;
74 }
75
76 input[type="checkbox"] {
77 position: absolute;
78 margin: 0;
79 opacity: 0;
80 }
81
82 figure {
83 border: 2px solid transparent;
84 display: flex;
85 justify-content: center;
86 align-items: center;
87 border-radius: 100%;
88 }
89
90 input:checked + figure {
91 border-color: $danger;
92 }
93 }
94
95 .contact-list-message {
96 .badge {
97 border-radius: 3px;
98 text-transform: uppercase;
99 font-size: em(11);
100 letter-spacing: em(.5);
101 }
102 }
103
104 .contact-list-badge {
105 text-align: right;
106 }
107
108 // Contact Info
109 .contact-info {
110 position: relative;
111 border: 1px solid rgba($theme-border-color, .5);
112 padding: em(30) em(20);
113 text-align: center;
114
115 header.padded-reverse {
116 position: relative;
117 min-height: 155px;
118 background-color: $color-scheme;
119 background-position: center;
120 background-repeat: no-repeat;
121 background-size: cover;
122
123 figure {
124 position: absolute;
125 bottom: 0;
126 left: 50%;
127 transform: translateX(-50%) translateY(50%);
128 }
129 }
130
131 .social-ratings {
132 margin-top: 40px;
133 border-top: 1px solid $theme-border-color;
134 .col-md-4 {
135 padding: 15px 0;
136 border-left: 1px solid $theme-border-color;
137 &:first-child { border: 0 }
138 }
139 }
140 }
141
142 .contact-info-list-border {
143 margin-top: 20px;
144
145 .widget-body {
146 border: 1px solid $theme-border-color;
147 }
148 }
149
150 .contact-details-tab {
151 border-color: $theme-border-color;
152 left: -1px;
153
154 .nav-item a {
155 padding: 0 50px;
156 line-height: 60px;
157 display: inline-block;
158 text-transform: uppercase;
159 font-family: $headings-font-family;
160 font-weight: 600;
161 color: #bbb;
162
163 &:hover {
164 background: transparent;
165 border-color: $theme-border-color;
166 }
167
168 &.active {
169 background: #fff;
170 border-top-left-radius: .125em;
171 border-top-right-radius: .125em;
172 border-color: $theme-border-color $theme-border-color #fff;
173 }
174 }
175 }
176
177 .contact-details-cell {
178 border: 1px solid $theme-border-color;
179 margin-bottom: 6px;
180 padding: 20px 22px 18px;
181 overflow: hidden;
182 color: #666;
183 display: flex;
184 align-items: center;
185 small {
186 padding-right: 20px;
187 }
188 span {
189 flex: 1;
190 align-self: flex-end;
191 font-size: em(14);
192 margin: 0;
193 text-align: right;
194 }
195 body.rtl & {
196 span {
197 text-align: left;
198 }
199 }
200 }
201
202 .contact-details-textarea p {
203 width: 80%;
204 margin-left: 20%;
205 text-align: left;
206 }
207
208 .contact-list-right {
209 .mail-list-user {
210 width: 100px;
211 }
212
213 @include mobile {
214 .mail-list-user,
215 .mail-list-time {
216 display: none;
217 }
218
219 .mail-list-name {
220 padding-left: 2em;
221 }
222 }
223
224 td {
225 padding: em(10) 0;
226 position: relative;
227 }
228
229 td label {
230 position: absolute;
231 top: 50%;
232 transform: translateY(-50%);
233 }
234
235 tr:first-child td label {
236 top: calc(50% + 5px);
237 }
238
239 .mail-list-name {
240 & > a {
241 font-weight: 700;
242 display: block;
243 }
244
245 .text-muted a {
246 color: #8d9ea7;
247 text-decoration: underline;
248 }
249 }
250 }