summaryrefslogtreecommitdiff
path: root/client/css/post-main-view.styl
blob: 1183cce272e3e66da7e053df81c4c6abca2a744b (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
@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 33%
            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: 0.6em
            margin-bottom: 0.6em

    >.content
        width: 100%

    .post-container
        margin-bottom: 0.6em

        .post-content
            margin: 0

    .after-mobile-controls
        width: 100%

.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
        >.after-mobile-controls
            order: 3
        >.sidebar
            order: 2
            min-width: 100%
            max-width: 0
            margin-right: 0
        >.content
            order: 1


.post-view .readonly-sidebar
    .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

    .relations
        margin-top: 2em
        h1
            margin-bottom: 0.5em
        .thumbnail
            width: 4em
            height: 3em
        li
            margin: 0 0.3em 0.3em 0
            display: inline-block

    .tags
        margin-top: 2em
        h1
            margin-bottom: 0.5em

.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