1/* =Starred Plugin
2----------------------------------------------- */
3
4.dropdown.bookmarks {
5    .dropdown-menu {
6        min-width: 400px;
7
8        li {
9            display: flex;
10            flex-direction: row;
11
12            > * {
13                flex-grow: 1;
14                cursor: pointer;
15                line-height: 19px;
16
17                &.curid {
18                    font-weight: normal!important;
19                    a {
20                        font-weight: bold!important;
21                        &:before {
22                            font-family: 'bootstrap-icons';
23                            content: "\F231";
24                            font-size: 16px;
25                            padding-right: 4px;
26                            // line-height: 16px;
27                            vertical-align: middle;
28                        }
29                    }
30                }
31                &.plugin__starred {
32                    flex-grow: 0;
33                    flex-shrink: 1;
34                    width: 48px;
35
36                    span {
37                        svg {
38                            display:none;
39                        }
40                        &.starred:before {
41                            font-family: "bootstrap-icons";
42                            font-size: 16px;
43                        }
44                        &.on:before { content: '\F586'; }
45                        &.off:before { content: '\F588'; }
46                    }
47                }
48            }
49            &:last-child {
50                a {
51                    &[data-wiki-id]{
52                        border-bottom-right-radius: 0px!important;
53                    }
54                    &.plugin__starred {
55                        border-bottom-left-radius: 0px!important;
56                    }
57                }
58            }
59        }
60    }
61}
62
63@media only screen and (min-width: 960px) {
64    .page-tools {
65        a.plugin__starred {
66            span {
67                width: 60px;
68                height: 60px;
69                background: @ini_text_neu;
70                color: @ini_background;
71                font-size: 30px;
72                line-height: 2;
73
74                -webkit-border-radius: 50%;
75                -moz-border-radius:    50%;
76                border-radius:         50%;
77                transition:         all 0.25s ease-in-out;
78
79                svg {
80                    display:none;
81                }
82
83                &.starred:before { font-family: "bootstrap-icons"; }
84                &.on:before { content: '\F586'; }
85                &.off:before { content: '\F588'; }
86            }
87
88            &:hover span {
89                background: @ini_background;
90                color: @ini_text_alt;
91            }
92
93            &:focus {
94                outline: none;
95
96                span {
97                    background-color: @ini_theme_color;
98                    color: #fff;
99                }
100            }
101        }
102    }
103}
104
105@media only screen and (max-width: 959px) {
106    .page-tools {
107        a.plugin__starred {
108            span {
109                width: 60px;
110                height: 60px;
111                background: @ini_text_neu;
112                color: @ini_background;
113                font-size: 30px;
114                line-height: 2;
115
116                -webkit-border-radius: 50%;
117                -moz-border-radius:    50%;
118                border-radius:         50%;
119                transition:         all 0.25s ease-in-out;
120
121                svg {
122                    display:none;
123                }
124
125                &.starred:before { font-family: "bootstrap-icons"; }
126                &.on:before { content: '\F586'; }
127                &.off:before { content: '\F588'; }
128            }
129
130            &:hover span {
131                background: @ini_background;
132                color: @ini_text_alt;
133            }
134
135            &:focus {
136                outline: none;
137
138                span {
139                    background-color: @ini_theme_color;
140                    color: #fff;
141                }
142            }
143        }
144    }
145}
146
147@media only screen and (max-width: 767px) {
148    .page-tools {
149        a.plugin__starred {
150            span {
151                width: 48px;
152                height: 48px;
153                background: @ini_text_neu;
154                color: @ini_background;
155                font-size: 24px;
156                line-height: 2;
157
158                -webkit-border-radius: 50%;
159                -moz-border-radius:    50%;
160                border-radius:         50%;
161                transition:         all 0.25s ease-in-out;
162
163                svg {
164                    display:none;
165                }
166
167                &.starred:before { font-family: "bootstrap-icons"; }
168                &.on:before { content: '\F586'; }
169                &.off:before { content: '\F588'; }
170            }
171
172            &:hover span {
173                background: @ini_background;
174                color: @ini_text_alt;
175            }
176
177            &:focus {
178                outline: none;
179
180                span {
181                    background-color: @ini_theme_color;
182                    color: #fff;
183                }
184            }
185        }
186    }
187}
188