1/** 2 * This file provides the design styles for the direct / menu jump links. 3 * 4 * @author Jana Deutschlaender <deutschlaender@cosmocode.de> 5 */ 6 7.breadcrumbs { 8 position: relative; 9 border-bottom: 1px solid @color-border-light; 10 padding: 1rem 1.8rem .2rem; 11 min-height: @page-header_height; 12 box-sizing: border-box; 13 14 > p { 15 font-size: @font-size-small; 16 margin: 0; 17 18 @media @screen_max-xs{ 19 width: 1px; 20 position: relative; 21 overflow: hidden; 22 height: 1.6rem; 23 } 24 25 * { 26 font-size: @font-size-small; 27 } 28 29 .bchead { 30 .sr-only(); 31 } 32 33 span.home { 34 margin-left: -.2rem; // reverse spacing in home icon --> content text and home icon aligned 35 36 .wide-content & { 37 margin-left: .4rem; //toggle link has position absolute, hover on home icon needs more space than left padding of breadcrumb 38 } 39 40 a { 41 .fontello(); 42 .hide-text-show-before(); 43 .icon-home(); 44 45 min-height: 1.8em; 46 min-width: 1.9em; 47 width: auto; 48 box-sizing: border-box; 49 border: solid 1px transparent; 50 border-radius: @border-radius; 51 vertical-align: middle; 52 text-decoration: none; 53 margin-top: -.2em; 54 transition: @transition border-color; 55 56 &:before { 57 font-size: @font-size-default + (@font-scale-factor * 2); 58 margin-top: .17rem; 59 } 60 61 &:hover, 62 &:focus, 63 &:active { 64 border-color: @color-link; 65 } 66 } 67 } 68 69 bdi { 70 padding: .1em .1em 0; 71 } 72 } 73 74 75/* + + + + + icon list + + + + + */ 76 .page-attributes { 77 list-style: none; 78 float: right; 79 display: inline-block; 80 max-width: 30%; 81 margin: -.45em 0 0; 82 padding: 0; 83 84 @media @screen_max-xs{ 85 max-width: 90%; 86 } 87 88 > li { 89 .btn-usertools-wrapper(); // uniform li 90 .btn-usertools-num(); 91 92 float: left; 93 94 > strong, 95 > a { 96 display: block; 97 width: auto; 98 min-height: @toggle-size; 99 border: 1px solid @color-border; 100 border-radius: @border-radius; 101 color: @color-nav; 102 text-align: center; 103 margin: 0; 104 } 105 106 .prefix { 107 .btn-prefix (); 108 .icon-clipboard(); 109 110 display: block; 111 font-size: 1.2rem; 112 line-height: 1; 113 } 114 115/* check !!! */ 116 &.do_none { 117 position: relative; 118 119 strong { 120 background-color: @color-site-bg; 121 } 122 123 .num { 124 background-color: @color-border; 125 color: @color-nav; 126 } 127 } 128/* end check !!! */ 129 130 &.plugin__qc { 131 display: inline-block; 132 overflow: visible; 133 position: static; 134 } 135 } // li 136 137 a { 138 transition: @transition color, @transition background-color, @transition border-color; 139 140 &[aria-expanded="false"] + #plugin__qc__wrapper { 141 display: none; 142 } 143 144 &:hover, 145 &:active, 146 &:focus { 147 background-color: @button_color; 148 border-color: @button_background; 149 color: @button_background; 150 151 .prefix { 152 color: @button_background; 153 } 154 } 155 } 156 157 #plugin__qc__wrapper { 158 position: absolute; 159 right: 0; 160 width: auto; 161 border: 0 none; 162 background: @background_page-header; 163 background: -webkit-linear-gradient(top, @background_page-header, @color-content-bg); 164 background: linear-gradient(top, @background_page-header, @color-content-bg); 165 box-shadow: @box-shadow-bottom; 166 z-index: 2000; 167 168 #plugin__qc__out{ 169 h1 { 170 font-size: @font-size-head3; 171 } 172 173 h2 { 174 margin-top: 1.6em; 175 font-size: @font-size-head5; 176 } 177 > h1, 178 > h2, 179 > p, 180 > dl, 181 > div { 182 padding-left: 1rem; 183 margin-left: 0; 184 } 185 186 > div p { 187 padding-left: 0; 188 margin-left: 0; 189 } 190 } 191 192 &[aria-hidden="false"] { 193 margin-top: .5rem; 194 } 195 } 196 197 #plugin__qc__icon { 198 display: none; 199 } 200 201 #plugin__qc__link { 202 position: relative; 203 204 .prefix { 205 .icon-emo-happy(); 206 207 width: 100%; 208 font-size: @font-size-default; 209 210 &::before { 211 width: 100%; 212 margin: 0; 213 } 214 } 215 } 216 } 217} 218 219 220/* + + + + + ? + + + + + */ 221.mode_admin { 222 223} 224