summaryrefslogtreecommitdiff
path: root/client/css/post-main-view.styl
blob: 00f502f9af03972232dfd0fa16568d84b41b22f5 (plain)
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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
@import colors

.post-view
    width: 100%
    display: flex !important
    flex-direction: row

    >.sidebar
        margin-right: 1em
        min-width: 21em
        max-width: 21em
        line-height: 160%

        a:active
            border: 0
            outline: 0

        >.sidebar>nav.buttons, >.content nav.buttons
            margin-top: 0
            display: flex
            flex-wrap: wrap
            article
                flex: 1 0 25%
                a
                    display: inline-block
                    width: 100%
                    padding: 0.3em 0
                    text-align: center
                    vertical-align: middle
                    transition: background 0.2s linear, box-shadow 0.2s linear
                    &:not(.inactive):hover
                        background: lighten($main-color, 90%)
                i
                    font-size: 140%
                text-align: center
            @media (max-width: 800px)
                margin-top: 1em
                margin-bottom: 0
        .tag-icon
            width: 1em
            text-align: right

    >.content
        width: 100%

    .post-container
        @media (min-width: 800px)
            margin-bottom: 2em
        @media (max-width: 800px)
            margin: -1em // to counter the padding of #content-holder
            margin-bottom: 0

        .post-content
            margin: 0

.darktheme .post-view
    >.sidebar, >.content
        nav.buttons
            article
                a:not(.inactive):hover
                    background: unset
                    box-shadow: inset 0 0 0 0.3em $main-color

@media (max-width: 800px)
    .post-view
        flex-wrap: wrap
        >.sidebar
            order: 2
            min-width: 100%
            max-width: 0
            margin-right: 0
        >.content
            order: 1
    .comment-container
        margin-top: 2em


.post-view .readonly-sidebar
    display: grid
    .details
        i
            margin-right: 0.6em
            display: inline-block
            width: 1em
            text-align: center

        .safety-safe
            color: $safety-safe
        .safety-sketchy
            color: $safety-sketchy
        .safety-unsafe
            color: $safety-unsafe

        .upload-info
            .thumbnail
                width: 1em
                height: 1em
                margin: -0.1em 0.6em 0 0

        .zoom
            margin-top: 1em
            a
                display: inline-block
            .active
                text-decoration: underline

        .social
            margin-top: 1em
            .score-container
                float: left
                margin-right: 3em
                .downvote i
                    text-align: right
            i
                text-align: left
                margin: 0
            .value
                text-align: center
                display: inline-block
                width: 2em

        @media (max-width: 800px)
            order: 2
            margin-top: 1em

    .relations, .similar, .lookalikes
        h1
            margin-bottom: 0.5em
        .thumbnail
            width: 4em
            height: 3em
        li
            margin: 0 0.3em 0.3em 0
            display: inline-block
        @media (max-width: 800px)
            h1
                margin-top: 0.5em

    .tags, .metrics
        h1
            margin-bottom: 0.5em
        @media (max-width: 800px)
            margin-top: 0
            h1
                display: none

.post-view .edit-sidebar
    .expander-content
        section:not(:last-child)
            margin-bottom: 1em

    .safety
        &>label
            width: 100%
        .radio-wrapper
            display: flex
            flex-wrap: wrap
        .radio-wrapper label
            flex-grow: 1
            display: inline-block

    .management
        ul
            list-style-type: none
            margin: 0
            padding: 0
            li
                margin: 0
                padding: 0

    .post-source
        textarea
            white-space: pre
            overflow-wrap: normal
            overflow-x: scroll

    form
        width: auto

    label:not(.file-dropper)
        margin-bottom: 0.3em
        display: block

    input[type=submit],
    input[type=button],
    button
        width: 100%
        &:focus
            border: 2px solid $text-color !important

    .messages
        margin-top: 1em