Aljaz Grilc
159cd51684
Refactor the click detection logic to check if the click was inside the rectangle of the highlight element, rather than relying on stored rectangle coordinates. Additionally, this update eliminates the need to attach event listeners to the entire window or the parent elements of the host element, simplifying the event handling and potentially improving performance.
90 lines
1.6 KiB
CSS
90 lines
1.6 KiB
CSS
/* TODO: Dark mode theme */
|
|
|
|
/* Mistake types styles */
|
|
.bes-typo-mistake {
|
|
border-bottom: 2px solid red;
|
|
position: absolute;
|
|
z-index: 3;
|
|
cursor: text;
|
|
/* pointer-events: none; */
|
|
}
|
|
|
|
.bes-correction-panel-parent {
|
|
position: relative;
|
|
overflow: visible;
|
|
float: left;
|
|
display: inline;
|
|
width: 0px;
|
|
height: 0px;
|
|
border: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.bes-correction-panel {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-color: transparent;
|
|
color: transparent;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.bes-correction-panel-scroll {
|
|
position: relative;
|
|
}
|
|
|
|
.bes-status-div {
|
|
position: absolute;
|
|
z-index: 3;
|
|
}
|
|
|
|
.bes-status-icon {
|
|
position: relative;
|
|
right: 5px;
|
|
bottom: 5px;
|
|
width: 30px;
|
|
height: 30px;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
cursor: help;
|
|
}
|
|
|
|
.bes-status-icon.bes-status-success {
|
|
background-image: url('images/checkmark-svgrepo-com.svg');
|
|
}
|
|
|
|
.bes-status-icon.bes-status-loading {
|
|
background-image: url('images/loading-svgrepo-com.svg');
|
|
}
|
|
|
|
.bes-status-icon.bes-status-error {
|
|
background-image: url('images/error-svgrepo-com.svg');
|
|
}
|
|
|
|
.bes-status-icon.bes-status-mistakes {
|
|
background-image: url('images/mistake-svgrepo-com.svg');
|
|
}
|
|
|
|
/* TODO: Styles below should be removed after testing period is over */
|
|
.resizable {
|
|
overflow-x: scroll;
|
|
position: relative;
|
|
display: inline-block;
|
|
border: 1px solid #ccc;
|
|
width: 300px;
|
|
height: 400px;
|
|
border-radius: 3px;
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
.mock-content {
|
|
width: 1000px;
|
|
height: 600px;
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|