websecmap/map/static/css/overrides.css
/*
Overrides some values given in CSS from frameworks and third party stuff.
*/
body {
height: 100%;
width: 100%;
}
.router-link-exact-active {
color: black;
font-weight: bold;
border-bottom: 4px solid green;
}
.page-header {
margin-top: 2em;
}
#next_week {
float: right;
}
.info {
min-width: 317px;
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
/* box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); */
border-radius: 4px;
/* border: 2px solid rgba(0,0,0,0.2); */
background-clip: padding-box;
}
#searchbar {
width: 100%;
font-size: 20px;
}
/* Hide info boxes on mobile / small resolutions */
@media screen and (max-width: 768px) {
.hide_on_small_screens {
visibility: hidden;
pointer-events: none;
}
#searchbar {
width: 80vw;
}
.search-on-map {
max-width: 80vw;
}
}
.finding_block{
margin-left: 20px;
margin-bottom: 20px;
}
.info_nobackground {
min-width: 317px;
font: 14px/16px Arial, Helvetica, sans-serif;
border-radius: 1px;
}
.info h4 {
margin: 0 0 5px;
}
.legend {
text-align: left;
line-height: 18px;
}
.legend i {
width: 18px;
height: 18px;
float: left;
margin-right: 8px;
/* opacity: 0.7; causes glitch after fullscreen was added. */
}
.green {
text-decoration: none;
}
.orange {
text-decoration: none;
}
.red {
text-decoration: none;
}
#domainlist {
width: 293px;
overflow-y: auto;
overflow-x: hidden;
max-height: 650px;
}
#domainlist h4 {
color: #777;
margin: 0 0 5px;
}
/* prevent dynamic content loading in the div before this element to scroll
the recently jumped anchor (report) out of view.
*/
div#report {
margin-top: 55px;
}
/* https://github.com/twbs/bootstrap/issues/1768 */
.jumptonav {
display: block;
content: " ";
margin-top: -90px;
height: 51px;
visibility: hidden;
}
.perurl {
width: 100%;
clear: both;
/* alternating rows, taking in account images. */
padding-top: 15px;
padding-left: 15px;
padding-bottom: 15px;
margin-bottom: 30px;
border-radius: 10px;
}
.imagediv {
width: 320px;
height: 200px;
margin-right: 10px;
border: 1px solid black;
display: inline-block;
float: left;
background: gainsboro repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255, 255, 255, .5) 35px, rgba(255, 255, 255, .5) 70px);
}
.clippedimage {
min-width: 320px; /* placeholder */
min-height: 200px; /* placeholder */
position: absolute;
clip: rect(0, 320px, 200px, 0);
/* If we can't find the image, would this then show? */
background: gainsboro repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255, 255, 255, .5) 35px, rgba(255, 255, 255, .5) 70px);
/* Not setting the image width and height explicitly will make the image 100% width on ios / safari. nov 2018 */
width: 320px;
height: 200px;
}
.servicelink {
margin-bottom: 15px;
}
.faildomain {
font-size: 23px;
}
.giveroom {
margin-top: 12px;
min-height: 230px;
}
.giveroom_url {
margin-top: 12px;
min-height: 156px;
}
.reportlist {
display: table;
padding-bottom: 15px;
}
.servicelist {
display: table;
padding-bottom: 15px;
margin-left: 330px;
}
.screenshotlist {
width: 330px;
float: left;
}
.reportlist h3 {
font-size: 17px;
}
.awarded_points_medium, .awarded_points_low, .awarded_points_good, .awarded_points_high, .awarded_points_explained, .awarded_points_error_in_test {
padding: 0 3px;
font-weight: bold;
font-size: 11px;
border-radius: 4px;
}
.total_awarded_points_medium, .total_awarded_points_high, .total_awarded_points_low, .total_awarded_points_good {
padding: 1px 4px;
font-weight: bold;
border-radius: 6px;
margin-right: 5px;
margin-left: 5px;
}
.logo {
width: 100%;
text-align: center;
}
.logoandtext {
font-size: 12px;
}
.fullscreenlayout {
/* Hide it initially, also when fullscreen closes. */
/* display: none; */
/* Go all out */
position: fixed;
left: 10px;
right: 10px;
bottom: 10px;
top: 10px;
overflow-y: scroll;
overflow-x: auto;
/* emulate the maps info boxes */
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
border-radius: 6px;
padding: 14px;
max-width: 1079px;
border: 1px solid #aeaeae;
border-top: 55px solid #838383;
}
/* a yolo layouted button, just to make sure it can close. */
.closebutton {
position: fixed;
top: 12px;
right: 20px;
font-size: 40px;
font-family: sans-serif, consolas;
color: white;
left: 20px;
max-width: 1059px;
text-align: right;
}
.navbar-custom {
-webkit-backdrop-filter: blur(20px);
}
.leaflet-container {
/* Something that works on all styles, and doesn't blind you at night. */
background: rgba(0, 0, 0, 0.19) !important;
}
.jumbotron {
margin-top: 40px;
}
/* awesome transition */
path {
-webkit-transition: fill 400ms;
transition: fill 400ms;
}
.backtomap {
float: right;
position: relative;
top: 70px;
}
.organization_points {
font-size: inherit !important;
margin: 0 5px 0 0 !important;
}
.changes .date {
width: 173px;
}
.changes .explanation,
.changes .service {
font-size: 12px;
}
#categorynavbar, #countrynavbar {
margin-bottom: 0 !important;
}
.improvements_good, .improvements_neutral {
font-size: 40px;
}
.improvements_bad {
font-size: 40px;
}
.improvements_good_large, .improvements_neutral_large {
font-size: 100px;
}
.improvements_bad_large {
font-size: 100px;
}
.improvements_good:before {
content: "+";
}
.improvements_good_large:before {
content: "+";
}
.improvements_bad:before {
content: "";
}
.improvements_bad_large:before {
content: "";
}
.improvements_neutral:before {
content: "";
}
.improvements_neutral_large:before {
content: "";
}
.number-sm {
text-align: center;
min-width: 112px;
}
.improvementstable {
border-spacing: 10px;
border-collapse: separate;
width: 100%;
}
.improvement_severity{
border-bottom: 2px solid silver;
}
.centered {
text-align:center
}
[v-cloak] {
display: none;
}
.score {
border-radius: 6px;
text-align: center;
padding: 13px;
}
.score_label {
font-size: 1.3em;
color: white;
}
.score_value {
font-size: 5em;
background-color: #ffffffcf;
display: block;
border-radius: 10px;
}
/* Make it a marquee */
#marquee {
width: 100%;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
#marquee span {
display: inline-block;
padding-left: 1vw;
text-indent: 0;
animation: marquee linear infinite;
}
#marquee span:hover {
animation-play-state: paused
}
/* Make it move */
@keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
.very-huge{
font-size: 140px;
}
#ticker_bar {
/* Inspired by news and stock tickers */
z-index: 1002;
width: 96vw;
position: fixed;
bottom: 0;
left: 0;
border: 1px solid #4c4c4c;
margin: 2vw;
box-shadow: 4px 28px 62px -16px rgba(120,120,120,0.65);
background: white linear-gradient(to bottom, rgba(237, 237, 237, 1) 0%, rgba(246, 246, 246, 1) 53%, rgba(255, 255, 255, 1) 100%);
line-height: 183px;
height: 190px;
}
/**
Sortable Tables
https://vuejs.org/v2/examples/grid-component.html
*/
th.active .arrow {
opacity: 1;
}
.arrow {
display: inline-block;
vertical-align: middle;
width: 0;
height: 0;
margin-left: 5px;
opacity: 0.66;
}
.arrow.asc {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid #00a0c6;
}
.arrow.dsc {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #00a0c6;
}
.stats_part{
margin-top: 40px;
}
#lastrow {
left: 0;
right: 0;
position: absolute;
border-top: 4px solid;
margin-bottom: 5px;
}
/* Report printing in chrome / safari, so it looks nice */
@media print {
.noprint {
display:none !important;
}
a:link:after, a:visited:after {
display: none;
content: "";
}
* {
-webkit-print-color-adjust: exact !important; /* Chrome, Safari */
color-adjust: exact !important; /*Firefox*/
}
.svg-inline--fa {
display: none !important;
}
.do-not-print {
display: none !important;
}
}
#viewmore {
position: absolute;
top: 98vh;
z-index: 1001;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255, 255, 255, 0.8);
font-size: 1.5vw;
padding: 0.5vw;
border-radius: 10px;
}
.legend_title {
display: block;
margin-bottom: -12px;
font-weight: bold;
}
.gitter-chat-embed {
z-index: 10000;
}
/* Make a single menu, not separate controls. Todo: only when there is room... */
@media screen and (min-width: 768px) {
.leaflet-top.leaflet-right {
height: calc(100vh - 235px);
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
/*background-color: rgba(255, 255, 255, 1.8);
padding-left: 10px;
margin-bottom: 10px;
overflow-y: scroll;
border-left: 2px solid #b3b3b3;
pointer-events: initial;*/
}
}
/* Markers with CSS only, no (slow) images, and easy to change color. */
.leaflet-marker-red
{
font-weight: bold;
text-align: center;
border-radius: 50%;
line-height:30px;
}
.leaflet-marker-orange
{
font-weight: bold;
text-align: center;
border-radius: 50%;
line-height:30px;
}
.leaflet-marker-green
{
font-weight: bold;
text-align: center;
border-radius: 50%;
line-height:30px;
}
.leaflet-marker-yellow
{
font-weight: bold;
text-align: center;
border-radius: 50%;
line-height:30px;
}
.leaflet-marker-gray
{
font-weight: bold;
text-align: center;
border-radius: 50%;
line-height:30px;
}
.announcement
{
font-size: 1.5em;
text-align: center;
margin-bottom: 0;
padding: 20px;
}
.photobar {
height: 243px;
width: 320px;
}
#graphs .row {
padding-bottom: 30px;
}
.chat_quote_left {
border-radius: 20px;
padding: 10px 15px;
margin-right: 10%;
margin-bottom: -14px;
}
.chat_quote_right {
border-radius: 20px;
padding: 10px 15px;
margin-left: 10%;
margin-bottom:40px;
}
.explain_reports {
border: 1px solid #c5c5c5;
list-style: none;
padding: 10px;
margin: 10px;
width: 100%;
background-color: #e3d1cb33;
border-radius: 3px;
}
.schedule_row {
font-size: 1.2em;
margin-bottom: 6px;
}
/* Menu hover menu is just a few pixels below the item. So it disappears if you're not moving too fast which is evil*/
.dropdown-menu {
top: 86% !important;
}
.loader {
border: 4px solid #f3f3f3;
border-radius: 50%;
border-top: 4px solid #3498db;
width: 12px;
height: 12px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.marker-cluster {
background-clip: padding-box;
border-radius: 20px;
}
.marker-cluster div {
width: 30px;
height: 30px;
margin-left: 5px;
margin-top: 5px;
text-align: center;
border-radius: 15px;
font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.marker-cluster span {
line-height: 30px;
}
/*
Vue Modal
@see https://vuejs.org/v2/examples/modal.html
*/
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
display: table;
transition: opacity .3s ease;
}
.modal-wrapper {
display: table-cell;
vertical-align: middle;
}
.modal-container {
max-height: 90vh;
overflow: scroll;
width: 700px;
max-width: 90vw;
margin: 0px auto;
padding: 20px 30px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
transition: all .3s ease;
font-family: Helvetica, Arial, sans-serif;
}
.modal-header{
display: inherit !important;
}
.modal-header h1 {
margin-top: 0;
}
.modal-body {
margin: 20px 0;
}
.modal-default-button {
float: right;
}
/*
* The following styles are auto-applied to elements with
* transition="modal" when their visibility is toggled
* by Vue.js.
*
* You can easily play with the modal transition by editing
* these styles.
*/
.modal-enter {
opacity: 0;
}
.modal-leave-active {
opacity: 0;
}
.modal-enter .modal-container,
.modal-leave-active .modal-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.server-response-error {
border: 1px solid silver;
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
background-color: #f9e0e4;
color: darkred;
}
.server-response-success{
border: 1px solid silver;
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
background-color: lightgreen;
color: #004f00;
}
/* https://www.w3schools.com/howto/howto_js_rangeslider.asp */
/* The slider itself */
#history {
margin-bottom: 10px;
outline: none;
direction: rtl;
}
.slider {
-webkit-appearance: none; /* Override default CSS styles */
appearance: none;
width: 67%; /* Full-width */
height: 25px; /* Specified height */
background: #d3d3d3; /* Grey background */
outline: none; /* Remove outline */
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
-webkit-transition: .2s; /* 0.2 seconds transition on hover */
transition: opacity .2s;
}
/* Mouse-over effects */
.slider:hover {
opacity: 1; /* Fully shown on mouse-over */
}
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */
appearance: none;
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #4CAF50; /* Green background */
cursor: pointer; /* Cursor on hover */
}
.slider::-moz-range-thumb {
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #4CAF50; /* Green background */
cursor: pointer; /* Cursor on hover */
}
/** Loading indicator, https://loading.io/css/ */
.lds-dual-ring {
display: inline-block;
width: 55px;
height: 38px;
}
.lds-dual-ring:after {
content: " ";
display: block;
width: 46px;
height: 46px;
margin: 1px;
border-radius: 50%;
border: 5px solid #00BFD6;
border-color: #00BFD6 transparent #00BFD6 transparent;
animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading {
padding-top: 17px;
text-align: center;
}
.loading span {
display: inline-block;
height: 64px;
font-size: 2em;
color: darkgray;
}