MediaWiki:Common.css: Difference between revisions

Jump to navigation Jump to search
no edit summary
No edit summary
No edit summary
Line 1: Line 1:
.round-table {
.pie-chart-table {
    position: relative;
  position: relative;
    width: 300px;
  width: 300px;
    height: 300px;
  height: 300px;
    border-radius: 50%;
  border-radius: 50%;
    overflow: hidden;
  clip-path: circle(50%);
    display: inline-block;
  overflow: hidden;
    border: 2px solid red; /* Внешняя граница */
    box-sizing: border-box;
    padding: 20px; /* Пространство между внешней и внутренней границами */
}
}


.round-table .inner-ring {
.pie-slice {
    position: absolute;
  position: absolute;
    top: 20px; /* Зависит от padding */
  width: 50%;
    left: 20px; /* Зависит от padding */
  height: 50%;
    width: calc(100% - 40px);
  background-color: #D02019;
    height: calc(100% - 40px);
  transform-origin: 100% 100%;
    border-radius: 50%;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
    border: 2px solid red; /* Внутренняя граница */
  display: flex;
    background-color: white; /* Цвет пустоты внутри */
  align-items: center;
    z-index: 1;
  justify-content: center;
  color: white;
  font-weight: bold;
}
}


.round-table table {
.slice1 { transform: rotate(0deg) translate(50%); }
    width: 100%;
.slice2 { transform: rotate(60deg) translate(50%); }
    height: 100%;
.slice3 { transform: rotate(120deg) translate(50%); }
    border-collapse: collapse;
.slice4 { transform: rotate(180deg) translate(50%); }
    table-layout: fixed;
.slice5 { transform: rotate(240deg) translate(50%); }
    position: relative;
.slice6 { transform: rotate(300deg) translate(50%); }
    z-index: 2;
}
 
.round-table td, .round-table th {
    text-align: center;
    vertical-align: middle;
    padding: 10px;
    border: 1px solid red; /* Границы ячеек */
    background-clip: padding-box;
}
 
/* Примеры для разных цветов фона */
.round-table td.bg1 { background-color: #FFD700; } /* Золотой */
.round-table td.bg2 { background-color: #ADFF2F; } /* Зеленый */
.round-table td.bg3 { background-color: #00BFFF; } /* Голубой */
.round-table td.bg4 { background-color: #FF69B4; } /* Розовый */
 


.table-photos {
.table-photos {

Navigation menu