1 2div.add-translation { 3 padding: 5px; 4 border-top: 1px solid rgba(0, 0, 0, 0.3); 5 background-color:#eee; 6 border-radius:0 0 5px 5px; 7 box-shadow: inset 0 1px 1px rgba(0,0,0,0.08); 8} 9div.add-translation button { 10 margin-left: 5px; 11} 12 13div.translations { 14 min-height: 20px; 15 position: absolute; 16 top: 100%; 17 left: 0; 18 z-index: 1000; 19 float: left; 20 display: none; 21 min-width: 160px; 22 padding: 4px 0 0; 23 margin: 0; 24 list-style: none; 25 background-color: #ffffff; 26 border-color: #ccc; 27 border-color: rgba(0, 0, 0, 0.2); 28 border-style: solid; 29 border-width: 1px; 30 -webkit-border-radius: 0 0 5px 5px; 31 -moz-border-radius: 0 0 5px 5px; 32 border-radius: 0 0 5px 5px; 33 -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 34 -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 35 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 36 -webkit-background-clip: padding-box; 37 -moz-background-clip: padding; 38 background-clip: padding-box; 39 *border-right-width: 2px; 40 *border-bottom-width: 2px; 41} 42div.translations .close { 43 position:absolute; 44 right:3px; 45 top:3px; 46 cursor: pointer; 47} 48ul.translations { 49 padding-left: 0; 50 min-width: 300px; 51 max-height: 150px; 52 overflow-y: auto; 53 padding: 5px 8px 8px; 54 margin: 0; 55} 56ul.translations li { 57 list-style: none; 58 padding: 0 10px; 59 box-sizing: border-box; 60 display: block; 61} 62ul.translations li + li { 63 margin-top: 10px; 64} 65ul.translations li label.language { 66 color: black; 67 font-weight: 400; 68 letter-spacing: 0; 69} 70ul.translations li label.language .flag { 71 margin-right: 6px; 72} 73ul.translations li input { 74 width: 100%; 75 box-sizing: border-box; 76 box-shadow: inset 0 1px 1px rgba(0,0,0,0.08); 77 padding: 2px 4px; 78 border-radius: 3px; 79 border: 1px solid #bbb; 80 font-family: sans-serif; 81 font-size: 12px; 82 margin-top: 4px; 83} 84.language-commit { 85 text-align: right; 86 padding: 5px 10px; 87 background-color: cyan; 88 background: repeating-linear-gradient( 89 45deg, 90 rgba(255, 255, 255, 0.05), 91 rgba(255, 255, 255, 0.05) 10px, 92 rgba(255, 255, 255, 0.3) 10px, 93 rgba(255, 255, 255, 0.3) 20px 94 ), #E65524; 95} 96 97 98div.translatable { 99 border: 1px solid #bbb; 100 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 101 display: inline-block; 102 white-space: nowrap; 103 border-right: none; 104 background-color: white; 105 line-height: 16px; 106} 107div.translatable.textarea { 108 border: 1px solid #bbb; 109 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 110 border-radius: 4px; 111} 112div.translatable.focus { 113 outline-offset: -2px; 114 outline-style: auto; 115 outline-width: 5px; 116 outline-color: -webkit-focus-ring-color; 117} 118div.translatable .flag { 119 margin-right: 4px; 120} 121div.translatable.textarea .flag { 122 vertical-align: top; 123} 124 125textarea.translatable, 126input.translatable { 127 border: none !important; 128 padding: 2px 5px !important; 129 margin: 0 !important; 130 background: none; 131} 132textarea.translatable, 133input.translatable:focus { 134 outline-style: none; 135} 136 137button.translatable { 138 margin: -1px 0; 139 padding: 4px 5px 5px; 140 background-color: #444; 141 background:linear-gradient(0deg, #444 0, #888 100%); 142 color: white; 143 border: none; 144 border-radius: 0 2px 2px 0; 145 cursor: pointer; 146 vertical-align: top; 147} 148 149div.translatable.textarea + button.translatable { 150 position: absolute; 151 top: 18px; 152 right: 4px; 153 border: none; 154 background-color: transparent; 155 background: transparent; 156 color: #aaa; 157 color: rgba(0, 0, 0, 0.5); 158 padding-top: 0; 159} 160div.translatable.textarea + button.translatable:hover { 161 color: black; 162} 163