static/css/stats.css - fronted_bot - Noriyki/VibeCodeBot

static/css/stats.css
884 строки15 KB
defolttt
feat(backend): Реализована работа сайта с базой данных и получение команд и участников с базы данных
19 фев 2026, 15:10
19 фев 2026, 15:10e10d3a0
* { margin: 0; padding: 0; box-sizing: border-box; }

:root{
  --bg1:#EF2C79;
  --bg2:#ff8a3c;

  --panel:#ffffff;
  --btn:#e8e8e8;
  --btnHover:#d0d0d0;

  --text:#333;
}

body{
  font-family: "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--bg1), var(--bg2));
}

.app{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Верхняя панель */
.topbar{
  background: #fff;
  padding: 0px 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
  margin-bottom: 10px ;
}

.brand{

  width: min(5200px, 100%);
  margin: 0 auto;
  position: relative;
  text-align: center;
}

.brand__title{
  margin: 0;
  line-height: 50px ;
  font-weight: 300;
  letter-spacing: 3px;
  color: #111;
  font-size: clamp(22px, 2.4vw, 42px);
  text-transform: uppercase;
  text-shadow: 0 10px 18px rgba(0,0,0,.25);
}

.brand__logo{
margin: 0;
  width: auto;
  height: auto;
  margin: calc(-1 * 0.95em) auto -30px;
  position: relative;
  margin-top: -67px;
}

.statistic{
  text-align: center;
  margin-top: -2vh ;
  padding: 1vh;
}

.statistic_txt{
  margin: 0;
  font-size: 40px;
  line-height: 50px ;
  font-weight: 300;
  letter-spacing: 3px;
  color: #111;
  font-size: clamp(22px, 2.4vw, 42px);
  text-transform: uppercase;
  text-shadow: 0 10px 18px rgba(0,0,0,.25);

}


/* Основная часть */
.content{
  flex: 1;
  padding: 22px 16px 28px;
  display: flex;
}

.container{
  width: min(1500px, 100%);
  margin: 0 auto;
  background: transparent;
  display: flex;
}

/* Колонка: панель сверху, beck снизу */
.page{
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* Задняя панель под все команды */
.teams-panel{
  background: #f7f7f7;
  border-radius: 26px;
  padding: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  margin-right: 1vw;
  margin-left: 1vw;
  margin-bottom: 15px;
  overflow: visible;   /* важно: чтобы список не обрезался */
  position: relative;
}

/* Список кнопок */
.buttons{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Кнопки команд (серые, как на примере) */
.button{
  width: 100%;
  padding: 16px 16px;
  background: #dddddd;
  border: none;
  border-radius: 18px;

  font-size: 14px;
  color: #333;
  font-weight: 600;
  letter-spacing: 1px;

  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 10px 26px rgba(0,0,0,.14);

  transition: transform .15s ease, background .15s ease;
}
.modal-overlay {
display: none; /* По умолчанию скрыто */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7); /* Полупрозрачный фон */
z-index: 1000; /* Высокий z-index для отображения над другими элементами */
justify-content: center;
align-items: center;
}

/* Стили для контейнера модального окна */
.modal-window {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
max-width: 500px;
width: 90%;
position: relative;
animation: modalFadeIn 0.3s ease-out;
}

/* Стили для заголовка модального окна */
.modal-header {
padding: 15px 20px;
border-bottom: 1px solid #eaeaea;
display: flex;
justify-content: space-between;
align-items: center;
}

.modal-header h3 {
margin: 0;
color: #333;
}

/* Стили для кнопки закрытия */
.close-btn {
font-size: 24px;
font-weight: bold;
color: #888;
cursor: pointer;
transition: color 0.2s;
}

.close-btn:hover {
color: #333;
}

/* Стили для содержимого модального окна */
.modal-content {
padding: 20px;
max-height: 70vh; /* Максимальная высота для скролла */
overflow-y: auto; /* Добавление скролла при необходимости */
}

/* Стили для футера модального окна */
.modal-footer {
padding: 15px 20px;
border-top: 1px solid #eaeaea;
display: flex;
justify-content: flex-end;
gap: 10px;
}

/* Анимация появления модального окна */
@keyframes modalFadeIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/* Стили для показа модального окна */
.modal-overlay.active {
display: flex; /* Меняем на flex для центрирования */
}

/* Стили для кнопок */
.btn-primary, .btn-secondary {
padding: 8px 16px;
border-radius: 4px;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
}

.btn-primary {
background: linear-gradient(135deg, var(--bg1), var(--bg2));;
color: white;
border: none;
}

.btn-secondary {
background-color: #f5f5f5;
color: #333;
border: 1px solid #ddd;
}

.btn-primary:hover {
background-color: #3949ab;
}

.btn-secondary:hover {
background-color: #e9e9e9;
}

.button:hover{
  background: var(--btnHover);
  transform: translateY(-1px);
}

.arrow{
  font-size: 16px;
  transition: transform .2s ease;
}

.button.active .arrow{
  transform: rotate(180deg);
}

/* Выпадающее меню */
.dropdown{
  display: none;
  background: #dddddd;

  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.14);

}

.dropdown.show{ display: block; }

.dropdown a{
  display: block;
  padding: 12px 16px;
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  border-bottom: 1px solid #f0f0f0;

}

.dropdown a:last-child{ border-bottom: none; }
.dropdown a:hover{ background: #f8f8f8; }

/* Кнопка beck внизу */
.back-btn{

  width: 100%;
  padding: 14px 16px;
  background: #fff;
  border: none;
  border-radius: 18px;


  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;

  box-shadow: 0 14px 30px rgba(0,0,0,.14);
}
.down{
  margin-left: 2vw;
  margin-right: 2vw;
  margin-bottom: 15px;


}

.back-btn:hover{ background: var(--btnHover);

    transform: translateY(-1px); }


.enter_team_text{

  font-size: 40px;
  font-weight: 300;
  letter-spacing: 3px;
  margin-left: 10px;
  color: #111;
  font-size: clamp(22px, 2.4vw, 42px);
  text-transform: uppercase;
  text-shadow: 0 10px 18px rgba(0,0,0,.25);
}

.button-icon {
    margin-top: -28px;
    width: 30px;
    height: auto;
    margin-right: 16px;
    margin-left: auto;
}

.vanished{

    text-align;center;
  position: relative;
  background: #ddd;
  border-radius: 24px;
  padding: 25px;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);

}


.team_input{

   width:93%;
    max-width: 600px;

    display: inline-flex;
    outline: none;
    background: none;
    border: none;
    font-size: 16px;
    resize: none;
    overflow-y: auto;

    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;

}

.team_input, textarea{
  background: transparent;
}


.button_ct{
position: relative;
  margin-top: 30px;
  padding: 16px;
  background: #dddddd;
  border: none;
  border-radius: 16px;

  display: flex;
  justify-content: center;   /* центрируем содержимое */
  align-items: center;

  font-size: 14px;
  color: #333;
  font-weight: 600;
  letter-spacing: 1px;

  box-shadow: 0 10px 26px rgba(0,0,0,.14);
  cursor: pointer;

}
.button_ct:hover{
    background: var(--btnHover);
    transform: translateY(-1px);
}


.choice_team{
    position: relative;

 border-radius: 16px;



  margin-bottom: 20px;
  background: #fff;
  border: none;

  color: var(--text);
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(0,0,0,.14);

}

.choice_team:hover{
    background: var(--btnHover);
    transform: translateY(-px);
}

.choice_team_tex {
    border: none;
    width: 100%;

    background: #d9d9d9;
    border-radius: 18px;
    padding: 18px;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;

    font-size: 17px;
    font-weight: 600;
    cursor: pointer;

    box-shadow: 0 10px 26px rgba(0,0,0,.14);
}

.arrow_ct {
    transition: transform .25s ease;
}


.team_list {
     max-height: 360px;      /* больше высота = больше команд видно */
  overflow-y: auto;       /* скролл */
  overscroll-behavior: contain;

  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  right: 0;

  background: #e3e3e3;
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,.14);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: .2s ease;

  z-index: 9999;
}

