2024-04-15 17:57:13 +02:00

288 lines
4.9 KiB
SCSS

// Global component styles
html {
position: relative;
min-height: 100%;
}
body {
height: 100%;
}
a {
&:focus {
outline: none;
}
}
.homeBlock i{
font-size: 100px;
color: #3F9464;
opacity: 0.5;
}
.homeBlock i:hover{
opacity: 1;
font-size: 110px;
}
.homeBlock span{
font-weight: bold;
}
.showWhenDone {
display: none;
}
.row.ip.deleted {
background-color: rgba(234, 14, 14, 0.35);
}
.row.ip.whitelisted {
background-color: rgba(63, 191, 63, 0.35);
}
.queueRow.whitelisted {
background-color: rgba(63, 191, 63, 0.35);
}
.whitelisted{
background-color: rgba(63, 191, 63, 0.35);
}
/** FourbisButton **/
.fourbisButton {
width: 100%;
color: white;
font-weight: bold;
background-color: #4CB078;
opacity: 0.5;
}
.fourbisButton:hover {
opacity: 1;
}
.fourbisButton:disabled {
background-image: linear-gradient(45deg, #4cb078 15%, #58d18e 15%, #58d18e 50%, #4cb078 50%, #4cb078 65%, #58d18e 65%, #58d18e 100%);
background-size: 28.28px 28.28px;
}
.fourbisButton:disabled:hover {
opacity: 0.5;
background-image: linear-gradient(45deg, #4cb078 15%, #58d18e 15%, #58d18e 50%, #4cb078 50%, #4cb078 65%, #58d18e 65%, #58d18e 100%);
background-size: 28.28px 28.28px;
}
/** FourbisButtonDanger **/
.fourbisButtonDanger {
width: 100%;
color: white;
font-weight: bold;
background-color: #ff0000;
opacity: 0.5;
}
.fourbisButtonDanger:hover {
opacity: 1;
}
.fourbisButtonDanger:disabled {
background-image: linear-gradient(45deg, #ff0000 15%, #c20808 15%, #c20808 50%, #ff0000 50%, #ff0000 65%, #c20808 65%, #c20808 100%);
background-size: 28.28px 28.28px;
}
.fourbisButtonDanger:disabled:hover {
opacity: 0.5;
background-image: linear-gradient(45deg, #ff0000 15%, #c20808 15%, #c20808 50%, #ff0000 50%, #ff0000 65%, #c20808 65%, #c20808 100%);
background-size: 28.28px 28.28px;
}
/** FourbisButtonRefresh **/
.fourbisButtonRefresh {
width: 100%;
color: white;
font-weight: bold;
background-color: #0094C7;
opacity: 0.5;
}
.fourbisButtonRefresh:hover {
opacity: 1;
}
.fourbisButtonRefresh:disabled {
background-image: linear-gradient(45deg, #0094c7 25%, #007ba8 25%, #007ba8 50%, #0094c7 50%, #0094c7 75%, #007ba8 75%, #007ba8 100%);
background-size: 28.28px 28.28px;
}
.fourbisButtonRefresh:disabled:hover {
opacity: 0.5;
background-image: linear-gradient(45deg, #0094c7 25%, #007ba8 25%, #007ba8 50%, #0094c7 50%, #0094c7 75%, #007ba8 75%, #007ba8 100%);
background-size: 28.28px 28.28px;
}
.portalTitle {
color: $primary;
font-size: xx-large;
font-weight: bold;
}
.loadingDiv {
align-content: center;
text-align: center;
height: 70px;
background-color: #8fd8ad;
border-left: 2px solid #4CB07A;
border-right: 2px solid #4CB078;
}
.fourbisContainer {
border: 2px solid #4CB078;
background-color: white;
margin-top: 20px;
padding: 10px;
}
.ContentBlock {
display: inline-block;
border: 1px solid black;
text-align: center;
background-color: #4CB078;
height: 300px;
transition: 0.3s;
}
.ContentBlock:hover {
transform: scale(1.1);
cursor: pointer;
}
.ContentBlock h3 {
font-weight: bold;
}
#fail2banDashboard {
padding-left: 17px;
list-style-type: decimal;
}
#loading {
align-content: center;
text-align: center;
}
/** LOADER **/
.lds-ellipsis {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-ellipsis div {
position: absolute;
top: 33px;
width: 13px;
height: 13px;
border-radius: 50%;
background: #419766;
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
left: 8px;
animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
left: 8px;
animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
left: 32px;
animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
left: 56px;
animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes lds-ellipsis3 {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@keyframes lds-ellipsis2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(24px, 0);
}
}
// Main page wrapper
#wrapper {
display: flex;
#content-wrapper {
background-color: #E5E5E5;
width: 100%;
overflow-x: hidden;
#content {
flex: 1 0 auto;
}
}
}
// Set container padding to match gutter width instead of default 15px
.container,
.container-fluid {
padding-left: $grid-gutter-width;
padding-right: $grid-gutter-width;
}
// Scroll to top button
.scroll-to-top {
position: fixed;
right: 1rem;
bottom: 1rem;
display: none;
width: 2.75rem;
height: 2.75rem;
text-align: center;
color: $white;
background: fade-out($gray-800, .5);
line-height: 46px;
&:focus,
&:hover {
color: white;
}
&:hover {
background: $gray-800;
}
i {
font-weight: 800;
}
}