1/** 2 * This file provides styles for the Languages list, 3 * both for the side- and the toolbar. 4 * This overrides some of the styles in the languages plugin. 5 */ 6 7#tbLanguages, #sbLanguages { 8 9 ul { 10 & { 11 margin-left: .5em; 12 } 13 li { 14 & { 15 list-style: none inside; 16 } 17 a { 18 & { 19 display: grid; 20 grid-template-columns: 1.25em auto; 21 align-items: center; 22 gap: .4em; 23 padding: .125em; 24 line-height: 1.2em; 25 } 26 &::before { 27 content: attr(lang); 28 display: inline-block; 29 text-align: center; 30 place-self: stretch; 31 border: @ini_text solid 1px; 32 font-size: small; 33 border-radius: 1.5pt; 34 font-family: @ini_mono_fonts; 35 font-size: .75rem; 36 color: @ini_text; 37 } 38 &.wikilink1 { 39 color: @ini_link; 40 } 41 &.wikilink2 { 42 color: @ini_missing; 43 text-decoration: underline; 44 text-decoration-style: dotted; 45 border-bottom: transparent 0 none; 46 } 47 &.wikilink2:hover { 48 text-decoration-style: solid; 49 } 50 } 51 } 52 } 53} 54 55#tbLanguages { 56 57 & { 58 display: grid; 59 place-items: center; 60 grid-template-rows: auto 0; 61 height: 100%; 62 } 63 button { 64 & { 65 padding: .25em; 66 font-size: 1rem; 67 border: transparent 1px solid; 68 background-color: transparent; 69 color: @ini_link; 70 cursor: pointer; 71 border-radius: .25em; 72 } 73 &:hover { 74 background-color: @ini_background_alt; 75 border-color: @ini_border; 76 text-decoration: underline; 77 } 78 svg { 79 width: 1.8rem; height: 1.8rem; 80 fill: @ini_link; 81 text-transform: uppercase; 82 } 83 svg text { 84 fill: @ini_background_site; 85 } 86 } 87 #langMenuWrapper { 88 & { 89 position: relative; 90 left: 2rem; top: .5rem; 91 } 92 #langMenu { 93 & { 94 position: absolute; 95 right: 0; 96 background-color: @ini_background_site; 97 border: @ini_border solid 1px; 98 box-shadow: 0 0 8px rgba(0,0,0,.2); 99 border-radius: 2pt; 100 padding: .25em; 101 z-index: 12; 102 } 103 &:before { 104 content: ''; 105 position: absolute; 106 top: 0; 107 height: 1em; 108 right: 16%; 109 width: 1em; 110 margin-left: -.5em; 111 background-color: #fff; 112 box-shadow: 0 0 8px rgba(0,0,0,.2); 113 -webkit-clip-path: polygon(-8px -8px,calc(100% + 8px) -8px,calc(100% + 8px) calc(100% + 8px)); 114 clip-path: polygon(-8px -8px,calc(100% + 8px) -8px,calc(100% + 8px) calc(100% + 8px)); 115 transform: translateY(-50%) rotate(-45deg); 116 } 117 li a { 118 & { 119 font-size: 1rem; 120 padding: .25em; 121 min-width: 6.5em; 122 width: max-content; 123 } 124 } 125 } 126 } 127} 128 129#sbLanguages { 130 & { 131 margin: 1em .25em 0 1em; 132 } 133 ul { 134 padding-left: 0 !important; 135 } 136} 137 138@media (max-width: 950px) { 139 140 #sbLanguages { 141 margin: .5em .25em 0 .5em; 142 } 143}