.team_item {
    padding: 16px;
    text-align: center;
    font-weight: 600;
    cursor: pointer;
}

.team_item:hover {
    background: #cccccc;
}

.choice_team.open .arrow_ct {
    transform: rotate(180deg);
    position: relative;
}





.choice_team.open .team_list {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}




.vanished_sm{
position: relative;
  background: #ddd;
  border-radius: 24px;
  width: 100%;
  height: 300px;
  padding:12px;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);

}
.team_input_sm{
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;       /* КЛЮЧЕВО: ограничение снизу */

    background: transparent;
    border: 0;
    outline: none;

    color: #000;
    font-size: 16px;

    padding: 10px;
    resize: none;
    box-sizing: border-box;

    overflow-y: auto;

    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;

}

.team_input_sm, textarea{
  background: transparent;
}













.button_sm{
position: relative;
  padding: 16px;
  background: #C0C0C0;
  border: none;
  border-radius: 16px;
  margin-top:12px;
  display: flex;
  justify-content: center;   /* центрируем содержимое */
  align-items: center;

  font-size: 14px;
  color: #333;
  font-weight: 600;
  letter-spacing: 1px;

  box-shadow: 0 10px 26px rgba(0,0,0,.14);
  cursor: pointer;


}


.button_sm:hover{

background: var(--btnHover);
    transform: translateY(-px);
}


