xref: /plugin/move/style.less (revision 91abc83a2627a937e5f9a25adc76a9e825f52e63) 
1/**
2 * Tree Manager
3 */
4#plugin_move__tree {
5    // hidden by default
6    display: none;
7
8    > div.trees {
9        display: flex;
10        gap: 1em;
11        margin: 1em 0;
12    }
13
14    // basic list layout
15    ul {
16        list-style-type: none;
17        margin: 0.25em 0 0.25em 2em;
18        padding: 0;
19        border: 1px solid transparent;
20
21        li {
22            margin: 0;
23            padding: 0;
24
25            div.li {
26                display: flex;
27                align-items: center;
28                gap: 0.25em;
29            }
30        }
31    }
32
33    // namespace labels can be clicked to open/close
34    li.move-ns > div.li span {
35        cursor: pointer;
36    }
37
38    // icons are used for selection
39    li > div.li i svg {
40        width: 1.5em;
41        height: 1.5em;
42        cursor: pointer;
43        fill: @ini_text_neu;
44    }
45
46    li.selected > div.li i svg {
47        fill: @ini_link;
48    }
49
50    // moved items are highlighted
51    li.changed > div.li > span {
52        background-color: @ini_highlight;
53    }
54
55    li > div.li button {
56        background: none;
57        border: none;
58        padding: 0;
59        cursor: pointer;
60        opacity: 0;
61
62        &:hover svg {
63            fill: @ini_link;
64        }
65    }
66
67    li > div.li:hover button {
68        opacity: 1;
69    }
70
71    .drop-zone {
72        border: 1px dashed @ini_border;
73    }
74
75    .drag-icon {
76        // hide the element from view, but keep it visible
77        position: absolute;
78        left: -9999px;
79        display: inline-flex;
80
81        svg {
82            height: 32px;
83            width: 32px;
84            fill: @ini_text_neu;
85        }
86    }
87
88    form label {
89        display: block;
90        margin: 0.5em 0;
91    }
92}
93
94
95/**
96 * The progress page
97 */
98#plugin_move__progress {
99
100    .hide {
101        display: none;
102    }
103
104
105    #plugin_move__preview {
106        span {
107            cursor: pointer;
108            color: @ini_link;
109        }
110
111        ul {
112            li.page {
113                list-style-image: url(images/page.png);
114            }
115
116            li.media {
117                list-style-image: url(images/disk.png);
118            }
119
120            li.affected {
121                list-style-image: url(images/page_link.png);
122            }
123        }
124    }
125}
126
127/**
128 * The admin form
129 */
130.dokuwiki .plugin_move_form {
131    label.block {
132        text-align: left;
133    }
134
135    label.indent {
136        padding-left: 15px;
137
138        select,
139        input {
140            float: right;
141        }
142    }
143}
144
145
146/**
147 * Pagetool icon
148 */
149#dokuwiki__pagetools ul li.plugin_move_page a {
150    background-position: right 0;
151}
152
153#dokuwiki__pagetools ul li.plugin_move_page a:before {
154    content: url(images/sprite.png);
155    margin-top: 0;
156}
157
158#dokuwiki__pagetools:hover ul li.plugin_move_page a,
159#dokuwiki__pagetools ul li.plugin_move_page a:focus,
160#dokuwiki__pagetools ul li.plugin_move_page a:active {
161    background-image: url(images/sprite.png);
162}
163
164#dokuwiki__pagetools ul li.plugin_move_page a:hover,
165#dokuwiki__pagetools ul li.plugin_move_page a:active,
166#dokuwiki__pagetools ul li.plugin_move_page a:focus {
167    background-position: right -45px;
168}
169
170/**
171 * page rename link
172 */
173.plugin_move_page {
174    display: none; // will be shown by JavaScript
175}
176