.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] { position: relative; 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]::after { border: 1px solid rgba(254, 254, 254, 0.1); content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .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=progress] { display: none; width: 100%; } .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 div[role=excepticon] div[role=progress] { width: 100%; box-sizing: border-box; } .appitem.uninstalling, .appitem.selected { height: 119px; background-color: rgba(232, 232, 232, 1); } .appitem.uninstalled div[role=excepticon] div[role=progress], .appitem.uninstalling div[role=excepticon] div[role=progress] { display: block; flex: 1 0 auto; -ms-flex: 1 0 auto; width: 100%; } .appitem.uninstalling div[role=excepticon] div[role=progress] progress { max-width: 100%; } .appitem.uninstalled div[role=excepticon] div[role=progress] progress { display: none; } .appitem.uninstalling div[role=excepticon] div[role=progress], .appitem.uninstalled div[role=excepticon] div[role=progress], .appitem.uninstalling div[role=excepticon] div[role=progress] .status, .appitem.uninstalled div[role=excepticon] div[role=progress] .status { word-break: break-all; word-wrap: break-word; } .appitem.uninstalled { height: auto; } .appitem.selected div[role=excepticon] div[role=control] { display: flex; display: -ms-flexbox; opacity: 1; height: auto; } .appitem.uninstalling div[role=excepticon] div[role=advance], .appitem.uninstalling div[role=excepticon] div[role=control], .appitem.uninstalling.selected div[role=excepticon] div[role=advance], .appitem.uninstalling.selected div[role=excepticon] div[role=control], .appitem.uninstalled div[role=excepticon] div[role=advance], .appitem.uninstalled div[role=excepticon] div[role=control], .appitem.uninstalled.selected div[role=excepticon] div[role=advance], .appitem.uninstalled.selected div[role=excepticon] div[role=control] { display: none; } .appitem.uninstalling div[role=excepticon] div[role=title], .appitem.uninstalled div[role=excepticon] div[role=title] { -ms-flex: none; flex: none; } 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 { width: 100%; height: auto; } .app-loading .container { display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: flex-start; align-items: center; width: 100%; /*****/ display: -ms-flexbox; /* IE10 */ -ms-flex-direction: row; /* flex-direction: row */ -ms-flex-wrap: wrap; /* flex-wrap: wrap */ -ms-flex-pack: start; /* justify-content: flex-start */ -ms-flex-align: center; /* align-items: center */ } .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%; display: -ms-flexbox; -ms-flex-direction: row; /* flex-direction: row */ -ms-flex-wrap: nowrap; /* flex-wrap: nowrap */ -ms-flex-pack: start; /* justify-content: flex-start */ } .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; } .app-detailpage .identity, .app-detailpage .publisher-display-name, .app-detailpage .version, .app-detailpage .description { word-break: break-all; } .loadingstatus { width: 100%; height: auto; } .loadingstatus .container { display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: flex-start; align-items: center; width: 100%; /* IE10 */ display: -ms-flexbox; -ms-flex-direction: row; /* flex-direction: row */ -ms-flex-wrap: wrap; /* flex-wrap: wrap */ -ms-flex-pack: start; /* justify-content: flex-start */ -ms-flex-align: center; /* align-items: center */ } .loadingstatus.noloading progress { display: none; } .loadingstatus .title { margin-left: 10px; } .loadingstatus.noloading .title { margin-left: 0; } .applist-options { margin: 10px 0 0; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: center; /* IE10 */ display: -ms-flexbox; -ms-flex-direction: row; /* flex-direction: row */ -ms-flex-wrap: wrap; /* flex-wrap: wrap */ -ms-flex-pack: start; /* justify-content: flex-start */ -ms-flex-align: center; /* align-items: center */ } .applist-options .item { display: flex; flex-direction: row; flex-wrap: nowrap; align-content: flex-start; justify-content: flex-start; align-items: center; margin-right: 20px; /* IE10 */ display: -ms-flexbox; -ms-flex-direction: row; /* flex-direction: row */ -ms-flex-wrap: nowrap; /* flex-wrap: nowrap */ -ms-flex-pack: start; /* justify-content: flex-start */ -ms-flex-align: center; /* align-items: center */ } .applist-options .item input[type="checkbox"] { margin-left: 0; }