/* Requires msgbox.css.. so add that first */ // // Animations // @keyframes 'links-and-more-button-focus' { from { background-color: gradient( linear, -15% 0%, 100% 0%, from( #fdfdfdee ), to( #adafafe0 ) ); } 50% { background-color: gradient( linear, -15% 0%, 100% 0%, from( #fdfdfdff ), to( #bdbfbfff ) ); } to { background-color: gradient( linear, -15% 0%, 100% 0%, from( #fdfdfdee ), to( #adafafe0 ) ); } } // // Button styles // Button { width: 100%; padding: 8px 0px 8px 0px; margin: 4px 0px; color: detailsdatalabelfocus; background-color: gradient( linear, 0% 0%, 0% 100%, from( #1d212200 ), to( #12131300 ) ); border-style: solid; border-width: 5px; border-color: none; transition-property: border, background-color, color, box-shadow, transform; transition-timing-function: bigpicture-ease-in-out; } Button Label { width: 100%; vertical-align: center; font-family: platformfont; font-size: 28px; font-weight: bold; transform: translatex(-7px); color: detailsdatalabelfocus; transition-property: transform; transition-duration: 0.2s; transition-timing-function: ease-in; } Button:focus Label { color: #171717f5; transform: translatex(0px); } Button:hover { transition-duration: 0.23s !immediate; box-shadow: #eeeeee60 -3px -3px 6px 6px; } Button:hover Label { transform: translatex(0px); } Button:focus { transition-duration: 0.4s !immediate; color: #161718f5; background-color: gradient( linear, -15% 0%, 100% 0%, from( #fdfdfdee ), to( #adafafe0 ) ); border-width: 5px; border-style: solid; border-color: #fdfefef0; animation-name: links-and-more-button-focus; animation-duration: 1.7s; animation-delay: 0.4s; animation-timing-function: bigpicture-ease-in-out; animation-iteration-count: infinite; animation-direction: normal; } // // Set coupon dialog // StoreCartSetCoupon { width: 100%; height: 100%; animation-name: msg-box-appear; animation-duration: MessageBoxAnimationDuration; animation-timing-function: bigpicture-ease-in-out; animation-iteration-count: 1; } StoreCartSetCoupon.Destructing { opacity: 0.0; animation-name: msg-box-disappear; animation-duration: MessageBoxAnimationDuration; animation-timing-function: bigpicture-ease-in-out; animation-iteration-count: 1; } .DialogRegion { width: 1100px; height: 600px; align: center center; padding: 24px 4px 24px 24px; background-color: message_box_bg; border: 5px solid #424c50; flow-children: down; } #ItemName { font-size: 48px; color: white; margin-bottom: 0px; } .CouponInstructions { font-size: 32px; color: #7d7c7b; margin-bottom: 10px; } #Coupons { flow-children: down; } .SuggestedCoupon { flow-children: down; width: 100%; } .SuggestedCouponNameSavingsRow { padding: 0px 7px 0px 7px; flow-children: right; width: 100%; } .CouponName { width: fit-children; } .CouponSavings { horizontal-align: right; width: fit-children; } .CouponWarning { padding: 0px 7px 0px 7px; }