quicktips.less 5.87 KB
Newer Older
1
/* Quicktips */
2
3
4
// @import "../../variables.less";
// @import "../../general/cards.less";
// @import "../../general/general.less";
5
6
7
@quicktip-font-large: @result-font-large;
@quicktip-font-medium: @result-font-medium;
@quicktip-font-small: @result-font-small;
8

9
#quicktips {
10
11
12
13
    h1 {
        border: 0;
    }

14
15
    display: flex;
    flex-direction: column;
16
17
    margin: 0 8px;
    background-color: inherit;
18

Dominik Hebeler's avatar
Dominik Hebeler committed
19
20
    a {
        text-decoration: none;
21

Dominik Hebeler's avatar
Dominik Hebeler committed
22
23
24
25
        &:hover {
            text-decoration: underline;
        }
    }
26

27
    .quicktip {
Dominik Hebeler's avatar
Dominik Hebeler committed
28
29
30

        box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.12), 0px 0px 1px 0px rgba(0, 0, 0, 0.24);
        border: 1px solid @border-color ;
31
        position: relative;
32

33
34
35
36
        details[open=""] .quicktip-extender {
            animation-name: quicktip-extender-turn;
            animation-fill-mode: forwards;
        }
37

38
        margin: 10px 0px;
39
        padding: 10px 10px 10px 10px;
40
        background-color: @quicktip-background-color;
41

42
43
        details:not([open=""]) {
            .quicktip-summary p {
44
                .overflow-ellipsis;
45
46
            }
        }
47

48
        .quicktip-summary {
49
            display: block;
50

51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
            .btn {
                display: inline-block;
                margin-bottom: 0;
                font-weight: 400;
                text-align: center;
                vertical-align: middle;
                -ms-touch-action: manipulation;
                touch-action: manipulation;
                cursor: pointer;
                background-image: none;
                border: 1px solid transparent;
                white-space: nowrap;
                padding: 6px 12px;
                font-size: 14px;
                line-height: 1.42857143;
                border-radius: 4px;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                text-decoration: none;
72

Dominik Hebeler's avatar
Dominik Hebeler committed
73
74
75
                &:hover {
                    text-decoration: underline;
                }
76
            }
77

78
79
            .quicktip-headline {
                width: 100%;
80
                display: flex;
81
                align-items: center;
82
                justify-content: space-between;
83

84
85
86
87
                .quicktip-title,
                .quicktip-title a {
                    flex-grow: 0;
                    margin: 0px 0px 5px 0px;
Karl Hasselbring's avatar
Karl Hasselbring committed
88
                    font-size: 13px;
89
90
91
                    display: flex;
                    justify-content: space-between;
                }
92

93
94
95
                .space-taker {
                    flex-grow: 1;
                }
96

97
98
99
                .quicktip-hoster {
                    flex-grow: 0;
                    font-size: @quicktip-font-small;
100
                    color: @text-color;
101
102
                    white-space: nowrap;
                }
103

104
105
106
107
                .quicktip-extender {
                    flex-grow: 0;
                    color: #777;
                    font-size: 20px;
108
                    height: 20px;
109
110
                    font-size: @quicktip-font-large;
                }
111

112
113
                >* {
                    margin: 0px 5px;
114

115
116
117
                    &:first-child {
                        margin-left: 0px;
                    }
118

119
120
121
122
123
                    &:last-child {
                        margin-right: 0px;
                    }
                }
            }
124

125
126
127
128
129
            .result-hoster {
                font-size: @result-font-small;
                margin-left: 20px;
                color: #808080;
                white-space: nowrap;
130
            }
131

132
            p {
Karl Hasselbring's avatar
Karl Hasselbring committed
133
                font-size: 13px;
134
135
            }
        }
136

137
        .quicktip-detail {
138
            border-bottom: 1px solid @border-color;
139

140
141
142
143
            h2 {
                margin: 10px 0px;
                font-size: 16px;
            }
144

145
146
147
148
149
            p {
                display: none;
                font-size: 14px;
            }
        }
150

Karl Hasselbring's avatar
Karl Hasselbring committed
151
        &[type="spendenaufruf"] {
152
            order: 100;
153
154
155
            border: none;
            box-shadow: none;
            background-color: inherit;
156

157
158
159
160
            .quicktip-summary {
                display: flex;
                justify-content: space-between;
                align-items: center;
161

162
163
164
                h1 {
                    margin: 0px;
                }
165

166
167
                p {
                    margin: 5px;
168

169
170
                    .spendenaufruf-btn {
                        color: white;
Karl Hasselbring's avatar
Karl Hasselbring committed
171
                        background-color: @link-color;
172
173
174
175
176
                        font-size: 16px;
                    }
                }
            }
        }
177

Karl Hasselbring's avatar
Karl Hasselbring committed
178
        &[type="spruch"] {
179
            order: 1;
180

181
            .quicktip-summary {
182
183
                display: flex;
                flex-direction: column;
184

185
186
                p {
                    text-align: justify;
187
                    font-style: italic;
188
189
                    quotes: '„''“';

190
191
192
                    &:before {
                        content: open-quote;
                    }
193

194
195
196
197
                    &:after {
                        content: close-quote;
                    }
                }
198

199
                .author {
200
                    color: @text-color;
201
                    font-size: 12px;
202
                    align-self: flex-end;
203
204
                }
            }
205
        }
206

207
208
        &[type="duckDuckGo-bang"] {
            order: 2;
209

210
211
212
213
214
215
            .bang-btn {
                width: 100%;
                margin-top: 5px;
                color: #fff;
                background-color: #286992;
                font-size: 16px;
216
217
            }
        }
218

219
220
221
        &[type="wikipedia"] {
            order: 3;
        }
222

223
224
225
        &[type="dictCC"] {
            order: 4;
        }
226

227
228
229
        &[type="tip"] {
            order: 5;
        }
230

231
232
233
234
        &[type="ad"] {
            order: 6;
        }
    }
235

236
237
238
239
    .mg-icon {
        filter: @invert-state
    }

240
241
242
    .mg-icon-rot180 {
        transition: transform 0.5s;
    }
243

244
245
246
247
248
    details[open] .mg-icon-rot180 {

        transform: rotate(180deg);
    }

249
}