Files
munki/code/Managed Software Center/Managed Software Update/WebResources/updates.css
2014-02-10 16:29:48 -08:00

671 lines
15 KiB
CSS

/*
** updates.css for Managed Software Update.app
** Based on App Store CSS © 2013 Apple Inc.
*/
#page,#wrapper,#content {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
-webkit-box-align: stretch
}
#content {
padding-top: 20px
}
.main {
-webkit-box-flex: 0
}
.hidden {
display: none!important;
opacity: 0
}
.main>div:not(:last-of-type) {
margin-bottom: 20px
}
div.installations {
margin: 14px 0;
position: relative
}
div.installations table {
width: 100%
}
div.installations table:not(.no-header):before {
border-width: 0 0 3px 0;
content: '';
display: block;
left: 0;
position: absolute;
top: 32px;
width: 100%;
z-index: 1
}
div.installations thead {
border-radius: 5px 5px 0 0;
padding: 0 0 0 10px;
height: 32px;
border-bottom: 1px solid #d7d7d7;
text-shadow: 0 1px 0 #fff;
background: -webkit-gradient(linear,left bottom,left top,from( #e3e3e3),color-stop(0.49, #ededed),color-stop(0.5, #f4f4f4),to(#fff))
}
div.installations th {
color: #53565e;
font-size: 14px;
font-weight: bold;
height: 32px;
line-height: 14px;
padding: 0 10px;
text-align: left
}
#updates div.installations th {
width: 100%;
display: block;
line-height: 32px
}
div.installations th:first-child {
-webkit-border-top-left-radius: 5px
}
div.installations th:last-child {
-webkit-border-top-right-radius: 5px
}
div.installations tbody tr:nth-of-type(even) {
background: -webkit-gradient(linear,left top,left bottom,from( #f3f3f3),to( #eaeaea))
}
.installation td {
border-top: 1px solid #fff;
border-bottom: 1px solid #d9d9d9;
padding: 0 10px
}
.installation td,.installation td a {
color: #494949
}
.installation:first-child td {
border-top: transparent
}
.installation div.artwork {
position: absolute;
margin-top: 2px
}
.installation img.artwork {
height: auto;
max-width: 35px;
max-height: 35px;
margin: 0 15px 0 5px;
width: 35px
}
.installation h2 {
color: #565656;
font-size: 13px;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
max-width: 300px
}
.installation h2 a {
color: inherit
}
.installation .status {
text-align: right;
font-size: 10px;
line-height: 13px
}
.installation .error {
color: #f00
}
.installation .status span {
display: block
}
.installation .install-button:not(button),.installation .install-button button,.adoption .install-button,.adoption #os-and-app-updates, {
overflow: hidden;
-webkit-border-radius: 5px
}
#other-updates #os-updates,#os-and-app-updates #os-updates,
#os-and-app-updates #app-updates, div.subscribed-items {
margin: 0;
-webkit-border-radius: 0;
-webkit-box-shadow: none
}
#other-updates #os-updates,#os-and-app-updates #os-updates {
border-bottom: 1px solid #d9d9d9
}
#other-updates #os-updatesth:last-child,#os-and-app-updates #os-updates th:last-child {
width: 100%;
display: block;
padding-right: 0
}
#os-and-app-updates th .scan-progress {
position: relative;
top: -1px
}
#os-and-app-updates th .scan-progress .activity-indicator {
top: 6px;
left: 0
}
#os-and-app-updates #os-updates:not(.hidden)+#app-updates tbody tr:nth-of-type(even) {
background: 0
}
#os-and-app-updates #os-updates:not(.hidden)+#app-updates tbody tr:nth-of-type(odd) {
background: -webkit-gradient(linear,left top,left bottom,from( #f3f3f3),to( #eaeaea))
}
@-webkit-keyframes fade-out-and-remove {
0% {opacity: 1}
100% {opacity: 0}
}
#purchases {
text-shadow:#fff 0 1px 0
}
div.purchases .installation td {
height: 41px
}
div.purchases .installation:last-child td:first-child {
-webkit-border-bottom-left-radius: 5px
}
div.purchases .installation:last-child td:last-child {
-webkit-border-bottom-right-radius: 5px
}
div.purchases .installation td:first-child {
width: 225px
}
div.purchases .installation td.hide {
width: 1px
}
div.purchases .installation td:last-child {
width: 200px
}
div.purchases .installation ul.info {
-webkit-box-orient: vertical;
-webkit-box-pack: center;
display: -webkit-box;
height: 100%;
padding-left: 55px;
white-space: nowrap
}
div.purchases .installation button.hide {
width:19px;height:19px;background:transparent url(delete-button-sprite.png) no-repeat;
-webkit-background-size:19px 38px;
border:0;
opacity:0;
pointer-events:none
}
div.purchases .installation button.hide:hover {
background-position:bottom
}
div.purchases .installation:hover button.hide {
opacity:1;
-webkit-transition:opacity .1s ease-out;
pointer-events:auto
}
div.purchases .installation td.status span {
visibility: hidden;
}
div.purchases .installation td.status span.will-be-removed,
div.purchases .installation td.status span.will-be-installed
{
visibility: visible;
}
#updates {
position: relative
}
#updates :focus {
-webkit-focus-ring-color: transparent;
outline: 0
}
#updates #header {
margin-bottom: 15px;
padding: 40px 0 40px 0
}
#updates #header h1 {
font-size: 15px;
font-weight: bold;
color: #929292;
text-shadow: 0 1px 0 #fff;
text-align: center
}
div.updates table {
-webkit-box-orient: vertical;
display: -webkit-box
}
div.updates thead,div.updates tbody {
-webkit-box-orient: vertical;
display: -webkit-box;
width: 100%
}
div.updates tr {
display: -webkit-box;
width: 100%
}
div.updates td {
display: block
}
div.updates .installation td {
padding-bottom: 15px;
padding-top: 15px;
white-space: nowrap
}
div.updates .installation td:nth-child(1) {
width: 360px
}
div.updates .installation td:nth-child(2) {
-webkit-box-flex: 1;
white-space: normal
}
div.updates .installation td:nth-child(3) {
vertical-align: bottom;
color: blue
}
div.updates .installation img.artwork {
min-width: 35px
}
div.updates .installation ul.info {
color: #62676C;
font-size: 11px;
line-height: 16px;
margin-left: 55px
}
div.updates .installation ul.info h2 {
color: #565656;
margin-bottom: 1px
}
div.updates .installation ul.info li:nth-child(n+2) {
overflow: hidden;
text-overflow: ellipsis
}
div.updates .installation p.description {
line-height: 16px;
padding-top: 1px
}
div.updates .installation .more-link {
display: block
}
div.updates .installation span.update {
-webkit-box-orient: horizontal;
-webkit-box-align: center;
display: -webkit-inline-box;
vertical-align: top;
min-height: 20px
}
div.updates .installation .status {
display: block;
margin-right: 10px
}
div.updates .all-os-updates td {
white-space: normal
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {div.artwork .critical-updates-icon {
background: url(da-storefront/images/-dsi-/critical-updates-icon.2x.png);
background-size: 35px 35px;
background-repeat: no-repeat
}
}
/*body:not(.show-incompatible) .installations.incompatible,body:not(.show-incompatible) .installation.incompatible {
display: none!important
}
div.os-updates .os-update-action {
color: rgba(0,0,0,.33)
}
div.os-updates .info .os-update-action {
padding-right: 15px;
background: url(da-storefront/images/restart_required.png) 100% 1px no-repeat;
background-size: 11px 11px
}*/
div.updates.os-updates .installation td:last-child {
-webkit-box-pack: center;
padding-top: 15px
}
div.updates.os-updates .installation span.update {
-webkit-box-align: center
}
/*div.os-updates .installation .progress {
width: 200px
}*/
div.os-updates .installation h2 {
max-width: 100%;
margin-bottom: 5px
}
div.os-updates .installation td {
border: 0
}
div.updates.os-updates .sub-installation td:last-child {
-webkit-box-pack: start
}
div.os-updates td.description p+p {
margin-top: 10px
}
div.os-updates p.note {
color: #d30
}
/*div.os-updates p.note+p {
margin-top: 10px
}
div.os-updates p.note a.help-link {
font-weight: bold;
display: inline-block;
height: 16px;
width: 16px;
vertical-align: middle;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAp9JREFUeNrUVzuPElEUnhnG1YFMgKxLxIBRCwM0FDaEau0NLbGk0R+gNUqvoXb/wAZKSyhcG6DZAgpDKEwUDBsIOmTCzgQS8RxzxtyFeTEgG0/yFTNz73znnvflOfciAYIAGRAA3AIc0Lc5QAfMACpgCtDc/JR3sSYEOAIcEqkbQWUmgDFA8aoAnjgKuMOcdFNBy1wAhlYW8VlsDAPukwI+zrv4yG14mAVZxlGB24AHZPpdiZ/iBpW4tFMgTOQyt3u5SZbQWUuIKz6POZHXarWnyWTycSwWO2bfdzqd026328vn82c222Xi0I2YYIPwIeCe1c5CoRAtl8tvgsHgIzsFx+PxeS6XK7VaLdVm2TfAF1YB9HfKLtoVRXnvRG7IdDrthUKhFw7Z8Rl/K9CLIzvyRqPxbJW8Wq2WeJ5/gkDzs99wbaVSObZR4IA4OYF8f2h3olQqdeVn9Xr9HevrdDp9gqdm1yQSCSdrIackUJ5aVrhMJiOvnr5YLH5as+l8fsXnkiQ5ZRJyBkU3KddsNk/YZ7MACwQCd9lnTdNUF+Eii1QgLAXJstnsqd2adrv93O/3R1fi5tyFAgHMgswGTWZN+v3+69WaMBgMzuLxeMlN0xK3aDSmqYl1wCX5n2wQvJKbpSbGSiQSebXJfzy7YLFYfBBFUWbrgkMZNnWBYNYinQTLMkuOZvdA/leB2bZtDmJh6HHrjKeJJ8Fdj3QFGiD1ayBHzqlAfXmyyc5er/dyuVx+NDAajd56UAA5NSMNx9Qi9yVz4uQMBRSaXvclF8a4zhai4aau8CgT4jK9F4RpNJP/EblKo9hPq6lYp9FZoil21+RfAT+c7gWXpMgNmud3ZfY1crubkU4a/yJr+LaI9u80Bav/3eV0L9fz3wIMABtp4f4jVHJPAAAAAElFTkSuQmCC) no-repeat;
background-size: 16px 16px;
overflow: hidden;
margin-left: 3px;
position: relative;
top: -2px
}
div.os-updates .sub-installation td.description p {
font-size: 11px;
line-height: 16px;
margin-left: 1.5em
}
div.os-updates .sub-installation[single-update] td.description p {
margin-left: 0;
position: relative;
top: -10px
}
div.os-updates .sub-installation td.description h2 {
font-weight: normal
}
div.updates.os-updates .sub-installation td {
padding-top: 0
}
div.updates.os-updates .sub-installation[single-update] td {
padding-bottom: 0
}
.all-os-updates .toggle {
float: right;
color: #6D83A2;
display: inline-block;
text-decoration: none;
-webkit-appearance: none;
padding: 0 5px 0 0;
margin: 0;
border: 0;
background: transparent;
font-family: "Lucida Grande",Helvetica,sans-serif
}
.expanded .all-os-updates .toggle,.single-update .all-os-updates .toggle {
display: none
}*/
.installation .description a {
color: #3E6397
}
.installation [data-text-truncate-lines] a.text-truncate-toggle {
padding: 0;
line-height: 14px
}
.installation .data-text-truncate-opened a.text-truncate-toggle {
display: none
}
.all-os-updates .toggle:before,.installation [data-text-truncate-lines] a.text-truncate-toggle:before {
content: "…";
color: currentcolor
}
.installation [data-text-truncate-lines] a.text-truncate-toggle:after {
display: none
}
div.os-updates tbody tr.sub-installation {
display: none;
background: rgba(0,0,0,.02)
}
div.os-updates.single-update tbody tr.sub-installation {
background: transparent
}
.os-updates.expanded tbody tr.sub-installation,.os-updates.single-update tbody tr.sub-installation {
display: -webkit-box;
position: relative
}
.os-updates.expanded tbody tr.sub-installation {
padding-top: 15px
}
.os-updates.expanded tbody tr:nth-child(2) {
border-top: 1px solid rgba(0,0,0,.16)
}
div.os-updates.expanded tbody tr:nth-child(n+3):before {
position: absolute;
content: '';
width: auto;
height: 1px;
top: 0;
right: 100px;
left: 240px;
background: -webkit-linear-gradient(left,rgba(0,0,0,.04) 0,rgba(0,0,0,.16) 20%,rgba(0,0,0,.16) 80%,rgba(0,0,0,.04) 100%)
}
div.os-updates.expanded tbody tr.sosumi:before {
display: none
}
.activity-indicator {
font: bold 20px Helvetica
}
#updates #header .scan-progress {
padding: 0 0 1px 13px
}
#updates #header .scan-progress h1::before {
display: none
}
#updates #header .scan-progress h1 {
padding-left: 0;
margin-top: -9px
}
.scan-progress.small .activity-indicator {
display: inline-block;
left: -10px;
top: 7px;
position: relative;
margin: 2px 0 1px
}
body.scanning .non-scan-progress,body.page-not-ready .non-scan-progress,body:not(.scanning):not(.page-not-ready) .scan-progress {
display: none
}
.activity-indicator {
-webkit-animation-name: rotatingLoader;
-webkit-animation-duration: .75s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear
}
@-webkit-keyframes rotatingLoader {0% {
-webkit-transform: rotate(0deg)
}
8.32% {
-webkit-transform: rotate(0deg)
}
8.33% {
-webkit-transform: rotate(30deg)
}
16.65% {
-webkit-transform: rotate(30deg)
}
16.66% {
-webkit-transform: rotate(60deg)
}
24.99% {
-webkit-transform: rotate(60deg)
}
25% {
-webkit-transform: rotate(90deg)
}
33.32% {
-webkit-transform: rotate(90deg)
}
33.33% {
-webkit-transform: rotate(120deg)
}
41.65% {
-webkit-transform: rotate(120deg)
}
41.66% {
-webkit-transform: rotate(150deg)
}
49.99% {
-webkit-transform: rotate(150deg)
}
50% {
-webkit-transform: rotate(180deg)
}
58.32% {
-webkit-transform: rotate(180deg)
}
58.33% {
-webkit-transform: rotate(210deg)
}
66.65% {
-webkit-transform: rotate(210deg)
}
66.66% {
-webkit-transform: rotate(240deg)
}
74.99% {
-webkit-transform: rotate(240deg)
}
75% {
-webkit-transform: rotate(270deg)
}
83.32% {
-webkit-transform: rotate(270deg)
}
83.33% {
-webkit-transform: rotate(300deg)
}
91.65% {
-webkit-transform: rotate(300deg)
}
91.66% {
-webkit-transform: rotate(330deg)
}
100% {
-webkit-transform: rotate(330deg)
}
}
div.updates .installation button.cancel {
width: 19px;
height: 19px;
background: transparent url(delete-button-sprite.png) no-repeat;
-webkit-background-size: 19px 38px;
border: 0;
opacity: 1;
pointer-events: none
}
div.updates .installation button.cancel:hover {
background-position: bottom
}
div.updates .installation:hover button.cancel {
opacity: 1;
-webkit-transition: opacity .1s ease-out;
pointer-events: auto
}
div.updates .installation button.add {
width: 19px;
height: 19px;
background: transparent url(add-button-sprite.png) no-repeat;
-webkit-background-size: 19px 38px;
border: 0;
opacity: 1;
pointer-events: none
}
div.updates .installation button.add:hover {
background-position: bottom
}
div.updates .installation:hover button.add {
opacity: 1;
-webkit-transition: opacity .1s ease-out;
pointer-events: auto
}
tr.installation.added {
-webkit-animation: fade-in .5s;
}
tr.installation.deleted {
-webkit-animation: fade-out-and-remove .5s;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes fade-in {
0% {opacity: 0}
100% {opacity: 1}
}
div.updates {
-webkit-transition: all 1s ease-in-out;
}
div.updates.updating .installation button {
display: none!important;
opacity: 0;
}
div.progress {
-webkit-appearance: none;
margin-top: 8px;
display: inline-block;
border: 1px solid #a9a9a9;
width: 200px;
height: 8px;
-webkit-box-sizing: content-box;
padding: 1px 3px;
-webkit-border-radius: 8px;
background: #fff
}
div.progress > span {
display: block;
position: relative;
height: 100%;
padding: 0 2px;
margin: 0 -2px;
-webkit-border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-webkit-box-sizing: content-box;
background: -webkit-gradient(linear,left top,left bottom,from( #4C95DF),to( #3B64C8));
border-width: 0;
overflow: hidden;
vertical-align: top;
color: transparent;
text-shadow: none;
-webkit-transition: width 1s ease-in-out;
}
div.progress > span.indeterminate {
-webkit-transition: none;
}
div.progress > span[style*="width: 100%"],
div.progress > span[style*="width:100%"],
div.progress > span.indeterminate {
-webkit-border-radius: 4px;
}
div.progress > span.indeterminate > span {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-image:
-webkit-gradient(linear, left bottom, right top,
color-stop(.25, rgba(255, 255, 255, .9)),
color-stop(.25, transparent), color-stop(.5, transparent),
color-stop(.5, rgba(255, 255, 255, .9)),
color-stop(.75, rgba(255, 255, 255, .9)),
color-stop(.75, transparent), to(transparent)
);
z-index: 1;
-webkit-background-size: 20px 20px;
-webkit-animation: barber-pole 2s linear infinite;
-webkit-border-radius: 4px;
overflow: hidden;
}
@-webkit-keyframes barber-pole {
0% {
background-position: 0 20px;
}
100% {
background-position: 20px 0;
}
}