1/* =Media Manager
2----------------------------------------------- */
3
4.mode_media {
5
6    > div {
7        padding: 20px 0px 20px 80px !important;
8    }
9    #writr__toolbar {
10        display: none!important;
11    }
12    #writr__page {
13        #writr__sidebar {
14            position: fixed;
15            .site-header {
16                .site-logo {
17                    display: block;
18                    position: fixed;
19                    top: 5px;
20                    left: 5px;
21                    margin-bottom: 0px;
22                }
23            }
24        }
25        .page-tools {
26            display: none;
27        }
28        .content-area {
29            float: none;
30            #writr__main {
31                width: 100%;
32                #mediamanager__page{
33                    display: flex;
34                    flex-wrap: wrap;
35
36                    h1 {
37                        width: 100%;
38                        padding: 10px 20px;
39                    }
40                    .panel {
41                        &.namespaces {
42                            width: 20%;
43                            min-width: 160px;
44                            padding-top: 1px;
45                            .panelContent {
46                                padding: 10px;
47                            }
48                        }
49                        &.filelist {
50                            flex-grow: 1;
51                            width: 50%;
52                            max-width: ~"calc(100vw - 280px)";
53                            .tabs {
54                                margin-right: 0px;
55                            }
56                        }
57                        &.file {
58                            width: 30%;
59                            min-width: 280px;
60                            .panelContent {
61                                .image {
62                                    margin-top: 20px;
63                                }
64                                .actions {
65                                    margin-top: 10px;
66                                }
67                                dl {
68                                    margin-top: 20px;
69                                    dt {
70                                        margin-right: 0px;
71                                    }
72                                    dd {
73                                        padding: 10px 20px;
74                                    }
75                                }
76                            }
77                        }
78                        .panelHeader,
79                        .panelContent {
80                            margin: 0;
81                        }
82                        .ui-resizable-handle{
83                            display: none!important;
84                        }
85                    }
86                }
87            }
88        }
89    }
90    &.enableToolbar {
91        #writr__page {
92            margin-top: 0px;
93        }
94    }
95    &::before {
96        width: 20px!important;
97        left: 60px!important;
98    }
99    &::after {
100        width: 60px!important;
101    }
102}
103
104/* 959px > x */
105@media only screen and (max-width: 959px) {
106    .mode_media {
107        #writr__page {
108            .content-area {
109                #writr__main {
110                    #mediamanager__page{
111                        .panel {
112                            &.filelist {
113                                min-width: auto;
114                            }
115                            &.file {
116                                width: ~"calc(100vw - 80px)";
117                                .panelContent {
118                                    .action,
119                                    .image {
120                                        width: ~"calc(100vw - 80px)";
121                                    }
122                                }
123                            }
124                        }
125                    }
126                }
127            }
128        }
129    }
130}
131
132/* 767px > x */
133@media only screen and (max-width: 767px) {
134    .mode_media {
135        #writr__page {
136            padding: 0px!important;
137            #writr__sidebar {
138                display: none;
139            }
140            .content-area {
141                padding-left: 0px;
142                #writr__main {
143                    #mediamanager__page{
144                        .panel {
145                            &.filelist {
146                                max-width: ~"calc(100vw - 180px)";
147                            }
148                            &.file {
149                                width: 100vw;
150                                .panelContent {
151                                    .action,
152                                    .image {
153                                        width: 100vw;
154                                    }
155                                }
156                            }
157                        }
158                    }
159                }
160            }
161        }
162    }
163}
164