1/* =Tools 2----------------------------------------------- */ 3 4@media screen { 5 6/* highlight selected tool */ 7.mode_admin a.action.admin, 8.mode_login a.action.login, 9.mode_register a.action.register, 10.mode_profile a.action.profile, 11.mode_recent a.action.recent, 12.mode_index a.action.index, 13.mode_media a.action.media, 14.mode_revisions a.action.revs, 15.mode_backlink a.action.backlink, 16.mode_subscribe a.action.subscribe { 17 background-color: transparent; 18} 19 20.loggedIn{ 21 .site-tools ul li:has(> a.action.media), .user-tools ul li:has(> a.action.admin), .page-tools ul li:has(> a.action.revs) { 22 display: block; 23 } 24} 25 26.page-tools { 27 ul { 28 list-style: none; 29 text-transform: uppercase; 30 } 31 li { 32 padding: 5px 0; 33 } 34 li:first-child { 35 padding-top: 0; 36 } 37 li:last-child { 38 padding-bottom: 0; 39 } 40 ul a { 41 color: @ini_background; 42 font-weight: bold; 43 text-decoration: none; 44 } 45 ul a:hover { 46 color: @ini_theme_color_alt; 47 } 48 a span.icon { 49 display: inline-block; 50 width: 20px; 51 height: 20px; 52 -webkit-font-smoothing: antialiased; 53 font-size: 20px; 54 line-height: 1; 55 font-family: 'bootstrap-icons'; 56 text-decoration: inherit; 57 font-weight: normal; 58 font-style: normal; 59 vertical-align: top; 60 } 61 62 a span.icon:before { content: '\F28A'; } 63 64 a.edit span.icon:before { content: '\F4CA'; } 65 a.create span.icon:before { content: '\F64D'; } 66 a.show span.icon:before { content: '\F341'; } 67 a.source span.icon:before { content: '\F2C6'; } 68 a.draft span.icon:before { content: '\F38B'; } 69 a.revs span.icon:before { content: '\F292'; } 70 a.backlink span.icon:before { content: '\F470'; } 71 a.top span.icon:before { content: '\F278'; } 72 a.revert span.icon:before { content: '\F117'; } 73 a.subscribe span.icon:before { content: '\F18A'; } 74} 75 76.site-tools { 77 a span { 78 display: inline-block; 79 width: 20px; 80 height: 20px; 81 -webkit-font-smoothing: antialiased; 82 font-size: 20px; 83 line-height: 1; 84 font-family: 'bootstrap-icons'; 85 text-decoration: inherit; 86 font-weight: normal; 87 font-style: normal; 88 vertical-align: top; 89 } 90 91 a span:before { content: '\F28A'; } 92 a.recent span:before { content: '\F293'; } 93 a.index span:before { content: '\F2EE'; } 94 a.media span:before { content: '\F2CB'; } 95} 96 97.user-tools { 98 a i { 99 display: inline-block; 100 width: 20px; 101 height: 20px; 102 -webkit-font-smoothing: antialiased; 103 font-size: 20px; 104 line-height: 20px; 105 vertical-align: middle; 106 font-family: 'bootstrap-icons'; 107 text-decoration: inherit; 108 font-weight: normal; 109 font-style: normal; 110 } 111 112 a i:before { content: '\F28A'; } 113 a.admin i:before { content: '\F3E5'; } 114 a.login i:before { content: '\F1BE'; } 115 a.logout i:before { content: '\F1C3'; } 116 a.register i:before { content: '\F89A'; } 117 a.profile i:before { content: '\F4CB'; } 118 119 p.user:before { 120 font-family: 'bootstrap-icons'; 121 content: "\F4E1"; 122 font-size: 20px; 123 padding-right: 4px; 124 line-height: 20px; 125 vertical-align: middle; 126 } 127} 128 129} /* /@media */ 130 131 132@media only screen and (min-width: 960px) { 133 134.page-tools { 135 position: fixed; 136 top: 40px; 137 left: 320px; 138 139 a.action, 140 a.menuitem { 141 width: 60px; 142 height: 60px; 143 display: block; 144 } 145 a span { 146 width: 60px; 147 display: block; 148 text-align: center; 149 } 150 a span.icon { 151 width: 60px; 152 height: 60px; 153 background: @ini_text_neu; 154 color: @ini_background; 155 font-size: 30px; 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 164 a:hover span.icon { 165 background: @ini_background; 166 color: @ini_text_alt; 167 } 168 169 a:focus { 170 outline: none; 171 172 span.icon { 173 background-color: @ini_theme_color; 174 color: #fff; 175 } 176 } 177} 178 179.mode_revisions .page-tools a.revs span.icon, 180.mode_backlink .page-tools a.backlink span.icon, 181.mode_revert .page-tools a.revert span.icon, 182.mode_subscribe .page-tools a.subscribe span.icon { 183 background: @ini_background; 184 color: @ini_text_alt; 185 position: relative; 186 187 &:after { 188 content: ''; 189 z-index: 2; 190 display: block; 191 position: absolute; 192 top: 25px; 193 right: -25px; 194 border-left: 5px solid @ini_text_alt; 195 border-top: 5px solid transparent; 196 border-bottom: 5px solid transparent; 197 } 198} 199 200} /* /@media */ 201 202@media only screen and (max-width: 959px) { 203 .page-tools .a11y { 204 position: static !important; 205 left: 0 !important; 206 right: 0 !important; 207 width: auto !important; 208 height: auto !important; 209 } 210} 211