Created
April 15, 2018 21:19
-
-
Save seanvree/93379cd8878d4ea31307ac7d844180f6 to your computer and use it in GitHub Desktop.
main.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Monitorr CSS file | |
| https://github.com/Monitorr/Monitorr | |
| */ | |
| /* @import url(https://fonts.googleapis.com/css?family=Roboto:400); */ | |
| @import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css); | |
| body { | |
| opacity: 1; | |
| transition: 2s opacity; | |
| background-color: #1F1F1F; | |
| /* font-family: 'Lato', sans-serif; */ | |
| font-family: 'Roboto:400', sans-serif; | |
| color: #555; | |
| align-items: center; | |
| align-content: center; | |
| -webkit-font-smoothing: antialiased; | |
| /* overflow-y: auto; */ | |
| /* overflow-x: hidden; */ | |
| } | |
| body.fade-out { | |
| opacity: 0; | |
| transition: none; | |
| } | |
| /* | |
| body::-webkit-scrollbar { | |
| width: 10px; | |
| background-color: #252525; | |
| } | |
| body::-webkit-scrollbar-track { | |
| -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); | |
| box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); | |
| border-radius: 10px; | |
| background-color: #252525; | |
| } | |
| body::-webkit-scrollbar-thumb { | |
| border-radius: 10px; | |
| -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); | |
| box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); | |
| background-color: #8E8B8B; | |
| } | |
| */ | |
| @media (min-width: 858px) { | |
| html { | |
| font-size: 12px; | |
| } | |
| } | |
| @media (min-width: 780px) { | |
| html { | |
| font-size: 11px; | |
| } | |
| } | |
| @media (min-width: 702px) { | |
| html { | |
| font-size: 10px; | |
| } | |
| } | |
| @media (min-width: 724px) { | |
| html { | |
| font-size: 9px; | |
| } | |
| } | |
| @media (max-width: 623px) { | |
| html { | |
| font-size: 8px; | |
| } | |
| } | |
| @media screen and (max-width: 5000px) { | |
| html { | |
| font-size: 15px; | |
| } | |
| } | |
| @media screen and (max-width: 1800px) { | |
| html { | |
| font-size: 15px; | |
| } | |
| } | |
| @media screen and (max-width: 1600px) { | |
| html { | |
| font-size: 15px; | |
| } | |
| } | |
| @media screen and (max-width: 1400px) { | |
| html { | |
| font-size: 15px; | |
| } | |
| } | |
| @media screen and (max-width: 1200px) { | |
| html { | |
| font-size: 14px; | |
| } | |
| } | |
| @media screen and (max-width: 1024px) { | |
| html { | |
| font-size: 13px; | |
| } | |
| } | |
| @media screen and (max-width: 950px) { | |
| html { | |
| font-size: 11px; | |
| } | |
| } | |
| @media screen and (max-width: 650px) { | |
| html { | |
| font-size: 9px; | |
| } | |
| } | |
| @media screen and (max-width: 480px) { | |
| html { | |
| font-size: 7px; | |
| } | |
| } | |
| @media screen and (max-width: 300px) { | |
| html { | |
| font-size: 5px; | |
| } | |
| } | |
| @media screen and (max-width: 150px) { | |
| html { | |
| font-size: 4px; | |
| } | |
| } | |
| @media screen and (max-width: 50px) { | |
| html { | |
| font-size: 3px; | |
| } | |
| } | |
| /* Titles */ | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5 { | |
| font-family: 'Lato', sans-serif; | |
| color: transparent; | |
| } | |
| h6 { | |
| font-family: 'Lato', sans-serif; | |
| font-weight: 300; | |
| color: white; | |
| } | |
| h1 { | |
| font-size: 40px; | |
| font-weight: 400; | |
| } | |
| h3 { | |
| color: #95a5a6; | |
| font-weight: 400; | |
| } | |
| h4 { | |
| color: #FFFFFF; | |
| font-size: 20px; | |
| font-weight: 500; | |
| } | |
| #datdirerror { | |
| color: red; | |
| text-align: center; | |
| font-size: 2rem; | |
| font-weight: 500; | |
| cursor: default; | |
| } | |
| /* Paragraph & Typographic */ | |
| p { | |
| margin: 0 | |
| } | |
| .centered { | |
| text-align: center; | |
| } | |
| br { | |
| line-height: 5px; | |
| } | |
| span { | |
| cursor: pointer; | |
| } | |
| /* Links */ | |
| a { | |
| text-decoration: none; | |
| color: #f2f2f2; | |
| word-wrap: break-word; | |
| -webkit-transition: all .2s ease-in-out; | |
| -moz-transition: all .2s ease-in-out; | |
| -ms-transition: all .2s ease-in-out; | |
| -o-transition: all .2s ease-in-out; | |
| transition: all .2s ease-in-out; | |
| } | |
| hr { | |
| display: block; | |
| height: 1px; | |
| border: 0; | |
| border-top: 1px solid #ccc; | |
| margin: 1em 0; | |
| padding: 0; | |
| } | |
| select { | |
| cursor: pointer; | |
| color: black !important; | |
| background: rgb(200, 200, 200) !important; | |
| } | |
| select:focus { | |
| color: black; | |
| background: white !important; | |
| } | |
| select:hover { | |
| color: black !important; | |
| background: white !important; | |
| } | |
| input[type=text] { | |
| color: black; | |
| background: rgb(200, 200, 200); | |
| } | |
| input[type=text]:focus { | |
| color: black; | |
| background: white !important; | |
| } | |
| input[type=text]:hover { | |
| color: black; | |
| background: white; | |
| } | |
| input[type=password] { | |
| color: black; | |
| background: rgb(200, 200, 200); | |
| } | |
| input[type=password]:focus { | |
| color: black; | |
| background: white !important; | |
| } | |
| input[type=password]:hover { | |
| color: black; | |
| background: white !important; | |
| } | |
| input[type=email] { | |
| color: black; | |
| background: rgb(200, 200, 200) !important; | |
| } | |
| input[type=email]:focus { | |
| color: black; | |
| background: white !important; | |
| } | |
| input[type=email]:hover { | |
| color: black !important; | |
| background: white !important; | |
| } | |
| /* Top Margin */ | |
| #summary { | |
| position: fixed; | |
| width: 100%; | |
| background-color: red; | |
| text-align: center; | |
| color: white; | |
| text-shadow: 1px 1px black; | |
| margin-top: -1.5rem; | |
| z-index: 1000; | |
| cursor: default; | |
| } | |
| #ajaxtimestamp { | |
| position: fixed; | |
| margin-top: -2rem; | |
| color: yellow; | |
| z-index: 1000; | |
| cursor: default; | |
| } | |
| #ajaxmarquee { | |
| position: fixed; | |
| margin-top: -2rem; | |
| margin-left: 1rem; | |
| color: yellow; | |
| z-index: 1000; | |
| cursor: default; | |
| } | |
| #header { | |
| position: static; | |
| display: table; | |
| width: 100%; | |
| table-layout: fixed; | |
| border-spacing: 1px; | |
| margin-bottom: 1rem; | |
| margin-top: 2rem; | |
| padding-left: .5rem | |
| } | |
| #headermin { | |
| position: static; | |
| display: table; | |
| width: 100%; | |
| height: 65px !important; | |
| table-layout: fixed; | |
| border-spacing: 1px; | |
| margin-top: 10px; | |
| padding-right: 1rem; | |
| padding-left: .5rem; | |
| line-height: 1; | |
| } | |
| @media screen and (min-width: 100px) { | |
| #headermin { | |
| height: 65px !important; | |
| } | |
| } | |
| .Column { | |
| display: table-cell; | |
| } | |
| table, | |
| th, | |
| td { | |
| padding-left: 5px; | |
| padding-right: 5px; | |
| } | |
| tbody { | |
| background-color: transparent; | |
| cursor: pointer; | |
| } | |
| #left { | |
| width: auto; | |
| text-align: left; | |
| vertical-align: middle; | |
| } | |
| #center { | |
| width: auto; | |
| position: relative; | |
| text-align: center; | |
| vertical-align: middle; | |
| left: 50%; | |
| transform: translate(-50%); | |
| z-index: 100; | |
| } | |
| #centertext { | |
| display: flex; | |
| white-space: nowrap; | |
| justify-content: center; | |
| direction: rtl; | |
| padding: 0px; | |
| padding-top: .5rem; | |
| } | |
| #right { | |
| width: auto; | |
| vertical-align: middle; | |
| color: #8E8B8B; | |
| } | |
| .navbar-brand { | |
| vertical-align: middle; | |
| margin: 0; | |
| background-color: rgba(31, 31, 31, 0.500); | |
| padding: 0px; | |
| color: #ffffff; | |
| text-shadow: 0 0 15px #FF0104; | |
| outline: 0; | |
| font-size: 3vw; | |
| font-weight: 500; | |
| } | |
| @media screen and (min-width: 1024px) { | |
| .navbar-brand { | |
| font-size: 48px; | |
| } | |
| } | |
| .navbar-brand:hover, | |
| .navbar-brand:focus { | |
| color: #ffffff; | |
| text-shadow: 0 0 20px #FF0104; | |
| text-decoration: none; | |
| outline: 0; | |
| font-weight: 500; | |
| } | |
| .navbar-brand:before, | |
| .navbar-brand:after { | |
| -webkit-transition: all .2s ease-in; | |
| -moz-transition: all .2s ease-in; | |
| -ms-transition: all .2s ease-in; | |
| -o-transition: all .2s ease-in; | |
| transition: all .2s ease-in; | |
| } | |
| .navbar-default { | |
| background-color: #1F1F1F; | |
| border-color: transparent; | |
| font-weight: 500; | |
| } | |
| .navbar-default .navbar-brand { | |
| color: white; | |
| font-weight: 500; | |
| } | |
| .navbar-default .navbar-nav>li>a { | |
| color: white; | |
| font-weight: 500; | |
| } | |
| .col-centered { | |
| float: none; | |
| } | |
| /* Helpers */ | |
| .mt { | |
| background-color: transparent; | |
| } | |
| .form-control { | |
| width: auto; | |
| } | |
| /* TILES */ | |
| .container { | |
| padding-right: 1rem; | |
| padding-left: 1rem; | |
| align-content: center; | |
| align-items: center; | |
| max-width: 90%; | |
| } | |
| #services { | |
| background: #1F1F1F; | |
| width: 90%; | |
| } | |
| .services { | |
| margin-top: 1vw; | |
| } | |
| .row { | |
| background-color: transparent; | |
| padding: 0; | |
| text-align: center; | |
| text-align: -webkit-center; | |
| } | |
| .col-lg-4 { | |
| position: relative; | |
| vertical-align: top; | |
| background-color: #3d3d3d; | |
| border-radius: 1rem; | |
| box-shadow: 5px 5px 5px black; | |
| margin: 1rem 1rem 1.5rem 1rem; | |
| padding-left: .5rem; | |
| padding-right: .5rem; | |
| width: 10rem; | |
| height: 13rem; | |
| color: #ffffff; | |
| } | |
| #statusloop { | |
| display: inline-flex; | |
| flex-flow: wrap; | |
| margin: 0 auto; | |
| justify-content: center; | |
| } | |
| .servicetile { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 100%; | |
| transform: translate(-50%, -50%); | |
| -webkit-transition: all .2s ease-in-out; | |
| -moz-transition: all .2s ease-in-out; | |
| -ms-transition: all .2s ease-in-out; | |
| -o-transition: all .2s ease-in-out; | |
| transition: all .2s ease-in-out; | |
| text-shadow: 1px 1px black; | |
| } | |
| .servicetile:hover, | |
| .servicetile:focus { | |
| color: #ffffff; | |
| text-shadow: 0 0 20px #FF0104; | |
| text-decoration: none; | |
| outline: 0; | |
| font-weight: 600; | |
| -webkit-transition: all .2s ease-in-out; | |
| -moz-transition: all .2s ease-in-out; | |
| -ms-transition: all .2s ease-in-out; | |
| -o-transition: all .2s ease-in-out; | |
| transition: all .2s ease-in-out; | |
| } | |
| .servicetileoffline { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 100%; | |
| transform: translate(-50%, -50%); | |
| -webkit-transition: all .2s ease-in-out; | |
| -moz-transition: all .2s ease-in-out; | |
| -ms-transition: all .2s ease-in-out; | |
| -o-transition: all .2s ease-in-out; | |
| transition: all .2s ease-in-out; | |
| text-shadow: 1px 1px black; | |
| } | |
| .servicetilenolink { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 100%; | |
| transform: translate(-50%, -50%); | |
| -webkit-transition: all .2s ease-in-out; | |
| -moz-transition: all .2s ease-in-out; | |
| -ms-transition: all .2s ease-in-out; | |
| -o-transition: all .2s ease-in-out; | |
| transition: all .2s ease-in-out; | |
| text-shadow: 1px 1px black; | |
| } | |
| #serviceimg { | |
| margin-bottom: 10%; | |
| } | |
| .serviceimg { | |
| height: 5.5rem; | |
| } | |
| #servicetitle { | |
| display: flex; | |
| flex-direction: column; | |
| height: 2rem; | |
| line-height: 100%; | |
| margin-bottom: 10%; | |
| padding-left: .4rem; | |
| padding-right: .4rem; | |
| vertical-align: middle; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| color: rgb(200, 200, 200); | |
| word-break: keep-all; | |
| overflow-wrap: normal; | |
| } | |
| #servicetitle:hover, | |
| #servicetitle:focus { | |
| color: #ffffff; | |
| text-shadow: 0 0 20px #FF0104; | |
| text-decoration: none; | |
| outline: 0; | |
| word-break: keep-all; | |
| font-weight: 600; | |
| -webkit-transition: all .2s ease-in-out; | |
| -moz-transition: all .2s ease-in-out; | |
| -ms-transition: all .2s ease-in-out; | |
| -o-transition: all .2s ease-in-out; | |
| transition: all .2s ease-in-out; | |
| } | |
| #servicetitlenolink { | |
| display: flex; | |
| flex-direction: column; | |
| height: 2rem; | |
| line-height: 100%; | |
| margin-bottom: 10%; | |
| padding-left: .4rem; | |
| padding-right: .4rem; | |
| vertical-align: middle; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| color: rgb(200, 200, 200); | |
| word-break: keep-all; | |
| overflow-wrap: normal; | |
| cursor: default; | |
| } | |
| #servicetitleoffline { | |
| display: flex; | |
| flex-direction: column; | |
| height: 2rem; | |
| line-height: 100%; | |
| margin-bottom: 10%; | |
| padding-left: .4rem; | |
| padding-right: .4rem; | |
| vertical-align: middle; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| color: rgb(200, 200, 200); | |
| word-break: keep-all; | |
| overflow-wrap: normal; | |
| cursor: default; | |
| } | |
| #servicetitleoffline:hover, | |
| #servicetitleoffline:focus { | |
| color: rgb(200, 200, 200); | |
| text-decoration: none; | |
| outline: 0; | |
| } | |
| .btnonline { | |
| margin-left: 1.5rem; | |
| margin-right: 1.5rem; | |
| -webkit-border-radius: 23px 22px 22px 23px/23px 23px 22px 22px; | |
| -moz-border-radius: 23px 22px 22px 23px/23px 23px 22px 22px; | |
| border-radius: 23px 22px 22px 23px/23px 23px 22px 22px; | |
| background-color: #42e846; | |
| -webkit-box-shadow: 0 5px 20px rgba(66, 232, 70, .7); | |
| -moz-box-shadow: 0 5px 20px rgba(66, 232, 70, .7); | |
| box-shadow: 0 5px 20px rgba(66, 232, 70, .7); | |
| color: #FFFFFF; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| text-shadow: 1px 1px grey; | |
| text-decoration: none; | |
| } | |
| .btonline:hover { | |
| text-decoration: none; | |
| } | |
| .btnoffline { | |
| margin-left: 1.5rem; | |
| margin-right: 1.5rem; | |
| -webkit-border-radius: 23px 22px 22px 23px/23px 23px 22px 22px; | |
| -moz-border-radius: 23px 22px 22px 23px/23px 23px 22px 22px; | |
| border-radius: 23px 22px 22px 23px/23px 23px 22px 22px; | |
| background-color: #e84242; | |
| -webkit-box-shadow: 0 5px 20px rgba(232, 66, 66, .7); | |
| -moz-box-shadow: 0 5px 20px rgba(232, 66, 66, .7); | |
| box-shadow: 0 5px 20px rgba(232, 66, 66, .7); | |
| color: #ffffff; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| text-shadow: 1px 1px grey; | |
| text-decoration: none; | |
| cursor: default; | |
| } | |
| .offline { | |
| cursor: default; | |
| } | |
| .btunknown { | |
| margin-left: 1rem; | |
| margin-right: 1rem; | |
| -webkit-border-radius: 23px 22px 22px 23px/23px 23px 22px 22px; | |
| -moz-border-radius: 23px 22px 22px 23px/23px 23px 22px 22px; | |
| border-radius: 23px 22px 22px 23px/23px 23px 22px 22px; | |
| background-color: #ffcf4b; | |
| -webkit-box-shadow: 0 5px 20px rgba(232, 188, 66, 0.7); | |
| -moz-box-shadow: 0 5px 20px rgba(232, 188, 66, .7); | |
| box-shadow: 0 5px 20px rgba(232, 188, 66, .7); | |
| color: #ffffff; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| text-shadow: 1px 1px grey; | |
| text-decoration: none; | |
| } | |
| .btunknown:hover { | |
| text-decoration: none; | |
| } | |
| /* BADGES */ | |
| #stats { | |
| display: grid; | |
| grid-template-columns: auto auto; | |
| grid-template-rows: auto auto auto auto auto; | |
| grid-auto-flow: column; | |
| float: left; | |
| width: 17rem; | |
| height: 8rem; | |
| align-content: center; | |
| text-align: center; | |
| text-align: -webkit-center; | |
| padding-left: .5rem; | |
| padding-right: .5rem; | |
| padding-top: .5rem; | |
| padding-bottom: .5rem; | |
| background-color: #3d3d3d; | |
| border-radius: 1rem; | |
| box-shadow: 5px 5px 5px black; | |
| } | |
| #uptime { | |
| grid-column-start: 2; | |
| grid-row-start: 1; | |
| grid-row-end: span 2; | |
| width: 1rem; | |
| padding-bottom: 1rem; | |
| } | |
| #ping { | |
| grid-column-start: 2; | |
| grid-row-start: 2; | |
| grid-row-end: x; | |
| padding-top: 1rem; | |
| } | |
| .double-val-label { | |
| display: flex; | |
| justify-content: center; | |
| font-family: 'Roboto', sans-serif; | |
| padding-top: .5rem; | |
| padding-bottom: .5rem; | |
| padding-left: .1rem; | |
| padding-right: .1rem; | |
| margin-left: auto; | |
| margin-right: auto; | |
| text-align: -webkit-center; | |
| } | |
| .double-val-label>span { | |
| background-color: #656565; | |
| box-shadow: 1px 1px 1px black; | |
| color: #ffffff; | |
| display: table-cell; | |
| font-size: 0.75rem; | |
| font-weight: 400; | |
| line-height: 1; | |
| padding: .4rem .4rem; | |
| text-align: center; | |
| vertical-align: middle; | |
| text-shadow: 1px 1px grey; | |
| white-space: nowrap; | |
| cursor: default; | |
| } | |
| .double-val-label>span:first-child() { | |
| border-bottom-left-radius: 0.25em; | |
| border-top-left-radius: .25em; | |
| } | |
| .double-val-label>span:nth-child(2) { | |
| border-bottom-right-radius: 0.25em; | |
| border-top-right-radius: .25em; | |
| } | |
| .double-val-label>span.primary { | |
| background-color: #337ab7; | |
| border-top-left-radius: 0.25em; | |
| border-bottom-left-radius: 0.25em; | |
| cursor: default; | |
| } | |
| .double-val-label>span.success { | |
| background-color: #5cb85c; | |
| border-top-left-radius: 0.25em; | |
| border-bottom-left-radius: 0.25em; | |
| cursor: default; | |
| } | |
| .double-val-label>span.info { | |
| background-color: #5bc0de; | |
| border-top-left-radius: 0.25em; | |
| border-bottom-left-radius: 0.25em; | |
| cursor: default; | |
| } | |
| .double-val-label>span.warning { | |
| background-color: #f0ad4e; | |
| border-top-left-radius: 0.25em; | |
| border-bottom-left-radius: 0.25em; | |
| cursor: default; | |
| } | |
| .double-val-label>span.danger { | |
| background-color: #d9534f; | |
| border-top-left-radius: 0.25em; | |
| border-bottom-left-radius: 0.25em; | |
| cursor: default; | |
| } | |
| /* CLOCK */ | |
| #clock { | |
| display: flex; | |
| flex-direction: row; | |
| float: right; | |
| height: 9rem; | |
| width: 17rem; | |
| margin: 0; | |
| padding-top: .5rem; | |
| padding-bottom: .5rem; | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| font-size: 1rem; | |
| justify-content: center; | |
| background-color: #3d3d3d; | |
| border-radius: 1rem; | |
| box-shadow: 5px 5px 5px black; | |
| text-shadow: 1px 1px black; | |
| } | |
| #canvas { | |
| margin: 0 auto; | |
| margin-bottom: .5rem; | |
| margin-right: .5rem; | |
| width: 8rem; | |
| height: 8rem; | |
| font-size: 30px; | |
| } | |
| #time { | |
| display: flex; | |
| flex-direction: row; | |
| float: left; | |
| margin: auto; | |
| margin-left: 3vw; | |
| padding-top: .5rem; | |
| padding-bottom: .5rem; | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| justify-content: center; | |
| background-color: #3d3d3d; | |
| border-radius: 8px; | |
| box-shadow: 3px 3px 3px black; | |
| font-size: .750rem; | |
| } | |
| .dtg { | |
| color: #C8C8C8; | |
| font-size: .9rem; | |
| font-weight: 600; | |
| margin: auto; | |
| text-align: center; | |
| cursor: default; | |
| } | |
| .date { | |
| color: #C8C8C8; | |
| font-size: 1rem; | |
| font-weight: 400; | |
| margin: auto; | |
| text-align: center; | |
| cursor: default; | |
| } | |
| #line { | |
| cursor: default; | |
| font-size: .75em; | |
| padding-bottom: .5em; | |
| } | |
| /* Refresh Switch */ | |
| #toggle { | |
| text-align: center; | |
| vertical-align: middle; | |
| padding-right: 0px; | |
| margin: auto; | |
| margin-top: 1rem; | |
| font-size: .75rem; | |
| color: #8E8B8B; | |
| } | |
| #togglemin { | |
| display: flex; | |
| float: right; | |
| text-align: center; | |
| vertical-align: middle; | |
| margin-right: 3vw; | |
| font-size: .75rem; | |
| color: #8E8B8B; | |
| } | |
| #slidertable { | |
| margin: 0 auto; | |
| border-radius: 8px; | |
| background-color: #3d3d3d; | |
| box-shadow: 3px 3px 3px black; | |
| } | |
| .tr { | |
| padding: 1rem; | |
| } | |
| #textslider { | |
| width: .2em; | |
| margin: auto; | |
| padding-top: .25rem; | |
| padding-bottom: .25rem; | |
| padding-right: .4em; | |
| padding-left: 1em; | |
| font-size: 1em; | |
| color: rgb(163, 163, 163); | |
| text-shadow: 1px 1px black; | |
| } | |
| #slider { | |
| margin: auto; | |
| padding-top: .5rem; | |
| padding-right: 1em; | |
| } | |
| .switch { | |
| position: relative; | |
| display: inline-block; | |
| width: 24px; | |
| height: 17px; | |
| margin-bottom: 0; | |
| } | |
| .switch input { | |
| display: none; | |
| } | |
| .slider { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| margin: auto; | |
| background-color: red; | |
| -webkit-transition: .4s; | |
| transition: .4s; | |
| cursor: pointer; | |
| } | |
| .slider:before { | |
| position: absolute; | |
| content: ""; | |
| height: 13px; | |
| width: 13px; | |
| left: 2px; | |
| bottom: 2px; | |
| background-color: #f2f2f2; | |
| -webkit-transition: .4s; | |
| transition: .4s; | |
| } | |
| input:checked+.slider { | |
| background-color: green; | |
| } | |
| input:focus+.slider { | |
| box-shadow: 0 0 1px green; | |
| } | |
| input:checked+.slider:before { | |
| -webkit-transform: translateX(7px); | |
| -ms-transform: translateX(7px); | |
| transform: translateX(7px); | |
| } | |
| .slider.round { | |
| border-radius: 22px; | |
| width: 100%; | |
| } | |
| .slider.round:before { | |
| border-radius: 50%; | |
| } | |
| #bottom { | |
| text-align: center; | |
| vertical-align: middle; | |
| padding-right: 0px; | |
| margin: auto; | |
| margin-top: 2em; | |
| font-size: .75em; | |
| padding-bottom: 1em; | |
| color: #8E8B8B; | |
| } | |
| /* login */ | |
| #username { | |
| font-size: 1.2rem | |
| } | |
| #username:hover { | |
| text-shadow: 0 0 1rem #FF0104; | |
| } | |
| #password { | |
| font-size: 1.2rem | |
| } | |
| #password:hover { | |
| text-shadow: 0 0 1rem #FF0104; | |
| } | |
| .wrapper { | |
| width: 30rem; | |
| margin-top: 10rem; | |
| margin-left: auto; | |
| margin-right: auto; | |
| padding: 1rem; | |
| } | |
| .wrapperregistration { | |
| width: 75%; | |
| margin-top: 2rem; | |
| margin-left: auto; | |
| margin-right: auto; | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| } | |
| #multiform { | |
| width: 90%; | |
| margin-top: 2rem; | |
| margin-left: auto; | |
| margin-right: auto; | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| } | |
| #regmulti { | |
| margin-bottom: 1rem !important; | |
| cursor: default; | |
| } | |
| #dbwrapper { | |
| width: 75%; | |
| margin-left: auto; | |
| margin-right: auto; | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| background-color: #1F1F1F; | |
| } | |
| #datadirmulti { | |
| margin-left: 2rem; | |
| margin-right: auto; | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| background-color: #1F1F1F; | |
| } | |
| .multiheading { | |
| color: yellow; | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| text-align: center; | |
| cursor: default; | |
| } | |
| #dbcreatewrapper { | |
| width: 75%; | |
| margin-left: auto; | |
| margin-right: auto; | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| background-color: #1F1F1F; | |
| } | |
| #dbcreatewrappermulti { | |
| margin-left: auto; | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| background-color: #1F1F1F; | |
| } | |
| #datadirform { | |
| margin-left: auto; | |
| margin-right: auto; | |
| margin-top: 1rem; | |
| margin-bottom: 1rem; | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| background-color: #1F1F1F; | |
| } | |
| #dbform { | |
| margin-left: auto; | |
| margin-right: auto; | |
| margin-top: 1rem; | |
| margin-bottom: 1rem; | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| background-color: #1F1F1F; | |
| } | |
| input[name="dbfile"] { | |
| background-color: rgb(200, 200, 200); | |
| border: none; | |
| padding-left: .2rem; | |
| cursor: not-allowed; | |
| } | |
| #userwrapper { | |
| width: 82%; | |
| margin-top: 1rem; | |
| margin-left: auto; | |
| margin-right: auto; | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| background-color: #1F1F1F; | |
| } | |
| #userform { | |
| margin-left: auto; | |
| margin-right: auto; | |
| margin-top: 1rem; | |
| margin-bottom: 1rem; | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| background-color: #1F1F1F; | |
| } | |
| #registrationform { | |
| font-size: 1rem; | |
| cursor: default; | |
| } | |
| #reginstructions { | |
| font-size: .90rem; | |
| cursor: default; | |
| } | |
| #multiwarning { | |
| margin-left: 15%; | |
| margin-right: 15%; | |
| margin-top: 1rem; | |
| font-size: .90rem; | |
| color: red; | |
| cursor: default; | |
| } | |
| #reginfo { | |
| width: 85%; | |
| color: #555555; | |
| background-color: #1F1F1F; | |
| margin-left: auto; | |
| margin-right: auto; | |
| margin-bottom: 5rem; | |
| padding-top: 1rem; | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| font-size: .50rem; | |
| text-align: left; | |
| cursor: default; | |
| } | |
| #loginerror { | |
| color: red; | |
| font-weight: 600; | |
| cursor: default; | |
| } | |
| #loginmessage { | |
| color: yellow; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| cursor: default; | |
| } | |
| .loginmessage { | |
| color: yellow; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| cursor: default; | |
| } | |
| #loginsuccess { | |
| color: green; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| cursor: default; | |
| } | |
| .loginsuccess { | |
| color: green; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| cursor: default; | |
| } | |
| #dbmessage { | |
| color: rgb(73, 73, 73); | |
| font-size: 1rem; | |
| font-weight: 600; | |
| cursor: default; | |
| } | |
| .dbmessage { | |
| background-color: black; | |
| color: yellow; | |
| font-size: 1rem; | |
| padding-left: 1rem; | |
| font-weight: 600; | |
| cursor: default; | |
| } | |
| .dbmessagesuccess { | |
| background-color: black; | |
| color: green; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| cursor: default; | |
| } | |
| #dbmessagesuccess { | |
| color: green; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| cursor: default; | |
| } | |
| .reglog { | |
| padding: 1rem; | |
| background-color: black; | |
| font-size: .75rem !important; | |
| cursor: default; | |
| } | |
| #loginbtn { | |
| padding-left: 1.5rem; | |
| } | |
| /* Registration */ | |
| #registrationtable { | |
| cursor: default; | |
| margin-bottom: 2rem !important; | |
| } | |
| #datadirnotes { | |
| font-size: .75rem; | |
| cursor: default; | |
| } | |
| #usernotes { | |
| font-size: .75rem; | |
| background-color: #1F1F1F; | |
| cursor: default; | |
| } | |
| /********************* SETTINGS *****************/ | |
| /******SETTINGS NAVBAR ********/ | |
| /* Wrappers */ | |
| #wrapper { | |
| -moz-transition: all 0.3s ease; | |
| -o-transition: all 0.3s ease; | |
| -webkit-transition: all 0.3s ease; | |
| padding-left: 0; | |
| transition: all 0.3s ease; | |
| float: left; | |
| margin: 0; | |
| margin-bottom: 1rem; | |
| } | |
| #sidebar-wrapper { | |
| height: auto; | |
| padding-top: 0; | |
| padding-bottom: 1rem; | |
| padding-left: .75rem; | |
| background-color: #3d3d3d; | |
| border-radius: 1rem; | |
| box-shadow: 5px 5px 5px black; | |
| -moz-transition: all 0.3s ease; | |
| -o-transition: all 0.3s ease; | |
| -webkit-transition: all 0.3s ease; | |
| overflow-x: hidden; | |
| overflow-y: auto; | |
| transition: all 0.3s ease; | |
| width: 17rem; | |
| z-index: 1000; | |
| } | |
| #sidebar-wrapper::-webkit-scrollbar { | |
| display: none; | |
| } | |
| #page-content-wrapper { | |
| padding-top: 70px; | |
| width: 100%; | |
| } | |
| /* Sidebar nav styles */ | |
| .sidebar-nav li { | |
| display: inline-block; | |
| line-height: 20px; | |
| position: relative; | |
| width: 100%; | |
| font-size: 1.1rem; | |
| } | |
| .sidebar-nav li:before { | |
| background-color: #340119; | |
| content: ''; | |
| height: 100%; | |
| left: 0; | |
| position: absolute; | |
| top: 0; | |
| -webkit-transition: width 0.2s ease-in; | |
| transition: width 0.2s ease-in; | |
| width: 3px; | |
| z-index: -1; | |
| } | |
| .sidebar-nav li:first-child a { | |
| background-color: #3e011e; | |
| } | |
| .sidebar-nav li:first-child a:hover { | |
| color: white; | |
| font-weight: 700; | |
| -webkit-transition: width 0.2s ease-in; | |
| transition: width 0.2s ease-in; | |
| } | |
| .sidebar-nav li:nth-child(2):before { | |
| background-color: #480123; | |
| } | |
| .sidebar-nav li:nth-child(2) a:hover { | |
| color: white; | |
| font-weight: 700; | |
| -webkit-transition: width 0.2s ease-in; | |
| transition: width 0.2s ease-in; | |
| } | |
| .sidebar-nav li:nth-child(3):before { | |
| background-color: #530128; | |
| } | |
| .sidebar-nav li:nth-child(3) a:hover { | |
| color: white; | |
| font-weight: 700; | |
| -webkit-transition: width 0.2s ease-in; | |
| transition: width 0.2s ease-in; | |
| } | |
| .sidebar-nav li:nth-child(4):before { | |
| background-color: #5d012d; | |
| } | |
| .sidebar-nav li:nth-child(4) a:hover { | |
| color: white; | |
| font-weight: 700; | |
| -webkit-transition: width 0.2s ease-in; | |
| transition: width 0.2s ease-in; | |
| } | |
| .sidebar-nav li:nth-child(5):before { | |
| background-color: #680233; | |
| } | |
| .sidebar-nav li:nth-child(5) a:hover { | |
| color: white; | |
| font-weight: 700; | |
| -webkit-transition: width 0.2s ease-in; | |
| transition: width 0.2s ease-in; | |
| } | |
| .sidebar-nav li:nth-child(6):before { | |
| background-color: #771b47; | |
| } | |
| .sidebar-nav li:nth-child(6) a:hover { | |
| color: white; | |
| font-weight: 700; | |
| -webkit-transition: width 0.2s ease-in; | |
| transition: width 0.2s ease-in; | |
| } | |
| .sidebar-nav li:nth-child(7):before { | |
| background-color: #7c5aae; | |
| } | |
| .sidebar-nav li:nth-child(8):before { | |
| background-color: #8a6cb6; | |
| } | |
| .sidebar-nav li:nth-child(9):before { | |
| background-color: #987dbf; | |
| } | |
| .sidebar-nav li:hover:before { | |
| -webkit-transition: width 0.2s ease-in; | |
| transition: width 0.2s ease-in; | |
| width: 100%; | |
| } | |
| .sidebar-nav li a { | |
| color: #dddddd; | |
| display: block; | |
| font-size: 1rem; | |
| text-decoration: none; | |
| padding: .5rem; | |
| padding-left: .75rem; | |
| } | |
| .sidebar-nav li a:hover, | |
| .sidebar-nav li a:active, | |
| .sidebar-nav li a:focus, | |
| .sidebar-nav li.open a:hover, | |
| .sidebar-nav li.open a:active, | |
| .sidebar-nav li.open a:focus { | |
| background-color: transparent; | |
| color: #ffffff; | |
| text-decoration: none; | |
| } | |
| #title_input { | |
| position: relative; | |
| margin-bottom: 2rem; | |
| } | |
| #enabled_option { | |
| position: relative; | |
| margin-top: -6.5rem; | |
| margin-left: 16.5rem; | |
| z-index: 1000; | |
| } | |
| #enabled_option_icon { | |
| color: grey; | |
| cursor: help; | |
| } | |
| #enabled_option_icon:hover { | |
| color: yellow; | |
| } | |
| #image_option_icon { | |
| color: grey; | |
| cursor: help; | |
| } | |
| #image_option_icon:hover { | |
| color: yellow; | |
| } | |
| #type_option { | |
| position: relative; | |
| } | |
| #type_option_icon { | |
| color: grey; | |
| cursor: help; | |
| } | |
| #type_option_icon:hover { | |
| color: yellow; | |
| } | |
| #link_option { | |
| position: relative; | |
| margin-top: -6.5rem; | |
| margin-left: 16.5rem; | |
| z-index: 1000; | |
| } | |
| #link_option_icon { | |
| color: grey; | |
| cursor: help; | |
| } | |
| #link_option_icon:hover { | |
| color: yellow; | |
| } | |
| /* Service Image Modal */ | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| width: 20rem; | |
| width: fit-content; | |
| height: 14rem; | |
| height: fit-content; | |
| margin: 0 auto; | |
| margin-top: 15%; | |
| padding: 1rem; | |
| padding-bottom: .5rem; | |
| color: black; | |
| text-align: center; | |
| align-items: center; | |
| background-color: rgba(0, 0, 0, 0.750); | |
| border: 1px solid #888; | |
| z-index: 2000; | |
| } | |
| #myModal3 { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| overflow-y: auto; | |
| height: 75%; | |
| margin-top: 10%; | |
| margin-left: 10%; | |
| margin-right: 10%; | |
| padding: 1rem; | |
| padding-bottom: .5rem; | |
| color: black; | |
| text-align: center; | |
| align-items: center; | |
| background-color: rgba(0, 0, 0, 0.900); | |
| border: 1px solid #888; | |
| z-index: 2000; | |
| } | |
| #myModal3::-webkit-scrollbar { | |
| width: 8px; | |
| background-color: #252525; | |
| } | |
| #myModal3::-webkit-scrollbar-track { | |
| -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); | |
| box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); | |
| border-radius: 8px; | |
| background-color: #252525; | |
| } | |
| #myModal3::-webkit-scrollbar-thumb { | |
| border-radius: 8px; | |
| -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); | |
| box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); | |
| background-color: #8E8B8B; | |
| } | |
| /* Modal Content/Box */ | |
| .modal-content { | |
| background-color: transparent; | |
| padding: 2rem; | |
| padding-top: .5rem; | |
| padding-bottom: 0; | |
| align-items: center; | |
| } | |
| #mymodal4 { | |
| padding-top: .5rem; | |
| padding-bottom: 0; | |
| align-items: center; | |
| } | |
| #imgthumb { | |
| display: inline-grid; | |
| padding: 1rem; | |
| } | |
| #imgbtn { | |
| height: 7rem; | |
| background-color: transparent; | |
| border: none; | |
| cursor: pointer; | |
| } | |
| #imgpath { | |
| display: inline-grid; | |
| margin-top: .5rem; | |
| color: white; | |
| text-align: center; | |
| } | |
| input[name="imginput"] { | |
| color: white !important; | |
| background-color: transparent !important; | |
| border: none !important; | |
| padding-left: .2rem; | |
| text-align: center; | |
| cursor: text; | |
| } | |
| input[name="imginput"]:focus { | |
| color: white !important; | |
| background-color: transparent !important; | |
| } | |
| .modaltext { | |
| color: #aaa; | |
| font-size: 1.5rem; | |
| font-weight: 600; | |
| margin-bottom: .5rem; | |
| cursor: default; | |
| } | |
| .modalimgpath { | |
| color: #aaa; | |
| font-size: 1rem; | |
| font-weight: 400; | |
| cursor: default; | |
| } | |
| /* Modal Close Button */ | |
| .close { | |
| color: rgb(255, 80, 80); | |
| float: left; | |
| font-size: 2rem; | |
| font-weight: 700; | |
| text-shadow: none !important; | |
| } | |
| .close:hover, | |
| .close:focus { | |
| color: red; | |
| text-decoration: none; | |
| cursor: pointer; | |
| font-weight: 900; | |
| } | |
| .closeimg { | |
| position: fixed; | |
| color: rgb(255, 80, 80); | |
| float: left; | |
| margin-left: -36%; | |
| font-size: 2rem; | |
| font-weight: 700; | |
| } | |
| .closeimg:hover, | |
| .closeimg:focus { | |
| color: red; | |
| text-decoration: none; | |
| cursor: pointer; | |
| font-weight: 900; | |
| } | |
| #checkurl { | |
| float: right; | |
| margin-top: -12rem; | |
| width: 20rem; | |
| text-align: center; | |
| } | |
| #checkurl_icon { | |
| cursor: help; | |
| color: grey; | |
| } | |
| #checkurl_icon:hover { | |
| color: yellow; | |
| } | |
| #linkurl { | |
| float: right; | |
| position: relative; | |
| margin-top: -5.5rem; | |
| width: 20rem; | |
| text-align: center; | |
| /* background-color: #1F1F1F; */ | |
| z-index: 1000; | |
| } | |
| #checknote { | |
| position: sticky; | |
| width: inherit; | |
| margin-top: 4rem; | |
| color: grey; | |
| font-size: .95rem; | |
| font-style: italic; | |
| cursor: default; | |
| z-index: 1; | |
| } | |
| .btn { | |
| color: white; | |
| background-color: #007bff; | |
| transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; | |
| } | |
| .btn:hover { | |
| background-color: #0073ee; | |
| } | |
| .btn:disabled { | |
| color: red; | |
| opacity: .65; | |
| background-color: #003d7e; | |
| cursor: not-allowed; | |
| } | |
| .alpaca-form-buttons-container { | |
| text-align: center; | |
| width: 14.5rem; | |
| padding: .5rem; | |
| background-color: rgba(126, 126, 126, 0.50); | |
| border-radius: 4px; | |
| } | |
| .alpaca-form-button-submit { | |
| margin-right: .5rem; | |
| opacity: 1 !important; | |
| } | |
| .buttonchange { | |
| background-color: green; | |
| } | |
| #myBtn2 { | |
| color: white; | |
| background-color: #007bff; | |
| transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; | |
| } | |
| #myBtn2:hover { | |
| background-color: #0073ee; | |
| } | |
| .alpaca-array-actionbar, | |
| .alpaca-array-actionbar.btn-group { | |
| margin-top: 1rem; | |
| } | |
| .btn-group>.btn:first-child { | |
| margin-left: 0; | |
| background-color: rgb(200, 200, 200); | |
| color: black; | |
| } | |
| .btn-group>.btn-group:not(:first-child)>.btn, | |
| .btn-group>.btn:not(:first-child) { | |
| border-top-left-radius: 0; | |
| border-bottom-left-radius: 0; | |
| background-color: rgb(200, 200, 200); | |
| color: black | |
| } | |
| .btn-group>.btn:first-child:hover { | |
| background-color: rgb(150, 150, 150); | |
| color: white; | |
| } | |
| .btn-group>.btn:not(:first-child):hover { | |
| background-color: rgb(150, 150, 150); | |
| color: white; | |
| } | |
| .settingscolumn { | |
| float: left; | |
| width: min-content; | |
| height: 100%; | |
| padding-top: 5rem; | |
| background-color: transparent; | |
| } | |
| #settingsbrand { | |
| width: 17rem; | |
| margin-bottom: 1rem; | |
| padding: 0px; | |
| padding-top: .5rem; | |
| text-align: center; | |
| cursor: default; | |
| } | |
| .settingstitle { | |
| width: 16rem; | |
| margin: 0; | |
| padding: 1rem; | |
| padding-bottom: .25rem; | |
| background-color: transparent; | |
| text-shadow: 0 0 6px #FF0104; | |
| vertical-align: middle; | |
| color: #ffffff; | |
| text-align: center; | |
| font-size: 1.5rem; | |
| font-weight: 500; | |
| outline: 0; | |
| cursor: default; | |
| } | |
| #version { | |
| display: block; | |
| font-size: 1rem; | |
| padding: 1rem; | |
| padding-top: 1.5rem; | |
| background-color: transparent; | |
| cursor: default; | |
| text-align: center; | |
| } | |
| #includedContent { | |
| float: right; | |
| width: calc(100% - 18rem); | |
| padding-left: 2rem; | |
| background-color: #1F1F1F | |
| } | |
| .object { | |
| float: right; | |
| width: 100%; | |
| height: 100vh; | |
| } | |
| #version_check { | |
| font-size: .6rem; | |
| padding: .2rem; | |
| } | |
| .toolslink:hover { | |
| color: #ffffff; | |
| text-shadow: 0 0 15px #FF0104; | |
| } | |
| #infodata { | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| padding-bottom: 1rem; | |
| font-size: .75rem; | |
| margin-bottom: 1.5rem; | |
| color: white; | |
| background-color: #3d3d3d; | |
| border-radius: 1rem; | |
| box-shadow: 5px 5px 5px black; | |
| } | |
| .extok { | |
| color: white; | |
| background-color: green; | |
| display: inline-block; | |
| text-align: center; | |
| font-size: .50rem; | |
| white-space: nowrap; | |
| vertical-align: middle; | |
| user-select: none; | |
| border: 1px solid transparent; | |
| padding: .1rem .5rem; | |
| border-radius: .25rem; | |
| cursor: help; | |
| } | |
| .extfail { | |
| color: white !important; | |
| background-color: red !important; | |
| display: inline-block; | |
| font-size: .50rem; | |
| text-align: center; | |
| white-space: nowrap; | |
| vertical-align: middle; | |
| user-select: none; | |
| border: 1px solid transparent; | |
| padding: .1rem .5rem; | |
| border-radius: .25rem; | |
| cursor: pointer; | |
| } | |
| #blank { | |
| color: #3d3d3d; | |
| font-size: .5rem; | |
| } | |
| #phpContent { | |
| position: inherit; | |
| background: transparent; | |
| } | |
| .phpobject { | |
| position: inherit; | |
| width: 100%; | |
| height: 35rem; | |
| } | |
| .slide { | |
| position: relative; | |
| } | |
| #servicesettings { | |
| margin-bottom: 6rem; | |
| background-color: #1F1F1F; | |
| } | |
| .expand { | |
| height: 33rem; | |
| transition: height 0.5s; | |
| word-wrap: break-word; | |
| width: auto; | |
| padding: 0 10px 0 10px; | |
| } | |
| .expandtoggle:checked~.expand { | |
| height: 20rem; | |
| overflow-y: hidden; | |
| overflow-x: hidden; | |
| } | |
| .expandtoggle { | |
| display: block; | |
| position: absolute; | |
| text-align: center; | |
| margin: 0; | |
| right: 2.5em; | |
| bottom: .5em; | |
| padding-top: .5em; | |
| background-color: rgba(150, 150, 150, 0.75); | |
| -moz-border-radius: 3px; | |
| border-radius: 3px; | |
| width: 2em; | |
| height: 2.2em; | |
| cursor: pointer; | |
| -webkit-transition: .5s; | |
| -moz-transition: .5s; | |
| transition: .5s; | |
| } | |
| .expandtoggle:hover { | |
| background-color: rgba(255, 255, 255, 0.4); | |
| background-size: 3em; | |
| -webkit-transition: .3s; | |
| -moz-transition: .3s; | |
| transition: .3s; | |
| } | |
| .expandtoggle::before { | |
| background: url(../img/toggle.png) no-repeat; | |
| background-size: 2em; | |
| content: ""; | |
| display: inline-block; | |
| width: 2em; | |
| height: 2em; | |
| -webkit-transition: .5s; | |
| -moz-transition: .5s; | |
| transition: .5s; | |
| } | |
| #preferencesettings { | |
| padding-left: 15%; | |
| } | |
| #sitesettings { | |
| padding-left: 15%; | |
| } | |
| #leftcolumn { | |
| margin: auto; | |
| text-align: left; | |
| } | |
| #rightcolumn { | |
| margin: auto; | |
| text-align: left; | |
| } | |
| .alpaca-message-invalidValueOfEnum { | |
| color: red !important; | |
| } | |
| #enablednote { | |
| position: absolute; | |
| color: grey; | |
| background-color: #1F1F1F; | |
| font-style: italic; | |
| padding-left: 1rem; | |
| cursor: default; | |
| } | |
| .alpaca-field-object { | |
| padding-left: 2rem; | |
| padding-right: 2rem; | |
| padding-bottom: 1rem; | |
| } | |
| .alpaca-control-label { | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| } | |
| .radio { | |
| width: 10rem; | |
| } | |
| .alpaca-image-display { | |
| float: right; | |
| margin-top: -16rem !important; | |
| padding-right: 7rem; | |
| } | |
| .help-block { | |
| color: grey; | |
| font-style: italic; | |
| padding-left: 1.5rem; | |
| cursor: default; | |
| } | |
| .alpaca-message-invalidPattern { | |
| color: red; | |
| font-style: italic; | |
| background-color: #1F1F1F; | |
| cursor: default; | |
| z-index: 1000; | |
| } | |
| .alpaca-message-stringValueTooSmall { | |
| color: red; | |
| font-style: italic; | |
| cursor: default; | |
| } | |
| .alpaca-message-stringValueTooLarge { | |
| color: red; | |
| font-style: italic; | |
| cursor: default; | |
| } | |
| .alpaca-message-stringNotANumber { | |
| color: red; | |
| font-style: italic; | |
| cursor: default; | |
| } | |
| /* scroll to top */ | |
| #myBtn { | |
| width: 4em; | |
| height: 4em; | |
| display: none; | |
| position: fixed; | |
| bottom: 2em; | |
| right: 2em; | |
| z-index: 99; | |
| border: none; | |
| outline: none; | |
| background: url(../img/up-arrow.png) no-repeat center center; | |
| background-color: rgba(126, 126, 126, 0.50); | |
| background-size: 3em; | |
| cursor: pointer; | |
| padding: 15px; | |
| border-radius: 10px; | |
| -webkit-transition: .5s; | |
| -moz-transition: .5s; | |
| transition: .5s; | |
| z-index: 1000; | |
| } | |
| #myBtn:hover { | |
| background-color: rgba(104, 2, 51, 0.658); | |
| -webkit-transition: .5s; | |
| -moz-transition: .5s; | |
| transition: .5s; | |
| } | |
| table { | |
| margin-bottom: 0 !important; | |
| } | |
| th, | |
| td { | |
| padding-left: 5px; | |
| padding-right: 5px; | |
| } | |
| tbody { | |
| background-color: transparent; | |
| cursor: pointer; | |
| } | |
| tr { | |
| width: 100% | |
| } | |
| /* Progress Bar */ | |
| .pace { | |
| -webkit-pointer-events: none; | |
| pointer-events: none; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| user-select: none; | |
| } | |
| .pace-inactive { | |
| display: none; | |
| } | |
| .pace .pace-progress { | |
| background: #680233; | |
| position: fixed; | |
| z-index: 2000; | |
| top: 0; | |
| right: 100%; | |
| width: 100%; | |
| height: 5px; | |
| } | |
| .pace .pace-progress-inner { | |
| display: block; | |
| position: absolute; | |
| right: 0px; | |
| width: 100px; | |
| height: 100%; | |
| box-shadow: 0 0 10px #680233, 0 0 5px #680233; | |
| opacity: 1.0; | |
| -webkit-transform: rotate(3deg) translate(0px, -4px); | |
| -moz-transform: rotate(3deg) translate(0px, -4px); | |
| -ms-transform: rotate(3deg) translate(0px, -4px); | |
| -o-transform: rotate(3deg) translate(0px, -4px); | |
| transform: rotate(3deg) translate(0px, -4px); | |
| } | |
| /* Footer */ | |
| #settingslink { | |
| cursor: default; | |
| margin-bottom: .5rem; | |
| } | |
| #version_check_auto { | |
| cursor: default; | |
| } | |
| #footer { | |
| position: fixed; | |
| left: 46%; | |
| bottom: 2rem; | |
| margin: 0px; | |
| margin-top: 1vw; | |
| text-align: center; | |
| color: #555555; | |
| font-size: 1rem; | |
| z-index: -1; | |
| } | |
| .footer { | |
| text-align: center; | |
| font-size: 1rem; | |
| text-decoration: none; | |
| } | |
| .footer:hover { | |
| text-decoration: none; | |
| color: #ffffff; | |
| font-size: 1.2rem; | |
| font-weight: 400; | |
| text-shadow: 0 0 15px #FF0104; | |
| } | |
| .a { | |
| color: #555555; | |
| font-size: 1rem; | |
| text-shadow: none; | |
| font-weight: 300; | |
| text-decoration: none; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment