.login-layout {
display: flex;
padding: 2rem;
max-width: 500px;
align-items: center;
align-content: center;
justify-items: center;
justify-content: center;
margin-left: auto;
margin-right: auto;
font-family: "Montserrat";
}
.login {
margin-left: auto;
margin-right: auto;
max-width: 600px;
margin-top: 20vh;
}
.login-layout button,
.login button {
width: 100%;
}
.login-header {
display: flex;
flex-direction: column;
}
.login-header h3 {
font-weight: 400;
font-family: "Montserrat";
}
.login-header span {
margin-top: 0.35rem;
margin-bottom: 0.35rem;
font-weight: 300;
font-size: 13px;
}
.login-inputs {
display: flex;
flex-direction: column;
gap: 0.05rem;
}
@media (max-width: 768px) {
.login-layout {
padding: 1rem;
}
.login {
margin-top: 10vh;
max-width: 100%;
}
}
@media (max-height: 500px) {
.login {
margin-top: 0;
}
}
/* #blazor-error-ui переехал в wwwroot/app.css (глобально): элемент лежит
в App.razor, scoped-стили MainLayout сюда не достают. */
#blazor-error-ui {
color-scheme: light only;
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .dismiss {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
.public-page {
min-height: 100vh;
display: flex;
flex-direction: column;
background: #0e0f12;
color: #d7d7d7;
font-family: 'Segoe UI', system-ui, sans-serif;
}
.public-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.1rem 1.6rem;
border-bottom: 1px solid #22242b;
}
.public-logo {
color: #fff;
font-size: 1.05rem;
font-weight: 700;
text-decoration: none;
letter-spacing: 0.02em;
}
.public-logo span { color: #6ea8fe; font-weight: 500; }
.public-back {
color: #9a9a9a;
font-size: 0.85rem;
text-decoration: none;
border: 1px solid #2c2f38;
border-radius: 8px;
padding: 0.4rem 1rem;
transition: color .15s, border-color .15s;
}
.public-back:hover { color: #fff; border-color: #4a4e5c; }
.public-main {
flex: 1;
width: 100%;
max-width: 860px;
margin: 0 auto;
padding: 2.2rem 1.4rem 3rem;
}
.public-footer {
display: flex;
align-items: center;
justify-content: center;
gap: 0.7rem;
padding: 1.2rem;
font-size: 0.78rem;
color: #555;
border-top: 1px solid #1b1d22;
}
.public-footer a { color: #555; text-decoration: none; }
.public-footer a:hover { color: #999; }
.public-divider { color: #333; }
.public-main h1 {
font-size: 1.5rem;
color: #fff;
margin: 0 0 0.4rem;
}
.public-main .doc-date {
color: #666;
font-size: 0.8rem;
margin-bottom: 1.8rem;
}
.public-main h2 {
font-size: 1.05rem;
color: #e8e8e8;
margin: 1.6rem 0 0.5rem;
}
.public-main p, .public-main li {
color: #b8b8b8;
font-size: 0.92rem;
line-height: 1.65;
}
.public-main ul { padding-left: 1.3rem; margin: 0.4rem 0; }
.public-main a { color: #6ea8fe; }
.indicator {
border-radius: 12px;
border: 1px solid #EBEBEB !important;
min-height: 227px !important;
min-width: 250px !important;
}
.indicator-data {
margin-top: 1rem;
display: flex;
flex-direction: column;
}
.indicator-header {
justify-content: start;
justify-items: start;
display: flex;
padding-top: 1rem;
padding-left: 1rem;
padding-right: 1rem;
}
.indicator-header label {
margin-top: auto;
margin-bottom: auto;
}
.gray {
background-color: #FAFAFA;
}
.indicator-collection {
display: flex;
flex-wrap: wrap;
gap: 20px;
flex-direction: row;
padding: 1rem;
border-radius: 12px;
}
.i-item {
display: flex;
flex-direction: column;
}
.i-item-header {
display: flex;
}
.i-item-header svg {
margin-right: 0.2rem;
margin-top: auto;
margin-bottom: auto;
}
.i-item-data {
margin-top: 0.5rem;
}
.i-item-data label:first-of-type {
font-weight: 700;
font-size: 21px;
}
.indicator-prefix {
margin-left: 3px;
margin-top: 3px;
font-weight: 400;
text-transform: uppercase !important;
font-size: 14px;
color: #B7B7B7 !important;
}
.i-item-header label {
margin-top: auto;
margin-bottom: auto;
}
.reflective {
padding: 0;
background: linear-gradient(135deg, #1a1a1a 0%, #252525 100%) !important;
border: none;
border-radius: 20px;
color: #e0e0e0;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
}
.reflective .header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem 2rem;
background: rgba(255,255,255,0.02); border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.reflective .header span:first-of-type {
font-size: 24px;
font-weight: 700;
color: #ffffff;
letter-spacing: -0.5px;
margin: 0;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.information .line span:last-of-type {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.information .line span:last-of-type .copy-btn {
margin-left: 10px !important;
}
.reflective .header span:first-of-type .copy-btn {
margin-left: 10px !important;
}
.reflective .header .status {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.5rem 1rem;
background-color: rgba(255, 255, 255, 0.04);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.reflective .header .status > span:first-of-type {
color: #b0b0b0;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0;
}
.reflective .header .status .status-toggle {
border: none;
cursor: pointer;
font-family: inherit;
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.4px;
padding: 4px 12px;
border-radius: 999px;
transition: all 0.2s ease;
}
.reflective .header .status .status-toggle.on {
color: #4ade80;
background: rgba(74, 222, 128, 0.12);
}
.reflective .header .status .status-toggle.on:hover {
background: rgba(74, 222, 128, 0.2);
}
.reflective .header .status .status-toggle.off {
color: #f87171;
background: rgba(248, 113, 113, 0.12);
}
.reflective .header .status .status-toggle.off:hover {
background: rgba(248, 113, 113, 0.2);
}
.information {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
gap: 1rem;
padding: 2rem;
background: rgba(255, 255, 255, 0.01);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
/* Обёртка пары полей у терминала: прозрачна для сетки —
дети раскладываются по колонкам как обычные .line/.info */
.information .flex {
display: contents;
}
.information .line {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 1rem;
background: rgba(255, 255, 255, 0.02);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.06);
transition: all 0.3s ease;
}
.information .line:hover {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.12);
transform: translateY(-2px);
}
.information .line span:first-of-type {
color: #b0b0b0;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.4px;
margin: 0;
}
.information .line span:last-of-type {
color: #ffffff;
font-size: 16px;
font-weight: 700;
margin: 0;
min-width: 0;
overflow-wrap: anywhere;
}
.information .info {
display: flex;
flex-direction: column;
gap: 0.4rem;
padding: 1rem;
background: rgba(255, 255, 255, 0.02);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.06);
transition: all 0.3s ease;
}
.information .info:hover {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.12);
}
.information .info span:first-of-type {
color: #b0b0b0;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.4px;
margin: 0;
}
.information .info span:last-of-type {
color: #ffffff;
font-size: 14px;
font-weight: 600;
margin: 0;
}
.reflective .settings {
display: grid;
/* 340px — длинные подписи («Кол-во параллельных заявок (админ)»)
перестают ломаться на 3 строки, значение не прижато */
grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
align-items: start;
gap: 1.5rem;
padding: 2rem;
background: rgba(255, 255, 255, 0.01);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.reflective .settings .settings-item {
box-sizing: border-box;
min-width: 0;
max-width: 100%;
padding: 1.5rem;
background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.2) 100%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
display: flex;
flex-direction: column;
gap: 1rem;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.reflective .settings .settings-item:hover {
background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0.1) 100%);
border-color: rgba(255, 255, 255, 0.2);
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}
.title {
font-weight: 700;
color: #ffffff;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.6px;
margin: 0;
padding-bottom: 0.5rem;
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}
.settings-item .params {
display: flex;
flex-direction: column;
gap: 0.75rem;
min-width: 0;
}
.settings-item .param {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
min-width: 0;
padding: 0.75rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.settings-item .param:last-child {
border-bottom: none;
}
.settings-item .param span:first-of-type {
color: #b0b0b0;
font-size: 12px;
font-weight: 500;
margin: 0;
}
.settings-item .param span:last-of-type {
color: #ffffff;
font-weight: 600;
font-size: 13px;
margin: 0;
overflow-wrap: anywhere;
word-break: break-word;
text-align: right;
min-width: 0;
}
.connected-users {
padding: 2rem;
background: rgba(255, 255, 255, 0.01);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.user-group {
margin-bottom: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.user-group:last-child {
margin-bottom: 0;
}
.group-title {
font-weight: 700;
color: #ffffff;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0;
}
.user-list {
color: #b0b0b0;
font-size: 13px;
padding: 1rem;
background: rgba(255, 255, 255, 0.02);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.06);
margin: 0;
line-height: 1.6;
}
.no-users {
color: #888888;
font-size: 13px;
font-style: italic;
margin: 0;
}
.action {
padding: 2rem;
display: flex;
gap: 1rem;
}
.action button {
flex: 1;
}
/* Кнопки «Изменить»/«Изменить параметры» — акцентные, читаемые в обеих темах */
.settings-item > .mud-button-filled,
.action .mud-button-filled {
background: #00d4aa !important;
color: #04332a !important;
border: none !important;
font-weight: 700;
box-shadow: 0 4px 14px rgba(0, 212, 170, 0.28) !important;
}
.settings-item > .mud-button-filled:hover,
.action .mud-button-filled:hover {
background: #00b894 !important;
box-shadow: 0 6px 18px rgba(0, 212, 170, 0.4) !important;
transform: translateY(-1px);
}
.reflective span {
font-size: 13px;
color: #e0e0e0;
}
.params span {
font-weight: 600;
font-size: 12px !important;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.mud-dialog-content .line {
margin-top: 1rem;
}
/* Первой строке в диалоге лишний отступ не нужен: заголовок и так даёт
16px + 8px margin контента + 8px margin контрола — итоговый зазор
сверху должен совпадать с зазором «последнее поле → кнопки» снизу. */
.mud-dialog .mud-dialog-content > .line:first-child,
.mud-dialog .mud-dialog-content > :first-child > .line:first-child {
margin-top: 0;
}
.list {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 2rem;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
}
.list .list-item {
padding: 1rem;
background: rgba(255, 255, 255, 0.03);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.06);
transition: all 0.3s ease;
}
.list .list-item:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.12);
}
@media (max-width: 710px) {
.information,
.reflective .settings,
.connected-users {
padding: 1rem;
}
.information,
.reflective .settings {
grid-template-columns: 1fr;
}
.information .info span:last-of-type,
.settings-item .param span:last-of-type,
.information .line span:last-of-type {
overflow-wrap: anywhere;
word-break: break-word;
}
}
.not-found-base64 {
background-color: #232323;
width: 100%;
height: 100%;
display: flex;
margin-left: 1rem;
border-radius: 12px;
color: #fff;
text-align: center;
justify-content: center;
justify-items: center;
}
.not-found-base64 span {
margin-top: auto;
margin-bottom: auto;
}
.reflective-invoice-data {
display: flex;
flex-direction: row;
font-size: 13px;
height: 100%;
}
.reflective-invoice {
background-color: #fff;
border-radius: 12px;
border: 1px solid #F0F0F0;
padding: 1rem;
height: 100%;
}
.data-left {
flex: 1 1;
height: 100%;
display: flex;
flex-direction: column;
}
.data-right {
flex: 1 1;
}
.reflective-line {
display: flex;
}
.reflective-line div:first-of-type {
flex: 1 1;
}
.reflective-line div:last-of-type {
flex: 1 1;
text-align: end;
}
.reflective-line div:last-of-type label:last-of-type {
color: #020202;
font-weight: 500;
}
.important label:first-of-type {
font-weight: 600;
color: #020202;
}
.reflective-invoice-action {
gap: 5px;
display: flex;
flex-direction: column;
margin-top: auto;
}
.reflective-line {
margin-bottom: 0.25rem;
}
.data-right {
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
padding-left: 1rem;
padding-right: 1rem;
}
.img-bg {
background-color: #e6e6e6;
border-radius: 12px;
width: 100%;
height: 100%;
}
.data-right img {
max-height: 100%;
max-width: 100%;
object-fit: contain;
display: block;
border-radius: 12px;
}
.simple-stats {
display: flex;
flex-direction: column;
background-color: rgb(250, 250, 250);
padding: 1rem;
border-radius: 10px;
color: #000;
/* не растягиваемся на остаток строки — иначе flex-grow + max-width
давал дыры между карточками при wrap */
flex: 0 1 auto;
min-width: 200px;
max-width: 300px;
text-wrap: nowrap;
}
.simple-stats .data {
margin-top: 0.5rem;
font-weight: 700;
font-size: 24px;
}
.simple-stats span:first-of-type {
font-weight: 500;
font-size: 15px;
}
.user-wallet {
border-radius: 12px;
border: 1px solid #EBEBEB !important;
background-color: #FAFAFA;
padding: 1rem;
flex: 1;
max-width: 440px;
min-width: 300px;
box-sizing: border-box;
}
.wallet-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.6rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid rgba(128,128,128,.25);
}
.wallet-login {
font-size: 17px;
font-weight: 700;
color: #90caf9;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wallet-type {
font-size: 11px;
font-weight: 600;
opacity: .55;
text-transform: uppercase;
letter-spacing: .04em;
flex-shrink: 0;
}
.wallet-line {
display: flex;
gap: 0.5rem;
min-width: 0;
}
.wallet-line span {
font-size: 13px;
margin-bottom: 0.2rem;
}
.wallet-line span:last-of-type {
margin-left: auto;
font-weight: 600;
min-width: 0;
overflow-wrap: anywhere;
text-align: right;
}
.user-wallet-action {
margin-top: 1rem !important;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
}
.merchant-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
gap: 16px;
}
.merchant-item {
box-sizing: border-box;
border-radius: 12px;
}
.providers-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
gap: 16px;
}
.providers-item {
box-sizing: border-box;
background-color: #ddd;
border-radius: 12px;
}
.traider-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
gap: 16px;
}
.traider-item {
box-sizing: border-box;
border-radius: 12px;
}
.users-header {
display: flex;
gap: 10px;
max-width: 800px;
}
.user-item {
margin-bottom: 0.5rem;
padding: 1rem;
border-radius: 12px;
display: flex;
cursor: pointer;
}
.user-item:hover {
background-color: #fafafa40;
}
.item-row {
margin-top: auto;
margin-bottom: auto;
display: grid;
flex: 1;
}
.item-row span {
color: #838383;
font-size: 13px;
font-weight: 500;
margin-left: auto;
margin-right: auto;
}
.item-row label {
margin-left: auto;
margin-right: auto;
}
.user-info {
display: flex;
}
.user-action {
margin-left: auto;
}
.user-info {
display: flex;
width: 100%;
}
.user-item .user-action {
flex-wrap: nowrap;
display: flex;
flex-direction: row;
text-wrap: nowrap;
gap: 5px;
}
.user-item .user-name {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 40px;
line-height: 40px;
margin-left: 1rem;
}
.wallets-list {
gap: 10px;
display: flex;
flex-wrap: wrap;
}
.wallets-item {
box-sizing: border-box;
border-radius: 12px;
flex: 1 1 32.333%;
max-width: 452px;
}
.appels-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
gap: 16px;
align-items: start;
}
.appels-item {
box-sizing: border-box;
background-color: transparent;
border-radius: 12px;
}
.terminals-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
gap: 16px;
align-items: start;
}
.terminals-item {
box-sizing: border-box;
background-color: #ddd;
border-radius: 12px;
}