/*
* Scatboi 2.0.10 responsive pages css file.
*/
/* GLOBAL DEFINITIONS */
/* Color scheme */
:root {
/* Primary color scheme */
--var-color-pri-background: #e7d9c4; /* Main background */
--var-color-pri-accent: #fdfcfb; /* Accent Background */
--var-color-pri-text: #3f3737; /* Text & labels & data */
--var-color-pri-icon: #3f3737; /* Any icons (except CTA) */
--var-color-pri-cta: #422b2a; /* Links, actions, etc. */
/* Secondary color scheme */
--var-color-sec-background: #725b45; /* Sidebar, headers, tile headers */
--var-color-sec-accent: #f2e6db; /* Frames of content */
--var-color-sec-text: #fdf9f9; /* Any text including labels and data */
--var-color-sec-othertext: #3f3737; /* Text in other places */
--var-color-sec-icons: #fdf9f9; /* Any icons (except CTA) */
--var-color-sec-cta: #ffffff; /* Links, actions, etc. */
/* General colors */
--var-color-success: #12b200; /* Online status, friend */
--var-color-destructive: #b10000; /* Offline status, foe */
--var-color-badges: #00a0aa; /* Verified, admin, favorited */
--var-color-content-dark: #755743; /* Section divider */
--var-color-content-light: #dad4cf; /* Separate out lists */
--var-color-admin: #021eb7; /* Admin sections */
/* Escort profiles */
--var-color-esc-background: #045099;
--var-color-esc-accent: #045099;
--var-color-esc-text: #045099;
/* Radius definitions */
--var-radius-sm: 2px; /* up to 200px */
--var-radius-md: 4px; /* 200px to 400 px */
--var-radius-lg: 8px; /* 400px and up */
/* font size definitions */
--var-font-default: 14px; /* default font everywhere */
--var-font-h1: 20px; /* font size */
--var-font-h2: 16px; /* font size */
--var-font-h3: 14px; /* font size */
--var-font-line-height: 27px;
--var-font-icon-lg: 22px; /* large icon padding */
--var-font-icon-sm: 16px; /* small icon padding */
/* standard dimensioins */
--var-size-max-width: 1200px; /* maximum width of doc */
--var-size-head-height: 55px; /* main header height */
--var-size-foot-height: 55px; /* main footer height */
--var-size-card-header-height: 40px; /* height of card header */
--var-size-menu-width: 158px; /* menu width */
/* standard paddings and sizes */
--var-pad-menu-lr: 12px; /* left and right padding in menu */
--var-pad-menu-tb: 8px; /* top and bottom padding in menu */
--var-pad-main-lr: 8px; /* left and right padding in main area */
--var-pad-main-tb: 8px; /* top and bottom padding in main area */
--var-pad-header-lr: 12px; /* left and right padding in header */
--var-pad-header-tb: 8px; /* top and bottom padding in header */
--var-pad-icon-lg: 12px; /* padding after large icon */
--var-pad-icon-md: 10px; /* padding after large icon */
--var-pad-icon-sm: 8px; /* padding after small icon */
--var-pad-card-lr: 16px; /* card info left and right padding */
--var-pad-card-t: 8px; /* card info top padding */
--var-pad-card-b: 8px; /* card info bottom padding */
--var-pad-card-below: 8px; /* space between each card */
--var-pad-dl-left: 115px; /* left column width of definition list */
--var-pad-dl-gutter: 8px; /* gutter of definition list */
}
/* the entire browser window */
body {
background-color: var(--var-color-pri-background);
min-width: 402px;
}
/* sb-canvas is the entire browser window */
.sb-canvas {
display: flex;
justify-content: center;
align-items: center;
}
/* sb-page contains entire document */
.sb-doc {
font-family: "Montserrat", sans-serif;
font-size: var(--var-font-default);
line-height: var(--var-font-line-height);
color: var(--var-color-pri-cta);
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
width: 100%;
max-width: var(--var-size-max-width);
}
/*
* These define the major parts of the form for larger screens, like desktops.
* See below for the values that are overridden for smaller screens to make the
* menu vanish and appear on command from the user.
* /
/* header line across all of screen include menu-button, logo, mail, and profile buttons */
.sb-head {
background: var(--var-color-sec-background);
color: var(--var-color-sec-text);
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center; /* vertically align everything in heading to center */
/*height: var(--var-size-head-height);*/
position: sticky;
top: 0;
z-index: 99;
padding-top: var(--var-pad-header-tb);
padding-bottom: var(--var-pad-header-tb);
padding-left: var(--var-pad-header-lr);
padding-right: var(--var-pad-header-lr);
}
.sb-head-logo {
display: block;
}
/* The menu bar works like this:
* Mode 1 = menu bar present on left side, real page to right of menu bar
* Mode 2 = menu bar present on left side, real page under and to right of menu bar, not accessible
* Mode 3 = menu bar shifted off page or not visible, real page taking full width
*/
.sb-menu {
/* menu bar */
overflow: auto;
height: calc(100vh - 116px);
background: var(--var-color-sec-background);
color: var(--var-color-sec-cta);
min-width: var(--var-size-menu-width);
max-width: var(--var-size-menu-width);
z-index: 97; /* must be less than sb-card-decks */
}
.sb-menu2 {
width: 100%;
padding-top: var(--var-pad-menu-tb);
padding-bottom: var(--var-pad-menu-tb);
padding-left: var(--var-pad-menu-lr);
padding-right: var(--var-pad-menu-lr);
}
/*
* Footer styling
*/
.sb-footer {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
align-items: center; /* vertically align everything in heading to center */
background: var(--var-color-sec-background);
min-height: var(--var-size-foot-height);
padding-top: var(--var-pad-header-tb);
padding-bottom: var(--var-pad-header-tb);
padding-left: var(--var-pad-header-lr);
padding-right: var(--var-pad-header-lr);
}
@media screen and (max-width: 700px) {
.sb-footer {
padding-left: var(--var-pad-header-lr);
}
}
@media screen and (min-width: 700px) {
.sb-footer {
padding-left: 158px;
}
}
.sb-footer-text {
max-width: 600px;
text-align: center;
color: var(--var-color-sec-text);
font-weight: bold;
}
/*
* This is the definition list used in many cards
*/
.sb-dl-container-left {
position: static;
min-width: 50%;
}
.sb-dl-container-right {
position: static;
}
.sb-dl {
max-width: 450px;
}
.sb-dl-full {
position: static;
}
.sb-dt {
float: left;
width: var(--var-pad-dl-left);
vertical-align: top;
}
.sb-dd {
margin-left: var(--var-pad-dl-left);
padding-left: var(--var-pad-dl-gutter);
font-weight: bold;
}
/*
* Icon styling
*/
.sb-icon-lg { /* larger icons, like in header */
font-size: var(--var-font-icon-lg);
margin-right: var(--var-pad-icon-lg);
}
.sb-icon-sm {
font-size: var(--var-font-icon-sm);
margin-right: var(--var-pad-icon-sm);
}
.sb-icon-md {
font-size: var(--var-font-icon-md);
margin-right: var(--var-pad-icon-md);
}
.sb-icon-ve { /* verified icon is light blue */
color: var(--var-color-badges);
}
.sb-icon-success { /* verified icon is light blue */
color: var(--var-color-success);
}
.sb-icon-failure { /* offline icon is red */
color: var(--var-color-destructive);
}
.sb-icon-admin { /* administrator */
color: var(--var-color-admin);
}
/*
* Button styling
*/
.sb-button-primary { /* Create a dark button */
background-color: var(--var-color-pri-cta);
color: var(--var-color-pri-accent);
border-radius: var(--var-radius-md);
padding: 5px 5px 5px 5px;
margin: 16px 0 12px 0;
border: 0;
width: fit-content;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
.sb-button-secondary { /* Create a light button */
background-color: var(--var-color-sec-cta);
color: var(--var-color-sec-othertext);
border: 2px solid var(--var-color-sec-othertext);
border-radius: var(--var-radius-md);
padding: 5px 5px 5px 5px;
margin: 16px 0 12px 0;
width: fit-content;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
.sb-button-tertiary { /* Create an even lighter button */
/* background-color: var(--var-color-sec-cta); */
color: var(--var-color-pri-cta);
padding: 5px 5px 5px 5px;
margin: 16px 0 12px 0;
width: fit-content;
font-weight: bold;
cursor: pointer;
}
.sb-button-foe {
background-color: var(--var-color-destructive);
color: var(--var-color-sec-cta);
font-size: 14px;
border-radius: 22px;
padding: 0 10px 0 10px;
margin: 2px 0 8px 10px;
height: 25px;
width: fit-content;
font-weight: bold;
}
.sb-button-favorite {
background-color: var(--var-color-success);
color: var(--var-color-sec-cta);
font-size: 14px;
border-radius: 22px;
padding: 0 10px 0 10px;
margin: 2px 0 8px 10px;
height: 25px;
width: fit-content;
font-weight: bold;
}
.sb-button-friend {
background-color: var(--var-color-admin);
color: var(--var-color-sec-cta);
font-size: 14px;
border-radius: 22px;
padding: 0 10px 0 10px;
margin: 2px 0 8px 10px;
height: 25px;
width: fit-content;
font-weight: bold;
}
.sb-button-admin {
background-color: var(--var-color-sec-background);
color: var(--var-color-sec-cta);
font-size: 14px;
border-radius: 22px;
padding: 0 10px 0 10px;
margin: 2px 0 8px 10px;
height: 25px;
width: fit-content;
font-weight: bold;
}
.sb-button-x {
color: var(--var-color-pri-cta);
padding: 5px 20px 5px 5px;
margin: 0;
width: fit-content;
font-weight: bold;
cursor: pointer;
}
/*
* The accordian menu
*/
.sb-menu2 details {
width: 100%;
padding-bottom: 20px;
}
.sb-menu2 summary {
list-style: none; /* we'll make our own marker */
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}
.sb-menu2 summary::after {
/* this is how we get the unicode version of "chevron-up" */
font-family: "Font Awesome 5 Free";
font-weight: bold;
content: "\f077";
transition: 0.5s;
}
.sb-menu2 summary:hover {
background-color: var(--var-color-pri-cta);
}
.sb-menu2 details[open] > summary::after {
transform: rotate(-180deg);
}
.sb-menu2 a {
color: var(--var-color-sec-cta);
text-decoration: none;
}
.sb-menu2 a:hover {
background-color: var(--var-color-pri-cta);
}
.sb-menu2 summary::marker { /* force safari to not show marker */
content: "";
}
.sb-menu2 summary::-webkit-details-marker { /* force safari to behave */
display: none;
}
/*
* define the "card" system - these populate the row-2-2 element.
* On a small screen, there will be only one card across.
* On larger screens, the cards can populate in rows.
*/
/* for the collapsing cards */
.sb-page {
display: flex;
flex-flow: row nowrap;
}
/* all the card decks */
.sb-card-decks {
overflow: auto;
height: calc(100vh - 116px);
min-height: calc(100vh - 116px);
padding-top: var(--var-pad-main-tb);
padding-bottom: var(--var-pad-main-tb);
padding-left: var(--var-pad-main-lr);
padding-right: var(--var-pad-main-lr);
z-index: 96;
width: 100%;
}
@media screen and (min-width: 700px) {
.sb-card-decks {
padding-left: var(--var-pad-main-lr);
padding-right: var(--var-pad-main-lr);
}
}
@media screen and (max-width: 700px) {
.sb-card-decks {
padding-left: 0;
padding-right: 0;
}
}
/* this element contains all the cards */
.sb-card-deck {
display: flex;
flex-flow: row wrap;
width: 100%;
}
/******** Different Types of individual Cards *********/
/* make the card fill the rest (or all?) of a row */
.sb-card,.sb-card-noclose {
width: 100%;
background: var(--var-color-pri-background);
margin-top: var(--var-pad-card-below);
}
/* make the card adaptable for another card to the right */
.sb-card-adapt {
flex-basis: 400px;
}
/* force the card to be narrow */
.sb-card-narrow {
flex-basis: auto;
max-width: 200px;
}
.sb-card details,.sb-card-noclose details {
/*display: flex;
flex-flow: row wrap;*/
background: var(--var-color-pri-background);
padding: 0;
}
.sb-card-body-dark { /* modifies sb-card-body */
/* just leave the background alone */
padding-left: 16px;
}
.sb-card-info {
background: var(--var-color-pri-accent);
width: 100%;
padding-top: var(--var-pad-card-t);
padding-bottom: var(--var-pad-card-b);
padding-left: var(--var-pad-card-lr);
padding-right: var(--var-pad-card-lr);
margin-bottom: var(--var-pad-card-below);
margin-right: 0;
}
.sb-card-info-flex { /* add flex to the sb-card-info for the dl-left/dl-right combinations */
display: flex;
flex-flow: row wrap;
flex-grow: 1;
}
.sb-card-info-cream {
background: var(--var-color-pri-background);
width: 100%;
padding-top: var(--var-pad-card-t);
padding-bottom: var(--var-pad-card-b);
padding-left: var(--var-pad-card-lr);
padding-right: var(--var-pad-card-lr);
}
.sb-card summary,.sb-card-noclose summary,.sb-summary { /* this is the card header */
list-style: none; /* we'll make our own marker */
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
background-color: var(--var-color-sec-background);
color: var(--var-color-sec-text);
padding-top: var(--var-pad-header-tb);
padding-bottom: var(--var-pad-header-tb);
padding-left: var(--var-pad-header-lr);
padding-right: var(--var-pad-header-lr);
min-height: var(--var-size-card-header-height);
font-weight: 600;
border-radius: var(--var-radius-lg) var(--var-radius-lg) 0 0;
cursor: pointer;
}
.sb-card summary.sb-admin-header {
background-color: var(--var-color-admin);
}
.sb-card summary.sb-admin-header:hover {
background-color: color-mix(in srgb, var(--var-color-admin) 70%, black);
}
.sb-card summary::after {
/* this is how we get the unicode version of "chevron-down" */
font-family: "Font Awesome 5 Free";
font-weight: bold;
content: "\f078";
transition: 0.2s;
}
.sb-card summary:hover {
background-color: var(--var-color-pri-cta);
}
.sb-card details[open] > summary::after {
transform: rotate(-180deg);
}
.sb-card summeary::marker { /* force safari to not show marker */
content: "";
}
.sb-card summary::-webkit-details-marker { /* force safari to behave */
display: none;
}
.sb-card h1 {
font-size: var(--var-font-h1);
font-weight: 700;
margin-bottom: 8px;
}
.sb-card h2 {
font-size: var(--var-font-h2);
font-weight: 700;
margin-top: 10px;
}
.sb-card h3 {
font-size: var(--var-font-h3);
font-weight: 700;
margin-top: 4px;
}
.sb-card a {
font-weight: bold;
color: var(--var-color-pri-cta);
}
.sb-card p { /*
paragraph */
margin: 8px 0 8px 0;
}
.sb-card hr { /* horizontal rule */
width: 100%;
border-top: 1px solid var(--var-color-content-dark);
margin: 8px 0 8px 0;
opacity: 100%;
}
.sb-card-info-split { /* horizontal rule to split sb-card-info area */
width: 100%;
border: 10px solid black;
height: 8px;
background-color: var(--var-color-pri-background);
margin: 8px 0 8px 0;
}
.sb-card input {
margin: 8px 0 8px 0;
width: 100%;
}
.sb-card select {
margin: 8px 0 8px 0;
width: 100%;
}
/*
* Random styling
*/
.sb-profile-link {
color: var(--var-color-pri-cta);
text-decoration: underline;
font-weight: bold;
}
.sb-user {
display: inline;
font-size: 24px;
font-weight: bold;
}
.sb-location {
font-size: 20px;
font-weight: bold;
}
.sb-thumbnails { /* for arrays of thumbnails, no styling for now */
position: static;
}
/* these enclosures allow positioning of the div's containing elements (such as buttons) in a horizontal row */
.sb-row-right { /* for one button, on the right */
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;
}
.sb-row { /* for one to three buttons, left to right */
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
}
/* the sb-disabled class is added to a "disabled" div, disable all divs and inputs below */
.disablediv {
pointer-events: none;
opacity: 0.4;
}
/* styles for modal windows...popup windows for item selection, such as filters */
.modal-content { /* Outer modal box settings */
color: var(--var-color-pri-text);
background-color: var(--var-color-pri-background);
border-radius: var(--var-radius-md);
}
.modal-body { /* next inner box of the modal window */
padding: var(--var-pad-card-t) 0 0 0;
}
.modal-header {
padding: 8px 0 0 16px;
border-bottom: none;
}
.modal-footer {
justify-content: space-between;
padding: 0 var(--var-pad-card-lr) 0 var(--var-pad-card-lr);
border-top: solid 1px var(--var-color-content-dark);
}
/* The accordian system for modal windows */
.modal-body details {
margin-bottom: 8px;
background: var(--var-color-pri-accent);
}
.modal-body summary {
padding: 8px var(--var-pad-card-lr) 8px var(--var-pad-card-lr);
list-style: none; /* we'll make our own marker */
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}
.modal-body summary::after {
/* this is how we get the unicode version of "chevron-up" */
font-family: "Font Awesome 5 Free";
font-weight: bold;
content: "\f077";
transition: 0.5s;
}
.modal-body details[open] > summary::after {
transform: rotate(-180deg);
}
.modal-body details[open] div {
padding: 8px var(--var-pad-card-lr) 8px var(--var-pad-card-lr);
border-top: solid var(--var-color-content-light) 1px;
}
.modal-body a {
color: var(--var-color-sec-cta);
text-decoration: none;
}
.modal-body input {
margin: 5px 0 5px 0;
}
.modal-body a:hover {
background-color: var(--var-color-pri-cta);
}
.modal-body summeary::marker { /* force safari to not show marker */
content: "";
}
.modal-body summary::-webkit-details-marker { /* force safari to behave */
display: none;
}
h1 {
font-size: var(--var-font-h1);
font-weight: 700;
margin-bottom: 8px;
}
h2 {
font-size: var(--var-font-h2);
font-weight: 700;
margin-top: 10px;
}
h3 {
font-size: var(--var-font-h3);
font-weight: 700;
margin-top: 4px;
}
a {
font-weight: bold;
color: var(--var-color-pri-cta);
}
p { /*
paragraph */
margin: 8px 0 8px 0;
}
hr { /* horizontal rule */
width: 100%;
border-top: 1px solid var(--var-color-content-dark);
margin: 8px 0 8px 0;
opacity: 100%;
}
/*
* Input css
*/
input[type="checkbox"] { /* input type="checkbox" */
position: absolute;
left: -9999px;
opacity: 0;
}
input[type="checkbox"] + label:before {
font-family: "Font Awesome 5 Free";
}
input[type="checkbox"]:not(:checked) + label:before {
content: "\f0c8";
font-weight: 200;
}
input[type="checkbox"]:checked + label:before {
/* content: "\f058";*/
content: "\f14a";
font-weight: bold;
}
input[type="radio"] {
position: absolute;
left: -9999px;
opacity: 0;
}
input[type="radio"] + label:before {
font-family: "Font Awesome 5 Free";
}
input[type="radio"]:not(:checked) + label:before {
/*content: "";*/
content: "\f111";
font-weight: 200;
}
input[type="radio"]:checked + label:before {
content: "\f058";
font-weight: bold;
}
/*
* Change the pagination links to meet our look/feel
*/
.page-item.active .page-link{
z-index: 3;
color: #fff !important ;
font-weight: bold;
background-color: var(--var-color-pri-cta) !important;
border-color: var(--var-color-pri-cta) !important;
border-radius: var(--var-radius-md);
padding: 3px 12px;
}
.page-link{
z-index: 3;
color: #000000 !important;
background-color: #fff;
border-color: var(--var-color-pri-cta);
border-radius: var(--var-radius-md);
padding: 3px 12px !important;
}
.page-item:first-child .page-link{
border-radius: var(--var-radius-md) !important;
}
.page-item:last-child .page-link{
border-radius: var(--var-radius-md) !important;
}
.pagination li{
padding: 3px;
}
.disabled .page-link{
color: #212529 !important;
opacity: 0.5 !important;
}
.sb-container-flex {
display: flex;
flex: row wrap;
width: 100%;
}
.sb-container-left {
margin-right: 12px;
flex: 50%;
}
.sb-container-right {
flex: 50%;
}
@media (max-width: 800px) {
.sb-container-flex {
flex-direction: column;
}
.sb-container-left {
margin-right: 0;
}
}
.flex-60 {
flex:1 1 60% !important
}
.flex-40 {
flex:1 1 40% !important
}
.pages img {
max-width:100%;
height:auto;
}
.mobile .pages video {
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
.sb-thumbnail-sm {
width: 52px;
height: 52px;
margin: 0px;
}