.WebAccessibility {
filter: unset !important;
-webkit-filter: unset !important;
}
.WebAccessibility .CloseBtn {
width: 1.8rem;
height: 1.8rem;
position: absolute;
display: inline-block;
cursor: pointer;
left: 0.5rem;
top: 0.5rem;
background: var(--accent-color, #30a0fc);
border-radius: 50%;
}
.WebAccessibility .CloseBtn:hover {
background: white;
}
.WebAccessibility .CloseBtn::before,
.WebAccessibility .CloseBtn::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 60%;
height: 2px;
background: white;
/* رنگ X */
transform-origin: center;
}
.WebAccessibility .CloseBtn::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.WebAccessibility .CloseBtn::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.WebAccessibility .CloseBtn:hover::before,
.WebAccessibility .CloseBtn:hover::after {
background: var(--accent-color, #30a0fc);
}
.WebAccessibilityButton {
position: fixed;
bottom: 2%;
left: 2%;
background: var(--accent-color, #30a0fc);
width: 50px;
height: 50px;
display: flex;
align-items: center;
padding: 1px;
justify-content: center;
color: white;
border-radius: 50%;
z-index: 88888;
cursor: pointer;
}
.WebAccessibilityButton a {
line-height: 0;
}
.WebAccessibilityControl {
position: fixed;
left: -100%;
top: 0;
z-index: 99999;
width: clamp(20vw, 350px, 100vw);
height: 100vh;
background: rgb(230 230 230);
box-shadow: 0.3rem 0 0.8rem #b7b7b7;
transition: all linear 0.3s;
}
.WebAccessibilityControl.active {
left: 0;
}
.WebAccessibilityControl .HeadTitle {
text-align: center;
display: flex;
margin-top: 0.5rem;
font-size: 1.3rem;
font-weight: 500;
color: black;
justify-content: center;
align-items: center;
}
.WebAccessibilityControl .HeadTitle span {
position: relative
}
.WebAccessibilityControl .HeadTitle span:before,
.WebAccessibilityControl .HeadTitle span:after {
content: '';
position: absolute;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: var(--accent-color, #30a0fc);
top: 50%;
transform: translateY(-50%);
}
.WebAccessibilityControl .HeadTitle span:before {
right: -1rem
}
.WebAccessibilityControl .HeadTitle span:after {
left: -1rem
}
.WebAccessibilityControl .Controls {
padding: 1rem;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
gap: 0.5rem;
}
.WebAccessibilityControl .Controls .Control-Item {
flex: 1 0 calc(50% - 0.5rem);
display: flex;
align-items: center;
justify-content: center;
width: 50%;
flex-direction: column;
gap: 0.5rem;
cursor: pointer;
background: #ffffff;
border-radius: 0.5rem;
border: 0.2rem solid transparent;
transition: all linear 0.2s;
padding: 0.5rem;
position: relative;
}
.WebAccessibilityControl .Controls .Control-Item:not(.Color):is(:hover, .active) {
border-color: var(--accent-color, #30a0fc);
}
.WebAccessibilityControl .Controls .Control-Item:where(.Color, .ResetButton, .WebAccessibilityManagerButton) {
flex: 1 0 100%;
height: 5vh;
display: flex;
gap: 0.7rem;
width: 100%;
flex-direction: row;
border: 0.2rem solid transparent;
}
.WebAccessibilityControl .Controls .Control-Item:where(.ResetButton, .WebAccessibilityManagerButton) {
background: var(--accent-color, #30a0fc);
color: white;
text-decoration: none;
}
.WebAccessibilityControl .Controls .Control-Item:where(.ResetButton, .WebAccessibilityManagerButton):is(:hover) {
border-color: white !important;
}
.WebAccessibilityControl .Controls .Control-Item.Color .color-option {
flex: 0 0 auto;
width: 2rem;
height: 2rem;
outline: 0.1rem solid #777;
outline-offset: 0.1rem;
cursor: pointer;
position: relative
}
.WebAccessibilityControl .Controls .Control-Item.Color .color-option.selected:after {
content: '';
width: 32%;
height: 60%;
display: block;
position: absolute;
border: 0 solid white;
top: 40%;
right: 50%;
transform: translate(50%, -50%) rotate(45deg);
transform-origin: center;
border-bottom-width: 1px;
border-right-width: 1px;
}
.WebAccessibilityControl .Controls .Control-Item .icon {
width: 2.5rem;
height: 4vh;
background-color: #000;
mask-size: contain;
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
mask-position: center;
}
.WebAccessibilityControl .Controls .Control-Item.active .icon {
background: var(--accent-color, #30a0fc);
}
.WebAccessibilityControl .Controls .Control-Item .activeated {
position: absolute;
width: 1.3rem;
height: 1.3rem;
left: 0.2rem;
top: 0.2rem;
background: #10ac02;
border-radius: 50%;
color: white;
padding: 0.3rem;
}
.WebAccessibilityControl .Controls .Control-Item .ProgressStatus {
display: flex;
height: 0.3rem;
width: 100%;
gap: 0.4rem;
}
.WebAccessibilityControl .Controls .Control-Item .ProgressStatus>* {
flex: 1 0 auto;
}
.Control-Item .ProgressStatus span {
background: transparent;
transition: all linear 0.2s;
}
.Control-Item.step1 .ProgressStatus span:nth-child(1) {
background: var(--accent-color, #30a0fc);
}
.Control-Item.step2 .ProgressStatus span:nth-child(-n+2) {
background: var(--accent-color, #30a0fc);
}
.Control-Item.step3 .ProgressStatus span:nth-child(-n+3) {
background: var(--accent-color, #30a0fc);
}
.WebAccessibilityControl .Controls .Control-Item.Contrast .icon {
mask-image: url('data:image/svg+xml;utf-8,');
-webkit-mask-image: url('data:image/svg+xml;utf-8,')
}
.WebAccessibilityControl .Controls .Control-Item.Contrast.step1 .icon {
mask-image: url('data:image/svg+xml;utf-8,');
-webkit-mask-image: url('data:image/svg+xml;utf-8,')
}
.WebAccessibilityControl .Controls .Control-Item.Contrast.step2 .icon {
mask-image: url('data:image/svg+xml;utf-8,');
-webkit-mask-image: url('data:image/svg+xml;utf-8,')
}
.WebAccessibilityControl .Controls .Control-Item.Contrast.step3 .icon {
mask-image: url('data:image/svg+xml;utf-8,');
-webkit-mask-image: url('data:image/svg+xml;utf-8,')
}
.WebAccessibilityControl .Controls .Control-Item.Links .icon {
mask-image: url('data:image/svg+xml;utf-8,');
-webkit-mask-image: url('data:image/svg+xml;utf-8,');
}
.WebAccessibilityControl .Controls .Control-Item.FontSize .icon {
mask-image: url('data:image/svg+xml;utf-8,');
-webkit-mask-image: url('data:image/svg+xml;utf-8,')
}
.WebAccessibilityControl .Controls .Control-Item.FontSize.step1 .icon {
width: 2.3rem;
}
.WebAccessibilityControl .Controls .Control-Item.FontSize.step2 .icon {
width: 2.5rem;
}
.WebAccessibilityControl .Controls .Control-Item.FontSize.step3 .icon {
width: 2.7rem;
}
.WebAccessibilityControl .Controls .Control-Item.LetterSpace .icon {
mask-image: url('data:image/svg+xml;utf-8,');
-webkit-mask-image: url('data:image/svg+xml;utf-8,')
}
.WebAccessibilityControl .Controls .Control-Item.LetterSpace.step1 .icon {
mask-image: url('data:image/svg+xml;utf-8,');
-webkit-mask-image: url('data:image/svg+xml;utf-8,');
width: 1.7rem;
}
.WebAccessibilityControl .Controls .Control-Item.LetterSpace.step2 .icon {
mask-image: url('data:image/svg+xml;utf-8,');
-webkit-mask-image: url('data:image/svg+xml;utf-8,')
}
.WebAccessibilityControl .Controls .Control-Item.LetterSpace.step3 .icon {
mask-image: url('data:image/svg+xml;utf-8,');
-webkit-mask-image: url('data:image/svg+xml;utf-8,');
width: 4.5rem;
}
.WebAccessibilityControl .Controls .Control-Item.Anim .icon {
mask-image: url('data:image/svg+xml;utf-8,');
-webkit-mask-image: url('data:image/svg+xml;utf-8,')
}
.WebAccessibilityControl .Controls .Control-Item.Anim.active .icon {
mask-image: url('data:image/svg+xml;utf-8,');
-webkit-mask-image: url('data:image/svg+xml;utf-8,')
}
.WebAccessibilityControl .Controls .Control-Item.Images .icon {
mask-image: url('data:image/svg+xml;utf-8,');
-webkit-mask-image: url('data:image/svg+xml;utf-8,')
}
.WebAccessibilityControl .Controls .Control-Item.Fonts .icon {
mask-image: url('data:image/svg+xml;utf-8,');
-webkit-mask-image: url('data:image/svg+xml;utf-8,')
}
.WebAccessibilityControl .Controls .Control-Item.Fonts.active .icon {
mask-image: url('data:image/svg+xml;utf-8,');
-webkit-mask-image: url('data:image/svg+xml;utf-8,')
}
.WebAccessibilityControl .Controls .Control-Item.Mouse .icon {
mask-image: url('data:image/svg+xml;utf-8,');
-webkit-mask-image: url('data:image/svg+xml;utf-8,')
}
.WebAccessibilityControl .Controls .Control-Item.Mouse.step1 .icon {
mask-image: url('data:image/svg+xml;utf-8,');
-webkit-mask-image: url('data:image/svg+xml;utf-8,')
}
.WebAccessibilityControl .Controls .Control-Item.Mouse.step2 .icon {
mask-image: url('data:image/svg+xml;utf-8,');
-webkit-mask-image: url('data:image/svg+xml;utf-8,')
}
.WebAccessibilityControl .Controls .Control-Item.Mouse.step3 .icon {
mask-image: url('data:image/svg+xml;utf-8,');
-webkit-mask-image: url('data:image/svg+xml;utf-8,')
}
.WebAccessibilityControl .Controls .Control-Item.LineHeight .icon {
mask-image: url('data:image/svg+xml;utf-8,');
-webkit-mask-image: url('data:image/svg+xml;utf-8,')
}
.WebAccessibilityControl .Controls .Control-Item.LineHeight.step1 .icon {
mask-image: url('data:image/svg+xml;utf-8,');
-webkit-mask-image: url('data:image/svg+xml;utf-8,')
}
.WebAccessibilityControl .Controls .Control-Item.LineHeight.step2 .icon {
mask-image: url('data:image/svg+xml;utf-8,');
-webkit-mask-image: url('data:image/svg+xml;utf-8,')
}
.WebAccessibilityControl .Controls .Control-Item.LineHeight.step3 .icon {
mask-image: url('data:image/svg+xml;utf-8,');
-webkit-mask-image: url('data:image/svg+xml;utf-8,')
}
.WebAccessibilityControl .Controls .Control-Item.Saturate .icon {
mask-image: url('data:image/svg+xml;utf-8,');
-webkit-mask-image: url('data:image/svg+xml;utf-8,')
}
.WebAccessibilityControl .Controls .Control-Item.Zoom .icon {
mask-image: url("data:image/svg+xml,%3Csvg fill='%23000000' height='800px' width='800px' version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 490.4 490.4' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M484.1,454.796l-110.5-110.6c29.8-36.3,47.6-82.8,47.6-133.4c0-116.3-94.3-210.6-210.6-210.6S0,94.496,0,210.796 s94.3,210.6,210.6,210.6c50.8,0,97.4-18,133.8-48l110.5,110.5c12.9,11.8,25,4.2,29.2,0C492.5,475.596,492.5,463.096,484.1,454.796z M41.1,210.796c0-93.6,75.9-169.5,169.5-169.5s169.6,75.9,169.6,169.5s-75.9,169.5-169.5,169.5S41.1,304.396,41.1,210.796z'/%3E%3C/g%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='%23000000' height='800px' width='800px' version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 490.4 490.4' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M484.1,454.796l-110.5-110.6c29.8-36.3,47.6-82.8,47.6-133.4c0-116.3-94.3-210.6-210.6-210.6S0,94.496,0,210.796 s94.3,210.6,210.6,210.6c50.8,0,97.4-18,133.8-48l110.5,110.5c12.9,11.8,25,4.2,29.2,0C492.5,475.596,492.5,463.096,484.1,454.796z M41.1,210.796c0-93.6,75.9-169.5,169.5-169.5s169.6,75.9,169.6,169.5s-75.9,169.5-169.5,169.5S41.1,304.396,41.1,210.796z'/%3E%3C/g%3E%3C/svg%3E");
}
.WebAccessibilityControl .Controls .Control-Item.BlackWhite .icon {
mask-image: url("data:image/svg+xml,%3Csvg fill='%23000000' height='800px' width='800px' version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 60 60' xml:space='preserve'%3E%3Cpath d='M42,12H18C8.075,12,0,20.075,0,30s8.075,18,18,18h24c9.925,0,18-8.075,18-18S51.925,12,42,12z M18,38c0,0.553-0.447,1-1,1 s-1-0.447-1-1V22c0-0.553,0.447-1,1-1s1,0.447,1,1V38z M42,43c-7.168,0-13-5.832-13-13s5.832-13,13-13s13,5.832,13,13 S49.168,43,42,43z'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='%23000000' height='800px' width='800px' version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 60 60' xml:space='preserve'%3E%3Cpath d='M42,12H18C8.075,12,0,20.075,0,30s8.075,18,18,18h24c9.925,0,18-8.075,18-18S51.925,12,42,12z M18,38c0,0.553-0.447,1-1,1 s-1-0.447-1-1V22c0-0.553,0.447-1,1-1s1,0.447,1,1V38z M42,43c-7.168,0-13-5.832-13-13s5.832-13,13-13s13,5.832,13,13 S49.168,43,42,43z'/%3E%3C/svg%3E");
}
.big-cursor {
cursor: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyOS4xODhweCIgaGVpZ2h0PSI0My42MjVweCIgdmlld0JveD0iMCAwIDI5LjE4OCA0My42MjUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI5LjE4OCA0My42MjUiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHN0cm9rZT0iI0Q5REFEOSIgc3Ryb2tlLXdpZHRoPSIxLjE0MDYiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRzPSIyLjgsNC41NDkgMjYuODQ3LDE5LjkwMiAxNi45NjQsMjIuNzAxIDI0LjIzOSwzNy43NDkgMTguMjc4LDQyLjAxNyA5Ljc0MSwzMC43MjQgMS4xMzgsMzUuODA5ICIvPjxnPjxnPjxnPjxwYXRoIGZpbGw9IiMyMTI2MjciIGQ9Ik0yOS4xNzUsMjEuMTU1YzAuMDcxLTAuNjEzLTAuMTY1LTEuMjUzLTAuNjM1LTEuNTczTDIuMTY1LDAuMjU4Yy0wLjQyNC0wLjMyLTAuOTg4LTAuMzQ2LTEuNDM1LTAuMDUzQzAuMjgyLDAuNDk3LDAsMS4wMywwLDEuNjE3djM0LjE3MWMwLDAuNjEzLDAuMzA2LDEuMTQ2LDAuNzc2LDEuNDM5YzAuNDcxLDAuMjY3LDEuMDU5LDAuMjEzLDEuNDgyLTAuMTZsNy40ODItNi4zNDRsNi44NDcsMTIuMTU1YzAuMjU5LDAuNDgsMC43MjksMC43NDYsMS4yLDAuNzQ2YzAuMjM1LDAsMC40OTQtMC4wOCwwLjcwNi0wLjIxM2w2Ljk4OC00LjU4NWMwLjMyOS0wLjIxMywwLjU2NS0wLjU4NiwwLjY1OS0xLjAxM2MwLjA5NC0wLjQyNiwwLjAyNC0wLjg4LTAuMTg4LTEuMjI2bC02LjM3Ni0xMS4zODJsOC42MTEtMi43NDVDMjguNzA1LDIyLjI3NCwyOS4xMDUsMjEuNzY4LDI5LjE3NSwyMS4xNTV6IE0xNi45NjQsMjIuNzAxYy0wLjQyNCwwLjEzMy0wLjc3NiwwLjUwNi0wLjk0MSwwLjk2Yy0wLjE2NSwwLjQ4LTAuMTE4LDEuMDEzLDAuMTE4LDEuNDM5bDYuNTg4LDExLjc4MWwtNC41NDEsMi45ODVsLTYuODk0LTEyLjMxNWMtMC4yMTItMC4zNzMtMC41NDEtMC42NC0wLjk0MS0wLjcyYy0wLjA5NC0wLjAyNy0wLjE2NS0wLjAyNy0wLjI1OS0wLjAyN2MtMC4zMDYsMC0wLjU4OCwwLjEwNy0wLjg0NywwLjMyTDIuOCwzMi41OVY0LjU0OWwyMS41OTksMTUuODA2TDE2Ljk2NCwyMi43MDF6Ii8+PC9nPjwvZz48L2c+PC9nPjwvc3ZnPg==), auto !important
}
.reading-mask {
position: fixed;
width: 100%;
height: 150px;
background: transparent;
border: 0.2rem solid var(--accent-color, red);
left: 0;
pointer-events: none;
z-index: 9999;
}
.reading-mask:before {
content: '';
height: 100vh;
display: block;
bottom: 100%;
position: absolute;
width: 100vw;
background: rgba(0, 0, 0, 0.5);
}
.reading-mask:after {
content: '';
height: 100vh;
display: block;
top: 100%;
position: absolute;
width: 100vw;
background: rgba(0, 0, 0, 0.5);
}
.reading-guide {
position: fixed;
width: 40%;
height: 4px;
background: rgba(255, 0, 0, 0.7);
pointer-events: none;
z-index: 9999
}
.ruler-pointer {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 100%;
border-bottom: 15px solid rgba(255, 0, 0, 0.7);
border-left: 15px solid transparent;
border-right: 15px solid transparent;
width: 0;
height: 0;
margin: 0;
}