178 lines
2.9 KiB
CSS
178 lines
2.9 KiB
CSS
/* 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;
|
|
}
|
|
|