.appitem { padding: 10px; box-sizing: border-box; height: 60px; width: 460px; max-width: 100%; display: -ms-flexbox; /* IE10 */ display: flex; -ms-flex-direction: row; /* IE10 */ flex-direction: row; -ms-flex-wrap: nowrap; /* IE10 */ flex-wrap: nowrap; -ms-flex-line-pack: start; /* IE10 -> align-content */ align-content: flex-start; -ms-flex-pack: start; /* IE10 -> justify-content */ justify-content: flex-start; transition: all 0.3s cubic-bezier(0.1, 0.9, 0.2, 1); } .appitem:hover { background-color: rgba(242, 242, 242, 1); } .appitem:active { transform: scale(0.9695); -ms-transform: scale(0.9695); } .appitem div[role=img] { width: 40px; height: 40px; background-color: #464646; display: -ms-flexbox; /* IE10 */ display: flex; -ms-flex-direction: row; /* IE10 */ flex-direction: row; -ms-flex-wrap: nowrap; /* IE10 */ flex-wrap: nowrap; -ms-flex-pack: center; /* IE10 -> justify-content */ justify-content: center; -ms-flex-align: center; /* IE10 -> align-items */ align-items: center; -ms-flex-line-pack: center; /* IE10 -> align-content */ align-content: center; overflow-x: hidden; overflow-y: hidden; transition: all 0.3s cubic-bezier(0.1, 0.9, 0.2, 1); } .appitem div[role=img] img { width: 30px; height: 30px; } .appitem div[role=divide] { width: 10px; min-width: 10px; height: 100%; } .appitem div[role=excepticon] div[role=title] { font-weight: normal; flex: 1; -ms-flex: 1; width: 100%; overflow-x: hidden; overflow-y: hidden; text-overflow: ellipsis; } .appitem div[role=excepticon] div[role=advance] { display: none; opacity: 0; height: 0; transition: all 0.3s cubic-bezier(0.1, 0.9, 0.2, 1); } .appitem.selected div[role=excepticon] div[role=advance] { display: block; opacity: 1; height: auto; } .appitem div[role=excepticon] { -ms-flex: 1; flex: 1; display: -ms-flexbox; /* IE10 */ display: flex; -ms-flex-direction: column; /* IE10 */ flex-direction: column; -ms-flex-wrap: nowrap; /* IE10 */ flex-wrap: nowrap; -ms-flex-line-pack: start; /* IE10 -> align-content */ align-content: flex-start; -ms-flex-pack: start; /* IE10 -> justify-content */ justify-content: flex-start; width: calc(100% - 40px - 10px); } .appitem div[role=excepticon] div[role=control] { display: none; /* IE10 */ -ms-flex-direction: row-reverse; /* IE10 */ flex-direction: row-reverse; -ms-flex-wrap: wrap; /* IE10 */ flex-wrap: wrap; -ms-flex-line-pack: end; /* IE10 -> align-content */ align-content: flex-end; -ms-flex-pack: start; /* IE10 -> justify-content */ justify-content: flex-start; -ms-flex-align: center; /* IE10 -> align-items */ align-items: center; transition: all 0.3s cubic-bezier(0.1, 0.9, 0.2, 1); opacity: 0; height: 0; } .appitem.selected { height: 119px; background-color: rgba(232, 232, 232, 1); } .appitem.selected div[role=excepticon] div[role=control] { display: flex; display: -ms-flexbox; opacity: 1; height: auto; } ul.appitem-list, ul.appitem-list li { margin: 0; padding: 0; list-style: none; } .appitem .displayName, .appitem .publisher { text-overflow: ellipsis; overflow-x: hidden; overflow-y: hidden; white-space: nowrap; max-width: 100%; } .appitem .publisher { color: rgb(102, 102, 102); } .app-loading { display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: flex-start; align-items: center; width: 100%; height: auto; } .app-loading.noloading progress { display: none; } .app-loading .title { margin-left: 10px; } .app-loading.noloading .title { margin-left: 0; } .app-detailpage header { display: flex; flex-direction: row; flex-wrap: nowrap; align-content: flex-start; justify-content: flex-start; overflow-x: hidden; overflow-y: hidden; text-overflow: ellipsis; width: 100%; height: 67px; box-sizing: border-box; max-width: 100%; } .app-detailpage header .win-backbutton { width: 35px; height: 35px; font-size: 11.9pt; line-height: 32px; min-width: 35px; min-height: 35px; } .app-detailpage header .display-name { padding-left: 10px; box-sizing: border-box; width: calc(100% - 35px - 10px); overflow-y: hidden; overflow-x: hidden; text-overflow: ellipsis; }