xref: /template/writr/css/plugins/starred.less (revision 8287dd0b28bd2f6b61c00979c0afd76719769fb0) 
1/* =Starred Plugin
2----------------------------------------------- */
3
4@media only screen and (min-width: 960px) {
5    .page-tools {
6        a.plugin__starred {
7            span {
8                width: 60px;
9                height: 60px;
10                background: @ini_text_neu;
11                color: @ini_background;
12                font-size: 30px;
13                line-height: 2;
14
15                -webkit-border-radius: 50%;
16                -moz-border-radius:    50%;
17                border-radius:         50%;
18                transition:         all 0.25s ease-in-out;
19
20                svg {
21                    display:none;
22                }
23
24                &.starred:before { font-family: "bootstrap-icons"; }
25                &.on:before { content: '\F586'; }
26                &.off:before { content: '\F588'; }
27            }
28
29            &:hover span {
30                background: @ini_background;
31                color: @ini_text_alt;
32            }
33
34            &:focus {
35                outline: none;
36
37                span {
38                    background-color: @ini_theme_color;
39                    color: #fff;
40                }
41            }
42        }
43    }
44}
45
46@media only screen and (max-width: 959px) {
47    .page-tools {
48        a.plugin__starred {
49            span {
50                width: 60px;
51                height: 60px;
52                background: @ini_text_neu;
53                color: @ini_background;
54                font-size: 30px;
55                line-height: 2;
56
57                -webkit-border-radius: 50%;
58                -moz-border-radius:    50%;
59                border-radius:         50%;
60                transition:         all 0.25s ease-in-out;
61
62                svg {
63                    display:none;
64                }
65
66                &.starred:before { font-family: "bootstrap-icons"; }
67                &.on:before { content: '\F586'; }
68                &.off:before { content: '\F588'; }
69            }
70
71            &:hover span {
72                background: @ini_background;
73                color: @ini_text_alt;
74            }
75
76            &:focus {
77                outline: none;
78
79                span {
80                    background-color: @ini_theme_color;
81                    color: #fff;
82                }
83            }
84        }
85    }
86}
87
88@media only screen and (max-width: 767px) {
89    .page-tools {
90        a.plugin__starred {
91            span {
92                width: 48px;
93                height: 48px;
94                background: @ini_text_neu;
95                color: @ini_background;
96                font-size: 24px;
97                line-height: 2;
98
99                -webkit-border-radius: 50%;
100                -moz-border-radius:    50%;
101                border-radius:         50%;
102                transition:         all 0.25s ease-in-out;
103
104                svg {
105                    display:none;
106                }
107
108                &.starred:before { font-family: "bootstrap-icons"; }
109                &.on:before { content: '\F586'; }
110                &.off:before { content: '\F588'; }
111            }
112
113            &:hover span {
114                background: @ini_background;
115                color: @ini_text_alt;
116            }
117
118            &:focus {
119                outline: none;
120
121                span {
122                    background-color: @ini_theme_color;
123                    color: #fff;
124                }
125            }
126        }
127    }
128}
129