website/web/static/css/theme.css

/* Custom CSS styles */

abbr {
    cursor: help;
}

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

.cursor-pointer {
    cursor: pointer;
}

.cursor-default {
    cursor: default;
}

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);
}
.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%);
}

.hero.is-inner-circle {
    background-image: linear-gradient(141deg, #294eb3 0, #9948c7 71%, #d256d2 100%)
}

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

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

/* Bulma hack: full-width columns in photo card headers */
.nonshy-fullwidth {
    width: 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;
}

/***
 * 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-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;
}