website/web/static/css/theme.css

/* Custom CSS styles */

html {
    /* With the fixed top nav bar, this works around anchor-links to make them appear
       correctly BELOW the nav bar instead of overlapped underneath it. */
    scroll-padding-top: 52px;
}

abbr {
    cursor: help;
}

.cursor-not-allowed {
    cursor: not-allowed;
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-default {
    cursor: default;
}

.has-text-smaller {
    font-size: smaller;
}

img {
    /* https://stackoverflow.com/questions/12906789/preventing-an-image-from-being-draggable-or-selectable-without-using-js */
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

/* Container for large profile pic on user pages */
.profile-photo {
    width: 150px;
    height: 150px;
    display: block;
    border: 1px solid #000;
    background-color: #fff;
    padding: 4px;
    position: relative;
}

.profile-photo img {
    max-width: 100%;
    height: auto;
}

.profile-photo .corner {
    position: absolute;
    top: 0;
    right: 0;
}

/* Photo modals in addition to Bulma .modal-content */
.photo-modal {
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    width: auto;
}
.photo-modal #detailImg {
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
.photo-modal img {
    max-height: calc(100vh - 50px);
}
.photo-modal .alt-text {
    position: absolute;
    bottom: 4px;
    left: 4px;
}
.line-breakable {
    white-space: pre-line;
}

/* Custom bulma tag colors */
.tag:not(body).is-private.is-light {
    color: #CC00CC;
    background-color: #FFEEFF;
}

.has-text-private {
    color: #CC00CC !important;
}

.has-text-private-light {
    color: #FF99FF;
}

.hero.is-private {
    background-color: #b748c7;
}

.hero.is-private.is-bold {
    background-image: linear-gradient(141deg, #b329b1 0, #9948c7 71%, #7156d2 100%);
}

/* Mobile: notification badge near the hamburger menu */
.nonshy-mobile-notification {
    position: fixed;
    top: 10px;
    right: 50px;
    z-index: 1000;
}

/* glassy background for fixed nav bar when you scroll other elements under it */
nav.navbar {
    background-color: rgba(255, 255, 255, .75);
    backdrop-filter: blur(5px);
}

/* PWA: loading indicator in the corner of the page */
#nonshy-pwa-loader {
    display: none;
    position: fixed;
    z-index: 999999;
    bottom: 12px;
    right: 12px;
}

@media screen and (min-width: 1024px) {
    .nonshy-mobile-notification {
        display: none;
    }
}

/* Bulma hack: full-width columns in photo card headers */
.nonshy-fullwidth {
    width: 100%;
}

/* Bulma supplement: full height cards e.g. for grid layout on home page */
.is-fullheight {
    height: 100%;
}

/* Collapsible cards for mobile (e.g. filter cards) */
.card.nonshy-collapsible-mobile {
    cursor: pointer;
}

/* Hide an element */
.nonshy-hidden {
    display: none;
}

/* Blurred explicit photo */
.blurred-explicit {
    filter: blur(14px);
}

/* Bulma hack: smaller tag size inside of tab buttons. The default tag height
   is set to 2em which makes the boxed tabs too tall and the bottom line doesn't
   draw correctly. Seen on e.g. Profile Pages for the tag # of photos. */
.tabs.is-boxed>ul>li>a .tag {
    height: 1.5em !important;
}

/* Bulma breadcrumbs don't word-wrap which can cause horizontal scrolling on mobile,
   especially on forum thread pages with a long thread title. */
.breadcrumb {
    white-space: inherit;
}

/***
 * Mobile navbar notification count badge no.
 */

/* mobile view: just superset text */
.nonshy-navbar-notification-count {

    font-size: xx-small;
    padding-bottom: 12px;
    margin-right: -4px;
    margin-left: -4px;
}

/* desktop view: colored badge similar to bulma `tag is-warning ml-1`*/
.nonshy-navbar-notification-tag {
    align-items: center;
    border-radius: 4px;
    display: inline-flex;
    font-size: xx-small;
    height: 1em;
    justify-content: center;
    vertical-align: top;
    line-height: 1.5;
    padding: .75em;
    white-space: nowrap;
    margin-bottom: auto;
}

.nonshy-navbar-notification-tag.is-warning {
    background-color: #ffd324;
    color: rgba(0, 0, 0, 0.7);
}

.nonshy-navbar-notification-tag.is-info {
    background-color: #0f81cc;
    color: #fff;
}

.nonshy-navbar-notification-tag.is-link {
    background-color: rgb(66, 88, 255);
    color: #fff;
}

.nonshy-navbar-notification-tag.is-danger {
    background-color: #ff0537;
    color: #fff;
}

.nonshy-navbar-notification-tag.is-success {
    background-color: #3ec487;
    color: #fff;
}

.nonshy-navbar-notification-tag.is-mixed,
.tag.is-mixed {
    background: linear-gradient(141deg, #ff0537 0, #3ec487 100%);
    color: #fff;
}

/* Home page marketing styles */
.nonshy-home-card .card-header {
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-color: #400040;
    height: 64px;
}

.nonshy-htsignup {
    display: none;
}

/* Dashboard notification page styles */
.nonshy-notification-row {
    position: relative;
}
.nonshy-notif-delete-button {
    position: absolute;
    top: 4px;
    right: 4px;
}