288 lines
4.9 KiB
SCSS
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;
|
|
}
|
|
}
|