MediaWiki:Common.css
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (β-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (β-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
#version-info {
clear: both;
padding: 10px;
text-align: center;
}
/* ΠΡΠ»ΠΈ Π½ΡΠΆΠ½ΠΎ Π³Π°ΡΠ°Π½ΡΠΈΡΠΎΠ²Π°ΡΡ, ΡΡΠΎ Π±Π»ΠΎΠΊ Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΏΠΎΠ΄ ΡΡΡΠ΅ΡΠΎΠΌ */
#version-info {
position: relative;
margin-top: 20px; /* ΠΠΎΠΆΠ½ΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ */
}
/* ΠΡΠ»ΠΈ ΡΡΡΠ΅Ρ ΠΈΠΌΠ΅Π΅Ρ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ */
#version-info {
clear: both;
}
.quote-container {
margin-top: 30px;
position: relative;
padding: 5px 10px;
margin-right: 10px;
max-width: 400px; /* ΠΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠ΅ ΡΠΈΡΠΈΠ½Ρ */
background: #FBF9F5;
word-wrap: break-word; /* ΠΠ΅ΡΠ΅Π½ΠΎΡ ΡΠ»ΠΎΠ², Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ ΡΠ»ΠΈΡΠΊΠΎΠΌ Π΄Π»ΠΈΠ½Π½ΡΠ΅ */
z-index: 1; /* ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ Π²ΡΡΠ΅ ΡΠΎΠ½Π° */
font-family: 'MyCustomFont2', sans-serif;
}
.quote-container::before {
content: '';
position: absolute;
top: -25px;
left: 50%; /* Π¦Π΅Π½ΡΡΠΈΡΡΠ΅ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ */
transform: translateX(-50%);
width: 100%; /* ΠΠ΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠΌΠ΅Π½ΡΡΠ΅Π½Π½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ */
height: 130px;
background: url("/images/0/08/Above_quote.png") no-repeat center top;
background-size: contain;
z-index: 3; /* ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° */
}
.quote-container::after {
content: '';
position: absolute;
bottom: -6px;
left: 50%; /* Π¦Π΅Π½ΡΡΠΈΡΡΠ΅ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ */
transform: translateX(-50%);
width: 100%; /* ΠΠ΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠΌΠ΅Π½ΡΡΠ΅Π½Π½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ */
height: 130px;
background: url("/images/c/c8/Under_quote.png") no-repeat center bottom;
background-size: contain;
z-index: 3; /* ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° */
}
.quote-content {
position: relative;
z-index: 7;
padding: 5px 10px;
text-align: center;
font-family: 'MyCustomFont2', sans-serif; /* ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΠΈΡΡΠ° MyCustomFont2 */
font-style: italic; /* ΠΡΡΡΠΈΠ² Π΄Π»Ρ ΡΠ΅ΠΊΡΡΠ° ΡΠΈΡΠ°ΡΡ */
color: #555; /* Π¦Π²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° (ΠΌΡΠ³ΠΊΠΈΠΉ ΡΠ΅ΡΡΠΉ) */
font-size: 16px; /* Π£ΠΌΠ΅Π½ΡΡΠ΅Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° */
overflow: hidden; /* ΠΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ°Π΅ΠΌ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ */
}
.quote-author {
text-align: right; /* ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° ΠΏΠΎ ΠΏΡΠ°Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ */
font-family: 'MyCustomFont2', sans-serif; /* ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΠΈΡΡΠ° MyCustomFont2 */
font-size: 16px; /* Π Π°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° Π΄Π»Ρ ΠΈΠΌΠ΅Π½ΠΈ Π°Π²ΡΠΎΡΠ° */
color: #333; /* Π’Π΅ΠΌΠ½ΡΠΉ ΡΠ²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° Π΄Π»Ρ Π»ΡΡΡΠ΅ΠΉ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡΠΈ */
margin-top: 1px; /* ΠΡΡΡΡΠΏ ΡΠ²Π΅ΡΡ
Ρ Π΄Π»Ρ ΠΎΡΠ΄Π΅Π»Π΅Π½ΠΈΡ ΠΎΡ ΡΠΈΡΠ°ΡΡ */
padding: 1px 2px; /* ΠΠ΅Π±ΠΎΠ»ΡΡΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ Π²ΠΎΠΊΡΡΠ³ ΡΠ΅ΠΊΡΡΠ° */
position: relative; /* ΠΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΡΠ΅ΠΊΡ ΡΠ΅Π½Π΅ΠΉ ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΡ
ΡΡΠΈΠ»Π΅ΠΉ */
z-index: 8; /* Π£Π±Π΅Π΄ΠΈΠΌΡΡ, ΡΡΠΎ Π°Π²ΡΠΎΡ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π²ΡΡΠ΅ Π΄ΡΡΠ³ΠΈΡ
ΡΠ»ΠΎΠ΅Π² */
bottom: 50px;
}
#p-themes-label .vector-menu-heading-label:before {
content: "Light Side";
}
#p-themes-label .vector-menu-heading-label {
visibility: hidden;
position: relative;
}
#p-themes-label .vector-menu-heading-label:before {
visibility: visible;
position: absolute;
left: 0;
top: 0;
}
#p-themes-item-light a {
--background-color: #f1f1f1;
--header-background-color: #ffffff;
--content-background-color: #ffffff;
direction: ltr;
font-family: 'MyCustomFont2', sans-serif;
visibility: hidden;
list-style: none;
line-height: 1em;
display: block;
white-space: nowrap;
cursor: pointer;
padding: 0.25em 0.5em;
text-decoration: none;
margin-left: -10px;
text-align: center;
font-size: 15px;
color: red;
background: transparent;
transition: color 0.3s ease, text-shadow 0.3s ease;
width: 100%;
position: relative;
}
#p-themes-item-light a:before {
content: "Light Side";
visibility: visible;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 8px; /* ΠΡΡΡΡΠΏ ΡΠ²Π΅ΡΡ
Ρ */
width: 100%;
text-align: center;
line-height: 1em;
color: red;
font-size: 15px;
font-family: 'MyCustomFont2', sans-serif;
white-space: nowrap;
cursor: pointer;
transition: color 0.3s ease, text-shadow 0.3s ease;
}
#p-themes-item-dark a {
--background-color: #f1f1f1;
--header-background-color: #ffffff;
--content-background-color: #ffffff;
direction: ltr;
font-family: 'MyCustomFont2', sans-serif;
visibility: hidden;
list-style: none;
line-height: 1em;
display: block;
white-space: nowrap;
cursor: pointer;
padding: 0.25em 0.5em;
text-decoration: none;
margin-left: -10px;
text-align: center;
font-size: 15px;
color: red;
background: transparent;
transition: color 0.3s ease, text-shadow 0.3s ease;
width: 100%;
position: relative;
}
#p-themes-item-dark a:before {
content: "Dark Side";
visibility: visible;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 5px; /* ΠΡΡΡΡΠΏ ΡΠ²Π΅ΡΡ
Ρ */
width: 100%;
text-align: center;
line-height: 1em;
color: red;
font-size: 15px;
font-family: 'MyCustomFont2', sans-serif;
white-space: nowrap;
cursor: pointer;
transition: color 0.3s ease, text-shadow 0.3s ease;
}
#p-themes-item-sai a {
--background-color: #f1f1f1;
--header-background-color: #ffffff;
--content-background-color: #ffffff;
direction: ltr;
font-family: 'MyCustomFont2', sans-serif;
visibility: hidden;
list-style: none;
line-height: 1em;
display: block;
white-space: nowrap;
cursor: pointer;
padding: 0.25em 0.5em;
text-decoration: none;
margin-left: -10px;
text-align: center;
font-size: 15px;
color: red;
background: transparent;
transition: color 0.3s ease, text-shadow 0.3s ease;
width: 100%;
position: relative;
}
#p-themes-item-sai a:before {
content: "Scaled and Icy Era";
visibility: visible;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 5px; /* ΠΡΡΡΡΠΏ ΡΠ²Π΅ΡΡ
Ρ */
width: 100%;
text-align: center;
line-height: 1em;
color: red;
font-size: 15px;
font-family: 'MyCustomFont2', sans-serif;
white-space: nowrap;
cursor: pointer;
transition: color 0.3s ease, text-shadow 0.3s ease;
}
#p-themes-item-trench a {
--background-color: #f1f1f1;
--header-background-color: #ffffff;
--content-background-color: #ffffff;
direction: ltr;
font-family: 'MyCustomFont2', sans-serif;
visibility: hidden;
list-style: none;
line-height: 1em;
display: block;
white-space: nowrap;
cursor: pointer;
padding: 0.25em 0.5em;
text-decoration: none;
margin-left: -10px;
text-align: center;
font-size: 15px;
color: red;
background: transparent;
transition: color 0.3s ease, text-shadow 0.3s ease;
width: 100%;
position: relative;
}
#p-themes-item-trench a:before {
content: "Trench Era";
visibility: visible;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 3px; /* ΠΡΡΡΡΠΏ ΡΠ²Π΅ΡΡ
Ρ */
width: 100%;
text-align: center;
line-height: 1em;
color: red;
font-size: 15px;
font-family: 'MyCustomFont2', sans-serif;
white-space: nowrap;
cursor: pointer;
transition: color 0.3s ease, text-shadow 0.3s ease;
}
#p-themes-item-trench-dark a {
--background-color: #f1f1f1;
--header-background-color: #ffffff;
--content-background-color: #ffffff;
direction: ltr;
font-family: 'MyCustomFont2', sans-serif;
visibility: hidden;
list-style: none;
line-height: 1em;
display: block;
white-space: nowrap;
cursor: pointer;
padding: 0.25em 0.5em;
text-decoration: none;
margin-left: -10px;
text-align: center;
font-size: 15px;
color: red;
background: transparent;
transition: color 0.3s ease, text-shadow 0.3s ease;
width: 100%;
position: relative;
}
#p-themes-item-trench-dark a:before {
content: "Trench Dark Era";
visibility: visible;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 3px; /* ΠΡΡΡΡΠΏ ΡΠ²Π΅ΡΡ
Ρ */
width: 100%;
text-align: center;
line-height: 1em;
color: red;
font-size: 15px;
font-family: 'MyCustomFont2', sans-serif;
white-space: nowrap;
cursor: pointer;
transition: color 0.3s ease, text-shadow 0.3s ease;
}
#p-themes-item-blurryface a {
--background-color: #f1f1f1;
--header-background-color: #ffffff;
--content-background-color: #ffffff;
direction: ltr;
font-family: 'MyCustomFont2', sans-serif;
visibility: hidden;
list-style: none;
line-height: 1em;
display: block;
white-space: nowrap;
cursor: pointer;
padding: 0.25em 0.5em;
text-decoration: none;
margin-left: -10px;
text-align: center;
font-size: 15px;
color: red;
background: transparent;
transition: color 0.3s ease, text-shadow 0.3s ease;
width: 100%;
position: relative;
}
#p-themes-item-blurryface a:before {
content: "Blurryface Era";
visibility: visible;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 3px; /* ΠΡΡΡΡΠΏ ΡΠ²Π΅ΡΡ
Ρ */
width: 100%;
text-align: center;
line-height: 1em;
color: red;
font-size: 15px;
font-family: 'MyCustomFont2', sans-serif;
white-space: nowrap;
cursor: pointer;
transition: color 0.3s ease, text-shadow 0.3s ease;
}
#p-themes-item-light {
position: relative;
top: -26px;
right: -10px;
padding: 0;
margin: 0;
}
.circle-chart-background {
position: relative; /* ΠΠ»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */
width: 350px; /* Π¨ΠΈΡΠΈΠ½Π° ΡΠΎΠ½Π° (ΡΠ²Π΅Π»ΠΈΡΠ΅Π½Π°) */
height: 350px; /* ΠΡΡΠΎΡΠ° ΡΠΎΠ½Π° (ΡΠ²Π΅Π»ΠΈΡΠ΅Π½Π°) */
overflow: hidden; /* Π‘ΠΊΡΡΠ²Π°Π΅ΠΌ Π²ΡΠ΅, ΡΡΠΎ Π²ΡΡ
ΠΎΠ΄ΠΈΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΊΡΡΠ³Π° */
margin-left: 10px;
}
.circle-chart-background::before {
content: ''; /* Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ ΠΏΡΡΡΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π΄Π»Ρ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */
position: absolute; /* ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ */
width: 40.5%; /* Π¨ΠΈΡΠΈΠ½Π° ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */
height: 40.5%; /* ΠΡΡΠΎΡΠ° ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */
top: 0; /* ΠΠ΅ΡΡ
Π½ΠΈΠΉ ΠΊΡΠ°ΠΉ */
left: 0; /* ΠΠ΅Π²ΡΠΉ ΠΊΡΠ°ΠΉ */
z-index: 0; /* ΠΠΎΠΌΠ΅ΡΠ°Π΅ΠΌ Π½Π° Π·Π°Π΄Π½ΠΈΠΉ ΠΏΠ»Π°Π½ */
}
.imagemap-content {
position: relative; /* ΠΠ»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ */
z-index: 1; /* ΠΠΎΠΌΠ΅ΡΠ°Π΅ΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π½Π° ΠΏΠ΅ΡΠ΅Π΄Π½ΠΈΠΉ ΠΏΠ»Π°Π½ */
}
.ring-container7 {
width: 200px;
height: 200px;
background-color: #EFE9DE;
position: relative;
display: flex;
justify-content: center;
align-items: center;
left: 5px;
top 15px;
}
.ring2 {
width: 99.5%;
height: 99.5%;
background: conic-gradient(#21ABC6 0% 20%, #87B22A 20% 100%);
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
z-index: 1; /* ΠΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ° Π½Π° ΡΠ°ΠΌΠΎΠΌ Π½ΠΈΠΆΠ½Π΅ΠΌ ΡΡΠΎΠ²Π½Π΅ */
}
.center2 {
width: 145px;
height: 145px;
background-color: #EFE9DE;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2; /* Π¦Π΅Π½ΡΡ ΠΊΠΎΠ»ΡΡΠ° Π²ΡΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ */
}
.imagemap-content2 {
position: absolute;
z-index: 3; /* ΠΠ°ΡΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²ΡΡΠ΅ Π²ΡΠ΅Ρ
*/
top: 0;
left: 0;
width: 200px;
height: 200px;
}
.image-container {
width: 300px; /* Π¨ΠΈΡΠΈΠ½Π° ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° */
height: 200px; /* ΠΡΡΠΎΡΠ° ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° */
background-image: url('YourImage.jpg'); /* ΠΡΡΡ ΠΊ Π²Π°ΡΠ΅ΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ */
background-size: contain; /* ΠΠΎΠ΄Π³ΠΎΠ½ΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, ΡΠΎΡ
ΡΠ°Π½ΡΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ */
background-position: center; /* Π¦Π΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ */
background-repeat: no-repeat; /* ΠΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ */
border: 1px solid #ccc; /* ΠΡΠ°Π½ΠΈΡΠ° Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ */
}
.pie-chart445 {
position: relative;
min-width: 200px;
min-height: 200px;
max-width: 200px;
overflow: hidden;
transform: scaleX(-1) rotate(-90deg);
}
.pie-chart445 div {
border: solid transparent;
position: absolute;
width: 100px;
height: 100px;
}
.pie-chart445 .section1 {
bottom: 100px;
left: 100px;
background-color: #ffa500;
}
.pie-chart445 .section2 {
bottom: 100px;
right: 100px;
background-color: #ffa500;
}
.pie-chart445 .section3 {
top: 100px;
right: 100px;
background-color: #ffa500;
}
.pie-chart445 .section4 {
top: 100px;
right: 100px;
border-width: 58.778525229247px 80.901699437495px 0px 0px;
border-right-color: #008b8b;
}
.pie-chart445 .section5 {
top: 100px;
left: 100px;
background-color: #008b8b;
}
.pie-chart445 .image-overlay-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none; /* Π‘Π΄Π΅Π»Π°Π΅Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½ΡΠΌ, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ»ΠΎ Π΄ΠΎΡΡΡΠΏΠ½ΠΎ */
}
.pie-chart445 .image-overlay-container img {
width: 100%;
height: 100%;
pointer-events: auto; /* Π‘Π΄Π΅Π»Π°Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½ΡΠΌ */
transform: scaleX(-1) rotate(90deg); /* ΠΡΠΈΠΌΠ΅Π½ΠΈΡΠ΅ Π½ΡΠΆΠ½ΠΎΠ΅ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ */
}
.relative-container {
position: relative;
min-width: 200px;
min-height: 200px;
max-width: 200px;
overflow: hidden;
transform: scaleX(-1) rotate(-90deg);
}
.orange-box {
border: solid transparent;
position: absolute;
width: 100px;
height: 100px;
border: 0;
background-color: #ffa500;
}
.bottom-left {
bottom: 100px;
left: 100px;
}
.bottom-right {
bottom: 100px;
right: 100px;
}
.top-right {
top: 100px;
right: 100px;
}
.turquoise-box {
border: solid transparent;
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
border: 0;
background-color: #008b8b;
}
.turquoise-triangle {
border: solid transparent;
position: absolute;
top: 100px;
right: 100px;
width: 100px;
height: 100px;
border-width: 58.778525229247px 80.901699437495px 0px 0px;
border-right-color: #008b8b;
}
.circle-frame {
position: absolute;
min-width: 200px;
min-height: 200px;
overflow: hidden;
}
.pie-chart4 {
width: 200px;
height: 200px;
border-radius: 50%;
position: relative;
list-style: none;
margin: 0;
padding: 0;
background: url('/images/a/a4/Circle_frame.svg.png') no-repeat center center / cover;
}
.pie-chart4 li {
width: 100%;
height: 100%;
border-radius: 50%;
position: absolute;
clip: rect(0, 200px, 200px, 100px);
}
.pie-chart4 li:before {
content: "";
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
clip: rect(0, 100px, 200px, 0);
background-color: var(--color);
transform: rotate(calc(var(--percentage) * 3.6deg));
transform-origin: 50% 50%;
}
.pie-chart4 li:nth-child(2) {
transform: rotate(calc(25 * 3.6deg));
}
.pie-chart4 li:nth-child(3) {
transform: rotate(calc(75 * 3.6deg));
}
.pie-chart4 li:nth-child(4) {
transform: rotate(calc(150 * 3.6deg));
}
/* ΠΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΡΠΈΠ»Ρ Π΄Π»Ρ <li> */
.tooltip23-container {
display: inline-block;
position: relative;
cursor: pointer;
}
/* Π‘ΠΊΡΡΡΡΠΉ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠΉ Π±Π»ΠΎΠΊ */
.tooltip23-text {
visibility: hidden;
border: 2px solid #C14424;
background-color: #EFE9DE;
color: #000;
text-align: center;
border-radius: 6px;
padding: 5px 10px; /* Π£Π²Π΅Π»ΠΈΡΠΈΠ» Π±ΠΎΠΊΠΎΠ²ΡΠ΅ ΠΎΡΡΡΡΠΏΡ Π΄Π»Ρ Π»ΡΡΡΠ΅Π³ΠΎ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ */
position: absolute;
z-index: 1;
top: 125%; /* ΠΠΎΠ·ΠΈΡΠΈΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° ΡΠ΅ΠΏΠ΅ΡΡ ΡΠ²Π΅ΡΡ
Ρ */
right: 2px; /* ΠΡΡΡΡΠΏ ΠΎΡ ΠΏΡΠ°Π²ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ ΡΡΡΠ°Π½ΠΈΡΡ Π½Π° 5 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ */
opacity: 0;
transition: opacity 0.3s;
white-space: nowrap; /* ΠΠ°ΠΏΡΠ΅ΡΠΈΡΡ ΠΏΠ΅ΡΠ΅Π½ΠΎΡ ΡΠ΅ΠΊΡΡΠ° Π½Π° Π½ΠΎΠ²ΡΡ ΡΡΡΠΎΠΊΡ */
}
/* Π’ΡΠ΅ΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ-ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° */
.tooltip23-text::after {
content: "";
position: absolute;
bottom: 100%; /* Π£ΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ Π²Π²Π΅ΡΡ
Ρ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #555 transparent; /* ΠΠ·ΠΌΠ΅Π½ΡΠ½ ΠΏΠΎΡΡΠ΄ΠΎΠΊ ΡΠ²Π΅ΡΠ° */
}
/* ΠΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠΉ Π±Π»ΠΎΠΊ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
.tooltip23-container:hover .tooltip23-text {
visibility: visible;
opacity: 1;
}
/* Concerts List Table */
/* ΠΡΡΠ°Π²ΡΡΠ΅ ΡΡΠΎΡ ΠΊΠΎΠ΄ Π² Π²Π°Ρ MediaWiki CSS ΡΠ°ΠΉΠ» (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Common.css) */
.shows-list {
width: 65%;
border: 3px solid #D33328;
}
.shows-list th,
.shows-list td {
border: 1px solid #D33328;
text-align: center;
}
.shows-list th {
background-color: #E6E6E6; /* ΠΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π½Π° Π½ΡΠΆΠ½ΡΠΉ ΡΠ²Π΅Ρ */
}
.styled-list {
list-style-type: none; /* Π£Π±ΠΈΡΠ°Π΅Ρ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ ΠΌΠ°ΡΠΊΠ΅ΡΡ ΡΠΏΠΈΡΠΊΠ° */
padding: 0; /* Π£Π±ΠΈΡΠ°Π΅Ρ ΠΎΡΡΡΡΠΏΡ */
}
.styled-item {
display: flex; /* ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ flexbox Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² ΡΡΡΠΎΠΊΠ΅ */
border: 1px solid #D02019; /* Π¦Π²Π΅Ρ ΡΠ°ΠΌΠΊΠΈ */
margin: 5px 0; /* ΠΡΡΡΡΠΏΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΡΠΏΠΈΡΠΊΠ° */
padding: 5px; /* ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ */
}
.styled-item-top {
display: flex; /* ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ flexbox Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² ΡΡΡΠΎΠΊΠ΅ */
margin: 5px 0; /* ΠΡΡΡΡΠΏΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΡΠΏΠΈΡΠΊΠ° */
padding: 5px; /* ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ */
}
.table-cell {
border-right: 1px solid #D02019; /* Π Π°ΠΌΠΊΠ° ΡΠΏΡΠ°Π²Π° ΠΎΡ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */
padding: 5px; /* ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ */
}
.table-cell:last-child {
border-right: none; /* Π£Π±ΠΈΡΠ°Π΅Ρ ΡΠ°ΠΌΠΊΡ Ρ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */
}
.table-cell-top {
border-right: 1px solid #D02019; /* Π Π°ΠΌΠΊΠ° ΡΠΏΡΠ°Π²Π° ΠΎΡ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */
padding: 5px; /* ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ */
}
/* Π‘ΠΊΡΡΠ²Π°Π΅ΠΌ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅Π΅ ΠΎΠΊΠ½ΠΎ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ */
.popup-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
justify-content: center;
align-items: center;
}
/* ΠΠΎΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅Π΅ ΠΎΠΊΠ½ΠΎ, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΎ Π°ΠΊΡΠΈΠ²Π½ΠΎ */
#concert-list-trigger:focus + .popup-overlay {
display: flex;
}
.popup-content {
background: #fff;
padding: 20px;
border-radius: 8px;
max-width: 500px;
width: 80%;
}
.close-button {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
font-size: 20px;
}
/* Π‘ΠΊΡΡΡΠΈΠ΅ ΠΎΠΊΠ½Π° ΠΏΡΠΈ ΠΏΠΎΡΠ΅ΡΠ΅ ΡΠΎΠΊΡΡΠ° */
.popup-overlay:focus-within {
display: none;
}
.square-list {
list-style-type: none; /* Π£Π±ΠΈΡΠ°Π΅ΠΌ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ ΠΌΠ°ΡΠΊΠ΅ΡΡ ΡΠΏΠΈΡΠΊΠ° */
display: inline-block; /* ΠΠ΅Π»Π°Π΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±Π»ΠΎΡΠ½ΡΠΌ Π΄Π»Ρ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ */
width: 100px; /* Π¨ΠΈΡΠΈΠ½Π° ΠΊΠ²Π°Π΄ΡΠ°ΡΠ° */
height: 100px; /* ΠΡΡΠΎΡΠ° ΠΊΠ²Π°Π΄ΡΠ°ΡΠ° */
position: relative; /* ΠΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°Π»ΠΎΠΆΠΈΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ */
margin: 10px; /* ΠΡΡΡΡΠΏ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΡΠΏΠΈΡΠΊΠ° */
border: 1px solid #000; /* ΠΡΠ°Π½ΠΈΡΠ° ΠΊΠ²Π°Π΄ΡΠ°ΡΠ° (ΠΏΠΎ ΠΆΠ΅Π»Π°Π½ΠΈΡ) */
}
.square-list img {
position: absolute; /* ΠΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°Π»ΠΎΠΆΠΈΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ */
top: 0; /* ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΡ
Ρ */
left: 0; /* ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅Π²Π° */
width: 100%; /* Π¨ΠΈΡΠΈΠ½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π½Π° 100% ΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */
height: 100%; /* ΠΡΡΠΎΡΠ° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π½Π° 100% ΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */
object-fit: cover; /* Π‘ΠΎΡ
ΡΠ°Π½ΡΠ΅Ρ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ */
}
.ring-chart27 {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background: white;
}
.ring-chart27:before {
content: '';
position: absolute;
top: 25px;
left: 25px;
width: 150px;
height: 150px;
background-color: white;
border-radius: 50%;
z-index: 1;
}
.ring-chart27:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('/images/a/a4/Circle_frame.svg.png') no-repeat center;
background-size: contain;
z-index: 3;
}
.ring-chart27 ul {
list-style: none;
padding: 0;
margin: 0;
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
}
.ring-chart27 ul li {
position: absolute;
width: 100%;
height: 100%;
clip-path: polygon(50% 50%, 100% 0%, 100% 100%);
transition: background 0.3s ease;
}
.ring-chart27 ul li a {
display: block;
width: 100%;
height: 100%;
text-decoration: none; /* Π£Π±ΠΈΡΠ°Π΅ΠΌ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ Ρ ΡΡΡΠ»ΠΎΠΊ */
}
.ring-chart27 ul li:nth-child(1) {
background-color: #4caf50;
transform: rotate(0deg);
}
.ring-chart27 ul li:nth-child(1):hover {
background-color: #66bb6a;
}
.ring-chart27 ul li:nth-child(2) {
background-color: #ff9800;
transform: rotate(90deg);
}
.ring-chart27 ul li:nth-child(2):hover {
background-color: #ffb74d;
}
.ring-chart27 ul li:nth-child(3) {
background-color: #2196f3;
transform: rotate(180deg);
}
.ring-chart27 ul li:nth-child(3):hover {
background-color: #64b5f6;
}
.ring-chart27 ul li:nth-child(4) {
background-color: #f44336;
transform: rotate(270deg);
}
.ring-chart27 ul li:nth-child(4):hover {
background-color: #ef5350;
}
/* Π‘ΡΠΈΠ»ΠΈ Π΄Π»Ρ ΡΠ°Π±Π»ΠΈΡΡ "New pages" */
.new-pages-table {
display: inline-block;
margin-left: 7px;
margin-right: 15px;
float: left;
border-radius: 10px 10px 0 0;
width: 31%;
height: 224px;
background-color: #f9f9f9; /* ΠΡΠΈΠΌΠ΅Ρ ΡΠ²Π΅ΡΠ° ΡΠΎΠ½Π° */
border: 1px solid #C14424;
margin-top: 10px; /* Π§ΡΠΎΠ±Ρ Π±ΡΠ»ΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π° ΠΎΡ ΡΠ°ΠΉΠ΄Π±Π°ΡΠ° */
}
/* Π‘ΡΠΈΠ»ΠΈ Π΄Π»Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΡΠ°Π±Π»ΠΈΡΡ */
.new-pages-table th {
width: 40%;
background-color: #fff5ee; /* ΠΡΠΈΠΌΠ΅Ρ ΡΠ²Π΅ΡΠ° ΡΠΎΠ½Π° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */
border-radius: 10px 10px 0 0;
border: 1px solid #C14424;
text-align: center;
}
/* Π‘ΡΠΈΠ»ΠΈ Π΄Π»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠ°Π±Π»ΠΈΡΡ */
.new-pages-table td {
border: 1px solid #C14424;
background-color: #f9f9f9; /* ΠΡΠΈΠΌΠ΅Ρ ΡΠ²Π΅ΡΠ° ΡΠΎΠ½Π° */
text-align: left;
padding: 10px;
}
.container2 {
width: 50vw; /* Π¨ΠΈΡΠΈΠ½Π° ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° */
height: 100vh; /* ΠΡΡΠΎΡΠ° ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° */
overflow: hidden;
position: relative;
background-color: #fff; /* Π¦Π²Π΅Ρ ΡΠΎΠ½Π° ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° */
display: flex;
align-items: center;
justify-content: center;
}
.gradient-text {
font-size: 4rem; /* Π Π°Π·ΠΌΠ΅Ρ ΡΠ΅ΠΊΡΡΠ° */
font-weight: bold;
background: linear-gradient(45deg, lightcoral 25%, lightblue 25%, lightblue 50%, lightcoral 50%, lightcoral 55%, lightblue 65%);
background-size: 200% 200%;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
animation: waveAnimation 4s infinite linear;
}
@keyframes waveAnimation {
0% {
background-position: 0% 0%;
}
100% {
background-position: 100% 100%;
}
}
li.tooladd {
position: relative;
display: inline-block;
cursor: pointer;
vertical-align: top; /* ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΎ Π΄Π»Ρ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ */
}
li.tooladd .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -125%; /* ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΎ Π½Π° top Π΄Π»Ρ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΡΠ²Π΅ΡΡ
Ρ */
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
li.tooladd:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.container {
position: relative;
display: flex;
align-items: center;
width: 150px; /* Π¨ΠΈΡΠΈΠ½Π° ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° */
height: 50px;
left: 697px;
top: -37px;
}
.stripe {
width: 5px;
height: 50%;
background-color: #D02019;
}
.left-stripe {
margin-right: 50px; /* Π Π°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΠΏΠΎΠ»ΠΎΡΠΊΠ°ΠΌΠΈ ΠΈ Π»ΠΈΠ½ΠΈΠ΅ΠΉ */
}
.right-stripe {
transform: rotate(20deg); /* ΠΠ°ΠΊΠ»ΠΎΠ½ΡΠ΅ΠΌ Π½Π° 20 Π³ΡΠ°Π΄ΡΡΠΎΠ² */
margin-left: -35px; /* ΠΠΎΠ΄Π²ΠΈΠ³Π°Π΅ΠΌ ΠΏΠΎΠ»ΠΎΡΠΊΡ Π½Π° 5px Π²Π»Π΅Π²ΠΎ */
}
.horizontal-line {
position: absolute;
width: 10px; /* Π¨ΠΈΡΠΈΠ½Π° Π»ΠΈΠ½ΠΈΠΈ */
height: 5px; /* Π’ΠΎΠ»ΡΠΈΠ½Π° Π»ΠΈΠ½ΠΈΠΈ */
background-color: #D02019;
top: 50%; /* Π¦Π΅Π½ΡΡΠΈΡΡΠ΅ΠΌ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎ ΠΏΠΎ ΡΠ΅ΡΠ΅Π΄ΠΈΠ½Π΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° */
left: calc(50% - 30px - 38px); /* ΠΠ±Π½ΠΎΠ²Π»ΡΠ΅ΠΌ ΡΠ°ΡΡΠ΅Ρ Π΄Π»Ρ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ Π»ΠΈΠ½ΠΈΠΈ */
transform: translateY(-50%); /* Π¦Π΅Π½ΡΡΠΈΡΡΠ΅ΠΌ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎ */
}
.mail-icon { font-size: 48px; color: #000000; font-size: 96px; }
.custom-link-text2 a {
color: inherit; /* Π‘ΠΎΡ
ΡΠ°Π½ΡΠ΅Ρ ΡΠ²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° */
text-decoration: none; /* Π£Π±ΠΈΡΠ°Π΅Ρ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ */
color: #fff;
margin-top: 10px;
margin-bottom: 10px;
}
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
.blinking-button {
animation: blink 1s infinite;
background-color: red;
color: white;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
}
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
.admin-chat-form {
margin: 20px 0;
}
.admin-chat-form textarea {
width: 100%;
margin-bottom: 10px;
}
.admin-chat-form-buttons {
text-align: right;
}
.site-button {
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
padding: 10px 20px;
cursor: pointer;
}
textarea {
display: block;
order: -1;
}
.c-item {
order: 1;
}
#some-container {
display: flex;
flex-direction: column;
}
.newcombutton {
display: inline-block;
padding: 10px 10px;
border: 2px solid #191919;
color: #fff;
text-decoration: none;
border-radius: 5px;
background-color: #007bff; /* Default color */
transition: transform 0.3s ease, background-color 0.3s ease;
margin-right: 5px;
word-wrap: break-word;
word-break: break-word;
transform-origin: left; /* ΠΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»Π΅Π²ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ */
color: inherit; /* Π‘ΠΎΡ
ΡΠ°Π½ΡΠ΅Ρ ΡΠ²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° */
text-decoration: none; /* Π£Π±ΠΈΡΠ°Π΅Ρ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ */
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
}
.newcombutton:hover {
transform: scale(1.05); /* Slightly increase size */
opacity: 1.1;
}
.butting-button {
display: inline-block; /* Make sure the link is displayed as a button */
background-color: red;
color: white;
border: none;
padding: 10px 20px;
text-align: center;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
text-decoration: none; /* Remove underline from the link */
transition: background-color 0.3s ease; /* Add a smooth transition for hover effect */
}
.butting-button:hover {
background-color: darkred; /* Change color on hover for better UX */
}
.comment-item {
background-color: #EFE9DE;
border: 3px solid #84817B;
padding: 10px; /* ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΠΎΡΡΡΡΠΏΡ ΠΏΠΎ Π²Π°ΡΠ΅ΠΌΡ ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΡ */
border-radius: 5px; /* ΠΡΠΈ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠΊΡΡΠ³Π»Π΅Π½ΠΈΠ΅ ΡΠ³Π»ΠΎΠ² */
list-style: none;
padding-left: 20px;
width: 42%;
transform-origin: left;
}
.comment-item comments {
padding-left: 50px; /* ΠΡΡΡΡΠΏ ΡΠ»Π΅Π²Π° Π΄Π»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ */
}
.comment-item2 {
background-color: #E2DDD3;
border: 3px solid #84817B;
padding: 10px; /* ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΠΎΡΡΡΡΠΏΡ ΠΏΠΎ Π²Π°ΡΠ΅ΠΌΡ ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΡ */
border-radius: 5px; /* ΠΡΠΈ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠΊΡΡΠ³Π»Π΅Π½ΠΈΠ΅ ΡΠ³Π»ΠΎΠ² */
list-style: none;
width: 42%; /* ΠΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠ΅ ΡΠΈΡΠΈΠ½Ρ */
box-sizing: border-box; /* ΠΠΊΠ»ΡΡΠ°Π΅Ρ padding ΠΈ border Π² ΡΠ°ΡΡΠ΅Ρ ΡΠΈΡΠΈΠ½Ρ */
overflow: hidden; /* Π‘ΠΊΡΡΠ²Π°Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, Π²ΡΡ
ΠΎΠ΄ΡΡΠ΅Π΅ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */
white-space: normal; /* Π Π°Π·ΡΠ΅ΡΠ°Π΅Ρ ΠΏΠ΅ΡΠ΅Π½ΠΎΡ ΡΠ΅ΠΊΡΡΠ° Π½Π° Π½ΠΎΠ²ΡΡ ΡΡΡΠΎΠΊΡ */
}
.comment-item2 comments {
padding-left: 50px; /* ΠΡΡΡΡΠΏ ΡΠ»Π΅Π²Π° Π΄Π»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ */
max-width: 100%; /* Π£Π±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π½Π΅ Π²ΡΡ
ΠΎΠ΄ΠΈΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ Π³ΡΠ°Π½ΠΈΡ */
box-sizing: border-box; /* ΠΠΊΠ»ΡΡΠ°Π΅Ρ padding ΠΈ border Π² ΡΠ°ΡΡΠ΅Ρ ΡΠΈΡΠΈΠ½Ρ */
overflow: hidden; /* Π‘ΠΊΡΡΠ²Π°Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, Π²ΡΡ
ΠΎΠ΄ΡΡΠ΅Π΅ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */
white-space: normal; /* Π Π°Π·ΡΠ΅ΡΠ°Π΅Ρ ΠΏΠ΅ΡΠ΅Π½ΠΎΡ ΡΠ΅ΠΊΡΡΠ° Π½Π° Π½ΠΎΠ²ΡΡ ΡΡΡΠΎΠΊΡ */
}
.comment-item-second {
background-color: #EFE9DE;
border: 3px solid #84817B;
padding: 10px; /* ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΠΎΡΡΡΡΠΏΡ ΠΏΠΎ Π²Π°ΡΠ΅ΠΌΡ ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΡ */
border-radius: 5px; /* ΠΡΠΈ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠΊΡΡΠ³Π»Π΅Π½ΠΈΠ΅ ΡΠ³Π»ΠΎΠ² */
list-style: none;
padding-left: 20px;
width: 50%;
transform-origin: right;
float:right;
text-align: center;
align-items: center;
justify-content: center;
}
.comment-item-second comments {
padding-left: 50px; /* ΠΡΡΡΡΠΏ ΡΠ»Π΅Π²Π° Π΄Π»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ */
}
.map-item {
background-color: white;
border: 2px solid red;
padding: 10px;
margin: 10px;
list-style: none; /* Π£Π±ΠΈΡΠ°Π΅Ρ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ ΠΌΠ°ΡΠΊΠ΅ΡΡ ΡΠΏΠΈΡΠΊΠ° */
text-align: center; /* Π¦Π΅Π½ΡΡΠΈΡΡΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ */
display: flex;
justify-content: center;
align-items: center;
height: 900px; /* ΠΠ°Π΄Π°ΠΉΡΠ΅ Π½ΡΠΆΠ½ΡΡ Π²ΡΡΠΎΡΡ */
overflow: hidden; /* Π‘ΠΊΡΡΠ²Π°Π΅Ρ Π²ΡΡ
ΠΎΠ΄ΡΡΠ΅Π΅ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ */
position: relative;
}
/* ΠΠ°ΠΌΠ΅Π½ΠΈΡΠ΅ .custom-link-text Π½Π° ΠΊΠ»Π°ΡΡ ΠΈΠ»ΠΈ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */
.custom-link-text a {
color: inherit; /* Π‘ΠΎΡ
ΡΠ°Π½ΡΠ΅Ρ ΡΠ²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° */
text-decoration: none; /* Π£Π±ΠΈΡΠ°Π΅Ρ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ */
}
.red-background {
background-color: #D02019;
}
.twentyonewikilogo {
font-family: 'MyCustomFont1';
font-size: 100px;
color: #D02019;
cursor: pointer; /* Π§ΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½ΡΠΉ */
line-height: 1; /* Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π²ΡΡΠΎΡΡ ΡΡΡΠΎΠΊΠΈ, ΡΡΠΎΠ±Ρ ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΠΎΡΡΡΡΠΏΡ */
}
.interactchoise {
font-family: 'MyCustomFont1';
font-size: 40px;
color: #D02019;
line-height: 1; /* Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π²ΡΡΠΎΡΡ ΡΡΡΠΎΠΊΠΈ, ΡΡΠΎΠ±Ρ ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΠΎΡΡΡΡΠΏΡ */
margin-top: 10px;
}
.interactchoise:hover {
color: #E5241D;
}
.choise {
font-family: 'MyCustomFont1';
font-size: 30px;
color: #D02019;
line-height: 1; /* Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π²ΡΡΠΎΡΡ ΡΡΡΠΎΠΊΠΈ, ΡΡΠΎΠ±Ρ ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΠΎΡΡΡΡΠΏΡ */
margin-top: 10px;
}
.choise:hover {
color: #E5241D;
}
.pie-chart11 {
list-style: none;
width: 200px;
height: 200px;
border-radius: 50%;
position: relative;
margin: 0;
padding: 0;
}
.pie-chart11 .segment {
width: 50%;
height: 50%;
background-color: var(--color);
position: absolute;
top: 50%;
left: 50%;
transform-origin: 0% 100%;
transform: rotate(var(--rotate)) translateY(-100%);
transition: transform 0.3s ease;
}
.pie-chart11 .segment:hover {
transform: rotate(var(--rotate)) translateY(-120%);
}
.list-item {
list-style-type: none;
width: 100%; /* Π¨ΠΈΡΠΈΠ½Π° 100% ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */
text-align: center;
padding: 20px;
box-sizing: border-box; /* Π£ΡΠΈΡΡΠ²Π°Π΅Ρ ΠΎΡΡΡΡΠΏΡ Π² ΠΎΠ±ΡΠ΅ΠΉ ΡΠΈΡΠΈΠ½Π΅ */
}
.list-item span {
display: inline-block;
color: black;
background: url(/images/1/1e/Clancy_Gif_Intro.gif) no-repeat center;
background-size: contain; /* Π‘ΠΎΡ
ΡΠ°Π½ΡΠ΅Ρ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ */
padding: 20px;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
.custom-li {
list-style-type: none; /* Π£Π±ΠΈΡΠ°Π΅ΠΌ ΠΌΠ°ΡΠΊΠ΅ΡΡ Ρ ΡΠΏΠΈΡΠΊΠ° */
width: 850px; /* Π¨ΠΈΡΠΈΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ ΠΏΠΎ Π²Π°ΡΠ΅ΠΌΡ ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΡ */
height: 850px; /* ΠΡΡΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ ΠΏΠΎ Π²Π°ΡΠ΅ΠΌΡ ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΡ */
background-image: url('/images/3/37/Is-ΓΈ-lat-ed2.png');
background-size: contain; /* ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΎΠ±ΡΠ΅Π·Π°ΡΡΡΡ */
background-repeat: no-repeat; /* Π£Π±ΠΈΡΠ°Π΅ΠΌ ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ */
background-position: center; /* Π¦Π΅Π½ΡΡΠΈΡΡΠ΅ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ */
margin: 10px;
display: flex;
flex-direction: column; /* ΠΠ°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ */
align-items: center; /* Π¦Π΅Π½ΡΡΠΈΡΡΠ΅ΠΌ ΡΠ΅ΠΊΡΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ */
justify-content: flex-start; /* ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅ΠΌ ΡΠ΅ΠΊΡΡ ΠΏΠΎ Π²Π΅ΡΡ
Π½Π΅ΠΌΡ ΠΊΡΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */
text-align: center; /* ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° ΠΏΠΎ ΡΠ΅Π½ΡΡΡ Π²Π½ΡΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */
color: #000; /* Π¦Π²Π΅Ρ ΡΠ΅ΠΊΡΡΠ°, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΏΠΎ ΠΆΠ΅Π»Π°Π½ΠΈΡ */
font-family: Arial, sans-serif; /* Π¨ΡΠΈΡΡ ΡΠ΅ΠΊΡΡΠ°, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΏΠΎ ΠΆΠ΅Π»Π°Π½ΠΈΡ */
font-size: 14px; /* Π Π°Π·ΠΌΠ΅Ρ ΡΠ΅ΠΊΡΡΠ°, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΏΠΎ ΠΆΠ΅Π»Π°Π½ΠΈΡ */
padding: 60px; /* ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠΉ ΠΎΡΡΡΡΠΏ Π²Π½ΡΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΡΠΎΠ±Ρ ΡΠ΅ΠΊΡΡ Π½Π΅ ΠΏΡΠΈΠΌΡΠΊΠ°Π» ΠΊ ΠΊΡΠ°ΡΠΌ */
box-sizing: border-box; /* ΠΠΊΠ»ΡΡΠ°Π΅ΠΌ ΠΎΡΡΡΡΠΏΡ ΠΈ Π³ΡΠ°Π½ΠΈΡΡ Π² ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */
}
@keyframes randomMovement {
0% {
top: 0;
left: 0;
}
25% {
top: 100px;
left: 200px;
}
50% {
top: 200px;
left: 100px;
}
75% {
top: 100px;
left: 300px;
}
100% {
top: 0;
left: 0;
}
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.moving-li {
background-color: #D02019;
color: white;
border: 2px solid #722215;
font-size: 30px;
padding: 10px 20px;
position: absolute;
border-radius: 5px;
cursor: pointer;
list-style: none;
user-select: none;
font-family: 'MyCustomFont1', sans-serif;
animation: randomMovement 12s infinite ease-in-out; /* ΠΠ»Π°Π²Π½ΠΎΠ΅ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ */
}
.moving-li:hover {
filter: brightness(1.2);
}
.table-with-spacing {
border-spacing: 10px;
}
.pie-chart {
width: 280px;
height: 280px;
border-radius: 50%;
background-image: conic-gradient(
#49C2DB 0% 50%, /* 50% Π³ΠΎΠ»ΡΠ±ΠΎΠ³ΠΎ */
#A2C063 50% 90%, /* 40% Π·Π΅Π»ΡΠ½ΠΎΠ³ΠΎ */
#636363 90% 100% /* 10% ΡΠ΅ΡΠΎΠ³ΠΎ */
);
position: relative;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.pie-chart li {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
clip-path: polygon(50% 50%, 100% 0, 100% 100%);
}
.pie-chart li a {
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
text-indent: -9999px; /* Π‘ΠΊΡΡΠ²Π°Π΅ΠΌ ΡΠ΅ΠΊΡΡ */
}
.pie-chart li:hover {
opacity: 0.8;
}
.pie-chart .segment-1 {
transform: rotate(0deg);
}
.pie-chart .segment-2 {
transform: rotate(180deg);
}
.pie-chart .segment-3 {
transform: rotate(324deg);
}
.pie-chart .center {
position: absolute;
top: 50%;
left: 50%;
width: 220px;
height: 220px;
background-color: var(--setlist-bg-color);
border-radius: 50%;
transform: translate(-50%, -50%);
}
.hole {
position: absolute;
width: 100px; /* ΠΠΈΠ°ΠΌΠ΅ΡΡ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ ΠΊΡΡΠ³Π° */
height: 100px; /* ΠΠΈΠ°ΠΌΠ΅ΡΡ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ ΠΊΡΡΠ³Π° */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white; /* Π¦Π²Π΅Ρ Π΄ΡΡΠΊΠΈ (ΡΠΎΠ½ ΡΡΡΠ°Π½ΠΈΡΡ) */
border-radius: 50%; /* ΠΠ΅Π»Π°Π΅Ρ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΉ ΠΊΡΡΠ³ */
}
.circular-chart {
position: relative;
width: 250px;
height: 250px;
border-radius: 50%;
list-style: none;
margin: 0;
padding: 0;
clip-path: circle(50%);
}
.circular-chart::before,
.circular-chart::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
transition: background-color 0.3s ease;
pointer-events: none; /* ΠΡΠΎ Π΄Π΅Π»Π°Π΅Ρ ΡΠ°ΠΌΠΈ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΡ "ΠΏΡΠΎΠ½ΠΈΡΠ°Π΅ΠΌΡΠΌΠΈ" Π΄Π»Ρ ΠΊΠ»ΠΈΠΊΠΎΠ² */
}
.circular-chart {
background: conic-gradient(
#49c2db 0deg 100deg,
#a2c063 100deg 360deg,
);
}
.circular-chart:hover::before {
background: conic-gradient(
#6ae1ff 0deg 100deg, /* ΠΠ΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΡΠ²Π΅ΡΠ»Π΅Π½Π½ΡΠΉ Π³ΠΎΠ»ΡΠ±ΠΎΠΉ */
#a2c063 100deg 360deg,
);
}
.circular-chart:hover::after {
background: conic-gradient(
#49c2db 0deg 100deg,
#bbd47d 100deg 252deg, /* ΠΠ΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΡΠ²Π΅ΡΠ»Π΅Π½Π½ΡΠΉ Π·Π΅Π»Π΅Π½ΡΠΉ */
#636363 252deg 334deg,
#32cd32 324deg 360deg /* ΠΠ°ΠΉΠΌ Π³ΡΠΈΠ½ Π²ΠΌΠ΅ΡΡΠΎ Π·Π΅Π»Π΅Π½ΠΎΠ³ΠΎ */
);
}
/* ΠΠ°ΡΡΡΠΎΠΉΠΊΠ° ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΠΎΡΠ° */
.circular-chart::before {
background: conic-gradient(
#49c2db 0deg 100deg, /* ΠΠΎΠ»ΡΠ±ΠΎΠΉ ΡΠ΅ΠΊΡΠΎΡ */
transparent 100deg 360deg
);
}
.circular-chart:hover::before {
background: conic-gradient(
#6ae1ff 0deg 100deg, /* Π‘Π²Π΅ΡΠ»ΠΎ-Π³ΠΎΠ»ΡΠ±ΠΎΠΉ ΡΠ΅ΠΊΡΠΎΡ */
transparent 100deg 360deg
);
}
.circular-chart::after {
background: conic-gradient(
transparent 0deg 100deg,
#a2c063 100deg 252deg, /* ΠΠ΅Π»Π΅Π½ΡΠΉ ΡΠ΅ΠΊΡΠΎΡ */
transparent 252deg 360deg
);
}
.circular-chart:hover::after {
background: conic-gradient(
transparent 0deg 100deg,
#bbd47d 100deg 252deg, /* Π‘Π²Π΅ΡΠ»ΠΎ-Π·Π΅Π»Π΅Π½ΡΠΉ ΡΠ΅ΠΊΡΠΎΡ */
transparent 252deg 360deg
);
}
li.ring {
width: 250px;
height: 250px;
border-radius: 50%;
border: 40px solid #a2c063; /* Π¦Π²Π΅Ρ ΠΊΠΎΠ»ΡΡΠ° ΠΈ Π΅Π³ΠΎ ΡΠΎΠ»ΡΠΈΠ½Π° */
box-sizing: border-box;
background-color: transparent; /* Π€ΠΎΠ½ ΠΊΠΎΠ»ΡΡΠ° */
list-style-type: none; /* Π£Π±ΠΈΡΠ°Π΅Ρ ΠΌΠ°ΡΠΊΠ΅Ρ ΡΠΏΠΈΡΠΊΠ° */
position: relative;
margin: 10px;
padding: 0; /* Π£Π±ΠΈΡΠ°Π΅Ρ ΠΎΡΡΡΡΠΏΡ */
}
li.ring::before {
content: '';
position: absolute;
width: 160px; /* Π Π°Π·ΠΌΠ΅Ρ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ ΠΊΡΡΠ³Π° */
height: 160px;
background-color: transparent; /* Π¦Π²Π΅Ρ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ ΠΊΡΡΠ³Π° (ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠΌ) */
border-radius: 50%;
list-style-type: none; /* Π£Π±ΠΈΡΠ°Π΅Ρ ΠΌΠ°ΡΠΊΠ΅Ρ ΡΠΏΠΈΡΠΊΠ° */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
li.circle {
width: 250px;
height: 250px;
position: relative;
border-radius: 50%;
overflow: hidden;
list-style-type: none;
margin: 10px;
}
li.circle::before,
li.circle::after,
li.circle div {
content: '';
position: absolute;
width: 50%;
height: 50%;
box-sizing: border-box;
transition: background-color 0.3s ease;
}
li.circle::before {
background-color: #FF6347; /* ΠΠ΅ΡΠ²ΡΠΉ ΡΠ²Π΅Ρ */
top: 0;
left: 0;
border-top-left-radius: 50%;
}
li.circle::after {
background-color: #4682B4; /* ΠΡΠΎΡΠΎΠΉ ΡΠ²Π΅Ρ */
top: 0;
right: 0;
border-top-right-radius: 50%;
}
li.circle div.top-right {
background-color: #3CB371; /* Π’ΡΠ΅ΡΠΈΠΉ ΡΠ²Π΅Ρ */
bottom: 0;
right: 0;
border-bottom-right-radius: 50%;
}
li.circle div.bottom-left {
background-color: #FFD700; /* Π§Π΅ΡΠ²Π΅ΡΡΡΠΉ ΡΠ²Π΅Ρ */
bottom: 0;
left: 0;
border-bottom-left-radius: 50%;
}
/* ΠΡΡΠ΅ΠΊΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
li.circle::before:hover {
background-color: #FF7F50; /* ΠΠ΅ΡΠ²ΡΠΉ ΡΠ²Π΅Ρ - Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΡΡΠ΅ */
}
li.circle::after:hover {
background-color: #5A9BD3; /* ΠΡΠΎΡΠΎΠΉ ΡΠ²Π΅Ρ - Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΡΡΠ΅ */
}
li.circle div.top-right:hover {
background-color: #4FD39E; /* Π’ΡΠ΅ΡΠΈΠΉ ΡΠ²Π΅Ρ - Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΡΡΠ΅ */
}
li.circle div.bottom-left:hover {
background-color: #FFEB3B; /* Π§Π΅ΡΠ²Π΅ΡΡΡΠΉ ΡΠ²Π΅Ρ - Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΡΡΠ΅ */
}
/* Circular Table Styling */
.circular-table {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(8, 1fr);
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
overflow: hidden;
margin: auto;
}
.circular-table a {
position: absolute;
width: 100%;
height: 100%;
}
.circular-table div {
position: absolute;
width: 100%;
height: 100%;
clip-path: polygon(50% 50%, 0 100%, 100% 100%);
transform-origin: center;
transition: background-color 0.6s ease, filter 0.6s ease;
}
.circular-table div:hover {
filter: brightness(1.2);
opacity: 1;
}
.table-photos {
width: 53%;
border: none; /* Hidden border */
height: 315px;
}
.transparent-cell {
background-color: transparent;
width: 20px;
}
.centered-text-cell {
background-color: transparent;
color: #000;
text-align: center;
vertical-align: middle; /* To vertically center the text */
}
.centered-photo-cell {
background-color: #D02019;
text-align: center;
vertical-align: middle; /* To vertically center the image */
}
.centered-photo-cell img {
display: block;
margin-left: auto;
margin-right: auto;
}
/* ΠΠ»Ρ ΡΠΎΡΠΎ */
.custom-table .cell-photo { background-color: trasparent; }
.custom-table .cell-photos { background-color: #D02019; }
.custom-table .cell-photo-caption { background-color: trasparent; text-align:center; border:hidden; font-size:100%; }
tooltip-wrapper {
position: relative;
display: inline-block; /* Ensure it fits the content */
}
.underline-hover {
position: relative;
text-decoration: none;
transition: text-decoration 0.3s ease-in-out;
cursor: pointer; /* Change the cursor to indicate clickable text */
outline: none; /* Remove the outline when focused */
}
.underline-hover:hover,
.underline-hover:focus {
text-decoration: underline;
}
/* Tooltip container */
.tooltip-text {
visibility: hidden;
background-color: #918f8f;
color: #000;
text-align: center;
padding: 5px 10px;
border-radius: 6px;
/* Positioning and size */
position: absolute;
z-index: 100; /* Ensure it's on top of all objects */
top: 70%; /* Center vertically relative to the text */
left: 50%; /* Center horizontally relative to the text */
transform: translate(-50%, 25%); /* Center the tooltip */
opacity: 0;
transition: opacity 0.3s ease-in-out;
width: 200px; /* Allow width to adjust based on content */
word-wrap: break-word; /* Break long words to fit within the width */
white-space: normal; /* Allow text to wrap within the tooltip */
}
/* Show the tooltip text when the wrapper is focused */
.tooltip-wrapper:focus-within .tooltip-text {
visibility: visible;
opacity: 1;
}
/* Hide the tooltip text when the wrapper loses focus */
.tooltip-wrapper:focus:not(:focus-visible) .tooltip-text {
visibility: hidden;
opacity: 0;
}
/* ΠΡΠ°Π΄ΠΈΠ΅Π½Ρ ΡΠ½ΠΈΠ·Ρ Π²Π²Π΅ΡΡ
Π΄Π»Ρ Π²ΡΠ΅Ρ
ΡΡΡΠΎΠΊ ΡΠ°Π±Π»ΠΈΡΡ */
.lyric-outside-table {
z-index: 8; /* Ensure it's on top of all objects */
border-collapse: collapse;
border: 3px solid #CC1E1E; /* ΠΠ½Π΅ΡΠ½ΡΡ Π³ΡΠ°Π½ΠΈΡΠ° ΡΠ°Π±Π»ΠΈΡΡ */
position: relative;
margin-top: 10px;
}
.lyric-outside-table th,
.lyric-outside-table td {
border: none; /* Π£Π±ΡΠ°ΡΡ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ Π³ΡΠ°Π½ΠΈΡΡ */
}
.lyric-outside-table tr {
background-color: #1E1E1E;
}
.lyric-outside-table th {
background-color: #CC1E1E; /* ΠΡΠ°ΡΠ½ΡΠΉ ΡΠ²Π΅Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */
color: white; /* ΠΠ΅Π»ΡΠΉ ΡΠ΅ΠΊΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π΄Π»Ρ ΠΊΠΎΠ½ΡΡΠ°ΡΡΠ° */
}
.lyric-table tr {
background-image:
url('/images/8/8d/Clancy_-_Border_%281%29.png'), /* ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅Π²Π° */
url('/images/8/8d/Clancy_-_Border_%281%29.png'), /* ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΏΡΠ°Π²Π° */
linear-gradient(to top, rgba(24, 24, 24, 0.5) 10%, rgba(60, 60, 60, 0.5) 90%); /* ΠΠΎΠ»ΡΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠΉ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ */
background-position: 10px center, calc(100% - 10px) center, center center; /* ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΎΡΡΡΡΠΏΠΎΠΌ */
background-repeat: repeat-y, repeat-y, no-repeat; /* ΠΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ */
background-size: 23.85px auto, 23.85px auto, cover; /* Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ */
background-blend-mode: overlay; /* Π‘ΠΌΠ΅ΡΠΈΠ²Π°Π½ΠΈΠ΅ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ° Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ */
filter: brightness(1); /* Π£Π²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ ΡΡΠΊΠΎΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ */
}
.lyric-table th,
.lyric-table td {
padding: 10px;
text-align: center; /* ΠΡΡΠΎΠ²Π½ΡΡΡ ΡΠ΅ΠΊΡΡ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ */
vertical-align: middle; /* ΠΡΡΠΎΠ²Π½ΡΡΡ ΡΠ΅ΠΊΡΡ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ */
border: none;
color: #CC1E1E;
font-family: 'MyCustomFont3', sans-serif;
padding-left: 54px; /* ΠΡΡΡΡΠΏ ΡΠ²Π΅ΡΡ
Ρ */
padding-right: 54px;
border-collapse: collapse; /* Π£Π±ΠΈΡΠ°Π΅Ρ ΠΏΡΠΎΠ±Π΅Π»Ρ ΠΌΠ΅ΠΆΠ΄Ρ Π³ΡΠ°Π½ΠΈΡΠ°ΠΌΠΈ ΡΡΠ΅Π΅ΠΊ */
}
/* Π‘ΡΠΈΠ»Ρ Π΄Π»Ρ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠΉ ΡΡΠ΅ΠΉΠΊΠΈ ΡΠ°Π±Π»ΠΈΡΡ */
.lyric-cell {
background-color: rgba(60, 60, 60, 0.5);
background-image:
url('/images/6/63/Clancy_-_Border.png'); /* ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½Π° */
background-position: center center; /* ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ */
background-repeat: repeat-x; /* ΠΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ */
background-size: auto 250%; /* Π Π°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ */
background-size: contain; /* ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΡΡΡ Π΄ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΡΠ΅ΠΉΠΊΠΈ */
padding-left: 50px; /* ΠΡΡΡΡΠΏ ΡΠ΅ΠΊΡΡΠ° ΠΎΡ Π»Π΅Π²ΠΎΠΉ Π³ΡΠ°Π½ΠΈΡΡ */
padding-right: 50px; /* ΠΡΡΡΡΠΏ ΡΠ΅ΠΊΡΡΠ° ΠΎΡ ΠΏΡΠ°Π²ΠΎΠΉ Π³ΡΠ°Π½ΠΈΡΡ */
width: auto; /* Π¨ΠΈΡΠΈΠ½Π° ΡΡΠ΅ΠΉΠΊΠΈ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ */
height: auto; /* ΠΡΡΠΎΡΠ° ΡΡΠ΅ΠΉΠΊΠΈ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ */
min-width: 500px; /* ΠΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°, Π΅ΡΠ»ΠΈ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ */
min-height: 500px; /* ΠΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ°, Π΅ΡΠ»ΠΈ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ */
}
.container {
overflow: visible; /* Π£Π±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π½Π΅ ΡΠΊΡΡΠ²Π°Π΅ΡΡΡ */
}
/* ΠΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΡΠΈΠ»Ρ Π΄Π»Ρ ΡΠ°Π±Π»ΠΈΡΡ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠ·Π°Π΄ΠΈ */
.table-with-background {
position: relative;
width: 68%;
display: grid;
margin-left: 0; /* Π£Π±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ Π·Π΄Π΅ΡΡ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ */
border-radius: 10px 10px 0px 0px;
height: 224px;
float: left;
background-color: #fff; /* Π£Π±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ ΡΠΎΠ½ ΡΠ°Π±Π»ΠΈΡΡ ΠΈΠΌΠ΅Π΅Ρ Π½ΡΠΆΠ½ΡΠΉ ΡΠ²Π΅Ρ */
pointer-events: none;
}
.table-with-background::before {
content: '';
background-image: url('/images/9/99/Clancy_Tyler.png'); /* ΠΠ°ΠΌΠ΅Π½ΠΈΡΠ΅ Π½Π° ΠΏΡΡΡ ΠΊ Π²Π°ΡΠ΅ΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ */
background-size: contain;
background-position: left;
background-repeat: no-repeat;
display: block;
top: -322px; /* Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²Π²Π΅ΡΡ
*/
left: 60px; /* Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²Π»Π΅Π²ΠΎ */
width: calc(100% + 100px); /* Π¨ΠΈΡΠΈΠ½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ ΡΠΈΡΠΈΠ½Π° ΡΠ°Π±Π»ΠΈΡΡ */
height: calc(100% + 100px); /* ΠΡΡΠΎΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ Π²ΡΡΠΎΡΠ° ΡΠ°Π±Π»ΠΈΡΡ */
opacity: 1; /* Π£Π±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ ΡΠ°Π²Π½Π° 1 (100%) */
position: absolute; /* ΠΈΠ»ΠΈ fixed, Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΡΡΡΠΊΡΡΡΡ */
z-index: -10; /* Π€ΠΎΠ½ Π±ΡΠ΄Π΅Ρ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡΡ ΠΏΠΎΠ΄ ΡΠ΅ΠΊΡΡΠΎΠΌ */
pointer-events: none; /* ΠΠ»ΠΈΠΊΠΈ Π±ΡΠ΄ΡΡ ΠΏΡΠΎΡ
ΠΎΠ΄ΠΈΡΡ ΡΠΊΠ²ΠΎΠ·Ρ ΡΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ */
}
/* ΠΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΡΠΈΠ»Ρ Π΄Π»Ρ ΡΠ°Π±Π»ΠΈΡΡ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠ·Π°Π΄ΠΈ */
.table-with-background2 {
position: relative;
width: 68%;
display: grid;
margin-left: 0; /* Π£Π±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ Π·Π΄Π΅ΡΡ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ */
border-radius: 10px 10px 0px 0px;
height: 224px;
float: left;
background-color: #fff; /* Π£Π±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ ΡΠΎΠ½ ΡΠ°Π±Π»ΠΈΡΡ ΠΈΠΌΠ΅Π΅Ρ Π½ΡΠΆΠ½ΡΠΉ ΡΠ²Π΅Ρ */
}
.table-with-background2::before {
content: '';
background-image: url('/images/6/6f/Josh_Torch.png'); /* ΠΠ°ΠΌΠ΅Π½ΠΈΡΠ΅ Π½Π° ΠΏΡΡΡ ΠΊ Π²Π°ΡΠ΅ΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ */
background-size: contain;
background-position: right;
background-repeat: no-repeat;
display: block;
position: absolute;
top: -404px; /* Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²Π²Π΅ΡΡ
*/
right: 70px; /* Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²Π»Π΅Π²ΠΎ */
width: calc(42%); /* Π¨ΠΈΡΠΈΠ½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ ΡΠΈΡΠΈΠ½Π° ΡΠ°Π±Π»ΠΈΡΡ */
height: calc(42%); /* ΠΡΡΠΎΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ Π²ΡΡΠΎΡΠ° ΡΠ°Π±Π»ΠΈΡΡ */
opacity: 1; /* Π£Π±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ ΡΠ°Π²Π½Π° 1 (100%) */
z-index: -10; /* Π€ΠΎΠ½ Π±ΡΠ΄Π΅Ρ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡΡ ΠΏΠΎΠ΄ ΡΠ΅ΠΊΡΡΠΎΠΌ */
pointer-events: none; /* ΠΠ»ΠΈΠΊΠΈ Π±ΡΠ΄ΡΡ ΠΏΡΠΎΡ
ΠΎΠ΄ΠΈΡΡ ΡΠΊΠ²ΠΎΠ·Ρ ΡΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ */
}
/* ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π² ΡΡΠ΅ΠΉΠΊΠ΅ ΠΏΠΎΠ²Π΅ΡΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ */
.table-image-cell > * {
position: relative;
color: white; /* Π¦Π²Π΅Ρ ΡΠ΅ΠΊΡΡΠ°, Π΅ΡΠ»ΠΈ Π½ΡΠΆΠ΅Π½ */
text-align: center; /* ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° */
padding: 10px; /* ΠΡΡΡΡΠΏΡ Π²ΠΎΠΊΡΡΠ³ ΡΠ΅ΠΊΡΡΠ° */
}
/* ΠΡΠΈΠΌΠ΅Ρ CSS Π΄Π»Ρ ΡΠ²Π΅ΡΠ»ΠΎΠΉ ΡΠ΅ΠΌΡ */
.theme-light {
--background-color: #f1f1f1;
--header-background-color: #ffffff;
--content-background-color: #ffffff;
}
.theme-light .clancy-image {
background-image: url('/images/6/6f/Josh_Torch.png');
/* ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΊΠΎΠ΄ Π΄Π»Ρ clancy-image */
}
/* ΠΡΠΈΠΌΠ΅Ρ CSS Π΄Π»Ρ ΡΠ΅ΠΌΠ½ΠΎΠΉ ΡΠ΅ΠΌΡ */
.theme-dark {
--background-color: #2c2c2c;
--header-background-color: #1c1c1c;
--content-background-color: #1c1c1c;
}
.theme-dark .clancy-image {
background-image: url('/images/9/99/Clancy_Tyler.png');
/* ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΊΠΎΠ΄ Π΄Π»Ρ clancy-image */
}
/* Π‘ΡΠΈΠ»Ρ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΏΠΈΡΠΊΠ° Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ */
.theme-toggle-button {
background-color: #007BFF; /* Π‘ΠΈΠ½ΠΈΠΉ ΡΠΎΠ½ ΠΊΠ½ΠΎΠΏΠΊΠΈ */
color: white; /* ΠΠ΅Π»ΡΠΉ ΡΠ²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° */
border: 2px solid #0056b3; /* Π‘ΠΈΠ½ΡΡ Π³ΡΠ°Π½ΠΈΡΠ° */
border-radius: 5px; /* ΠΠ°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠ΅ ΡΠ³Π»Ρ */
padding: 10px; /* ΠΡΡΡΡΠΏΡ Π²Π½ΡΡΡΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ */
cursor: pointer; /* Π£ΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
transition: background-color 0.3s ease, color 0.3s ease; /* ΠΠ»Π°Π²Π½ΡΠΉ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠΎΠ½Π° ΠΈ ΡΠ²Π΅ΡΠ° */
}
.theme-toggle-button:hover {
background-color: #0056b3; /* Π’Π΅ΠΌΠ½ΠΎ-ΡΠΈΠ½ΠΈΠΉ ΡΠΎΠ½ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
color: #fff; /* ΠΠ΅Π»ΡΠΉ ΡΠ΅ΠΊΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
}
body #p-personal li#p-themes {
border-right: 1px solid #333;
padding: 0 .5em;
margin-right: 0;
position: relative;
list-style: none;
background: transparent;
border: transparent;
font-family: 'MyCustomFont2', sans-serif;
}
.vector-menu-dropdown .vector-menu-content {
background-color: #007BFF; /* Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠΈΠ½ΠΈΠΉ ΡΠΎΠ½ */
border-radius: 4px; /* ΠΠ°ΠΊΡΡΠ³Π»ΡΠ΅Ρ ΡΠ³Π»Ρ Π΄Π»Ρ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΈΡΡΠ½ΠΎΠ³ΠΎ Π²ΠΈΠ΄Π° */
color: black; /* ΠΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° Π½Π° Π±Π΅Π»ΡΠΉ Π΄Π»Ρ Π»ΡΡΡΠ΅ΠΉ ΡΠΈΡΠ°Π±Π΅Π»ΡΠ½ΠΎΡΡΠΈ */
}
.vector-menu-dropdown .vector-menu-content:hover {
background-color: #0056b3; /* ΠΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠΎΠ½ Π½Π° Π±ΠΎΠ»Π΅Π΅ ΡΡΠΌΠ½ΠΎ-ΡΠΈΠ½ΠΈΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
transition: background-color 0.3s ease; /* ΠΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΠΏΠ»Π°Π²Π½ΡΠΉ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠΎΠ½Π° */
}
.vector-menu-dropdown .mw-list-item a {
cursor: pointer;
}
body #p-personal li#p-themes ul {
flex-direction: column;
padding: 0.5em 1.4em 0.4em;
align-items: flex-start;
text-align: center;
gap: 0.25em;
height: 170px;
}
body #p-personal li#p-themes ul li a {
padding: 0.25em 0.5em;
text-decoration: none;
margin-left: -10px;
text-align: center;
font-size: 15px;
color: red; /* ΠΠ°Π΄Π°Π΅Ρ ΠΊΡΠ°ΡΠ½ΡΠΉ ΡΠ²Π΅Ρ ΠΈΠΊΠΎΠ½ΠΎΠΊ */
background: transparent;
transition: color 0.3s ease, text-shadow 0.3s ease; /* ΠΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΠΏΠ»Π°Π²Π½ΡΠΉ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ Π΄Π»Ρ ΡΠ²Π΅ΡΠ° ΠΈ ΡΠ΅Π½ΠΈ */
}
body #p-personal li#p-themes ul li a:hover {
color: #ff3333; /* ΠΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²Π΅Ρ Π½Π° Π±ΠΎΠ»Π΅Π΅ ΡΠ²Π΅ΡΠ»ΡΠΉ ΠΊΡΠ°ΡΠ½ΡΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
text-shadow: 0 0 5px rgba(255, 0, 0, 0.7); /* ΠΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
}
body #p-personal li#p-themes ul li {
width: 110%;
border-radius: 4px;
margin-right: 5px;
margin-left: -19px;
}
.vector-user-menu-legacy .vector-menu-content-list {
display: flex;
flex-grow: 1;
align-items: baseline;
flex-direction: row;
justify-content: space-between;
}
#corner-table {
position: fixed;
bottom: 0;
left: 0;
z-index: 1000;
background-color: white;
border: 1px solid #a2a9b1;
}
.wikitable img {
border: none;
}
li.explore-adaptive-item {
background-color: #EFE9DE; /* Π¦Π²Π΅Ρ ΡΠΎΠ½Π° */
border: 2px solid #999; /* Π¦Π²Π΅Ρ ΠΈ ΡΠΎΠ»ΡΠΈΠ½Π° ΡΠ°ΠΌΠΊΠΈ */
border-radius: 12px; /* ΠΠ°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠ΅ ΡΠ³Π»Ρ */
padding: 15px; /* ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ */
margin-bottom: 1px; /* ΠΡΡΡΡΠΏ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΡΠΏΠΈΡΠΊΠ° *//
list-style-type: none; /* Π£Π±ΠΈΡΠ°Π΅ΠΌ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ ΠΌΠ°ΡΠΊΠ΅ΡΡ ΡΠΏΠΈΡΠΊΠ° */
display: inline-block; /* ΠΠ»Ρ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΡ ΡΠΈΡΠΈΠ½Ρ Π΄ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ */
min-width: 150px; /* ΠΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */
min-height: 50px; /* ΠΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */
max-width: 100%; /* ΠΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° Π΄ΠΎ 100% ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° */
word-wrap: break-word; /* ΠΠ΅ΡΠ΅Π½ΠΎΡ Π΄Π»ΠΈΠ½Π½ΡΡ
ΡΠ»ΠΎΠ² Π½Π° ΡΠ»Π΅Π΄ΡΡΡΡΡ ΡΡΡΠΎΠΊΡ */
box-sizing: border-box; /* Π£ΡΠΈΡΡΠ²Π°Π΅ΠΌ ΡΠ°ΠΌΠΊΡ ΠΈ ΠΎΡΡΡΡΠΏΡ Π² ΡΠ°Π·ΠΌΠ΅ΡΠ°Ρ
*/
position: relative; /* ΠΠ»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */
transition: background-color 0.4s ease, color 0.4s ease; /* ΠΠ»Π°Π²Π½ΡΠΉ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ Π΄Π»Ρ ΡΠΎΠ½Π° ΠΈ ΡΠ²Π΅ΡΠ° ΡΠ΅ΠΊΡΡΠ° */
}
li.explore-adaptive-item::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('/images/1/1e/Clancy_Gif_Intro.gif'); /* ΠΠ°ΠΌΠ΅Π½ΠΈΡΠ΅ Π½Π° ΠΏΡΡΡ ΠΊ Π²Π°ΡΠ΅ΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ΅ */
background-size: cover; /* ΠΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΡΡΠΎΠ±Ρ ΠΏΠΎΠΊΡΡΠ²Π°Π»Π° Π²Π΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ */
background-repeat: no-repeat; /* ΠΡΠΊΠ»ΡΡΠ°Π΅ΠΌ ΠΏΠΎΠ²ΡΠΎΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ */
background-position: center; /* Π¦Π΅Π½ΡΡΠΈΡΡΠ΅ΠΌ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ */
opacity: 0; /* ΠΠ°ΡΡΠΈΠ½ΠΊΠ° ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ ΡΠΊΡΡΡΠ° */
transition: opacity 0.4s ease; /* ΠΠ»Π°Π²Π½ΡΠΉ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ Π΄Π»Ρ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ */
border-radius: 10px; /* ΠΠ°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠ΅ ΡΠ³Π»Ρ Π΄Π»Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ */
z-index: 0; /* Π Π°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ·Π°Π΄ΠΈ ΡΠ΅ΠΊΡΡΠ° */
}
li.explore-adaptive-item:hover {
background-color: transparent; /* Π£Π±ΠΈΡΠ°Π΅ΠΌ ΡΠ²Π΅Ρ ΡΠΎΠ½Π° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
border-color: transparent; /* Π£Π±ΠΈΡΠ°Π΅ΠΌ ΡΠ²Π΅Ρ ΡΠ°ΠΌΠΊΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
color: #FDE51F; /* Π¦Π²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
text-shadow: 0px 0px 7px rgba(0, 0, 0, 2.5);
border: 2px solid #862520; /* Π¦Π²Π΅Ρ ΠΈ ΡΠΎΠ»ΡΠΈΠ½Π° ΡΠ°ΠΌΠΊΠΈ */
}
li.explore-adaptive-item:hover::before {
opacity: 1; /* ΠΠ°ΡΡΠΈΠ½ΠΊΠ° ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
}
/* Π£Π±Π΅Π΄ΠΈΠΌΡΡ, ΡΡΠΎ ΡΠ΅ΠΊΡΡ Π½Π΅ ΠΌΠ΅Π½ΡΠ΅Ρ Π΄ΡΡΠ³ΠΈΡ
ΡΡΠΈΠ»Π΅ΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
li.explore-adaptive-item:hover * {
position: relative;
z-index: 1; /* Π’Π΅ΠΊΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΏΠΎΠ²Π΅ΡΡ
ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ */
color: inherit; /* Π‘ΠΎΡ
ΡΠ°Π½ΡΠ΅ΠΌ ΡΠ²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
text-decoration: none; /* Π£Π±ΠΈΡΠ°Π΅ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΡ */
}
/* Π£Π±Π΅Π΄ΠΈΠΌΡΡ, ΡΡΠΎ ΡΠ΅ΠΊΡΡ Π½Π΅ ΠΌΠ΅Π½ΡΠ΅Ρ Π΄ΡΡΠ³ΠΈΡ
ΡΡΠΈΠ»Π΅ΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
li.explore-adaptive-item:hover * {
position: relative;
z-index: 1; /* Π’Π΅ΠΊΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΏΠΎΠ²Π΅ΡΡ
ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ */
color: inherit; /* Π‘ΠΎΡ
ΡΠ°Π½ΡΠ΅ΠΌ ΡΠ²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
text-decoration: none; /* Π£Π±ΠΈΡΠ°Π΅ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΡ */
}
/* Π£Π±Π΅Π΄ΠΈΠΌΡΡ, ΡΡΠΎ ΡΠ΅ΠΊΡΡ Π½Π΅ ΠΌΠ΅Π½ΡΠ΅Ρ Π΄ΡΡΠ³ΠΈΡ
ΡΡΠΈΠ»Π΅ΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
li.explore-adaptive-item:hover * {
color: inherit; /* Π‘ΠΎΡ
ΡΠ°Π½ΡΠ΅ΠΌ ΡΠ²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
text-decoration: none; /* Π£Π±ΠΈΡΠ°Π΅ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΡ */
}
li.custom2-adaptive-item {
background-color: #EFE9DE; /* Π¦Π²Π΅Ρ ΡΠΎΠ½Π° */
border: 2px solid #999; /* Π¦Π²Π΅Ρ ΠΈ ΡΠΎΠ»ΡΠΈΠ½Π° ΡΠ°ΠΌΠΊΠΈ */
border-radius: 10px; /* ΠΠ°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠ΅ ΡΠ³Π»Ρ */
padding: 10px; /* ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ */
margin-bottom: 10px; /* ΠΡΡΡΡΠΏ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΡΠΏΠΈΡΠΊΠ° */
list-style-type: none; /* Π£Π±ΠΈΡΠ°Π΅ΠΌ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ ΠΌΠ°ΡΠΊΠ΅ΡΡ ΡΠΏΠΈΡΠΊΠ° */
display: inline-block; /* ΠΠ»Ρ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΡ ΡΠΈΡΠΈΠ½Ρ Π΄ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ */
min-width: 150px; /* ΠΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */
min-height: 50px; /* ΠΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */
max-width: 100%; /* ΠΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° Π΄ΠΎ 100% ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° */
word-wrap: break-word; /* ΠΠ΅ΡΠ΅Π½ΠΎΡ Π΄Π»ΠΈΠ½Π½ΡΡ
ΡΠ»ΠΎΠ² Π½Π° ΡΠ»Π΅Π΄ΡΡΡΡΡ ΡΡΡΠΎΠΊΡ */
box-sizing: border-box; /* Π£ΡΠΈΡΡΠ²Π°Π΅ΠΌ ΡΠ°ΠΌΠΊΡ ΠΈ ΠΎΡΡΡΡΠΏΡ Π² ΡΠ°Π·ΠΌΠ΅ΡΠ°Ρ
*/
position: relative; /* ΠΠ΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌ Π΄Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */
}
/* Π‘ΡΠΈΠ»Ρ Π΄Π»Ρ ΡΡΡΠ»ΠΊΠΈ, ΡΡΠΎΠ±Ρ ΠΎΠ½Π° Π·Π°Π½ΠΈΠΌΠ°Π»Π° Π²ΡΡ ΠΎΠ±Π»Π°ΡΡΡ <li> */
li.custom2-adaptive-item .link-item {
display: block; /* ΠΠ°Π½ΠΈΠΌΠ°Π΅Ρ Π²ΡΡ Π΄ΠΎΡΡΡΠΏΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ */
text-decoration: none; /* Π£Π±ΠΈΡΠ°Π΅ΠΌ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° */
color: inherit; /* ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅ΠΌ ΡΠ²Π΅Ρ ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */
height: 100%; /* ΠΠ°Π½ΠΈΠΌΠ°Π΅Ρ ΠΏΠΎΠ»Π½ΡΡ Π²ΡΡΠΎΡΡ <li> */
width: 100%; /* ΠΠ°Π½ΠΈΠΌΠ°Π΅Ρ ΠΏΠΎΠ»Π½ΡΡ ΡΠΈΡΠΈΠ½Ρ <li> */
}
/* ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΡΡΠΈΠ»Ρ Π΄Π»Ρ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ */
li.unique-item::after {
content: "Discography"; /* Π’Π΅ΠΊΡΡ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ */
color: white; /* Π¦Π²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° */
font-size: 20px; /* Π Π°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° */
font-weight: bold; /* ΠΠΎΠ»ΡΠΆΠΈΡΠ½ΡΠΉ ΡΡΠΈΡΡ */
position: absolute; /* ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ */
top: 50%; /* Π¦Π΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ */
left: 50%; /* Π¦Π΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ */
transform: translate(-50%, -50%); /* Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π½Π° ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ */
opacity: 0; /* ΠΡΡ
ΠΎΠ΄Π½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΠΎ */
transition: opacity 0.3s ease; /* ΠΠ»Π°Π²Π½ΡΠΉ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ */
}
/* ΠΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ */
li.unique-item:hover::after {
opacity: 1; /* Π‘Π΄Π΅Π»Π°ΡΡ ΡΠ΅ΠΊΡΡ Π²ΠΈΠ΄ΠΈΠΌΡΠΌ */
}
/* Π‘ΡΠΈΠ»Ρ Π΄Π»Ρ Π½ΠΎΠ²ΠΎΠ³ΠΎ Π²ΠΈΠ΄Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠΏΠΈΡΠΊΠ° */
li.special-item {
background-color: #E0E0E0; /* Π¦Π²Π΅Ρ ΡΠΎΠ½Π° Π΄Π»Ρ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */
border: 1px solid #CCC; /* Π¦Π²Π΅Ρ ΠΈ ΡΠΎΠ»ΡΠΈΠ½Π° ΡΠ°ΠΌΠΊΠΈ Π΄Π»Ρ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */
border-radius: 5px; /* ΠΠ°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠ΅ ΡΠ³Π»Ρ Π΄Π»Ρ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */
padding: 15px; /* ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ Π΄Π»Ρ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */
font-style: italic; /* ΠΡΡΡΠΈΠ² Π΄Π»Ρ ΡΠ΅ΠΊΡΡΠ° Π²Π½ΡΡΡΠΈ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */
font-size: 16px; /* Π Π°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° Π΄Π»Ρ ΡΠ΅ΠΊΡΡΠ° Π²Π½ΡΡΡΠΈ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */
color: #333; /* Π¦Π²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° Π΄Π»Ρ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */
}
/* Π£Π±ΠΈΡΠ°Π΅ΠΌ ΡΡΡΠ΅ΠΊΡΡ Π·Π°ΡΠ΅ΠΌΠ½Π΅Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
li.custom2-adaptive-item:hover img {
filter: none; /* Π£Π±ΠΈΡΠ°Π΅ΠΌ ΡΠΈΠ»ΡΡΡ Π·Π°ΡΠ΅ΠΌΠ½Π΅Π½ΠΈΡ */
}
/* CSS placed here will be applied to all skins */
/* Π‘ΡΠΈΠ»Ρ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΏΠΈΡΠΊΠ° Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ */
li.custom-adaptive-item {
background-color: #EFE9DE; /* Π¦Π²Π΅Ρ ΡΠΎΠ½Π° */
border: 2px solid #999; /* Π¦Π²Π΅Ρ ΠΈ ΡΠΎΠ»ΡΠΈΠ½Π° ΡΠ°ΠΌΠΊΠΈ */
border-radius: 10px; /* ΠΠ°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠ΅ ΡΠ³Π»Ρ */
padding: 10px; /* ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ */
margin-bottom: 10px; /* ΠΡΡΡΡΠΏ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΡΠΏΠΈΡΠΊΠ° */
list-style-type: none; /* Π£Π±ΠΈΡΠ°Π΅ΠΌ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ ΠΌΠ°ΡΠΊΠ΅ΡΡ ΡΠΏΠΈΡΠΊΠ° */
display: inline-block; /* ΠΠ»Ρ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΡ ΡΠΈΡΠΈΠ½Ρ Π΄ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ */
min-width: 150px; /* ΠΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */
min-height: 50px; /* ΠΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */
max-width: 100%; /* ΠΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° Π΄ΠΎ 100% ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° */
word-wrap: break-word; /* ΠΠ΅ΡΠ΅Π½ΠΎΡ Π΄Π»ΠΈΠ½Π½ΡΡ
ΡΠ»ΠΎΠ² Π½Π° ΡΠ»Π΅Π΄ΡΡΡΡΡ ΡΡΡΠΎΠΊΡ */
box-sizing: border-box; /* Π£ΡΠΈΡΡΠ²Π°Π΅ΠΌ ΡΠ°ΠΌΠΊΡ ΠΈ ΠΎΡΡΡΡΠΏΡ Π² ΡΠ°Π·ΠΌΠ΅ΡΠ°Ρ
*/
position: relative; /* ΠΠ΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌ Π΄Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */
transition: background-color 0.3s ease, border-color 0.3s ease;
}
li.custom-adaptive-item a {
display: block; /* ΠΠ°Π½ΠΈΠΌΠ°Π΅Ρ Π²ΡΡ Π΄ΠΎΡΡΡΠΏΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ */
height: 100%; /* ΠΠ°Π½ΠΈΠΌΠ°Π΅Ρ ΠΏΠΎΠ»Π½ΡΡ Π²ΡΡΠΎΡΡ <li> */
width: 100%; /* ΠΠ°Π½ΠΈΠΌΠ°Π΅Ρ ΠΏΠΎΠ»Π½ΡΡ ΡΠΈΡΠΈΠ½Ρ <li> */
text-decoration: none; /* Π£Π±ΠΈΡΠ°Π΅ΠΌ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° */
color: inherit; /* ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅ΠΌ ΡΠ²Π΅Ρ ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */
}
/* ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΡΡΠΈ */
li.custom-adaptive-item:hover {
background-color: #CFC8B2; /* Π¦Π²Π΅Ρ ΡΠΎΠ½Π° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
border-color: #777; /* Π¦Π²Π΅Ρ ΡΠ°ΠΌΠΊΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
}
/* ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΎΡΡΠ΅Π½ΠΊΠ° Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° <li> */
li.custom-adaptive-item:hover img {
filter: brightness(0.8); /* Π’Π΅ΠΌΠ½Π΅Π΅ Π½Π° 20% ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
}
/* Π’Π΅ΠΊΡΡ "Discography" ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ */
li.unique-item::after {
content: "Discography"; /* Π’Π΅ΠΊΡΡ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ */
color: white; /* Π¦Π²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° */
font-size: 20px; /* Π Π°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° */
font-weight: bold; /* ΠΠΎΠ»ΡΠΆΠΈΡΠ½ΡΠΉ ΡΡΠΈΡΡ */
position: absolute; /* ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ */
top: 50%; /* Π¦Π΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ */
left: 50%; /* Π¦Π΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ */
transform: translate(-50%, -50%); /* Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π½Π° ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ */
opacity: 0; /* ΠΡΡ
ΠΎΠ΄Π½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΠΎ */
transition: opacity 0.3s ease; /* ΠΠ»Π°Π²Π½ΡΠΉ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ */
}
li.unique-item2::after {
content: "[[Tours]]"; /* Π’Π΅ΠΊΡΡ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ */
color: white; /* Π¦Π²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° */
font-size: 20px; /* Π Π°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° */
font-weight: bold; /* ΠΠΎΠ»ΡΠΆΠΈΡΠ½ΡΠΉ ΡΡΠΈΡΡ */
position: absolute; /* ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ */
top: 50%; /* Π¦Π΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ */
left: 50%; /* Π¦Π΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ */
transform: translate(-50%, -50%); /* Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π½Π° ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ */
opacity: 0; /* ΠΡΡ
ΠΎΠ΄Π½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΠΎ */
transition: opacity 0.3s ease; /* ΠΠ»Π°Π²Π½ΡΠΉ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ */
}
/* ΠΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ */
li.unique-item:hover::after {
opacity: 1; /* Π‘Π΄Π΅Π»Π°ΡΡ ΡΠ΅ΠΊΡΡ Π²ΠΈΠ΄ΠΈΠΌΡΠΌ */
}
li.unique-item2:hover::after {
opacity: 1; /* Π‘Π΄Π΅Π»Π°ΡΡ ΡΠ΅ΠΊΡΡ Π²ΠΈΠ΄ΠΈΠΌΡΠΌ */
}
hr.whowe-hr { border: 0; height: 5px; background: linear-gradient(to right, rgba(208, 32, 25, 0), #D02019, rgba(208, 32, 25, 0)); }
table td.hover-effect { background-color: #FF0000; transition: background-color 0.3s ease; }
table td.hover-effect:hover { background-color: #00FF21; }
hr.custom-hr-unco { border: 0; height: 1px; background-color: #B59000; margin: 5px 0; }
hr { background-color: #C14424; }
.mw-body h1, .mw-body-content h1, .mw-body-content h2 { font-family: 'MyCustomFont3', sans-serif; }
.mw-body h1, .mw-body-content h1 { font-family: 'MyCustomFont1', sans-serif; font-size: 35px; color: linear-gradient(to bottom, rgba(167, 215, 249, 0) 0, #D02019 100%); }
@font-face { font-family: 'MyCustomFont1'; src: url('/nc_assets/fonts/Bebas Neue Cyrillic.ttf') format('truetype'); font-weight: 510; font-style: normal; }
@font-face { font-family: 'MyCustomFont3'; src: url('/nc_assets/fonts/Martian Mono Condensed Medium.ttf') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'MyCustomFont2'; src: url('/nc_assets/fonts/JetBrainsMono.ttf') format('truetype'); font-weight:500; font-style: normal; font-optical-sizing: auto; }
.mw-mmv-post-image { background-color: #DDD7CC; }
.mw-ui-button.mw-ui-progressive:not(:disabled) { background-color: #D02019; }
.venue-table { background-color: #EFE1E4; text-align: left; margin: 1em 0; border-collapse: collapse; }
.unco-table { background-color: #FFF6CE; text-align: left; margin: 1em 0; border-collapse: collapse; }
.qute-table { background-color: #FFE281; border-color: #B59000 text-align: left; margin: 1em 0; border-collapse: collapse; }
.setlist-table { background-color: #efe9de; border: 3px solid #c14424; text-align: left; margin: 1em 0; border-collapse: collapse; }
.venue-table > tr > th, .venue-table > tr > td, .venue-table > * > tr > th, .venue-table > * > tr > td { padding: 0.2em 0.4em; }
.unco-table > tr > th, .unco-table > tr > td, .unco-table > * > tr > th, .unco-table > * > tr > td { padding: 0.2em 0.4em; }
.setlist-table {
--setlist-bg-color: #efe9de; /* ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π΄Π»Ρ ΡΠ²Π΅ΡΠ° */
background-color: var(--setlist-bg-color);
border: 3px solid #c14424;
text-align: left;
margin: 1em 0;
border-collapse: collapse;
}
.custom-table tbody .cell-red { background-color: #ffdddd; }
.custom-table {
background-color: transparent;
border: 2px solid #D33328;
border-collapse: collapse;
text-align: center;
}
.disc-table { border: 2px solid #D33328; }
.custom-table .cell-der { background-color: #CC531E; }
.custom-table th, .custom-table td { border: 1px solid #D33328; padding: 3px; }
.custom-table .header-red { background-image:url(/images/d/db/Clancy_Letter_Background1.png); background-size: cover; color: white; text-align: center; }
.custom-table .header-blue { background-image:url(/images/0/0a/Whiteback.jpg); background-size: cover; color: white; text-align: center; }
.custom-table .cell-red { background-color: #FFE281; }
.custom-table .cell-box { background-image:url(/images/6/64/Boxm.png); }
.custom-table .cell-blue { background-color: #CEC9C2; border: 1px solid #C14424; height: 2px; }
.custom-table .cell-disco { text-align:center; border-color:#EFBB7F; background-color: #EFE9DE; }
.custom-table .cell-disco2 { background-color:#D87C43; text-align:center; border-color:#EFBB7F; }
.custom-table .cell-green { background-color: #EFE9DE; border: 1px solid #C14424; height: 2px; }
.custom-table .header-grass { background-color: #EFE9DE; }
#footer-info li { line-height: 1.4; background: #DDD7CC; margin-bottom: 4px; text-indent: 5px; }
#footer-places li { float: left; margin-right: 1em; line-height: 2; background: #DDD7CC; text-indent: 5px; text-indent-right: 5px; }
.background-table { background-image: url(/images/3/3b/Clancy_background.png); background-size: cover;}
.vector-user-menu-legacy li { font-size: 0.75em; float: left; margin-left: 0.75em; padding-top: 2.6em; line-height: 1.16666667; }
.client-js .sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable), .jquery-tablesorter th.headerSort { background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both.svg?0e440); cursor: pointer; background-repeat: no-repeat; background-position: center right; padding-right: 21px; background-size: auto; }
.table-bg { background-image:url(/images/0/0a/Whiteback.jpg); background-size: cover; background-repeat: no-repeat; }
.border-image-container { border-image-source: linear-gradient(to right, #ff8c00, #ffd700); }
.wikitable { background-color: #EFE9DE; }
.gradient-underline { display: inline-block; position: relative; }
.gradient-underline::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 100%; height: 5px; background-image: linear-gradient(to right, #ff0000, #00ff00); background-size: 100% 100%; z-index: -1; }
.my-template.theme-dark { /* Styles specific to the "dark" theme */ }
.rounded-table { border-collapse: collapse; border-radius: 10px; overflow: hidden; }
.wikitable.transparent { background-color: transparent; border: none; }
/* Change the background color of the bottom and left of eath page, up to behind the logo: */
body { background: #D02019 url(/images/a/a9/Dema_beck_clancy.png) no-repeat; font-family: 'Roboto', Arial, sans-serif; position: relative; }
#content .client-darkmode { background: #AA3C14; font-family: "Roboto"; }
.theme-dark .infobox { background-color: #333; color: #fff; border: 1px solid #666; }
/* background color of the content and title of pages */
#content { background-color: #DDD7CC; font-family: 'MyCustomFont2', sans-serif; }
/* This is from the background color of the title of the Navigation menu in the left column */
#p-navigation { background-color: #FFD800; border-radius: 10px 10px 0px 0px; border: 3px solid #722215; border-bottom:hidden; background-image:url(/images/9/97/Sidebar.png); font-family: 'MyCustomFont3', sans-serif; }
/* This is from the background color of the title of the Twenty one pilots menu in the left column */
#p-Twenty_one_pilots { background-color: #FFD800; border: 3px solid #722215; border-bottom:hidden; border-top:hidden; background-image:url(/images/3/38/Sidebar2.png); font-family: 'MyCustomFont2', sans-serif; }
/* This is from the background color of the title of the Twenty one pilots menu in the left column */
#p-Tyler_Joseph { background-color: #FFD800; border: 3px solid #722215; border-bottom:hidden; border-top:hidden; background-image:url(/images/3/38/Sidebar2.png); font-family: 'MyCustomFont2', sans-serif; }
/* This is from the background color of the title of the Members menu in the left column */
#p-Members { background-color: #FFD800; border: 3px solid #722215; border-bottom:hidden; border-top:hidden; background-image:url(/images/3/38/Sidebar2.png); font-family: 'MyCustomFont2', sans-serif; }
.background-table { background-image: url(/images/3/3b/Clancy_background.png); background-size: cover;}
.wikitable > tr > th, .wikitable > * > tr > th { background:#}
#catlinks { background:#CEC9C2; border: 1px solid #D33328; }
.mw-parser-output .tracklist th[scope="col"] { background-color: #ef5e29; }
.wikitable > tr > th, .wikitable > * > tr > th { background-color: #D33328; border: 1px solid #7b1325; background-image: url(/images/d/db/Clancy_Letter_Background1.png); background-size: cover; color: #fff; }
.wikitable > tr > th, .wikitable > * > tr > th { background-color: #eaecf0; text-align: center; color: #fff; }
.wikitable > tr > th, .wikitable > * > tr > th { background-color: #D33328; border: 1px solid #7b1325; background-image: url(/images/d/db/Clancy_Letter_Background1.png); }
.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td { background: #EFE9DE; }
.wikitable > tr > th, .wikitable > * > tr > th { background-color: #D33328; border: 1px solid #7b1325; background-size: cover; background-image: url(/images/d/db/Clancy_Letter_Background1.png); }
.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td { border: 1px solid #7b1325; }
.catlinks li { display: inline-block; line-height: 1.25em; border-left: 1px solid #D33328; margin: 0.125em 0; padding: 0 0.5em; }
.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading { background-image: linear-gradient(to bottom,rgba(167,215,249,0) 0,#722215 100%); background-repeat: no-repeat; background-size: 1px 100%; }
:not(:checked) > .vector-menu-checkbox { background:#EFB737; display: block; }
li.gallerybox div.thumb { border: hidden; background-color: #D33328; text-align:center; }
.mw-parser-output .tracklist-total-length th>span { background-color: #d8663d; }
.mw-parser-output .tracklist-total-length td { background-color: #d8663d; }
.vector-menu-dropdown { background-image: linear-gradient(to bottom,rgba(167,215,249,0) 0,#722215 100%); }
.c-actions { margin: 10px 5px 0px 0px; }
.c-item { background-color: #EFE9DE; border:2px solid #D33328; color: #722215; margin: 10px 0px 15px 0px; }
.c-avatar img { padding: 3px; border: 1px solid #dcdcdc; background-color: #bc1313; margin: 6px 0px 0px 6px; }
.c-score { right: 10px; }
.c-container { margin: 0px 0px 0px 75px; }
.c-user { margin: 1px 0px 6px 0px; }
.c-time { color: #af1414; }
.f-message { background-color: #FFF8ED; width: 445px; }
.c-comment { text-indent: 5px; word-wrap: break-word; word-break: break-word;}
.user-section-heading { margin: 0 0 23px 0; }
#profile-title { margin: 15px 20px 29px -6px; }
#profile-image img { margin: 15px 0px 0px 0px; }
body #p-personal li#p-themes > span { position: relative; top: 24px; left: -101px; }
.vector-user-menu-legacy li { position: relative; top: -26px; right: -10px; }
.mwe-popups .mwe-popups-extract:after, .mwe-popups .mwe-popups-extract blockquote:after { content: ' '; position: absolute; bottom: 0; width: 25%; height: 20px; background-color: #EFE9DE; pointer-events: none; }
figure[typeof~='mw:File/Thumb'], figure[typeof~='mw:File/Frame'] { background-color: #D35232; border-color: #9E3A19; }
.mw-content-ltr figure[typeof~='mw:File/Thumb'] > figcaption, .mw-content-ltr figure[typeof~='mw:File/Frame'] > figcaption { background-color: #D02019; border-color: #9E3A19; color: #fff }
.mwe-popups .mwe-popups-extract[dir='ltr']:after { right: 0; background-image: linear-gradient(to right,rgba(255,255,255,0),#EFE9DE 50%); }
.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td { background-color: #; border: 1px solid #D33328; padding: 0.2em 0.4em; }
input[type="checkbox" i] { color: #B0E0E6; }
.mwe-popups .mwe-popups-container { background: #EFE9DE; }
.mw-parser-output .infobox-above, .mw-parser-output .infobox-title { font-size: 125%; font-weight: bold; text-align: center; border-radius: 2px 2px; background-image: url(/images/d/db/Clancy_Letter_Background1.png); background-size: cover; text-shadow: 0 0 10px #000; }
#n-Discord a { color: #fff !important; font-weight: bold; border-radius: 4px; border: 1px solid #4c57d0; background-color: #5865f2; display: block; position: relative; padding: 4px 4px 5px calc(17px + 6.5px * 2); box-shadow: 0 2px 3px rgba(0,0,0,0.1); transition: 0.2s; }
.vector-legacy-sidebar .vector-menu-portal .vector-menu-heading { display: block; color: #44180D; margin: 0.5em 0 0 0.66666667em; border: 0; padding: 0.25em 0; font-size: 0.80em; font-weight: bold; cursor: default; background-image: linear-gradient(to right,rgba(200,204,209,0) 0,#AA3C14 33%,#AA3C14 66%,rgba(200,204,209,0) 100%); background-position: center bottom; background-repeat: no-repeat; background-size: 100% 1px; font-family: 'sans-serif', sans-serif; }
.vectorTabs span a { background-color: #B0E0E6; }
#p-logo { ; }
.featurebox-heading { background-image: url(/images/1/14/Scaled_transparent.png); color: #fff; }
element.style { width: 60%; background-color: ; background-image: url(/images/1/14/Scaled_transparent.png); }
.toc, .toccolours { border-radius: 8px 8px; border: 3px solid #D33328; background-color: #EFE9DE; }
#p-tb { background-color: #FFD800; border-radius: 0px 0px 10px 10px; border: 3px solid #722215; border-top:hidden; background-image: url(/images/9/97/Sidebar.png); font-family: 'MyCustomFont2', sans-serif; }
#p-personal ul { background: #DDD7CC; border-radius: 3px 3px; border: 2px solid #D33328; padding:0.1em 1.5em; height: 23px; }
#mw-head { background-image: url(/images/4/42/Heared-3_%283%29.gif);}
.vector-menu-tabs-legacy .selected { background: #DDD7CC }
.vector-menu-checkbox {
color: #D33328;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
z-index: 1;
opacity: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: none;
}
.mp_header { background-image:url(/images/9/9c/Wikinews_banner_2024.png); background-repeat: no-repeat; background-position: top right; width: 100%;}
.mw-body { border: 1.5px solid #722215; margin-top: -4px; }
h1, h2 { border-color: #57544a; }
.vector-menu-dropdown .mw-list-item a:not(.mw-ui-icon) { background: #F4FFFF; }
img[Attributes Style] { height: 168px; }
.grid * { background: #E0C9AF; }
.vector-search-box-input { color: #312400; border: 1px solid #6D2614; }
.skin-vector .uls-search { border-bottom-color: #7A4D1D; }
.vector-menu-tabs-legacy li { background-image: linear-gradient(to top,#DDD7CC 0,#DDD7CC 1px,#C1BBB2 100% );
.vector-legacy-sidebar .vector-menu-portal .vector-menu-heading { background-image: linear-gradient(to right,rgba(200,204,209,0) 0,#D33328 33%,#F7572E 66%,rgba(200,204,209,0) 100%); background-position: center bottom; background-repeat: no-repeat; background-size: 100% 1px; font-weight: bold; }
.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading { background-image: linear-gradient(to bottom,rgba(68,137,145,0) 0,#D33328 100%); border: 4px solid #722215; background-repeat: no-repeat; background-size: 1px 100%; border: 4px solid #D33328; margin-top: -4px; }
.imagelink_telegram a {
width:100px;
height:100px;
display:block;
text-decoration:none;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Telegram_logo.svg/2048px-Telegram_logo.svg.png")
body.page-Main_Page h1.firstHeading { display:none; }
#title-para { background-color: #F0FFFF; }
.hoverimage:hover {
transition: 0.2s ease;
transform: scale(1.1);
}
#mw-content-text .featurebox .featurebox-heading{
background-image:url("https://tfwiki.net/mediawiki/images2/2/26/Allsparkstrip_transparent.png");
}
.hover-highlight:hover {
background-color: #ffffcc; /* Any desired color */
}
/* Hover Box for switching the visibility of the selected item */
.hoverbox { display:inline-block; padding:0em; }
.hoverbox .hoveritem { display:none; margin:0em; padding:0em; }
.hoverbox .hoveritem.selected { display:inline-block; }
.hoverbox:hover .hoveritem { display:inline-block; }
.hoverbox:hover .hoveritem.selected { display:none; }
--theme-background-color: #2c56a0;