96cc4610dd
Introduce a page number display to the pagination controls for better navigation transparency. Update button styles to use CSS variables for improved theme consistency and maintainability.
172 lines
3.4 KiB
SCSS
172 lines
3.4 KiB
SCSS
main .container {
|
|
padding: 0;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1300px;
|
|
}
|
|
|
|
.columnSection {
|
|
padding: 20px 0 20px 0;
|
|
max-width: 1300px;
|
|
}
|
|
|
|
.historyButtonContainer {
|
|
width: 80%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.historySearchContainer {
|
|
width: 20%;
|
|
box-sizing: border-box;
|
|
text-align: right;
|
|
position: relative;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.button-outer {
|
|
margin-right: 15px;
|
|
background: var(--history-link-color);
|
|
}
|
|
|
|
.button-outer.active {
|
|
color: var(--navlink-color);
|
|
}
|
|
|
|
#currentButton {
|
|
text-decoration: none;
|
|
color: var(--white);
|
|
background: var(--link-color);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
input.historySearch {
|
|
font-family: 'open-sans', sans-serif;
|
|
width: 260px;
|
|
border: 1px solid #DEDEDE;
|
|
padding: 9px 4px 9px 40px;
|
|
background: #DEDEDE url(/public/img/random/search.svg) no-repeat 10px;
|
|
background-size: 18px 18px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.searchButton {
|
|
vertical-align: -15px;
|
|
}
|
|
|
|
.historyTable {
|
|
font-family: 'open-sans', sans-serif;
|
|
margin-bottom: 20px;
|
|
width: 100%;
|
|
text-align: center;
|
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
|
border-radius: 5px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.dropdown-results {
|
|
font-family: 'open-sans', sans-serif;
|
|
position: absolute;
|
|
top: 35px;
|
|
left: 0;
|
|
width: 100%;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
background-color: #DEDEDE;
|
|
border: 1px solid #ddd;
|
|
border-top: none;
|
|
z-index: 1050;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
border-bottom-right-radius: 5px;
|
|
border-bottom-left-radius: 5px;
|
|
}
|
|
|
|
.dropdown-item {
|
|
padding: 8px 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dropdown-item:hover {
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.changePageButtons {
|
|
margin: 0 auto;
|
|
padding: 10px 0 30px 0;
|
|
}
|
|
|
|
.historyPageButton {
|
|
align-items: center;
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
border-radius: .25rem;
|
|
box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
|
|
box-sizing: border-box;
|
|
background-color: var(--history-page-button-background);
|
|
color: var(--font-color);
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
font-family: 'opensans', sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
justify-content: center;
|
|
line-height: 1.25;
|
|
margin: 0 5px 0 5px;
|
|
min-height: 3rem;
|
|
padding: calc(.875rem - 1px) calc(1.5rem - 1px);
|
|
position: relative;
|
|
text-decoration: none;
|
|
transition: all 250ms;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
touch-action: manipulation;
|
|
vertical-align: baseline;
|
|
width: auto;
|
|
}
|
|
|
|
.historyPageButton.active:hover,
|
|
.historyPageButton.active:focus {
|
|
border-color: rgba(0, 0, 0, 0.15);
|
|
box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
|
|
color: var(--font-color-hover);
|
|
}
|
|
|
|
.historyPageButton.active:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.historyPageButton.active:active {
|
|
border-color: rgba(0, 0, 0, 0.15);
|
|
box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px;
|
|
color: var(--font-color-hover);
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.historyPageButton.disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
background-color: var(--color-quaternary);
|
|
color: var(--font-color);
|
|
box-shadow: none;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Prevent hover effects on disabled buttons */
|
|
.historyPageButton.disabled:hover,
|
|
.historyPageButton.disabled:focus {
|
|
border-color: rgba(0, 0, 0, 0.1);
|
|
box-shadow: none;
|
|
transform: none;
|
|
color: #999;
|
|
}
|
|
|
|
.pageNumber {
|
|
font-family: 'open-sans', sans-serif;
|
|
margin: 0 25px 0 25px;
|
|
color: var(--font-color);
|
|
transition: 0.5s ease;
|
|
}
|
|
|