/* ========================================================================== ProBEG v3 design: light, macOS-like — white page with a soft green glow, glass panels, system font. Used only by templates under results/templates/results/v3/, so the old Bootstrap pages are not affected. The green is the one probeg.org has always used (Bootstrap "success"): #5cb85c for fills, #dff0d8 for light backgrounds, #3c763d for text. Green fills carry dark text: white on #5cb85c is too low in contrast. ========================================================================== */ /* Inter is kept on our server (static/v3/fonts), the system fonts stay as the reserve. To go back to the system fonts, delete "Inter" from the lists below (the body and the titles). */ /* Inter cyrillic-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/inter-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* Inter cyrillic */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/inter-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* Inter latin-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Inter latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --bg: #fbfcf9; --text: #1d1d1f; --text-2: #6e6e73; --text-3: #8e8e93; --accent: #5cb85c; --accent-rgb: 92, 184, 92; --accent-text: #3c763d; --accent-soft: #dff0d8; --accent-soft-hover: #d0e8c4; --red: #c4291f; --red-soft: rgba(255, 59, 48, .1); --amber: #8a6420; --amber-soft: #fcf3dd; --glass: rgba(255, 255, 255, .62); --glass-strong: rgba(255, 255, 255, .82); --glass-border: rgba(255, 255, 255, .85); --hairline: rgba(60, 60, 67, .12); --shadow: 0 1px 1px rgba(16, 24, 40, .03), 0 8px 24px rgba(31, 60, 40, .07); --shadow-lg: 0 2px 4px rgba(16, 24, 40, .04), 0 24px 48px rgba(31, 60, 40, .1); --blur: blur(28px) saturate(180%); --r-sm: 10px; --r: 16px; --r-lg: 22px; --gutter: 30px; /* the side fields of every page; 16px on a phone */ --wrap: 100%; /* the width of every page: the whole window, with the paddings of 16px, as it was in the old version (container-fluid) */ /* Type scale (px, before the page zoom): 12 / 13 / 14 / 15 / 16 / 18 / 20 / 22 / 24 / 28 / 32 / 36 / 40 */ --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-base: 15px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 20px; --fs-3xl: 22px; --fs-4xl: 24px; --fs-5xl: 28px; --fs-6xl: 32px; --fs-7xl: 36px; --fs-8xl: 40px; color-scheme: light; } /* --- Base -------------------------------------------------------------- */ .v3, .v3 * { box-sizing: border-box; } html.v3-html { --page-zoom: .93; zoom: var(--page-zoom); -webkit-text-size-adjust: 100%; } html.v3-html.ui-scale-large { --page-zoom: 1.02; } /* the personal setting «Размер»: +10% and +25% to the usual (see models.UI_SETTINGS) */ html.v3-html.ui-scale-xlarge { --page-zoom: 1.16; } body.v3 { margin: 0; min-height: calc(100vh / var(--page-zoom)); display: flex; flex-direction: column; color: var(--text); background-color: var(--bg); /* A barely visible green glow in the corners */ background-image: radial-gradient(60vw 50vh at 8% -5%, rgba(var(--accent-rgb), .13), transparent 70%), radial-gradient(50vw 45vh at 95% 5%, rgba(var(--accent-rgb), .08), transparent 70%), radial-gradient(60vw 50vh at 70% 105%, rgba(var(--accent-rgb), .11), transparent 70%), radial-gradient(40vw 40vh at 0% 100%, rgba(var(--accent-rgb), .06), transparent 70%); background-attachment: fixed; font: 15px/1.5 "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; letter-spacing: -.01em; overflow-x: hidden; } .v3 a { color: var(--accent-text); text-decoration: none; } .v3 a:hover { text-decoration: underline; } .v3 a:focus-visible, .v3 button:focus-visible, .v3 summary:focus-visible, .v3 input:focus-visible, .v3 select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .v3 h1, .v3 h2, .v3 h3 { font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif; letter-spacing: -.025em; color: var(--text); } .v3 h1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.1; font-weight: 700; margin: 0 0 8px; } .v3 h2 { font-size: var(--fs-2xl); font-weight: 650; margin: 0 0 14px; } .v3 h3 { font-size: var(--fs-lg); font-weight: 600; margin: 0 0 8px; } .v3 p { margin: 0 0 12px; } .v3 img { max-width: 100%; } .v3 .muted { color: var(--text-2); } .v3 .small { font-size: var(--fs-sm); } .v3 .num { font-variant-numeric: tabular-nums; } .v3 .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .v3 .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .v3 .row.between { justify-content: space-between; } .v3 .glass { background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--glass-border); border-radius: var(--r-lg); box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .9); } /* --- Buttons, segmented control, badges -------------------------------- */ .v3 .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 18px; border-radius: 999px; border: 0; font: inherit; font-weight: 590; font-size: var(--fs-md); cursor: pointer; white-space: nowrap; /* The same pale green as the date block of an event, so the page has one green and not two. Bright --accent is left for small marks: the underline of the current section and the dots of badges. */ color: var(--accent-text); background: var(--accent-soft); box-shadow: 0 0 0 .5px rgba(60, 118, 61, .2), 0 1px 2px rgba(30, 90, 30, .12); transition: background .15s, transform .05s; } .v3 .btn:hover { background: var(--accent-soft-hover); text-decoration: none; color: var(--accent-text); } .v3 .btn:active { transform: scale(.98); } .v3 .btn.secondary { color: var(--text); background: rgba(255, 255, 255, .8); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .06); } .v3 .btn.secondary:hover { background: #fff; } .v3 .btn.ghost { color: var(--accent-text); background: transparent; box-shadow: none; padding: 6px 10px; } .v3 .btn.ghost:hover { background: var(--accent-soft); } .v3 .btn.sm { padding: 5px 12px; font-size: var(--fs-sm); } .v3 .icon-btn { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-2); cursor: pointer; } .v3 .icon-btn:hover { background: rgba(118, 118, 128, .12); color: var(--text); text-decoration: none; } .v3 .segmented { display: inline-flex; padding: 2px; gap: 2px; flex-wrap: wrap; background: rgba(118, 118, 128, .12); border-radius: 9px; } .v3 .segmented a { padding: 5px 12px; border-radius: 7px; font-size: var(--fs-sm); font-weight: 500; color: var(--text); } .v3 .segmented a:hover { text-decoration: none; background: rgba(255, 255, 255, .55); } .v3 .segmented a.active { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04); } .v3 .badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; background: rgba(118, 118, 128, .12); color: var(--text-2); } .v3 a.badge:hover { text-decoration: none; background: rgba(118, 118, 128, .2); color: var(--text); } .v3 .badge.accent { background: var(--accent-soft); color: var(--accent-text); } .v3 .badge.green { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; } /* done, sent: a green mark */ /* "Done / available": neutral chip with a green dot. "pending": an empty grey dot. */ .v3 .badge.done, .v3 .badge.pending { background: rgba(118, 118, 128, .11); color: var(--text); font-weight: 550; } .v3 .badge.done::before, .v3 .badge.pending::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px rgba(0, 0, 0, .3); } .v3 .badge.pending { color: var(--text-2); } .v3 .badge.pending::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-3); } .v3 .badge .fin { font-variant-numeric: tabular-nums; color: var(--text-2); font-weight: 500; } .v3 .badge.red { background: var(--red-soft); color: var(--red); } .v3 .badge.blue { background: #dbeafb; color: #1f5f99; font-weight: 600; } .v3 .badge.amber { background: var(--amber-soft); color: var(--amber); } /* --- Toolbar ----------------------------------------------------------- */ .v3 .toolbar { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(60, 60, 67, .14); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset; } .v3 .toolbar-inner { position: relative; max-width: var(--wrap); height: 72px; margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 24px; } .v3 .logo { display: flex; align-items: center; flex: none; color: var(--text); font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif; font-weight: 750; font-size: var(--fs-4xl); letter-spacing: -.035em; } .v3 .logo:hover { text-decoration: none; color: var(--text); } .v3 .nav { display: flex; align-self: stretch; gap: 18px; flex: none; } /* промежутки между пунктами меню: 18 px (были 14, пункты стояли слишком близко); если меню не помещается, оно само сворачивается в кнопку-«бургер» */ .v3 .nav > a, .v3 .nav .drop > button { position: relative; display: flex; align-items: center; gap: 4px; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; white-space: nowrap; font: inherit; font-size: var(--fs-base); font-weight: 550; letter-spacing: -.01em; color: var(--text-2); } .v3 .nav > a:hover, .v3 .nav .drop > button:hover { color: var(--text); text-decoration: none; } .v3 .nav .active { color: var(--text); } .v3 .nav > a.active::after, .v3 .nav .drop > button.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 2px; background: var(--accent); } .v3 .nav .drop { position: relative; display: flex; } .v3 .spacer { flex: 1; } .v3 .toolbar-actions { display: flex; align-items: center; gap: 10px; flex: none; } .v3 .toolbar .icon-btn { width: 42px; height: 42px; } .v3 .toolbar .btn.sm { padding: 9px 20px; font-size: var(--fs-base); } .v3 .toolbar-divider { width: 1px; height: 26px; background: var(--hairline); } .v3 .account { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 0; cursor: pointer; color: var(--text); font: inherit; font-weight: 550; text-align: left; } .v3 .account .name { display: grid; line-height: 1.15; font-size: var(--fs-base); max-width: 170px; } .v3 .account .name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v3 .account .name > span + span { font-weight: 450; color: var(--text-2); } .v3 .avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent-text); font-weight: 700; font-size: var(--fs-base); letter-spacing: 0; } /* Dropdowns (main menu and account/admin menus) */ .v3 .drop { position: relative; } .v3 .drop-menu { position: absolute; top: calc(100% + 6px); left: -12px; z-index: 70; min-width: 250px; max-height: 70vh; overflow-y: auto; padding: 6px; display: none; background: #fff; border: 1px solid var(--hairline); border-radius: var(--r); box-shadow: var(--shadow-lg); } .v3 .nav .drop-menu { top: calc(100% - 6px); } .v3 .drop.open > .drop-menu { display: grid; } .v3 .drop-right .drop-menu { left: auto; right: 0; } .v3 .drop-menu a { padding: 7px 12px; border-radius: 8px; color: var(--text); font-size: var(--fs-base); font-weight: 450; } .v3 .drop-menu a:hover { background: rgba(118, 118, 128, .12); text-decoration: none; } .v3 .drop-menu hr { border: 0; border-top: 1px solid var(--hairline); margin: 5px 6px; } .v3 .burger { display: none; } .v3 .nav-user { display: none; } /* Compact toolbar: the menu moves into a panel. probeg.js switches it on when the menu does not fit, because its length depends on who is logged in. The media query covers the moment before the script runs. */ @media (max-width: 1100px) { .v3 .toolbar:not(.is-wide) .nav, .v3 .toolbar:not(.is-wide) .account-drop { display: none; } } .v3 .toolbar.is-compact .nav, .v3 .toolbar.is-compact .account-drop { display: none; } .v3 .toolbar.is-compact .burger { display: grid; } .v3 .toolbar.is-compact.menu-open .nav { display: grid; position: absolute; top: 100%; left: 0; right: 0; gap: 2px; justify-items: start; padding: 12px 20px 18px; max-height: calc(100vh - 72px); overflow-y: auto; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--hairline); box-shadow: var(--shadow-lg); } .v3 .toolbar.is-compact.menu-open .nav > a, .v3 .toolbar.is-compact.menu-open .nav .drop > button { height: auto; padding: 6px 0; color: var(--text); font-weight: 650; } .v3 .toolbar.is-compact.menu-open .nav .drop { display: grid; width: 100%; } .v3 .toolbar.is-compact.menu-open .nav .drop > button svg, .v3 .toolbar.is-compact.menu-open .nav .active::after { display: none; } .v3 .toolbar.is-compact.menu-open .nav .drop-menu { position: static; display: grid; padding: 0 0 6px 10px; min-width: 0; max-height: none; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .v3 .toolbar.is-compact.menu-open .nav .drop-menu a { color: var(--text-2); padding: 5px 10px; } .v3 .toolbar.is-compact.menu-open .nav-user { display: grid; width: 100%; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hairline); } .v3 .searchbar { border-top: 1px solid var(--hairline); padding: 12px 0; } .v3 .searchbar form { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); display: flex; gap: 8px; } .v3 .searchbar input { flex: 1; min-width: 0; height: 44px; padding: 0 18px; border-radius: 999px; font: inherit; font-size: var(--fs-base); border: 1px solid var(--hairline); background: rgba(255, 255, 255, .9); color: var(--text); } /* --- Page -------------------------------------------------------------- */ .v3 main { flex: 1 0 auto; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 32px var(--gutter) 48px; } .v3 .msg { margin-bottom: 16px; padding: 12px 16px; border-radius: var(--r); background: var(--accent-soft); color: var(--accent-text); font-weight: 550; } .v3 .msg.error, .v3 .msg.danger { background: var(--red-soft); color: var(--red); } .v3 .card { padding: 22px; } .v3 .section { margin-top: 20px; } /* --- Filters ----------------------------------------------------------- */ .v3 .filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; } .v3 .filters .push { margin-left: auto; } .v3 .filters-label { font-size: var(--fs-sm); color: var(--text-3); margin-right: 2px; } .v3 .more-filters > summary { list-style: none; cursor: pointer; } .v3 .more-filters > summary::-webkit-details-marker { display: none; } .v3 .filter-panel { margin-top: 12px; padding: 26px 28px; } .v3 .filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 20px 24px; } /* Checkboxes take a line of their own: their labels are long, and squeezed into a grid column they wrapped into three lines each. */ .v3 .filter-checks { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 32px; } .v3 .field { display: grid; gap: 5px; align-content: start; } .v3 .field > label, .v3 .field > .lbl { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v3 .field input[type=text], .v3 .field input[type=date], .v3 .field input[type=number], .v3 .field select, .v3 .field input:not([type]) { width: 100%; min-width: 0; height: 40px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--hairline); background: rgba(255, 255, 255, .85); color: var(--text); font: inherit; font-size: var(--fs-base); } .v3 .field select { appearance: none; -webkit-appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } .v3 .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .v3 .check { display: flex; gap: 9px; align-items: flex-start; font-size: var(--fs-md); color: var(--text-2); cursor: pointer; line-height: 1.4; } .v3 .check input { margin: 2px 0 0; width: 16px; height: 16px; flex: none; accent-color: var(--accent-text); } .v3 .filter-actions { display: flex; gap: 10px; align-items: center; margin-top: 22px; flex-wrap: wrap; } .v3 .errorlist { margin: 0 0 12px; padding: 0; list-style: none; color: var(--red); font-size: var(--fs-sm); } /* --- Calendar list ----------------------------------------------------- */ .v3 .calendar-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; } .v3 .calendar-month { font-size: var(--fs-xl); color: var(--text-2); margin: 0 0 12px; } .v3 .calendar-list { display: grid; gap: 10px; } .v3 .calendar-item { display: flex; align-items: flex-start; gap: 18px; padding: 16px 20px; color: var(--text); transition: transform .15s, box-shadow .15s; } .v3 .calendar-item:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .9); } .v3 .calendar-date { display: grid; justify-items: center; flex: none; width: 84px; padding: 8px 6px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); } .v3 .calendar-date:hover { text-decoration: none; } .v3 .calendar-date .num { font-size: var(--fs-3xl); font-weight: 750; letter-spacing: -.03em; line-height: 1.1; white-space: nowrap; } .v3 .calendar-date .wd { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; } .v3 .calendar-item { gap: 26px; } /* the text does not stick to the plate of the date */ .v3 .calendar-date { align-content: center; min-height: 76px; } /* the date stands in the middle of the plate */ .v3 .calendar-date .num { font-size: 34px; line-height: 1; } /* the day is the accent of the tile */ .v3 .calendar-date .num.range { font-size: 26px; letter-spacing: -.02em; } /* two days («31–1») are narrower, so that they do not touch the edges of the plate */ .v3 .calendar-date .wd { font-size: var(--fs-lg); margin-top: 3px; } .v3 .calendar-body .when-line { color: var(--accent-text); font-weight: 650; font-size: var(--fs-xl); margin: 2px 0 1px; } /* the date of the start is seen at once: its own line under the title, bold and green */ .v3 .calendar-item.past .calendar-date { background: rgba(118, 118, 128, .12); color: var(--text-2); } .v3 .calendar-item.cancelled { opacity: .75; } .v3 .calendar-item.cancelled h3 a { text-decoration: line-through; text-decoration-color: var(--red); } .v3 .calendar-item.cancelled { background-image: linear-gradient(rgba(215, 58, 48, .07), rgba(215, 58, 48, .07)); border-color: rgba(215, 58, 48, .28); } /* a light red card; the glass under it stays */ .v3 .calendar-item.cancelled .calendar-date { background: rgba(215, 58, 48, .09); color: var(--text-3); } /* the plate with the date is pale */ .v3 .calendar-item.cancelled .when-line { color: var(--text-3); font-weight: 500; } /* and the line of the date too */ .v3 .calendar-item.hidden-event { border-style: dashed; border-color: var(--text-3); } .v3 .calendar-body { flex: 1; min-width: 0; } .v3 .calendar-body h3 { margin: 0 0 2px; font-size: var(--fs-xl); } .v3 .calendar-body h3 a { color: var(--text); } .v3 .calendar-body .meta a { color: var(--text-2); } .v3 .calendar-body .planned { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; } .v3 .calendar-body .links { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-sm); } .v3 .calendar-side { display: grid; gap: 8px; justify-items: end; flex: none; text-align: right; } .v3 .calendar-side .rating { font-size: var(--fs-xs); } .v3 .calendar-side .admin { display: flex; gap: 0; margin: -6px -8px 0 0; } .v3 .calendar-side .admin .icon-btn { width: 32px; height: 32px; } /* Rating stars. Their code prints Font Awesome icons (starrating/constants.py); the v3 page does not load that library for three icons, so the same classes are drawn here and take the text colour. */ .v3 i.fa { display: inline-block; width: 1em; height: 1em; vertical-align: -.14em; background: currentColor; -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; } .v3 i.fa-star { --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z'/%3E%3C/svg%3E"); } .v3 i.fa-star-o { --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); } .v3 i.fa-star-half-o { --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3CclipPath id='h'%3E%3Crect width='12' height='24'/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath d='M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z' clip-path='url(%23h)'/%3E%3Cpath d='M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); } .v3 .calendar-side .rating { font-size: var(--fs-sm); } .v3 .rating p { margin: 0; } .v3 .rating a { margin-left: 2px; } .v3 .calendar-arrow { color: var(--text-3); font-size: var(--fs-xl); line-height: 1; } .v3 .calendar-arrow:hover { color: var(--text); text-decoration: none; } /* Weekly series (parkruns) of one Saturday, collapsed */ .v3 .weekly > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 18px; padding: 16px 20px; } .v3 .weekly > summary::-webkit-details-marker { display: none; } .v3 .weekly .calendar-body h3 { margin: 0; } .v3 .weekly .chev { color: var(--text-3); transition: transform .2s ease; } .v3 .weekly[open] .chev { transform: rotate(180deg); } .v3 .weekly ul { list-style: none; margin: 0; padding: 0 20px 16px 122px; columns: 2 240px; column-gap: 28px; } .v3 .weekly li { break-inside: avoid; padding: 5px 0; font-size: var(--fs-md); border-bottom: 1px solid var(--hairline); } .v3 .weekly li .city { color: var(--text-3); } .v3 .pages { display: flex; gap: 2px; flex-wrap: wrap; align-items: center; } .v3 .pages a, .v3 .pages span { min-width: 32px; height: 32px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font-size: var(--fs-sm); font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; } .v3 .pages a:hover { background: rgba(118, 118, 128, .12); text-decoration: none; } .v3 .pages .cur { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04); } .v3 .empty { text-align: center; padding: 40px 20px; color: var(--text-2); } .v3 .ad { margin-top: 20px; text-align: center; } .v3 .ad img { border-radius: var(--r); } .v3 .ad.ad-top { margin-bottom: 8px; } /* the banner of the calendar is under the filters, above the list */ .v3 .ad.ad-top .row { display: block; margin: 0; } .v3 .ad.ad-top a { display: block; } .v3 .ad.ad-top img { display: block; margin: 0 auto; max-width: 100%; height: auto; } /* the banner keeps its own size and stands in the middle */ /* --- Footer ------------------------------------------------------------ */ .v3 footer.v3-footer { width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--wrap) - 2 * var(--gutter)); margin: 0 auto; padding: 18px 0 26px; border-top: 1px solid var(--hairline); font-size: var(--fs-sm); color: var(--text-3); text-align: center; } .v3 footer.v3-footer a { color: var(--text-2); } .v3 footer.v3-footer { text-align: left; padding-top: 16px; } .v3 .foot-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; } .v3 .foot-bar .foot-copy { margin: 0; padding: 0; border: 0; text-align: left; color: var(--text-3); } .v3 .foot-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-left: auto; } .v3 .foot-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 0; border-radius: 999px; background: rgba(118, 118, 128, .12); color: var(--text-2); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; } .v3 .foot-toggle:hover { background: rgba(118, 118, 128, .2); } .v3 .foot-toggle svg { transition: transform .15s; } .v3 .foot-toggle.on svg { transform: rotate(180deg); } .v3 footer.v3-footer[data-open] .foot-toggle { display: none; } /* on the home page the directory is open all the time */ .v3 .foot-more { margin-top: 16px; padding-top: 18px; border-top: 1px solid var(--hairline); } .v3 .foot-more[hidden] { display: none; } /* on a phone the button «Все разделы» is the last item of the line of the links, at its right edge (on the line of «ВКонтакте»), and it is smaller */ @media (max-width: 640px) { .v3 .foot-quick { margin-left: 0; flex: 1 1 100%; } .v3 .foot-quick .foot-toggle { margin-left: auto; padding: 3px 10px; font-size: var(--fs-xs); } } .v3 .foot-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .v3 .foot-grid nav { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; } .v3 .foot-grid h4 { margin: 0 0 4px; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); } .v3 .foot-grid nav h4:not(:first-child) { margin-top: 14px; } .v3 .foot-grid a:hover { color: var(--accent-ink, #3c763d); } .v3 .foot-years { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--text-3); } @media (max-width: 900px) { .v3 .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .v3 .foot-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .v3 main { padding-top: 22px; } .v3 .toolbar-inner { gap: 12px; height: 64px; } .v3 .toolbar-actions { gap: 6px; } .v3 .toolbar-divider { display: none; } .v3 .calendar-item { gap: 12px; padding: 14px; flex-wrap: wrap; } .v3 .calendar-date { width: 64px; } .v3 .calendar-date { min-height: 66px; } .v3 .calendar-date .num { font-size: 28px; } .v3 .calendar-date .num.range { font-size: 22px; } .v3 .calendar-date .wd { font-size: var(--fs-sm); } .v3 .calendar-body { flex-basis: calc(100% - 76px); } .v3 .calendar-side { justify-items: start; text-align: left; width: 100%; padding-left: 76px; grid-auto-flow: column; justify-content: start; align-items: center; } .v3 .calendar-side .calendar-arrow { display: none; } .v3 .weekly > summary { gap: 12px; padding: 14px; } .v3 .weekly ul { padding: 0 14px 14px; } .v3 .filters .push { margin-left: 0; } } @media (prefers-reduced-motion: reduce) { .v3 *, .v3 *::before, .v3 *::after { transition: none !important; animation: none !important; } } /* ========================================================================== Event page: a head card with the artwork at the right edge and the list of facts, then cards below it. ========================================================================== */ /* --- Head card: green gradient from the right edge, the artwork behind the text --- */ .v3 .event-hero { position: relative; overflow: hidden; isolation: isolate; background-image: linear-gradient(270deg, rgba(var(--accent-rgb), .34) 0%, rgba(var(--accent-rgb), .14) 32%, rgba(var(--accent-rgb), 0) 62%); } .v3 .event-hero > *:not(.event-art):not(.event-actions):not(.event-logo) { position: relative; } .v3 .event-art { position: absolute; z-index: -1; top: 0; right: 0; width: 46%; height: 100%; pointer-events: none; } /* A cancelled event: the head card is red (the gradient and the artwork) and the big word «Отменён» */ .v3 .event-hero.is-cancelled { background-image: linear-gradient(270deg, rgba(196, 41, 31, .38) 0%, rgba(196, 41, 31, .16) 32%, rgba(196, 41, 31, 0) 62%); } .v3 .event-hero.is-cancelled .event-art { filter: hue-rotate(-115deg) saturate(1.5); } .v3 .event-cancelled-label { margin: 2px 0 8px; font-size: 34px; line-height: 1.1; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--red); } /* Text stays on the light part; the artwork does not run under the lines */ .v3 .event-hero h1, .v3 .event-hero .event-info { max-width: 680px; } .v3 .event-kicker { font-size: var(--fs-sm); font-weight: 600; color: var(--accent-text); } .v3 .event-hero h1 { margin-top: 6px; } .v3 .event-actions { position: absolute; top: 18px; right: 18px; z-index: 5; } .v3 .event-logo { position: absolute; right: 22px; top: 20px; padding: 6px; background: rgba(255, 255, 255, .85); border-radius: 12px; box-shadow: var(--shadow); line-height: 0; } .v3 .event-logo img { max-height: 110px; max-width: 200px; border-radius: 6px; } .v3 .event-actions ~ .event-logo { top: 68px; } /* the logo of the event is in the right top corner, under the button of the actions (it was at the bottom and lay on the arrows to the neighbour events) */ @media (max-width: 1000px) { .v3 .event-logo { position: static; display: inline-block; margin-top: 14px; } } /* --- Facts --- */ .v3 .event-info { display: grid; gap: 8px; margin: 14px 0 0; } .v3 .event-info-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; font-size: var(--fs-base); } .v3 .event-info-row dt { color: var(--text-2); } .v3 .event-info-row dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } .v3 .event-info-row dd p { margin: 0; } .v3 .event-info-races { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; } .v3 .event-info-races.docs { gap: 6px; } .v3 .event-info-links { display: inline-flex; flex-wrap: wrap; gap: 4px 16px; } .v3 .rating { font-size: var(--fs-sm); } .v3 .for-admin { color: var(--amber); } .v3 .for-admin a { color: inherit; text-decoration: underline; } .v3 .glyphicon-new-window::before { content: "↗"; font-size: .85em; } /* --- "Are you going to run?" card --- */ .v3 .plan-card.going { box-shadow: var(--shadow), 0 0 0 2px rgba(var(--accent-rgb), .45); } .v3 .plan-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } .v3 .plan-top h2 { margin: 0 0 2px; } .v3 .plan-top p { margin: 0; } .v3 .plan-check { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 4px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-size: var(--fs-md); vertical-align: 2px; } .v3 .facepile { display: flex; flex: none; padding-left: 8px; } .v3 .facepile .avatar { width: 34px; height: 34px; margin-left: -8px; border: 2px solid #fff; font-size: var(--fs-xs); } .v3 .plan-line { display: flex; align-items: center; gap: 10px; margin-top: 6px; } /* the circles with the initials are before the words «Планируют участвовать N человек» */ .v3 .plan-line .facepile { padding-left: 6px; } .v3 .plan-line .facepile .avatar { width: 28px; height: 28px; margin-left: -7px; font-size: 11px; } .v3 .facepile .avatar.more { background: rgba(118, 118, 128, .16); color: var(--text-2); } .v3 .plan-form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; } .v3 .plan-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hairline); } /* the button «Планирую участвовать» is in the lower right corner under a divider */ .v3 .plan-foot .plan-main { width: 210px; justify-content: center; text-align: center; margin-left: auto; } /* the two buttons of the card («Планирую участвовать» and «Добавить в календарь») are of the same width */ .v3 .plan-main-m { display: none; } .v3 .chip-toggle.chip-white span { background: #fff; box-shadow: 0 0 0 1px rgba(60, 60, 67, .18); } /* «Пока не знаю» is white, with a green rim when it is chosen */ .v3 .chip-toggle.chip-white:hover span { background: #f6f6f8; } .v3 .chip-toggle.chip-white input:checked + span { background: #fff; color: var(--accent-text); box-shadow: 0 0 0 1.5px var(--accent); } .v3 .chips { display: flex; flex-wrap: wrap; gap: 6px; } .v3 .chip-toggle { position: relative; cursor: pointer; } .v3 .chip-toggle input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .v3 .chip-toggle span { display: inline-block; padding: 6px 13px; border-radius: 999px; background: rgba(118, 118, 128, .12); color: var(--text); font-size: var(--fs-md); font-weight: 500; transition: background .12s; } .v3 .chip-toggle:hover span { background: rgba(118, 118, 128, .2); } .v3 .chip-toggle input:checked + span { background: var(--accent-soft); color: var(--accent-text); box-shadow: 0 0 0 1.5px var(--accent); } .v3 .chip-toggle input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; } .v3 .plan-card { position: relative; } .v3 .plan-atc { --atc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%233c763d' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2.5'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4M12 13.5v5M9.5 16h5'/%3E%3C/svg%3E"); } .v3 .plan-atc { position: absolute; top: 14px; right: 16px; margin: 0; z-index: 5; } /* «Add to Google / Outlook / Yahoo calendar» is a small icon button in the upper right corner of the card */ .v3 .plan-atc .addtocalendar { position: relative; display: block; } .v3 .plan-atc .addtocalendar .atcb-link, .v3 .plan-atc .addtocalendar .atcb-link:active, .v3 .plan-atc .addtocalendar .atcb-link:focus { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 210px; height: 39px; margin: 0; padding: 0 14px 0 34px; border: 0; border-radius: 12px; font-size: 0; line-height: 0; color: transparent; background: #fff var(--atc-icon) 12px center / 20px 20px no-repeat; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .14), 0 1px 3px rgba(0, 0, 0, .1); transition: box-shadow .15s, background-color .15s; } .v3 .plan-atc .addtocalendar .atcb-link::after { content: "Добавить в календарь"; font-size: var(--fs-sm); font-weight: 600; line-height: 1; color: var(--text); white-space: nowrap; } /* the words of the widget are hidden (font-size: 0), this caption is ours */ .v3 .plan-atc .addtocalendar .atcb-link:hover, .v3 .plan-atc .addtocalendar .atcb-link:focus { background: var(--accent-soft) var(--atc-icon) 12px center / 20px 20px no-repeat; box-shadow: 0 0 0 1px rgba(60, 118, 61, .45), 0 3px 8px -3px rgba(0, 0, 0, .25); } .v3 .plan-atc .addtocalendar .atcb-link:hover::after, .v3 .plan-atc .addtocalendar .atcb-link:focus::after { color: var(--accent-text); } .v3 .plan-card:has(.atcb-link:hover), .v3 .plan-card:has(.atcb-link:focus), .v3 .plan-card:has(.atcb-list:hover) { z-index: 20; } /* the opened list of the calendars is above the next card (the cards are layers of their own because of the blur) */ .v3 .plan-atc .atcb-list { left: auto; right: 0; top: calc(100% + 6px); min-width: 190px; text-align: left; } .v3 .plan-atc .atcb-list { overflow: hidden; border: 0; border-radius: 12px; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .14), 0 10px 24px -8px rgba(0, 0, 0, .3); } .v3 .plan-atc .atcb-item:hover, .v3 .plan-atc .atcb-item.hover { background: var(--accent-soft); } /* the widget paints the chosen line orange (#f0ad4e) with white letters */ .v3 .plan-atc .atcb-item-link, .v3 .plan-atc .atcb-item-link:hover, .v3 .plan-atc .atcb-item-link:active, .v3 .plan-atc .atcb-item-link:focus { color: var(--text); font-size: var(--fs-md); } .v3 .plan-atc .atcb-item:hover .atcb-item-link { color: var(--accent-text); font-weight: 600; } .v3 .plan-card:has(.plan-atc) .plan-top { padding-right: 190px; } /* the title does not run under the icon */ @media (max-width: 560px) { .v3 .plan-main-m { display: block; margin-top: 14px; } .v3 .plan-main-m .btn { width: 100%; justify-content: center; text-align: center; } .v3 .plan-foot .plan-main { display: none; } .v3 .plan-foot:not(:has(.btn:not(.plan-main))) { display: none; } .v3 .plan-foot .btn, .v3 .plan-atc .addtocalendar .atcb-link { width: 100%; margin-left: 0; } .v3 .plan-card:has(.plan-atc) .plan-top { padding-right: 0; } .v3 .plan-atc { position: static; margin-top: 10px; } .v3 .plan-atc .atcb-list { left: 0; right: auto; } } /* on a phone the button is under the text, the card has no room for it in the corner */ .v3 .plan-people { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hairline); font-size: var(--fs-md); } .v3 .plan-people p { margin: 0 0 8px; } /* --- Tables (prices) --- */ .v3 .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .v3 table.costs { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .v3 table.costs td { padding: 9px 14px 9px 0; border-bottom: 1px solid rgba(60, 60, 67, .07); text-align: left; white-space: nowrap; } .v3 table.costs tr:last-child td { border-bottom: 0; } .v3 table.costs td.right { text-align: right; } .v3 table.costs td.strong { font-weight: 600; } .v3 table.costs td.wrap { white-space: normal; } .v3 .cost-hot { color: var(--red); font-weight: 600; } .v3 .cost-warm { color: var(--amber); font-weight: 600; } /* --- News, reports, photos --- */ .v3 .news-item { padding: 18px 0; border-top: 1px solid var(--hairline); } .v3 .news-item:first-of-type { border-top: 0; padding-top: 4px; } .v3 .news-item h3 a { color: var(--text); } .v3 .nobr { white-space: nowrap; } .v3 .prose { font-size: var(--fs-base); line-height: 1.6; overflow-wrap: anywhere; } .v3 .prose img { height: auto; border-radius: 8px; } .v3 .prose::after { content: ""; display: table; clear: both; } .v3 .news-body { margin-top: 10px; } .v3 .news-image { margin-bottom: 8px; } .v3 .news-image.right { float: right; margin-left: 16px; } .v3 .news-image.left { float: left; margin-right: 16px; } .v3 .news-social { margin-top: 12px; } .v3 .news-social > summary { list-style: none; cursor: pointer; display: inline-flex; } .v3 .news-social > summary::-webkit-details-marker { display: none; } .v3 .news-social form { margin-top: 10px; padding: 14px 16px; background: rgba(118, 118, 128, .07); border-radius: var(--r); } .v3 .news-social h4 { margin: 12px 0 6px; font-size: var(--fs-md); } .v3 .news-social h4:first-child { margin-top: 0; } .v3 .event-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; } .v3 .event-two .card { margin: 0; } .v3 .event-two p { margin: 0 0 10px; } /* --- The window of the old forms (a ), see v3/legacy-modal.js --- */ .v3 dialog.legacy-modal { width: min(560px, calc(100% - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--glass-border); border-radius: var(--r-lg); background: rgba(255, 255, 255, .97); color: var(--text); box-shadow: var(--shadow-lg); overflow: auto; } .v3 dialog.legacy-modal::backdrop { background: rgba(29, 29, 31, .25); } /* no blur: a moderator must see the page behind the window (whom to write, what the question is) */ .v3 .legacy-modal .modal-dialog, .v3 .legacy-modal .modal-content { margin: 0; } .v3 .legacy-modal .modal-header { position: relative; padding: 22px 56px 6px 24px; } .v3 .legacy-modal .modal-title { margin: 0; font-size: var(--fs-xl); font-weight: 650; line-height: 1.3; } .v3 .legacy-modal .close { position: absolute; top: 14px; right: 16px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--text-2); font-size: var(--fs-3xl); line-height: 1; cursor: pointer; } .v3 .legacy-modal .close:hover { background: rgba(118, 118, 128, .14); color: var(--text); } .v3 .legacy-modal .modal-body { padding: 8px 24px 6px; font-size: var(--fs-base); } .v3 .legacy-modal .modal-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 24px 22px; } .v3 .legacy-modal .modal-footer #response { margin-right: auto; font-size: var(--fs-md); color: var(--text-2); } .v3 .legacy-modal .form-group { margin: 0 0 12px; } .v3 .legacy-modal label { display: block; margin-bottom: 4px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); } .v3 .legacy-modal input[type=text], .v3 .legacy-modal input[type=email], .v3 .legacy-modal input[type=url], .v3 .legacy-modal input[type=number], .v3 .legacy-modal input[type=date], .v3 .legacy-modal select, .v3 .legacy-modal textarea { width: 100%; min-width: 0; padding: 9px 12px; border: 1px solid rgba(60, 60, 67, .38); border-radius: var(--r-sm); background: rgba(255, 255, 255, .9); color: var(--text); font: inherit; font-size: var(--fs-base); } .v3 .legacy-modal input:focus, .v3 .legacy-modal select:focus, .v3 .legacy-modal textarea:focus { outline: none; border-color: #5cb85c; box-shadow: 0 0 0 3px rgba(92, 184, 92, .22); } .v3 .legacy-modal textarea { min-height: 96px; resize: vertical; } .v3 .legacy-modal input[type=file] { font-size: var(--fs-md); } .v3 .legacy-modal .label-danger, .v3 .legacy-modal .text-danger { color: var(--red); font-size: var(--fs-sm); font-weight: 600; } .v3 .legacy-modal h4 { margin: 0 0 4px; font-size: var(--fs-md); } .v3 .btn-default { color: var(--text); background: rgba(255, 255, 255, .8); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .06); } .v3 .btn-default:hover { background: #fff; color: var(--text); } .v3 .legacy-modal img { max-width: 100%; height: auto; border-radius: 8px; } /* The add-to-calendar widget of the old site has its own blue button; make it a quiet one */ .v3 .addtocalendar { font: inherit; } .v3 .addtocalendar .atcb-link { padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .8); color: var(--text); font-size: var(--fs-sm); font-weight: 600; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .06); } .v3 .addtocalendar .atcb-link:hover { background: #fff; text-decoration: none; } @media (max-width: 760px) { .v3 .event-hero { background-image: linear-gradient(200deg, rgba(var(--accent-rgb), .3) 0%, rgba(var(--accent-rgb), .1) 40%, rgba(var(--accent-rgb), 0) 70%); } .v3 .event-hero.is-cancelled { background-image: linear-gradient(200deg, rgba(196, 41, 31, .34) 0%, rgba(196, 41, 31, .12) 40%, rgba(196, 41, 31, 0) 70%); } .v3 .event-cancelled-label { font-size: 28px; } .v3 .event-art { width: 70%; height: 180px; opacity: .6; } .v3 .event-actions { position: static; margin-bottom: 10px; } .v3 .event-logo { position: static; display: inline-block; margin-top: 14px; } .v3 .event-two { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .v3 .event-info-row { grid-template-columns: minmax(0, 1fr); gap: 0; } .v3 .event-info-row dt { font-size: var(--fs-sm); } .v3 .plan-top { flex-direction: column; } .v3 .news-image.right, .v3 .news-image.left { float: none; display: block; margin: 0 0 10px; } } /* The partner widget fills its box by itself; when it does not load, no empty card is left behind */ .v3 .ad-widget:has(#GoProtectWidget:empty) { display: none; } /* ========================================================================== KLBMatch section: head with the strip of five parts, "where to start" routes, podium, tables with the split bar (points + bonuses), standings cards. ========================================================================== */ /* --- Generic data table (also for the other sections) --- */ .v3 table.t { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .v3 table.t th, .v3 table.t td { padding: 11px 14px; text-align: left; white-space: nowrap; } .v3 table.t th { font-size: var(--fs-sm); font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--hairline); } .v3 table.t td { border-bottom: 1px solid rgba(60, 60, 67, .07); vertical-align: middle; font-size: var(--fs-lg); } .v3 table.t tbody tr:last-child td { border-bottom: 0; } .v3 table.t tbody tr:hover td { background: rgba(92, 184, 92, .09); transition: background .12s; } .v3 table.t th.right, .v3 table.t td.right { text-align: right; } .v3 table.t td.wrap { white-space: normal; min-width: 140px; } /* a short list in a narrow block (the results that are not shown): the cells wrap, so the table fits the block; the date and the button stay in one line */ .v3 table.t.t-fit th, .v3 table.t.t-fit td { white-space: normal; padding: 8px 10px; font-size: var(--fs-md); overflow-wrap: break-word; } .v3 table.t.t-fit td:first-child, .v3 table.t.t-fit td.right { white-space: nowrap; overflow-wrap: normal; } /* on a phone a row is a small card: the date, the race, the name, the result and the button go one under another, not in letter-wide columns */ @media (max-width: 720px) { .v3 table.t.t-fit, .v3 table.t.t-fit tbody, .v3 table.t.t-fit tr, .v3 table.t.t-fit td { display: block; width: 100%; box-sizing: border-box; } .v3 table.t.t-fit tr { padding: 10px 0; border-bottom: 1px solid rgba(60, 60, 67, .1); } .v3 table.t.t-fit tbody tr:last-child { border-bottom: 0; } .v3 table.t.t-fit td { padding: 2px 0; border: 0; white-space: normal; } .v3 table.t.t-fit td.right { text-align: left; padding-top: 8px; } } .v3 table.t td.strong { font-weight: 600; } .v3 table.t td .sub { display: block; font-size: var(--fs-md); color: var(--text-3); margin-top: 1px; } .v3 table.t tr.me td { background: var(--accent-soft); } .v3 .table-flush { margin: 0 -22px; } .v3 .table-flush table.t th:first-child, .v3 .table-flush table.t td:first-child { padding-left: 22px; } .v3 .table-flush table.t th:last-child, .v3 .table-flush table.t td:last-child { padding-right: 22px; } .v3 .female td:nth-child(2) a::after { content: ""; } /* --- Head --- */ .v3 .klb-head { margin-bottom: 20px; } .v3 .klb-head h1 { margin-bottom: 0; } .v3 .klb-nav { margin-top: 16px; } .v3 .klb-nav a { padding: 6px 14px; font-size: var(--fs-md); } .v3 .klb-years { max-height: 60vh; overflow-y: auto; min-width: 150px; } /* --- Numbers strip --- */ .v3 .klb-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 20px; } .v3 .kpi { padding: 16px 18px; } .v3 .kpi b { display: block; font-size: var(--fs-5xl); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; } .v3 .kpi span { font-size: var(--fs-sm); color: var(--text-2); } /* --- "Where to start" routes --- */ .v3 .routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; } .v3 .route { display: grid; gap: 6px; align-content: start; padding: 18px 20px; } .v3 .route h3 { margin: 0; font-size: var(--fs-lg); } .v3 .route p { margin: 0; color: var(--text-2); font-size: var(--fs-md); } .v3 .route .btn { justify-self: start; margin-top: 8px; } .v3 .route-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); margin-bottom: 4px; } .v3 .route.mine { background-image: linear-gradient(120deg, rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), 0) 70%); } .v3 .places p { margin: 0 0 4px; font-size: var(--fs-md); } .v3 .places a { white-space: normal; } /* --- Split bar: dark part is points (speed), light part is bonuses (distance) --- */ .v3 .split-bar { display: flex; height: 8px; min-width: 100px; background: rgba(118, 118, 128, .12); border-radius: 999px; overflow: hidden; } .v3 .split-bar i { background: var(--accent); } .v3 .split-bar u { background: var(--accent-soft); text-decoration: none; box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .35); } .v3 .legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--fs-sm); color: var(--text-2); margin-top: 14px; } .v3 .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; } .v3 .legend .l-clean { background: var(--accent); } .v3 .legend .l-bonus { background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .45); } /* --- Standings cards (page "Участники") --- */ .v3 .standings { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; } .v3 .stand { display: grid; gap: 12px; align-content: start; padding: 18px 20px; color: var(--text); transition: transform .15s, box-shadow .15s; } .v3 .stand:hover { transform: translateY(-1px); text-decoration: none; box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .9); } .v3 .stand-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; } .v3 .stand-title { font-weight: 650; font-size: var(--fs-lg); line-height: 1.3; } .v3 .stand-rows { display: grid; gap: 7px; } .v3 .stand-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; font-size: var(--fs-md); } .v3 .stand-row .pl { font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; } .v3 .stand-row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); } .v3 .stand-row .val { font-weight: 600; font-variant-numeric: tabular-nums; } .v3 .section-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 26px 0 12px; } .v3 .section-title h2 { margin: 0; } /* --- Filter line of the long lists --- */ .v3 .list-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; } .v3 .list-tools input[type=text], .v3 .list-tools input[type=search], .v3 .list-tools select { height: 38px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--hairline); background: rgba(255, 255, 255, .85); color: var(--text); font: inherit; font-size: var(--fs-md); min-width: 0; } .v3 .list-tools input[type=text] { flex: 1 1 220px; max-width: 360px; } .v3 .list-tools .push { margin-left: auto; } .v3 .list-tools-fill input[type=text], .v3 .list-tools-fill select { flex: 1 1 160px; max-width: none; } /* the fields share the whole width of the row, the buttons keep their size */ .v3 .list-tools-fill .btn { flex: none; } .v3 th a.sort { color: inherit; text-decoration: none; } .v3 th a.sort:hover { color: var(--text); } .v3 th a.sort.on { color: var(--accent-text); } @media (max-width: 1100px) { .v3 .klb-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .v3 .klb-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .v3 .routes { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .v3 .table-flush { margin: 0 -14px; } .v3 table.t th, .v3 table.t td { padding: 10px 8px; } .v3 .col-bar { display: none; } .v3 .hide-sm { display: none; } } .v3 .klb-title { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.02em; } .v3 .klb-title a { color: var(--text); } .v3 .klb-title a:hover { color: var(--accent-text); text-decoration: none; } .v3 table.t td.best { background: rgba(223, 240, 216, .42); color: var(--accent-text); font-weight: 650; } /* the best results of a person: a pale green accent (the sum in the head of the person is stronger) */ .v3 table.t tbody tr:hover td.best { background: rgba(223, 240, 216, .7); } .v3 .stack-list { display: grid; gap: 14px; } .v3 .klb-part { padding: 14px 0; border-top: 1px solid var(--hairline); } .v3 .klb-part:first-child { border-top: 0; padding-top: 0; } .v3 .klb-part .places p { margin: 0 0 4px; font-size: var(--fs-md); } .v3 .list-tools select { appearance: none; -webkit-appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } .v3 .list-tools #klbChooser { min-width: 260px; max-width: 100%; } /* KLBMatch: rules, calculator */ .v3 .klb-lead { background: var(--accent-soft, #dff0d8); border-radius: 10px; padding: 10px 14px; margin: 12px 0; } .v3 .klb-rules h4 { margin: 24px 0 6px; font-size: var(--fs-lg); } .v3 .klb-rules ul, .v3 .klb-rules ol { padding-left: 22px; } .v3 .calc-form { display: grid; gap: 12px; margin-top: 14px; } .v3 .calc-field { display: grid; grid-template-columns: 160px 1fr; gap: 10px; align-items: center; font-size: var(--fs-md); } .v3 .calc-field input, .v3 .calc-field select { height: 38px; padding: 0 12px; border: 1px solid var(--hairline); border-radius: 10px; font: inherit; background: transparent; color: inherit; } .v3 .calc-field em { grid-column: 2; color: #a94442; font-style: normal; font-size: var(--fs-xs); } .v3 .calc-result { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--hairline); } .v3 .t .center { text-align: center; } @media (max-width: 560px) { .v3 .calc-field { grid-template-columns: 1fr; } .v3 .calc-field em { grid-column: 1; } } .v3 table.history-t th, .v3 table.history-t td { text-align: center; white-space: normal; min-width: 90px; font-size: var(--fs-base); } .v3 table.history-t td:nth-last-child(-n+2), .v3 table.history-t th:nth-last-child(-n+2) { text-align: left; min-width: 260px; } .v3 table.history-t td:first-child { white-space: nowrap; } .v3 table.history-t td:nth-child(8), .v3 table.history-t td:nth-child(10) { min-width: 190px; text-align: left; } .v3 .calc-field { grid-template-columns: 160px minmax(0, 1fr); } .v3 .calc-field input, .v3 .calc-field select { min-width: 0; width: 100%; box-sizing: border-box; } @media (max-width: 560px) { .v3 .calc-field { grid-template-columns: minmax(0, 1fr); } } .v3 .klb-rules .prose br + br { display: none; } /* KLBMatch: results by regions (generated pages in the old markup) */ .v3 .klb-regions h3, .v3 .klb-regions .glyphicon { display: none; } .v3 .klb-regions table { border-collapse: collapse; width: 100%; font-size: var(--fs-base); margin-bottom: 18px; } .v3 .klb-regions th, .v3 .klb-regions td { padding: 8px 10px; white-space: nowrap; text-align: left; border-bottom: 1px solid rgba(60, 60, 67, .07); vertical-align: middle; } .v3 .klb-regions th { font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .03em; } .v3 .klb-regions .text-center { text-align: center; } .v3 .klb-regions .text-right { text-align: right; font-variant-numeric: tabular-nums; } .v3 .klb-regions .pull-right { float: none; margin-right: 6px; } .v3 .klb-regions tr.warning td { background: rgba(92, 184, 92, .12); font-size: var(--fs-md); } .v3 .klb-regions tr.info td, .v3 .klb-regions tr.info th { background: rgba(60, 60, 67, .05); } .v3 .klb-regions td.success { background: rgba(223, 240, 216, .45); } .v3 .klb-regions .text-success { color: #3c763d; } .v3 .klb-regions .text-danger { color: #a94442; } .v3 .klb-regions td.danger { color: #a94442; } .v3 .klb-regions .progress { display: flex; height: 18px; min-width: 160px; border-radius: 9px; overflow: hidden; background: rgba(60, 60, 67, .06); } .v3 .klb-regions .progress-bar { font-size: var(--fs-xs); line-height: 18px; padding: 0 6px; background: var(--accent, #5cb85c); color: #fff; overflow: hidden; } .v3 .klb-regions .progress-bar-danger { background: #c4a7d4; text-align: right; } .v3 .klb-regions .progress-bar span { color: inherit; } .v3 .klb-regions td:nth-child(2), .v3 .klb-regions th:nth-child(2) { position: sticky; left: 0; background: var(--card-bg, #fff); z-index: 1; } .v3 .list-tools input[type=search] { flex: 1 1 220px; max-width: 360px; } .v3 .list-tools .check { display: inline-flex; gap: 6px; align-items: center; font-size: var(--fs-md); color: var(--text-2, inherit); cursor: pointer; } .v3 .list-tools .check input { width: 16px; height: 16px; accent-color: var(--accent-text); } /* KLBMatch: history as cards */ .v3 .hist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 14px; } .v3 .hist-card { border: 1px solid var(--hairline); border-radius: 14px; padding: 16px 18px; background: rgba(255, 255, 255, .5); } .v3 .hist-card h3 { margin: 0 0 10px; font-size: var(--fs-xl); } .v3 .hist-kpis { display: flex; gap: 22px; margin-bottom: 10px; } .v3 .hist-kpis b { display: block; font-size: var(--fs-3xl); font-variant-numeric: tabular-nums; } .v3 .hist-kpis span { font-size: var(--fs-sm); color: var(--text-3); } .v3 .hist-list { margin: 0; font-size: var(--fs-md); line-height: 1.45; } .v3 .hist-list dt { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--text-3); margin-top: 10px; } .v3 .hist-list dd { margin: 2px 0 0; } .v3 .hist-rules { font-size: var(--fs-sm); color: var(--text-2, inherit); margin: 12px 0 0; } .v3 .hist-docs { font-size: var(--fs-sm); margin: 8px 0 0; } .v3 .calendar-list { grid-template-columns: minmax(0, 1fr); } .v3 .calendar-body .planned, .v3 .calendar-body .chips { flex-wrap: wrap; } .v3 .row.between { flex-wrap: wrap; } @media (max-width: 480px) { .v3 .calendar-item { flex-wrap: wrap; } .v3 .calendar-body { flex: 1 1 calc(100% - 80px); } .v3 .calendar-side { flex: 1 1 100%; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } } .v3 .only-xs { display: none; } @media (max-width: 480px) { .v3 .col-bar-sm, .v3 .col-starts { display: none; } .v3 .only-xs { display: block; } } .v3 .calc-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; margin-top: 20px; align-items: start; } .v3 .calc-grid .calc-card { margin-top: 0; max-width: none; } .v3 .calc-year { padding: 14px 0; border-top: 1px solid var(--hairline); } .v3 .calc-nums { display: flex; gap: 28px; margin-top: 4px; } .v3 .calc-nums b { display: block; font-size: var(--fs-5xl); letter-spacing: -.02em; } .v3 .calc-nums span { font-size: var(--fs-sm); color: var(--text-3); } .v3 .calc-rules { margin: 14px 0 0; padding: 14px 0 0 18px; border-top: 1px solid var(--hairline); color: var(--text-2); display: grid; gap: 6px; } @media (max-width: 860px) { .v3 .calc-grid { grid-template-columns: minmax(0, 1fr); } } /* KLBMatch: application and payment */ .v3 .steps { display: flex; gap: 8px; list-style: none; padding: 0; margin: 20px 0 0; font-size: var(--fs-md); color: var(--text-3); flex-wrap: wrap; } .v3 .steps li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 999px; background: rgba(118, 118, 128, .1); } .v3 .steps b { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(118, 118, 128, .2); font-size: var(--fs-xs); } .v3 .steps li.on { background: #dff0d8; color: #3c763d; font-weight: 600; } .v3 .steps li.on b, .v3 .steps li.done b { background: #5cb85c; color: #fff; } .v3 .steps li.done { color: #3c763d; } .v3 .apply-card { max-width: 780px; } .v3 .apply-card h3 { margin: 22px 0 8px; font-size: var(--fs-lg); } .v3 .apply-facts { display: flex; gap: 32px; margin: 14px 0; } .v3 .apply-facts b { display: block; font-size: var(--fs-5xl); letter-spacing: -.02em; } .v3 .apply-facts span { font-size: var(--fs-sm); color: var(--text-3); } .v3 .apply-list { padding-left: 20px; display: grid; gap: 10px; font-size: var(--fs-base); line-height: 1.55; margin: 0; } .v3 .apply-todo { list-style: none; padding: 0; display: grid; gap: 14px; margin: 12px 0 0; } .v3 .apply-form { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--hairline); display: grid; gap: 16px; } .v3 .apply-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; } .v3 .apply-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent-text); flex: none; } .v3 .apply-field { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; font-size: var(--fs-md); } .v3 .apply-field legend { padding: 0; margin-bottom: 6px; } .v3 .apply-field select { height: 38px; padding: 0 12px; border: 1px solid var(--hairline); border-radius: 10px; font: inherit; background: transparent; color: inherit; max-width: 320px; } .v3 .apply-field .radio { display: inline-flex; gap: 6px; align-items: center; margin-right: 18px; cursor: pointer; } .v3 .apply-form .btn[disabled] { opacity: .5; cursor: not-allowed; } .v3 .pay-options { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; } /* Results of a race */ .v3 .race-head { position: relative; padding: 22px 26px; } .v3 .race-head h1 { margin: 2px 0 0; letter-spacing: -.02em; } .v3 .race-tabs { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; } .v3 .race-tabs .segmented { flex-wrap: wrap; max-width: 100%; } .v3 .drop-more { position: relative; } .v3 .drop-more summary { list-style: none; cursor: pointer; } .v3 .drop-more summary::-webkit-details-marker { display: none; } .v3 .drop-more-list { position: absolute; z-index: 5; top: 38px; left: 0; min-width: 280px; display: grid; padding: 6px; background: #fff; border: 1px solid var(--hairline); border-radius: 12px; box-shadow: var(--shadow-lg); } .v3 .drop-more-list a { padding: 8px 10px; border-radius: 8px; color: var(--text); font-size: var(--fs-md); } .v3 .drop-more-list a:hover { background: rgba(118, 118, 128, .1); text-decoration: none; } .v3 .race-facts-grid { display: flex; flex-wrap: wrap; gap: 14px 36px; } .v3 .fact b { display: block; font-size: var(--fs-2xl); letter-spacing: -.01em; } .v3 .fact span { font-size: var(--fs-sm); color: var(--text-3); } .v3 .race-notes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .v3 .race-notes:empty { display: none; } .v3 .race-facts p { margin: 12px 0 0; } .v3 .nowrap { white-space: nowrap; } .v3 .results-t td .sub { display: block; font-size: var(--fs-md); color: var(--text-3); white-space: normal; } .v3 .results-t td.wrap { min-width: 200px; } .v3 .results-t td .sub.only-xs { display: none; } .v3 .race-notes:not(:has(*)) { display: none; } @media (max-width: 480px) { .v3 .results-t td .sub.only-xs { display: block; } .v3 .results-t .col-act { display: none; } } .v3 .race-facts:not(:has(.fact, .badge, p)) { display: none; } /* Event page: the card of results */ .v3 .rp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 14px; margin-top: 14px; } .v3 .rp-race { border: 1px solid var(--hairline); border-radius: 14px; padding: 14px 16px; background: rgba(255, 255, 255, .5); display: grid; gap: 6px; align-content: start; } .v3 .rp-title { font-size: var(--fs-xl); font-weight: 650; color: var(--text); } .v3 .rp-top { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 4px; font-size: var(--fs-md); } .v3 .rp-top li { display: flex; gap: 10px; align-items: baseline; } .v3 .rp-place { width: 18px; color: var(--text-3); } .v3 .rp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Cabinet and profile of a user */ .v3 .cabinet { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 22px; align-items: start; } .v3 .cabinet-public { grid-template-columns: minmax(0, 1fr); } .v3 .cabinet-side { position: sticky; top: 84px; } .v3 .side-card { padding: 12px; display: grid; gap: 14px; } .v3 .side-nav { display: grid; gap: 2px; } .v3 .side-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--text-2); font-size: var(--fs-base); } .v3 .side-nav a:hover { background: rgba(118, 118, 128, .1); text-decoration: none; } .v3 .side-nav a.active { background: #dff0d8; color: #3c763d; font-weight: 600; } .v3 .side-nav .label { flex: 1; } .v3 .side-nav .count { font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; } .v3 .side-nav .count.alert { background: linear-gradient(135deg, #4cc468, #2e9e4d); color: #fff; } .v3 .side-logout { justify-self: start; } .v3 .cabinet-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; min-width: 0; } .v3 .profile-card { padding: 0; overflow: visible; position: relative; z-index: 3; } .v3 .profile-banner { border-radius: var(--r-lg) var(--r-lg) 0 0; } .v3 .profile-banner { height: 120px; background: linear-gradient(135deg, #dff0d8, #bfe3b4 55%, #a3d6a0); } .v3 .profile-card-body { padding: 0 26px 24px; display: grid; gap: 14px; } .v3 .profile-card-body > .avatar-img, .v3 .profile-card-body > .avatar-ph { margin-top: -56px; } .v3 .avatar-img, .v3 .avatar-ph { border-radius: 50%; object-fit: cover; flex: none; } .v3 .avatar-ph { display: inline-flex; align-items: center; justify-content: center; background: #dff0d8; color: #3c763d; font-weight: 700; } .v3 .avatar-img.ring, .v3 .avatar-ph.ring { border: 4px solid #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); } .v3 .profile-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-start; } .v3 .profile-card-head h1 { margin: 0 0 2px; font-size: var(--fs-5xl); letter-spacing: -.02em; } .v3 .club-chip { display: inline-flex; align-items: center; margin-top: 8px; padding: 4px 12px; border-radius: 999px; background: #dff0d8; color: #3c763d; font-size: var(--fs-sm); font-weight: 600; } .v3 .club-chip.empty { background: rgba(118, 118, 128, .12); color: var(--text-2); font-weight: 500; } .v3 .club-chip:hover { text-decoration: none; } .v3 .counters { display: flex; flex-wrap: wrap; gap: 8px 30px; padding-top: 14px; border-top: 1px solid var(--hairline); font-size: var(--fs-md); color: var(--text-3); } .v3 .counters b { font-size: var(--fs-2xl); letter-spacing: -.01em; color: var(--text); margin-right: 4px; } .v3 .cabinet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; align-items: start; } .v3 .cabinet-col { min-width: 0; } .v3 .cabinet-grid.equal { align-items: stretch; } /* the columns are of one height whatever is inside: the last card of the shorter one grows */ .v3 .cabinet-grid.equal .cabinet-col { display: flex; flex-direction: column; } .v3 .cabinet-grid.equal .cabinet-col > .glass:last-child { flex: 1 1 auto; } .v3 .alert-card { padding: 14px 18px; border-radius: 14px; background: #fff4d6; border: 1px solid rgba(138, 100, 32, .3); } .v3 .list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; } .v3 .list li { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; } .v3 .list .grow { flex: 1; min-width: 0; } .v3 .legacy-block h4 { margin: 0 0 8px; font-size: var(--fs-lg); } .v3 .legacy-block p { margin: 0 0 8px; font-size: var(--fs-md); line-height: 1.5; } .v3 .legacy-block .btn-xs, .v3 .legacy-block .btn-sm, .v3 .legacy-block button { padding: 3px 10px; border-radius: 999px; border: 0; background: #dff0d8; color: #3c763d; font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; } .v3 .legacy-block .label { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #dff0d8; color: #3c763d; font-size: var(--fs-xs); font-weight: 600; } .v3 .legacy-block ul { padding-left: 20px; margin: 0 0 8px; } .v3 .for-admin-card summary, .v3 details.glass summary { cursor: pointer; font-weight: 600; } /* The block «Для администратора»: the field of the id and under it the red button, both over the width of the column; the long caption of the button goes to several lines; the whole block is in the same column as the cards of the settings */ .v3 .for-admin-card > * { max-width: 520px; margin-left: auto; margin-right: auto; } .v3 #frmMergeUser { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .v3 #frmMergeUser input[type=number] { width: 100%; max-width: none; min-width: 0; box-sizing: border-box; } .v3 #frmMergeUser .merge-btn { width: 100%; box-sizing: border-box; white-space: normal; text-align: center; height: auto; line-height: 1.35; padding-block: 9px; } .v3 .adm-h { font-size: var(--fs-base); margin: 18px 0 6px; } .v3 .hide-lg { display: none; } @media (max-width: 1000px) { .v3 .cabinet { grid-template-columns: minmax(0, 1fr); } .v3 .cabinet-side { position: static; } .v3 .side-nav { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; } .v3 .cabinet-grid { grid-template-columns: minmax(0, 1fr); } .v3 .hide-lg { display: inline; } } @media (max-width: 480px) { .v3 .profile-card-body { padding: 0 16px 18px; } .v3 .profile-card-head h1 { font-size: var(--fs-4xl); } } .v3 .cabinet-side { min-width: 0; } .v3 .side-card { grid-template-columns: minmax(0, 1fr); } .v3 details.glass { overflow-x: auto; } .v3 details.glass table.t { display: block; max-width: 100%; overflow-x: auto; } .v3 #frmUnclaim .btn { white-space: normal; text-align: left; height: auto; } .v3 #frmUnclaim { display: flex; justify-content: flex-end; } /* the button is at the right edge */ .v3 #frmUnclaim .unclaim-btn { display: inline-flex; align-items: center; gap: 8px; } .v3 #frmUnclaim .unclaim-btn svg { flex: none; } .v3 .results-t .check { display: inline-flex; gap: 6px; align-items: center; font-size: var(--fs-sm); cursor: pointer; } /* Settings of a user */ .v3 .collapse { display: none; } .v3 .set-form { display: grid; gap: 22px; margin-top: 14px; } .v3 .set-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; } .v3 .set-form legend { padding: 0 0 6px; margin-bottom: 4px; font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); border-bottom: 1px solid var(--hairline); width: 100%; } .v3 .frow { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 6px 16px; align-items: start; } .v3 .frow.collapse { display: none; } .v3 .frow-label { padding-top: 9px; font-size: var(--fs-md); color: var(--text-2); } .v3 .frow-input { display: grid; gap: 6px; justify-items: start; min-width: 0; } .v3 .frow-input input[type=text], .v3 .frow-input input[type=email], .v3 .frow-input input[type=tel], .v3 .frow-input input[type=date], .v3 .frow-input input[type=number], .v3 .frow-input input:not([type]), .v3 .frow-input select, .v3 .set-add input[type=text], .v3 .set-add select, .v3 .for-admin-card input[type=number] { width: 100%; max-width: 420px; height: 38px; padding: 0 12px; border: 1px solid var(--hairline); border-radius: 10px; font: inherit; background: transparent; color: inherit; box-sizing: border-box; } .v3 .frow-input input[type=checkbox] { width: 18px; height: 18px; margin-top: 10px; accent-color: var(--accent-text); } .v3 .frow-input input[type=file] { font: inherit; max-width: 100%; } .v3 .avatar-edit { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .v3 .avatar-edit .frow { flex: 1 1 280px; } .v3 .set-add td { padding-top: 12px; vertical-align: top; } .v3 .set-add input[type=text] { min-width: 120px; } @media (max-width: 700px) { .v3 .frow { grid-template-columns: minmax(0, 1fr); } .v3 .frow-label { padding-top: 0; } } .v3 .frow-input input[type=file] { width: 100%; box-sizing: border-box; } .v3 .avatar-edit .frow { min-width: 0; } /* The editor of the avatar */ .v3 .avatar-upload { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; } /* The buttons «Сменить фото» and «Удалить фото» are in one line, the hint and the message are under them, all to the right of the round photo (also on a phone) */ .v3 .avatar-upload .stack { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; flex: 1 1 260px; } .v3 .avatar-upload .stack > .small, .v3 .avatar-upload .stack > .badge { flex: 1 1 100%; } .v3 .avatar-upload .stack > .small { line-height: 1.35; } .v3 .avatar-upload .stack > .small:empty { display: none; } @media (max-width: 720px) { .v3 .avatar-upload { flex-wrap: nowrap; align-items: center; gap: 14px; } .v3 .avatar-upload [data-avatar-preview] { flex: none; } .v3 .avatar-upload .stack { flex: 1 1 0; gap: 6px 8px; } .v3 .avatar-upload .stack > .small { font-size: var(--fs-xs, 12px); } } .v3 .avatar-upload label.btn { cursor: pointer; } .v3 .avatar-upload [hidden] { display: none !important; } dialog.cropper-dialog { border: 0; padding: 0; background: transparent; width: min(560px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow: visible; color: inherit; } dialog.cropper-dialog::backdrop { background: rgba(20, 22, 18, .45); backdrop-filter: blur(4px); } .cropper { padding: 22px; border-radius: 22px; background: rgba(255, 255, 255, .97); box-shadow: 0 18px 60px rgba(0, 0, 0, .3); max-height: calc(100vh - 24px); overflow: auto; } .cropper, .cropper h2 { color: #1d1d1f; } .cropper h2 { margin: 0 0 4px; font-size: var(--fs-2xl); } .cropper p { margin: 0; } .cropper-frame { position: relative; width: 100%; margin-top: 14px; overflow: hidden; border-radius: 14px; background: #f2f3ee; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); cursor: grab; touch-action: none; user-select: none; aspect-ratio: 1; } .cropper-frame:active { cursor: grabbing; } .cropper-frame.round { width: min(360px, 100%); margin-inline: auto; } .cropper-frame img { position: absolute; top: 0; left: 0; max-width: none; pointer-events: none; transform-origin: 0 0; } .cropper-mask { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 9999px rgba(20, 22, 18, .55); outline: 2px solid rgba(255, 255, 255, .9); pointer-events: none; } .cropper-zoom { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-weight: 600; } .cropper-zoom input { flex: 1; accent-color: #5cb85c; } .cropper-step { display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; font: inherit; font-size: var(--fs-2xl); line-height: 1; color: #1d1d1f; background: rgba(118, 118, 128, .12); cursor: pointer; } .cropper-step:hover:not(:disabled) { background: #dff0d8; color: #3c763d; } .cropper-step:disabled { opacity: .35; cursor: default; } .cropper-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; } /* Settings: compact cards, labels above the fields, switches */ .v3 .settings-head { margin-bottom: 14px; } .v3 .set-form { display: grid; gap: 0; margin: 0; } .v3 .set-form .card h2 { font-size: var(--fs-xl); margin: 0 0 4px; } .v3 .set-form .card > p.small { margin: 0 0 12px; } .v3 .set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; align-items: start; margin-bottom: 12px; } .v3 .set-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .v3 .fld { display: grid; gap: 6px; align-content: start; min-width: 0; margin-bottom: 12px; } .v3 .set-grid .fld { margin-bottom: 0; } .v3 .fld.collapse { display: none; } .v3 .fld > label { font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); } .v3 .fld input[type=text], .v3 .fld input[type=email], .v3 .fld input[type=tel], .v3 .fld input[type=date], .v3 .fld input[type=number], .v3 .fld input[type=time], .v3 .fld input[type=url], .v3 .fld input[type=password], .v3 .fld input:not([type]), .v3 .fld select { width: 100%; height: 40px; padding: 0 12px; border: 1px solid rgba(60, 60, 67, .16); border-radius: 10px; font: inherit; background: rgba(255, 255, 255, .85); color: inherit; box-sizing: border-box; } .v3 .fld input:not([type=checkbox]):not([type=radio]):not([type=file]):focus, .v3 .fld select:focus { outline: none; border-color: #5cb85c; box-shadow: 0 0 0 3px rgba(92, 184, 92, .25); } .v3 .switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; cursor: pointer; border-top: 1px solid var(--hairline); } .v3 .switch:first-of-type { border-top: 0; } .v3 .switch-title { display: block; font-weight: 500; } .v3 .switch-hint { display: block; } .v3 .switch input { appearance: none; -webkit-appearance: none; flex: none; width: 42px; height: 26px; border-radius: 999px; background: rgba(120, 120, 128, .25); position: relative; cursor: pointer; transition: background .2s; margin: 0; } .v3 .switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); transition: transform .2s; } .v3 .switch input:checked { background: #5cb85c; } .v3 .switch input:checked::after { transform: translateX(16px); } /* A switch in a line with other switches (the page "5 вёрст"): no border and no space between the text and the switch */ .v3 .switch.switch-inline { display: inline-flex; justify-content: flex-start; flex-direction: row-reverse; gap: 10px; padding: 0; border-top: 0; font-size: var(--fs-md); } .v3 .vl-switches { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; margin-top: 14px; } /* The button "Остановить" is red */ .v3 .btn.btn-stop { background: #d93025; color: #fff; box-shadow: none; } .v3 .btn.btn-stop:hover { background: #b3261e; color: #fff; } .v3 .btn.btn-stop:disabled { background: #d93025; color: #fff; opacity: .6; } .v3 .save-bar { position: sticky; bottom: 32px; z-index: 3; display: flex; justify-content: flex-end; margin-top: 18px; padding-right: 32px; } .v3 .save-bar .btn { box-shadow: 0 6px 20px rgba(0, 0, 0, .18); padding-inline: 28px; } @media (max-width: 700px) { .v3 .set-grid, .v3 .set-grid.cols-3 { grid-template-columns: minmax(0, 1fr); } } /* The page of the settings on a computer: the fields and the switches are one under another in a column of a comfortable width, not spread over the whole card */ /* the column is in the middle of the card, the title and the hint of the card are on the same left edge as the fields */ .v3 #frmProfile .card > *, .v3 #frmUiSettings .card > *, .v3 .names-card > * { max-width: 520px; margin-left: auto; margin-right: auto; } .v3 .names-card > .names-find { margin-top: 14px; margin-bottom: 0; } .v3 #frmProfile .set-grid, .v3 #frmProfile .set-grid.cols-3 { grid-template-columns: minmax(0, 1fr); } /* Home page */ .v3 .home-hero { margin: 4px 0 22px; padding: 38px 34px 34px; border-radius: 28px; background: linear-gradient(135deg, rgba(70,148,76,.66), rgba(88,166,92,.58) 60%, rgba(110,184,108,.5)), url('hero-run.webp?2') center 40% / cover no-repeat, #cfe9c6; box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,.08)); position: relative; z-index: 5; isolation: isolate; } .v3 .home-hero::after { content: ""; position: absolute; z-index: 0; inset: 0; border-radius: inherit; background: radial-gradient(circle at 92% 0%, rgba(255,255,255,.6), transparent 42%); pointer-events: none; } .v3 .home-hero-text { position: relative; z-index: 1; max-width: 760px; } .v3 .hero-eyebrow { display: inline-block; font-size: var(--fs-sm); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #3c763d; margin-bottom: 8px; } .v3 .home-hero h1 { margin: 0 0 12px; font-size: clamp(28px, 4.2vw, 44px); line-height: 1.1; letter-spacing: -.025em; } .v3 .home-hero .lead { margin: 0 0 20px; font-size: var(--fs-lg); line-height: 1.55; color: var(--text-2); max-width: 640px; } .v3 .home-search { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; } .v3 .home-search input { flex: 1 1 160px; min-width: 0; height: 46px; padding: 0 16px; border: 1px solid rgba(60,60,67,.16); border-radius: 14px; font: inherit; font-size: var(--fs-lg); background: rgba(255,255,255,.9); color: inherit; box-sizing: border-box; } .v3 .home-search input:focus { outline: none; border-color: #5cb85c; box-shadow: 0 0 0 3px rgba(92,184,92,.28); } .v3 .home-search .btn { height: 46px; padding: 0 24px; } .v3 .hero-actions { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; } .v3 .hero-link { font-weight: 600; color: #3c763d; } .v3 .home-stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 24px; max-width: 1100px; margin: 64px auto 0; text-align: center; } .v3 .home-stat { display: grid; gap: 4px; padding: 6px 8px; color: #fff; } .v3 .home-stat b { font-size: 48px; line-height: 1.05; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #fff; } .v3 .home-stat span { font-size: var(--fs-md); color: rgba(255, 255, 255, .88); line-height: 1.3; } @media (max-width: 560px) { .v3 .home-stats { margin-top: 36px; } .v3 .home-stat b { font-size: 36px; } } .v3 .home-section { margin-bottom: 28px; min-width: 0; } .v3 .home-section h2 { margin: 0 0 14px; font-size: var(--fs-3xl); letter-spacing: -.015em; } .v3 .home-section-head { align-items: baseline; margin-bottom: 12px; } .v3 .home-section-head h2 { margin: 0; } .v3 .home-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 12px; } .v3 .home-card { display: grid; gap: 6px; align-content: start; padding: 16px 18px; color: var(--text); } .v3 .home-card:hover, .v3 .home-reg:hover { text-decoration: none; transform: translateY(-1px); } .v3 .home-card b { font-size: var(--fs-lg); line-height: 1.3; } .v3 .home-card-tags { display: flex; flex-wrap: wrap; gap: 6px; } .v3 .home-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; } .v3 .home-regs { display: grid; gap: 10px; } .v3 .home-reg { display: grid; gap: 4px; padding: 14px 16px; color: var(--text); } .v3 .home-org { padding: 18px 20px; } .v3 .home-org h3 { margin: 0 0 6px; font-size: var(--fs-xl); } .v3 .home-news { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; } .v3 .home-news-item { padding: 16px 18px; display: grid; gap: 6px; align-content: start; } .v3 .home-news-item h3 { margin: 0; font-size: var(--fs-xl); line-height: 1.3; } .v3 .home-news-item h3 a { color: var(--text); } .v3 .home-news-img img { width: 100%; height: 150px; object-fit: cover; border-radius: 12px; display: block; } .v3 .home-news-text { margin: 0; font-size: var(--fs-md); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .v3 .home-reviews { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: var(--fs-base); } .v3 .home-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 14px; } .v3 .home-feature { display: grid; gap: 4px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--hairline); color: var(--text); background: rgba(255,255,255,.5); align-content: start; } .v3 .home-feature:hover { text-decoration: none; border-color: #5cb85c; } .v3 .home-feature b { font-size: var(--fs-lg); } .v3 .home-cta { display: flex; flex-wrap: wrap; gap: 18px 30px; align-items: center; justify-content: space-between; padding: 26px 30px; margin-bottom: 10px; } .v3 .home-cta h2 { margin: 0 0 4px; font-size: var(--fs-3xl); } .v3 .home-cta p { margin: 0; } @media (max-width: 900px) { .v3 .home-two { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { .v3 .home-hero { padding: 26px 18px; border-radius: 22px; } .v3 .home-search .btn { width: 100%; } .v3 .home-cta { padding: 20px; } } @media (min-width: 900px) { .v3 .home-section > .calendar-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* In two columns the card is narrow: the side block (rating, buttons) goes under the title, not beside it */ @media (min-width: 900px) { .v3 .home-section > .calendar-list { align-items: start; } .v3 .home-section .calendar-item { position: relative; flex-wrap: wrap; } .v3 .home-section .calendar-body { flex: 1 1 calc(100% - 104px); padding-right: 56px; } .v3 .home-section .calendar-side { flex: 1 1 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 14px; text-align: right; margin-top: -4px; } .v3 .home-section .calendar-side .rating { margin-top: 0; } .v3 .home-section .calendar-side .admin { position: absolute; top: 10px; right: 12px; margin: 0; } .v3 .home-section .calendar-side .calendar-arrow { display: none; } } /* Home page: the centred head and the one search line with suggestions */ .v3 .home-hero { text-align: center; } .v3 .home-hero-text { margin-inline: auto; display: grid; justify-items: center; } .v3 .home-hero .lead { margin-inline: auto; } .v3 .hero-actions { justify-content: center; } .v3 .home-search { flex-wrap: nowrap; width: min(640px, 100%); margin-inline: auto; } .v3 .home-search-box { position: relative; flex: 1 1 auto; min-width: 0; text-align: left; } .v3 .home-search-box input[type=search] { width: 100%; padding-left: 46px; -webkit-appearance: none; appearance: none; } .v3 .home-search-icon { position: absolute; left: 16px; top: 13px; color: var(--text-3); pointer-events: none; } .v3 .home-suggest { position: absolute; z-index: 20; top: 52px; left: 0; right: 0; background: #fff; border: 1px solid var(--hairline); border-radius: 16px; box-shadow: 0 14px 40px rgba(0, 0, 0, .18); overflow: hidden; } .v3 .home-suggest[hidden] { display: none; } .v3 .home-suggest-item { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; padding: 11px 16px; color: var(--text); border-bottom: 1px solid rgba(60, 60, 67, .07); } .v3 .home-suggest-item span { font-size: var(--fs-sm); color: var(--text-3); text-align: right; } .v3 .home-suggest-item:hover, .v3 .home-suggest-item.on { background: #eef7ea; text-decoration: none; } .v3 .home-suggest-item mark { background: #dff0d8; color: #3c763d; border-radius: 3px; padding: 0 1px; } .v3 .home-suggest-all { display: block; padding: 11px 16px; font-weight: 600; color: #3c763d; background: rgba(118, 118, 128, .05); } .v3 .home-suggest-empty { padding: 14px 16px; color: var(--text-3); font-size: var(--fs-md); } @media (max-width: 560px) { .v3 .home-search { flex-wrap: wrap; } .v3 .home-search-box { flex: 1 1 100%; } .v3 .home-search .btn { width: 100%; } .v3 .home-suggest-item { flex-direction: column; gap: 2px; } .v3 .home-suggest-item span { text-align: left; } } /* News: big cards, the carousel on the home page, the grid on the page of all news */ .v3 .news-card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; height: 100%; padding: 0; } .v3 .news-card-img { display: block; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #dff0d8, #bfe3b4 60%, #a3d6a0); overflow: hidden; } .v3 .news-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; } .v3 .news-card:hover .news-card-img img { transform: scale(1.03); } .v3 .news-card-img.no-img { display: grid; place-items: center; } .v3 .news-card-date { display: grid; justify-items: center; line-height: 1.1; color: #3c763d; font-size: var(--fs-md); font-weight: 600; text-transform: capitalize; } .v3 .news-card-date b { font-size: 54px; letter-spacing: -.03em; font-weight: 700; } .v3 .news-card-body { padding: 16px 18px 16px; display: grid; gap: 7px; align-content: start; } .v3 .news-card-body h3 { margin: 0; font-size: var(--fs-2xl); line-height: 1.28; letter-spacing: -.01em; } .v3 .news-card-body h3 a { color: var(--text); } .v3 .news-card-text { margin: 0; font-size: var(--fs-base); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .v3 .news-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; } .v3 .news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 18px; margin-top: 20px; } .v3 .carousel { position: relative; } .v3 .carousel-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 18px) / 3); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 14px; overscroll-behavior-x: contain; outline: none; } .v3 .carousel-track::-webkit-scrollbar { display: none; } .v3 .carousel-track:focus-visible { box-shadow: 0 0 0 3px rgba(92, 184, 92, .35); border-radius: 18px; } .v3 .carousel-item { scroll-snap-align: start; min-width: 0; } .v3 .carousel-btn { position: absolute; top: calc(50% - 26px); z-index: 4; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .96); color: #1d1d1f; box-shadow: 0 6px 22px rgba(0, 0, 0, .22); display: grid; place-items: center; cursor: pointer; } .v3 .carousel-btn[hidden] { display: none; } .v3 .carousel-btn:hover { background: #dff0d8; color: #3c763d; } .v3 .carousel-btn.prev { left: -14px; } .v3 .carousel-btn.next { right: -14px; } .v3 .news-all { height: 100%; min-height: 260px; display: grid; gap: 10px; place-content: center; justify-items: center; text-align: center; padding: 24px; color: var(--text); } .v3 .news-all:hover { text-decoration: none; } .v3 .news-all b { font-size: var(--fs-3xl); letter-spacing: -.015em; } .v3 .home-news-section { margin-top: 4px; } .v3 .home-stats + .home-news-section { margin-top: 8px; } @media (max-width: 900px) { .v3 .carousel-track { grid-auto-columns: calc((100% - 18px) / 2); } } @media (max-width: 600px) { .v3 .carousel-track { grid-auto-columns: 84%; } .v3 .carousel-btn { display: none; } } /* Home: the KLBMatch in two columns, registrations, the organisers' strip */ .v3 .klb-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; } .v3 .klb-col { padding: 18px 20px 10px; min-width: 0; } .v3 .klb-col h3 { margin: 0 0 6px; font-size: var(--fs-xl); } .v3 .klb-col h3 a { color: var(--text); } .v3 .klb-col .table-flush { margin: 0 -20px; } .v3 .home-regs { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); } .v3 .home-org-wide { display: flex; flex-wrap: wrap; gap: 16px 30px; align-items: center; justify-content: space-between; padding: 24px 30px; margin: 4px 0 28px; background: linear-gradient(135deg, rgba(223,240,216,.7), rgba(255,255,255,.6)); } .v3 .home-org-wide h2 { margin: 0 0 4px; font-size: var(--fs-3xl); } .v3 .home-org-wide p { margin: 0; max-width: 560px; } @media (max-width: 900px) { .v3 .klb-cols { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { .v3 .home-org-wide { padding: 20px; } } /* Home: the appearance on scroll and the button "up" */ .v3 .reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0ms); will-change: opacity, transform; } .v3 .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .v3 .reveal { opacity: 1; transform: none; transition: none; } } .to-top { position: fixed; right: var(--to-top-right, 22px); bottom: 22px; z-index: 40; width: 48px; height: 48px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: #2e7d32; color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none; transition: opacity .25s, transform .25s, background .2s; } .to-top.show { opacity: 1; transform: none; pointer-events: auto; } .to-top:hover { background: #256a29; } .to-top:focus-visible { outline: 3px solid rgba(46, 125, 50, .45); outline-offset: 3px; } @media (max-width: 560px) { .to-top { right: 14px; bottom: 14px; width: 44px; height: 44px; } } /* Home: the categories of the KLBMatch as coloured bands (the colours are the neighbours of the green of the site) */ .v3 .klb-cat { --c: #4fb04f; --c-bg: #e6f4e1; --c-ink: #2f6b30; margin-top: 16px; } .v3 .klb-cat-2 { --c: #1fa99b; --c-bg: #dff3f0; --c-ink: #13675f; } .v3 .klb-cat-3 { --c: #9bbd2e; --c-bg: #f0f5d9; --c-ink: #5c7013; } .v3 .klb-cat-p { --c: #4b8fd6; --c-bg: #e2eefa; --c-ink: #254f80; margin-top: 8px; } .v3 .klb-band { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 -20px; padding: 10px 20px 10px 17px; border-left: 4px solid var(--c); background: linear-gradient(90deg, var(--c-bg), rgba(255, 255, 255, 0) 92%); } .v3 .klb-band-name { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink); } .v3 .klb-band-name::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 9px; border-radius: 50%; background: var(--c); vertical-align: 1px; } .v3 .klb-band-more { font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); white-space: nowrap; opacity: .85; } .v3 .klb-band a:hover { text-decoration: none; opacity: 1; } .v3 .klb-cat .rank { display: inline-grid; place-items: center; min-width: 26px; height: 26px; border-radius: 50%; font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-3); } .v3 .klb-cat tbody tr:first-child td:last-child { color: var(--c-ink); font-weight: 700; } .v3 .klb-cat th { color: var(--c-ink); } .v3 .medal { display: block; margin-inline: auto; } .v3 .klb-cat td:first-child { text-align: center; } /* Login: the long text of the button in the header on wide screens, the short one on narrow */ .v3 .btn-short { display: none; } @media (max-width: 1180px) { .v3 .btn-long { display: none; } .v3 .btn-short { display: inline; } } .v3 .home-suggest-group { padding: 10px 16px 4px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); } .v3 .home-suggest-empty a { color: #3c763d; } .v3 .drop-search { padding: 6px 10px 8px; } .v3 .drop-search input { width: 100%; height: 36px; padding: 0 12px; border: 1px solid var(--hairline); border-radius: 10px; font: inherit; font-size: var(--fs-md); background: #fff; color: inherit; box-sizing: border-box; } /* KLBMatch standings: the top three stay in the common table */ .v3 table.t tr.top3 td:first-child { font-weight: 700; } .v3 table.t tr.top3-1 td { background: rgba(255, 200, 40, .10); } .v3 table.t tr.top3-2 td { background: rgba(160, 170, 185, .12); } .v3 table.t tr.top3-3 td { background: rgba(205, 127, 50, .10); } /* Results table of a runner: the narrow columns wrap instead of making the table wider than the screen */ .v3 table.t td.cell-compact { white-space: normal; max-width: 230px; font-size: var(--fs-base); } .v3 table.t td.cell-marks { white-space: nowrap; font-size: var(--fs-md); } .v3 td.cell-marks .check { display: flex; } .v3 table.t td.cell-review { white-space: nowrap; font-size: var(--fs-md); line-height: 1.3; } .v3 .side-nav .ico { flex: none; opacity: .75; } .v3 .side-nav a.active .ico { opacity: 1; } /* The cabinet: the column is a bit wider, the main part gets the room */ /* The admin item of the cabinet menu: red, under a divider; the click opens a window (_user_admin_dialog.html) */ .v3 .side-sep { border: 0; border-top: 1px solid var(--hairline); margin: 0; } .v3 .side-admin { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; font-size: var(--fs-sm); font-weight: 600; min-width: 0; box-sizing: border-box; color: #a3241c; background: #fdecea; border: 1px solid rgba(215, 58, 48, .4); } .v3 .side-admin:hover { background: #fbdcd8; text-decoration: none; } .v3 .side-admin .label { flex: 1; min-width: 0; line-height: 1.25; } .v3 .side-admin .ico { flex: none; } .v3 dialog.admin-dialog { width: min(720px, calc(100% - 32px)); } .v3 dialog.admin-dialog .modal-title { color: #a3241c; } /* Page of a runner: the card for admins (the user, the runner and the KLB person of one account) and the chips with the links to other sites */ .v3 .for-admin-note { color: #a3241c; } .v3 .chips-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .v3 .chips-links:empty { display: none; } .v3 .chip-link { padding: 3px 11px; border-radius: 999px; background: rgba(118, 118, 128, .12); color: var(--text-2); font-size: var(--fs-sm); font-weight: 500; } .v3 .chip-link:hover { background: rgba(118, 118, 128, .2); text-decoration: none; } /* Page of a runner: the info card on the left (the data of the old page, laid out in two columns) and the statistics on the right */ .v3 .runner-top { gap: 0 20px; } .v3 .runner-info { padding: 0; overflow: visible; position: relative; } .v3 .club-info { z-index: 4; } /* the menus «Ещё» and «Действия с клубом» open over the cards below, not under them (the cards have the blur of the glass: each of them is a layer of its own) */ .v3 .runner-info .profile-banner { border-radius: var(--r-lg) var(--r-lg) 0 0; } /* The menu "Действия" of a runner: in the top right corner of the banner */ .v3 .runner-banner-actions { position: absolute; top: 14px; right: 16px; z-index: 3; } .v3 .runner-banner-actions .btn { gap: 7px; background: rgba(255, 255, 255, .94); color: #3c763d; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); } .v3 .runner-banner-actions .btn:hover { background: #fff; text-decoration: none; } .v3 .runner-info .profile-banner { height: 96px; } .v3 .runner-info-body { padding: 0 24px 22px; } .v3 .runner-info-head { display: grid; gap: 12px; } .v3 .runner-info-head > .avatar-img, .v3 .runner-info-head > .avatar-ph { margin-top: -52px; } .v3 .runner-info-title h1 { margin: 0; font-size: var(--fs-6xl); line-height: 1.18; letter-spacing: -.025em; } .v3 .runner-sub { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--fs-base); color: var(--text-2); } .v3 .runner-sub svg { flex: none; color: var(--text-3); } .v3 dl.kv { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 7px 14px; margin: 16px 0 0; font-size: var(--fs-md); } .v3 dl.kv dt { color: var(--text-3); } .v3 dl.kv dd { margin: 0; overflow-wrap: anywhere; } .v3 dl.kv dd.chips-links { margin-top: 0; } .v3 dl.kv dd.about-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } /* the buttons «В клуб» on one line, at the level of the values of the other rows */ .v3 .klb-total .btn span + span { text-transform: lowercase; } /* on a wide screen it is one line: «Всего участий в матчах: 2 · результатов в зачёт: 34» */ .v3 .klb-total .btn span + span::before { content: " · "; white-space: pre; } @media (max-width: 720px) { /* on a phone it is two lines */ .v3 .klb-total .btn { flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; border-radius: 16px; padding: 8px 16px; } .v3 .klb-total .btn span { display: block; } .v3 .klb-total .btn span + span { text-transform: none; } .v3 .klb-total .btn span + span::before { content: none; } } .v3 dl.about-kv dd.about-actions .btn { margin-left: 0; } /* the shift of 6px is for the button after the name of a club */ .v3 dl.about-kv dt:has(+ dd.about-actions) { align-self: center; } /* the label stands at the middle of the buttons */ .v3 dl.kv dd.adm { color: #a3241c; } .v3 dl.kv dt.adm { color: #b9534b; } .v3 .tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; } .v3 .tag.ok { background: #dff0d8; color: #3c763d; } .v3 .tag.bad { background: #fbdcd8; color: #a3241c; } .v3 .runner-block { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hairline); } .v3 .runner-user-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; } .v3 .runner-user h4 { margin: 0 0 6px; font-size: var(--fs-base); } .v3 .runner-user-head .tag { margin: 0 0 6px; flex: none; } .v3 .adm-note { color: #7d2e28; line-height: 1.55; } .v3 tr.total td { border-top: 1px solid var(--hairline); } @media (max-width: 560px) { .v3 dl.kv { grid-template-columns: minmax(0, 1fr); gap: 0; } .v3 dl.kv dt { margin-top: 8px; font-size: var(--fs-xs); } } .v3 .runner-clubs p { margin: 0 0 8px; } .v3 .runner-clubs > :last-child { margin-bottom: 0; } .v3 .name-chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 10px 0 0; padding: 0; } .v3 .name-chips li { padding: 4px 12px; border-radius: 999px; background: rgba(118, 118, 128, .12); font-size: var(--fs-md); } /* Pages of admin actions on a runner (search of results, editing, history, KLB person) */ .v3 .page-head { margin-bottom: 14px; } .v3 .page-head h1 { margin: 4px 0 0; font-size: var(--fs-5xl); letter-spacing: -.02em; } .v3 .page-head h1 .muted { font-weight: 450; font-size: .62em; letter-spacing: 0; } .v3 .page-head p { margin: 6px 0 0; } .v3 .back-link { font-size: var(--fs-md); color: var(--text-2); } .v3 .form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .v3 .form-actions.fr-actions-end { justify-content: flex-end; } /* the button under the table of the found results is at the right edge */ .v3 .btn.danger { background: #d73a30; color: #fff; } .v3 .btn.danger:hover { background: #b9302a; } .v3 .btn.soft-danger { background: var(--red-soft); color: var(--red); box-shadow: 0 0 0 1px rgba(215, 58, 48, .25); } .v3 .btn.soft-danger:hover { background: rgba(255, 59, 48, .18); color: var(--red); } .v3 .danger-zone { border-color: rgba(215, 58, 48, .35); background: rgba(215, 58, 48, .06); } .v3 .danger-zone h2 { color: #a3241c; } .v3 .danger-h { margin: 8px 0 4px; font-size: var(--fs-base); } .v3 .danger-zone .dz-block { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 16px 0; border-top: 1px solid var(--hairline); } .v3 .danger-zone .dz-block:first-of-type { border-top: 0; padding-top: 4px; } .v3 .danger-zone .dz-text { flex: 1 1 420px; min-width: 0; } .v3 .danger-zone .dz-text .danger-h { margin: 0 0 4px; } .v3 .danger-zone .dz-text p { margin: 0; } .v3 .danger-zone .dz-controls { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; gap: 10px 14px; margin-left: auto; } .v3 .danger-zone .dz-controls .field, .v3 .danger-zone .dz-controls .fld { width: 200px; margin: 0; } .v3 .danger-zone .dz-confirm { flex: 0 0 100%; display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 0; cursor: pointer; } .v3 .danger-zone .dz-confirm input { margin: 0; flex: none; } .v3 .bad-link { color: #a3241c; } .v3 .add-row td { vertical-align: bottom; } .v3 .add-row input[type=text], .v3 .add-row input[type=url] { width: 100%; min-width: 120px; padding: 7px 10px; border: 1px solid var(--hairline); border-radius: var(--r-sm); font: inherit; background: rgba(255,255,255,.9); } .v3 .label-danger, .v3 .label-success, .v3 .label-warning { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; } .v3 .label-success { background: #dff0d8; color: #3c763d; } .v3 .label-danger { background: #fbdcd8; color: #a3241c; } .v3 .label-warning { background: #fff0cc; color: #8a6420; } .v3 .admin-two { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } .v3 .chg { display: inline-block; margin: 0 10px 2px 0; padding: 1px 8px; border-radius: 6px; background: rgba(118, 118, 128, .1); font-size: var(--fs-sm); white-space: normal; } .v3 .history-t td { vertical-align: top; } .v3 .find-t td.right input[type=checkbox] { width: 17px; height: 17px; } .v3 .select2-container { max-width: 100%; } @media (max-width: 1000px) { .v3 .admin-two { grid-template-columns: minmax(0, 1fr); } } .v3 .alert-warning { margin: 20px 0 0; padding: 12px 18px; border-radius: var(--r); background: #fffbee; border: 1px solid rgba(138, 100, 32, .18); text-align: center; } .v3 .alert-warning a { color: #7a5a14; font-weight: 600; text-decoration: none; } .v3 .alert-warning a:hover { text-decoration: underline; } .v3 .text-center { text-align: center; } @media (min-width: 1700px) { .v3 .home-section > .calendar-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .v3 table.t td .icon-btn { width: 30px; height: 30px; margin: -4px 0; } .v3 .btn-id { margin-left: 2px; padding: 0 7px; border-radius: 999px; background: #dff0d8; font-size: var(--fs-xs); font-weight: 700; } .v3 .btn.secondary .btn-id { background: rgba(118, 118, 128, .14); color: var(--text-2); } .v3 .head-actions { display: grid; gap: 8px; justify-items: end; align-content: start; } .v3 .head-links { display: grid; gap: 6px; justify-items: stretch; min-width: 210px; } .v3 .head-links .btn { justify-content: space-between; gap: 14px; } .v3 .head-links .btn.ghost { justify-content: center; } .v3 .head-link-main { display: inline-flex; align-items: center; gap: 7px; } .v3 .chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 8px; margin-top: 8px; } .v3 .chip-row .club-chip { margin: 0; } .v3 .chip-row > .small { margin: 0; } .v3 .btn.admin-btn { background: #fdecea; color: #a3241c; box-shadow: 0 0 0 1px rgba(215, 58, 48, .4); } .v3 .btn.admin-btn:hover { background: #fbdcd8; color: #a3241c; } .v3 .drop-menu a.menu-admin { color: #a3241c; font-weight: 600; } .v3 .drop-menu a.menu-verst, .v3 .toolbar.is-compact.menu-open .nav .drop-menu a.menu-verst { color: #2b326d; font-weight: 700; } /* The column of the rating in the table of results: as narrow as possible, the freed width goes to the name of the race */ .v3 .results-t th.text-center { white-space: normal; width: 1%; min-width: 74px; max-width: 104px; line-height: 1.25; text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); } .v3 .results-t td.text-center { white-space: normal; width: 1%; max-width: 104px; font-size: var(--fs-md); line-height: 1.3; } /* The column with the name of the race is adaptive: a long name takes the room it needs, a short one gives the width to the other columns */ .v3 table.t.results-t td.wrap { min-width: 220px; width: auto; } /* The mark of a race in the table of results: one star filled in proportion to the mark, and the number */ .v3 .rate-val { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-weight: 600; } .v3 .rate-val:hover { text-decoration: none; color: var(--accent-text); } .v3 .rate-val b { font-weight: 650; font-variant-numeric: tabular-nums; } .v3 .star-one { width: 18px; height: 18px; flex: none; background: linear-gradient(90deg, #f5a300 var(--fill, 0%), #dcdcdf var(--fill, 0%)); clip-path: polygon(50% 2%, 61% 36%, 98% 37%, 68% 59%, 79% 94%, 50% 73%, 21% 94%, 32% 59%, 2% 37%, 39% 36%); } .v3 td.rate-cell { white-space: nowrap; } /* The button "Админу" stands in the right corner right under the banner of the profile card (the banner is 120px high) */ .v3 .profile-card .head-actions .drop { position: absolute; top: 76px; right: 16px; z-index: 6; } /* Cards of the results on the event page: the name wraps instead of running under the result, the result never leaves the card */ .v3 .rp-race { min-width: 0; } .v3 .rp-top li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: start; } .v3 .rp-name { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; } .v3 .rp-res { white-space: nowrap; text-align: right; } .v3 .rp-grid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); } /* The club of a runner: a clear badge with an icon, "Клуб" above the name */ .v3 .club-chip.club-badge { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 12px; border-radius: 16px; color: #2f6b31; background: linear-gradient(135deg, #e7f5e0, #cfe9c4); box-shadow: 0 0 0 1px rgba(60, 118, 61, .22), 0 2px 8px rgba(60, 118, 61, .12); } .v3 .club-badge svg { flex: none; padding: 5px; box-sizing: content-box; border-radius: 50%; background: #3c8f3f; color: #fff; width: 20px; height: 20px; } .v3 .club-badge-text { display: grid; line-height: 1.15; } .v3 .club-badge-text small { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #5b8a5d; } .v3 .club-badge-text b { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.01em; } .v3 .chip-row .club-chip.club-badge { margin: 0; } /* KLBMatch: the same badge as the club, in gold */ .v3 .club-chip.klb-badge { color: #7a5a14; background: linear-gradient(135deg, #fff6dc, #fde9ad); box-shadow: 0 0 0 1px rgba(168, 120, 20, .25), 0 2px 8px rgba(168, 120, 20, .14); margin-left: 0; } .v3 .club-chip.klb-badge:hover { background: linear-gradient(135deg, #fff1c8, #fbe19a); text-decoration: none; } .v3 .klb-badge svg { background: #e8a317; } .v3 .klb-badge .club-badge-text small { color: #9a7620; } .v3 .head-links .btn.admin-btn .btn-id { background: #fbdcd8; color: #a3241c; } /* Tables of the page of a runner (statistics by distances, the notes of admins): the first column takes the room by its text, the rest share what is left */ .v3 table.t td.wrap { min-width: 130px; width: auto; } .v3 .runner-info table.t td.wrap, .v3 .runner-block table.t td.wrap { min-width: 120px; } /* Name, city, date of birth and the club in personal data: more air between the lines */ .v3 .profile-card-head h1 { margin-bottom: 8px; } .v3 .profile-card-head .head-line { margin-top: 7px; line-height: 1.5; } .v3 .profile-card-head .chip-row { margin-top: 16px; gap: 10px; } /* An abstract drawing about scoring and running in the hero of a participant of KLBMatch (the lanes of a track, the sum, bonuses, bars) */ .v3 .klb-art { width: 56%; } .v3 .klb-art svg { width: 100%; height: 100%; display: block; } .v3 .klb-art .art-track { stroke: rgba(60, 118, 61, .3); } .v3 .klb-art .art-dash { stroke: rgba(60, 118, 61, .45); } .v3 .klb-art .art-bars rect { fill: rgba(60, 118, 61, .18); } .v3 .klb-art .art-text { fill: rgba(47, 107, 49, .24); } .v3 .klb-art .art-dots circle { fill: #e8a317; opacity: .8; } @media (max-width: 760px) { .v3 .klb-art { width: 100%; opacity: .55; } } /* Quieter: the drawing is a background, not a picture */ .v3 .klb-art .art-track { stroke: rgba(60, 118, 61, .14); } .v3 .klb-art .art-dash { stroke: rgba(60, 118, 61, .22); } .v3 .klb-art .art-bars rect { fill: rgba(60, 118, 61, .09); } .v3 .klb-art .art-text { fill: rgba(47, 107, 49, .11); } .v3 .klb-art .art-dots circle { opacity: .35; } /* A bigger avatar on the page of a user: it climbs onto the banner by half */ .v3 .profile-card-body > .avatar-img, .v3 .profile-card-body > .avatar-ph { margin-top: -76px; } .v3 .profile-card-body .avatar-img.ring, .v3 .profile-card-body .avatar-ph.ring { border-width: 5px; } @media (max-width: 560px) { .v3 .profile-card-body > .avatar-img, .v3 .profile-card-body > .avatar-ph { width: 128px !important; height: 128px !important; margin-top: -64px; } .v3 .profile-card-body > .avatar-ph { font-size: 44px !important; } } /* The numbers of a runner in the head of the profile: a value above, a label below, thin dividers */ .v3 .stat-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 14px; border-top: 1px solid var(--hairline); } .v3 .stat-tile { display: grid; align-content: center; gap: 2px; padding: 4px 16px; border-left: 1px solid var(--hairline); min-width: 0; } .v3 .stat-tile:first-child { border-left: 0; padding-left: 0; } .v3 .stat-tile b { font-size: var(--fs-3xl); line-height: 1.2; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .v3 .stat-tile span { font-size: var(--fs-sm); color: var(--text-3); } .v3 .stat-tile abbr { text-decoration-color: rgba(60, 60, 67, .4); } /* The statistics: the button under the last distance opens the others in place; the admin button «Обновить» with an icon */ .v3 .stat-more { display: flex; justify-content: center; padding-top: 8px; } .v3 .stat-toggle { gap: 6px; } .v3 .stat-toggle .stat-chevron { transition: transform .2s; } .v3 .stat-toggle[aria-expanded=true] .stat-chevron { transform: rotate(180deg); } .v3 .stat-toggle .stat-toggle-n[hidden] { display: none; } .v3 .stat-toggle.is-loading { opacity: .65; cursor: progress; } .v3 .stat-toggle.is-loading .stat-chevron { animation: statSpin .8s linear infinite; } @keyframes statSpin { to { transform: rotate(360deg); } } .v3 tr.stat-extra:not([hidden]) { animation: statIn .25s ease; } @keyframes statIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .v3 .stat-refresh { gap: 7px; } .v3 .stat-refresh svg { flex: none; transition: transform .35s; } .v3 .stat-refresh:hover svg { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .v3 .stat-toggle.is-loading .stat-chevron { animation: none; } .v3 tr.stat-extra:not([hidden]) { animation: none; } .v3 .stat-refresh svg, .v3 .stat-toggle .stat-chevron { transition: none; } } /* Достижения (results/templates/results/v3/_achievements.html): карточки-значки с прогрессом под плитками статистики в одну полосу, которую можно листать по горизонтали. Кольцо показывает долю пути до следующей ступени. */ .v3 .ach-block { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--hairline); min-width: 0; } .v3 .ach-head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: var(--fs-sm); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); } .v3 .ach-info { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: rgba(118, 118, 128, .14); color: var(--text-3); cursor: pointer; transition: background .15s, color .15s; } .v3 .ach-info:hover { background: rgba(118, 118, 128, .24); color: var(--text-2); } .v3 .ach-info { position: relative; top: -1px; } /* the middle of the line of the title is a little lower than the middle of its capital letters: the round button is lifted to the middle of the letters */ .v3 .ach-info svg { transform: translateY(-.5px); } /* a star is heavier in its lower part */ .v3 button.ach-in { width: 100%; border: 0; background: none; font: inherit; cursor: pointer; } /* the card «км за год» opens the window with the years */ .v3 .ach-open:hover .ach-badge { transform: scale(1.04); } .v3 .ach-badge { transition: transform .15s; } .v3 .ach-open:focus-visible { outline: 2px solid #5cb85c; outline-offset: -2px; border-radius: 16px; } /* The window «Километры по годам»: a line per year, the bar is the share of the best year */ .v3 .ach-years { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .v3 .ach-year { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 7px 0; border-top: 1px solid var(--hairline); } .v3 .ach-year:first-child { border-top: 0; } .v3 .ach-year-n { font-weight: 650; font-variant-numeric: tabular-nums; } .v3 .ach-year-bar { height: 10px; border-radius: 99px; background: rgba(118, 118, 128, .12); overflow: hidden; } .v3 .ach-year-bar i { display: block; height: 100%; width: var(--w, 0); border-radius: inherit; background: #3f9c4f; } /* every year is a full green, the best year is the darkest */ .v3 .ach-year.best .ach-year-bar i { background: #1b6b3c; } .v3 .ach-year-km { display: grid; justify-items: end; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; } .v3 .ach-year-km b { font-size: var(--fs-base); } .v3 .ach-year-km-main { white-space: nowrap; } /* «462 км» in one line */ .v3 .ach-year-km small { font-size: var(--fs-xs); color: var(--text-3); } .v3 .ach-info:focus-visible { outline: 2px solid #5cb85c; outline-offset: 2px; } /* The window with the description of all the achievements (the star near the title of the block) */ .v3 dialog.ach-dialog { width: min(640px, calc(100% - 32px)); } .v3 dialog.ach-dialog[open] { display: flex; flex-direction: column; overflow: hidden; } /* the title and the button «Закрыть» stay; only the list scrolls */ .v3 dialog.ach-dialog .modal-header { flex: none; } /* the cross is in the title, which stays on its place while the list scrolls */ .v3 dialog.ach-dialog .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 14px; } .v3 .ach-dialog .ach-note { margin: 0 0 12px; } .v3 .ach-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } .v3 .ach-item { --c: var(--accent); display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--hairline); } .v3 .ach-item:first-child { border-top: 0; } .v3 .ach-item.lvl-1 { --c: #55b255; } .v3 .ach-item.lvl-2 { --c: #47a657; } .v3 .ach-item.lvl-3 { --c: #389652; } .v3 .ach-item.lvl-4 { --c: #2a8148; } .v3 .ach-item.lvl-5 { --c: #1b6b3c; } .v3 .ach-item.locked { --c: #a6d9a0; } .v3 .ach-item.locked .ach-badge svg { color: var(--text-3); } .v3 .ach-item-text { display: grid; gap: 4px; min-width: 0; } .v3 .ach-item-text b { font-size: var(--fs-base); font-weight: 650; } .v3 .ach-item.locked .ach-item-text b { color: var(--text-2); } .v3 .ach-item-desc { font-size: var(--fs-md); color: var(--text-2); line-height: 1.4; } .v3 .ach-tiers { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; } .v3 .ach-chip { padding: 2px 9px; border-radius: 99px; font-size: var(--fs-xs); font-weight: 600; background: rgba(118, 118, 128, .12); color: var(--text-3); white-space: nowrap; } .v3 .ach-chip.done { background: var(--c); background: color-mix(in srgb, var(--c) 18%, #fff); color: #1b6b3c; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); } .v3 .ach-item-state { font-size: var(--fs-xs); color: var(--text-2); } @media (max-width: 720px) { .v3 dialog.ach-dialog { width: calc(100% - 16px); max-height: calc(100vh - 16px); border-radius: 16px; } .v3 dialog.ach-dialog .modal-header { padding: 18px 52px 4px 16px; } .v3 dialog.ach-dialog .modal-body { padding: 4px 16px 14px; } .v3 .ach-item { gap: 11px; } } .v3 .ach-wrap { position: relative; } .v3 .ach-row { list-style: none; margin: 0; padding: 2px 2px 6px; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 2px; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; outline: none; } .v3 .ach-row::-webkit-scrollbar { display: none; } .v3 .ach-row:focus-visible { box-shadow: 0 0 0 3px rgba(92, 184, 92, .35); border-radius: 16px; } /* the arrows and the dots are the same as in the news on the home page (.hm-arrow, .hm-bar); the dots do not run by themselves */ .v3 .ach-arrow { top: 50%; margin-top: -22px; } .v3 .ach-arrow[hidden], .v3 .ach-bar[hidden] { display: none; } .v3 .ach-bar { margin-top: 6px; } .v3 .ach-bar .dot.is-on i { animation: none; width: 100%; } @media (hover: hover) { .v3 .ach-wrap .ach-arrow { opacity: 0; transition: opacity .2s; } .v3 .ach-wrap:hover .ach-arrow, .v3 .ach-wrap:focus-within .ach-arrow { opacity: 1; } } @media (max-width: 600px) { .v3 .ach-arrow { display: none; } } /* the page «Достижения» of the cabinet: the badges are a grid, there is no carousel */ .v3 .ach-page .ach-block { border-top: 0; margin-top: 0; padding-top: 0; } .v3 .ach-page .ach-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); overflow: visible; scroll-snap-type: none; padding: 2px; } .v3 .ach-page .ach { flex: none; } @media (max-width: 600px) { .v3 .ach-page .ach-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .v3 .ach { --c: var(--accent); flex: 0 0 var(--ach-w, 164px); scroll-snap-align: start; border-radius: 16px; background: #fff; border: 1px solid var(--hairline); min-width: 0; } /* --ach-w: the width that achievements.js counts, so that a whole number of cards is on a page */ /* only green: from a light one (the first step) to the deep brand green (the top step) */ .v3 .ach.lvl-1 { --c: #55b255; } .v3 .ach.lvl-2 { --c: #47a657; } .v3 .ach.lvl-3 { --c: #389652; } .v3 .ach.lvl-4 { --c: #2a8148; } .v3 .ach.lvl-5 { --c: #1b6b3c; } /* the first step is no longer pale: it is a clear green, so that a reached card never looks switched off */ .v3 .ach:not(.locked) { background: #fff; background: color-mix(in srgb, var(--c) 8%, #fff); border-color: color-mix(in srgb, var(--c) 28%, transparent); } .v3 .ach-in { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; min-height: 164px; padding: 18px 10px 14px; text-align: center; color: inherit; text-decoration: none; min-width: 0; } .v3 a.ach-in:hover { text-decoration: none; } .v3 .ach-badge { position: relative; flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; --p: 0; background: conic-gradient(var(--c) calc(var(--p) * 1%), rgba(118, 118, 128, .22) 0); } .v3 .ach-badge::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #fff; } .v3 .ach-badge svg { position: relative; width: 26px; height: 26px; color: var(--c); } .v3 .ach.locked { --c: #a6d9a0; } .v3 .ach.locked .ach-badge svg { color: var(--text-3); } .v3 .ach.locked .ach-text b { color: var(--text-2); } /* «On the way»: the first step is not reached yet, but the person has started (a country, the kilometres of a year): the card is a living green, not grey, only paler than a reached one */ .v3 .ach.locked.started { --c: #5cb85c; background: color-mix(in srgb, var(--c) 6%, #fff); border-color: color-mix(in srgb, var(--c) 30%, transparent); } .v3 .ach.locked.started .ach-badge svg { color: #3f9c4f; } .v3 .ach.locked.started .ach-text b { color: var(--text); } .v3 .ach-item.locked.started { --c: #5cb85c; } .v3 .ach-item.locked.started .ach-badge svg { color: #3f9c4f; } .v3 .ach-item.locked.started .ach-item-text b { color: var(--text); } .v3 .ach-text { display: grid; gap: 3px; justify-items: center; line-height: 1.25; min-width: 0; } .v3 .ach-text b { font-size: var(--fs-md); font-weight: 650; overflow-wrap: anywhere; } .v3 .ach-text small { font-size: var(--fs-xs); color: var(--text-2); } .v3 .ach-text .ach-res { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--c); line-height: 1.15; } /* the finish time of «Первый марафон» and the like */ @media (max-width: 720px) { .v3 .ach-in { min-height: 150px; padding: 16px 8px 12px; gap: 9px; } .v3 .ach-badge { width: 52px; height: 52px; } .v3 .ach-badge::before { inset: 4.5px; } .v3 .ach-badge svg { width: 24px; height: 24px; } } /* On a phone three cards are on a page (about 100 px each): the type is finer, the long words are carried */ @media (max-width: 600px) { .v3 .ach { border-radius: 14px; } .v3 .ach-in { min-height: 142px; padding: 12px 5px 10px; gap: 7px; } .v3 .ach-badge { width: 42px; height: 42px; } .v3 .ach-badge::before { inset: 3.5px; } .v3 .ach-badge svg { width: 20px; height: 20px; } .v3 .ach-text { gap: 2px; } .v3 .ach-text b { font-size: var(--fs-sm); line-height: 1.2; hyphens: auto; -webkit-hyphens: auto; } .v3 .ach-text .ach-res { font-size: var(--fs-md); } .v3 .ach-text small { font-size: 11px; line-height: 1.25; } } @media (max-width: 760px) { .v3 .stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 0; } .v3 .stat-tile:nth-child(odd) { border-left: 0; padding-left: 0; } .v3 .stat-tile b { font-size: var(--fs-2xl); } } /* Social links of a user: a new line after a divider, each with the icon of its network */ .v3 .social-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hairline); } .v3 .social-sep { display: none; } .v3 .social-link { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 999px; font-size: var(--fs-md); font-weight: 600; background: rgba(118, 118, 128, .09); color: var(--text); } .v3 .social-link:hover { text-decoration: none; background: rgba(118, 118, 128, .16); } .v3 .social-link svg { flex: none; } .v3 .social-link.strava { color: #b83a00; background: #fff0e8; padding-left: 8px; } .v3 .social-link.strava:hover { background: #ffe3d3; } /* The buttons "Добавить в клуб …" of the old block: a gap between them */ .v3 .legacy-block a > button { margin: 0 12px 10px 0; } /* Numbers in the menu of the cabinet (results, plans): a grey circle with a dark grey number */ /* The numbers in the menu are round: a circle of the same width and height, grey, so it does not compete with the active section */ .v3 .side-nav .count { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; box-sizing: border-box; padding: 0; border-radius: 50%; background: rgba(118, 118, 128, .16); color: #3a3a3c; font-size: var(--fs-xs); font-weight: 700; line-height: 1; letter-spacing: -.02em; } .v3 .side-nav .count.long { font-size: var(--fs-xs); letter-spacing: -.04em; } /* The menu of the cabinet is wider: the labels with a number stay on one line */ .v3 .cabinet { grid-template-columns: 300px minmax(0, 1fr); } .v3 .cabinet-public { grid-template-columns: minmax(0, 1fr); } .v3 .side-nav .label { white-space: nowrap; } @media (max-width: 1000px) { .v3 .cabinet { grid-template-columns: minmax(0, 1fr); } } /* The column of the distance never grows wide (a long name wraps), the room goes to the name of the race */ .v3 .results-t td.cell-dist { white-space: normal; min-width: 110px; max-width: 200px; } .v3 .results-t td.cell-compact { max-width: 230px; } /* the column «Возраст, клуб, город»: a long address in a comment has no spaces, it is broken where it does not fit, not pushed into the next column (the other columns keep their words whole) */ .v3 table.t td.cell-notes { overflow-wrap: anywhere; } .v3 .calendar-side .rating .rate-val { font-size: var(--fs-md); } .v3 .rate-admin { margin-left: 6px; font-size: var(--fs-xs); color: #a3241c; } /* ===== The page of the news in the style of a newspaper site: serif headlines, thin rules, pictures ===== */ .v3 .kn-mast { padding-top: 6px; } .v3 .kn-mast-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: var(--fs-xs); letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); } .v3 .kn-mast-main { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px 20px; padding: 6px 0 14px; } .v3 .kn-mast h1 { margin: 0; font-size: 54px; line-height: 1.05; font-weight: 700; letter-spacing: -.02em; } .v3 .kn-sub { margin: 4px 0 0; font-size: var(--fs-base); color: var(--text-2); } .v3 .kn-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 10px 0 12px; margin: 0; } .v3 .kn-tabs { display: flex; flex-wrap: wrap; gap: 4px 20px; } .v3 .kn-tabs a { padding: 4px 0; color: var(--text-2); font-weight: 600; font-size: var(--fs-base); border-bottom: 2px solid transparent; } .v3 .kn-tabs a:hover { text-decoration: none; color: var(--text); } .v3 .kn-tabs a.active { color: var(--text); border-bottom-color: #1d1d1f; } .v3 .kn-search { display: flex; align-items: center; margin-left: auto; border-bottom: 1px solid #1d1d1f; min-width: 240px; } .v3 .kn-search input[type=search] { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: var(--fs-base); padding: 6px 0; color: var(--text); } .v3 .kn-search button { border: 0; background: transparent; color: var(--text-2); cursor: pointer; padding: 4px; display: grid; } .v3 .kn-filters-btn { cursor: pointer; font-weight: 600; font-size: var(--fs-base); color: var(--text-2); list-style: none; } .v3 .kn-filters-btn::-webkit-details-marker { display: none; } .v3 .kn-bar .more-filters { margin-left: 0; } .v3 .kn-front { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0 28px; margin-top: 22px; align-items: start; } .v3 .kn-lead { padding-right: 28px; border-right: 1px solid var(--hairline); } .v3 .kn-side { display: grid; gap: 16px; align-content: start; } .v3 .kn-h { margin: 0 0 6px; padding-bottom: 2px; font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -.01em; } .v3 .kn-img { display: block; position: relative; overflow: hidden; background: #e8efe4; aspect-ratio: 3 / 2; } .v3 .kn-img-lead { aspect-ratio: 16 / 9; } .v3 .kn-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; } .v3 article:hover > .kn-img img, .v3 .kn-line:hover .kn-img img { transform: scale(1.03); } .v3 .kn-ph { position: absolute; inset: 0; background: linear-gradient(135deg, #e6f3df, #c4e3b8); } .v3 .kn-ph::after { content: ""; position: absolute; inset: 0; background: url(art-road.svg) right center / cover no-repeat; opacity: .55; } .v3 .kn-ph-b::after { background-image: url(art-terrain.svg); } /* Новость без фото показывается текстом, без картинки-заглушки: рубрика, заголовок, начало текста; слева зелёная черта, чтобы строка не терялась на странице */ .v3 .kn-lead.is-text, .v3 .kn-card.is-text { border-left: 3px solid #7cc576; padding-left: 16px; } .v3 .kn-lead.is-text { padding-top: 2px; padding-bottom: 6px; } .v3 .kn-lead.is-text .kn-rubric, .v3 .kn-card.is-text .kn-rubric { margin-top: 0; } .v3 .kn-lead.is-text h2 { margin-top: 8px; } .v3 .kn-lead.is-text .kn-text { -webkit-line-clamp: 8; } .v3 .kn-line.is-text { grid-template-columns: minmax(0, 1fr); } .v3 .kn-rubric { margin-top: 12px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #6d6d72; } .v3 .kn-rubric a { color: inherit; } .v3 .kn-lead h2, .v3 .kn-card h3, .v3 .kn-line h3 { font-weight: 700; letter-spacing: -.01em; } .v3 .kn-lead h2 { margin: 6px 0 8px; font-size: var(--fs-7xl); line-height: 1.15; } .v3 .kn-card h3 { margin: 5px 0 6px; font-size: var(--fs-3xl); line-height: 1.22; } .v3 .kn-card.is-small h3 { font-size: var(--fs-xl); } .v3 .kn-lead h2 a, .v3 .kn-card h3 a, .v3 .kn-line h3 a { color: #111; } .v3 .kn-lead h2 a:hover, .v3 .kn-card h3 a:hover, .v3 .kn-line h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; color: #111; } .v3 .kn-text { margin: 0 0 8px; font-size: var(--fs-lg); line-height: 1.5; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .v3 .kn-card.is-small .kn-text { display: none; } .v3 .kn-date { font-size: var(--fs-sm); color: var(--text-3); } .v3 .kn-admin, .v3 .kn-admin a { color: #a3241c; } .v3 .kn-side .kn-card { padding-top: 12px; } .v3 .kn-side .kn-card .kn-img { aspect-ratio: 16 / 9; } .v3 .kn-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 30px; } .v3 .kn-row:empty { display: none; } .v3 .kn-row .kn-card { padding: 16px 20px 18px; border-left: 1px solid var(--hairline); } .v3 .kn-row .kn-card:first-child { padding-left: 0; border-left: 0; } .v3 .kn-row .kn-card:last-child { padding-right: 0; } .v3 .kn-row-all { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 22px; } .v3 .kn-row-all .kn-card { padding: 16px 20px 22px; border-left: 0; } .v3 .kn-row-all .kn-card:nth-child(3n+1) { padding-left: 0; } .v3 .kn-row-all .kn-card:nth-child(3n) { padding-right: 0; } .v3 .kn-feed { margin-top: 26px; } .v3 .kn-feed:not(:has(.kn-line)) { display: none; } .v3 .kn-feed-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; } .v3 .kn-line { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 16px; align-items: start; padding: 14px 0; } .v3 .kn-line h3 { margin: 4px 0 0; font-size: var(--fs-xl); line-height: 1.25; } .v3 .kn-img-thumb { aspect-ratio: 4 / 3; } @media (max-width: 1100px) { .v3 .kn-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .v3 .kn-row .kn-card:nth-child(odd) { padding-left: 0; border-left: 0; } .v3 .kn-row-all { grid-template-columns: repeat(2, minmax(0, 1fr)); } .v3 .kn-row-all .kn-card:nth-child(n) { padding: 16px 16px 22px; } } @media (max-width: 860px) { .v3 .kn-front { grid-template-columns: minmax(0, 1fr); } .v3 .kn-lead { padding-right: 0; border-right: 0; } .v3 .kn-side { margin-top: 22px; } .v3 .kn-feed-cols { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { .v3 .kn-mast h1 { font-size: var(--fs-8xl); } .v3 .kn-lead h2 { font-size: var(--fs-5xl); } .v3 .kn-row, .v3 .kn-row-all { grid-template-columns: minmax(0, 1fr); } .v3 .kn-row .kn-card, .v3 .kn-row-all .kn-card { padding: 16px 0 18px; border-left: 0; } .v3 .kn-search { min-width: 0; width: 100%; margin-left: 0; } } /* The side column "Главное": a small picture on the left, the text on the right, so the column is not taller than the lead */ .v3 .kn-side { gap: 0; } .v3 .kn-side .kn-card { display: grid; grid-template-columns: 176px minmax(0, 1fr); grid-template-areas: "img rubric" "img title" "img date"; gap: 2px 14px; align-content: start; padding: 14px 0; } .v3 .kn-side .kn-card .kn-img { grid-area: img; aspect-ratio: 4 / 3; align-self: start; } .v3 .kn-side .kn-card .kn-rubric { grid-area: rubric; margin-top: 0; } .v3 .kn-side .kn-card h3 { grid-area: title; margin: 2px 0 4px; font-size: var(--fs-2xl); } .v3 .kn-side .kn-card .kn-date { grid-area: date; } .v3 .kn-side .kn-card.is-text { grid-template-columns: minmax(0, 1fr); grid-template-areas: "rubric" "title" "date"; padding: 14px 0 14px 14px; } /* без фото: один столбец */ /* ===== The page of the runners ===== */ .v3 .runners-search { display: grid; gap: 14px; margin-top: 18px; padding: 20px 22px; } .v3 .runners-search-main { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 16px; } .v3 .runners-search-main .field { min-width: 200px; flex: 1 1 200px; max-width: 320px; } .v3 .runners-search-checks { display: flex; flex-wrap: wrap; gap: 8px 24px; } .v3 .runners-t th { vertical-align: bottom; } .v3 .runners-t tr.grp th { padding-bottom: 4px; border-bottom: 0; } .v3 .runners-t th.grp-h { text-align: center; color: var(--text-2); border-bottom: 1px solid var(--hairline); padding-top: 14px; } .v3 .runners-t th.right { text-align: right; } .v3 .runners-t td { padding-top: 9px; padding-bottom: 9px; } .v3 .sort-link { color: var(--text-3); white-space: nowrap; } .v3 .sort-link:hover { color: var(--text); text-decoration: none; } .v3 .sort-link.on { color: var(--accent-text); } .v3 .runner-name { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; } .v3 .runner-name:hover { text-decoration: none; color: var(--accent-text); } .v3 .runner-ico { display: inline-flex; vertical-align: middle; margin-left: 8px; color: #fc4c02; } .v3 .runner-tags .tag { margin: 0 4px 0 0; text-decoration: none; } .v3 .tag.klb { background: #fff0c9; color: #7a5a14; } .v3 .runner-tags .tag:not(.ok):not(.klb):not(.verst):not(.parkrun):not(.s95) { background: rgba(118, 118, 128, .14); color: var(--text-2); } @media (max-width: 1100px) { .v3 .hide-md { display: none; } } .v3 .runners-t td.wrap { white-space: nowrap; min-width: 240px; } .v3 .runner-name span:last-child { white-space: nowrap; } @media (max-width: 700px) { .v3 .runners-search { padding: 16px; } .v3 .runners-search-main .field, .v3 .runners-search-main .field .pair { min-width: 0; max-width: none; flex: 1 1 100%; } .v3 .runners-search-main .btn { flex: 1 1 auto; } .v3 .runners-t td.wrap { min-width: 170px; } } .v3 .runners-search-main .field-date { min-width: 150px; flex: 0 1 170px; } /* How sure we are that a result is ours: the labels on the page "Найти мои результаты" */ .v3 .match { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; } .v3 .match.strong { background: #dff0d8; color: #2f6b31; } .v3 .match.likely { background: #fff0c9; color: #7a5a14; } .v3 .match.weak { background: rgba(118, 118, 128, .16); color: var(--text-2); } .v3 .match-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 4px; } .v3 .match-warn { margin: 8px 0 0; padding: 9px 14px; border-radius: 12px; background: #fff4d6; color: #5a4100; font-size: var(--fs-md); } .v3 td.cell-match { white-space: normal; min-width: 150px; max-width: 220px; } .v3 td.cell-match .sub { margin-top: 3px; line-height: 1.3; } /* The page of the links to Strava / Garmin */ .v3 .strava-how { display: grid; gap: 14px; } .v3 .strava-how-main { display: flex; gap: 16px; align-items: flex-start; } .v3 .strava-badge { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #fff0e8; color: #fc4c02; } .v3 .strava-why { margin: 0; padding: 12px 0 0 20px; border-top: 1px solid var(--hairline); display: grid; gap: 4px; font-size: var(--fs-md); color: var(--text-2); } .v3 .strava-input { width: 100%; min-width: 240px; padding: 8px 12px; border: 1px solid var(--hairline); border-radius: var(--r-sm); background: rgba(255, 255, 255, .9); font: inherit; font-size: var(--fs-md); color: var(--text); } .v3 .strava-input:focus { outline: 2px solid #7cc576; border-color: transparent; } .v3 .strava-input.bad { border-color: #d73a30; } .v3 .strava-cell { min-width: 260px; width: 38%; } .v3 .tag.warn { background: #fff0c9; color: #7a5a14; } .v3 .tracker-ico { margin-right: 6px; } .v3 .tracker-ico span { float: none !important; } .v3 .tracker-ico.after { margin: 0 0 0 6px; vertical-align: middle; } /* the icon of the activity stands after the time (the page of a person) */ .v3 .tracker-ico.after img { vertical-align: -2px; } /* The icon of Strava (the file lies in static2/images/icons, outside the repository) */ .v3 .strava-ico { display: block; border-radius: 22%; flex: none; } .v3 .social-link .strava-ico { width: 22px; height: 22px; } .v3 .runner-ico { padding: 0; } .v3 .runner-ico .strava-ico { width: 16px; height: 16px; } .v3 .strava-badge { background: none; width: auto; height: auto; } .v3 .strava-badge .strava-ico { width: 48px; height: 48px; border-radius: 14px; } /* The page "Мои планы" */ .v3 .plan-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; } .v3 .plan-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 10px 0; } .v3 .plan-date { display: grid; justify-items: center; align-content: center; width: 64px; padding: 8px 0; border-radius: 14px; background: #dff0d8; color: #2f6b31; line-height: 1.05; } .v3 .plan-date b { font-size: var(--fs-4xl); letter-spacing: -.03em; } .v3 .plan-date span { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; } .v3 .plan-date:hover { text-decoration: none; background: #cfe9c4; } .v3 .plan-title { display: block; font-size: var(--fs-lg); font-weight: 650; color: var(--text); line-height: 1.3; } .v3 .plan-title:hover { color: var(--accent-text); text-decoration: none; } .v3 .plan-side { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; } .v3 .plan-days { padding: 3px 12px; border-radius: 999px; background: rgba(118, 118, 128, .12); color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; } .v3 .plan-days.soon { background: #fff0c9; color: #7a5a14; } @media (max-width: 560px) { .v3 .plan-item { grid-template-columns: 56px minmax(0, 1fr); } .v3 .plan-date { width: 56px; } .v3 .plan-side { grid-column: 2; justify-content: flex-start; } } /* The menus "Действия" and "Для редакторов" open over the cards below: the cards with a menu are above the next ones and do not clip it */ .v3 .event-hero { overflow: visible; z-index: 4; } .v3 .event-art { border-top-right-radius: var(--r-lg); border-bottom-right-radius: var(--r-lg); overflow: hidden; } .v3 .race-head { z-index: 4; } .v3 .race-tabs { position: relative; z-index: 4; } .v3 .drop-more-list { z-index: 30; } /* Editor pages: tabs inside a block (documents, distances, news of an event) and subheadings */ .v3 .etabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 16px; } .v3 .etab { border: 1px solid var(--hairline); background: rgba(255,255,255,.7); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: var(--fs-sm); cursor: pointer; color: var(--text-2); } .v3 .etab.on { background: var(--text); color: #fff; border-color: var(--text); } .v3 .epane { display: none; } .v3 .epane.on { display: block; } .v3 .sub-h { font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); margin: 18px 0 10px; } .v3 .fld:has(> input[type=checkbox]) { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 10px; } .v3 .fld:has(> input[type=checkbox]) > input[type=checkbox] { order: 1; flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent-text); } .v3 .fld:has(> input[type=checkbox]) > label { order: 2; flex: 1; min-width: 0; line-height: 1.35; } .v3 .fld:has(> input[type=checkbox]) > span { order: 3; flex-basis: 100%; padding-left: 28px; } .v3 .fld input[type=file] { font: inherit; font-size: var(--fs-sm); max-width: 100%; color: var(--text-2); } .v3 .fld input[type=file]::file-selector-button { font: inherit; font-size: var(--fs-sm); font-weight: 500; margin-right: 10px; padding: 9px 14px; border: 1px solid rgba(60, 60, 67, .16); border-radius: 10px; background: rgba(255, 255, 255, .85); color: var(--text); cursor: pointer; } .v3 .fld input[type=file]::file-selector-button:hover { background: #fff; } .v3 .set-grid:has(.fld > input[type=checkbox]) { row-gap: 10px; margin-top: -2px; } .v3 .fld textarea { width: 100%; box-sizing: border-box; } /* The page "how to add an event" */ .v3 .add-event { max-width: 820px; margin: 0 auto; } .v3 .notice-warn { padding: 12px 16px; margin-bottom: 18px; border-radius: var(--r-sm); background: #fcf8e3; color: #8a6d3b; border: 1px solid #f5e7b3; font-size: var(--fs-base); line-height: 1.5; } .v3 .add-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; } .v3 .add-steps li { display: flex; gap: 14px; align-items: flex-start; } .v3 .add-steps li > b { flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #5cb85c; color: #fff; font-size: var(--fs-md); } .v3 .add-steps h3 { margin: 3px 0 4px; font-size: var(--fs-lg); } .v3 .add-steps p { margin: 0; line-height: 1.55; } /* The window "add a new event": wider, the form in two columns */ .v3 dialog.legacy-modal:has(#frm_add_series) { width: min(880px, calc(100% - 32px)); } .v3 dialog.legacy-modal:has(#frm_add_series) .modal-header { padding: 26px 64px 8px 32px; } .v3 dialog.legacy-modal:has(#frm_add_series) .modal-title { font-size: var(--fs-3xl); } .v3 dialog.legacy-modal:has(#frm_add_series) .modal-body { padding: 8px 32px 10px; font-size: var(--fs-base); line-height: 1.55; } .v3 dialog.legacy-modal:has(#frm_add_series) .modal-footer { padding: 16px 32px 26px; } .v3 #frm_add_series { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--hairline); } .v3 #frm_add_series .form-group { margin: 0; min-width: 0; display: grid; gap: 6px; align-content: start; } .v3 #frm_add_series .form-group label { margin: 0; } .v3 #frm_add_series .form-group:has(#id_name), .v3 #frm_add_series .form-group:has(textarea), .v3 #frm_add_series .form-group:has(input[type=file]), .v3 #frm_add_series .form-group:has(input[type=checkbox]) { grid-column: 1 / -1; } .v3 #frm_add_series .form-group:has(input[type=checkbox]) { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 10px; } .v3 #frm_add_series input[type=checkbox] { order: 1; flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent-text); } .v3 #frm_add_series .form-group:has(input[type=checkbox]) label { order: 2; flex: 1; min-width: 0; font-weight: 500; } .v3 #frm_add_series input[type=time] { width: 100%; padding: 9px 12px; border: 1px solid var(--hairline); border-radius: var(--r-sm); background: rgba(255,255,255,.9); font: inherit; font-size: var(--fs-base); box-sizing: border-box; } @media (max-width: 700px) { .v3 #frm_add_series { grid-template-columns: minmax(0, 1fr); } } .v3 #frm_add_series .form-group br { display: none; } .v3 #frm_add_series .form-group > input, .v3 #frm_add_series .form-group > select { margin: 0; } .v3 #frm_add_series .form-group { display: block; font-size: 0; } .v3 #frm_add_series .form-group label { display: block; margin: 0 0 6px; font-size: var(--fs-sm); } .v3 #frm_add_series .form-group:has(input[type=checkbox]) { display: flex; } .v3 #frm_add_series .form-group:has(input[type=checkbox]) label { margin: 0; font-size: var(--fs-md); } .v3 #frm_add_series .form-group h4 { font-size: var(--fs-sm); margin: 6px 0 0; } .v3 .legacy-modal input[type=file] { color: var(--text-2); } .v3 .legacy-modal input[type=file]::file-selector-button { font: inherit; font-size: var(--fs-sm); font-weight: 500; margin-right: 10px; padding: 8px 14px; border: 1px solid var(--hairline); border-radius: 10px; background: rgba(255, 255, 255, .9); color: var(--text); cursor: pointer; } .v3 #frm_add_series .form-group input[type=checkbox] { margin: 1px 0 0 0; position: static; } .v3 #frm_add_series .form-group input.checkbox { margin: 1px 0 0 0 !important; } .v3 #frm_add_series .form-group:has(input[type=checkbox]) { gap: 0; } .v3 #frm_add_series .form-group:has(input[type=checkbox]) label { padding-left: 10px; } /* The page "services for organizers" */ .v3 .reg-advert { max-width: 980px; } .v3 .reg-list { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 8px; line-height: 1.55; } .v3 .reg-list ul { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; } .v3 .reg-advert .section > p { line-height: 1.55; } .v3 .reg-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 14px; } .v3 .reg-shots figure { margin: 0; } .v3 .reg-shots figcaption { font-size: var(--fs-md); font-weight: 600; margin-bottom: 6px; color: var(--text-2); } .v3 .reg-shots img { width: 100%; height: auto; display: block; border-radius: var(--r-sm); border: 1px solid var(--hairline); } @media (max-width: 700px) { .v3 .reg-shots { grid-template-columns: minmax(0, 1fr); } } /* The list of organizers */ .v3 .org-intro { max-width: 820px; line-height: 1.55; } .v3 .org-bar { margin-bottom: 8px; gap: 12px; flex-wrap: wrap; } .v3 .org-filter { width: min(420px, 100%); height: 40px; padding: 0 14px; border: 1px solid rgba(60, 60, 67, .16); border-radius: 999px; font: inherit; background: rgba(255, 255, 255, .85); box-sizing: border-box; } .v3 .org-filter:focus { outline: none; border-color: #5cb85c; box-shadow: 0 0 0 3px rgba(92, 184, 92, .25); } .v3 .org-t td { vertical-align: top; } .v3 .org-t .org-name { width: 30%; font-weight: 600; } .v3 .org-t .org-name .small { font-weight: 400; } .v3 .org-t .org-name p { margin: 4px 0 0; } .v3 .org-series + .org-series { margin-top: 10px; } .v3 .org-series .badge { margin-left: 6px; } .v3 .org-t tr[hidden] { display: none; } .v3 .org-t td.wrap { min-width: 0; } .v3 .org-t tbody td { border-top: 2px solid rgba(60, 60, 67, .22); padding-top: 16px; padding-bottom: 16px; } .v3 .org-t tbody tr:first-child td { border-top-width: 1px; } .v3 table.t.org-t tbody td { border-bottom: 0; border-top: 2px solid rgba(60, 60, 67, .3); } .v3 table.t.org-t tbody tr:first-child td { border-top-width: 1px; border-top-color: rgba(60, 60, 67, .16); } /* The dividers of the organizers: soft and not edge to edge (a line drawn by the background of the row) */ .v3 table.t.org-t tbody td { border-top: 0; } .v3 table.t.org-t tbody tr + tr { background: linear-gradient(rgba(60, 60, 67, .16), rgba(60, 60, 67, .16)) center top / calc(100% - 44px) 1px no-repeat; } .v3 .club-t td { overflow-wrap: anywhere; } .v3 .club-soc { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; } .v3 .row-icons { display: flex; justify-content: flex-end; gap: 2px; } .v3 .club-logo-prev { max-width: 120px; height: auto; border-radius: var(--r-sm); margin-top: 6px; } /* The place among men or women under the overall place: the same size, a bit softer than the text */ .v3 .place-g { display: block; margin-top: 1px; color: var(--text-2); } /* The city of the event in the tables of results: an important detail, so the size of the main text */ .v3 table.t td.cell-city { font-size: var(--fs-lg); line-height: 1.35; } /* The personal record: a cup in the top right corner of the cell instead of the word */ .v3 table.t td.best { position: relative; } .v3 .pr-icon { position: absolute; top: 6px; right: 8px; display: inline-flex; line-height: 0; color: var(--accent-text); } .v3 .pr-icon { color: #b8860b; } .v3 .pr-icon svg { fill: #f6c945; } .v3 .pr-icon svg path:first-child { fill: #f6c945; } .v3 .runners-t td { font-size: var(--fs-lg); } .v3 .runners-t td.cell-compact { min-width: 140px; font-size: var(--fs-md); } .v3 table.t.runners-t th, .v3 table.t.runners-t td { padding-left: 10px; padding-right: 10px; } .v3 .table-flush table.t.runners-t th:first-child, .v3 .table-flush table.t.runners-t td:first-child { padding-left: 22px; } .v3 .table-flush table.t.runners-t th:last-child, .v3 .table-flush table.t.runners-t td:last-child { padding-right: 22px; } .v3 table.t.runners-t td.wrap { white-space: nowrap; } /* The tags user / KLB / parkrun in the list of runners: all of one size */ .v3 .runner-tags .tag { min-width: 72px; padding: 2px 0; text-align: center; box-sizing: border-box; line-height: 1.4; } .v3 .runner-tags .tag { min-width: 56px; padding: 1px 0; font-size: var(--fs-xs); margin-right: 3px; } /* Tables: the pale grey texts (headers, second lines, notes) are a bit darker to read easier */ .v3 table.t th, .v3 .klb-regions th, .v3 table.history-t th { color: #636366; } .v3 table.t td .sub, .v3 .results-t td .sub { color: #636366; } .v3 table td .muted, .v3 table td.muted, .v3 table.t td .small.muted, .v3 .place-g { color: #58585d; } /* Edit forms: a grid of short fields (ids, dates, gender) in five columns; the numbers without the spinners */ .v3 .set-grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .v3 .set-grid.compact .fld > label { font-size: var(--fs-sm); line-height: 1.25; } .v3 .ids-grid input[type=number] { -moz-appearance: textfield; appearance: textfield; } .v3 .ids-grid input[type=number]::-webkit-inner-spin-button, .v3 .ids-grid input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } @media (max-width: 1100px) { .v3 .set-grid.cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 700px) { .v3 .set-grid.cols-5 { grid-template-columns: minmax(0, 1fr); } } .v3 .set-grid.ids-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 12px; } .v3 .set-grid.ids-grid input[type=number] { padding: 0 10px; } .v3 .set-grid.cols-5.compact:not(.ids-grid) { grid-template-columns: 150px 190px auto 190px auto; justify-content: start; column-gap: 18px; } @media (max-width: 1100px) { .v3 .set-grid.cols-5.compact:not(.ids-grid) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 700px) { .v3 .set-grid.cols-5.compact:not(.ids-grid) { grid-template-columns: minmax(0, 1fr); } } .v3 .set-grid.ids-grid .fld { align-content: end; } /* A checkbox among the short fields stands on the line of the inputs, not of their labels */ .v3 .set-grid.compact:not(.ids-grid) .fld:has(> input[type=checkbox]) { align-self: end; align-items: center; height: 40px; } .v3 .set-grid.compact:not(.ids-grid) .fld:has(> input[type=checkbox]) > input[type=checkbox] { margin: 0; } .v3 .set-grid.compact:not(.ids-grid) .fld:has(> input[type=checkbox]) { flex-wrap: nowrap; align-content: center; align-items: center; } .v3 .set-grid.compact:not(.ids-grid) .fld:has(> input[type=checkbox]) > label { flex: 0 1 auto; } .v3 .set-grid.ids-grid { grid-template-columns: repeat(5, 170px); gap: 14px 18px; justify-content: start; } .v3 .set-grid.ids-grid .fld > label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 1100px) { .v3 .set-grid.ids-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 700px) { .v3 .set-grid.ids-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .v3 .set-grid.ids-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); justify-content: stretch; } /* Public list and info pages have the same big heading as the calendar, the news and the runners */ .v3 .page-head.big h1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.1; font-weight: 700; margin: 4px 0 8px; letter-spacing: -.02em; } /* A row of dates: five equal fields, the inputs on one line even when a label takes two lines */ .v3 .set-grid.dates-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .v3 .set-grid.dates-grid .fld { align-content: end; } @media (max-width: 1100px) { .v3 .set-grid.dates-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 700px) { .v3 .set-grid.dates-grid { grid-template-columns: minmax(0, 1fr); } } .v3 .set-grid.dates-grid, .v3 .set-grid.ids-grid { align-items: end; } /* The role in the header: red letters instead of the shield */ .v3 .role-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 6px 8px; border-radius: 8px; font: inherit; font-size: var(--fs-md); font-weight: 650; color: var(--red); cursor: pointer; white-space: nowrap; } .v3 .role-btn:hover, .v3 .drop.open > .role-btn { background: var(--red-soft); } .v3 .password-page { max-width: 560px; margin: 0 auto; } /* The operations of admins above the results of a distance: one thin strip with groups */ .v3 .race-admin { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin: 22px 0 18px; padding: 10px 14px; border-radius: var(--r); background: rgba(196, 41, 31, .045); border: 1px solid rgba(196, 41, 31, .14); } .v3 .race-admin .ra-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .v3 .race-admin .ra-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); margin-right: 2px; } .v3 .race-admin .ra-end { margin-left: auto; } /* The access data of the user for admins: a quiet note under the name, as it was in the old design */ .v3 .adm-access { margin: 10px 0 4px; padding: 10px 14px; border-radius: var(--r-sm); background: rgba(196, 41, 31, .045); border: 1px solid rgba(196, 41, 31, .14); font-size: var(--fs-md); line-height: 1.55; color: var(--text); } .v3 .adm-access .adm-access-tag { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--red); margin-bottom: 2px; } .v3 .adm-access button.adm-access-tag { display: block; width: 100%; padding: 0; border: 0; background: none; font-family: inherit; text-align: inherit; cursor: default; } .v3 .adm-access a { text-decoration: underline; text-underline-offset: 2px; } .v3 .head-actions .adm-access { margin: 12px 0 0; text-align: left; min-width: 250px; } /* The access note sits in the right corner right under the button "Админу" */ .v3 .profile-card .head-actions .adm-access { position: absolute; top: 176px; right: 16px; margin: 0; width: 260px; z-index: 5; } @media (max-width: 900px) { .v3 .profile-card .head-actions .adm-access { position: static; width: auto; margin-top: 12px; } } /* Header of the user: the button "Админу" in the right bottom corner of the green banner, the access note right under the banner, text to the right */ .v3 .profile-card .head-actions .adm-access { top: 132px; text-align: right; width: auto; min-width: 230px; } /* The links under the club badges: rectangles, the title on top, the id under it (the card of the runner, KLBMatch, Strava) */ .v3 .link-tile { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .85); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .14), 0 1px 2px rgba(0, 0, 0, .06); color: var(--text); } .v3 .link-tile:hover { text-decoration: none; background: #fff; } .v3 .link-tile svg, .v3 .link-tile .strava-ico { flex: none; color: var(--text-2); } .v3 .link-tile .lt-text { display: grid; line-height: 1.25; } .v3 .link-tile .lt-text b { font-size: var(--fs-md); font-weight: 650; } .v3 .link-tile .lt-text small { font-size: var(--fs-xs); color: var(--text-2); font-variant-numeric: tabular-nums; } .v3 .link-tile-add { box-shadow: 0 0 0 1px rgba(60, 118, 61, .35); } .v3 .link-tile-add small { color: var(--accent-text); font-weight: 600; } .v3 .link-tile-strava { background: #fff0e8; box-shadow: 0 0 0 .5px rgba(252, 76, 2, .3); } .v3 .link-tile-strava:hover { background: #ffe3d3; } .v3 .link-tile-strava b { color: #b83a00; } .v3 .link-tile-verst b { color: #2b326d; } /* S95: the title and the hover are in the colour of their site, the deep iris of the navigation (#2a2951); the icon is grey, as the others */ .v3 .link-tile-s95 b { color: #2a2951; } .v3 .head-line .hl-ico { vertical-align: -2px; margin-right: 6px; opacity: .8; } .v3 .adm-access .adm-sep { border: 0; border-top: 1px solid rgba(196, 41, 31, .2); margin: 8px 0 6px; } /* Rectangles of links: no fill, a tint on hover (green for the card and KLBMatch, orange for Strava) */ .v3 .link-tile { background: transparent; transition: background .15s; } .v3 .link-tile:hover { background: rgba(92, 184, 92, .14); } .v3 .link-tile-strava { background: transparent; box-shadow: 0 0 0 .5px rgba(252, 76, 2, .35); } .v3 .link-tile-strava:hover { background: rgba(252, 76, 2, .12); } .v3 .link-tile-verst { box-shadow: 0 0 0 .5px rgba(43, 50, 109, .4); } .v3 .link-tile-verst:hover { background: rgba(43, 50, 109, .09); } .v3 .link-tile-s95 { box-shadow: 0 0 0 .5px rgba(42, 41, 81, .4); } .v3 .link-tile-s95:hover { background: rgba(42, 41, 81, .09); } /* The button of the rights goes to the right bottom corner of the header, under the note for admins (which is placed over the top right corner) */ .v3 .profile-card .profile-card-head { align-items: stretch; } .v3 .profile-card .head-actions { align-content: end; } .v3 .profile-card .head-actions .head-links { align-self: end; justify-self: end; } /* the gap of the grid is not left under the tile «Права редактора» (the next row has no height: the menu «Админу» is over the card), so the tile stands on the same line as the tiles of the platforms */ .v3 .profile-card .head-actions { row-gap: 0; } /* The rights of the editor: the same rectangle as the card of the runner, with a red tint on hover */ .v3 .link-tile-rights { box-shadow: 0 0 0 .5px rgba(196, 41, 31, .35); } .v3 .link-tile-rights:hover { background: rgba(196, 41, 31, .08); } .v3 .link-tile-rights svg { color: var(--red); } /* The birthday and the e-mail under the name: the quiet colour of the text, not red */ .v3 .profile-card-head .head-line.adm-note { color: var(--text-2); } .v3 .profile-card-head .head-line.adm-note a { color: var(--accent-text); } /* The blocks of KLBMatch and "about the person" on the page of a user: rows of a list, not the old paragraphs */ .v3 dl.klb-kv, .v3 dl.about-kv { margin: 14px 0 0; grid-template-columns: 120px minmax(0, 1fr); } .v3 dl.about-kv dd > div + div { margin-top: 6px; } .v3 dl.about-kv .btn { margin-left: 6px; } .v3 .klb-year + .klb-year { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hairline); } .v3 .klb-total { margin: 16px 0 0; } .v3 .link-tile-static { cursor: default; } .v3 .link-tile-static:hover { background: transparent; } .v3 .link-tile .lt-text small.lt-value { font-size: var(--fs-md); color: var(--text); font-weight: 600; } /* ---- Mobile: the page of a user ---- */ @media (max-width: 900px) { /* the rights of the editor and the note for admins are at the left edge, in the flow */ .v3 .profile-card .head-actions { flex: 1 1 100%; min-width: 0; justify-items: start; align-content: start; } .v3 .profile-card .head-actions .head-links { align-self: start; justify-self: start; } .v3 .profile-card .head-actions .adm-access { text-align: left; justify-self: stretch; width: 100%; min-width: 0; box-sizing: border-box; } /* the note for admins on a phone: over the whole width and compact: the facts go in a line while they fit */ .v3 .profile-card .head-actions .adm-access { display: flex; flex-wrap: wrap; gap: 1px 14px; margin-top: 8px; padding: 7px 12px; font-size: var(--fs-sm); line-height: 1.4; } .v3 .profile-card .head-actions .adm-access .adm-access-tag { flex: 1 1 100%; margin-bottom: 0; } /* folded: only the title, in the centre; a click on it opens the facts and closes them back */ .v3 .profile-card .head-actions .adm-access button.adm-access-tag { text-align: center; cursor: pointer; padding: 3px 0; } .v3 .profile-card .head-actions .adm-access button.adm-access-tag::after { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 0 2px 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .15s; } .v3 .profile-card .head-actions .adm-access.open button.adm-access-tag::after { margin-bottom: -2px; transform: rotate(-135deg); } .v3 .profile-card .head-actions .adm-access:not(.open) > :not(.adm-access-tag) { display: none; } .v3 .profile-card .head-actions .adm-access.open .adm-access-tag { margin-bottom: 3px; } .v3 .profile-card .head-actions .adm-access .adm-sep { flex: 1 1 100%; margin: 4px 0 3px; } .v3 .profile-card .head-actions .link-tile-rights { display: none; } /* the same is in the menu «Админу» («Права на серии и клубы») */ } @media (max-width: 700px) { /* the card of the runner and KLBMatch in one row: two equal rectangles, the icons are dropped to save the width */ .v3 .social-row .link-tile { flex: 1 1 0; min-width: 0; padding: 8px 10px; gap: 8px; } .v3 .social-row .link-tile > svg, .v3 .social-row .link-tile > .strava-ico { display: none; } .v3 .social-row .link-tile .lt-text { min-width: 0; } .v3 .social-row .link-tile .lt-text b, .v3 .social-row .link-tile .lt-text small { font-size: var(--fs-sm); overflow-wrap: anywhere; } .v3 .social-row .link-tile-strava { flex: 0 0 auto; } .v3 .chip-row .link-tile { flex: 1 1 0; min-width: 0; } /* the window "For the administrator": the whole screen, tables as stacked rows, the buttons are wide */ .v3 dialog.admin-dialog { width: calc(100% - 16px); max-height: calc(100vh - 16px); border-radius: 16px; } .v3 dialog.admin-dialog .modal-header { padding: 18px 52px 4px 16px; } .v3 dialog.admin-dialog .modal-title { font-size: var(--fs-lg); } .v3 dialog.admin-dialog .modal-body { padding: 4px 16px 6px; } .v3 dialog.admin-dialog .modal-footer { padding: 10px 16px 16px; } .v3 dialog.admin-dialog table.t, .v3 dialog.admin-dialog table.t tbody, .v3 dialog.admin-dialog table.t tr, .v3 dialog.admin-dialog table.t td { display: block; width: 100%; box-sizing: border-box; } .v3 dialog.admin-dialog table.t td { white-space: normal; padding: 6px 0; border-bottom: 0; text-align: left; } .v3 dialog.admin-dialog table.t td.right { text-align: left; padding-top: 0; } .v3 dialog.admin-dialog table.t tr { padding: 8px 0; border-bottom: 1px solid var(--hairline); } .v3 dialog.admin-dialog input[type=number], .v3 dialog.admin-dialog select, .v3 dialog.admin-dialog input[type=text] { width: 100%; box-sizing: border-box; } .v3 dialog.admin-dialog .btn { width: 100%; justify-content: center; } .v3 dialog.admin-dialog .modal-footer .btn { width: auto; } } /* Mobile: all the rectangles under the name (club, KLBMatch, the card of the runner, KLBMatch participant, Strava) are of one design and one size: two equal columns, the same icon, the same fonts, the rows are as high as the tallest rectangle */ @media (max-width: 700px) { .v3 .chip-row, .v3 .social-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: stretch; } .v3 .chip-row .link-tile, .v3 .social-row .link-tile { flex: none; width: 100%; min-width: 0; min-height: 52px; box-sizing: border-box; padding: 8px 10px; gap: 8px; align-items: center; } .v3 .chip-row .link-tile > svg, .v3 .social-row .link-tile > svg, .v3 .social-row .link-tile > .strava-ico { display: block; width: 18px; height: 18px; flex: none; } .v3 .chip-row .link-tile .lt-text, .v3 .social-row .link-tile .lt-text { min-width: 0; } .v3 .chip-row .link-tile .lt-text b, .v3 .social-row .link-tile .lt-text b { font-size: var(--fs-sm); line-height: 1.25; overflow-wrap: anywhere; } .v3 .chip-row .link-tile .lt-text small, .v3 .social-row .link-tile .lt-text small, .v3 .chip-row .link-tile .lt-text small.lt-value, .v3 .social-row .link-tile .lt-text small.lt-value { font-size: var(--fs-sm); line-height: 1.25; overflow-wrap: anywhere; } .v3 .social-row .link-tile-strava { width: 100%; } } .v3 .profile-card-head .head-line b { color: var(--text); font-weight: 600; } /* The lines under the name (birthday, e-mail, club, KLBMatch): the size of the main text */ .v3 .profile-card-head .head-line.small { font-size: var(--fs-base); line-height: 1.5; } .v3 .profile-card-head .head-line.small .hl-ico { width: 17px; height: 17px; vertical-align: -3px; } /* Mobile: the fields have at least 16px, otherwise iOS zooms the page when a field gets the focus */ @media (max-width: 700px) { .v3 input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), .v3 select, .v3 textarea { font-size: 16px; } } /* Mobile: the totals of KLBMatch and the table of statistics fit the screen */ @media (max-width: 700px) { .v3 .klb-total .btn { display: block; width: 100%; height: auto; padding: 9px 14px; white-space: normal; text-align: center; line-height: 1.35; } .v3 table.stats-t th, .v3 table.stats-t td { white-space: normal; padding: 9px 6px; } .v3 table.stats-t td.num .muted.small { display: block; } .v3 table.stats-t th { font-size: var(--fs-xs); letter-spacing: 0; } } /* Icons before the labels of the card of a runner, as in the lines of a personal profile */ .v3 dl.kv dt .dt-ico { width: 15px; height: 15px; margin-right: 7px; vertical-align: -3px; opacity: .8; flex: none; } .v3 dl.runner-kv { grid-template-columns: 138px minmax(0, 1fr); } @media (max-width: 480px) { .v3 dl.runner-kv { grid-template-columns: 118px minmax(0, 1fr); } } /* The lines under the name in a profile: the same size as the fields of the card of a runner */ .v3 .profile-card-head .head-line.small { font-size: var(--fs-md); line-height: 1.55; } .v3 .profile-card-head .head-line.small .hl-ico { width: 15px; height: 15px; vertical-align: -3px; margin-right: 7px; opacity: .8; } /* The page of a club */ .v3 dl.club-kv { margin-top: 14px; grid-template-columns: 150px minmax(0, 1fr); } .v3 .club-hero h1 { font-size: var(--fs-6xl); margin: 4px 0 0; } .v3 .club-hero .dt-ico, .v3 .club-hero p .dt-ico { margin-right: 6px; } .v3 tr.year-row td { background: rgba(118, 118, 128, .07); font-weight: 600; font-size: var(--fs-sm); text-transform: none; padding: 7px 14px; } .v3 .club-year select { height: 40px; padding: 0 12px; border: 1px solid rgba(60, 60, 67, .16); border-radius: 10px; font: inherit; background: rgba(255, 255, 255, .85); } @media (max-width: 700px) { .v3 dl.club-kv { grid-template-columns: 118px minmax(0, 1fr); } } /* The roster of a club */ .v3 .club-name-h { display: block; font-size: var(--fs-2xl); font-weight: 500; letter-spacing: 0; margin-top: 4px; } .v3 table.members-t th, .v3 table.members-t td { padding-left: 10px; padding-right: 10px; } .v3 .planned-who + .planned-who { margin-top: 4px; } /* The table of the found results has to fit the width of the page: the narrower paddings, the distance may wrap */ .v3 table.find-t th, .v3 table.find-t td { padding-left: 9px; padding-right: 9px; } .v3 table.find-t td.cell-dist { min-width: 90px; max-width: 150px; } .v3 table.find-t td.cell-compact { max-width: 190px; } .v3 table.find-t td .place-g { white-space: nowrap; } .v3 table.t.results-t.find-t td.cell-dist { min-width: 90px; max-width: 150px; width: auto; } .v3 table.t.results-t.find-t td.wrap:not(.cell-dist) { min-width: 150px; } /* A compact toolbar (a phone): the avatar with the name leads to the own page, the button of the menu is right of it */ .v3 .account-mini { display: none; } @media (max-width: 1100px) { .v3 .toolbar:not(.is-wide) .account-mini { display: inline-flex; } } .v3 .toolbar.is-compact .account-mini { display: inline-flex; } .v3 .toolbar.is-wide .account-mini { display: none; } .v3 .account-mini { align-items: center; gap: 8px; color: var(--text); font-weight: 600; font-size: var(--fs-md); min-width: 0; } .v3 .account-mini:hover { text-decoration: none; color: var(--accent-text); } .v3 .account-mini .avatar { width: 36px; height: 36px; font-size: var(--fs-sm); } .v3 .account-mini .name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 380px) { .v3 .account-mini .name { display: none; } } .v3 .toolbar-actions .burger { margin-right: -6px; } .v3 .toolbar.is-compact .toolbar-inner { gap: 12px; } /* the name in two lines, as in the menu of the wide toolbar: the surname on top, the name under it */ .v3 .account-mini .name { display: grid; line-height: 1.15; max-width: 120px; font-size: var(--fs-sm); overflow: visible; white-space: normal; } .v3 .account-mini .name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v3 .account-mini .name > span + span { font-weight: 450; color: var(--text-2); } /* The year under the day and the month in the column of dates: the same colour, size and weight as the date itself */ .v3 a.date-link { display: inline-block; text-align: right; line-height: 1.3; } .v3 a.date-link .date-year { display: block; } /* The list of runners on a phone: not a table but cards (the name, the city and the year, the numbers in a row); the sorting is in the chips above */ .v3 .sort-chips { display: none; } @media (max-width: 700px) { .v3 .sort-chips { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 4px 0 10px; font-size: var(--fs-md); } .v3 .runners-t, .v3 .runners-t tbody { display: block; width: 100%; } .v3 .runners-t thead { display: none; } .v3 .runners-t tr { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; padding: 13px 4px; border-top: 1px solid var(--hairline); } .v3 .runners-t tbody tr:first-child { border-top: 0; } .v3 table.t.runners-t td { display: block; padding: 0; border: 0; background: none !important; white-space: normal; min-width: 0; font-size: var(--fs-md); } .v3 .table-flush table.t.runners-t td:first-child, .v3 .table-flush table.t.runners-t td:last-child { padding: 0; } .v3 table.t.runners-t td.c-no, .v3 table.t.runners-t td.c-time, .v3 table.t.runners-t td.c-tags, .v3 table.t.runners-t td.hide-md { display: none; } .v3 table.t.runners-t td.c-name { flex: 1 1 100%; font-size: var(--fs-lg); padding-right: 40px; } .v3 table.t.runners-t td.c-name .runner-name { white-space: normal; } .v3 table.t.runners-t td.c-city, .v3 table.t.runners-t td.c-bd { display: block; color: var(--text-2); font-size: var(--fs-sm); max-width: none; min-width: 0; } .v3 table.t.runners-t td.c-city { flex: 1 1 100%; } .v3 table.t.runners-t td.c-fin, .v3 table.t.runners-t td.c-len, .v3 table.t.runners-t td.c-edd { display: block; text-align: left; margin-top: 4px; } .v3 table.t.runners-t td[data-label]:empty { display: none; } .v3 table.t.runners-t td[data-label]::before { content: attr(data-label) ': '; color: var(--text-2); font-size: var(--fs-sm); } .v3 table.t.runners-t td.c-act { position: absolute; top: 8px; right: 0; } } /* The rows of women: a soft pink (in the old version they were green) */ .v3 table.t tr.girl td, .v3 table.t td.girl-cell { background: #fdeef3; } .v3 table.t tbody tr.girl:hover td { background: #fbdde8; } .v3 table.t tr.girl.me td { background: var(--accent-soft); } @media (max-width: 640px) { :root { --gutter: 16px; } } /* The menu of the cabinet: a link never gets wider than the card (a long name with the counter used to push the green mark out of it) */ .v3 .side-nav { grid-template-columns: minmax(0, 1fr); } .v3 .side-nav a { min-width: 0; } .v3 .side-nav .label { min-width: 0; white-space: normal; overflow-wrap: anywhere; } @media (max-width: 1000px) { .v3 .side-nav { grid-template-columns: none; } .v3 .side-nav .label { white-space: nowrap; } } /* The counters in the menu: a circle for 1-2 digits, a pill for more (1234), the name stays in one line */ .v3 .side-nav .count { width: auto; min-width: 28px; padding: 0 7px; border-radius: 999px; } .v3 .side-nav .count.long { font-size: var(--fs-xs); letter-spacing: -.02em; } /* the name wraps to a second line when the counter takes the room, the counter stays in one piece */ .v3 .side-nav .count { white-space: nowrap; } /* Every checkbox and radio button of the new design has the green of the buttons (the ones in tables had the blue of the browser) */ .v3 input[type=checkbox], .v3 input[type=radio] { accent-color: var(--accent-text); } /* The menu of the cabinet: a bit smaller letters and tighter gaps, so that "Найденные результаты" and a counter fit in one line */ .v3 .side-nav a { font-size: var(--fs-md); gap: 9px; padding: 9px 10px; } .v3 .side-nav .count { min-width: 26px; height: 26px; width: auto; padding: 0 6px; } /* The calendar: no arrow (the title is the link); the rating is in the right bottom corner of the card, bigger, the word "все оценки" for admins is on the left of the main mark */ .v3 .calendar-arrow { display: none; } @media (min-width: 641px) { .v3 .calendar-item { align-items: stretch; } .v3 .calendar-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; gap: 8px; } .v3 .calendar-side .rating { order: 99; margin-top: auto; display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-end; gap: 12px; } .v3 .calendar-side .rating .rate-val { font-size: var(--fs-lg); gap: 8px; } .v3 .calendar-side .rating .star-one { width: 22px; height: 22px; } .v3 .calendar-side .rating .rate-admin { margin-left: 0; font-size: var(--fs-sm); } } /* The nearest races on the home page: all tiles have the same height (the highest of them), and the rating stays at the bottom */ @media (min-width: 900px) { .v3 .home-section > .calendar-list { align-items: stretch; grid-auto-rows: 1fr; } .v3 .home-section .calendar-item { height: 100%; align-content: space-between; } .v3 .home-section .calendar-side { margin-top: auto; } } /* The list of runners: one size of the font in all the cells (1px less than before) and one in the headers */ .v3 table.t.runners-t td, .v3 table.t.runners-t td.cell-compact, .v3 table.t.runners-t td.wrap, .v3 table.t.runners-t td abbr { font-size: var(--fs-base); } .v3 table.t.runners-t th, .v3 table.t.runners-t th .sort-link { font-size: var(--fs-xs); } @media (max-width: 700px) { .v3 table.t.runners-t td, .v3 table.t.runners-t td.cell-compact { font-size: var(--fs-base); } .v3 table.t.runners-t td.c-city, .v3 table.t.runners-t td.c-bd { font-size: var(--fs-sm); } .v3 table.t.runners-t td.c-name { font-size: var(--fs-lg); } } /* The head of a table stays under the toolbar when the page is scrolled (probeg.js adds .sticky-ok to a table that fits in its box) */ .v3 .table-wrap.sticky-ok { overflow: visible; } .v3 .table-wrap.sticky-ok table.t thead { position: sticky; top: 73px; z-index: 8; } .v3 .table-wrap.sticky-ok table.t thead th { background: rgba(252, 253, 251, .97); box-shadow: 0 1px 0 var(--hairline); } @media (max-width: 640px) { .v3 .table-wrap.sticky-ok table.t thead { top: 65px; } } /* The list of runners has to fit the width of the page also for admins (more columns), otherwise the head of the table cannot stay on the screen */ .v3 table.t.runners-t th, .v3 table.t.runners-t td { padding-left: 8px; padding-right: 8px; } .v3 table.t.runners-t td.wrap { min-width: 190px; } @media (max-width: 700px) { .v3 table.t.runners-t td.wrap { min-width: 0; } } /* A copy of the head of a wide table (the one with the horizontal scroll), fixed under the toolbar while the real head is out of the screen */ .v3 .sticky-clone, body > .sticky-clone { position: fixed; z-index: 55; overflow: hidden; pointer-events: none; box-shadow: 0 1px 0 var(--hairline), 0 8px 14px -10px rgba(0, 0, 0, .18); } .v3 .sticky-clone[hidden] { display: none; } .v3 .sticky-clone .sc-inner { will-change: transform; } .v3 .sticky-clone table.t { table-layout: fixed; width: auto; } .v3 .sticky-clone table.t thead th { background: rgba(252, 253, 251, .98); } .v3 .sticky-clone a { pointer-events: auto; } /* All the tables of the site: the font of the list of runners (cells 15px, heads 12px, the second lines 13px) */ .v3 table.t td, .v3 table.t td[class], .v3 table.history-t td, .v3 .klb-regions td { font-size: var(--fs-base); } .v3 table.t th, .v3 table.t th[class], .v3 table.history-t th, .v3 .klb-regions th, .v3 table.t th .sort-link { font-size: var(--fs-xs); } .v3 table.t td .sub, .v3 .results-t td .sub { font-size: var(--fs-sm); } /* The table of the teams of KLBMatch: the columns have fixed widths, so that "№" and "Команда" stay in the same place when the tabs (all, medium, small, second teams) are switched */ .v3 table.t.teams-t { table-layout: fixed; width: 100%; } .v3 table.t.teams-t th:nth-child(1), .v3 table.t.teams-t td:nth-child(1) { width: 64px; } .v3 table.t.teams-t th:nth-child(2), .v3 table.t.teams-t td:nth-child(2) { width: auto; white-space: normal; } .v3 table.t.teams-t th:nth-child(3), .v3 table.t.teams-t td:nth-child(3) { width: 150px; } .v3 table.t.teams-t th:nth-child(4), .v3 table.t.teams-t td:nth-child(4) { width: 220px; } .v3 table.t.teams-t th:nth-child(5), .v3 table.t.teams-t td:nth-child(5), .v3 table.t.teams-t th:nth-child(6), .v3 table.t.teams-t td:nth-child(6), .v3 table.t.teams-t th:nth-child(7), .v3 table.t.teams-t td:nth-child(7) { width: 120px; } @media (max-width: 640px) { .v3 table.t.teams-t { table-layout: auto; } .v3 table.t.teams-t th:nth-child(n), .v3 table.t.teams-t td:nth-child(n) { width: auto; } } /* The head of KLBMatch: the button "Заявиться" and the choice of the season are one under the other, of the same width and size */ .v3 .klb-actions { display: grid; gap: 8px; justify-items: stretch; min-width: 190px; } .v3 .klb-actions .drop { display: block; } .v3 .klb-actions .btn { width: 100%; justify-content: center; } .v3 .klb-actions .drop > button { justify-content: space-between; } /* The head of KLBMatch: the sections and the choice of the season are on one level, the season is at the right edge under "Заявиться" */ .v3 .klb-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; } .v3 .klb-bar .klb-nav { margin-top: 0; } .v3 .klb-bar .drop { display: block; } .v3 .klb-bar .drop > button { min-width: 190px; justify-content: space-between; } .v3 .klb-actions { min-width: 190px; } /* The menu "Для редакторов" on a phone opens to the left from its button and never goes out of the screen */ @media (max-width: 700px) { .v3 .drop-more-list { left: auto; right: 0; min-width: 0; width: min(300px, calc(100vw - 40px)); } } /* "My plans": the link "убрать" in a row, the block of the past starts is collapsible */ .v3 .plan-remove { font-size: var(--fs-sm); color: var(--text-2); white-space: nowrap; } .v3 .plan-remove:hover { color: var(--red); } .v3 .plan-list .plan-side { align-items: center; } .v3 details.past-plans > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 12px; } .v3 details.past-plans > summary::-webkit-details-marker { display: none; } .v3 details.past-plans > summary h2 { margin: 0; } .v3 details.past-plans[open] > summary { margin-bottom: 10px; } .v3 details.past-plans > summary::after { content: '▾'; margin-left: auto; color: var(--text-3); } .v3 details.past-plans[open] > summary::after { content: '▴'; } /* The page of a series */ .v3 .series-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px 32px; margin-top: 16px; } .v3 dl.series-kv { margin: 0; grid-template-columns: 130px minmax(0, 1fr); } .v3 .series-hero-side { display: grid; gap: 12px; align-content: start; justify-items: end; text-align: right; } .v3 .series-logo { max-height: 160px; max-width: 100%; border-radius: var(--r-sm); } .v3 .series-links { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; } .v3 .series-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--fs-sm); } .v3 h2.series-h { margin: 28px 0 12px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } .v3 h2.series-h .small { font-weight: 500; font-size: var(--fs-md); } .v3 .series-next-notes { margin-top: 12px; } .v3 .series-next-notes p { margin: 0 0 6px; } .v3 table.series-t .split-bar.sm, .v3 .split-bar.sm { display: flex; height: 6px; min-width: 70px; margin: 4px 0 2px; margin-left: auto; width: 90px; } .v3 table.t tr.event-total td { background: rgba(118, 118, 128, .06); } .v3 table.t th.girl-head { color: #b3446c; } @media (max-width: 900px) { .v3 .series-hero-grid { grid-template-columns: minmax(0, 1fr); } .v3 .series-hero-side { justify-items: start; text-align: left; } .v3 .series-links { justify-content: flex-start; } } /* The page "what a club gets": the text in cards of a readable width */ .v3 .club-about { max-width: 920px; margin: 0 auto; } .v3 .prose-card p, .v3 .prose-card li { line-height: 1.6; } .v3 .prose-card ol { padding-left: 22px; display: grid; gap: 8px; margin: 0 0 12px; } .v3 .prose-card p:last-child { margin-bottom: 0; } /* Records of age groups: the table with a cell per distance, the lists of links */ .v3 .rec-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; align-items: start; } .v3 table.records-t td.rec-cell { vertical-align: top; line-height: 1.35; } .v3 table.records-t td.rec-cell .rec-res { margin-top: 2px; font-weight: 600; } .v3 table.records-t td.age-col, .v3 table.records-t th.age-col { text-align: center; font-weight: 700; font-size: var(--fs-xl); background: rgba(0, 0, 0, .025); } .v3 table.records-t th.age-col { font-size: var(--fs-sm); } .v3 table.records-t tr.young td { background: #fff8e1; } .v3 .rec-notes p { font-size: var(--fs-sm); margin-bottom: 6px; } .v3 .rec-links-group { margin-bottom: 14px; display: grid; gap: 4px; } .v3 .rec-links-group a { display: block; } .v3 .rec-useful p { margin-bottom: 8px; } @media (max-width: 800px) { .v3 .rec-two { grid-template-columns: 1fr; } } .v3 table.records-t .rec-name, .v3 table.records-t .rec-city, .v3 table.records-t th .sub { display: block; } .v3 table.records-t .rec-city { font-size: var(--fs-sm); color: #636366; } .v3 table.records-t th .sub { text-transform: none; letter-spacing: 0; font-weight: 400; margin-top: 1px; } /* About the site: the contents as chips, the team table */ .v3 .about-toc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .v3 .about-toc .chip-link { white-space: nowrap; padding: 5px 10px; font-size: var(--fs-sm); } .v3 .site-about section[id] { scroll-margin-top: 90px; } .v3 .site-about .prose-card h3 { font-size: var(--fs-lg); margin: 18px 0 6px; } .v3 .site-about .prose-card ul.reg-list { margin: 0 0 12px; } .v3 table.team-t td { white-space: normal; vertical-align: top; } .v3 table.team-t td.nobr { white-space: nowrap; font-weight: 600; } .v3 .club-about.site-about { max-width: 1137px; } /* The hero of the home page: edge to edge, right below the toolbar, white text on the green veil over the photo */ .v3.has-hero main { padding-top: 0; } /* The toolbar of the home page as on racescout.ai: over the hero it is transparent with white text, after the first scroll (.is-scrolled, probeg.js) it becomes the glass with dark text; the opened menu of a compact toolbar is always the glass */ .v3.has-hero .toolbar { position: fixed; top: 0; left: 0; right: 0; transition: background .2s, border-color .2s, box-shadow .2s, backdrop-filter .2s; } .v3.has-hero .toolbar:not(.is-scrolled):not(.menu-open) { background: transparent; border-bottom-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .v3.has-hero .toolbar.is-scrolled, .v3.has-hero .toolbar.menu-open { background: rgba(255, 255, 255, .72); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); } .v3.has-hero .toolbar:not(.is-scrolled):not(.menu-open) :is(.logo, .nav > a, .nav .drop > button, .account-mini, .burger, .search-btn, .icon-btn) { color: rgba(255, 255, 255, .92); } .v3.has-hero .toolbar:not(.is-scrolled):not(.menu-open) :is(.logo, .nav > a, .nav .drop > button, .account-mini):hover { color: #fff; } .v3.has-hero .toolbar:not(.is-scrolled):not(.menu-open) :is(.role-btn, .account) { color: #fff; } .v3.has-hero .toolbar:not(.is-scrolled):not(.menu-open) .role-btn:hover, .v3.has-hero .toolbar:not(.is-scrolled):not(.menu-open) .drop.open > .role-btn { background: rgba(255, 255, 255, .18); } .v3.has-hero .toolbar:not(.is-scrolled):not(.menu-open) .account .name > span + span, .v3.has-hero .toolbar:not(.is-scrolled):not(.menu-open) .account-mini .name > span + span { color: rgba(255, 255, 255, .82); } .v3.has-hero .toolbar:not(.is-scrolled):not(.menu-open) .toolbar-divider { background: rgba(255, 255, 255, .35); } .v3.has-hero .toolbar:not(.is-scrolled):not(.menu-open) .nav > a.active::after, .v3.has-hero .toolbar:not(.is-scrolled):not(.menu-open) .nav .drop > button.active::after { background: #fff; } .v3.has-hero .home-hero { margin: 0 calc(-1 * var(--gutter)) 22px; padding: calc(73px + 90px) var(--gutter) 90px; border-radius: 0; box-shadow: none; } .v3.has-hero .home-hero::after { background: radial-gradient(ellipse 55% 75% at 50% 50%, rgba(18, 66, 28, .3), transparent 100%); } .v3.has-hero .home-hero h1, .v3.has-hero .home-hero .lead { color: #fff; text-shadow: none; } .v3.has-hero .home-hero .lead { color: rgba(255, 255, 255, .95); } .v3.has-hero .hero-eyebrow { color: #e3f7da; } @media (max-width: 560px) { .v3.has-hero .home-hero { padding: calc(64px + 40px) var(--gutter) 56px; border-radius: 0; } } .v3 .home-search .btn { background: #fff; color: var(--accent-text); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); } .v3 .home-search .btn:hover { background: #f2f9ef; } /* The cards "Ближайшие забеги" on a phone: the pencil and the layers (admins) in the right top corner, the rating in the right bottom corner with "все оценки" on its left */ @media (max-width: 640px) { .v3 .home-section .calendar-item { position: relative; } .v3 .home-section .calendar-item:has(.admin) .calendar-body { padding-right: 70px; } .v3 .home-section .calendar-side { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; padding-left: 0; margin-top: -4px; text-align: right; } .v3 .home-section .calendar-side .admin { position: absolute; top: 8px; right: 8px; margin: 0; } .v3 .home-section .calendar-side .rating { display: flex; flex-direction: row-reverse; align-items: center; gap: 10px; margin-top: 0; } .v3 .home-section .calendar-side .rating .rate-admin { margin-left: 0; } } /* The button "Найти" in the hero: the glass button as "Browse all races" on racescout.ai (white text, a thin white outline, a light veil with blur) */ .v3.has-hero .home-hero .home-search .btn { color: #fff; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: 999px; font-weight: 600; } .v3.has-hero .home-hero .home-search .btn:hover { color: #fff; background: rgba(255, 255, 255, .18); } /* The home page: the link "все оценки" is not shown in the cards of the nearest races */ .v3 .home-section .calendar-side .rating .rate-admin { display: none; } /* The typed demonstration in the search line of the hero (home-search.js) */ .v3 .home-search-demo { position: absolute; left: 47px; top: 0; bottom: 0; display: flex; align-items: center; pointer-events: none; font-size: var(--fs-lg); color: var(--text-3); white-space: nowrap; } .v3 .home-search-demo[hidden] { display: none; } .v3 .home-search-typed { color: #3a3a3c; } .v3 .home-search-caret { width: 2px; height: 1.2em; margin-left: 1px; background: #3a3a3c; animation: homeCaret 1.05s steps(1) infinite; } .v3 .home-search-box.demo-on input::placeholder { color: transparent; } @keyframes homeCaret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } } /* The list of suggestions of the search line is above the numbers of the hero */ .v3 .home-hero-text { z-index: 2; } /* The hero as on racescout.ai: the text is on the left, the head is bigger, the numbers in a row with thin lines between them */ .v3.has-hero .home-hero { text-align: left; } .v3.has-hero .home-hero-text { margin-inline: 0; justify-items: start; max-width: 1100px; } .v3.has-hero .home-hero h1 { font-size: clamp(36px, 5vw, 66px); line-height: 1.04; letter-spacing: -.035em; margin-bottom: 18px; } .v3.has-hero .home-hero .lead { margin-inline: 0; font-size: var(--fs-xl); max-width: 640px; } .v3.has-hero .home-search { margin-inline: 0; width: min(640px, 100%); } .v3.has-hero .home-search-box { text-align: left; } .v3.has-hero .home-stats { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 20px 0; max-width: none; margin: 72px 0 0; text-align: left; } .v3.has-hero .home-stat { padding: 2px 44px; border-left: 1px solid rgba(255, 255, 255, .32); } .v3.has-hero .home-stat:first-child { padding-left: 0; border-left: 0; } @media (max-width: 700px) { .v3.has-hero .home-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 0; margin-top: 44px; } .v3.has-hero .home-stat { padding: 2px 18px; } .v3.has-hero .home-stat:nth-child(odd) { padding-left: 0; border-left: 0; } } /* The hero: the text is a little away from the left edge, a thin horizontal line above the numbers */ .v3.has-hero .home-hero { padding-inline: clamp(var(--gutter), 7vw, 120px); } .v3.has-hero .home-stats { width: 100%; margin-top: 56px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, .32); } @media (max-width: 700px) { .v3.has-hero .home-stats { margin-top: 36px; padding-top: 24px; } } /* The login button over the hero: the glass button, as "Найти" (the same look); on the glass toolbar after the scroll it is the ordinary one */ .v3.has-hero .toolbar:not(.is-scrolled):not(.menu-open) .toolbar-actions > .btn { color: #fff; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-weight: 600; } .v3.has-hero .toolbar:not(.is-scrolled):not(.menu-open) .toolbar-actions > .btn:hover { color: #fff; background: rgba(255, 255, 255, .18); } /* === The home page, the second design: three columns of the same height, the green band of registrations, white tiles ============== */ .v3 .hm-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 20px; align-items: stretch; margin-bottom: 26px; } .v3 .hm-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 18px 20px; border-radius: 16px; background: rgba(255, 255, 255, .82); box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 24px -16px rgba(0, 0, 0, .2); } .v3 .hm-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 10px; } .v3 .hm-h h2 { margin: 0; font-size: var(--fs-2xl); letter-spacing: -.015em; } .v3 .hm-h a { flex: none; font-size: var(--fs-md); color: var(--accent-text); } .v3 .hm-sub { margin: 14px 0 4px; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .05em; font-weight: 650; } .v3 .hm-sub, .v3 .hm-sub a { color: var(--text-3); } .v3 .hm-sub.first { margin-top: 2px; } .v3 .hm-card .hm-more { display: block; margin: auto 0 0; padding-top: 12px; font-size: var(--fs-md); line-height: 1.4; color: var(--accent-text); font-weight: 600; } /* the same in all the cards: the link is at the bottom, on one line */ /* the news: all the pages lie in one cell, so the card is as high as the biggest of them */ .v3 .hm-slides { display: grid; flex: 1; } .v3 .hm-slide { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 6px; opacity: 0; visibility: hidden; transition: opacity .45s; } .v3 .hm-slide.is-on { opacity: 1; visibility: visible; } .v3 .hm-slide.hm-four { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; align-content: start; } .v3 .hm-img { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #e6f3df; } .v3 .hm-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .v3 .hm-slide > .hm-img { margin-bottom: 4px; } .v3 .hm-rub { font-size: var(--fs-sm); font-weight: 600; color: var(--accent-text); } .v3 .hm-slide h3 { margin: 0; font-size: var(--fs-2xl); line-height: 1.2; letter-spacing: -.015em; } .v3 .hm-slide h3 a { color: var(--text); } .v3 .hm-slide p { margin: 0; color: var(--text-2); line-height: 1.45; } .v3 .hm-date { font-size: var(--fs-sm); color: var(--text-3); } .v3 .hm-sm { display: grid; gap: 5px; align-content: start; color: var(--text); } .v3 .hm-sm:hover { text-decoration: none; } .v3 .hm-sm b { font-size: var(--fs-base); line-height: 1.25; } .v3 .hm-sm .hm-img { aspect-ratio: 16 / 10; } .v3 .hm-bar { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; } .v3 .hm-bar .dot { position: relative; width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: #cfd5cc; cursor: pointer; overflow: hidden; transition: width .3s; } .v3 .hm-bar .dot.is-on { width: 38px; background: #cfe5c6; } .v3 .hm-bar .dot i { position: absolute; inset: 0; width: 0; background: #4aa152; border-radius: inherit; } .v3 .hm-bar .dot.is-on i { animation: hmFill 6s linear forwards; } .v3 .hm-news:hover .hm-bar .dot.is-on i { animation-play-state: paused; } @keyframes hmFill { to { width: 100%; } } @media (prefers-reduced-motion: reduce) { .v3 .hm-bar .dot.is-on i { animation: none; width: 100%; } .v3 .hm-slide { transition: none; } } .v3 .hm-arrow { position: absolute; top: 31%; z-index: 2; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 8px rgba(0, 0, 0, .2); font-size: 18px; line-height: 1; cursor: pointer; } .v3 .hm-arrow.prev { left: 10px; } .v3 .hm-arrow.next { right: 10px; } /* the leaders of KLBMatch */ .v3 .hm-list { list-style: none; margin: 0; padding: 0; } .v3 .hm-list li { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--hairline); } .v3 .hm-list li:first-child { border-top: 0; } .v3 .hm-list b { font-weight: 650; color: var(--text); } .v3 .hm-list .sub { display: block; font-size: var(--fs-sm); color: var(--text-3); } .v3 .hm-list .pts { font-variant-numeric: tabular-nums; font-weight: 700; } .v3 .hm-rk { display: grid; place-items: center; } .v3 .hm-list .rank { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #eef1ec; font-size: var(--fs-sm); font-weight: 700; color: var(--text-2); } /* the nearest races */ .v3 .hm-n { display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--hairline); color: var(--text); } .v3 .hm-n:first-of-type { border-top: 0; } .v3 .hm-n:hover { text-decoration: none; } .v3 .hm-d { text-align: center; background: #dff0d8; border-radius: 9px; padding: 3px 0; color: #2f6b31; line-height: 1.05; } .v3 .hm-d b { display: block; font-size: var(--fs-xl); } .v3 .hm-d i { font-style: normal; font-size: 10px; font-weight: 700; } .v3 .hm-nt { display: grid; min-width: 0; } .v3 .hm-nt b { font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v3 .hm-nt span { font-size: var(--fs-sm); color: var(--text-3); } .v3 .hm-r { white-space: nowrap; } .v3 .hm-r .rate-admin { display: none; } /* the open registrations: a wide green band */ .v3 .hm-regs { margin-bottom: 26px; padding: 22px 26px 24px; border-radius: 20px; border: 1px solid rgba(60, 118, 61, .25); background: linear-gradient(135deg, #d9efd0, #bfe3b2); } .v3 .hm-regs .hm-h h2 { color: #24572a; } .v3 .hm-regs .hm-h a { color: #24572a; font-weight: 650; } .v3 .hm-regs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; } .v3 .hm-reg { display: grid; gap: 4px; align-content: start; padding: 14px 16px; border-radius: 14px; background: #fff; color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); transition: transform .15s; } .v3 .hm-reg:hover { text-decoration: none; transform: translateY(-2px); } .v3 .hm-reg b { font-size: var(--fs-base); color: var(--accent-text); } .v3 .hm-reg .meta { font-size: var(--fs-sm); color: var(--text-2); } .v3 .hm-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; } .v3 .hm-tag { font-size: var(--fs-xs); padding: 2px 9px; border-radius: 999px; background: #eceeea; color: #4a4a4f; font-weight: 600; } .v3 .hm-tag.g { background: #dff0d8; color: #2f6b31; } /* what is on the portal: compact white tiles */ .v3 .hm-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 30px; } .v3 .hm-tile { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: center; padding: 14px 18px; border-radius: 14px; background: #fff; border: 1px solid rgba(0, 0, 0, .07); color: var(--text); transition: border-color .15s, box-shadow .15s; } .v3 .hm-tile:hover { text-decoration: none; border-color: rgba(0, 0, 0, .18); box-shadow: 0 4px 14px -8px rgba(0, 0, 0, .25); } .v3 .hm-ico { grid-row: 1 / 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #f4f4f2; color: #3a3a3c; } .v3 .hm-tile b { font-size: var(--fs-base); } .v3 .hm-tile span:not(.hm-ico) { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.35; } @media (max-width: 1100px) { .v3 .hm-grid { grid-template-columns: minmax(0, 1fr); } .v3 .hm-tiles { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .v3 .hm-tiles { grid-template-columns: 1fr; } .v3 .hm-slide.hm-four { grid-template-columns: 1fr; } .v3 .hm-regs { padding: 18px 16px; } } /* The hero of the home page, compact (variant A3): the text on the left, the search on the right, the numbers below in one row */ .v3.has-hero .home-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px 40px; align-items: center; padding: calc(73px + 30px) clamp(var(--gutter), 7vw, 120px) 34px; margin-bottom: 22px; } .v3.has-hero .home-hero-text { max-width: none; } .v3.has-hero .home-hero h1 { font-size: clamp(30px, 3.2vw, 46px); margin-bottom: 10px; } .v3.has-hero .home-hero .lead { font-size: var(--fs-md); margin-bottom: 0; max-width: 600px; } .v3.has-hero .home-hero .home-search { margin: 0; width: 100%; } .v3.has-hero .home-hero .home-search input { background: rgba(255, 255, 255, .94); } .v3.has-hero .home-hero .home-stats { grid-column: 1 / -1; margin: 6px 0 0; padding-top: 16px; } .v3.has-hero .home-hero .home-stat { padding: 2px 30px; } .v3.has-hero .home-hero .home-stat:first-child { padding-left: 0; } .v3.has-hero .home-hero .home-stat b { font-size: 26px; } .v3.has-hero .home-hero .home-stat span { font-size: var(--fs-sm); } @media (max-width: 1100px) { .v3.has-hero .home-hero { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 700px) { .v3.has-hero .home-hero { padding: calc(64px + 24px) var(--gutter) 28px; } .v3.has-hero .home-hero .home-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 0; } .v3.has-hero .home-hero .home-stat { padding: 2px 16px; } .v3.has-hero .home-hero .home-stat:nth-child(odd) { padding-left: 0; border-left: 0; } .v3.has-hero .home-hero .home-stat b { font-size: 24px; } } .v3.has-hero .home-hero .home-search { position: relative; z-index: 3; } /* the list of suggestions is above the numbers */ /* One column (a phone, a tablet): the card does not need to be as high as the biggest page of the news, only the open page takes the place */ @media (max-width: 1100px) { .v3 .hm-slide:not(.is-on) { display: none; } .v3 .hm-slide.is-on.fade { animation: hmFade .4s; } /* only for a page that is opened by an arrow or a dot, not by the finger */ } @keyframes hmFade { from { opacity: 0; } to { opacity: 1; } } /* The compact toolbar (a phone): the role of the person (Администратор, Редактор) stays as the icon of the shield on the left of the profile; on a wide screen the button keeps its word. NB: "is-wide" is only a mark of the measuring in probeg.js and is removed at its end, so ":not(.is-wide)" is true on a desktop too: it can be used only inside the media query of a narrow screen. */ .v3 .toolbar.is-compact .account-drop.role-drop { display: flex; order: -1; } .v3 .toolbar.is-compact .role-drop .role-text { display: none; } .v3 .toolbar.is-compact .role-drop .role-btn { padding: 8px; gap: 0; } .v3 .toolbar.is-compact .role-drop .role-btn svg { width: 22px; height: 22px; } .v3 .toolbar.is-compact .header-search.home-search { order: -2; } /* the magnifier stands left of the shield of the role */ @media (max-width: 1100px) { .v3 .toolbar:not(.is-wide) .header-search.home-search { order: -2; } .v3 .toolbar:not(.is-wide) .account-drop.role-drop { display: flex; order: -1; } .v3 .toolbar:not(.is-wide) .role-drop .role-text { display: none; } .v3 .toolbar:not(.is-wide) .role-drop .role-btn { padding: 8px; gap: 0; } .v3 .toolbar:not(.is-wide) .role-drop .role-btn svg { width: 22px; height: 22px; } } /* Login and registration */ .v3 .auth-page { max-width: 1100px; margin: 0 auto; } /* The login card is in the middle of the page, the registration is under it, also in the middle */ .v3 .auth-page > .page-head { text-align: center; } .v3 .auth-lead .logo { justify-content: center; margin: 0 auto 6px; width: fit-content; } /* the logo over the text: the same as in the header of the site (.logo) */ .v3 .auth-grid { display: flex; flex-direction: column; align-items: center; gap: 20px; } .v3 .auth-grid .auth-card { width: 100%; max-width: 560px; box-sizing: border-box; } .v3 .auth-grid .auth-card.auth-card-wide { max-width: 800px; padding-inline: 32px; } /* the card of the registration and the three tiles under it are of one width, 800 px: the fields are two in a line and there is not much white */ .v3 .auth-card { padding: 24px 26px; } .v3 .auth-card h2 { margin: 0 0 14px; font-size: var(--fs-2xl); letter-spacing: -.015em; } /* «Войти» and «Войти с VK ID» are in one line, of the same size */ .v3 .auth-login-actions { flex-wrap: nowrap; } .v3 .auth-login-actions .btn, .v3 .auth-login-actions .vkid-btn { flex: 1 1 0; width: auto; min-width: 0; height: 48px; box-sizing: border-box; border-radius: 12px; padding: 10px 16px; font-size: 16px; line-height: 1; } .v3 .set-form .form-actions.auth-reg-actions { justify-content: center; } .v3 .auth-reg-actions .btn { width: calc(50% - 5px); min-width: 0; height: 48px; box-sizing: border-box; border-radius: 12px; padding: 10px 16px; font-size: 16px; line-height: 1; } @media (max-width: 560px) { .v3 .auth-reg-actions .btn { width: 100%; } } /* The «eye» in a password field (password-eye.js) */ .v3 .pw-wrap { position: relative; display: block; } .v3 .pw-wrap input { padding-right: 46px; } .v3 .pw-eye { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--text-3); cursor: pointer; } .v3 .pw-eye:hover { color: var(--text); background: rgba(118, 118, 128, .12); } .v3 .pw-eye:focus-visible { outline: 2px solid #5cb85c; outline-offset: 1px; } .v3 .auth-error { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: var(--red-soft); color: var(--red); font-weight: 550; } .v3 .auth-links { margin: 12px 0 0; color: var(--text-3); text-align: center; } .v3 .auth-switch { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--hairline); text-align: center; color: var(--text-2); font-size: var(--fs-md); } /* «Нет аккаунта? Зарегистрироваться» and «Уже есть аккаунт? Войти» under the form */ .v3 .auth-switch a { font-weight: 600; } .v3 .auth-card .auth-card-lead { margin: -6px 0 16px; line-height: 1.45; } /* the line of explanation under the title of a card (the reset of the password) */ .v3 .auth-consent { margin: 12px 0 0; text-align: center; line-height: 1.4; } /* «Регистрируясь на сайте…» right under the form of the registration */ .v3 .auth-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--text-3); font-size: var(--fs-sm); } .v3 .auth-or::before, .v3 .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--hairline); } /* The button of VK ID after the rules of VK (id.vk.ru, design rules): the primary button #0077FF, white logo and text, the logo and the text in the center, the height 48 px (the large size 48-56), the logo 28, the font 16, nothing of the colour changes; the space in "VK ID" is not broken */ .v3 .vkid-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; box-sizing: border-box; padding: 10px 16px; border: 0; border-radius: 12px; background: #0077FF; color: #fff; font: inherit; font-size: 16px; font-weight: 500; line-height: 1; cursor: pointer; transition: box-shadow .15s, transform .08s; } .v3 .vkid-btn:hover { color: #fff; text-decoration: none; box-shadow: 0 6px 16px -6px rgba(0, 119, 255, .7); } .v3 .vkid-btn:active { transform: scale(.99); } .v3 .vkid-btn:focus-visible { outline: 2px solid #0077FF; outline-offset: 2px; } .v3 .vkid-logo { flex: none; } @media (max-width: 480px) { .v3 .auth-login-actions .btn, .v3 .auth-login-actions .vkid-btn { font-size: 14px; padding: 10px 8px; white-space: nowrap; } .v3 .auth-login-actions .vkid-btn { gap: 6px; } .v3 .auth-login-actions .vkid-logo { width: 22px; height: 22px; } } @media (max-width: 360px) { .v3 .auth-login-actions .btn, .v3 .auth-login-actions .vkid-btn { font-size: 13px; } .v3 .auth-login-actions .vkid-logo { display: none; } } .v3 .auth-reg-grid { grid-template-columns: 1fr 1fr; } .v3 .auth-wide { grid-column: 1 / -1; } .v3 .auth-agree { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font-size: var(--fs-md); } .v3 .auth-agree input { margin-top: 3px; flex: none; } /* the consent of the registration is a switch: the text and the toggle are on one line (the middle of the toggle is the middle of the text); the pair is in the middle of the card */ .v3 .switch.auth-agree { align-items: center; justify-content: center; gap: 14px; padding: 0; border-top: 0; margin-top: 16px; text-align: center; } .v3 .switch.auth-agree input { margin-top: 0; } .v3 .switch.auth-agree .switch-title a { text-decoration: underline; text-underline-offset: 2px; } @media (max-width: 480px) { .v3 .switch.auth-agree { flex-direction: column; gap: 10px; } } /* on a phone the text takes two lines and the whole width: the toggle is under it, both are in the middle */ .v3 .auth-about { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 44px auto 0; max-width: 800px; } /* the three tiles are under the form of the registration, a little lower */ .v3 .auth-tile { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 28px 22px 24px; border-radius: 22px; background: rgba(255, 255, 255, .78); border: 1px solid rgba(0, 0, 0, .06); box-shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 14px 32px -18px rgba(40, 110, 50, .28); font-size: var(--fs-md); line-height: 1.45; text-align: center; } /* The tiles of the newcomers under the form of the registration: the round green icon on the top, the title, the line, a thin rule and the numbers of the site; on a phone a tile is a row (the icon on the left) */ .v3 .auth-tile-ico { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: #2f7a3a; background: linear-gradient(160deg, #eef8e9 0%, #d3ebca 100%); box-shadow: inset 0 0 0 1px rgba(60, 118, 61, .14), 0 6px 14px -8px rgba(60, 118, 61, .5); } .v3 .auth-tile-ico svg { width: 30px; height: 30px; } .v3 .auth-tile-text { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; flex: 1; width: 100%; } .v3 .auth-tile b { font-size: var(--fs-xl); font-weight: 650; letter-spacing: -.01em; line-height: 1.25; } .v3 .auth-tile-text > span:not(.muted) { color: var(--text-2); } .v3 .auth-tile .muted { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--hairline); font-size: var(--fs-sm); width: 100%; } @media (min-width: 721px) { .v3 .auth-tile .muted { min-height: 5.3em; box-sizing: border-box; } } /* the numbers of the three tiles are of the same height: the thin rules are on one level */ .v3 .auth-tile .muted a { color: var(--accent-text); font-weight: 650; text-decoration: none; font-variant-numeric: tabular-nums; } .v3 .auth-tile .muted a:hover { text-decoration: underline; } @media (max-width: 720px) { .v3 .auth-about { margin-top: 36px; } .v3 .auth-tile { flex-direction: row; align-items: flex-start; gap: 14px; padding: 18px 16px; text-align: left; border-radius: 18px; } .v3 .auth-tile-ico { width: 52px; height: 52px; } .v3 .auth-tile-ico svg { width: 26px; height: 26px; } .v3 .auth-tile-text { align-items: flex-start; gap: 6px; } .v3 .auth-tile b { font-size: var(--fs-base); } .v3 .auth-tile .muted { margin-top: 4px; } } .v3 .auth-foot { margin: 18px 0 0; text-align: center; } @media (max-width: 900px) { .v3 .auth-about { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { .v3 .auth-reg-grid { grid-template-columns: minmax(0, 1fr); } .v3 .auth-card { padding: 18px 16px; } } /* Common problems with the login: the numbers of the cards */ .v3 .login-problems h2 { display: flex; align-items: center; gap: 12px; } .v3 .login-problems .lp-n { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-size: var(--fs-md); font-weight: 700; } .v3 .login-problems code { padding: 1px 6px; border-radius: 6px; background: #f1f2ef; font-size: .92em; word-break: break-word; } .v3 .password-page.login-problems { max-width: 760px; } /* The ids of the runner in the editor: all the fields on one line (the hints under the fields do not push the others down) */ .v3 .set-grid.ids-grid { align-items: start; } /* The links of a runner in the list: two rows (user, KLB / parkrun, 5 versts); 5 versts is light blue */ .v3 .runner-tags { vertical-align: middle; } .v3 .runner-tags .tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 3px; width: 128px; } /* two marks in a line: the third goes down (the five marks of a runner take three lines) */ .v3 .runner-tags .tag-row + .tag-row { margin-top: 4px; } .v3 .runner-tags .tag.verst { background: #dbeafb; color: #1f5f99; } .v3 .runner-tags .tag.s95 { background: #d6d6ee; color: #2a2951; } /* S95 is in the colour of their site, the deep iris */ /* The page of a race: the row at the bottom of the head with the previous and the next event of the series (the arrows are in the corners of the row) */ .v3 .race-pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hairline); } .v3 .race-nav { display: inline-flex; align-items: center; gap: 12px; min-width: 0; color: var(--text); } .v3 .race-nav:hover { text-decoration: none; } .v3 .race-nav .arr { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .18), 0 0 0 1px rgba(0, 0, 0, .04); font-size: 24px; line-height: 1; padding-bottom: 3px; box-sizing: border-box; transition: background .15s, color .15s, transform .15s; } .v3 .race-nav:hover .arr { background: var(--accent-soft); color: var(--accent-text); } .v3 .race-nav.prev:hover .arr { transform: translateX(-3px); } .v3 .race-nav.next:hover .arr { transform: translateX(3px); } .v3 .race-nav .txt { display: grid; line-height: 1.25; min-width: 0; } .v3 .race-nav.next .txt { text-align: right; } .v3 .race-nav small { font-size: var(--fs-sm); color: var(--text-3); } .v3 .race-nav b { font-size: var(--fs-md); font-weight: 650; } .v3 .race-nav .txt { max-width: min(46vw, 460px); } .v3 .race-nav small, .v3 .race-nav b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 560px) { .v3 .race-nav { gap: 8px; } .v3 .race-nav .txt { max-width: 34vw; } } /* === Toasts: the messages of the site. In the left top corner, a soft fill by the state (the white icon in a coloured circle), no outline, every sentence on a new line === */ .v3 .toasts { position: fixed; bottom: 56px; left: var(--gutter); z-index: 120; display: grid; justify-items: start; gap: 8px; width: min(440px, calc(100% - 2 * var(--gutter))); pointer-events: none; } .v3 .toast { display: flex; align-items: flex-start; gap: 10px; width: 100%; box-sizing: border-box; padding: 10px 10px 10px 12px; border: 0; border-radius: 12px; font-size: var(--fs-md); line-height: 1.38; font-weight: 550; pointer-events: auto; background: #e3f4dd; color: #1f4d22; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .22); animation: toast-life 6s ease forwards; } .v3 .toast.info, .v3 .toast.debug { background: #e2eefb; color: #1d4468; } .v3 .toast.warning { background: #fdf0cf; color: #5a4100; animation-duration: 9s; } .v3 .toast.error, .v3 .toast.danger { background: #fbe3e0; color: #7d1d17; animation-duration: 10s; } .v3 .toast:hover { animation-play-state: paused; } .v3 .toast .t-ico { flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin-top: -1px; border-radius: 50%; background: #4aa152; } .v3 .toast.info .t-ico, .v3 .toast.debug .t-ico { background: #4a90d9; } .v3 .toast.warning .t-ico { background: #e5a223; } .v3 .toast.error .t-ico, .v3 .toast.danger .t-ico { background: #d9534f; } .v3 .toast .t-ico svg { display: block; } .v3 .toast-text { flex: 1; min-width: 0; padding-top: 2px; } .v3 .toast-text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .v3 .toast-x { flex: none; width: 24px; height: 24px; margin: -1px 0 0; border: 0; border-radius: 50%; background: transparent; color: inherit; opacity: .55; font-size: 20px; line-height: 1; cursor: pointer; } .v3 .toast-x:hover { background: rgba(0, 0, 0, .08); opacity: 1; } /* on a phone the notices are at the top, under the header, as before (on a wide screen they are at the bottom left) */ @media (max-width: 720px) { .v3 .toasts { top: 88px; bottom: auto; } } @keyframes toast-life { 0% { opacity: 0; transform: translateX(-14px); } 6% { opacity: 1; transform: translateX(0); } 88% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-8px); visibility: hidden; } } @media (prefers-reduced-motion: reduce) { .v3 .toast { animation-name: toast-life-still; } @keyframes toast-life-still { 0%, 90% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } } } /* The page of a club: the head as the profile of a runner (the banner, the emblem as a round avatar over its edge); the emblem keeps its shape inside the circle */ .v3 .club-info .avatar-img.club-logo { object-fit: contain; background: #fff; padding: 6px; box-sizing: border-box; } .v3 .club-info .event-kicker { margin-bottom: 2px; } .v3 .club-info .runner-info-body > .row { margin-top: 16px; flex-wrap: wrap; } /* The head of a club: the mark "the information is up to date" after the name, the visibility of the club (for admins and editors) in the banner */ .v3 .club-verified { display: inline-flex; vertical-align: middle; margin-left: 4px; cursor: help; } .v3 .club-verified .verified-ico { width: 28px; height: 28px; } .v3 .runner-banner-actions { display: flex; align-items: center; gap: 8px; } .v3 .club-visibility { display: inline-flex; vertical-align: middle; margin-left: 4px; cursor: help; } .v3 .club-visibility .vis-ico { width: 28px; height: 28px; } /* A thin line inside a list of data (a grid dl): a new group begins after it */ .v3 dl.kv .kv-sep { grid-column: 1 / -1; height: 1px; margin: 5px 0 3px; background: var(--hairline); } /* The name of the edited object in the head of an editor goes to a new line under the word "Редактирование" */ .v3 .page-head h1 .muted.sub-line { display: block; margin-top: 4px; } /* The page "Кто сколько чего сделал": the choice of a month by chips, a wide table with the fixed header and the fixed column of the names, the zeros are pale */ .v3 .aws-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; } .v3 .chip-tab { padding: 6px 13px; border: 0; border-radius: 999px; background: rgba(118, 118, 128, .12); color: var(--text-2); font: inherit; font-size: var(--fs-md); font-weight: 550; cursor: pointer; } .v3 .chip-tab:hover { background: rgba(118, 118, 128, .2); } .v3 .chip-tab.active { background: var(--accent-soft); color: var(--accent-text); box-shadow: 0 0 0 1.5px var(--accent); } .v3 .aws-wrap { max-height: calc(100vh - 260px); overflow: auto; } .v3 table.aws-t { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; } .v3 table.aws-t th, .v3 table.aws-t td { padding: 8px 10px; white-space: nowrap; } .v3 table.aws-t thead th { position: sticky; z-index: 2; background: #f8f9f6; text-align: center; font-size: var(--fs-xs); } .v3 table.aws-t thead tr:first-child th { top: 0; } .v3 table.aws-t thead tr.aws-sub th { top: 33px; text-align: right; color: var(--text-3); font-weight: 600; } .v3 table.aws-t .aws-name { position: sticky; left: 0; z-index: 1; background: #fff; text-align: left; min-width: 170px; font-weight: 600; } .v3 table.aws-t thead .aws-name { z-index: 4; background: #f8f9f6; } .v3 table.aws-t .aws-group { border-left: 1px solid var(--hairline); } .v3 table.aws-t th.gstart { border-left: 1px solid var(--hairline); } .v3 table.aws-t td.zero { color: #c0c3bd; } .v3 table.aws-t tbody tr:hover td { background: #f3faf0; } .v3 table.aws-t tbody tr:hover td.aws-name { background: #eaf6e4; } .v3 table.aws-t td:nth-last-child(2), .v3 table.aws-t td:last-child { font-weight: 700; background: #fafbf8; } .v3 table.aws-t tr.aws-total td { position: sticky; bottom: 0; z-index: 2; background: #eef7ea; font-weight: 700; border-top: 2px solid #cfe4c5; } .v3 table.aws-t tr.aws-total td.aws-name { z-index: 3; } .v3 table.aws-t td.num, .v3 table.aws-t th.num { text-align: right; font-variant-numeric: tabular-nums; } /* The box of the table has its own scroll and is not a ".table-wrap": the script of the fixed heads (probeg.js) counted the tables of the hidden months as narrow and took their scroll away */ .v3 .aws-wrap { overflow: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #b9c4b3 #eef1ec; } .v3 .aws-wrap::-webkit-scrollbar { height: 12px; width: 12px; background: #eef1ec; } .v3 .aws-wrap::-webkit-scrollbar-thumb { background: #b9c4b3; border-radius: 8px; border: 2px solid #eef1ec; } /* My payments: the status of a payment, the button of the payment next to it, the inactive rows (admins) are pale */ .v3 table.pay-t tr.inactive td { opacity: .6; } .v3 table.pay-t .pay-btn { margin-left: 6px; } /* The tabs of the editors of a race next to the tabs of the distances, as in the old page: a separate group, slightly tinted */ .v3 .segmented.editor-tabs { background: rgba(240, 173, 78, .16); } .v3 .segmented.editor-tabs a.active { color: #7a4a00; } /* The tab "подробно" of a race (for editors): the raw values of the protocol in brackets next to the values of the site */ .v3 .raw { color: var(--text-3); font-size: .92em; } .v3 table.editor-t th, .v3 table.editor-t td { white-space: nowrap; } .v3 table.editor-t td.wrap { white-space: normal; min-width: 180px; } /* The page "привязка к людям" of a race: the choice of the person in the table, the confirmation and the buttons of the claim */ .v3 table.claim-t select { width: 100%; min-width: 220px; max-width: 320px; } .v3 table.claim-t .claim-who { min-width: 240px; } .v3 table.claim-t .claim-who .check { display: flex; margin-top: 6px; font-size: var(--fs-sm); } .v3 .claim-actions { display: grid; gap: 14px; margin-top: 18px; } .v3 .claim-confirm { display: flex; align-items: flex-start; gap: 10px; } .v3 .claim-confirm input { margin-top: 4px; flex: none; } .v3 .claim-confirm ul { margin: 6px 0 0; } .v3 table.claim-t select { height: 38px; padding: 0 32px 0 12px; border: 1px solid var(--hairline); border-radius: 10px; background-color: #fff; font: inherit; font-size: var(--fs-md); color: var(--text); } /* The distances as the tabs of a browser right above the table: the active tab is of the colour of the card and grows into it */ .v3 .folder-tabs { display: flex; gap: 4px; margin: 20px 0 0; padding: 0 4px; overflow-x: auto; scrollbar-width: none; position: relative; z-index: 2; } .v3 .folder-tabs::-webkit-scrollbar { display: none; } .v3 .folder-tabs a { flex: none; padding: 10px 18px 11px; border-radius: 12px 12px 0 0; background: rgba(118, 118, 128, .13); color: var(--text-2); font-weight: 600; font-size: var(--fs-md); white-space: nowrap; margin-bottom: 0; transition: background .15s, color .15s; } .v3 .folder-tabs a:hover { background: rgba(118, 118, 128, .22); color: var(--text); text-decoration: none; } .v3 .folder-tabs a.active { background: #fcfdfb; color: var(--accent-text); box-shadow: 0 -2px 8px -4px rgba(0, 0, 0, .18); padding-top: 12px; margin-bottom: -1px; position: relative; z-index: 3; } .v3 .folder-tabs + section.card { margin-top: 0; border-top-left-radius: 0; position: relative; z-index: 1; } .v3 table.results-t th, .v3 table.results-t td { padding-left: 8px; padding-right: 8px; } .v3 table.results-t th:first-child, .v3 table.results-t td:first-child { padding-left: 14px; } .v3 table.results-t td { white-space: normal; } .v3 table.results-t td.num, .v3 table.results-t td.right, .v3 table.results-t td.nowrap { white-space: nowrap; } /* The winners among men and women in the facts: the gold medal is a column at the left of the name and of the line under it */ .v3 .fact.winner { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; } .v3 .fact.winner .medal { grid-row: 1 / 3; margin: 0; width: 30px; height: 38px; } .v3 .fact.winner b, .v3 .fact.winner span { grid-column: 2; } /* The view of the table (results / raw protocol / claim): at the right edge of the row, a little bigger, with the icons */ .v3 .race-tabs .segmented.editor-tabs { margin-left: auto; padding: 4px; } .v3 .race-tabs .segmented.editor-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; font-size: var(--fs-base); font-weight: 600; } .v3 .vt-ico { flex: none; opacity: .85; } @media (max-width: 640px) { .v3 .race-tabs .segmented.editor-tabs { margin-left: 0; width: 100%; } .v3 .race-tabs .segmented.editor-tabs a { padding: 8px 12px; } } .v3 .save-bar { gap: 10px; } .v3 .race-tabs:not(:has(a)) { display: none; } /* The finishers of a race: the bar of men (blue) and women (pink) with the numbers on it */ .v3 .gender-bar { display: flex; height: 22px; width: 190px; margin: 0; flex: none; border-radius: 999px; overflow: hidden; background: rgba(118, 118, 128, .12); } .v3 .gender-bar i { display: flex; align-items: center; justify-content: center; flex: 1 1 0; min-width: 26px; font-style: normal; font-size: var(--fs-sm); font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; } .v3 .gender-bar i.m { background: #4a8fd8; } .v3 .gender-bar i.f { background: #ee86ad; } .v3 table.t td.finishers { text-align: right; } .v3 .fin-cell { display: flex; align-items: center; justify-content: flex-end; gap: 12px; } .v3 .fin-cell b { min-width: 3.2em; text-align: right; } .v3 .etab[hidden] { display: none; } .v3 .etab-more { border-style: dashed; color: var(--accent-text); } .v3 .etab.etab-filled { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; } .v3 .etab.on, .v3 .etab.etab-filled.on { background: var(--text); color: #fff; border-color: var(--text); } /* The page of the protocol of an event (editor): three blocks at the top, then the table of the rows of the protocol */ .v3 .protocol-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; } .v3 .protocol-top .section { margin-bottom: 0; } .v3 .protocol-top h2 { font-size: var(--fs-lg); } /* The page of the protocol, the top part (the file in the rows, then the sheets on the left and the distance with the settings on the right): everything main is on one screen */ .v3 .pr-file, .v3 .pr-file.section { padding: 12px 18px; margin-top: 14px; margin-bottom: 14px; } /* as the gap between the blocks below */ .v3 .pr-file-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; } .v3 .pr-file-row + .pr-file-row { margin-top: 6px; } .v3 .pr-file-label { flex: none; min-width: 120px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); } .v3 .pr-file-row .pr-mark { margin-left: auto; } /* the protocol («скачать файл») and the button «Пометить как полностью обработанный» (red, as «Сбросить») are together at the right edge of the block */ .v3 .pr-work { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: stretch; } /* the three blocks are of one height (the highest sets it) and of nearly one width: the sheets are a little wider */ .v3 .pr-work.no-sheets { grid-template-columns: repeat(2, minmax(0, 1fr)); } .v3 .pr-work .section { margin: 0; padding: 14px 18px; } /* .section has the top margin of 20px: inside the grid it made the gap above the blocks twice as large */ .v3 .pr-work h2 { margin: 0 0 8px; font-size: var(--fs-lg); } .v3 .pr-right { display: contents; } /* the distance and the settings are the cells of the grid of .pr-work */ .v3 .pr-work > .section, .v3 .pr-right > .section { box-sizing: border-box; } /* the height is stretched by the grid (align-items: stretch), not by height: 100%: that one made the blocks go over the buttons below */ .v3 .pr-work { margin-bottom: 14px; } .v3 .pr-work .pr-settings { padding: 12px 16px; } .v3 .pr-settings .pr-note-line { margin: 0 0 8px; font-size: var(--fs-sm); color: var(--text-2); } .v3 .pr-settings .field { margin: 0 0 8px; gap: 3px; } .v3 .pr-settings .field > label { white-space: normal; font-weight: 500; } .v3 .pr-settings .field select, .v3 .pr-settings .field input { height: 34px; font-size: var(--fs-md); } /* the checkboxes of the settings are the switches of the site (as in «Мои данные»), smaller: they are the lines of one block */ .v3 .pr-settings .switch { padding: 7px 0; gap: 12px; align-items: flex-start; } .v3 .pr-settings .switch:first-of-type { border-top: 1px solid var(--hairline); } .v3 .pr-settings .switch-title { font-size: var(--fs-sm); line-height: 1.35; font-weight: 500; } .v3 .pr-settings .switch-hint { font-size: var(--fs-xs); margin-top: 1px; } .v3 .pr-settings .switch input { width: 36px; height: 22px; margin-top: 1px; } .v3 .pr-settings .switch input::after { top: 2px; left: 2px; width: 18px; height: 18px; } .v3 .pr-settings .switch input:checked::after { transform: translateX(14px); } .v3 .pr-work .sheets-list { margin-top: 8px; gap: 3px; } .v3 .pr-work .sheet-item { gap: 8px; padding: 4px 10px; border-radius: 10px; flex-wrap: wrap; } .v3 .pr-work .sheet-mark { width: 22px; height: 22px; font-size: var(--fs-xs); } .v3 .pr-work .sheet-name { font-size: var(--fs-md); } .v3 .pr-work .sheets-check .form-actions { margin-top: 10px; display: flex; justify-content: flex-end; } /* «Следующая дистанция» is at the right edge of the block */ .v3 .pr-work .pr-set, .v3 .pr-work .pr-chk, .v3 .pr-work p { margin-top: 0; margin-bottom: 8px; font-size: var(--fs-md); } .v3 .pr-work .pr-chk { margin-top: 6px; } @media (max-width: 1100px) { .v3 .pr-work, .v3 .pr-work.no-sheets { grid-template-columns: minmax(0, 1fr); } } /* the horizontal scroll of the table of the protocol: always in sight at the bottom of the window while the table is, and visible (the thin scroll of the system is hidden until the table is touched) */ .v3 .pr-hscroll { position: sticky; bottom: 0; z-index: 9; overflow-x: scroll; overflow-y: hidden; height: 16px; background: #eef1ec; border-top: 1px solid var(--hairline); border-radius: 0 0 var(--r) var(--r); scrollbar-width: auto; scrollbar-color: #9aa896 #eef1ec; } .v3 .pr-hscroll[hidden] { display: none; } .v3 .pr-hscroll > div { height: 1px; } .v3 .pr-hscroll::-webkit-scrollbar { height: 14px; background: #eef1ec; } .v3 .pr-hscroll::-webkit-scrollbar-thumb { background: #9aa896; border-radius: 8px; border: 3px solid #eef1ec; } .v3 .pr-table-card.pr-has-bar .table-wrap { scrollbar-width: none; } /* the table is scrolled by the bar at the bottom of the window (it stays in sight), its own scroll under the table is not drawn: there were two of them */ .v3 .pr-table-card.pr-has-bar .table-wrap::-webkit-scrollbar { display: none; } .v3 .pr-list { display: grid; gap: 6px; justify-items: start; } .v3 .pr-cur { color: var(--text); } .v3 .pr-link { border: 0; background: none; padding: 0; font: inherit; color: var(--accent-text); cursor: pointer; text-align: left; } .v3 .pr-link:hover { text-decoration: underline; } .v3 .pr-set select { margin-left: 6px; } .v3 .pr-chk { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; } .v3 .pr-chk input { margin-top: 3px; } .v3 .pr-buttons { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; margin: 14px 0; } /* «Обновить типы колонок» and «Загрузить результаты» are at the right edge; they are blue (.act-btn) when the admin has the blue buttons on */ .v3 .pr-table-card { padding: 8px 0; margin-top: 0; } /* .section has the top margin of 20px: the table is as far from the buttons as the buttons are from the blocks above (14px) */ .v3 table.protocol-t th, .v3 table.protocol-t td { padding: 6px 10px; font-size: var(--fs-md); vertical-align: top; white-space: normal; border: 1px solid rgba(60, 60, 67, .09); } .v3 table.protocol-t th { text-transform: none; letter-spacing: 0; color: var(--text); } .v3 table.protocol-t .pr-ctl { background: var(--accent-soft); white-space: nowrap; } .v3 table.protocol-t td.pr-used { background: rgba(0, 122, 255, .09); } .v3 table.protocol-t tr.pr-types td { background: rgba(118, 118, 128, .05); } .v3 table.protocol-t select { max-width: 170px; } .v3 table.protocol-t .pr-note { display: block; white-space: normal; margin-top: 4px; } @media (max-width: 1100px) { .v3 .protocol-top { grid-template-columns: minmax(0, 1fr); } } .v3 .protocol-top .sub-h { text-transform: none; letter-spacing: 0; font-size: var(--fs-lg); font-weight: 650; color: var(--text); margin: 18px 0 10px; } .v3 table.protocol-t tr.pr-female td { background: rgba(238, 134, 173, .16); } .v3 table.protocol-t tr.pr-female td.pr-ctl { background: rgba(238, 134, 173, .30); } /* Home page: the columns of the row are of one height. The news give the height; its picture grows to fill what is left under the text, the list of the nearest events scrolls inside the card, the leaders have more rows. */ .v3 .hm-slide > .hm-img { flex: 1 1 auto; } .v3 .hm-slide.is-text { align-self: start; border-left: 3px solid #7cc576; padding-left: 16px; } /* новость без фото: текстом сверху, черта только вдоль текста */ .v3 .hm-sm.is-text { grid-template-rows: auto; align-content: start; align-self: start; border-left: 3px solid #7cc576; padding-left: 10px; } .v3 .hm-slide.is-text .hm-rub { margin-top: 0; } .v3 .hm-slide.is-text h3 { font-size: var(--fs-4xl); line-height: 1.18; } .v3 .hm-slide.hm-four { grid-template-rows: 1fr 1fr; align-content: stretch; } .v3 .hm-sm { grid-template-rows: minmax(0, 1fr) auto auto auto; } .v3 .hm-sm .hm-img { aspect-ratio: auto; min-height: 90px; } .v3 .hm-slides { touch-action: pan-y; } .v3 .hm-near { min-height: 420px; } .v3 .hm-near-box { position: relative; flex: 1 1 auto; min-height: 0; } .v3 .hm-near .hm-slides { position: absolute; inset: 0; grid-template-rows: minmax(0, 1fr); } .v3 .hm-day-page { min-height: 0; gap: 0; } .v3 .hm-near-list { flex: 1 1 auto; min-height: 0; overflow: hidden; } .v3 .hm-near-box { margin: 0 34px; } .v3 .hm-near-list > .hm-n[hidden] { display: none; } .v3 .hm-day { padding: 2px 0 6px; } /* the head of a day is one line of one font and one colour: "23 октября, пятница (всего 20 забегов)" */ .v3 .hm-day b { font-size: var(--fs-xl); font-weight: 650; color: #2f6b31; } .v3 .hm-near .hm-bar { margin-top: 10px; } .v3 .hm-near .hm-bar .dot.is-on i { animation: none; width: 100%; } /* the days are not switched by themselves: the list needs time to read */ .v3 .hm-n { grid-template-columns: 1fr auto; padding: 6px 0; } @media (max-width: 1100px) { .v3 .hm-near { min-height: 0; } .v3 .hm-near-box { margin: 0 30px; } .v3 .hm-near-box { flex: none; } .v3 .hm-near .hm-slides { position: static; grid-template-rows: auto; } .v3 .hm-slide > .hm-img { flex: none; } } .v3 .hm-near .hm-arrow { top: 50%; margin-top: -17px; } /* The arrows of the carousels appear when the pointer is over the block (or the focus is in it); on the screens without a pointer they are always there */ @media (hover: hover) { .v3 .hm-news .hm-arrow, .v3 .hm-near .hm-arrow { opacity: 0; transition: opacity .2s; } .v3 .hm-news:hover .hm-arrow, .v3 .hm-near:hover .hm-arrow, .v3 .hm-news:focus-within .hm-arrow, .v3 .hm-near:focus-within .hm-arrow { opacity: 1; } } /* The search among the runners: the toggles of the filters of an admin take the colours of the marks in the column "Связи" when pressed; "only the exact ones" is in the same row, to the right */ .v3 .runners-search-checks { align-items: center; } .v3 .runners-search-checks .chip-toggle { margin-right: -16px; } .v3 .runners-search-checks .check-exact { margin-left: auto; } .v3 .chip-toggle.mk-user input:checked + span { background: #dff0d8; color: #3c763d; box-shadow: 0 0 0 1.5px #8cc17f; } .v3 .chip-toggle.mk-klb input:checked + span { background: #fff0c9; color: #7a5a14; box-shadow: 0 0 0 1.5px #e3c46b; } .v3 .chip-toggle.mk-parkrun input:checked + span { background: #ffe1c4; color: #a04a00; box-shadow: 0 0 0 1.5px #f2ab6d; } .v3 .chip-toggle.mk-verst input:checked + span { background: #dbeafb; color: #1f5f99; box-shadow: 0 0 0 1.5px #8fbbe6; } .v3 .chip-toggle.mk-s95 input:checked + span { background: #d6d6ee; color: #2a2951; box-shadow: 0 0 0 1.5px #8d8cb8; } .v3 .tag.parkrun { background: #ffe1c4; color: #a04a00; } /* parkrun is orange: in the column "Связи" and in the toggle of the filter */ /* The list of clubs: the filters are a separate card above the table */ .v3 .club-filters { display: grid; gap: 14px; margin: 18px 0 14px; padding: 18px 22px; } .v3 .club-filters-main { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 16px; } .v3 .club-filters .field label { display: block; margin-bottom: 4px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); } .v3 .club-f-search { flex: 1 1 280px; max-width: 460px; } .v3 .club-f-search .org-filter { width: 100%; } .v3 .club-f-region { flex: 0 1 280px; min-width: 200px; } .v3 .club-f-region select { width: 100%; } .v3 .club-filters-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .v3 .club-count { margin-left: auto; } .v3 .club-filters .btn[hidden], .v3 #clubEmpty[hidden] { display: none; } /* Who has visited the biggest number of the regions: two cards side by side, women are tinted pink */ .v3 .reg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; } .v3 .reg-card h2 { font-size: var(--fs-xl); margin: 0; } .v3 .reg-t th, .v3 .reg-t td { padding: 9px 12px; } .v3 .reg-t td.reg-place { width: 64px; } .v3 .reg-t tr.is-female td { background: rgba(238, 134, 173, .12); } .v3 .reg-t tbody tr.is-female:hover td { background: rgba(238, 134, 173, .2); } .v3 .reg-t .runner-ico { margin-left: 6px; vertical-align: -2px; } @media (max-width: 1000px) { .v3 .reg-grid { grid-template-columns: minmax(0, 1fr); } } .v3 .reg-one { max-width: 760px; } .v3 .reg-t tfoot td { border-top: 1px solid var(--hairline); border-bottom: 0; } .v3 .reg-bar-h, .v3 .reg-bar-cell { width: 34%; } .v3 .reg-bar { display: block; height: 8px; border-radius: 999px; background: rgba(118, 118, 128, .12); overflow: hidden; } .v3 .reg-bar i { display: block; height: 100%; border-radius: inherit; background: #5cb85c; } @media (max-width: 560px) { .v3 .reg-bar-h, .v3 .reg-bar-cell { display: none; } } .v3 .page-head h1 a { color: inherit; } /* Fresh results on the home page: always full rows (two rows): 5, 4, 3, 2 columns; the cards that do not make a full row are hidden */ .v3 .home-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); } @media (max-width: 1359px) { .v3 .home-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } .v3 .home-cards > .home-card:nth-child(n+9) { display: none; } } @media (max-width: 1019px) { .v3 .home-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .v3 .home-cards > .home-card:nth-child(n+7) { display: none; } } @media (max-width: 719px) { .v3 .home-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .v3 .home-cards > .home-card:nth-child(n+5) { display: none; } } @media (max-width: 479px) { .v3 .home-cards { grid-template-columns: minmax(0, 1fr); } .v3 .home-cards > .home-card:nth-child(n+4) { display: none; } } /* The page of all the results: the filters above the table, as on the page of races (filter-panel), in two full rows and the buttons in the third */ .v3 .results-filter .filter-grid { gap: 14px 20px; } .v3 .results-filter-actions { grid-column: span 2; margin-top: 0; align-self: end; min-height: 40px; flex-wrap: nowrap; } .v3 table.all-results-t td.wrap { min-width: 120px; } .v3 .results-claim { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .v3 table.all-results-t th, .v3 table.all-results-t td { padding: 8px 9px; font-size: var(--fs-md); } .v3 table.all-results-t td.wrap { max-width: 175px; } .v3 table.all-results-t th small { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-3); } .v3 table.all-results-t td.hide-md { font-size: var(--fs-sm); line-height: 1.35; } .v3 table.all-results-t td.hide-md.wrap { max-width: 150px; } /* On not very wide screens the city of the event is under its name, not in a column of its own */ .v3 .all-results-t .city-under { display: none; } @media (max-width: 1699px) { .v3 .all-results-t .col-city-wide { display: none; } .v3 .all-results-t .city-under { display: block; } } /* The cards of the fresh results look and react to the pointer as the tiles "Что есть на портале": a white card with a thin border and no shadow, on hover the border gets darker and a shadow appears (the glass shadow of the .glass class is taken off) */ .v3 .home-card { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid rgba(0, 0, 0, .07); border-radius: 14px; box-shadow: none; transition: border-color .15s, box-shadow .15s; } .v3 .home-card:hover { transform: none; border-color: rgba(0, 0, 0, .18); box-shadow: 0 4px 14px -8px rgba(0, 0, 0, .25); } /* The blocks "Вы организатор забега?" and "Как собрать свои результаты?" on a phone: the buttons and links are at the left edge, under the text */ @media (max-width: 700px) { .v3 .home-org-wide .hero-actions { justify-content: flex-start; } } /* The panel of the menu on a phone: its height is the visible part of the screen (the bars of the browser are counted) and it scrolls inside itself */ .v3 .toolbar.is-compact.menu-open .nav { max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: 28px; } /* The menu of an admin or an editor (the red shield) on a phone: a panel on the whole width under the toolbar, as the main menu has; the toolbar-inner is the box of the panel, so the button itself must not be the box */ @media (max-width: 1100px) { .v3 .toolbar:not(.is-wide) .role-drop { position: static; } .v3 .toolbar:not(.is-wide) .role-drop.open > .drop-menu { display: grid; position: absolute; top: 100%; left: 0; right: 0; gap: 2px; justify-items: start; min-width: 0; padding: 12px 20px 28px; max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; background: rgba(255, 255, 255, .97); border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0; box-shadow: var(--shadow-lg); } .v3 .toolbar:not(.is-wide) .role-drop.open > .drop-menu a { width: 100%; padding: 8px 0; } .v3 .toolbar:not(.is-wide) .role-drop.open > .drop-menu .drop-search { width: 100%; padding: 6px 0 0; } .v3 .toolbar:not(.is-wide) .role-drop.open > .drop-menu .drop-search input { width: 100%; } } .v3 .toolbar.is-compact .role-drop { position: static; } .v3 .toolbar.is-compact .role-drop.open > .drop-menu { display: grid; position: absolute; top: 100%; left: 0; right: 0; gap: 2px; justify-items: start; min-width: 0; padding: 12px 20px 28px; max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; background: rgba(255, 255, 255, .97); border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0; box-shadow: var(--shadow-lg); } .v3 .toolbar.is-compact .role-drop.open > .drop-menu a { width: 100%; padding: 8px 0; } .v3 .toolbar.is-compact .role-drop.open > .drop-menu .drop-search { width: 100%; padding: 6px 0 0; } .v3 .toolbar.is-compact .role-drop.open > .drop-menu .drop-search input { width: 100%; } /* The button "Загрузить результаты с 5 вёрст" is in the dark blue of 5 вёрст (the colour of their site) */ .v3 .btn.btn-verst { background: #2b326d; color: #fff; box-shadow: none; } .v3 .btn.btn-verst:hover { background: #232a5c; color: #fff; } .v3 .btn.btn-verst:focus-visible { outline: 3px solid rgba(43, 50, 109, .4); outline-offset: 2px; } /* A field with a file (the widget shows the file now, "Очистить" and "Изменить:"): not the flex row of a checkbox field, but the normal flow: the title, the file with its link, the small checkbox "Очистить" after it, and the choice of a new file under them */ .v3 .fld:has(> input[type=file]) { display: block; overflow-wrap: anywhere; line-height: 1.5; font-size: var(--fs-md); } .v3 .fld:has(> input[type=file]) > label:first-child { display: block; margin-bottom: 6px; } .v3 .fld:has(> input[type=file]) > input[type=checkbox] { display: inline-block; flex: none; width: 16px; height: 16px; margin: 0 5px 0 14px; vertical-align: -3px; accent-color: var(--red); } .v3 .fld:has(> input[type=file]) > input[type=checkbox] + label { display: inline; font-size: var(--fs-sm); color: var(--text-2); } .v3 .fld:has(> input[type=file]) > input[type=file] { margin-top: 6px; } .v3 .fld:has(> input[type=file]) > a { display: inline-block; max-width: calc(100% - 112px); vertical-align: middle; } /* room is left for the checkbox "Очистить" in the same line */ .v3 .fld:has(> input[type=file]) > input[type=checkbox] + label { white-space: nowrap; } /* The page of a series: the last race and its results are one block (the card of the race has no frame of its own inside it), the next race is under it */ .v3 .series-last { padding: 6px 22px 8px; } .v3 .series-last .calendar-item { background: none; box-shadow: none; border: 0; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; padding-left: 0; padding-right: 0; } .v3 .series-last .series-next-notes, .v3 .series-last > p { margin-top: 4px; } .v3 .series-last-results { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--hairline); } .v3 .series-last-results h3 { margin: 0 0 6px; font-size: var(--fs-xl); } /* The cup next to a record result (as the personal records in the tables of a runner) */ .v3 .cup { display: inline-flex; margin-left: 6px; vertical-align: -3px; line-height: 0; color: #b8860b; } .v3 .cup svg { fill: #f6c945; } /* The button of the loading from 5verst.ru while the page is loading: a ring that turns before the text */ @keyframes btnSpin { to { transform: rotate(360deg); } } .v3 .btn.is-loading { pointer-events: none; opacity: .92; } .v3 .btn.is-loading::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: btnSpin .8s linear infinite; } .v3 .btn.btn-verst:disabled { background: #2b326d; color: #fff; cursor: progress; } /* An action of the menu "Действия с забегом" that is a form (a POST button), looks as the links of the menu */ .v3 .drop-menu form { margin: 0; display: contents; } .v3 .drop-menu button.menu-btn { display: block; width: 100%; padding: 7px 12px; border: 0; border-radius: 8px; background: none; text-align: left; font: inherit; font-size: var(--fs-base); font-weight: 450; color: var(--text); cursor: pointer; } .v3 .drop-menu button.menu-btn:hover { background: rgba(118, 118, 128, .12); } .v3 .drop-menu button.menu-btn.is-loading { pointer-events: none; opacity: .85; } .v3 .drop-menu button.menu-btn.is-loading::before { content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 8px; vertical-align: -2px; border: 2px solid rgba(0, 0, 0, .2); border-top-color: var(--text); border-radius: 50%; animation: btnSpin .8s linear infinite; } .v3 .drop-menu button.menu-btn:disabled { cursor: progress; } /* "Загрузить с 5 вёрст" at the bottom of the menu, behind a divider: a button in the dark blue of 5 вёрст */ .v3 .drop-menu button.menu-btn.btn-verst { margin-top: 2px; background: #2b326d; color: #fff; font-weight: 600; text-align: center; } .v3 .drop-menu button.menu-btn.btn-verst:hover { background: #232a5c; } .v3 .drop-menu button.menu-btn.btn-verst:disabled { background: #2b326d; color: #fff; } .v3 .drop-menu button.menu-btn.btn-verst.is-loading::before { border-color: rgba(255, 255, 255, .35); border-top-color: #fff; } /* The block with the arrows to the neighbour events: the same line above it as before, on a white band across the whole width of the head card (on the green picture the text of the next event was not seen) */ .v3 .race-pager { background: #fff; margin: 18px -22px -22px; padding: 14px 22px; border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: none; } /* The card "Результаты" of the event page for an event of one race: the number of finishers and the three best men and women across the whole block */ .v3 .event-results .podium-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-bottom: 14px; } .v3 .podium-total { display: flex; align-items: center; gap: 10px; } .v3 .podium-total b { font-size: var(--fs-4xl); line-height: 1; } .v3 .podium-total > span { color: var(--text-2); font-size: var(--fs-md); } .v3 .podium-all { margin-left: auto; font-weight: 600; font-size: var(--fs-md); } .v3 .podium-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; } .v3 .podium-col h4 { margin: 0 0 6px; padding-bottom: 6px; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .05em; color: #2f6fb8; border-bottom: 2px solid #4a8fd8; } .v3 .podium-women h4 { color: #b3446c; border-bottom-color: #ee86ad; } .v3 .podium-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--hairline); } .v3 .podium-col h4 + .podium-row { border-top: 0; } .v3 .podium-medal { display: grid; place-items: center; } .v3 .podium-who { display: grid; min-width: 0; line-height: 1.3; } .v3 .podium-who b { font-size: var(--fs-lg); } .v3 .podium-who .sub { font-size: var(--fs-sm); color: var(--text-3); } .v3 .podium-time { font-size: var(--fs-xl); font-weight: 700; } @media (max-width: 800px) { .v3 .podium-cols { grid-template-columns: minmax(0, 1fr); gap: 16px; } .v3 .podium-all { margin-left: 0; } } .v3 .event-results .podium-head .btn { margin-left: auto; } .v3 .event-results .podium-cols { margin-top: 6px; } .v3 .hm-near-list > .hm-day[hidden] { display: none; } .v3 .hm-near-list > .hm-day:not(:first-child) { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--hairline); } /* The rating of the races by whole events: the distances of an event are small chips that wrap in the cell, so that the table is not wider than the screen */ .v3 table.t td.dist-cell { white-space: normal; min-width: 160px; max-width: 380px; } .v3 .dist-chips { display: flex; flex-wrap: wrap; gap: 4px 6px; } .v3 .dist-chip { padding: 2px 9px; border-radius: 999px; background: rgba(118, 118, 128, .12); color: var(--text-2); font-size: var(--fs-sm); font-weight: 550; white-space: nowrap; } /* The head card of an event and of a race: the date above the title is green and big, the title is black; in the arrows to the neighbour events the name is black and the date is grey */ .v3 .event-hero:not(.series-hero) h1 { color: var(--text); } .v3 .event-hero:not(.series-hero) .event-kicker { color: var(--accent-text); } .v3 .race-nav b { color: var(--text); } .v3 .race-nav small { color: var(--text-3); } .v3 .event-hero:not(.series-hero) .event-kicker { font-size: var(--fs-3xl); font-weight: 650; } /* the date of the event above its title is bigger */ .v3 .hm-near-src { overflow: hidden; } .v3 .hm-bar[hidden], .v3 .hm-arrow[hidden] { display: none; } /* The head card of a race: as the card of an event, the date above the title is big and green, the title is black */ .v3 .race-head .event-kicker { font-size: var(--fs-3xl); font-weight: 650; color: var(--accent-text); } .v3 .race-head h1 { color: var(--text); } /* The page of an admin "Забеги 5 вёрст: откуда загружены результаты" */ .v3 .vl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 6px; } .v3 .vl-chips .chip-link { padding: 5px 14px; font-size: var(--fs-md); } .v3 .vl-chips .chip-link.on { background: var(--text); color: #fff; } .v3 table.vl-t td { vertical-align: top; } .v3 table.vl-t tr.vl-empty td { color: var(--text-3); } .v3 .vl-warn { color: var(--red); font-weight: 650; } /* The page of a race: the ways up (to the event, to the series) are two big buttons under the title */ .v3 .race-jumps { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 14px; } .v3 .race-jump { display: flex; align-items: center; gap: 12px; min-width: 260px; max-width: 100%; padding: 10px 16px 10px 12px; border-radius: 14px; background: #fff; border: 1px solid rgba(0, 0, 0, .07); color: var(--text); transition: border-color .15s, box-shadow .15s, transform .15s; } .v3 .race-jump:hover { text-decoration: none; border-color: rgba(60, 118, 61, .45); box-shadow: 0 4px 14px -8px rgba(0, 0, 0, .25); } .v3 .race-jump .rj-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); } .v3 .race-jump .rj-txt { display: grid; min-width: 0; line-height: 1.3; } .v3 .race-jump .rj-txt b { font-size: var(--fs-lg); font-weight: 650; } .v3 .race-jump .rj-txt small { font-size: var(--fs-sm); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v3 .race-jump .rj-arr { margin-left: auto; color: var(--accent-text); font-size: var(--fs-xl); transition: transform .15s; } .v3 .race-jump:hover .rj-arr { transform: translateX(3px); } @media (max-width: 560px) { .v3 .race-jump { flex: 1 1 100%; } } /* The buttons "О забеге" and "Вся серия" are one under the other; "Вся серия" shows the events of the series as a strip: the height of a bar is the number of finishers, the current event is green */ .v3 .race-jumps { flex-direction: column; align-items: flex-start; gap: 10px; } .v3 .race-jump { width: min(100%, 440px); } .v3 .race-jump-series { gap: 12px; } @media (max-width: 560px) { .v3 .race-jump { width: 100%; } } /* The buttons are one after another in a row and shorter in length: the width is the width of the content (the height and the sizes are as they were); on a phone they are one under the other */ .v3 .race-jumps { display: grid; grid-template-columns: repeat(auto-fit, 310px); gap: 10px; align-items: stretch; justify-content: start; } /* all the buttons are of the same width and stand in one row while they fit */ .v3 .race-jump { width: auto; min-width: 0; } @media (max-width: 640px) { .v3 .race-jumps { grid-template-columns: minmax(0, 1fr); } .v3 .race-jump { width: 100%; } } .v3 .race-jump .rj-txt b { white-space: nowrap; } /* The head of the page "Редактирование забега" as in the old design: one green line with the links and the blue button of the actions at the right */ .v3 .event-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin: 0 0 16px; padding: 10px 18px; border-radius: 14px; background: rgba(var(--accent-rgb), .16); border: 1px solid rgba(var(--accent-rgb), .28); font-size: calc(var(--fs-md) + 1px); } .v3 .event-bar-text a { text-decoration: underline; text-underline-offset: 3px; } .v3 .event-bar-actions { margin-left: auto; } .v3 .btn.btn-blue { background: #2f6fb7; color: #fff; box-shadow: none; } .v3 .btn.btn-blue:hover { background: #265c99; color: #fff; } /* The forms of editing: one column of the fields (the old order) and brighter frames of the fields, so that they do not get lost on the background */ .v3 .set-grid.cols-1 { grid-template-columns: minmax(0, 980px); justify-content: center; gap: 12px 0; } /* As in the old design: the label is at the left and is aligned to the right, the field is at the right of it, the block is in the middle of the card */ .v3 .set-grid.cols-1 .fld { grid-template-columns: minmax(180px, 36%) minmax(0, 1fr); column-gap: 16px; row-gap: 4px; align-items: start; align-content: start; } .v3 .set-grid.cols-1 .fld > label { grid-column: 1; text-align: right; padding-top: 10px; line-height: 1.3; } .v3 .set-grid.cols-1 .fld > :not(label) { grid-column: 2; } .v3 .set-grid.cols-1 > p { padding-left: calc(36% + 16px); } @media (max-width: 700px) { .v3 .set-grid.cols-1 .fld { grid-template-columns: minmax(0, 1fr); } .v3 .set-grid.cols-1 .fld > label { grid-column: 1; text-align: left; padding-top: 0; } .v3 .set-grid.cols-1 .fld > :not(label) { grid-column: 1; } .v3 .set-grid.cols-1 > p { padding-left: 0; } } .v3 .set-form .fld input:not([type=checkbox]):not([type=radio]):not([type=file]), .v3 .set-form .fld select, .v3 .set-form .fld textarea { border: 1px solid rgba(60, 60, 67, .5); background: #fff; } .v3 .set-form .fld input:not([type=checkbox]):not([type=radio]):not([type=file]):hover, .v3 .set-form .fld select:hover, .v3 .set-form .fld textarea:hover { border-color: rgba(60, 60, 67, .75); } /* The buttons of saving in the forms of editing are at the right edge */ .v3 .set-form .form-actions, .v3 #frmForSeries .form-actions, .v3 #frmForEvent .form-actions { justify-content: flex-end; } /* The titles of the blocks of the forms of editing («Данные забега», «Документы», …) are a little bigger */ .v3 .set-form .card h2 { font-size: var(--fs-2xl); } /* A check box in the column form: the text is at the left (aligned to the right), the check box is right after it, in the column of the fields */ .v3 .set-grid.cols-1 .fld:has(> input[type=checkbox]) { display: grid; grid-template-columns: minmax(180px, 36%) minmax(0, 1fr); column-gap: 16px; align-items: center; } .v3 .set-grid.cols-1 .fld:has(> input[type=checkbox]) > label { order: 0; flex: none; grid-column: 1; text-align: right; padding-top: 0; } .v3 .set-grid.cols-1 .fld:has(> input[type=checkbox]) > input[type=checkbox] { order: 0; grid-column: 2; justify-self: start; margin: 0; } .v3 .set-grid.cols-1 .fld:has(> input[type=checkbox]) > span { order: 0; grid-column: 2; padding-left: 0; flex-basis: auto; } @media (max-width: 700px) { .v3 .set-grid.cols-1 .fld:has(> input[type=checkbox]) { grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; } .v3 .set-grid.cols-1 .fld:has(> input[type=checkbox]) > input[type=checkbox] { grid-column: 1; grid-row: 1; } .v3 .set-grid.cols-1 .fld:has(> input[type=checkbox]) > label { grid-column: 2; grid-row: 1; text-align: left; } .v3 .set-grid.cols-1 .fld:has(> input[type=checkbox]) > span { grid-column: 2; } } /* The search boxes (select2: a runner, an organizer, a city) in the style of the site; the messages are in Russian (select2-ru.js) */ .v3 .select2-container--default .select2-selection--single { height: 40px; border: 1px solid rgba(60, 60, 67, .5); border-radius: var(--r-sm); background: #fff; display: flex; align-items: center; transition: border-color .15s, box-shadow .15s; } .v3 .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 38px; padding: 0 38px 0 12px; color: var(--text); font-size: var(--fs-base); width: 100%; } .v3 .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--text-3); } .v3 .select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; right: 8px; } .v3 .select2-container--default .select2-selection--single .select2-selection__clear { margin-right: 12px; font-size: 20px; line-height: 38px; color: var(--text-3); } .v3 .select2-container--default .select2-selection--single .select2-selection__clear:hover { color: var(--red); } .v3 .select2-container--default:hover .select2-selection--single { border-color: rgba(60, 60, 67, .75); } .v3 .select2-container--default.select2-container--focus .select2-selection--single, .v3 .select2-container--default.select2-container--open .select2-selection--single { border-color: #5cb85c; box-shadow: 0 0 0 3px rgba(92, 184, 92, .25); } .v3 .select2-dropdown { border: 1px solid rgba(60, 60, 67, .3); border-radius: 12px; background: #fff; box-shadow: var(--shadow-lg, 0 10px 30px rgba(0, 0, 0, .12)); overflow: hidden; font-size: var(--fs-base); } .v3 .select2-container--default .select2-search--dropdown { padding: 8px; } .v3 .select2-container--default .select2-search--dropdown .select2-search__field { height: 38px; padding: 0 12px; border: 1px solid rgba(60, 60, 67, .5); border-radius: 10px; font: inherit; outline: none; } .v3 .select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: #5cb85c; box-shadow: 0 0 0 3px rgba(92, 184, 92, .25); } .v3 .select2-container--default .select2-results__option { padding: 9px 14px; } .v3 .select2-container--default .select2-results__option--highlighted[aria-selected] { background: rgba(var(--accent-rgb), .2); color: var(--text); } .v3 .select2-container--default .select2-results__option[aria-selected=true] { background: rgba(var(--accent-rgb), .1); } .v3 .select2-results__message, .v3 .select2-container--default .select2-results__option.loading-results { color: var(--text-2); } /* The names of the fields in the column forms (an event, a runner) are a little bigger */ .v3 .set-grid.cols-1 .fld > label { font-size: calc(var(--fs-sm) + 2px); color: var(--text); } /* A cross at the right of the active tab of a block of the editing form (documents, distances, news) deletes the tab after a question */ .v3 .etab .etab-x { display: none; margin-left: 8px; width: 18px; height: 18px; border-radius: 50%; align-items: center; justify-content: center; font-size: 15px; line-height: 1; background: rgba(255, 255, 255, .22); color: #fff; cursor: pointer; vertical-align: middle; } .v3 .etab.on .etab-x { display: inline-flex; } .v3 .etab .etab-x:hover { background: #d93025; } /* The search of the header: the magnifier; a click widens the field to the left over the menu (it does not push the other buttons) */ /* more specific than the rules of the search line of the home page (.v3.has-hero .home-search { width: ... }), otherwise the field is wide and the menu goes to the burger */ .v3 .toolbar .header-search.home-search { position: relative; display: flex; align-items: center; width: auto; height: auto; flex: none; margin: 0; padding: 0; gap: 0; } /* the size is the size of the magnifier, as of the other buttons of the header */ .v3 .header-search .home-search-box { position: absolute; top: 0; right: 0; z-index: 2; width: 100%; height: 100%; opacity: 0; overflow: visible; pointer-events: none; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(60, 60, 67, .35); transition: width .28s ease, opacity .2s ease; } .v3 .header-search.open .home-search-box { width: 340px; opacity: 1; pointer-events: auto; } .v3 .header-search.open:focus-within .home-search-box { box-shadow: inset 0 0 0 2px #5cb85c, 0 0 0 3px rgba(92, 184, 92, .22); } .v3 .header-search input[type=search] { width: 100%; height: 100%; padding: 0 44px 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--text); font-size: var(--fs-base); box-shadow: none; } .v3 .header-search input[type=search]:focus { outline: none; box-shadow: none; border: 0; } .v3 .header-search .search-toggle { position: relative; z-index: 3; } .v3 .header-search.open .search-toggle, .v3.has-hero .toolbar:not(.is-scrolled):not(.menu-open) .header-search.open .search-toggle { color: var(--accent-text); } .v3 .header-search .home-suggest { top: calc(100% + 10px); left: auto; right: 0; width: 420px; max-width: calc(100vw - 24px); } @media (max-width: 720px) { /* as specific as the rule of the closed state (.v3 .toolbar .header-search.home-search { position: relative }), otherwise the opened field stays the size of the magnifier */ .v3 .toolbar .header-search.home-search.open { position: absolute; z-index: 10; left: 12px; right: 12px; top: 10px; width: auto; height: 44px; } .v3 .header-search.open .home-search-box { left: 0; width: auto; height: 44px; } .v3 .header-search.open input[type=search] { height: 44px; } .v3 .header-search.open .search-toggle { position: absolute; right: 4px; top: 4px; } .v3 .header-search.open .home-suggest { width: 100%; left: 0; right: 0; } } /* A person icon after the name in a protocol (it is glued to the last word of the name): the runner is connected to a registered user of the site, the link leads to the page of the user */ .v3 .user-mark { display: inline-flex; vertical-align: -2px; margin-left: 5px; color: var(--accent-text); } .v3 a.user-mark:hover { color: var(--accent-text); opacity: .75; text-decoration: none; } /* the mark in the tables of the editor and of the claim is a link to the page of the user */ .v3 .nw { white-space: nowrap; } /* The mark «the e-mail is confirmed» right after the name in the head of a profile: the green rosette with a check (the same as the mark of the clubs with the up-to-date information) */ .v3 .name-verified { display: inline-flex; vertical-align: -3px; margin-left: 6px; cursor: help; } .v3 .paid-verified .verified-ico { width: 18px; height: 18px; vertical-align: -3px; } /* the check after «Участие оплачено» */ .v3 .name-verified .verified-ico { width: 26px; height: 26px; } /* --- The sections of the cabinet on a phone: the bar at the bottom of the screen, as in the mobile apps (icon over a short caption); the admin and the exit are in it too --- */ .v3 .label-short { display: none; } /* «Выйти» is a row of the menu like the others: the icon, the caption, the light fill on the whole width on hover */ .v3 .side-card .side-logout { justify-self: stretch; width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 9px 12px; border-radius: 10px; background: none; box-shadow: none; color: var(--text-2); font-size: var(--fs-base); font-weight: 400; } .v3 .side-card .side-logout:hover { background: rgba(118, 118, 128, .1); text-decoration: none; } .v3 .side-card .side-logout .ico { display: block; flex: none; opacity: .75; } @media (max-width: 720px) { .v3:has(.cabinet-side) { padding-bottom: calc(68px + env(safe-area-inset-bottom)); } /* the button «Сохранить», which stays at the bottom of the screen, is above the bar of the sections, not under it */ .v3:has(.cabinet-side) .save-bar { bottom: calc(76px + env(safe-area-inset-bottom)); padding-right: 14px; } .v3 .cabinet-side { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 70; } .v3 .cabinet-side .side-card { display: flex; gap: 0; padding: 5px 2px calc(5px + env(safe-area-inset-bottom)); border-radius: 0; border: 0; border-top: 1px solid var(--hairline); box-shadow: none; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); } .v3 .cabinet-side .side-nav { display: contents; } .v3 .cabinet-side .side-sep { display: none; } .v3 .cabinet-side .side-nav a, .v3 .cabinet-side .side-admin, .v3 .cabinet-side .side-logout { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; padding: 4px 0 2px; border-radius: 10px; background: none; box-shadow: none; border: 0; color: var(--text-2); font-size: 10.500px; font-weight: 550; line-height: 1.15; text-align: center; height: auto; min-height: 0; -webkit-tap-highlight-color: transparent; } .v3 .cabinet-side .side-nav a:hover, .v3 .cabinet-side .side-admin:hover, .v3 .cabinet-side .side-logout:hover { background: none; } .v3 .cabinet-side .ico, .v3 .cabinet-side .side-logout .ico { display: block; width: 24px; height: 24px; opacity: 1; } .v3 .cabinet-side .label, .v3 .cabinet-side .label-full { display: none; } .v3 .cabinet-side .label-short { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: none; } .v3 .cabinet-side .side-nav a.active { background: none; color: var(--accent-text); font-weight: 650; } .v3 .cabinet-side .side-admin { color: var(--red); } .v3 .cabinet-side .side-admin:hover { background: none; } /* the numbers of the sections are small marks over the icon; only the new ones (the found results) are shown, as a dot */ .v3 .cabinet-side .count { display: none; } .v3 .cabinet-side .count.alert { display: block; position: absolute; top: 3px; left: calc(50% + 6px); width: 9px; height: 9px; min-width: 0; padding: 0; border-radius: 50%; font-size: 0; } } /* The photo of a user shown big over the blurred page (a click on the avatar) */ .v3 img[data-full] { cursor: zoom-in; } .v3 img[data-full], .v3 .photo-lightbox img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; } .v3 .photo-lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(12, 18, 12, .42); cursor: zoom-out; backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); opacity: 0; transition: opacity .2s ease; } .v3 .photo-lightbox.on { opacity: 1; } .v3 .photo-lightbox img { max-width: min(92vw, 760px); max-height: 82vh; max-height: 82dvh; object-fit: contain; border-radius: 20px; box-shadow: 0 24px 70px rgba(0, 0, 0, .5); background: #fff; transform: scale(.9); transition: transform .22s ease; cursor: default; } .v3 .photo-lightbox.on img { transform: scale(1); } .v3 .photo-lightbox-x { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; width: 40px; height: 40px; border: 0; border-radius: 50%; font-size: 26px; line-height: 1; color: #fff; background: rgba(255, 255, 255, .2); cursor: pointer; } .v3 .photo-lightbox-x:hover { background: rgba(255, 255, 255, .32); } .v3.lightbox-open { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .v3 .photo-lightbox, .v3 .photo-lightbox img { transition: none; } } /* After a transition to another page of the protocol the page is scrolled to the head of the table, under the toolbar */ .v3 #raceTable { scroll-margin-top: 92px; } .v3 .photo-lightbox-wait { position: absolute; width: 38px; height: 38px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .3); border-top-color: #fff; animation: photo-wait .8s linear infinite; } @keyframes photo-wait { to { transform: rotate(360deg); } } /* A date field is never wider than its column: the iPhone gives the native date field its own minimum width and it sticks out of the card */ .v3 input[type=date] { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; max-width: 100%; text-align: left; line-height: 1.2; } .v3 input[type=date]::-webkit-date-and-time-value { text-align: left; min-width: 0; } .v3 .fld, .v3 .set-grid > *, .v3 .frow { min-width: 0; } /* «Другие имена» (a phone and a computer): every name is a small pill «Имя Отчество Фамилия» with a cross on the right (the comment is in the hint of the pill), the form of a new name is compact: the surname and the name in one line, the patronymic under them, then the comment */ .v3 .nm-x { display: none; } .v3 #frmName .table-flush { margin-left: 0; margin-right: 0; } .v3 #frmName .table-wrap { overflow: visible; } .v3 #frmName table.t, .v3 #frmName table.t tbody { display: block; width: 100%; } .v3 #frmName table.t thead { display: none; } .v3 #frmName table.t td { display: block; min-width: 0; border: 0; padding: 0; text-align: left; white-space: normal; } .v3 #frmName table.t td[data-label]::before { display: none; } .v3 #frmName tr.nm-row { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; margin: 0 8px 8px 0; padding: 5px 6px 5px 14px; border: 0; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-weight: 560; } .v3 #frmName tr.nm-row td { display: inline; width: auto; } .v3 #frmName tr.nm-row .nm-f { order: 1; } .v3 #frmName tr.nm-row .nm-m { order: 2; } .v3 #frmName tr.nm-row .nm-l { order: 3; } .v3 #frmName tr.nm-row .nm-m:empty, .v3 #frmName tr.nm-row .nm-c { display: none; } .v3 #frmName tr.nm-row .nm-del-cell { order: 4; margin-left: 2px; } .v3 #frmName .nm-del { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--text-2); font-size: 20px; line-height: 1; text-decoration: none; } .v3 #frmName .nm-del:hover { background: rgba(118, 118, 128, .16); color: var(--text); } .v3 #frmName .nm-del-text { display: none; } .v3 #frmName .nm-x { display: block; margin-top: -2px; } .v3 #frmName tr.set-add { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 6px; padding: 14px 0 0; border-top: 1px solid var(--hairline); } .v3 #frmName tr.nm-row + tr.set-add { margin-top: 8px; } .v3 #frmName tr.set-add td { padding: 0; } .v3 #frmName tr.set-add td:nth-child(n+3) { grid-column: 1 / -1; } .v3 #frmName tr.set-add td[data-label]::before { display: block; margin-bottom: 3px; font-size: var(--fs-sm); color: var(--text-2); content: attr(data-label); } .v3 #frmName tr.set-add input[type=text], .v3 #frmName tr.set-add select { width: 100%; max-width: none; min-width: 0; } .v3 #frmName tr.set-add td.right { text-align: right; } .v3 #frmName tr.set-add td.right .btn { display: flex; width: 100%; box-sizing: border-box; justify-content: center; } /* «Добавить имя» is a small button; its colour follows the setting of the buttons (green, or blue with the switch «синие кнопки»: .save-btn) */ .v3 #frmName .set-add .btn { padding: 4px 14px; line-height: 1.5; } /* The magnifier of the header is not on the home page: there is the big search line */ .v3.has-hero .toolbar .header-search { display: none; } /* The lists «caption: value» with their own two columns (КЛБМатч, «О человеке», the runner, the club, the series): on a phone the caption stood lower than its value (the common rule for a narrow screen gave it a top margin and a small size for the one-column list). Now both are on one line */ @media (max-width: 560px) { .v3 dl.klb-kv, .v3 dl.about-kv, .v3 dl.runner-kv, .v3 dl.club-kv, .v3 dl.series-kv { gap: 8px 12px; align-items: baseline; } .v3 dl.klb-kv dt, .v3 dl.about-kv dt, .v3 dl.runner-kv dt, .v3 dl.club-kv dt, .v3 dl.series-kv dt { margin-top: 0; font-size: var(--fs-md); line-height: 1.5; } .v3 dl.klb-kv dd, .v3 dl.about-kv dd, .v3 dl.runner-kv dd, .v3 dl.club-kv dd, .v3 dl.series-kv dd { line-height: 1.5; } .v3 dl.about-kv .btn { margin-left: 0; max-width: 100%; white-space: normal; text-align: left; } } /* The page «Результаты на забегах» on a phone: the filter is one column (the line of the buttons did not make a second narrow column), the table shows the race with its date, the result and the name */ .v3 .only-sm { display: none; } @media (max-width: 640px) { .v3 .only-sm { display: block; } .v3 .results-filter-actions { grid-column: 1 / -1; flex-wrap: wrap; } .v3 .results-filter .filter-grid { grid-template-columns: minmax(0, 1fr); } .v3 table.all-results-t th, .v3 table.all-results-t td { padding: 9px 6px; } .v3 table.all-results-t { table-layout: fixed; width: 100%; } .v3 table.all-results-t th { font-size: 10.5px; letter-spacing: 0; } .v3 table.all-results-t th:nth-child(3) { width: 40%; } .v3 table.all-results-t th:nth-child(5) { width: 27%; } .v3 table.all-results-t th:nth-child(9) { width: 33%; } .v3 table.all-results-t th:nth-child(12) { width: 44px; } .v3 table.all-results-t td.wrap { max-width: none; overflow-wrap: anywhere; } .v3 table.all-results-t td .runner-name, .v3 table.all-results-t td .runner-name span { white-space: normal; } } /* The claim bar of «Результаты на забегах» on a phone: the runner field and the button are one under another, in the middle */ @media (max-width: 640px) { .v3 .results-claim { flex-direction: column; align-items: center; justify-content: center; padding-right: 0; gap: 10px; text-align: center; } .v3 .results-claim .select2-container, .v3 .results-claim select { width: min(360px, 100%) !important; min-width: 0 !important; max-width: 100%; } .v3 .results-claim .btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.3; padding-block: 10px; } } /* --- The marks of a race: the stars by the parameters and a review --- */ .v3 .mk-skip { display: flex; flex-wrap: wrap; gap: 8px 10px; } .v3 .mk-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 330px); gap: 8px 28px; align-items: center; padding: 16px 0; border-top: 1px solid var(--hairline); } .v3 .mk-row:first-of-type { border-top: 0; } .v3 .mk-text h3 { margin: 0 0 4px; font-size: var(--fs-lg); } .v3 .mk-stars { display: flex; align-items: center; gap: 2px; } .v3 .mk-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .v3 .mk-star, .v3 .mk-none { display: grid; place-items: center; cursor: pointer; border-radius: 8px; color: #c4c7cf; transition: color .12s, transform .12s; -webkit-tap-highlight-color: transparent; } .v3 .mk-star { width: 44px; height: 44px; } .v3 .mk-star svg { fill: none; stroke: currentColor; stroke-width: 1.7; transition: fill .12s; } .v3 .mk-star:hover { transform: scale(1.12); } .v3 .mk-star.on { color: #f5a623; } .v3 .mk-star.on svg { fill: currentColor; } .v3 .mk-star { order: 1; } .v3 .mk-none { order: 2; width: 36px; height: 44px; margin-left: 10px; color: #a8abb5; } /* the cross is after the stars */ .v3 .mk-none.on { color: var(--text); background: rgba(118, 118, 128, .16); } .v3 .mk-none:hover { color: var(--text); } .v3 .mk-radio:focus-visible + label { outline: 3px solid rgba(92, 184, 92, .5); outline-offset: 1px; } .v3 .mk-descr { margin-top: 2px; min-height: 1.4em; } .v3 .mk-review { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid rgba(60, 60, 67, .16); border-radius: 10px; font: inherit; background: rgba(255, 255, 255, .85); color: inherit; resize: vertical; } .v3 .mk-review:focus { outline: none; border-color: #5cb85c; box-shadow: 0 0 0 3px rgba(92, 184, 92, .25); } .v3 .mk-name { display: block; margin-top: 12px; } .v3 .mk-send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 28px; padding-bottom: 8px; } @media (max-width: 640px) { .v3 .mk-row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 14px 0; } .v3 .mk-star { width: 46px; height: 46px; } } /* The list of the kinds of the calendars: the lit one */ .v3 .calendar-kinds .chip-link { padding: 5px 12px; font-size: var(--fs-md); } .v3 .calendar-kinds .chip-link.on { background: var(--text); color: #fff; } /* --- Registration for a race, the cart, the list of the registered --- */ .v3 .reg-page { max-width: 1137px; margin: 0 auto; } /* the same width as the pages about the site (social_links) */ .v3 .reg-page.wide { max-width: 1137px; } .v3 .reg-steps { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 14px 0 0; padding: 0; } .v3 .reg-steps li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 999px; background: rgba(118, 118, 128, .12); color: var(--text-2); font-size: var(--fs-md); } .v3 .reg-steps li span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(118, 118, 128, .25); color: #fff; font-size: var(--fs-sm); font-weight: 700; } .v3 .reg-steps li.on { background: #dff0d8; color: #3c763d; font-weight: 650; } .v3 .reg-steps li.on span { background: #4cae4c; } .v3 .reg-steps li.done span { background: #8bc58b; } .v3 .choice-list { display: grid; gap: 8px; margin-top: 4px; } .v3 .choice { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-radius: 12px; cursor: pointer; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px rgba(60, 60, 67, .16); line-height: 1.4; } .v3 .choice input { margin-top: 3px; flex: none; accent-color: #4cae4c; width: 18px; height: 18px; } .v3 .choice:has(input:checked) { background: #e9f5e4; box-shadow: inset 0 0 0 2px #4cae4c; } .v3 .fld .lbl { font-weight: 600; font-size: var(--fs-md); } .v3 .reg-fact { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding: 9px 0; border-bottom: 1px solid var(--hairline); } .v3 .reg-fact:last-of-type { border-bottom: 0; } .v3 .reg-fact > b { text-align: right; } .v3 .reg-price { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; } .v3 .reg-promo { margin-top: 8px; } .v3 .reg-promo label { display: block; margin-bottom: 6px; font-size: var(--fs-md); } .v3 .reg-promo input[type=text] { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid rgba(60, 60, 67, .16); border-radius: 10px; font: inherit; } .v3 .reg-send { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 22px; padding-bottom: 8px; } .v3 .reg-list { margin: 0 0 12px; padding-left: 20px; } .v3 .reg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .v3 .reg-card { display: grid; gap: 6px; padding: 16px 18px; color: inherit; text-decoration: none; border-radius: var(--r-lg); } .v3 .reg-card:hover { text-decoration: none; background: #fff; } .v3 .reg-card b { font-size: var(--fs-lg); } .v3 .reg-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .v3 .reg-tag { padding: 2px 10px; border-radius: 999px; background: rgba(118, 118, 128, .14); font-size: var(--fs-sm); } .v3 .reg-tag.g { background: #dff0d8; color: #3c763d; font-weight: 600; } .v3 .reg-items { display: grid; gap: 10px; } .v3 .reg-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px rgba(60, 60, 67, .12); } .v3 .reg-item-main { display: grid; gap: 2px; min-width: 0; } .v3 .reg-item-side { display: grid; gap: 6px; justify-items: end; align-content: start; } .v3 .reg-details { grid-column: 1 / -1; font-size: var(--fs-md); } .v3 .reg-details summary { cursor: pointer; color: var(--accent-text); } .v3 .reg-pay { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hairline); } .v3 table.reg-t th, .v3 table.reg-t td { padding: 9px 10px; } @media (max-width: 640px) { .v3 .reg-item { grid-template-columns: minmax(0, 1fr); } .v3 .reg-item-side { justify-items: start; grid-auto-flow: column; justify-content: space-between; align-items: center; } .v3 .reg-steps li { font-size: var(--fs-sm); padding-right: 10px; } .v3 .reg-pay .btn { width: 100%; } } .v3 .reg-fact + .fld, .v3 .reg-fact + .reg-fact + .fld { margin-top: 14px; } /* --- A page of the old design in the new frame (.legacy-page): the classes of the old markup (Bootstrap 3) that the new design does not have --- */ .v3 .legacy-page .row { display: block; margin: 0; } .v3 .legacy-page [class*="col-"] { float: none; width: auto; margin-left: 0; padding-left: 0; padding-right: 0; } .v3 .legacy-page .text-center { text-align: center; } .v3 .legacy-page .text-right { text-align: right; } .v3 .legacy-page .text-left { text-align: left; } .v3 .legacy-page .pull-right { float: right; margin-left: 10px; } .v3 .legacy-page .pull-left { float: left; margin-right: 10px; } .v3 .legacy-page .hidden-xs, .v3 .legacy-page .hidden-sm { } .v3 .legacy-page .nobr, .v3 .legacy-page .nowrap { white-space: nowrap; } .v3 .legacy-page .small, .v3 .legacy-page small { font-size: var(--fs-sm); } .v3 .legacy-page .invisible { visibility: hidden; } /* Bootstrap 3: the hidden text still takes its place (the norms are lined up by it: «0:00:0» before «6,60») */ .v3 .legacy-page.legacy-narrow { max-width: 1137px; margin: 0 auto; } /* a text page of the old design in the width of the pages about the site */ .v3 .legacy-page h3, .v3 .legacy-page h4 { margin: 18px 0 8px; letter-spacing: -.01em; } .v3 .legacy-page h3 { font-size: var(--fs-2xl); } .v3 .legacy-page h4 { font-size: var(--fs-xl); } .v3 .legacy-page p, .v3 .legacy-page li { line-height: 1.6; } .v3 .legacy-page img { max-width: 100%; height: auto; } .v3 .legacy-page hr { border: 0; border-top: 1px solid var(--hairline); margin: 16px 0; } .v3 .legacy-page .legacy-card { overflow-wrap: break-word; } .v3 .legacy-page .legacy-scroll { overflow-x: auto; margin: 12px -4px; padding: 0 4px; } .v3 .legacy-page .legacy-scroll > table { width: max-content; min-width: 100%; margin: 0; overflow-wrap: normal; } .v3 .legacy-page .legacy-scroll th, .v3 .legacy-page .legacy-scroll td { overflow-wrap: normal; word-break: normal; } .v3 .legacy-page .legacy-scroll > table.legacy-fit { width: 100%; min-width: 0; } /* a wide table of an old page that is to fit the width of the page: its cells wrap */ .v3 .legacy-page .legacy-scroll:has(> table.legacy-fit) { overflow: visible; } /* no box of its own, so that the head of the table can stick as on the other tables */ .v3 .legacy-page .legacy-scroll > table.legacy-fit thead { position: sticky; top: 73px; z-index: 8; } .v3 .legacy-page .legacy-scroll > table.legacy-fit thead th { background: rgba(252, 253, 251, .97); box-shadow: 0 1px 0 var(--hairline); } @media (max-width: 640px) { .v3 .legacy-page .legacy-scroll > table.legacy-fit thead { top: 65px; } } .v3 .legacy-page table, .v3 .legacy-page .table { border-collapse: collapse; width: 100%; font-size: var(--fs-md); margin: 12px 0; } .v3 .legacy-page table th, .v3 .legacy-page table td { padding: 8px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hairline); } .v3 .legacy-page table th { font-size: var(--fs-sm); font-weight: 650; color: var(--text-2); background: rgba(118, 118, 128, .08); } .v3 .legacy-page table th.text-right, .v3 .legacy-page table td.text-right { text-align: right; } .v3 .legacy-page table tr.info > th, .v3 .legacy-page table tr.info > td { background: rgba(118, 118, 128, .08); } .v3 .legacy-page table tr.success > td { background: #e9f5e4; } .v3 .legacy-page .label, .v3 .legacy-page .badge { display: inline-block; padding: 1px 8px; border-radius: 999px; background: rgba(118, 118, 128, .16); font-size: var(--fs-xs); font-weight: 600; } .v3 .legacy-page .label-danger, .v3 .legacy-page .label.label-danger { background: #fbdcd8; color: #a3241c; } .v3 .legacy-page .label-info { background: #dbeafb; color: #1f5f99; } .v3 .legacy-page .label-success { background: #dff0d8; color: #3c763d; } .v3 .legacy-page .alert { padding: 12px 14px; border-radius: 12px; margin: 12px 0; background: rgba(118, 118, 128, .1); } .v3 .legacy-page .alert-danger { background: #fbdcd8; color: #7a1f17; } .v3 .legacy-page .alert-success { background: #e3f3e8; color: #1f5a30; } .v3 .legacy-page .alert-warning { background: #fbf0d2; color: #6b4a00; } .v3 .legacy-page .btn-success, .v3 .legacy-page .btn-primary, .v3 .legacy-page .btn-warning, .v3 .legacy-page .btn-default, .v3 .legacy-page .btn-info { } .v3 .legacy-page .btn-xs, .v3 .legacy-page .btn-sm { padding: 5px 12px; font-size: var(--fs-sm); } .v3 .legacy-page .btn-link { background: none; box-shadow: none; padding: 0; color: var(--accent-text); } .v3 .legacy-page input[type=text], .v3 .legacy-page input[type=email], .v3 .legacy-page input[type=number], .v3 .legacy-page input[type=password], .v3 .legacy-page input[type=date], .v3 .legacy-page select, .v3 .legacy-page textarea, .v3 .legacy-page .form-control { width: 100%; max-width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid rgba(60, 60, 67, .16); border-radius: 10px; font: inherit; background: rgba(255, 255, 255, .85); color: inherit; } .v3 .legacy-page .form-group { margin-bottom: 14px; } .v3 .legacy-page .control-label { display: block; font-weight: 600; margin-bottom: 4px; } .v3 .legacy-page .help-block { color: var(--text-2); font-size: var(--fs-sm); } .v3 .legacy-page .list-group { display: grid; gap: 8px; } .v3 .legacy-page .list-group-item { display: block; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px rgba(60, 60, 67, .12); color: inherit; text-decoration: none; } .v3 .legacy-page .table-responsive { overflow-x: auto; } .v3 .legacy-page .dash-underlined { border-bottom: 1px dashed currentColor; text-decoration: none; } .v3 .legacy-page .clearfix::after { content: ""; display: table; clear: both; } /* A result with its splits */ .v3 .result-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 24px; } .v3 .result-facts > div { display: grid; gap: 2px; } .v3 .result-facts b { font-size: var(--fs-xl); } .v3 .result-facts .result-time { font-size: var(--fs-4xl); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .v3 #plot { max-width: 100%; overflow-x: auto; } /* One news */ .v3 .news-body::after { content: ""; display: table; clear: both; } .v3 .news-pic { display: block; max-width: 45%; margin: 0 0 12px; } .v3 .news-pic.left { float: left; margin-right: 18px; } .v3 .news-pic.right { float: right; margin-left: 18px; } .v3 .news-pic img { display: block; max-width: 100%; height: auto; border-radius: 12px; } .v3 .news-text { font-size: var(--fs-lg); line-height: 1.65; overflow-wrap: break-word; } .v3 .news-text img { max-width: 100%; height: auto; border-radius: 10px; } .v3 .news-meta { display: flex; justify-content: space-between; gap: 12px; margin: 16px 0 0; clear: both; } @media (max-width: 640px) { .v3 .news-pic { float: none !important; max-width: 100%; margin: 0 0 12px !important; } } /* An organizer */ .v3 .organizer-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 18px 24px; } .v3 .organizer-info { flex: 1 1 280px; min-width: 0; } .v3 .organizer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; } .v3 .organizer-links img { display: block; border-radius: 6px; } .v3 .organizer-logo { flex: 0 1 220px; } .v3 .organizer-logo img { display: block; max-width: 100%; max-height: 180px; margin-left: auto; object-fit: contain; } .v3 .fld textarea { width: 100%; min-height: 96px; padding: 10px 12px; border: 1px solid rgba(60, 60, 67, .16); border-radius: 10px; font: inherit; background: rgba(255, 255, 255, .85); color: inherit; box-sizing: border-box; resize: vertical; } .v3 .fld textarea:focus { outline: none; border-color: #5cb85c; box-shadow: 0 0 0 3px rgba(92, 184, 92, .25); } /* The page of a user: the button «Поделиться» in the banner, the table of results and the filters on a phone, the bar of the sections */ /* The filters of the results (the page of a user): the fields take the whole width of the block: the name is wider, the two lists share the rest; on a phone every field is a line, the buttons share a line */ .v3 .rf-form input[type=text] { flex: 2 1 220px; max-width: none; } .v3 .rf-form select { flex: 1 1 180px; width: auto; max-width: none; } .v3 .rf-form .btn { flex: none; } @media (max-width: 720px) { .v3 .rf-form input[type=text], .v3 .rf-form select { flex: 1 1 100%; } .v3 .rf-form .btn { flex: 1 1 0; justify-content: center; } } .v3 .rf-toggle { display: none; } .v3 .perma-link { margin-top: 16px; } .v3 .nav-admin { display: none; } .v3 .toolbar.is-compact.menu-open .nav-admin { display: block; margin-top: 4px; padding: 6px 0; color: var(--red); font-weight: 650; } @media (max-width: 720px) { .v3 .rf-toggle { display: inline-flex; } /* the head of the table: the title on its own line, under it the button «Фильтры» at the left and «показать все» at the right, in one line */ .v3 .res-head { row-gap: 10px; } .v3 .res-head > h2 { flex: 1 1 100%; } .v3 .res-head > .rf-toggle { order: 2; } .v3 .res-head > [data-results-all] { order: 3; margin-left: auto; } .v3 .rf-form { margin-top: 12px; } .v3 .rf-form:not(.open) { display: none; } /* the bar at the bottom: five sections, the rest (the trackers, the admin, the exit) is in the menu at the top */ .v3 .cabinet-side .side-nav a.side-more, .v3 .cabinet-side a.side-admin, .v3 .cabinet-side a.side-logout, .v3 .cabinet-side .side-sep { display: none; } /* the places to tap are not smaller than a finger */ .v3 a.tap-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; } .v3 .row.between:has(> a.tap-link) { align-items: center; } .v3 dl.about-kv dd.about-actions .btn { border-radius: 16px; white-space: normal; text-align: left; } } /* The slides of the home page go after the finger (home-news.js): the open page and the one that comes are both shown while the finger moves */ .v3 .hm-slides.is-dragging { overflow: hidden; } .v3 .hm-slides.is-dragging .hm-slide.is-on, .v3 .hm-slides.is-dragging .hm-slide.drag-peek { will-change: transform; animation: none; } .v3 .hm-slide.drag-peek { display: flex; opacity: 1; visibility: visible; transition: none; } .v3 .hm-slide.hm-four.drag-peek { display: grid; } .v3 .hm-slides.settle .hm-slide { animation: none !important; transition: none !important; } .v3 .hm-news.is-dragging .hm-bar .dot.is-on i, .v3 .hm-near.is-dragging .hm-bar .dot.is-on i { animation-play-state: paused; } /* the filling of the dot waits while the page is held */ /* The page of the actions of the users (editor/action_history, results/v3/admin/action_history.html) */ .v3 .act-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5em; height: 1.5em; padding: 0 .4em; margin-left: 12px; border-radius: 999px; vertical-align: middle; background: #fde9d0; color: #c2610c; font-size: .8em; font-weight: 750; letter-spacing: 0; line-height: 1; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 1px rgba(224, 125, 20, .25); } /* how many are to be approved: only the number, big, in a soft orange */ .v3 .act-sec > summary { cursor: pointer; list-style: none; font-weight: 650; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .v3 .act-sec > summary::-webkit-details-marker { display: none; } .v3 .act-sec > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(-45deg); transition: transform .15s; flex: none; margin-right: 2px; } .v3 .act-sec[open] > summary::before { transform: rotate(45deg); } .v3 .act-title { font-size: var(--fs-xl, 20px); letter-spacing: -.01em; } .v3 .act-all { margin-left: auto; font-weight: 500; font-size: var(--fs-md); } .v3 .act-filters { padding: 12px 18px 14px; } .v3 .act-filter-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 2px 12px; } .v3 .act-filter-form .fld { gap: 3px; margin-bottom: 6px; } .v3 .act-filter-form .fld label { font-size: var(--fs-xs); color: var(--text-3); } .v3 .act-filter-form .fld input, .v3 .act-filter-form .fld select { width: 100%; box-sizing: border-box; height: 34px; padding: 0 10px; font-size: var(--fs-md); } .v3 .act-filter-btns { grid-column: 1 / -1; order: 9; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 14px; margin-top: 14px; } .v3 .act-unver { margin-right: 6px; font-weight: 600; } .v3 .act-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 18px 0 14px; padding: 8px 10px; border-radius: 14px; background: rgba(255, 255, 255, .78); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08); } .v3 .act-nav .chip-link { padding: 5px 12px; } .v3 .act-sec .table-flush { margin-top: 12px; } .v3 .act-sec { scroll-margin-top: 130px; padding-bottom: 10px; } .v3 .act-sec > .table-flush { margin-top: 10px; } .v3 details.act-sec { overflow: visible; } /* the general rule «overflow-x: auto» for details made the card a box of scroll, and the sticky head counted its place from the top of the card */ .v3 table.act-t, .v3 details.glass table.act-t { display: table; width: 100%; max-width: none; overflow: visible; } /* the general rule for «details» makes a table a block as wide as its text */ .v3 table.act-t thead th { text-align: left; } .v3 table.act-t td { vertical-align: top; white-space: normal; } .v3 table.act-t tr.grp-head td { background: rgba(118, 118, 128, .09); padding-top: 9px; padding-bottom: 9px; } .v3 table.act-t tr.grp-head .badge { margin-left: 6px; } .v3 table.act-t tr.act-row.is-marked td { background: var(--accent-soft); } .v3 table.act-t tr.act-row.is-done td { opacity: .7; } .v3 .act-facts > div { margin: 0 0 3px; } .v3 .act-klb { margin-top: 4px; padding: 6px 10px; border-radius: 8px; background: rgba(118, 118, 128, .08); font-size: var(--fs-sm); } .v3 .act-warn { color: var(--amber); font-weight: 600; } .v3 .act-ok { min-width: 190px; } .v3 .act-check { display: flex; align-items: center; gap: 6px; padding: 3px 0; cursor: pointer; font-weight: 600; } .v3 .act-check input { width: 18px; height: 18px; accent-color: var(--accent-text); flex: none; } .v3 .act-write { display: inline-block; margin-top: 4px; } .v3 .act-empty { text-align: center; padding: 28px 18px; } .v3 .act-bar { position: sticky; bottom: 14px; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 16px; padding: 10px 14px; border-radius: 16px; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .1), 0 8px 26px rgba(0, 0, 0, .16); } .v3 .act-more { padding: 12px 18px; font-size: var(--fs-md); } .v3 .act-bar-n { margin-right: auto; font-size: var(--fs-md); } .v3 .act-bar .btn[disabled] { opacity: .45; cursor: not-allowed; } @media (max-width: 720px) { .v3 .act-nav { overflow-x: auto; flex-wrap: nowrap; } .v3 .act-nav .chip-link { flex: none; } .v3 .act-bar { bottom: calc(8px + env(safe-area-inset-bottom)); } .v3 .act-bar .btn { flex: 1 1 auto; } .v3 .act-bar-n { flex: 1 0 100%; } .v3 table.act-t thead { display: none; } .v3 table.act-t, .v3 table.act-t tbody, .v3 table.act-t tr, .v3 table.act-t td { display: block; width: 100%; box-sizing: border-box; } .v3 table.act-t tr.act-row { padding: 8px 4px; border-bottom: 1px solid var(--hairline); } .v3 table.act-t td { padding: 3px 12px; border: 0; } .v3 .act-ok { min-width: 0; } } /* The title of the home page: «Забеги, результаты и КЛБМатч —» is always one line, the rest is the second one. The line is 14.8 sizes of the font wide, so the size is counted from the width of the column of the text (the side fields of the hero are 7vw; with two columns the text has 0.465 of the width of the window), with a little reserve. */ .v3.has-hero .home-hero h1 .hero-line { white-space: nowrap; } .v3.has-hero .home-hero h1 { font-size: min(66px, calc(3vw - 2px)); } @media (max-width: 1100px) { .v3.has-hero .home-hero h1 { font-size: min(56px, 5.5vw); } } @media (max-width: 560px) { .v3.has-hero .home-hero h1 { font-size: calc((100vw - 32px) / 15.6); } } /* The page of the actions looks like the old one for the moderators: the contents, the blocks with the titles, the lines «Имя: …» */ .v3 .act-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .v3 .act-head h2.act-title { margin: 0; font-size: var(--fs-2xl, 22px); letter-spacing: -.01em; } .v3 .act-nav-t { align-self: center; flex: none; white-space: nowrap; margin-right: 4px; font-size: var(--fs-md); } /* on a phone the row does not scroll aside: the title must not break into letters, or the row becomes tall and the chips stretch into circles */ .v3 .act-fl-title { margin: 0 0 8px; font-weight: 650; font-size: var(--fs-lg); } .v3 table.act-res td.act-indent, .v3 table.act-res th:first-child { width: 4%; min-width: 36px; padding-left: 0; padding-right: 0; } .v3 table.act-res th:first-child { padding-left: 22px; } .v3 .act-klb-gap { height: 8px; } .v3 .act-ok > div { margin-top: 4px; } .v3 table.act-t tr.grp-head td a { font-weight: 500; } /* The number of the actions to approve in the menu of an admin: a grey circle at the right of the item */ .v3 .drop-menu a:has(> .menu-count) { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .v3 .drop-menu a .menu-count { flex: none; display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: rgba(118, 118, 128, .26); color: var(--text); font-size: var(--fs-xs); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } /* A heavy page opens at once and shows «Собираем данные…» with a turning circle until its content comes (lazy-page.js, _lazy_box.html) */ .v3 .lazy-loading, .v3 .lazy-error { display: flex; align-items: center; gap: 16px; padding: 26px 24px; margin-top: 20px; } .v3 .lazy-loading[hidden], .v3 .lazy-error[hidden], .v3 .lazy-content[hidden] { display: none; } .v3 .lazy-text { display: grid; gap: 2px; } .v3 .lazy-text b { font-size: var(--fs-lg); } .v3 .lazy-error { justify-content: space-between; } .v3 .lazy-spin { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 4px solid rgba(92, 184, 92, .22); border-top-color: #4aa152; animation: lazySpin .85s linear infinite; } @keyframes lazySpin { to { transform: rotate(360deg); } } .v3 .lazy-dots::after { content: ""; animation: lazyDots 1.4s steps(4, end) infinite; } @keyframes lazyDots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } } @media (prefers-reduced-motion: reduce) { .v3 .lazy-spin { animation-duration: 2.4s; } .v3 .lazy-dots::after { animation: none; content: "…"; } } /* The page «Состояние базы результатов в КЛБМатче» (results/v3/admin/klb_status.html, _klb_status_body.html) */ .v3 .ks-page .act-nav { margin-top: 18px; } .v3 .ks-sec .act-title { margin: 0 0 6px; font-size: var(--fs-xl, 20px); line-height: 1.25; } .v3 .ks-sec > .muted { margin: 0 0 10px; } .v3 .ks-sec .table-flush { margin-top: 8px; } .v3 table.ks-t, .v3 details.glass table.ks-t { display: table; width: 100%; } .v3 table.ks-t td { vertical-align: top; } .v3 table.ks-t td.ks-choice { min-width: 190px; } .v3 table.ks-t td.ks-choice .check { display: flex; align-items: center; gap: 6px; padding: 2px 0; white-space: nowrap; } .v3 .ks-submit { margin-top: 14px; text-align: right; } .v3 .ks-messages .ks-msg { margin: 0 0 10px; padding: 12px 18px; } .v3 .ks-messages .ks-msg.success { background: var(--accent-soft); } .v3 .ks-messages .ks-msg.warning { background: var(--amber-soft); } .v3 .ks-messages .ks-msg.error { background: #fbe3e0; color: #7d1d17; box-shadow: 0 0 0 1px rgba(196, 41, 31, .35); } /* the problems that need a person are red */ .v3 .ks-messages details.ks-msg summary { cursor: pointer; font-weight: 600; } .v3 .ks-messages .ks-msg-list { margin: 8px 0 0; padding-left: 20px; max-height: 50vh; overflow-y: auto; } .v3 .ks-messages .ks-msg-list li { margin: 0 0 4px; } .v3 .ks-sec .select2-container { max-width: 100%; } /* The users of the site (editor/users, results/v3/admin/users.html) */ .v3 .us-count { font-size: .45em; vertical-align: middle; margin-left: 8px; } .v3 .us-filter-form { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } .v3 .us-filter-form .fld label { min-height: 1em; } .v3 table.users-t td { vertical-align: top; } .v3 table.users-t th, .v3 table.users-t td { padding: 9px 9px; font-size: var(--fs-base); } .v3 table.users-t .num { text-align: right; } .v3 table.users-t tr.is-inactive td { background: rgba(60, 130, 230, .11); } .v3 table.users-t tr.is-inactive:hover td { background: rgba(60, 130, 230, .17); } .v3 table.users-t .us-edit { margin-left: 10px; font-size: var(--fs-sm); } .v3 .us-legend { margin: 12px 4px 4px; line-height: 1.9; } .v3 table.js-sort th.sortable { cursor: pointer; user-select: none; white-space: nowrap; } .v3 table.js-sort th.sortable::after { content: " ↕"; color: var(--text-3); opacity: .45; font-weight: 400; } .v3 table.js-sort th[aria-sort=ascending]::after { content: " ↑"; opacity: 1; color: var(--accent-text); } .v3 table.js-sort th[aria-sort=descending]::after { content: " ↓"; opacity: 1; color: var(--accent-text); } /* The pencil «редактировать» instead of the short word «Ред» (the same icon everywhere) */ .v3 a.icon-edit { display: inline-flex; align-items: center; vertical-align: -3px; margin: 0 2px; } .v3 a.icon-edit svg { display: block; } .v3 .btn svg { flex: none; } .v3 table.users-t .us-edit { margin-left: 8px; } /* Our pages in the social networks (editor/social_pages, results/v3/admin/social_pages.html) */ .v3 .sp-notes p { margin: 0 0 8px; } .v3 .sp-code { padding: 1px 6px; border-radius: 6px; background: rgba(118, 118, 128, .12); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; } .v3 table.sp-t, .v3 details.glass table.sp-t { display: table; width: 100%; margin-top: 8px; } .v3 table.sp-t td { vertical-align: top; white-space: normal; padding: 8px 8px; } .v3 table.sp-t th { white-space: nowrap; padding: 8px 8px; } /* The fields of the table are rounded, as the fields of the other forms of the site (the green ring when a field is chosen) */ .v3 table.sp-t input[type=text], .v3 table.sp-t input[type=url], .v3 table.sp-t input:not([type]), .v3 table.sp-t select { width: 100%; min-width: 90px; box-sizing: border-box; height: 38px; padding: 0 12px; border: 1px solid rgba(60, 60, 67, .16); border-radius: 12px; background: rgba(255, 255, 255, .9); color: var(--text); font: inherit; font-size: var(--fs-base); transition: border-color .15s, box-shadow .15s; } .v3 table.sp-t input:hover, .v3 table.sp-t select:hover { border-color: rgba(60, 60, 67, .3); } .v3 table.sp-t input:focus, .v3 table.sp-t select:focus { outline: none; border-color: #5cb85c; box-shadow: 0 0 0 3px rgba(92, 184, 92, .25); } .v3 table.sp-t select { appearance: none; -webkit-appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } .v3 table.sp-t td:nth-child(3) input { min-width: 170px; } .v3 table.sp-t td:nth-child(6) input { min-width: 190px; } .v3 table.sp-t td:nth-child(7) input, .v3 table.sp-t td:nth-child(8) input { min-width: 120px; } .v3 table.sp-t td.sp-check { text-align: center; padding-top: 14px; } .v3 table.sp-t td.sp-check input { width: 18px; height: 18px; accent-color: var(--accent-text); } .v3 table.sp-t tr.sp-new td { background: rgba(92, 184, 92, .06); } .v3 .sp-submit { margin-top: 16px; } /* The names for the runners (editor/runner_names, results/v3/admin/runner_names.html) */ .v3 .rn-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 14px; } .v3 .rn-form .fld { margin-bottom: 0; min-width: 220px; } .v3 .rn-form .fld input, .v3 .rn-form .fld select { height: 38px; } .v3 .rn-add { padding-bottom: 0; } .v3 .rn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; } .v3 .rn-grid > .section { margin-top: 20px; } .v3 .rn-grid .act-title { margin: 0 0 8px; font-size: var(--fs-xl, 20px); } .v3 table.rn-t { width: 100%; } .v3 table.rn-t td { padding-top: 8px; padding-bottom: 8px; } .v3 table.rn-t th:nth-child(1), .v3 table.rn-t th:nth-child(2) { width: 64px; } .v3 table.rn-t th:last-child { width: 56px; } .v3 .rn-del { width: 30px; height: 30px; margin: -4px 0; color: var(--text-3); } .v3 .rn-del:hover { color: var(--red); background: var(--red-soft); } @media (max-width: 800px) { .v3 .rn-grid { grid-template-columns: minmax(0, 1fr); } } /* «Разные мелкие штуки» (editor/util, results/v3/admin/util.html) and the reference «Раздел 5 вёрст» (_verst_doc.html, the light design only) */ .v3 .ut-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; } /* everything is in one column, one under another */ .v3 .ut-grid > .section { margin-top: 20px; } .v3 .ut-grid .ut-wide { grid-column: 1 / -1; } .v3 .ut-grid .act-title { margin: 0 0 8px; font-size: var(--fs-xl, 20px); } .v3 .ut-replace { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 14px; margin: 6px 0 10px; } .v3 .ut-replace .fld { flex: 1 1 260px; margin-bottom: 0; } .v3 .ut-mass { display: grid; gap: 4px; margin-top: 10px; } .v3 .ut-btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-bottom: 2px; } .v3 .btn.ut-danger { background: var(--red-soft); color: var(--red); box-shadow: 0 0 0 1px rgba(215, 58, 48, .3); } .v3 .btn.ut-danger:hover { background: rgba(255, 59, 48, .18); color: var(--red); } .v3 input.btn { border: 0; cursor: pointer; font: inherit; font-weight: 590; } /* The buttons that save (the profile, the interface settings, a new name) have one size of the text on the phone and on the computer: the input takes the size of its parent (font: inherit), the button element takes its own, so it is set here for both */ .v3 .btn.save-btn, .v3 input.btn.save-btn { font-size: var(--fs-sm); } /* on a phone every input has 16px (so that iOS does not zoom on the focus of a field, see max-width: 700px above); a button is not a field to type into, so the buttons that save are set back to the same size as the others: the selector is as strong as that rule */ .v3 input.btn.save-btn:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]) { font-size: var(--fs-sm); } /* A button over the whole width of its block */ .v3 .btn.btn-wide { display: flex; width: 100%; box-sizing: border-box; } .v3 .ut-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .v3 .ut-links li { display: flex; align-items: center; gap: 10px; border-radius: 12px; } .v3 .ut-links li:hover { background: rgba(118, 118, 128, .08); } .v3 .ut-links li > a:first-child { flex: 1; display: grid; gap: 1px; padding: 9px 12px; color: var(--text); text-decoration: none; min-width: 0; } .v3 .ut-links li > a:first-child b { color: var(--accent-text); font-weight: 600; } .v3 .ut-links li > a:first-child span { color: var(--text-2); font-size: var(--fs-sm); } .v3 .ut-help { flex: none; margin-right: 10px; padding: 3px 11px; border-radius: 999px; background: rgba(118, 118, 128, .12); font-size: var(--fs-sm); color: var(--text-2); text-decoration: none; } .v3 .ut-help:hover { background: var(--accent-soft); color: var(--accent-text); text-decoration: none; } .v3 .ut-danger-zone .btn { margin-top: 4px; } /* The reference (the text is dev/VERST_SECTION.html): the contents on the left, the text at about 78 symbols on the right; the tables and the code scroll in their boxes */ .v3 .vd { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 40px; } @media (max-width: 860px) { .v3 .vd { grid-template-columns: minmax(0, 1fr); gap: 16px; } } .v3 .vd-toc { position: sticky; top: 90px; align-self: start; font-size: var(--fs-md); } @media (max-width: 860px) { .v3 .vd-toc { position: static; } } .v3 .vd-toc b { display: block; margin-bottom: 8px; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); } .v3 .vd-toc a { display: block; padding: 4px 0; color: var(--text); text-decoration: none; } .v3 .vd-toc a:hover { color: var(--accent-text); text-decoration: underline; } .v3 .vd-body { min-width: 0; max-width: 78ch; line-height: 1.6; } .v3 .vd-title { margin: 0 0 8px; font-size: 30px; line-height: 1.15; letter-spacing: -.02em; } .v3 .vd .lead { font-size: var(--fs-xl, 18px); color: var(--text-2); margin: 0 0 24px; } .v3 .vd h2 { margin: 40px 0 12px; padding-top: 12px; border-top: 1px solid var(--hairline); font-size: 23px; line-height: 1.25; scroll-margin-top: 90px; } .v3 .vd h2.vd-title { margin-top: 0; padding-top: 0; border-top: 0; } .v3 .vd h3 { margin: 24px 0 6px; font-size: 17px; } .v3 .vd p { margin: 0 0 12px; } .v3 .vd ul, .v3 .vd ol { margin: 0 0 14px; padding-left: 22px; } .v3 .vd li { margin: 0 0 5px; } .v3 .vd code, .v3 .vd pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .v3 .vd code { font-size: .88em; background: rgba(118, 118, 128, .12); padding: 1px 6px; border-radius: 6px; overflow-wrap: anywhere; } .v3 .vd pre { font-size: 13.5px; line-height: 1.5; background: rgba(118, 118, 128, .1); padding: 12px 14px; border-radius: 12px; overflow-x: auto; margin: 0 0 14px; } .v3 .vd pre code { background: none; padding: 0; font-size: inherit; } .v3 .vd .tbl { overflow-x: auto; margin: 0 0 16px; border: 1px solid var(--hairline); border-radius: 12px; background: rgba(255, 255, 255, .7); } .v3 .vd table { border-collapse: collapse; width: 100%; font-size: var(--fs-base); min-width: 560px; } .v3 .vd th, .v3 .vd td { text-align: left; vertical-align: top; padding: 9px 12px; border-bottom: 1px solid var(--hairline); white-space: normal; font-size: var(--fs-base); } .v3 .vd tr:last-child td { border-bottom: 0; } .v3 .vd th { font-size: var(--fs-xs); letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); background: rgba(118, 118, 128, .07); } .v3 .vd td:first-child { font-weight: 600; min-width: 150px; } .v3 .vd .note { padding: 12px 14px; border-radius: 12px; margin: 0 0 16px; font-size: var(--fs-md); background: var(--accent-soft); } .v3 .vd .note.warn { background: var(--amber-soft); } .v3 .vd .note.bad { background: var(--red-soft); } .v3 .vd .note.ok { background: var(--accent-soft); } .v3 .vd .note b:first-child { margin-right: 4px; } .v3 .vd .pill { display: inline-block; font-size: var(--fs-xs); font-weight: 600; padding: 1px 9px; border-radius: 999px; background: rgba(118, 118, 128, .14); color: var(--text-2); white-space: nowrap; } .v3 .vd .pill.ok { background: var(--accent-soft); color: var(--accent-text); } .v3 .vd .pill.bad { background: var(--red-soft); color: var(--red); } .v3 .vd .pill.warn { background: var(--amber-soft); color: var(--amber); } .v3 .vd .flow { list-style: none; padding: 0; counter-reset: step; } .v3 .vd .flow li { position: relative; padding: 2px 0 12px 44px; counter-increment: step; } .v3 .vd .flow li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: #4aa152; color: #fff; font-weight: 600; display: grid; place-items: center; font-size: 14px; } .v3 .vd .flow li::after { content: ""; position: absolute; left: 14.5px; top: 34px; bottom: 4px; width: 1px; background: var(--hairline); } .v3 .vd .flow li:last-child::after { display: none; } .v3 .vd .meta { font-size: var(--fs-md); color: var(--text-2); margin: 0 0 4px; } /* The memos (editor/memo_*, results/v3/admin/memo.html): the reference look of .vd with the markup of the old pages (Bootstrap 3) */ .v3 .vd-memo.vd-single { grid-template-columns: minmax(0, 1fr); } .v3 .vd-memo .vd-toc { max-height: calc(100vh - 120px); overflow-y: auto; padding-right: 8px; } .v3 .vd-memo .memo-old-toc { display: none; } .v3 .vd-memo .vd-body { max-width: 80ch; } .v3 .vd-memo .row { display: block; margin: 0; } .v3 .vd-memo [class*="col-"] { float: none; width: auto; margin-left: 0; padding-left: 0; padding-right: 0; } .v3 .vd-memo .text-justify, .v3 .vd-memo .text-center { text-align: left; } .v3 .vd-memo h3 { margin: 38px 0 10px; padding-top: 14px; border-top: 1px solid var(--hairline); font-size: 22px; line-height: 1.25; scroll-margin-top: 90px; } .v3 .vd-memo h3:first-child, .v3 .vd-memo .vd-body > .row:first-child h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .v3 .vd-memo h3 small { margin-left: 8px; font-size: 13px; font-weight: 400; color: var(--text-3); } .v3 .vd-memo h4 { margin: 26px 0 8px; font-size: 18px; line-height: 1.3; scroll-margin-top: 90px; } .v3 .vd-memo table { display: block; overflow-x: auto; max-width: 100%; min-width: 0; } .v3 .vd-memo img { max-width: 100%; height: auto; border-radius: 10px; } .v3 .vd-memo ol, .v3 .vd-memo ul { margin-bottom: 14px; } .v3 .vd-memo .mt-card { margin: 0 0 18px; padding: 16px 20px 6px; border: 1px solid var(--hairline); border-radius: 16px; background: rgba(255, 255, 255, .72); } .v3 .vd-memo .mt-card h3 { margin: 0 0 8px; padding: 0; border: 0; font-size: 19px; } .v3 .vd-memo .mt-copy { margin: 0 0 14px; } .v3 .vd-memo .mt-copy.done { background: var(--accent-soft); color: var(--accent-text); } .v3 .vd-memo mark.mt-q { padding: 0 4px; border-radius: 5px; background: var(--amber-soft); color: var(--amber); font-weight: 600; } .v3 .memo-tabs a { white-space: nowrap; } @media (max-width: 860px) { .v3 .vd-memo .vd-toc { max-height: none; } } /* The list of the diplomas of the KLBMatch (results/v3/klb/diplomas.html) */ .v3 .dpl-members { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 3px 18px; } .v3 .dpl-members li[hidden], .v3 .dpl-team[hidden] { display: none; } .v3 .dpl-members li { padding: 2px 0; } /* The button «КЛБМатч» among the buttons of the head of a race: the tab of the match is the current one */ .v3 .race-jump.on { background: var(--accent-soft); border-color: rgba(60, 118, 61, .45); } /* The operations on the results of a distance: the lines of the buttons on a wide screen, the main button and the menu «Ещё» on a phone */ .v3 .race-admin-m { display: none; } @media (max-width: 700px) { .v3 .race-admin-d { display: none; } .v3 .race-admin-m { display: block; padding: 10px 12px; } .v3 .race-admin-m .ra-row { display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; } .v3 .race-admin-m .ra-main { flex: 1 1 auto; justify-content: center; } .v3 .race-admin-m .ra-more { position: relative; flex: 0 0 auto; margin-left: auto; } .v3 .race-admin-m .ra-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: min(300px, 84vw); max-height: 70vh; overflow-y: auto; padding: 8px; border-radius: 16px; background: #fff; box-shadow: var(--shadow-lg); border: 1px solid var(--hairline); display: grid; gap: 1px; } .v3 .race-admin-m .ra-menu[hidden] { display: none; } .v3 .race-admin-m .ra-menu a { padding: 9px 12px; border-radius: 10px; color: var(--text); font-size: var(--fs-md); } .v3 .race-admin-m .ra-menu a:hover { background: rgba(118, 118, 128, .1); text-decoration: none; } .v3 .race-admin-m .ra-sec { padding: 8px 12px 2px; font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); } .v3 .race-admin-m .ra-menu hr { border: 0; border-top: 1px solid var(--hairline); margin: 6px 4px; } .v3 .race-admin-m .ra-menu a.ra-danger { color: var(--red); font-weight: 600; } .v3 .race-tabs .segmented.editor-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; gap: 0; } .v3 .race-tabs .segmented.editor-tabs::-webkit-scrollbar { display: none; } .v3 .race-tabs .segmented.editor-tabs a { flex: none; white-space: nowrap; padding: 8px 11px; gap: 6px; } } /* The editing of the results of a distance (editor/race//, results/v3/admin/race_edit.html): the green line is the old panel of the old design, the fields are rounded */ .v3 .re-strip { margin: 0 0 20px; padding: 10px 15px; border: 1px solid #d6e9c6; border-radius: 4px; background: #dff0d8; color: #3c763d; box-shadow: 0 1px 1px rgba(0, 0, 0, .05); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .v3 .re-strip h3 { margin: 0; font: 500 16px/1.1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: normal; color: inherit; } .v3 .re-strip a.underlined { color: inherit; text-decoration: underline; } .v3 .re-strip a.underlined:hover { color: #2b542c; } .v3 table.re-t, .v3 details.glass table.re-t { display: table; width: auto; min-width: 100%; } .v3 table.re-t th { white-space: nowrap; vertical-align: bottom; padding: 8px 6px; } .v3 table.re-t td { vertical-align: top; white-space: normal; padding: 6px 5px; } .v3 table.re-t .rc { display: grid; gap: 2px; justify-items: start; } .v3 table.re-t .rc-raw { max-width: 150px; font-size: var(--fs-xs); line-height: 1.25; color: var(--text-3); overflow-wrap: anywhere; } .v3 table.re-t .rc .badge { white-space: normal; } .v3 table.re-t input[type=text], .v3 table.re-t input[type=number], .v3 table.re-t input[type=date], .v3 table.re-t input:not([type]), .v3 table.re-t select { height: 32px; padding: 0 8px; border: 1px solid rgba(60, 60, 67, .16); border-radius: 10px; background: rgba(255, 255, 255, .9); color: var(--text); font: inherit; font-size: var(--fs-sm); box-sizing: border-box; max-width: 100%; transition: border-color .15s, box-shadow .15s; } .v3 table.re-t input[size="10"] { width: 112px; } .v3 table.re-t input[size="7"] { width: 86px; } .v3 table.re-t input[size="6"] { width: 76px; } .v3 table.re-t input[size="5"] { width: 64px; } .v3 table.re-t input[type=date] { width: 132px; } .v3 table.re-t select { min-width: 124px; } .v3 table.re-t td:nth-last-child(2) { min-width: 220px; } .v3 table.re-t td:nth-last-child(2) .rc-raw { max-width: 240px; } .v3 table.re-t td:nth-last-child(2) input { width: 100%; } .v3 table.re-t input:hover, .v3 table.re-t select:hover { border-color: rgba(60, 60, 67, .3); } .v3 table.re-t input:focus, .v3 table.re-t select:focus { outline: none; border-color: #5cb85c; box-shadow: 0 0 0 3px rgba(92, 184, 92, .25); } .v3 table.re-t select { appearance: none; -webkit-appearance: none; padding-right: 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; } .v3 table.re-t td.re-check { text-align: center; padding-top: 12px; } .v3 table.re-t input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent-text); } /* search by id (admins) */ .v3 .sid-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line, rgba(0,0,0,.08)); flex-wrap: wrap; } .v3 .sid-row:first-child { border-top: 0; } .v3 .sid-row .badge { flex: 0 0 170px; justify-content: center; text-align: center; } .v3 .sid-main { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; } .v3 .sid-act { flex: 0 0 auto; } @media (max-width: 640px) { .v3 .sid-row .badge { flex: 0 0 auto; } .v3 .sid-act { flex: 1 1 100%; } } .v3 .club-info .back-link { display: inline-block; margin-bottom: 6px; } .v3 .calendar-side .drop-menu { text-align: left; } .v3 .calendar-item:has(.drop.open) { position: relative; z-index: 20; } /* the open menu is above the sticky table header below the card */ .v3 .series-last + .series-last { margin-top: 14px; } .v3 .series-event-info p.small.muted { margin: 8px 0 0; } .v3 .series-event-info p.small.muted + p.small.muted { margin-top: 2px; } .v3 .series-last { transition: transform .15s, box-shadow .15s; } /* the whole frame of a race rises on hover, not only its header */ .v3 .series-last:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .9); } .v3 .series-last .calendar-item:hover { transform: none; box-shadow: none; } .v3 .series-last:has(.drop.open) { position: relative; z-index: 20; } /* the open menu is above the next card of a race */ /* the rating of a series in its header: bigger, the star, the number and the link on one line */ .v3 dl.series-kv dd.rating { display: flex; align-items: center; gap: 10px; } .v3 dl.series-kv dd.rating .rate-val { font-size: var(--fs-xl); gap: 8px; line-height: 1; } .v3 dl.series-kv dd.rating .star-one { width: 24px; height: 24px; } .v3 dl.series-kv dd.rating .rate-admin { margin-left: 0; font-size: var(--fs-sm); line-height: 1; } .v3 dl.series-kv dt:has(+ dd.rating) { align-self: center; } /* the phone: in the card of a race with the menu of actions the rating is on the same line as the button, at the left edge */ @media (max-width: 640px) { .v3 .calendar-side:has(> .drop) { display: flex; flex-direction: row-reverse; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; width: 100%; padding-left: 0; } .v3 .calendar-side:has(> .drop) > .rating { display: flex; align-items: center; gap: 10px; margin: 0; } .v3 .calendar-side:has(> .drop) > .rating .rate-val { font-size: var(--fs-lg); gap: 8px; } .v3 .calendar-side:has(> .drop) > .rating .star-one { width: 22px; height: 22px; } .v3 .calendar-side:has(> .drop) > .rating .rate-admin { margin-left: 0; } } /* Adding a new event: the builder of the list of the distances */ .v3 .dist-builder { display: grid; gap: 12px; justify-items: start; } .v3 .dist-chips { display: flex; flex-wrap: wrap; gap: 8px; } .v3 .dist-chip { padding: 8px 16px; border: 1px solid var(--hairline); border-radius: 999px; background: rgba(118, 118, 128, .10); color: var(--text); font: inherit; font-size: var(--fs-md); font-weight: 550; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .v3 .dist-chip:hover { background: rgba(118, 118, 128, .18); } .v3 .dist-chip.on { background: var(--accent-soft); border-color: #5cb85c; color: var(--accent-text); } .v3 .dist-rows { display: grid; gap: 8px; width: 100%; } .v3 .dist-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .v3 .dist-row input { width: 130px; } .v3 .dist-row select { width: 110px; } .v3 .dist-row input, .v3 .dist-row select { padding: 9px 12px; border: 1px solid var(--hairline); border-radius: 12px; background: #fff; font: inherit; font-size: var(--fs-base); } .v3 .dist-note { flex: 1 1 140px; } .v3 .dist-del { width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(118, 118, 128, .12); color: var(--text-2); font-size: 20px; line-height: 1; cursor: pointer; } .v3 .dist-del:hover { background: #fde4e1; color: #a3241c; } .v3 .series-search { position: relative; } .v3 .series-search input { width: 100%; padding: 11px 14px; border: 1px solid var(--hairline); border-radius: 12px; background: #fff; font: inherit; font-size: var(--fs-base); } .v3 .series-found { display: grid; margin-top: 6px; padding: 6px; border: 1px solid var(--hairline); border-radius: var(--r); background: #fff; box-shadow: var(--shadow-lg); } .v3 .series-item { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; padding: 9px 12px; border: 0; border-radius: 8px; background: none; font: inherit; text-align: left; cursor: pointer; } .v3 .series-item:hover { background: rgba(118, 118, 128, .12); } .v3 .series-empty { padding: 8px 12px; } .v3 .series-chosen { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); } .v3 .dist-last { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .v3 .dist-last #distLastChips { display: flex; flex-wrap: wrap; gap: 8px; } .v3 .dist-snap { border: 0; background: none; color: var(--accent-text); font: inherit; font-size: var(--fs-sm); text-decoration: underline; cursor: pointer; padding: 0; } .v3 [hidden] { display: none !important; } /* the button of the form of adding an event is the last element of the form, it does not float over the fields */ .v3 .add-event .save-bar { position: static; bottom: auto; padding: 0; margin: 22px 0 0; justify-content: flex-end; } .v3 .add-event .save-bar .btn { box-shadow: none; } @media (max-width: 640px) { .v3 .add-event .save-bar .btn { width: 100%; } } .v3 .form-part { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hairline); } .v3 .form-sub { margin: 0 0 8px; font-size: var(--fs-lg); font-weight: 650; } .v3 #seriesPick .notice-warn { margin-bottom: 14px; } .v3 #seriesPick h2 { margin-top: 18px; } /* the loading box of a heavy page is at the center; the badge with the number of the waiting actions shows itself only when the data has come */ .v3 .lazy-loading { justify-content: center; } .v3 .act-count[hidden] { display: none; } /* an icon at the left edge inside a field */ .v3 .fld-wrap { position: relative; display: block; } .v3 .fld-wrap .fld-ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; transition: color .15s; } .v3 .fld .fld-wrap.has-icon input { padding-left: 42px; } .v3 .fld-wrap:focus-within .fld-ico { color: var(--accent-text); } /* the extra fields of the form of adding an event are folded: the main ones are enough to create an event */ .v3 .form-more { margin-top: 24px; padding: 16px 20px; border: 1px solid rgba(74, 161, 82, .5); border-radius: 16px; background: rgba(110, 195, 110, .18); transition: background .15s, border-color .15s; } .v3 .form-more:hover, .v3 .form-more[open] { background: rgba(110, 195, 110, .25); border-color: rgba(60, 145, 70, .7); } .v3 .form-more[open] > summary { margin-bottom: 4px; } .v3 .form-more .form-part:first-of-type { border-top: 0; padding-top: 6px; margin-top: 10px; } .v3 .form-more > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font-size: var(--fs-lg); font-weight: 650; padding-left: 26px; position: relative; } .v3 .form-more > summary::-webkit-details-marker { display: none; } .v3 .form-more > summary::before { content: ""; position: absolute; left: 4px; top: .55em; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-50%) rotate(-45deg); transition: transform .15s; } .v3 .form-more[open] > summary::before { transform: translateY(-70%) rotate(45deg); } .v3 .form-more > summary .muted { font-weight: 400; } /* the block of the form of adding an event that only the admins see: pastel red, the switches are red too */ .v3 .admin-only-card { background: #fdeceb; border: 1px solid #f3c4c0; } .v3 .admin-only-card h2 { color: #a3241c; } .v3 .admin-only-card .switch { border-top-color: #f3c4c0; } .v3 .admin-only-card .switch input { background: rgba(163, 36, 28, .22); } .v3 .admin-only-card .switch input:checked { background: #d9534f; } .v3 .admin-only-card .fld input { border-color: #f0b8b3; background: #fff; } /* the phone: the news are not switched by themselves (the height of the block changes and the page below jumps); the dot just shows the current page */ @media (max-width: 640px) { .v3 .hm-news .hm-bar .dot.is-on i { animation: none; width: 100%; } } /* the adding of an event: «fill it from the link» */ .v3 .import-row { display: flex; gap: 10px; flex-wrap: wrap; } .v3 .import-row input { flex: 1 1 260px; min-width: 0; padding: 11px 14px; border: 1px solid var(--hairline); border-radius: 12px; background: #fff; font: inherit; font-size: var(--fs-base); } .v3 .import-note { margin: 12px 0 0; color: var(--accent-text); } .v3 .import-note.bad { color: #a3241c; } /* the first block of the form of adding an event (look for the series) is green like the folded block of the extra information */ .v3 .series-pick-card { border: 1px solid rgba(74, 161, 82, .5); background: rgba(110, 195, 110, .18); } .v3 .series-pick-card .series-search input { border-color: rgba(74, 161, 82, .45); } .v3 .series-pick-card .series-chosen { background: rgba(255, 255, 255, .7); } .v3 .series-pick-card .notice-warn { background: rgba(60, 145, 70, .26); border-color: rgba(46, 125, 56, .55); color: #17481f; } .v3 .series-pick-card .notice-warn b { color: #0f3a17; } .v3 .set-form .card > p.import-note { margin: 14px 0 0; line-height: 1.5; } /* the loading of a protocol from a site: the list of the distances */ .v3 .fetch-races { display: grid; gap: 6px; margin: 8px 0 14px; } .v3 .fetch-race { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--hairline); border-radius: 12px; background: #fff; cursor: pointer; } .v3 .fetch-race.off { opacity: .55; cursor: default; } .v3 .fetch-race:hover:not(.off) { border-color: rgba(74, 161, 82, .6); background: rgba(110, 195, 110, .08); } .v3 .fetch-name { flex: 1; font-weight: 550; min-width: 0; } /* the message after an event is added: a rectangle in the middle at the top of the page */ .v3 .add-done { max-width: 620px; margin: 40px auto 0; padding: 32px 36px; text-align: center; border: 1px solid rgba(74, 161, 82, .5); background: rgba(110, 195, 110, .18); } .v3 .add-done h2 { font-size: var(--fs-3xl); margin: 0 0 12px; } .v3 .add-done p { margin: 0 0 20px; line-height: 1.55; overflow-wrap: anywhere; } .v3 .add-done .form-actions { justify-content: center; } /* the loading of a protocol in the background: the line of the state and a bar for each distance */ .v3 .job-line { display: flex; align-items: center; gap: 14px; font-size: var(--fs-lg); } .v3 .job-bars { display: grid; gap: 14px; margin-top: 18px; } .v3 .job-bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; } .v3 .job-bar-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; } .v3 .job-bar-track { height: 10px; border-radius: 999px; background: rgba(118, 118, 128, .16); overflow: hidden; } .v3 .job-bar-track i { display: block; height: 100%; width: 0; border-radius: inherit; background: #4aa152; transition: width .5s ease; } .v3 .job-bar.is-done .job-bar-track i { background: #2f8a39; } .v3 .job-error { margin-top: 18px; padding: 14px 18px; border-radius: 12px; background: #fbe3e0; color: #7d1d17; } .v3 .job-error p { margin: 0 0 12px; } /* the checklist of the sheets of a protocol with several distances */ .v3 .sheets-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; } .v3 .sheet-item { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--hairline); border-radius: 12px; background: #fff; } .v3 .sheet-item.current { border-color: rgba(74, 161, 82, .7); background: rgba(110, 195, 110, .14); } .v3 .sheet-mark { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(118, 118, 128, .16); font-size: var(--fs-sm); font-weight: 650; } .v3 .sheet-item.done .sheet-mark { background: #4aa152; color: #fff; } .v3 .sheet-item.no_race .sheet-mark { background: #f0961a; color: #fff; } .v3 .sheet-name { font-weight: 600; flex: 1; min-width: 0; overflow-wrap: anywhere; } .v3 .sheet-state { color: var(--text-2); } .v3 .sheet-item.no_race .sheet-state { color: #a35c00; } .v3 .runners-search-main .field-gender { min-width: 130px; flex: 0 1 160px; } /* The search of the runners: on a phone the form is compact: the surname and the name in one row, the platform chips in one line with short labels */ .v3 .runners-search-btns { display: contents; } .v3 .runners-search-checks .chip-toggle .lbl-short { display: none; } .v3 .runners-search-checks i { font-style: normal; } @media (max-width: 700px) { .v3 .runners-search { padding: 14px; gap: 10px; } .v3 .runners-search-main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; align-items: end; } .v3 .runners-search-main .field, .v3 .runners-search-main .field-date, .v3 .runners-search-main .field-gender { min-width: 0; max-width: none; flex: none; } .v3 .runners-search-main .field label { font-size: var(--fs-xs); margin-bottom: 2px; } .v3 .runners-search-main .field input, .v3 .runners-search-main .field select { padding: 8px 10px; font-size: var(--fs-md); } .v3 .runners-search-btns { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 8px; } .v3 .runners-search-btns .btn:only-child { grid-column: 1 / -1; } .v3 .runners-search-checks { flex-wrap: nowrap; gap: 6px; align-items: center; } .v3 .runners-search-checks .chip-toggle { flex: none; } .v3 .runners-search-checks .chip-toggle span { padding: 5px 10px; font-size: var(--fs-sm); white-space: nowrap; } .v3 .runners-search-checks .chip-toggle .lbl-full { display: none; } .v3 .runners-search-checks .chip-toggle .lbl-short { display: inline; } .v3 .runners-search-checks .check-exact { flex: none; margin-left: auto; font-size: var(--fs-sm); } } @media (max-width: 460px) { .v3 .runners-search-checks { flex-wrap: wrap; } .v3 .runners-search-checks .check-exact { flex: 1 1 100%; margin-left: 0; } } @media (max-width: 700px) { .v3 .runners-search-main .field-gender:has(~ .field-date) { grid-column: 1 / -1; } .v3 .runners-search-checks { gap: 8px; } .v3 .runners-search-checks .chip-toggle { margin: 0; } } /* The search of the runners on a phone: the fields, then the platforms and the check box, the buttons at the very bottom */ @media (max-width: 700px) { .v3 .runners-search { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; align-items: end; } .v3 .runners-search-main { display: contents; } .v3 .runners-search-checks { grid-column: 1 / -1; order: 1; margin-top: 6px; } .v3 .runners-search-btns { order: 2; margin-top: 10px; } .v3 .runners-search-checks .check-exact { margin-top: 8px; padding-top: 4px; line-height: 1.5; } } /* the field «Клуб»: the list of the clubs of the site under the field */ .v3 .club-suggest-wrap { position: relative; } .v3 .club-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50; padding: 6px; background: #fff; border: 1px solid var(--hairline); border-radius: var(--r); box-shadow: var(--shadow-lg); } .v3 .club-suggest-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: 8px 12px; border: 0; border-radius: 8px; background: none; font: inherit; text-align: left; cursor: pointer; } .v3 .club-suggest-item:hover, .v3 .club-suggest-item.on { background: rgba(110, 195, 110, .16); } .v3 .club-suggest-hint { padding: 8px 12px 4px; } /* The filters of the calendar: the first row is what and when (the name, the period, the dates, the distance), the second is where (the country, the region, the city) */ .v3 #v3Filters .filter-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px 20px; } .v3 #v3Filters .f-name { grid-column: span 4; } .v3 #v3Filters .f-when { grid-column: span 2; } .v3 #v3Filters .f-dates { grid-column: span 3; } .v3 #v3Filters .f-dist { grid-column: span 3; } .v3 #v3Filters .f-geo { grid-column: span 4; } @media (max-width: 1100px) { .v3 #v3Filters .f-name, .v3 #v3Filters .f-dates, .v3 #v3Filters .f-dist { grid-column: span 6; } .v3 #v3Filters .f-when { grid-column: span 6; } .v3 #v3Filters .f-geo { grid-column: span 6; } } @media (max-width: 700px) { .v3 #v3Filters .filter-grid > .field { grid-column: 1 / -1; } } /* The filters of the calendar: the check boxes and the buttons stand at the right edge */ .v3 #v3Filters .filter-checks { display: grid; grid-template-columns: repeat(2, max-content); justify-content: flex-end; gap: 10px 36px; } /* four check boxes: two columns, two rows, the columns are aligned */ .v3 #v3Filters .filter-actions { justify-content: flex-end; } @media (max-width: 700px) { .v3 #v3Filters .filter-checks, .v3 #v3Filters .filter-actions { justify-content: flex-start; } .v3 #v3Filters .filter-checks { grid-template-columns: minmax(0, 1fr); } } /* The calendar on a phone: the button «Добавить забег» is at the right edge, the buttons of the filters share the whole width */ @media (max-width: 700px) { .v3 .calendar-head-actions { width: 100%; justify-content: flex-end; } .v3 #v3Filters .filter-actions { display: grid; grid-template-columns: 1fr 1fr; } .v3 #v3Filters .filter-actions .btn { width: 100%; justify-content: center; text-align: center; } } /* The periods of the calendar: on a phone all five are in one line («Предстоящие» instead of «Все предстоящие») */ .v3 .segmented .seg-short { display: none; } @media (max-width: 700px) { .v3 .filters .segmented { display: flex; flex-wrap: nowrap; width: 100%; padding: 3px; gap: 0; } .v3 .filters .segmented a { flex: 1 1 auto; text-align: center; padding: 6px 4px; font-size: var(--fs-xs); white-space: nowrap; min-width: 0; } .v3 .segmented .seg-full { display: none; } .v3 .segmented .seg-short { display: inline; } } /* The cards of the calendar on a phone: the icons «edit the event / the series» are in the top right corner of the card, the rating is in the bottom right corner: «все оценки» on the left of the mark, on one line with it */ @media (max-width: 700px) { .v3 :not(.home-section) > .calendar-list .calendar-item { position: relative; } .v3 :not(.home-section) > .calendar-list .calendar-item:has(.calendar-side .admin) .calendar-body { padding-right: 70px; } .v3 :not(.home-section) > .calendar-list .calendar-side:not(:has(> .drop)) { display: flex; justify-content: flex-end; align-items: center; width: 100%; padding-left: 0; text-align: right; } .v3 :not(.home-section) > .calendar-list .calendar-side:not(:has(> .drop)) .admin { position: absolute; top: 8px; right: 8px; margin: 0; } .v3 :not(.home-section) > .calendar-list .calendar-side:not(:has(> .drop)) .rating { display: flex; flex-direction: row-reverse; align-items: center; gap: 10px; margin: 0 0 0 auto; line-height: 1; } .v3 :not(.home-section) > .calendar-list .calendar-side:not(:has(> .drop)) .rating .rate-val { font-size: var(--fs-lg); gap: 8px; line-height: 1; } .v3 :not(.home-section) > .calendar-list .calendar-side:not(:has(> .drop)) .rating .rate-admin { margin: 0; font-size: var(--fs-sm); line-height: 1; } } /* The block of the distances in the editor of an event: compact, the fields are as wide as their content, the groups in dense rows */ .v3 .rf-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-bottom: 12px; } .v3 .rf-row > .fld { margin: 0; flex: 1 1 200px; min-width: 0; } .v3 .rf-row > .fld:has(input[type=date]), .v3 .rf-row > .fld:has(input[type=time]) { flex: 0 1 150px; } .v3 .rf-row > .fld:has(input[type=time]) { flex-basis: 120px; } .v3 .rf-row > .fld:has(input[type=number]) { flex: 0 1 130px; } .v3 .rf-row > .fld:has(select) { flex: 1 1 220px; max-width: 320px; } .v3 .rf-comments > .fld { flex: 1 1 280px; } .v3 .rf-flags { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 14px; } .v3 .rf-flags .switch { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 8px; padding: 2px 0; border-top: 0; font-size: var(--fs-md); } .v3 .rf-flags .switch .switch-title { font-weight: 500; } .v3 .rf-more { margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--hairline); border-radius: 12px; background: rgba(118, 118, 128, .06); } .v3 .rf-more > summary { cursor: pointer; font-weight: 600; } .v3 .rf-more[open] > summary { margin-bottom: 12px; } .v3 .rf-more .rf-row { margin-bottom: 0; } .v3 .rf-auto { margin: 4px 0 14px; padding: 10px 14px; border-radius: 12px; background: rgba(118, 118, 128, .07); } .v3 .rf-auto p { margin: 6px 0 0; line-height: 1.55; } .v3 .rf-note { margin: -4px 0 12px; } /* The distances in the editor: all the fields stand on the same four columns (the quarters of the width), the groups below on the halves of it */ .v3 .rf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; align-items: start; margin-bottom: 12px; } .v3 .rf-grid > .fld, .v3 .rf-grid > .rf-span2 > .fld { margin: 0; } .v3 .rf-grid > .rf-span2 { grid-column: span 2; } .v3 .rf-flags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; } .v3 .rf-comments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-bottom: 12px; } .v3 .rf-comments > .fld { margin: 0; } .v3 .rf-grid .fld > label { min-height: 1.3em; } @media (max-width: 900px) { .v3 .rf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .v3 .rf-grid, .v3 .rf-flags, .v3 .rf-comments { grid-template-columns: minmax(0, 1fr); } .v3 .rf-grid > .rf-span2 { grid-column: auto; } } /* A result that is jumped to from the table of the personal bests: it blinks softly twice with the green of the cell of the record, which keeps its own fill */ .v3 tr.result-flash td:not(.best) { animation: resultFlash 1.3s ease-in-out 2; } @keyframes resultFlash { 0%, 100% { background-color: transparent; } 45% { background-color: var(--accent-soft); } } /* the green of the cell of the record */ @media (prefers-reduced-motion: reduce) { .v3 tr.result-flash td:not(.best) { animation: none; background-color: var(--accent-soft); } } /* An item of a drop-down menu that gives rights: a red line */ .v3 .drop-menu a.menu-red { color: #a3241c; background: #fdeceb; font-weight: 600; } .v3 .drop-menu a.menu-red:hover { background: #f9d9d6; color: #8c1d16; } .v3 .series-last-add { margin: 18px 0 16px; text-align: right; } /* not used any more: the button is in the line of the links */ /* the small button «Добавить свой результат» under the last event */ @media (max-width: 720px) { /* the same breakpoint as the cards of the rows of the actions */ .v3 .act-page { min-width: 0; max-width: 100%; overflow-wrap: anywhere; } /* a long address or a name without spaces in a row breaks instead of making the whole page wider than the screen */ .v3 .act-page a, .v3 .act-page .act-facts { overflow-wrap: anywhere; word-break: break-word; } .v3 .act-page table.act-t td { min-width: 0; max-width: 100%; } } /* The tab «All races of the series»: the text of the card at the left, the documents of a past event are a column at the right behind a vertical divider (as in the old design) */ .v3 .series-event-info.with-docs { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 22px; align-items: start; } .v3 .event-docs-list { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 210px; max-width: 360px; margin: 0; padding: 2px 0 2px 20px; border-left: 1px solid var(--hairline); } .v3 .series-last { position: relative; } @media (min-width: 901px) { /* up to four documents: the column stands in the lower right corner of the card and grows upward (to the free place at the right of the title); more than four stretch the card downward */ .v3 .series-event-info.docs-up .event-info-text { padding-right: 340px; } .v3 .series-event-info.docs-up .event-docs-list { position: absolute; right: 24px; bottom: 20px; max-width: 320px; } } .v3 .event-docs-list.many { display: grid; grid-template-columns: repeat(2, minmax(170px, auto)); gap: 7px 24px; max-width: none; } .v3 .event-docs-list .doc-chip { --doc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233c763d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E"); display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 9px; max-width: 100%; padding: 2px 0; font-size: var(--fs-base); line-height: 1.35; } .v3 .event-docs-list .doc-table { --doc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233c763d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2.5'/%3E%3Cpath d='M4 10h16M4 15h16M10 4v16'/%3E%3C/svg%3E"); } .v3 .event-docs-list .doc-map { --doc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233c763d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11.5A7 7 0 0 0 5 9.5C5 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); } .v3 .event-docs-list .doc-chip::before { content: ""; flex: none; width: 20px; height: 20px; background: var(--doc-icon) center / 20px 20px no-repeat; } .v3 .event-docs-list .doc-chip a { color: var(--text-2); } .v3 .event-docs-list .doc-chip a:hover { color: var(--accent-text); text-decoration: none; } .v3 .event-docs-list .doc-table a { color: var(--accent-text); font-weight: 600; } .v3 .event-docs-list .doc-chip br { display: none; } .v3 .event-docs-list .doc-chip a + a { font-size: var(--fs-sm); color: var(--text-3); } .v3 .event-docs-list .btn-xs { display: inline-block; margin-left: 4px; padding: 2px 11px; border: 0; border-radius: 999px; background: #fff; color: var(--accent-text); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; box-shadow: 0 0 0 .5px rgba(60, 118, 61, .35); } .v3 .event-docs-list .btn-xs:hover { background: #f2f9ef; } .v3 .event-docs-list .glyphicon { display: inline; margin-left: 2px; } /* a document that is a link (not a file) has the arrow ↗ after the name (the same sign as in the other places of the site, see .glyphicon-new-window), as in the old design */ .v3 .event-contacts .contacts-lines.below { display: block; margin-top: 7px; } /* the phones are on their own line, apart from the button «Написать» */ .v3 .event-contacts .btn.sm:hover { background: #cfe8c6; text-decoration: none; } @media (max-width: 720px) { /* the card of an event on the tab «All races of the series» on a phone: more air between the lines */ .v3 .series-event-info p { margin: 0 0 12px; line-height: 1.55; } .v3 .series-event-info p.small.muted { margin-top: 10px; line-height: 1.5; } .v3 .series-event-info .event-contacts { line-height: 1.7; } .v3 .series-event-info { padding-bottom: 10px; } .v3 .series-event-info.with-docs { display: block; } .v3 .event-docs-list, .v3 .event-docs-list.many { display: flex; flex-direction: column; gap: 8px; max-width: none; margin-top: 14px; padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--hairline); } } .v3 .editor-t .ico-col { width: 1%; white-space: nowrap; padding-left: 4px; padding-right: 4px; } /* the icons of the tracks (Strava) and of the user in the table of the editor of a race */ .v3 .editor-t .runner-ico { margin-left: 4px; } .v3 .editor-t .runner-ico.user { color: #3a7bd5; } .v3 .editor-t .runner-ico.user:hover { color: #1f5fb0; } /* The letter from the site (for admins): a wider window, the fields one under another as before, tight spaces and a shorter text: it fits the screen without scrolling */ .v3 dialog.legacy-modal:has(#frm_send_letterAdmin) { width: min(900px, calc(100% - 32px)); } .v3 .legacy-modal .letter-note { margin: 0 0 8px; font-size: var(--fs-md); color: var(--text-2); } .v3 .legacy-modal #frm_send_letterAdmin .form-group { margin-bottom: 12px; } .v3 .legacy-modal #frm_send_letterAdmin .form-group { font-size: 0; line-height: 0; } /* the empty lines of the spaces around the captions (  in form_field.html) take no place */ .v3 .legacy-modal #frm_send_letterAdmin label, .v3 .legacy-modal #frm_send_letterAdmin input, .v3 .legacy-modal #frm_send_letterAdmin textarea { line-height: 1.4; } .v3 .legacy-modal #frm_send_letterAdmin label { margin-bottom: 3px; } .v3 .legacy-modal #frm_send_letterAdmin textarea { min-height: 110px; } .v3 .legacy-modal:has(#frm_send_letterAdmin) .modal-body { padding-bottom: 0; } .v3 .results-t .name-row { display: flex; align-items: center; gap: 6px; } /* the name and the icon of the track (Strava) are one row: the icon is always on the line of the name, never under it */ .v3 .results-t .name-row .runner-ico { flex: none; margin-left: 0; } .v3 .event-docs-list .doc-chip > a:first-of-type { flex: 1 1 calc(100% - 29px); min-width: 0; } /* the name of a document takes its own row (it wraps by words); «(копия)» and the button «Обработать» are under it */ .v3 .event-docs-list .doc-chip > a:first-of-type + br + a, .v3 .event-docs-list .doc-chip > a:first-of-type + .btn-xs { margin-left: 29px; } /* under the text of the name, not under the icon */ .v3 .event-docs-list .doc-chip > a + a, .v3 .event-docs-list .doc-chip > .btn-xs { flex: none; } /* The buttons of the actions («Действия с забегом», «Действия с серией», ...) and the buttons «Сохранить» are blue for the admins who have this on (the body has the class ui-blue-buttons: the personal setting «Настройки интерфейса» on the page «Мои данные»; by default it is on): the admins look for them all the time. The other users have the usual light buttons. */ .v3.ui-blue-buttons .btn.act-btn, .v3.ui-blue-buttons .btn.save-btn { color: #fff; background: #337ab7; box-shadow: 0 0 0 1px #2e6da4, 0 1px 3px rgba(0, 0, 0, .18); } .v3.ui-blue-buttons .btn.act-btn:hover, .v3.ui-blue-buttons .drop.open > .btn.act-btn, .v3.ui-blue-buttons .btn.save-btn:hover { color: #fff; background: #286090; box-shadow: 0 0 0 1px #204d74, 0 1px 3px rgba(0, 0, 0, .22); } .v3.ui-blue-buttons .btn.act-btn:focus-visible, .v3.ui-blue-buttons .btn.save-btn:focus-visible { outline: 2px solid #337ab7; outline-offset: 2px; } /* The chosen tab of the documents, the distances and the news («Новый документ», «Новая новость», ...) is blue for the admins, as the buttons above (it is black for the others) */ .v3.ui-blue-buttons .etab.on, .v3.ui-blue-buttons .etab.etab-filled.on { background: #337ab7; border-color: #2e6da4; color: #fff; } /* The page of the results (it has the id v3Filters as the calendar has): its buttons «Показать», «Сбросить» and the box «Не привязанные к людям» stand from the left edge and wrap, they do not go out of the panel to the left (the rule of the calendar puts them to the right edge: the three of them are wider than two columns) */ .v3 #v3Filters .results-filter-actions { display: flex; justify-content: flex-start; flex-wrap: wrap; } .v3 #v3Filters .results-filter-actions .btn { width: auto; } /* The page of the results: the eleven fields were squeezed into one row (the grid of the calendar is of twelve columns, a field took one). Now the rows are: the names (4 fields), what and when (the race, the dates, the distance), the result and the place (4 fields), then the buttons; on a narrow screen two fields in a row, on a phone one */ @media (min-width: 1101px) { .v3 #v3Filters.results-filter .filter-grid > .field:nth-child(-n+4) { grid-column: span 3; } .v3 #v3Filters.results-filter .filter-grid > .field:nth-child(n+5):nth-child(-n+7) { grid-column: span 4; } .v3 #v3Filters.results-filter .filter-grid > .field:nth-child(n+8):nth-child(-n+11) { grid-column: span 3; } } @media (min-width: 701px) { .v3 #v3Filters.results-filter .results-filter-actions { grid-column: 1 / -1; } } @media (min-width: 701px) and (max-width: 1100px) { .v3 #v3Filters.results-filter .filter-grid > .field { grid-column: span 6; } } /* The page «ПроБЕГ во ВКонтакте»: one icon at the title, the groups in the tables of the cards */ .v3 .social-head h1 { display: flex; align-items: center; gap: .3em; } /* the icon is in the line of the title, of its height */ .v3 .social-head h1 img { flex: none; width: 1.1em; height: 1.1em; border-radius: .26em; } .v3 .social-head p { margin: 0; max-width: 760px; } .v3 .social-page .prose-card h2 { margin: 0 0 8px; font-size: var(--fs-xl); } .v3 table.social-t td { padding: 11px 6px; border-top: 1px solid var(--hairline); white-space: normal; } .v3 table.social-t tr:first-child td { border-top: 0; } .v3 table.social-t td:first-child { width: 42%; font-weight: 550; } @media (max-width: 640px) { .v3 table.social-t td:first-child { width: auto; } } .v3 .claim-note { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 14px; padding: 13px 18px; border-radius: 12px; background: #337ab7; color: #fff; font-size: var(--fs-md); font-weight: 600; box-shadow: 0 0 0 1px #2e6da4, 0 2px 6px rgba(51, 122, 183, .25); } /* why the column «Кому засчитать» is empty: in the blue of the buttons, with an icon of information */ .v3 .claim-note-ico { flex: none; margin-top: 1px; } .v3 .claim-note p { margin: 0; line-height: 1.5; } .v3 .claim-note p + p { margin-top: 4px; } .v3 .frmResults_claim[disabled] { opacity: .5; cursor: not-allowed; } /* the buttons of the claim wait for the box «Подтверждаю, что проверил(а)...»: they look pressed out until it is ticked */ /* The results that a person has hidden from the page: a slim amber line with the count, it opens into a short list */ .v3 details.hidden-results { padding: 0; background-image: linear-gradient(rgba(240, 160, 20, .09), rgba(240, 160, 20, .09)); border-color: rgba(214, 140, 0, .3); } .v3 details.hidden-results > summary { display: flex; align-items: center; gap: 10px; padding: 12px 18px; list-style: none; color: #8a5a00; font-size: var(--fs-md); font-weight: 600; } .v3 details.hidden-results > summary::-webkit-details-marker { display: none; } .v3 details.hidden-results > summary::after { content: ''; flex: none; width: 7px; height: 7px; margin: 0 4px 3px 4px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .15s; } .v3 details.hidden-results[open] > summary::after { margin-bottom: -3px; transform: rotate(-135deg); } .v3 details.hidden-results .hr-note { margin: -4px 0 6px; padding: 0 18px; font-size: var(--fs-sm); color: var(--text-3); } .v3 details.hidden-results .hr-title { flex: 1 1 auto; min-width: 0; } .v3 details.hidden-results .hr-count { flex: none; min-width: 22px; padding: 1px 8px; border-radius: 999px; background: rgba(214, 140, 0, .18); text-align: center; font-size: var(--fs-sm); font-weight: 700; } .v3 details.hidden-results table.t { margin: 0; padding: 0 12px 8px; box-sizing: border-box; } @media (min-width: 721px) { .v3 details.hidden-results table.t td { padding: 7px 8px; font-size: var(--fs-md); } } @media (max-width: 720px) { .v3 details.hidden-results > summary { padding: 10px 14px; gap: 8px; font-size: var(--fs-sm); line-height: 1.35; } .v3 details.hidden-results table.t { padding: 0 14px 6px; } .v3 details.hidden-results .hr-note { margin: -2px 0 4px; padding: 0 14px; font-size: var(--fs-xs); } /* a result is one thin line: the date, the race (cut with dots if it does not fit), the result, the button; the name of the person is not needed here: it is the page of the same person */ .v3 details.hidden-results table.t.t-fit tr { display: flex; align-items: center; gap: 8px; padding: 6px 0; } .v3 details.hidden-results table.t.t-fit td { width: auto; flex: none; padding: 0; font-size: var(--fs-sm); white-space: nowrap; } .v3 details.hidden-results table.t.t-fit td:first-child { color: var(--text-3); font-size: var(--fs-xs); } .v3 details.hidden-results table.t.t-fit td:nth-child(2) { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .v3 details.hidden-results table.t.t-fit td:nth-child(3) { display: none; } .v3 details.hidden-results table.t.t-fit td:nth-child(4) { font-weight: 600; } .v3 details.hidden-results table.t.t-fit td.right { padding: 0; } .v3 details.hidden-results table.t.t-fit td.right .btn { padding: 0 10px; height: 28px; font-size: var(--fs-xs); } } /* The journal of the letters: a green line with the date, under it the letters of that day */ .v3 table.mail-t tr.mail-day td { background: var(--accent-soft); color: var(--accent-text); padding-top: 10px; padding-bottom: 10px; border-top: 1px solid rgba(60, 118, 61, .18); font-size: var(--fs-base); } .v3 table.mail-t tr.mail-day td b { font-weight: 700; } /* the tables of the days have the same columns: the widths are fixed, the long texts are cut with dots */ .v3 table.mail-t { table-layout: fixed; min-width: 760px; } .v3 table.mail-t col.c-time { width: 100px; } .v3 table.mail-t col.c-to { width: 22%; } .v3 table.mail-t col.c-kind { width: 25%; } .v3 table.mail-t col.c-status { width: 160px; } .v3 table.mail-t td, .v3 table.mail-t th { overflow: hidden; text-overflow: ellipsis; } .v3 table.mail-t td.muted.small { white-space: normal; line-height: 1.3; } /* the kind of a letter is long: it goes to a second line, not cut */ .v3 .mail-day-block + .mail-day-block { margin-top: 18px; } .v3 table.mail-t caption.mail-day { caption-side: top; text-align: left; padding: 10px 22px; background: var(--accent-soft); color: var(--accent-text); border-top: 1px solid rgba(60, 118, 61, .18); font-size: var(--fs-base); } .v3 table.mail-t caption.mail-day b { font-weight: 700; } .v3 table.mail-t caption.mail-day .badge { margin-left: 6px; background: rgba(255, 255, 255, .75); } @media (max-width: 720px) { .v3 table.mail-t caption.mail-day { padding-left: 14px; padding-right: 14px; } } .v3 table.mail-t tr.mail-day .badge { margin-left: 6px; background: rgba(255, 255, 255, .75); } /* The panel of a letter in the journal of the letters: slides out on the right; the data of the letter in a column on the left, the letter on the right */ .v3 .mp-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(20, 28, 22, .38); } .v3 .mp-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 91; width: min(1180px, 94vw); display: flex; flex-direction: column; background: #fff; box-shadow: -18px 0 48px rgba(16, 24, 40, .22); transform: translate3d(104%, 0, 0); transition: transform .28s cubic-bezier(.22, .61, .36, 1); will-change: transform; contain: layout paint; } .v3 .mp-panel.open { transform: translate3d(0, 0, 0); } body.mp-lock { overflow: hidden; } .v3 .mp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 22px 14px; border-bottom: 1px solid var(--hairline); } .v3 .mp-title h2 { margin: 0; font-size: var(--fs-2xl); line-height: 1.25; } .v3 .mp-actions { display: flex; align-items: center; gap: 10px; flex: none; } .v3 .mp-close { font-size: 18px; line-height: 1; width: 34px; height: 34px; } .v3 .mp-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 290px minmax(0, 1fr); } .v3 .mp-kv { margin: 0; padding: 18px 22px; overflow-y: auto; border-right: 1px solid var(--hairline); background: rgba(118, 118, 128, .04); } .v3 .mp-kv dt { margin: 14px 0 3px; font-size: var(--fs-sm); color: var(--text-2); } .v3 .mp-kv dt:first-child { margin-top: 0; } .v3 .mp-kv dd { margin: 0; font-size: var(--fs-base); overflow-wrap: anywhere; } .v3 .mp-letter { display: flex; flex-direction: column; min-width: 0; padding: 18px; } .v3 .mp-frame { flex: 1; width: 100%; min-height: 0; border: 1px solid var(--hairline); border-radius: 12px; background: #fff; opacity: 0; transition: opacity .2s ease; } .v3 .mp-frame.ready { opacity: 1; } .v3 .mp-letter { position: relative; } .v3 .mp-spinner { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 4px solid var(--accent-soft); border-top-color: #3c8f40; animation: mp-spin .8s linear infinite; pointer-events: none; } /* the circle turns while the letter is loaded into the frame */ .v3 .mp-frame.ready + .mp-spinner { display: none; } @keyframes mp-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .v3 .mp-panel { transition: none; } .v3 .mp-frame { transition: none; } .v3 .mp-spinner { animation-duration: 2.4s; } } .v3 .mp-loading { padding: 40px; color: var(--text-2); } @media (max-width: 800px) { .v3 .mp-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); overflow-y: auto; } .v3 .mp-kv { border-right: 0; border-bottom: 1px solid var(--hairline); max-height: 220px; } .v3 .mp-letter { min-height: 520px; } } .v3 .mail-pages { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; } .v3 .list-tools input[type=date] { height: 38px; padding: 0 10px; border-radius: var(--r-sm); border: 1px solid var(--hairline); background: rgba(255, 255, 255, .85); font: inherit; } /* The filter of the journal of the letters: everything in one line (the line wraps only on a narrow screen) */ .v3 .mail-filter .list-tools { flex-wrap: nowrap; align-items: center; gap: 10px; margin-bottom: 0; } .v3 .mail-filter .mail-presets { display: flex; gap: 6px; flex: none; } .v3 .mail-filter .list-tools label { display: inline-flex; align-items: center; gap: 6px; flex: none; margin: 0; white-space: nowrap; } .v3 .mail-filter .list-tools select { flex: 0 1 190px; min-width: 0; width: 190px; } .v3 .mail-filter .list-tools input[type=text] { flex: 1 1 160px; min-width: 120px; max-width: none; } .v3 .mail-filter .list-tools .btn { flex: none; } @media (max-width: 1180px) { .v3 .mail-filter .list-tools { flex-wrap: wrap; } .v3 .mail-filter .list-tools input[type=text] { flex-basis: 220px; } } .v3 .mail-filter .mail-presets .chip-link.on { background: #3c8f40; color: #fff; font-weight: 650; } /* the chosen period is green */ /* The page of a letter: the same two columns as in the panel; the card has no paddings of its own, the columns reach its edges */ .v3 .msg-two { padding: 0; overflow: hidden; } .v3 .msg-two .mp-body { min-height: 680px; height: calc(100vh - 250px); } .v3 .msg-two .mp-kv { border-radius: 0; } .v3 .msg-two .mp-letter { min-height: 0; } @media (max-width: 800px) { .v3 .msg-two .mp-body { height: auto; } .v3 .msg-two .mp-frame { min-height: 520px; } } /* The payments through the site (editor/all_payments/): the forms in a row, the table of the payments */ .v3 .pay-page .pay-links { margin: 6px 0 0; } .v3 .pay-forms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; } .v3 .pay-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; } .v3 .pay-form .fld { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); color: var(--text-2); margin: 0; } .v3 .pay-form .fld input { height: 38px; padding: 0 10px; border: 1px solid var(--hairline); border-radius: var(--r-sm); background: rgba(255, 255, 255, .85); font: inherit; font-size: var(--fs-md); color: var(--text); } .v3 .pay-form .pay-wide { flex: 1 1 220px; } .v3 .pay-form .pay-wide input { width: 100%; } .v3 .pay-check { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-md); cursor: pointer; } .v3 .pay-filter { align-items: center; } @media (max-width: 900px) { .v3 .pay-forms { grid-template-columns: minmax(0, 1fr); } } .v3 table.pay-t td.pay-desc { white-space: normal; min-width: 180px; max-width: 340px; overflow-wrap: anywhere; } /* the description is not a line of any length: it wraps */ /* The team of KLBMatch: the name in the roster leads to the results of the person in the table below, the icon next to it to the page of the person */ .v3 .person-line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; } /* the name, the badges and the icon of the page of the person are in one line */ .v3 a.person-open { display: inline-flex; align-items: center; padding: 2px; border-radius: 6px; color: var(--text-3); } .v3 table.klb-people th.person-col, .v3 table.klb-people td.person-col { width: 32px; padding-left: 0; padding-right: 10px; text-align: left; } .v3 table.klb-people td.wrap:has(+ td.person-col) { padding-right: 2px; } /* the icon is close to the name */ /* the icon of the page of the person: its own column close to the name, one under another */ .v3 a.person-open:hover { color: var(--accent-text); } .v3 a[id^="person"] { scroll-margin-top: 96px; } /* the result of a person is not hidden under the toolbar */ /* The tables of the performances of the participants of a team: the head of a participant — the name, and the sums in the columns of the points and the bonuses, as in the old design */ .v3 table.t tr.person-head th { padding-top: 18px; text-transform: none; letter-spacing: 0; font-size: var(--fs-md); color: var(--text-2); font-weight: 500; vertical-align: bottom; } .v3 table.t tr.person-head th a { color: var(--text); font-weight: 700; font-size: var(--fs-lg); } .v3 table.t tr.person-head th.right { text-align: right; } .v3 table.t tr.person-head th.total { background: var(--accent-soft); color: var(--accent-text); font-size: var(--fs-lg); font-weight: 750; font-variant-numeric: tabular-nums; border-bottom: 1px solid rgba(60, 118, 61, .25); } .v3 .mail-why { font-size: var(--fs-md); } .v3 .mail-why-tech { font-family: ui-monospace, Menlo, monospace; font-size: 12px; overflow-wrap: anywhere; } /* The page of a news item (editor/news/): the date and the time of the publication are two fields in one line */ .v3 .news-edit .fld .splitdatetime, .v3 .news-edit .fld:has(input[name$="_0"]) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; } .v3 .news-edit .fld:has(input[name$="_0"]) > label { flex: 0 0 100%; } .v3 .news-edit .fld:has(input[name$="_0"]) > input { flex: 1 1 120px; min-width: 0; width: auto; } .v3 .news-edit .news-col { display:flex; flex-direction:column; gap:14px; max-width:520px; margin:0 auto; } .v3 .admin-page.news-edit { max-width: 1137px; margin: 0 auto; } /* Старые формы-фильтры (form-inline) в одну строку, как в старом дизайне; на узком экране переносятся */ .v3 .legacy-page form.form-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 14px; } .v3 .legacy-page form.form-inline .form-group { display: flex; align-items: center; gap: 8px; margin: 0; } .v3 .legacy-page form.form-inline .form-group > label { display: inline; margin: 0; white-space: nowrap; font-weight: 600; } .v3 .legacy-page form.form-inline .form-group > .form-control, .v3 .legacy-page form.form-inline .form-group > select { width: auto; min-width: 0; } .v3 .legacy-page .btn-danger { background: #d73a30; color: #fff; border-color: #d73a30; } .v3 .legacy-page .btn-danger:hover { background: #b9302a; border-color: #b9302a; color: #fff; } .v3 .legacy-page .rec-actions { display: flex; align-items: center; justify-content: center; gap: 10px; } .v3 .legacy-page .rec-actions form { margin: 0; } .v3 .legacy-page .rec-actions a.icon-edit { padding: 6px; border-radius: 8px; } .v3 .legacy-page .rec-actions a.icon-edit:hover { background: rgba(60, 143, 64, .12); } .v3 .legacy-page .rec-actions a.icon-edit svg { width: 17px; height: 17px; } /* ...и растянуты по всей ширине: поля делят свободное место, кнопка остаётся справа */ .v3 .legacy-page form.form-inline .form-group { flex: 1 1 auto; } .v3 .legacy-page form.form-inline .form-group > .form-control, .v3 .legacy-page form.form-inline .form-group > select { flex: 1 1 auto; } .v3 .legacy-page form.form-inline > .btn { flex: 0 0 auto; } .v3 .legacy-page .rec-admin-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 12px; padding: 10px 12px; border: 1px solid rgba(60, 60, 67, .16); border-radius: 12px; background: rgba(255, 255, 255, .5); } /* Страница рекордов возрастной группы: крупный заголовок и заголовки таблиц, как у остальных таблиц сайта */ .v3 .legacy-page .rec-details h3 { font-size: var(--fs-5xl); line-height: 1.2; letter-spacing: -.02em; margin: 6px 0 14px; } .v3 .legacy-page .rec-details table th { font-size: var(--fs-xs); font-weight: 600; color: #636366; text-transform: uppercase; letter-spacing: .03em; background: rgba(118, 118, 128, .08); border-bottom: 1px solid var(--hairline); } @media (max-width: 640px) { .v3 .legacy-page .rec-details h3 { font-size: var(--fs-3xl); } } .v3 .legacy-page .rec-details table tr.info > th, .v3 .legacy-page .rec-details table tr.info > td { background: rgba(118, 118, 128, .08); } /* Сноски к таблицам рекордов: мелко, в строчку, значок в плашке */ .v3 .rec-notes { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 16px 0 4px; font-size: var(--fs-xs); line-height: 1.4; color: var(--text-2); } .v3 .rec-notes .rec-note { display: inline-flex; align-items: center; gap: 7px; } .v3 .rec-notes .rn-mark { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 6px; background: rgba(118, 118, 128, .13); color: var(--text); font-weight: 600; font-size: var(--fs-xs); line-height: 1; text-decoration: none; } .v3 .rec-notes .rn-mark.rn-ok { background: var(--accent-soft); color: var(--accent-text); } .v3 .rec-notes .rn-mark.rn-old { color: var(--text-3); } .v3 .legacy-page .rec-details table tr.info > th, .v3 .legacy-page .rec-details table thead th { vertical-align: middle; padding-top: 10px; padding-bottom: 10px; } /* Много предупреждений (например, «… Пропускаем» после групповой привязки) собраны в одно окно со свёрнутым списком; оно не исчезает само, пока его не закроют */ .v3 .toast.toast-group { animation: none; pointer-events: auto; } .v3 .toast-group summary { cursor: pointer; font-weight: 600; } .v3 .toast-group .toast-list { margin: 8px 0 0; padding-left: 18px; max-height: 50vh; overflow-y: auto; } .v3 .toast-group .toast-list li { margin: 0 0 6px; } /* Поле «Выберите результат» на странице статуса КЛБМатча: ввод прямо в поле, подсказки под ним */ .v3 .rl { position: relative; min-width: 240px; } .v3 .rl .rl-input { width: 100%; box-sizing: border-box; height: 38px; padding: 0 32px 0 12px; border: 1px solid rgba(60, 60, 67, .3); border-radius: 10px; background: #fff; color: var(--text); font: inherit; font-size: var(--fs-md); } .v3 .rl .rl-input::placeholder { color: var(--text-3); } .v3 .rl .rl-input:focus { outline: none; border-color: #5cb85c; box-shadow: 0 0 0 3px rgba(92, 184, 92, .25); } .v3 .rl.is-chosen .rl-input { background: var(--accent-soft); border-color: rgba(60, 143, 64, .5); font-weight: 600; } .v3 .rl .rl-clear { position: absolute; right: 6px; top: 7px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: var(--text-3); font-size: 20px; line-height: 1; cursor: pointer; } .v3 .rl .rl-clear:hover { background: rgba(0, 0, 0, .07); color: var(--text); } .v3 .rl .rl-list { list-style: none; margin: 4px 0 0; padding: 4px; max-height: 220px; overflow-y: auto; border: 1px solid rgba(60, 60, 67, .2); border-radius: 10px; background: #fff; } .v3 .rl .rl-list li { padding: 7px 10px; border-radius: 8px; font-size: var(--fs-md); line-height: 1.3; } .v3 .rl .rl-item { cursor: pointer; } .v3 .rl .rl-item:hover { background: rgba(var(--accent-rgb), .18); } .v3 .rl .rl-msg { color: var(--text-2); } .v3 table.ks-t td.ks-doc:first-child { padding-left: 14px; } /* строка без ячеек забега (они сверху с rowspan): отступ как в остальных строках */ .v3 .btn.ks-two { white-space: normal; text-align: center; line-height: 1.25; padding-top: 6px; padding-bottom: 6px; } /* Содержание страницы статуса КЛБМатча: большой заголовок и разделы построчно, число справа через расстояние */ .v3 .act-nav.ks-toc { display: block; overflow: visible; padding: 18px 22px 12px; } .v3 .ks-toc .act-nav-t { display: block; margin-bottom: 8px; font-size: var(--fs-5xl); line-height: 1.2; font-weight: 700; letter-spacing: -.02em; } .v3 .ks-toc .chip-link { display: flex; align-items: baseline; justify-content: space-between; gap: 28px; padding: 11px 12px; margin: 0 -12px; border-radius: 0; border-top: 1px solid var(--hairline); background: none; color: var(--text); font-size: var(--fs-base); font-weight: 500; cursor: pointer; } .v3 .ks-toc .chip-link:hover { background: rgba(var(--accent-rgb), .12); color: var(--accent-text); border-radius: 8px; } html:has(.ks-page) { scroll-behavior: smooth; } /* the click on a section of the contents scrolls to its table smoothly */ .v3 .ks-toc .chip-link .num { flex: none; min-width: 32px; text-align: right; font-weight: 650; color: var(--accent-text); } .v3 .ks-toc .muted { display: block; padding: 11px 0; border-top: 1px solid var(--hairline); } /* Гвоздик «закрепить новость первой на главной» рядом с карандашом (только администраторам) */ .v3 .icon-pin { display: inline-flex; align-items: center; vertical-align: -3px; margin: 0 2px; padding: 0; border: 0; background: none; color: var(--text-3); cursor: pointer; } .v3 .icon-pin svg { display: block; } .v3 .icon-pin:hover { color: var(--accent-text); } .v3 .icon-pin.is-on { color: var(--accent-text); } .v3 .icon-pin.is-on svg { fill: currentColor; } .v3 .icon-pin[disabled] { opacity: .5; cursor: wait; } /* the ids of a runner on a platform (editor of a runner): a row for each id on the full width, the icon of removing at the end of the field, the button «+» at the end of the last row */ .v3 .ids-multi { display: grid; gap: 8px; } .v3 .ids-row { display: flex; gap: 8px; align-items: center; } .v3 .ids-item { position: relative; display: flex; flex: 1; min-width: 0; } .v3 .ids-row:not(:has(.ids-add)) .ids-item { margin-right: 48px; } /* the width of the rows without «+» is the same as of the last one */ .v3 .ids-multi input[type=text] { width: 100%; padding-right: 36px; } .v3 .ids-del { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-3); display: grid; place-items: center; cursor: pointer; } .v3 .ids-del:hover { background: rgba(217, 83, 79, .12); color: #c9302c; } .v3 .ids-add { flex: none; width: 40px; height: 40px; padding: 0; border: 1px solid var(--hairline); border-radius: var(--r-sm); background: rgba(255, 255, 255, .85); color: var(--text-2); font-size: 22px; line-height: 1; cursor: pointer; } .v3 .ids-add:hover { border-color: #5cb85c; color: #3c763d; } /* «Другие имена»: the green tint of a hovered row of the table is not for the names (a pill and the form of a new name are not rows to point at) */ .v3 #frmName table.t tbody tr:hover td { background: transparent; } /* «Другие имена» in the card of a runner (the editor): the names are in a column, one under another, compact (the comment is before the cross); the form of a new name is a column of the fields, a caption on the left as in the other fields of the card */ .v3 .names-compact #frmName tr.nm-row { display: flex; width: fit-content; max-width: 100%; margin: 0 0 4px; padding: 2px 4px 2px 12px; font-size: var(--fs-sm); gap: 4px; } .v3 .names-compact #frmName tr.nm-row .nm-c { display: inline; order: 4; margin-left: 4px; font-weight: 400; color: var(--text-2); } .v3 .names-compact #frmName tr.nm-row .nm-c:empty { display: none; } .v3 .names-compact #frmName tr.nm-row .nm-c:not(:empty)::before { content: '· '; } .v3 .names-compact #frmName tr.nm-row .nm-del-cell { order: 5; } .v3 .names-compact #frmName .nm-del { width: 22px; height: 22px; font-size: 17px; } .v3 .names-compact #frmName tr.set-add { grid-template-columns: minmax(0, 1fr); gap: 12px 0; margin-top: 4px; padding-top: 14px; } /* the fields are the same as in «Данные бегуна»: a column up to 980px in the middle, the caption on the left (36%), the field on the right, 40px high */ .v3 .names-compact #frmName tr.set-add td[data-label] { display: grid; grid-template-columns: minmax(180px, 36%) minmax(0, 1fr); column-gap: 16px; align-items: start; width: 100%; max-width: 980px; margin: 0 auto; } .v3 .names-compact #frmName tr.set-add td[data-label]::before { display: block; margin: 0; padding-top: 10px; text-align: right; font-size: var(--fs-sm); font-weight: 500; line-height: 1.3; } .v3 .names-compact #frmName tr.set-add td:nth-child(n+3) { grid-column: auto; } .v3 .names-compact #frmName tr.set-add input[type=text] { height: 40px; } .v3 .names-compact #frmName tr.set-add td.right { display: block; margin: 0; text-align: right; } .v3 .names-compact #frmName tr.set-add td.right .btn { display: inline-flex; width: auto; padding: 5px 20px; } @media (max-width: 640px) { .v3 .names-compact #frmName tr.set-add td[data-label] { grid-template-columns: minmax(0, 1fr); row-gap: 2px; } .v3 .names-compact #frmName tr.set-add td[data-label]::before { text-align: left; padding-top: 0; } } /* The personal setting «Шрифт: как в старой версии» (the admins, «Мои данные»; the value is «arial»): the font of the old design (Bootstrap 3: "Helvetica Neue", Helvetica, Arial) and its spacing of the letters (none) and of the lines instead of Inter, which is tight and low: it is hard for some eyes. The size is the same as in the old design: 15px of the new one with the zoom .93 are 14px. */ .v3.ui-font-arial, .v3.ui-font-arial .logo, .v3.ui-font-arial h1, .v3.ui-font-arial h2, .v3.ui-font-arial h3 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .v3.ui-font-arial { line-height: 1.42857143; } .v3.ui-font-arial, .v3.ui-font-arial *, .v3.ui-font-arial *::before, .v3.ui-font-arial *::after { letter-spacing: normal !important; } /* the choice of the font and of the size in the personal settings */ .v3 .ui-setting { padding: 12px 0; border-top: 1px solid var(--hairline); } .v3 .ui-setting:first-of-type { border-top: 0; } .v3 .ui-setting .switch-title { display: block; font-weight: 600; } .v3 .ui-setting .switch-hint { display: block; margin: 2px 0 8px; } .v3 .ui-choices { display: flex; flex-wrap: wrap; gap: 10px; } .v3 .ui-choice { display: flex; align-items: flex-start; gap: 8px; flex: 1 1 200px; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: var(--r-sm); background: rgba(255, 255, 255, .7); cursor: pointer; } .v3 .ui-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); } .v3 .ui-choice input { margin-top: 4px; accent-color: var(--accent-text); } .v3 .ui-choice small { display: block; margin-top: 2px; color: var(--text-2); } .v3 .pr-problems { margin: -6px 0 14px; } .v3 .pr-problems p { margin: 0 0 6px; } /* the file of the protocol is in the green line of the page of the protocol (as the actions on the page of an event): the name with the link and the red button, then the actions; the other files and the sheet are in a small line under */ .v3 .pr-bar-right { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 14px; } .v3 .pr-bar-extra { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: var(--fs-sm); color: var(--text-2); } .v3 .pr-bar-extra b { font-weight: 600; } .v3 .pr-bar-file { display: inline-flex; align-items: center; gap: 6px; } .v3 .pr-dl { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--accent-text); } .v3 .pr-dl:hover { background: rgba(var(--accent-rgb), .22); text-decoration: none; } /* The journal of the letters: the head of the list has room, the button «Обновить» turns its arrows after a click, while the list is loading */ .v3 .mail-list-head { padding: 6px 0 14px; gap: 12px 16px; } .v3 .mail-refresh { gap: 8px; padding-left: 14px; padding-right: 16px; } .v3 .mail-refresh svg { flex: none; } .v3 .mail-refresh.is-loading::before { content: none; display: none; } /* the general spinner of a loading button would widen it: here the icon itself turns */ .v3 .mail-refresh.is-loading { opacity: 1; } .v3 .mail-refresh.is-loading svg { animation: mail-refresh-spin .8s linear infinite; } @keyframes mail-refresh-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .v3 .mail-refresh.is-loading svg { animation-duration: 2.4s; } } /* The table of the totals of the journal of the letters: the column «Сегодня» is lightly tinted, to be seen next to «Вчера» */ .v3 table.mail-sum th.col-today, .v3 table.mail-sum td.col-today { background: rgba(92, 184, 92, .10); } .v3 table.mail-sum tbody tr:hover td.col-today { background: rgba(92, 184, 92, .18); } .v3 table.mail-sum td.col-today { font-weight: 600; } /* «да» / «нет» of a check against the data of the runner (the page of the actions to approve): exactly the Bootstrap label of the old version (green #5cb85c and red #d9534f, white bold letters, 75% of the text, a small radius) */ .v3 .badge.yn { display: inline; padding: .2em .6em .3em; font-size: calc(75% + 1px); font-weight: 700; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25em; letter-spacing: normal; } .v3 .badge.yn-yes { background: #5cb85c; } .v3 .badge.yn-no { background: #d9534f; } .v3 .badge.yn-warn { background: #f0ad4e; } /* «почти», «переставлены имя и фамилия»: the label-warning of the old version */ /* Subscriptions: the button «Подписаться» on the page of a person (at the top right of the banner of the page of a user) */ .v3 .follow-form { position: absolute; top: 14px; z-index: 6; margin: 0; } .v3 .follow-form.on-profile { right: 16px; height: 36px; display: flex; align-items: center; } /* the top right corner of the banner of the page of a user */ .v3 .follow-btn { gap: 7px; background: rgba(255, 255, 255, .94); color: #3c763d; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); } .v3 .follow-btn:hover { background: #fff; } .v3 .follow-btn.is-following { background: #3c763d; color: #fff; } .v3 .follow-btn.is-following:hover { background: #2f6b34; } /* The page «Лента»: a result of a friend per line, the date at the left */ .v3 .feed-list { list-style: none; margin: 0; padding: 0; } .v3 .feed-item { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(60, 60, 67, .08); } .v3 .feed-item:last-child { border-bottom: 0; } .v3 .feed-date { flex: none; width: 64px; color: var(--text-3); font-size: var(--fs-sm); padding-top: 2px; } .v3 .feed-body { min-width: 0; font-size: var(--fs-lg); line-height: 1.4; } .v3 .feed-person { font-weight: 650; } .v3 .feed-time { font-weight: 700; white-space: nowrap; } .v3 .feed-race { margin-top: 2px; } @media (max-width: 720px) { .v3 .feed-item { gap: 12px; } .v3 .feed-date { width: 48px; } .v3 .feed-body { font-size: var(--fs-md); } } /* The page «Лента»: the block «Подписки» on the top: the title and the total (grey) on one line, under them the people: a photo (or the initials) and the name below it */ /* The page «Лента» in three columns: the menu of the cabinet, the feed in the middle, at the right the subscriptions and under them the subscribers */ .v3 .feed-layout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 0 20px; align-items: start; } .v3 .feed-main, .v3 .feed-side { min-width: 0; } .v3 .feed-layout .section { margin-top: 0; } .v3 .feed-side .section + .section { margin-top: 16px; } @media (max-width: 1240px) { .v3 .feed-layout { grid-template-columns: minmax(0, 1fr); } .v3 .feed-side { margin-top: 16px; } } .v3 .subs-title { display: flex; align-items: center; gap: 10px; min-height: 36px; } /* the same height with and without the gear, so the people of both columns start on one line */ .v3 .subs-empty { margin: 14px 0 0; font-size: var(--fs-md); } .v3 .subs-more { margin: 8px 0 0; } .v3 .subs-total { color: var(--text-3); font-size: var(--fs-lg); font-weight: 600; } .v3 .subs-grid { list-style: none; margin: 8px -4px 0; padding: 0 4px 8px; display: flex; flex-wrap: nowrap; gap: 4px 6px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: rgba(118, 118, 128, .35) transparent; } /* the people are in one line, the rest is scrolled sideways */ .v3 .subs-grid { --subs-n: 5; } /* how many people are seen without a scroll: the tile is that part of the width, the rest is scrolled */ .v3 .subs-grid li { flex: none; width: calc((100% - (var(--subs-n) - 1) * 6px) / var(--subs-n)); } .v3 .subs-person { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px 6px; border-radius: 14px; text-align: center; text-decoration: none; color: var(--text); transition: background .15s; } .v3 .subs-ava { width: 100%; max-width: 56px; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #dff0d8; color: #3c763d; font-weight: 700; font-size: var(--fs-lg); transition: box-shadow .15s; } .v3 .subs-ava img { width: 100%; height: 100%; object-fit: cover; display: block; } .v3 .subs-person:hover, .v3 .subs-person:focus-visible, .v3 .subs-person:hover .subs-name { text-decoration: none; } .v3 .subs-person:hover, .v3 .subs-person:focus-visible { background: rgba(92, 184, 92, .06); } /* a very light green tile under the person, the photo itself does not change */ .v3 .subs-name { font-size: var(--fs-sm); line-height: 1.25; max-width: 100%; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 720px) { .v3 .subs-grid { --subs-n: 5; } } /* The window of the subscriptions (the gear on the page «Лента»): a person per line, the photo, the name, the button */ .v3 dialog.subs-dialog { width: min(520px, calc(100% - 32px)); } .v3 .subs-manage-list { list-style: none; margin: 0; padding: 0; max-height: min(60vh, 520px); overflow-y: auto; } .v3 .subs-manage-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--hairline); } .v3 .subs-manage-list li:last-child { border-bottom: 0; } .v3 .subs-manage-list form { margin: 0; flex: none; } .v3 .subs-m-person { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; color: var(--text); } .v3 .subs-m-person:hover { text-decoration: none; color: var(--accent-text); } .v3 .subs-m-ava { flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #dff0d8; color: #3c763d; font-weight: 700; font-size: var(--fs-md); } .v3 .subs-m-ava img { width: 100%; height: 100%; object-fit: cover; display: block; } .v3 .subs-m-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .v3 .subs-error { margin: 10px 0 0; color: var(--red); font-size: var(--fs-md); } .v3 dialog.subs-dialog .modal-title .subs-total { margin-left: 6px; } @media (max-width: 720px) { .v3 .feed-lead { display: none; } } /* the long note under the title of the feed is not shown on a phone */ .v3 .feed-side { padding-top: 0; } /* the right column starts at the top of the page, on the line of the menu of the cabinet; the title of the feed is over the middle column only */ /* The title «Подписки» is a button: a click opens the window of the management of the subscriptions (instead of the gear) */ .v3 button.subs-open { width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; } .v3 button.subs-open .subs-chev { margin-left: auto; color: var(--text-3); transition: transform .15s, color .15s; } .v3 button.subs-open:hover h2, .v3 button.subs-open:focus-visible h2 { color: var(--accent-text); } .v3 button.subs-open:hover .subs-chev { color: var(--accent-text); transform: translateX(2px); } .v3 .subs-already { flex: none; } /* The feed: the filters over it (the kind of results and a person), the tags at the results */ .v3 .feed-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 12px; } .v3 .feed-chips { display: flex; flex-wrap: wrap; gap: 6px; } .v3 .feed-chips .chip-link { padding: 5px 14px; font-size: var(--fs-md); font-weight: 500; border: 0; box-sizing: border-box; } .v3 .feed-chips .chip-link.on { background: var(--accent-soft); color: var(--accent-text); } /* the weight does not change: a bolder text would make the chosen button wider */ .v3 .feed-filters select { margin-left: auto; height: 34px; max-width: 220px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--hairline); background: rgba(255, 255, 255, .85); font: inherit; font-size: var(--fs-md); } .v3 .feed-tag { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 650; vertical-align: 1px; white-space: nowrap; } .v3 .feed-tag-pb { background: #fdf0cf; color: #7a5a00; } .v3 .feed-tag-first { background: #e2eefb; color: #1d4468; } /* «Возможно, вы знакомы»: a person per line with the reason under the name */ .v3 .subs-suggest { max-height: none; overflow: visible; margin-top: 8px; } .v3 .subs-m-text { display: grid; min-width: 0; } .v3 .subs-m-reason { color: var(--text-3); font-size: var(--fs-xs); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The phone: the blocks of the right column are a panel of three buttons under the title of the feed (the icon over the caption); the column itself is hidden */ .v3 .feed-panel { display: none; } @media (max-width: 720px) { .v3 .feed-panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; } .v3 .fp-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 84px; padding: 10px 6px 8px; gap: 6px; border: 0; border-radius: 14px; background: var(--glass); box-shadow: var(--shadow); color: var(--text); font: inherit; cursor: pointer; } .v3 .fp-btn b { line-height: 1; color: var(--accent-text); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); } /* the icon is in a round mark, as an avatar */ .v3 .fp-btn:disabled b { background: rgba(118, 118, 128, .12); color: var(--text-3); } .v3 .fp-btn span { font-size: var(--fs-xs); line-height: 1.2; color: var(--text-2); text-align: center; } .v3 .fp-btn span i { font-style: normal; color: var(--text-3); margin-left: 2px; } /* the number is small, in the caption: the big mark of a button is its icon */ .v3 .fp-btn:active { background: var(--accent-soft); } .v3 .fp-btn:disabled { opacity: .5; cursor: default; } .v3 .feed-side { display: none; } } /* The phone: the filters of the feed are in one line and smaller (the three buttons and the select of a person) */ @media (max-width: 720px) { .v3 .feed-filters { flex-wrap: nowrap; gap: 6px; } .v3 .feed-chips { flex-wrap: nowrap; gap: 4px; min-width: 0; } .v3 .feed-chips .chip-link { padding: 4px 9px; font-size: var(--fs-sm); white-space: nowrap; } .v3 .feed-filters select { flex: 0 1 auto; width: auto; min-width: 0; max-width: 92px; height: 28px; padding: 0 6px; font-size: var(--fs-sm); } } /* The bar of the cabinet on a phone: five sections and «Ещё» (the sheet with the rest: achievements, search, trackers, settings, exit) */ .v3 .cabinet-side .side-morebtn { display: none; } .v3 dialog.side-sheet { display: none; } @media (max-width: 720px) { .v3 .cabinet-side .side-morebtn { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; padding: 4px 0 2px; border: 0; border-radius: 10px; background: none; color: var(--text-2); font: inherit; font-size: 10.5px; font-weight: 550; line-height: 1.15; cursor: pointer; -webkit-tap-highlight-color: transparent; } .v3 .cabinet-side .side-morebtn.active { color: var(--accent-text); font-weight: 650; } .v3 .cabinet-side .side-morebtn .ico { display: block; width: 24px; height: 24px; } .v3 dialog.side-sheet[open] { display: block; position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: none; padding: 8px 12px calc(14px + env(safe-area-inset-bottom)); border: 0; border-radius: 20px 20px 0 0; background: #fff; box-shadow: 0 -8px 30px rgba(0, 0, 0, .2); animation: sheet-up .22s ease; } .v3 dialog.side-sheet::backdrop { background: rgba(20, 28, 22, .38); } .v3 .sheet-grip { outline: none; width: 38px; height: 4px; margin: 2px auto 10px; border-radius: 2px; background: rgba(118, 118, 128, .3); } .v3 dialog.side-sheet a { display: flex; align-items: center; gap: 14px; padding: 14px 8px; border-radius: 12px; color: var(--text); font-size: var(--fs-lg); font-weight: 550; text-decoration: none; } .v3 dialog.side-sheet a:active { background: var(--accent-soft); } .v3 dialog.side-sheet a .ico { flex: none; width: 24px; height: 24px; color: var(--text-2); } .v3 dialog.side-sheet a.sheet-logout { margin-top: 4px; border-top: 1px solid var(--hairline); border-radius: 0 0 12px 12px; color: var(--text-2); } .v3 dialog.side-sheet .sheet-count { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: #fde9d0; color: #c2610c; text-align: center; font-size: var(--fs-sm); } } @keyframes sheet-up { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } } /* A tablet (the feed is one column, the screen is wider than a phone): the blocks of the right column keep their look but stand over the feed, under its title: the subscriptions and the subscribers side by side, the people you may know under them */ @media (min-width: 721px) and (max-width: 1240px) { .v3 .feed-layout { display: flex; flex-direction: column; align-items: stretch; } .v3 .feed-main { display: contents; } .v3 .feed-main > .page-head { order: 1; } .v3 .feed-main > *:not(.page-head) { order: 3; } .v3 .feed-side { order: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 16px; } .v3 .feed-side .section + .section { margin-top: 0; } .v3 .feed-side > .subs-card:nth-child(3) { grid-column: 1 / -1; } } /* The form of the settings: a field that is not right after the press of «Сохранить» (profile-form.js): a pale red frame and the words under it */ .v3 .switch.is-invalid, .v3 .fld.is-invalid { background: rgba(217, 83, 79, .07); border-radius: 12px; box-shadow: 0 0 0 2px rgba(217, 83, 79, .35); } .v3 .form-error-note { margin: 6px 0 4px; color: var(--red); font-size: var(--fs-md); font-weight: 600; } /* The page of a series, «Рекорды серии»: the record holders with a medal, the compact top-10 by time of men and women (two columns), the attendance */ .v3 .series-sub { margin: 18px 0 6px; font-size: var(--fs-xl, 20px); letter-spacing: -.01em; } .v3 .series-sub:first-of-type { margin-top: 10px; } .v3 table.records-t .rec-who { display: table-cell; } .v3 table.records-t .rec-who .medal.inline { display: inline-block; vertical-align: top; margin: 2px 8px 0 0; } .v3 table.records-t .rec-who .rec-name { display: inline-block; vertical-align: top; } .v3 .series-top-block { margin: 0 0 18px; } .v3 .series-top-dist { margin: 6px 0 8px; font-size: var(--fs-lg); color: var(--text-2); } .v3 .series-top-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; } .v3 .series-top-title { margin: 0 0 4px; font-size: var(--fs-md); font-weight: 650; } .v3 table.series-top-t { width: 100%; } .v3 table.series-top-t td { padding: 6px 8px; font-size: var(--fs-md); } .v3 table.series-top-t td.who { display: table-cell; } .v3 table.series-top-t .rk { display: inline-flex; align-items: center; justify-content: center; width: 30px; margin-right: 6px; vertical-align: middle; } .v3 table.series-top-t .rk .medal { width: 20px; height: 25px; } .v3 table.series-top-t .rk .rank { color: var(--text-3); } @media (max-width: 720px) { .v3 .series-top-cols { grid-template-columns: minmax(0, 1fr); gap: 14px 0; } .v3 table.series-top-t td { padding: 5px 6px; font-size: var(--fs-sm); } } /* The phone: the tables of the records and of the attendance of a series are cards, one under another (a distance is the head of a card; the fields have their captions from data-label) */ @media (max-width: 720px) { .v3 table.records-t, .v3 table.records-t tbody, .v3 table.attend-t, .v3 table.attend-t tbody { display: block; width: 100%; } .v3 table.records-t thead, .v3 table.attend-t thead { display: none; } /* the heads are in the captions of the fields */ .v3 table.records-t tr, .v3 table.attend-t tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--hairline); } .v3 table.records-t tbody tr:last-child, .v3 table.attend-t tbody tr:last-child { border-bottom: 0; } .v3 .table-flush table.records-t td, .v3 .table-flush table.attend-t td { border: 0; padding: 0 22px; background: none; } .v3 .table-flush table.records-t td.num { padding-right: 0; } .v3 table.records-t td:first-child, .v3 table.attend-t td:first-child { display: block; margin-bottom: 8px; font-size: var(--fs-lg); } /* the records: the holder and the result in one line, the caption over the holder */ .v3 table.records-t tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; align-items: start; } .v3 table.records-t td:first-child { grid-column: 1 / -1; } .v3 table.records-t td.rec-who { padding-top: 6px; } .v3 table.records-t td.rec-who::before { content: attr(data-label); display: block; margin-bottom: 3px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--text-3); } .v3 table.records-t td.num { padding-top: 24px; font-size: var(--fs-lg); font-weight: 650; } .v3 table.records-t td:empty { display: none; } /* the attendance: a caption and a value in a line */ .v3 .table-flush table.attend-t td[data-label] { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 22px; font-size: var(--fs-md); } .v3 table.attend-t td[data-label]::before { content: attr(data-label); color: var(--text-3); font-size: var(--fs-sm); } .v3 table.attend-t td.hide-sm[data-label] { display: flex; } /* the columns that were hidden on a phone are shown in the card */ .v3 table.attend-t td.hide-sm:empty { display: none; } .v3 table.attend-t td .val { text-align: right; } .v3 table.attend-t td .sub { display: inline; margin-left: 6px; } } /* The action of an event (the page of a series: «Планирую участвовать», «Добавить свой результат») stands at the right end of the line of the links, level with «Сайт»; the buttons are of one size */ .v3 .calendar-body .links .links-action { margin-left: auto; align-self: center; margin-right: -26px; } /* up to the right edge of the card: over the gap before the column of the menu */ .v3 .calendar-item:has(.calendar-side .act-btn) .links-action { margin-right: -197px; } /* the menu «Действия с забегом» (162px + the gap) is at the right: the button goes under it, to the edge */ @media (max-width: 720px) { .v3 .calendar-body .links .links-action, .v3 .calendar-item:has(.calendar-side .act-btn) .links-action { margin-right: 0; } } @media (min-width: 721px) { .v3 .calendar-item:has(.links-action) .calendar-side { padding-bottom: 46px; } } /* the rating of the event stands over the button, not under it (the button is at the right edge on the line of the links) */ .v3 .calendar-body .links .links-action .btn { white-space: nowrap; } /* The statistics of the site (the pages /editor/statistic/…): the panel of the sections, the rows of the widgets that are loaded when scrolled to, the cards, the donuts, the bars, the tables */ .v3 .stat-nav { position: sticky; top: 72px; z-index: 6; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin: 0 0 16px; padding: 8px 10px; border-radius: 16px; background: rgba(255, 255, 255, .86); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08), 0 6px 18px -10px rgba(0, 0, 0, .18); } .v3 .stat-tabs { display: flex; flex-wrap: wrap; gap: 4px; } .v3 .stat-tab { padding: 8px 16px; border-radius: 999px; color: var(--text-2); font-weight: 600; font-size: var(--fs-md); text-decoration: none; } .v3 .stat-tab:hover { background: rgba(118, 118, 128, .1); text-decoration: none; } .v3 .stat-tab.on { background: var(--accent-soft); color: var(--accent-text); } .v3 .stat-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .v3 .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin: 0 0 16px; align-items: start; } .v3 .stat-row-1 { grid-template-columns: minmax(0, 1fr); } .v3 .stat-w { min-width: 0; } .v3 .stat-w .stat-content[hidden], .v3 .stat-w .stat-skeleton[hidden], .v3 .stat-w .stat-error[hidden] { display: none; } .v3 .stat-skeleton { display: grid; gap: 14px; padding: 20px; min-height: 190px; } .v3 .stat-sk-title, .v3 .stat-sk-body { display: block; border-radius: 10px; background: linear-gradient(90deg, rgba(118, 118, 128, .10) 25%, rgba(118, 118, 128, .18) 50%, rgba(118, 118, 128, .10) 75%); background-size: 200% 100%; animation: statShimmer 1.3s linear infinite; } .v3 .stat-sk-title { width: 55%; height: 18px; } .v3 .stat-sk-body { height: 110px; } @keyframes statShimmer { to { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .v3 .stat-sk-title, .v3 .stat-sk-body { animation: none; } } .v3 .stat-error { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px; } .v3 .stat-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; } .v3 .stat-card { padding: 16px 18px; } .v3 .stat-card-title { font-size: var(--fs-sm); color: var(--text-3); text-transform: uppercase; letter-spacing: .03em; font-weight: 600; } .v3 .stat-card-total { margin: 4px 0 2px; font-size: 30px; font-weight: 750; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; } .v3 .stat-card-last { font-size: var(--fs-md); color: var(--text-2); } .v3 .stat-card-note { margin-top: 4px; font-size: var(--fs-sm); color: var(--text-3); } .v3 .stat-delta { font-size: var(--fs-sm); font-weight: 650; color: var(--text-3); } .v3 .stat-delta.up { color: #2e7d32; } .v3 .stat-delta.down { color: #b3261e; } .v3 .stat-h { margin: 0 0 12px; font-size: var(--fs-lg); font-weight: 650; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .v3 .stat-donut, .v3 .stat-trend { padding: 18px 20px; } .v3 .stat-donut-body { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .v3 .stat-ring { position: relative; flex: none; width: 184px; height: 184px; } .v3 .stat-ring svg { display: block; transform: rotate(0deg); } .v3 .stat-ring circle { transition: stroke-dasharray .4s ease; } .v3 .stat-ring-total { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; } .v3 .stat-ring-total b { font-size: 26px; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .v3 .stat-ring-total b.long { font-size: 19px; } /* seven and eight digits (with the spaces between the thousands) stay inside the ring */ .v3 .stat-legend { flex: 1 1 140px; min-width: 0; list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; } .v3 .stat-legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: var(--fs-md); } .v3 .stat-legend i { width: 10px; height: 10px; border-radius: 50%; } .v3 .stat-leg-label { overflow: hidden; text-overflow: ellipsis; } .v3 .stat-leg-val { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; } .v3 .stat-note { margin: 12px 0 0; } .v3 .stat-trend-total { color: var(--text-3); font-weight: 600; font-variant-numeric: tabular-nums; } .v3 .stat-chart { --bar: #5cb85c; display: flex; align-items: flex-end; gap: 4px; height: 118px; margin: 0 0 26px; padding: 0 2px; } .v3 .stat-bar { position: relative; flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; } .v3 .stat-bar i { display: block; width: 100%; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--bar); opacity: .85; } .v3 .stat-bar:last-child i { background: repeating-linear-gradient(135deg, var(--bar) 0 6px, rgba(255, 255, 255, .5) 6px 12px); } .v3 .stat-bar:hover i { opacity: 1; } .v3 .stat-bar span { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); font-size: 10px; color: var(--text-3); white-space: nowrap; display: none; } .v3 .stat-bar:nth-child(3n+1) span { display: block; } .v3 table.stat-t td, .v3 table.stat-t th { padding: 8px 10px; } .v3 table.stat-t tr.stat-partial td { background: rgba(92, 184, 92, .06); } @media (max-width: 720px) { .v3 .stat-nav { top: 64px; } .v3 .stat-card-total { font-size: 26px; } .v3 .stat-tabs { overflow-x: auto; flex-wrap: nowrap; max-width: 100%; } .v3 .stat-tab { white-space: nowrap; padding: 7px 12px; } .v3 .stat-row { grid-template-columns: minmax(0, 1fr); } } /* The results of the members of a club for a year: the members who did not run are paler */ .v3 table.club-res-t tr.muted-row td { color: var(--text-3); } .v3 table.club-res-t tr.muted-row td a { color: var(--text-3); font-weight: 500; } /* The choice of a year (the page of the results of the members of a club): the select of the site with an arrow, the caption before it */ .v3 .year-pick { margin: 0; gap: 8px; flex-wrap: nowrap; } .v3 .year-pick select { min-width: 96px; font-weight: 600; } /* A sortable table (table-sort.js): the head of a column is pressed; the arrow shows the order */ .v3 table.t th.is-sortable { cursor: pointer; user-select: none; white-space: nowrap; } .v3 table.t th.is-sortable:hover { color: var(--text); } .v3 table.t th.is-sortable:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: -2px; } .v3 table.t th.is-sortable::after { content: ''; display: inline-block; margin-left: 5px; width: 0; height: 0; vertical-align: 1px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: 0; } .v3 table.t th.is-sortable:hover::after { opacity: .35; } .v3 table.t th.sort-desc::after { opacity: .9; color: var(--accent-text); } .v3 table.t th.sort-asc::after { opacity: .9; color: var(--accent-text); border-top: 0; border-bottom: 5px solid currentColor; } /* A bar of a chart shows its period and its value at once under the pointer (not after the delay of the browser's own hint) */ .v3 .stat-bar { cursor: default; outline: none; } .v3 .stat-bar::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 5; padding: 5px 9px; border-radius: 8px; background: rgba(29, 29, 31, .92); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s; } .v3 .stat-bar:hover::after, .v3 .stat-bar:focus-visible::after { opacity: 1; } .v3 .stat-bar:hover i, .v3 .stat-bar:focus-visible i { opacity: 1; filter: brightness(1.08); } /* «Итоги года» (results/year_review.py): баннер на странице «Достижения» в декабре и сама страница */ .v3 .yr-banner { position: relative; display: flex; align-items: center; gap: 14px; margin: 0; padding: 14px 0; border-radius: var(--r-lg, var(--r)); color: #2b7a45; text-decoration: none; overflow: hidden; background: linear-gradient(135deg, #dff0d8, #bfe3b4 55%, #a3d6a0); } .v3 .yr-banner:hover { color: #2b7a45; text-decoration: none; } .v3 .yr-banner + .section { margin-top: 14px; } /* от полосы до блока достижений — как от заголовка страницы до полосы (.page-head: 14px) */ .v3 .yr-ticker { display: block; flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); } .v3 .yr-ticker-track { display: flex; width: max-content; animation: yrTicker 28s linear infinite; } /* на наведение не останавливается: движется всегда */ .v3 .yr-ticker-set { display: flex; flex: none; } .v3 .yr-ticker-set > span { flex: none; padding-right: 28px; font-size: var(--fs-xl, 20px); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; } .v3 .yr-ticker-set > span::after { content: '•'; margin-left: 28px; opacity: .45; } @keyframes yrTicker { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .v3 .yr-ticker-track { animation: none; } } .v3 .yr-years { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; } .v3 .yr-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px; background: rgba(118, 118, 128, .09); color: var(--text); font-size: var(--fs-md); font-weight: 550; text-decoration: none; } a.yr-chip:hover { text-decoration: none; background: rgba(118, 118, 128, .16); } .v3 .yr-chip.active { background: #47a657; color: #fff; } .v3 .yr-chip small { opacity: .6; font-weight: 500; } .v3 .yr-hero { position: relative; display: grid; gap: 14px; margin: 0 0 16px; padding: 24px 26px; border-radius: var(--r); color: #1f5d33; background: linear-gradient(135deg, #dff0d8, #bfe3b4 55%, #a3d6a0); overflow: hidden; } .v3 .yr-hero-year { position: absolute; right: 18px; top: -6px; font-size: 110px; font-weight: 800; letter-spacing: -.05em; line-height: 1; color: #fff; opacity: .45; pointer-events: none; } .v3 .yr-big { display: flex; align-items: baseline; gap: 8px; } .v3 .yr-big b { font-size: 64px; font-weight: 800; letter-spacing: -.04em; line-height: 1; } .v3 .yr-big span { font-size: 24px; font-weight: 600; opacity: .9; } .v3 .yr-hero-line { margin: 4px 0 0; font-size: var(--fs-lg, 17px); color: #2b7a45; } .v3 .yr-hero-tiles { display: flex; flex-wrap: wrap; gap: 10px; } .v3 .yr-hero-tiles > div { display: grid; padding: 10px 16px; border-radius: 14px; background: rgba(255, 255, 255, .6); min-width: 92px; } .v3 .yr-hero-tiles b { font-size: 26px; font-weight: 750; line-height: 1.1; } .v3 .yr-hero-tiles span { font-size: var(--fs-sm); color: #2b7a45; } .v3 .yr-share-row { display: flex; flex-wrap: wrap; gap: 8px; } .v3 .yr-share { justify-self: start; background: #fff; color: #1f5d33; } .v3 .yr-card h2 { margin: 0 0 12px; font-size: var(--fs-xl, 20px); } .v3 .yr-card { margin-bottom: 16px; } .v3 .yr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 16px; } .v3 .yr-grid .yr-card { margin-bottom: 0; } .v3 .yr-start { margin: 0 0 4px; font-size: var(--fs-lg, 17px); } .v3 .yr-start a { color: var(--text); } .v3 .yr-months { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; } .v3 .yr-months li { display: grid; justify-items: stretch; text-align: center; gap: 3px; min-width: 0; } .v3 .yr-bar { display: flex; align-items: flex-end; width: 100%; height: 90px; border-radius: 8px; background: rgba(118, 118, 128, .08); overflow: hidden; } .v3 .yr-bar i { display: block; width: 100%; background: #47a657; border-radius: 8px 8px 0 0; min-height: 0; } .v3 .yr-months li.best .yr-bar i { background: #2f8f4e; } .v3 .yr-months b { font-size: var(--fs-sm); min-height: 1.2em; } .v3 .yr-months small { color: var(--muted, #6b6b70); font-size: 11px; } .v3 .yr-records, .v3 .yr-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .v3 .yr-records li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .v3 .yr-records a { color: var(--text); } .v3 .yr-time { font-variant-numeric: tabular-nums; font-weight: 600; } .v3 .yr-gain { color: #2f8f4e; font-weight: 650; font-variant-numeric: tabular-nums; } .v3 .yr-sub { margin: 14px 0 6px; font-size: var(--fs-md); } .v3 .yr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; } .v3 .yr-people { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } @media (max-width: 560px) { .v3 .yr-banner { padding: 8px 0; } .v3 .yr-ticker-set > span { padding-right: 16px; font-size: var(--fs-sm, 13px); letter-spacing: .05em; } .v3 .yr-ticker-set > span::after { margin-left: 16px; } .v3 .yr-hero { padding: 20px 18px; } .v3 .yr-big b { font-size: 48px; } .v3 .yr-hero-year { font-size: 72px; } .v3 .yr-months { gap: 3px; } } .v3 dialog.yr-card-dialog { width: min(460px, calc(100% - 32px)); } .v3 .yr-card-body { display: grid; gap: 14px; justify-items: center; } .v3 .yr-card-img { display: block; max-width: 100%; max-height: calc(100vh - 230px); border-radius: 14px; box-shadow: 0 6px 20px -10px rgba(0, 0, 0, .35); } .v3 .yr-card-img.story { width: auto; aspect-ratio: 9 / 16; } .v3 .yr-card-img.square { width: 100%; aspect-ratio: 1 / 1; } /* Страница «Новости»: короткая шкала шрифтов (одно семейство Inter): 12/700 — подписи капсом, 13/400 — даты, 15/400 — текст, 15/600 — вкладки и кнопки, 20/700 — заголовки новостей и разделов, 36/700 — заглавная новость, 54/700 — заголовок страницы. Раньше были ещё 16/400 для текста и три размера заголовков (18, 20, 22). */ .v3 .kn-kicker, .v3 .kn-today { font-weight: 700; } .v3 .kn-text { font-size: var(--fs-base); } .v3 .kn-h, .v3 .kn-card h3, .v3 .kn-card.is-small h3, .v3 .kn-line h3, .v3 .kn-side .kn-card h3 { font-size: var(--fs-2xl); } .v3 .kn-bar label, .v3 .kn-bar .lbl { font-size: var(--fs-sm); font-weight: 400; } .v3 .kn-bar .btn { font-size: var(--fs-base); font-weight: 600; } .v3 .kn-sub b { font-weight: 600; } /* Страница «Новости»: плотнее по вертикали (замечание: «пол страницы пустоты»): верхний отступ страницы, шапка, панель вкладок и промежутки между блоками меньше */ .v3 main.kn-page { padding-top: 22px; } .v3 .kn-mast { padding-top: 0; } .v3 .kn-mast-main { padding-bottom: 8px; } .v3 .kn-bar { padding: 6px 0; } .v3 .kn-front { margin-top: 12px; } .v3 .kn-row { margin-top: 20px; } .v3 .kn-row-all { margin-top: 16px; } .v3 .kn-feed { margin-top: 18px; } /* Страница «Подписки» (как «Друзья» во ВКонтакте): слева вкладки «Подписки» и «Подписчики», поиск по имени, список людей; справа «Возможно, вы знакомы» */ .v3 .feed-layout.is-single { grid-template-columns: minmax(0, 1fr); } .v3 .sub-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 0 20px; align-items: start; } .v3 .sub-layout .section { margin-top: 0; } .v3 .sub-main, .v3 .sub-side { min-width: 0; } .v3 .sub-side .section + .section { margin-top: 16px; } .v3 .sub-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; } .v3 .sub-tabs { display: flex; flex-wrap: wrap; gap: 6px; } .v3 .sub-tab { border: 0; background: none; padding: 7px 14px; border-radius: 10px; font: inherit; font-size: var(--fs-base); font-weight: 600; color: var(--text-2); cursor: pointer; } .v3 .sub-tab i { font-style: normal; margin-left: 4px; color: var(--text-3); } .v3 .sub-tab:hover { background: rgba(118, 118, 128, .1); } .v3 .sub-tab.on { background: var(--accent-soft); color: var(--accent-text); } .v3 .sub-search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; margin: 0 0 6px; border-radius: 10px; background: rgba(118, 118, 128, .1); color: var(--text-3); } .v3 .sub-search input { flex: 1; min-width: 0; border: 0; background: none; outline: 0; font: inherit; font-size: var(--fs-base); color: var(--text); } .v3 .sub-list, .v3 .sub-sug { list-style: none; margin: 0; padding: 0; } .v3 .sub-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--hairline); } .v3 .sub-list .sub-row:first-child { border-top: 0; } .v3 .sub-row[hidden], .v3 .sub-panel[hidden] { display: none; } .v3 .sub-ava { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--accent-soft); color: var(--accent-text); font-size: var(--fs-2xl); font-weight: 700; text-decoration: none; } .v3 .sub-ava img { width: 100%; height: 100%; object-fit: cover; display: block; } .v3 .sub-ava.is-small { width: 48px; height: 48px; font-size: var(--fs-base); } .v3 .sub-info { flex: 1; min-width: 0; display: grid; gap: 2px; justify-items: start; } .v3 .sub-name { font-size: var(--fs-base); font-weight: 600; color: var(--text); overflow-wrap: anywhere; } .v3 .sub-name:hover { color: var(--accent-text); text-decoration: none; } .v3 .sub-line { font-size: var(--fs-sm); color: var(--text-3); } .v3 .sub-link { font-size: var(--fs-sm); } .v3 .sub-act { margin: 0; flex: none; } .v3 .sub-already { flex: none; } .v3 .sub-plus { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--accent-text); cursor: pointer; } .v3 .sub-plus:hover { background: var(--accent-soft); } .v3 .sub-plus:disabled { opacity: .5; cursor: default; } .v3 .sub-sug { display: grid; gap: 10px; } .v3 .sub-sug li { display: flex; align-items: center; gap: 12px; } .v3 .sub-h { margin: 0 0 12px; font-size: var(--fs-xl); } .v3 .sub-empty, .v3 .sub-nothing, .v3 .sub-more { margin: 14px 0 0; } .v3 .sub-error { margin: 10px 0 0; color: var(--red); } @media (max-width: 1100px) { .v3 .sub-layout { grid-template-columns: minmax(0, 1fr); } .v3 .sub-side { margin-top: 16px; } } @media (max-width: 560px) { .v3 .sub-top { flex-wrap: wrap; } .v3 .sub-ava { width: 52px; height: 52px; } } .v3 .sub-side .sub-h { font-size: var(--fs-xl); font-weight: 700; letter-spacing: normal; text-transform: none; color: var(--text); } /* Лента как «стена»: дни, в дне карточки забегов, в карточке строки людей: аватар, имя и дистанция, метки, время крупно и «Поздравить» */ .v3 .fd-wall { display: grid; gap: 0; } .v3 .fd-day { margin: 0 0 18px; } .v3 .fd-day-h { margin: 0 0 8px; padding: 0 2px; font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.01em; } .v3 .fd-day-h small { margin-left: 6px; font-size: var(--fs-sm); font-weight: 400; color: var(--text-3); } .v3 .fd-card { margin: 0 0 10px; padding: 14px 18px 4px; } .v3 .fd-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 4px; font-size: var(--fs-base); font-weight: 600; } .v3 .fd-head a { color: var(--text); } .v3 .fd-head a:hover { color: var(--accent-text); text-decoration: none; } .v3 .fd-count { font-size: var(--fs-sm); font-weight: 400; color: var(--text-3); } .v3 .fd-rows { list-style: none; margin: 0; padding: 0; } .v3 .fd-row { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--hairline); } .v3 .fd-row:first-child { border-top: 0; } .v3 .fd-ava { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: var(--accent-soft); color: var(--accent-text); font-size: var(--fs-base); font-weight: 700; text-decoration: none; } .v3 .fd-ava img { width: 100%; height: 100%; object-fit: cover; display: block; } .v3 .fd-main { flex: 1; min-width: 0; display: grid; gap: 4px; justify-items: start; } .v3 .fd-name { font-size: var(--fs-base); font-weight: 600; color: var(--text); } .v3 .fd-name:hover { color: var(--accent-text); text-decoration: none; } .v3 .fd-act { font-size: var(--fs-base); color: var(--text-2); } .v3 .fd-tags { display: flex; flex-wrap: wrap; gap: 6px; } .v3 .fd-tags .feed-tag { margin-left: 0; } .v3 .fd-side { flex: none; display: flex; align-items: center; gap: 14px; padding-right: 6px; } /* время, а правее на той же линии кнопка-ладошка */ .v3 .fd-time { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.01em; color: var(--text); white-space: nowrap; } .v3 .fd-time:hover { color: var(--accent-text); text-decoration: none; } .v3 .fd-cheer { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(118, 118, 128, .1); font: inherit; cursor: pointer; } .v3 .fd-cheer-e { font-size: 20px; line-height: 1; filter: grayscale(1); opacity: .6; transition: filter .15s, opacity .15s, transform .15s; } .v3 .fd-cheer:hover { background: var(--accent-soft); } .v3 .fd-cheer:hover .fd-cheer-e { filter: none; opacity: 1; } .v3 .fd-cheer.on { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px #7cc576; } .v3 .fd-cheer.on .fd-cheer-e { filter: none; opacity: 1; } .v3 .fd-cheer:active .fd-cheer-e { transform: scale(1.2); } .v3 .fd-cheer:disabled { opacity: .6; cursor: default; } .v3 .fd-cheer-n { position: absolute; right: -6px; bottom: -6px; min-width: 18px; padding: 0 5px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(60, 60, 67, .15); font-size: var(--fs-xs); font-weight: 600; line-height: 18px; text-align: center; color: var(--text-2); } .v3 .fd-cheer-n[hidden] { display: none; } @media (max-width: 560px) { /* компактная лента на телефоне: аватар, имя с дистанцией и меткой, справа столбиком время и ладошка */ .v3 .fd-day { margin-bottom: 12px; } .v3 .fd-day-h { margin-bottom: 6px; font-size: var(--fs-xl); } .v3 .fd-card { margin-bottom: 8px; padding: 10px 12px 2px; } .v3 .fd-head { margin-bottom: 0; font-size: var(--fs-md); } .v3 .fd-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 10px; align-items: start; padding: 8px 0; } .v3 .fd-ava { width: 40px; height: 40px; font-size: var(--fs-md); } .v3 .fd-main { gap: 3px; } .v3 .fd-name, .v3 .fd-act { font-size: var(--fs-md); } .v3 .fd-side { width: auto; display: grid; justify-items: end; gap: 4px; padding: 0 4px 0 0; } .v3 .fd-time { font-size: var(--fs-xl); } .v3 .fd-cheer { width: 32px; height: 32px; } .v3 .fd-cheer-e { font-size: 16px; } .v3 .fd-cheer-n { right: -5px; bottom: -5px; min-width: 16px; line-height: 16px; padding: 0 4px; } } /* «Подписки»: действия строки — кнопки-иконки; вкладки и «Найти людей» всегда на одной линии; имени, городу и клубу больше места */ .v3 .sub-iconbtn { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(118, 118, 128, .1); color: var(--text-2); cursor: pointer; } .v3 .sub-iconbtn:hover { background: #fde8e6; color: #a3241c; } .v3 .sub-iconbtn.is-follow { background: var(--accent-soft); color: var(--accent-text); } .v3 .sub-iconbtn.is-follow:hover { background: #cfe8c6; color: var(--accent-text); } .v3 .sub-iconbtn:disabled { opacity: .5; cursor: default; } .v3 .sub-already { display: grid; place-items: center; flex: none; width: 40px; height: 40px; color: var(--accent-text); } .v3 .sub-top { flex-wrap: nowrap; } .v3 .sub-tabs { flex-wrap: nowrap; min-width: 0; } .v3 .sub-tab, .v3 .sub-find { white-space: nowrap; } @media (max-width: 560px) { .v3 .sub-top { gap: 6px; } .v3 .sub-tab { padding: 6px 9px; font-size: var(--fs-md); } .v3 .sub-find { padding-left: 12px; padding-right: 12px; } .v3 .sub-row { flex-wrap: nowrap; gap: 12px; } .v3 .sub-ava { width: 48px; height: 48px; font-size: var(--fs-lg); } .v3 .sub-row .sub-act, .v3 .sub-row .sub-already { margin-left: 0; } } @media (max-width: 400px) { .v3 .sub-find-more { display: none; } } .v3 .plan-form .plan-hint { flex-basis: 100%; margin: -4px 0 0; } /* подсказка под выбором дистанций: можно отметить несколько */ .v3 .admin-page .chip-row { display: flex; flex-wrap: wrap; gap: 8px; } /* ряд кнопок-ссылок на странице города */