2022-04-09 14:23:56 +02:00
|
|
|
body {
|
2022-04-09 14:27:34 +02:00
|
|
|
font-family: var(--default-font);
|
2022-04-09 14:23:56 +02:00
|
|
|
font-size: 13px;
|
|
|
|
|
line-height: 16px;
|
2022-04-13 00:29:08 +02:00
|
|
|
font-weight: 400;
|
2022-04-09 14:23:56 +02:00
|
|
|
background-color: var(--block-bg-color);
|
|
|
|
|
color: var(--text-color);
|
2022-04-09 23:57:53 +02:00
|
|
|
color-scheme: var(--tg-color-scheme);
|
2022-04-09 14:23:56 +02:00
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
width: 1px;
|
|
|
|
|
min-width: 100%;
|
|
|
|
|
|
2022-04-09 14:27:34 +02:00
|
|
|
--default-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
2022-04-09 14:23:56 +02:00
|
|
|
--block-bg-color: var(--tg-theme-bg-color);
|
2022-05-26 23:00:05 +02:00
|
|
|
--bg-color: var(--tg-theme-secondary-bg-color, #ebedf0);
|
2022-04-09 14:23:56 +02:00
|
|
|
--animation: .15s ease;
|
2022-04-09 14:27:34 +02:00
|
|
|
--page-animation-duration: .3s;
|
|
|
|
|
--page-animation: var(--page-animation-duration) ease;
|
2022-04-09 14:23:56 +02:00
|
|
|
--status-height: 48px;
|
|
|
|
|
--accent-color: #31b545;
|
|
|
|
|
--main-color: #f8a917;
|
|
|
|
|
--text-color: #222;
|
|
|
|
|
--page-hint-color: #83878a;
|
|
|
|
|
--hint-color: #74787a;
|
|
|
|
|
--placeholder-color: #999da1;
|
|
|
|
|
--ripple-duration: .45s;
|
|
|
|
|
--ripple-end-duration: .3s;
|
|
|
|
|
-webkit-user-select: none;
|
|
|
|
|
user-select: none;
|
|
|
|
|
cursor: default;
|
|
|
|
|
}
|
|
|
|
|
html.dark body {
|
|
|
|
|
--block-bg-color: var(--tg-theme-bg-color);
|
2022-05-26 23:00:05 +02:00
|
|
|
--bg-color: var(--tg-theme-secondary-bg-color, #0f0f0f);
|
2022-04-09 14:23:56 +02:00
|
|
|
--text-color: #fff;
|
|
|
|
|
--page-hint-color: #9b9ba1;
|
|
|
|
|
--hint-color: #64666d;
|
|
|
|
|
--placeholder-color: #5d6163;
|
|
|
|
|
}
|
2022-06-23 15:29:35 +02:00
|
|
|
body.order-mode {
|
2022-04-09 14:23:56 +02:00
|
|
|
background-color: var(--bg-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
* {
|
|
|
|
|
-webkit-tap-highlight-color: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cafe-page {
|
|
|
|
|
transition: filter var(--animation);
|
|
|
|
|
}
|
|
|
|
|
body.closed .cafe-page {
|
|
|
|
|
filter: grayscale(1) opacity(0.7);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cafe-block {
|
|
|
|
|
background-color: var(--block-bg-color);
|
|
|
|
|
-webkit-box-shadow: 0 0.5px rgba(0, 0, 0, .07);
|
|
|
|
|
box-shadow: 0 0.5px rgba(0, 0, 0, .07);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cafe-items {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
max-width: 480px;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
align-content: flex-end;
|
2022-04-09 14:27:34 +02:00
|
|
|
transition: max-height var(--page-animation), opacity var(--page-animation);
|
2022-04-09 14:23:56 +02:00
|
|
|
background-color: var(--block-bg-color);
|
|
|
|
|
}
|
2022-06-23 15:29:35 +02:00
|
|
|
body.order-mode .cafe-items {
|
2022-04-09 14:23:56 +02:00
|
|
|
max-height: 0 !important;
|
2022-04-09 14:27:34 +02:00
|
|
|
opacity: 0 !important;
|
2022-04-09 14:23:56 +02:00
|
|
|
}
|
|
|
|
|
.cafe-items:after {
|
|
|
|
|
content: '';
|
|
|
|
|
flex-grow: 2;
|
|
|
|
|
}
|
|
|
|
|
.cafe-item,
|
|
|
|
|
.cafe-item-shadow {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 120px;
|
2022-04-13 00:22:26 +02:00
|
|
|
height: 159px;
|
|
|
|
|
padding: 4px 5px 21px;
|
2022-04-09 14:23:56 +02:00
|
|
|
box-sizing: border-box;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
.cafe-item-shadow {
|
|
|
|
|
height: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
2024-05-27 22:43:36 +02:00
|
|
|
.stars-only,
|
|
|
|
|
.stars-supported .no-stars-only {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
.stars-supported .stars-only {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
2022-04-09 14:23:56 +02:00
|
|
|
.cafe-item-photo {
|
|
|
|
|
position: relative;
|
|
|
|
|
height: 78px;
|
|
|
|
|
}
|
|
|
|
|
.cafe-item-photo .cafe-item-emoji {
|
|
|
|
|
font-size: 70px;
|
|
|
|
|
line-height: 78px;
|
|
|
|
|
}
|
|
|
|
|
.cafe-item-lottie {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
position: relative;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
}
|
|
|
|
|
.cafe-item-photo .cafe-item-lottie {
|
|
|
|
|
width: 74px;
|
|
|
|
|
}
|
|
|
|
|
.cafe-item-lottie:before {
|
|
|
|
|
content: '';
|
|
|
|
|
display: block;
|
|
|
|
|
padding-top: 100%;
|
|
|
|
|
}
|
|
|
|
|
.cafe-item-lottie img,
|
|
|
|
|
.cafe-item-lottie canvas {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0; bottom: 0;
|
|
|
|
|
left: 0; right: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
2024-05-27 22:43:36 +02:00
|
|
|
.cafe-item-new {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 50%;
|
|
|
|
|
bottom: 10px;
|
|
|
|
|
margin-right: -40px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
font-family: var(--default-font);
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
line-height: 14px;
|
|
|
|
|
padding: 2px 5px;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
background-color: var(--accent-color);
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
color: #fff;
|
|
|
|
|
outline: none;
|
|
|
|
|
border: none;
|
|
|
|
|
}
|
2022-04-09 14:23:56 +02:00
|
|
|
.cafe-item-label {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
2022-04-13 00:29:08 +02:00
|
|
|
.cafe-item-title {
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
}
|
2022-04-09 14:23:56 +02:00
|
|
|
.cafe-item-price {
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
.cafe-item-price:before {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
content: '';
|
|
|
|
|
width: 2px;
|
|
|
|
|
height: 2px;
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
background-color: currentColor;
|
|
|
|
|
margin: 7px 4px;
|
|
|
|
|
}
|
|
|
|
|
.cafe-item-buttons {
|
|
|
|
|
display: flex;
|
|
|
|
|
width: 80px;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
margin: 10px auto 0;
|
|
|
|
|
position: relative;
|
|
|
|
|
transition: all var(--animation);
|
|
|
|
|
}
|
|
|
|
|
button {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
button,
|
|
|
|
|
.cafe-item-counter {
|
|
|
|
|
display: inline-block;
|
2022-04-09 14:27:34 +02:00
|
|
|
font-family: var(--default-font);
|
2022-04-09 14:23:56 +02:00
|
|
|
font-weight: 700;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
line-height: 18px;
|
|
|
|
|
padding: 6px 16px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
border-radius: 7px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
background-color: var(--main-color);
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
color: #fff;
|
|
|
|
|
outline: none;
|
|
|
|
|
border: none;
|
|
|
|
|
}
|
|
|
|
|
.cafe-item-counter {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
min-width: 22px;
|
|
|
|
|
height: 22px;
|
|
|
|
|
padding: 2px 6px;
|
|
|
|
|
margin: 4px 6px;
|
|
|
|
|
border-radius: 11px;
|
|
|
|
|
transform: scale3d(0, 0, 1);
|
|
|
|
|
animation: var(--animation) both;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
z-index: 3;
|
|
|
|
|
}
|
2024-05-27 22:43:36 +02:00
|
|
|
.cafe-item-buy-button {
|
|
|
|
|
position: absolute !important;
|
|
|
|
|
background-color: var(--accent-color);
|
|
|
|
|
top: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
transition: width var(--animation);
|
|
|
|
|
width: 80px;
|
|
|
|
|
}
|
2022-04-09 14:23:56 +02:00
|
|
|
.cafe-item-incr-button {
|
|
|
|
|
position: absolute !important;
|
|
|
|
|
top: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
transition: width var(--animation);
|
|
|
|
|
width: 80px;
|
|
|
|
|
}
|
|
|
|
|
.selected .cafe-item-incr-button {
|
|
|
|
|
width: 38px;
|
|
|
|
|
}
|
|
|
|
|
.cafe-item-decr-button {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 38px;
|
|
|
|
|
}
|
|
|
|
|
.cafe-item-decr-button {
|
|
|
|
|
background-color: #e64d44;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
transform: scale3d(0.9, 0.9, 1);
|
|
|
|
|
transition: transform var(--animation), visibility var(--animation);
|
|
|
|
|
visibility: hidden;
|
|
|
|
|
}
|
|
|
|
|
.selected .cafe-item-decr-button {
|
|
|
|
|
pointer-events: auto;
|
|
|
|
|
transform: scale3d(1, 1, 1);
|
|
|
|
|
visibility: visible;
|
|
|
|
|
}
|
|
|
|
|
.cafe-item-incr-button:before,
|
|
|
|
|
.cafe-item-incr-button:after,
|
|
|
|
|
.cafe-item-decr-button:before {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
position: absolute;
|
|
|
|
|
content: '';
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
margin: auto;
|
|
|
|
|
width: 14px;
|
|
|
|
|
height: 3px;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
border-radius: 1px;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
}
|
|
|
|
|
.cafe-item-incr-button:before,
|
|
|
|
|
.cafe-item-incr-button:after {
|
|
|
|
|
background-color: rgba(255, 255, 255, 0);
|
|
|
|
|
transition: background-color var(--animation);
|
|
|
|
|
}
|
|
|
|
|
.selected .cafe-item-incr-button:before,
|
|
|
|
|
.selected .cafe-item-incr-button:after {
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
}
|
|
|
|
|
.cafe-item-incr-button .button-item-label {
|
|
|
|
|
transition: transform var(--animation);
|
|
|
|
|
}
|
|
|
|
|
.selected .cafe-item-incr-button .button-item-label {
|
|
|
|
|
transform: scale3d(0.4, 0, 1);
|
|
|
|
|
}
|
|
|
|
|
.cafe-item-incr-button:after {
|
|
|
|
|
width: 3px;
|
|
|
|
|
height: 14px;
|
|
|
|
|
}
|
|
|
|
|
|
2022-04-09 14:27:34 +02:00
|
|
|
.cafe-status-wrap {
|
|
|
|
|
position: fixed;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
transform: translateY(var(--tg-viewport-height, 100vh));
|
2024-05-28 12:42:48 +02:00
|
|
|
z-index: 1;
|
2022-04-09 14:27:34 +02:00
|
|
|
}
|
2022-04-09 14:23:56 +02:00
|
|
|
.cafe-status {
|
|
|
|
|
position: fixed;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
display: block;
|
|
|
|
|
width: 100%;
|
|
|
|
|
padding: 8px 20px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
border-radius: 0;
|
|
|
|
|
background-color: #e64d44;
|
|
|
|
|
box-shadow: 0 var(--status-height) #e64d44;
|
|
|
|
|
color: #fff;
|
|
|
|
|
height: var(--status-height);
|
|
|
|
|
transition: transform var(--animation), visibility var(--animation);
|
|
|
|
|
transform: translateY(var(--status-height));
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
visibility: hidden;
|
|
|
|
|
z-index: 11;
|
|
|
|
|
}
|
|
|
|
|
.cafe-status.shown {
|
|
|
|
|
pointer-events: auto;
|
|
|
|
|
visibility: visible;
|
|
|
|
|
transform: translateY(0);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cafe-order-overview {
|
2022-04-09 14:27:34 +02:00
|
|
|
display: none;
|
|
|
|
|
font-family: var(--default-font);
|
2022-04-09 14:23:56 +02:00
|
|
|
background-color: var(--bg-color);
|
|
|
|
|
transition: opacity var(--page-animation);
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
2022-06-23 15:29:35 +02:00
|
|
|
body.order-mode .cafe-order-overview {
|
2022-04-09 14:23:56 +02:00
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
.cafe-order-header-wrap {
|
|
|
|
|
padding: 21px 20px 14px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
.cafe-order-header {
|
|
|
|
|
font-size: 17px;
|
|
|
|
|
line-height: 21px;
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
flex-grow: 1;
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
.cafe-order-edit {
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
line-height: 18px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
color: var(--accent-color);
|
|
|
|
|
}
|
|
|
|
|
.cafe-order-item {
|
|
|
|
|
display: none;
|
|
|
|
|
padding: 5px 20px 5px 14px;
|
|
|
|
|
}
|
|
|
|
|
.cafe-order-item.selected {
|
|
|
|
|
display: flex;
|
|
|
|
|
}
|
|
|
|
|
.cafe-order-item-label {
|
|
|
|
|
flex-grow: 1;
|
|
|
|
|
}
|
|
|
|
|
.cafe-order-item-photo {
|
|
|
|
|
text-align: center;
|
|
|
|
|
width: 50px;
|
|
|
|
|
height: 50px;
|
|
|
|
|
margin-right: 11px;
|
|
|
|
|
}
|
|
|
|
|
.cafe-order-item-photo .cafe-item-emoji {
|
|
|
|
|
font-size: 38px;
|
|
|
|
|
line-height: 50px;
|
|
|
|
|
}
|
|
|
|
|
.cafe-order-item-photo .cafe-item-lottie {
|
|
|
|
|
width: 40px;
|
|
|
|
|
margin: 4px 0;
|
|
|
|
|
}
|
|
|
|
|
.cafe-order-item-title {
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
line-height: 18px;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
padding: 3px 0;
|
|
|
|
|
}
|
|
|
|
|
.cafe-order-item-counter {
|
|
|
|
|
color: var(--main-color);
|
|
|
|
|
}
|
|
|
|
|
.cafe-order-item-description {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
line-height: 17px;
|
|
|
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
|
color: var(--page-hint-color);
|
|
|
|
|
padding: 2px 0;
|
|
|
|
|
}
|
|
|
|
|
.cafe-order-item-price {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
line-height: 17px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
padding: 4px 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cafe-text-field-wrap {
|
|
|
|
|
margin-top: 14px;
|
|
|
|
|
}
|
|
|
|
|
.cafe-text-field {
|
2022-04-09 14:27:34 +02:00
|
|
|
font-family: var(--default-font);
|
2022-04-09 14:23:56 +02:00
|
|
|
font-size: 17px;
|
|
|
|
|
line-height: 21px;
|
|
|
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
|
padding: 12px 20px 13px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
display: block;
|
|
|
|
|
outline: none;
|
|
|
|
|
border: none;
|
|
|
|
|
border-radius: 0;
|
|
|
|
|
resize: none;
|
|
|
|
|
color: var(--text-color);
|
|
|
|
|
-webkit-user-select: auto;
|
|
|
|
|
user-select: auto;
|
|
|
|
|
cursor: auto;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
.cafe-text-field::-webkit-input-placeholder {
|
|
|
|
|
transition: color var(--animation);
|
|
|
|
|
color: var(--placeholder-color);
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
}
|
|
|
|
|
.cafe-text-field::-moz-placeholder {
|
|
|
|
|
transition: color var(--animation);
|
|
|
|
|
color: var(--placeholder-color);
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
}
|
|
|
|
|
.cafe-text-field:-ms-input-placeholder {
|
|
|
|
|
transition: color var(--animation);
|
|
|
|
|
color: var(--placeholder-color);
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
}
|
|
|
|
|
.cafe-text-field::placeholder {
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
}
|
|
|
|
|
.cafe-text-field-hint {
|
2022-04-09 14:27:34 +02:00
|
|
|
font-family: var(--default-font);
|
2022-04-09 14:23:56 +02:00
|
|
|
font-size: 14px;
|
|
|
|
|
line-height: 18px;
|
|
|
|
|
-webkit-font-smoothing: antialiased;
|
2022-04-13 00:22:26 +02:00
|
|
|
padding: 10px 20px 24px;
|
2022-04-09 14:23:56 +02:00
|
|
|
color: var(--hint-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.button-item.ripple-handler {
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
.ripple-mask {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0; right: 0;
|
|
|
|
|
top: 0; bottom: 0;
|
|
|
|
|
transform: translateZ(0);
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
.button-item .ripple-mask {
|
|
|
|
|
border-radius: inherit;
|
|
|
|
|
}
|
|
|
|
|
.button-item .ripple {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 200%;
|
|
|
|
|
left: 50%; top: 50%;
|
|
|
|
|
margin: -100% 0 0 -100%;
|
|
|
|
|
padding-top: 200%;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.07);
|
|
|
|
|
transition:
|
|
|
|
|
transform var(--ripple-duration) ease-out,
|
|
|
|
|
opacity var(--ripple-duration) ease-out,
|
|
|
|
|
background-color var(--ripple-duration) ease-out;
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
.button-item-label {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
position: relative;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cafe-item-add-button .ripple,
|
|
|
|
|
.cafe-item-incr-button .ripple {
|
|
|
|
|
background-color: #ed960b;
|
|
|
|
|
}
|
|
|
|
|
.cafe-item-decr-button .ripple {
|
|
|
|
|
background-color: #d3362d;
|
|
|
|
|
}
|
|
|
|
|
|
2024-05-27 22:43:36 +02:00
|
|
|
i.star-icon {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
font-style: normal;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
position: relative;
|
|
|
|
|
background: url('data:image/svg+xml,%3Csvg%20height%3D%2245%22%20viewBox%3D%220%200%2046%2045%22%20width%3D%2246%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22a%22%20x1%3D%2225%25%22%20x2%3D%2274.92%25%22%20y1%3D%22.825%25%22%20y2%3D%22107.86%25%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffd951%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffb222%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22b%22%20x1%3D%2250%25%22%20x2%3D%2250%25%22%20y1%3D%220%25%22%20y2%3D%2299.795%25%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23e58f0d%22%2F%3E%3Cstop%20offset%3D%22.99963%22%20stop-color%3D%22%23eb7915%22%2F%3E%3C%2FlinearGradient%3E%3Cpath%20id%3D%22c%22%20d%3D%22m15.45%2013.17%205.29-10.61c.61-1.22%202.09-1.71%203.3-1.09.47.24.86.63%201.09%201.11l5%2010.23c.41.83%201.21%201.4%202.12%201.51l10.47%201.27c1.42.17%202.43%201.47%202.26%202.91-.07.59-.34%201.14-.76%201.56l-8.27%208.2c-.33.33-.49.8-.44%201.27l1.38%2011.08c.2%201.59-.92%203.04-2.49%203.23-.59.08-1.19-.04-1.72-.32l-8.74-4.81c-.63-.35-1.39-.36-2.03-.03l-9.06%204.68c-1.27.66-2.83.14-3.48-1.14-.25-.49-.34-1.03-.26-1.57l.72-5.08c.36-2.49%201.89-4.64%204.1-5.78l10.06-5.17c.27-.14.37-.47.24-.74-.11-.21-.34-.33-.57-.29l-12.3%201.77c-1.88.27-3.78-.27-5.26-1.48l-4.09-3.36c-1.17-.96-1.35-2.7-.4-3.88.44-.55%201.08-.9%201.77-.99l10.5-1.36c.68-.09%201.26-.51%201.57-1.12z%22%2F%3E%3Cfilter%20id%3D%22d%22%20height%3D%22111.7%25%22%20width%3D%22111.4%25%22%20x%3D%22-5.7%25%22%20y%3D%22-5.9%25%22%3E%3CfeOffset%20dx%3D%222%22%20dy%3D%223%22%20in%3D%22SourceAlpha%22%20result%3D%22shadowOffsetInner1%22%2F%3E%3CfeComposite%20in%3D%22shadowOffsetInner1%22%20in2%3D%22SourceAlpha%22%20k2%3D%22-1%22%20k3%3D%221%22%20operator%3D%22arithmetic%22%20result%3D%22shadowInnerInner1%22%2F%3E%3CfeColorMatrix%20in%3D%22shadowInnerInner1%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%201%20%20%200%200%200%200%201%20%20%200%200%200%200%201%20%200%200%200%200.65667938%200%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cuse%20fill%3D%22url%28%23a%29%22%20fill-rule%3D%22evenodd%22%20xlink%3Ahref%3D%22%23c%22%2F%3E%3Cuse%20fill%3D%22%23000%22%20filter%3D%22url%28%23d%29%22%20xlink%3Ahref%3D%22%23c%22%2F%3E%3Cuse%20stroke%3D%22url%28%23b%29%22%20stroke-width%3D%222%22%20xlink%3Ahref%3D%22%23c%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat center;
|
|
|
|
|
background-size: contain;
|
|
|
|
|
letter-spacing: 10em;
|
|
|
|
|
text-indent: -10em;
|
|
|
|
|
width: 1.3em;
|
|
|
|
|
}
|
|
|
|
|
|
2022-04-09 14:23:56 +02:00
|
|
|
|
|
|
|
|
.loading-icon {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
transform: scale(0);
|
|
|
|
|
visibility: hidden;
|
|
|
|
|
opacity: 0.2;
|
|
|
|
|
transform-origin: 50%;
|
|
|
|
|
transition: all var(--animation);
|
|
|
|
|
}
|
|
|
|
|
body.loading .loading-icon {
|
|
|
|
|
transition-delay: .4s;
|
|
|
|
|
transform: scale(1);
|
|
|
|
|
visibility: visible;
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
.loading-icon-circle {
|
|
|
|
|
stroke: #fff;
|
|
|
|
|
stroke-width: 2.25px;
|
|
|
|
|
stroke-linecap: round;
|
|
|
|
|
fill: transparent;
|
|
|
|
|
transform: rotateZ(-90deg);
|
|
|
|
|
transform-origin: 50%;
|
|
|
|
|
animation: rotate-circle linear 1.5s infinite, resize-circle linear 360s infinite;
|
|
|
|
|
stroke-dasharray: calc(var(--radius) * 6.28);
|
|
|
|
|
r: var(--radius);
|
|
|
|
|
--radius: 9px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@-webkit-keyframes rotate-circle {
|
|
|
|
|
from { transform: rotateZ(-90deg); }
|
|
|
|
|
to { transform: rotateZ(630deg); }
|
|
|
|
|
}
|
|
|
|
|
@keyframes rotate-circle {
|
|
|
|
|
from { transform: rotateZ(-90deg); }
|
|
|
|
|
to { transform: rotateZ(630deg); }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@-webkit-keyframes resize-circle {
|
|
|
|
|
from { stroke-dashoffset: 0; }
|
|
|
|
|
to { stroke-dashoffset: 12500px; }
|
|
|
|
|
}
|
|
|
|
|
@keyframes resize-circle {
|
|
|
|
|
from { stroke-dashoffset: 0; }
|
|
|
|
|
to { stroke-dashoffset: 12500px; }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@-webkit-keyframes badge-incr {
|
|
|
|
|
from, to { transform: scale3d(1, 1, 1); }
|
|
|
|
|
40% { transform: scale3d(1.2, 1.2, 1); }
|
|
|
|
|
}
|
|
|
|
|
@keyframes badge-incr {
|
|
|
|
|
from, to { transform: scale3d(1, 1, 1); }
|
|
|
|
|
40% { transform: scale3d(1.2, 1.2, 1); }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@-webkit-keyframes badge-incr2 {
|
|
|
|
|
from, to { transform: scale3d(1, 1, 1); }
|
|
|
|
|
40% { transform: scale3d(1.2, 1.2, 1); }
|
|
|
|
|
}
|
|
|
|
|
@keyframes badge-incr2 {
|
|
|
|
|
from, to { transform: scale3d(1, 1, 1); }
|
|
|
|
|
40% { transform: scale3d(1.2, 1.2, 1); }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@-webkit-keyframes badge-decr {
|
|
|
|
|
from, to { transform: scale3d(1, 1, 1); }
|
|
|
|
|
40% { transform: scale3d(0.8, 0.8, 1); }
|
|
|
|
|
}
|
|
|
|
|
@keyframes badge-decr {
|
|
|
|
|
from, to { transform: scale3d(1, 1, 1); }
|
|
|
|
|
40% { transform: scale3d(0.8, 0.8, 1); }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@-webkit-keyframes badge-decr2 {
|
|
|
|
|
from, to { transform: scale3d(1, 1, 1); }
|
|
|
|
|
40% { transform: scale3d(0.8, 0.8, 1); }
|
|
|
|
|
}
|
|
|
|
|
@keyframes badge-decr2 {
|
|
|
|
|
from, to { transform: scale3d(1, 1, 1); }
|
|
|
|
|
40% { transform: scale3d(0.8, 0.8, 1); }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@-webkit-keyframes badge-show {
|
|
|
|
|
from { transform: scale3d(0.5, 0.5, 1); opacity: 0; visibility: hidden; }
|
|
|
|
|
30% { transform: scale3d(1.2, 1.2, 1); }
|
|
|
|
|
to { transform: scale3d(1, 1, 1); opacity: 1; visibility: visible; }
|
|
|
|
|
}
|
|
|
|
|
@keyframes badge-show {
|
|
|
|
|
from { transform: scale3d(0.5, 0.5, 1); opacity: 0; visibility: hidden; }
|
|
|
|
|
30% { transform: scale3d(1.2, 1.2, 1); }
|
|
|
|
|
to { transform: scale3d(1, 1, 1); opacity: 1; visibility: visible; }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@-webkit-keyframes badge-hide {
|
|
|
|
|
from { transform: scale3d(1, 1, 1); opacity: 1; visibility: visible; }
|
|
|
|
|
to { transform: scale3d(0.5, 0.5, 1); opacity: 0; visibility: hidden; }
|
|
|
|
|
}
|
|
|
|
|
@keyframes badge-hide {
|
|
|
|
|
from { transform: scale3d(1, 1, 1); opacity: 1; visibility: visible; }
|
|
|
|
|
to { transform: scale3d(0.5, 0.5, 1); opacity: 0; visibility: hidden; }
|
|
|
|
|
}
|