.vanished_heading{
  position: relative;
  background: #ddd;
  border-radius: 24px;
  padding: 10px;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
}

.heading_input{
    width:93%;
    max-width: 600px;

    margin-left:20px;
    display: inline-flex;
    outline: none;
    background: none;
    border: none;
    font-size: 16px;
    resize: none;
    overflow-y: auto;

    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;

}

.vanished_description{
  margin-top: 20px;
  position: relative;
  background: #ddd;
  border-radius: 24px;
  width: 100%;
  height: 150px;

  box-shadow: 0 18px 40px rgba(0,0,0,.18);

}

.description_input{
position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;       /* КЛЮЧЕВО: ограничение снизу */

    background: transparent;
    border: 0;
    outline: none;

    color: #000;
    font-size: 16px;

    padding: 10px;
    resize: none;
    box-sizing: border-box;

    overflow-y: auto;

    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;

}

.description_input_sm, textarea{
  background: transparent;
}

.vanished_links{
    margin-top: 15px;

  background: #ddd;
  border-radius: 24px;
  padding: 50px;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);

}

.button_link{

position: relative;
  padding: 16px;
  background: #C0C0C0;
  border: none;
  border-radius: 16px;
  margin-top: 10px;


  font-size: 14px;
  color: #333;
  font-weight: 600;
  letter-spacing: 1px;
  box-shadow: 0 10px 26px rgba(0,0,0,.14);
  cursor: pointer;

}


.links-container {
    margin-top: 15px;
  background: #ddd;
  border-radius: 24px;
  padding: 10px;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
}

.link-item {
    display: flex;
    align-items: center;
    gap: 10px;

}

.link-input {
     outline: none;
    background: none;
    border: none;
    flex: 1;
    padding: 6px 10px;
}

.task-link {
    font-weight: 600;
    color: #333;

}

.remove-link {
    background: #ff4d4d;
    border: none;
    color: white;
    padding: 6px 10px;
    cursor: pointer;
    border-radius: 4px;
}

.remove-link:hover {
    background: #e60000;
}


/* Overlay */
.picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 120, 80, 0.25);
  backdrop-filter: blur(6px);
  z-index: 100;
}

/* Modal окно в стиле панелей сайта */
.picker-modal {
  position: fixed;
  left: 50%;
  bottom: 60px;
  transform: translateX(-50%);
  width: 340px;
  background: #f2f2f2;
  border-radius: 26px;
  padding: 18px 16px 16px;
  z-index: 101;
  box-shadow: 0 25px 60px rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,0.6);
}

.picker-header {
  text-align: center;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 12px;
  color: #333;
}

/* Колёса */
.picker-wheels {
  display: flex;
  justify-content: center;
  gap: 12px;
  height: 140px;
  overflow: hidden;
  position: relative;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #e9e9e9);
  box-shadow: inset 0 8px 18px rgba(0,0,0,.08);
}

.wheel {
  flex: 1;
  height: 140px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  text-align: center;
  padding: 0 4px;
}

.wheel div {
  height: 44px;
  line-height: 44px;
  scroll-snap-align: center;
  font-size: 16px;
  color: #888;
  transition: all .15s ease;
}

/* Активное значение */
.wheel div.active {
  font-size: 20px;
  color: #111;
  font-weight: 700;
}

/* Подсветка выбранной зоны */
.picker-wheels::after {
  content: "";
  position: absolute;
  top: 48px;
  left: 10px;
  right: 10px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,0.7);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.05),
    0 6px 14px rgba(0,0,0,0.12);
  pointer-events: none;
}

/* Кнопка OK */
.picker-ok {
  width: 100%;
  margin-top: 14px;
  padding: 12px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, #EF2C79, #ff8a3c);
  color: white;
  font-weight: 600;
  letter-spacing: .5px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  transition: transform .12s ease, box-shadow .12s ease;
}

.picker-ok:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(0,0,0,.22);
}

/* Duration список */
.duration-list div {
  padding: 14px;
  text-align: center;
  border-radius: 12px;
  margin-bottom: 8px;
  background: #e6e6e6;
  cursor: pointer;
  font-weight: 500;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
  transition: transform .12s ease, background .12s ease;
}

.duration-list div:hover {
  background: #dcdcdc;
  transform: translateY(-1px);
}

.hidden { display: none; }

.members-dropdown {
  display: none;
  padding-left: 15px;
  margin-top: 5px;
}

.members-dropdown.show-members {
  display: block;
}

.member {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  width: 100%;
  box-sizing: border-box;
}
.member-score {
  margin-left: auto;   /* ← ВОТ ЭТО КЛЮЧ */
  font-weight: bold;
}