.test-flex-row { display: flex; flex-direction: row; justify-content: flex-start; align-content: inherit; align-items: center; } .test-svg-box { @extend .centerBoxInline; width: 36px; height: 36px; svg { width: 24px; height: 100%; } } .centerBoxInline { display: -webkit-box; display: -moz-box; display: box; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; } .test-active { -webkit-box-shadow: inset 2px 2px 30px 0 rgb(201, 201, 201); -moz-box-shadow: inset 2px 2px 30px 0 rgb(201, 201, 201); box-shadow: inset 2px 2px 30px 0 rgb(201, 201, 201); } .test-header { @extend .test-flex-row; width: 100%; height: 48px; margin-bottom: 2px; line-height: 48px; background-color: rgb(80, 80, 80); .test-run { @extend .test-flex-row; width: 100%; height: 48px; line-height: 48px; background-color: rgb(63, 63, 63); margin-bottom: 2px; cursor: pointer; .test-state { @extend .test-svg-box; } .test-title { width: 88px; height: inherit; padding-left: 10px; font-size: 10pt; color: rgb(251, 188, 5); } &:active { @extend .test-active; } } .test-search { padding-left: 10px; input { height: 24px; width: 220px; padding-left: 2px; padding-right: 2px; border: 1px solid rgb(173, 129, 0); outline: none; color: rgb(173, 129, 0); background-color: rgb(44, 44, 44); &::-webkit-input-placeholder { font-size: 8pt; font-style: italic; color: rgb(188, 188, 188); } &:-moz-placeholder { /* Firefox 18- */ font-size: 8pt; font-style: italic; color: rgb(188, 188, 188); } &::-moz-placeholder { /* Firefox 19+ */ font-size: 8pt; font-style: italic; color: rgb(188, 188, 188); } &:-ms-input-placeholder { font-size: 8pt; font-style: italic; color: rgb(188, 188, 188); } &:focus { color: rgb(251, 188, 5); border: 1px solid rgb(251, 188, 5); &::-webkit-input-placeholder { color: transparent; } &:-moz-placeholder { /* Firefox 18- */ color: transparent; } &::-moz-placeholder { /* Firefox 19+ */ color: transparent; } &:-ms-input-placeholder { color: transparent; } } } } }