[panikdb.git] / panikdb / static / css / style.scss

div#header {
        background: #282f2e url(../images/banner-1054.png) no-repeat 0px top;
        height: 93px;
        z-index: 100;
}

div#top {
        float: right;
        background: rgba(0, 0, 0, 0.8);
        height: auto;
        box-sizing: border-box;
        padding: 1ex;
        color: #eee;
        position: relative;
        z-index: 1000;
        border-radius: 0 0 0 1ex;
}

div#top a {
        padding: 0 1ex;
        color: white;
}

div#main-content {
        padding-top: 0;
        overflow: visible;
}

div#more-user-links {
        margin-top: -1ex;
        margin-bottom: 1em;
}

div#content {
        margin-top: 1ex;
}

div#content h3 {
        margin-top: 0;
        font-weight: normal;
        color: #656551;
        font-size: 18px;
        letter-spacing: -1px;
        line-height: 25px;
        margin-bottom: 20px;
}

ul.episode-list {
        line-height: 1.5em;
        padding: 1ex 2ex 1ex 3ex;
}

hr {
        clear: both;
        border: 0;
        border-bottom: 1px solid #888;
        margin: 10px auto 20px auto;
        width: 80%;
}

body.login div#search,
body.login div#more-user-links {
        display: none;
}

body.login #header {
        border: 1px solid #666;
}

body.login #main {
        max-width: 100ex;
        margin: 0 auto;
}

body.login #content {
        background: white;
        padding: 1rem;
}

body.login div#main-content {
        border-width: 0 1px 1px 1px;
        box-sizing: border-box;
}

form#login-form p {
        float: left;
        width: 40%;
}

form#login-form button {
        margin-top: 1.8rem;
}

div.login-actions {
        clear: both;
        padding-top: 2em;
}

div.login-actions p {
        margin: 0;
}

form.inline p label {
  display: inline;
}

form .inline label {
  display: inline;
}
form .inline li {
  display: inline;
}

span.add-on {
        padding: 5px;
        border: 1px solid #cccccc;
        color:#666666;
        background: white;
        color: black;
        border-radius: 4px;
}

div#content h4 {
        margin-bottom: 5px;
        margin-top: 30px;
}

abbr {
        border-bottom: 1px dotted #8c8c73;
        cursor: help;
}

pre.code, pre.sample {
        border: 1px solid #babdb6;
        padding: 0.5em 1em;
        background: #fefefe;
}

div.description {
background: #eee;
border: 1px solid #ccc;
padding: 0em 1em 0 1em;
margin: 1em 0;
}

/* makes the font 33% larger relative to the icon container */
.icon-large:before {
  vertical-align: top;
  font-size: 1.3333333333333333em;
}

ul.emission-list {
  column-count: 4;
}

ul.episode-list {
  column-count: 2;
}

ul.newsitem-list {
  column-count: 2;
}

aside ul.episode-list {
        column-count: 1;
}

.fileprogress {
        border: 1px solid #888;
}

.fileprogress .bar {
        background: #09f;
        line-height: 1.5em;
        padding-left: 1ex;
        font-weight: bold;
        white-space: nowrap;
}

.fileinfo {
        line-height: 1.5em;
}

#soundfiles th,
#soundfiles td {
        padding: 1ex 1ex;
        border: 1px solid #aaa;
        border-width: 1px 0;
}

a.big-friendly-button {
        text-decoration: none;
        display: inline-block;
        padding: 1ex;
        margin: 0 1em;
        color: #ffffff;
        background: #4690d6;
        border: 1px solid #2a567f;
        font-weight: bold;
        border-radius: 5px;
}

a.big-friendly-button:hover {
        background: #2a567f;
}

a.actually-not-that-friendly {
        border-color: #F52F2D;
        color: #F52F2D;
        position: absolute;
        right: -10px;
        padding: 0 1ex;
}

a.actually-not-that-friendly:hover {
        background: #d01311;
}

div.two-columns ul.episode-list {
  column-count: 1;
}

div.two-columns > div {
        width: 48%;
        margin-right: 1%;
        float: left;
}

.input-append {
        margin-left: 10px;
        margin-bottom: 10px;
}

#content ul.select2-choices {
        min-width: 15em;
        padding: 0;
}

span.add-on {
        background: #eee;
        margin-left: 3px;
}

#s2id_id_category,
#s2id_id_emission {
        width: 30em;
}

.image {
        text-align: right;
}

.image img {
        padding: 5px;
        max-width: 200px;
        border: 1px solid #666;
        float: right;
        margin: 1em;
}

.image img.large {
        max-width: 100%;
}

span.tag {
        border: 1px solid #888;
        border-radius: 1ex;
        padding: 0 1ex;
        background: #eee;
}

div.text {
        border-bottom: 1px solid #aaa;
        margin-bottom: 1em;
}

#piece-details {
        float: right;
        margin: 1em;
}

#piece-details img {
        padding: 5px;
        max-width: 200px;
        border: 1px solid #666;
}

.matos-piece #id_comment, .matos-piece #id_location {
        height: 4em;
        width: 100%;
}

.pieces-list {
        padding: 1rem 2rem;
        background: white;
        column-width: 19em;
}

.pieces-list li {
        margin-bottom: 6px;
        margin-right: 2rem;
}

.matos-loan .loan-infos {
        float: left;
        width: 48%;
}

.matos-loan .loan-pieces {
        float: right;
        width: 48%;
}

.matos-loan .buttons {
        clear: both;
}

.soma-list .filepath {
        font-size: 80%;
        color: #888;
}

.trackartist {
        font-size: 80%;
}

.artists-list {
        column-width: 15em;
}

.on-air-False {
        opacity: 0.5;
}

[class^="icon-"]:after, [class*=" icon-"]:after,
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: none;
}
a [class^="icon-"], a [class*=" icon-"] {
  display: inline-block;
  text-decoration: none;
}

.icon-edit:before                 { content: "\f044"; }
.icon-remove-sign:before          { content: "\f057"; }
.icon-remove:before               { content: "\f00d"; }
.icon-minus:before                { content: "\f068"; }
.icon-envelope:before             { content: "\f003"; }
.icon-comment:before              { content: "\f075"; }
.icon-home-space:before           { content: "\f015 "; }
.icon-user-space:before           { content: "\f007 "; }
.icon-circle-arrow-left:before    { content: "\f0a8"; }
.icon-circle-arrow-right:before   { content: "\f0a9"; }
.icon-music:before                { content: "\f001"; }
.icon-th:before                   { content: "\f00a"; }
.icon-eye-open:before             { content: "\f06e "; }
.icon-bar-chart:before            { content: "\f080 "; }
.icon-search:before               { content: "\f002 "; }
.icon-signout:before              { content: "\f08b "; }
.icon-pushpin:before              { content: "\f08d "; }

.icon-circle-arrow-down:after     { content: "  \f0ab"; }
.icon-arrow-left:after            { content: "\f060"; }
.icon-arrow-right:after           { content: "\f061"; }

div#placeholders {
        overflow: hidden;
}

div#placeholders h3 {
        margin-bottom: 0;
        line-height: 100%;
        padding: 0.5ex 1ex;
}

body.combo div.select2-container {
        width: 100%;
}

body.combo a.view-online {
        display: none;
}

div.nonstop-stats h3 span {
        font-weight: normal;
        font-size: 70%;
}

.objects-list li.disabled {
        background: #ddd;
        span.tag {
                background: #666;
        }
}

div#content div#available-cells ul {
        padding: 0;
}

div.poll {
        border-radius: 10px;
        margin: 0 auto;
        text-align: center;
        max-width: 30em;
        background: #FF7600;
        border: 1px solid red;
}

div.poll a {
        display: inline-block;
        width: 100%;
        padding: 3em;
        color: white;
        font-weight: bold;
}

form.poll img {
        margin-left: 1em;
        margin-right: 4em;
}

form.poll p {
        margin-top: 1em;
}

form.poll textarea {
        width: 100%;
        max-width: 40em;
        height: 10em;
}

form.poll div.buttons {
        margin-top: 1em;
}

form.poll div.error {
        padding: 1ex;
        max-width: 40em;
        margin: 2em;
        border: 2px solid red;
}

table#playlist {
        border-spacing: 1em;
        border-collapse: unset;
        width: 100%;
}

table#playlist td.playlist-title {
        border: 1px outset black;
        background: #eee;
        text-align: center;
        padding: 1ex;
        cursor: pointer;
        position: relative;
}

table#playlist .shortcut {
        position: absolute;
        right: 1ex;
        font-size: 90%;
}

table#playlist td:last-child {
        color: #444;
        font-style: italic;
}

.button-done {
        opacity: 0.5;
}

table#playlist td.handle {
        width: 10px;
        color: white;
        background: #666;
        cursor: grab;
}

body.submitting {
        opacity: 0.5;
        pointer-events: none;
}

div#content ul.team {
        padding: 0;
        padding-left: 1ex;
        margin: 0;
}

ul.team li {
        display: inline;
        padding: 0;
        margin: 0;
}

ul.team li::after {
        content: " / ";
}

div.two-columns.schedule-team {
        width: 60%;
}

div.two-columns.schedule-team > div:first-child {
        width: 30%;
}

div.two-columns.schedule-team > div:nth-child(2) {
        width: 68%;
}

.extra-actions-menu {
        display: none;
}

ul.gallery li {
        display: inline-block;
        position: relative;
        padding-bottom: 20px;
}

ul.gallery li span.image-actions {
        position: absolute;
        bottom: 0;
        right: 0;
}

table {
        max-width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
}

.dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        display: none;
        float: left;
        min-width: 160px;
        padding: 5px 0;
        margin: 2px 0 0;
        margin-top: 2px;
        font-size: 14px;
        list-style: none;
        background-color: #ffffff;
        border: 1px solid #cccccc;
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: 4px;
        -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
        background-clip: padding-box;
}

div#search {
        position: absolute;
        top: 40px;
        right: 10px;
}

select#id_datetime_0, select#id_datetime_1, select#id_datetime_2 {
        width: auto;
        margin-right: 1em;
}

div.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close::after {
        content: "×";
}

form#track-search p {
        float: left;
        margin-right: 1em;
}

form#track-search button {
        margin-top: 2.5ex;
}

#more-user-links a {
        background: white;
        border: 1px solid #386ede;
        padding: 1ex;
        border-radius: 3px;
        font-weight: bold;
}

.home .block {
        background: white;
        padding: 1rem;
        margin-bottom: 1rem;
        border-radius: 3px;
}

.home .block hr {
        border-color: white;
}

.action-see-online {
        display: none;
}

.select2-container {
        min-width: 90%;
}

.block.program {
        ul, li {
                list-style: none;
                margin: 0;
                padding: 0;
        }
        li.now {
                font-weight: bold;
        }
}

.nonstop-days {
        display: flex;
        justify-content: space-between;
        > div {
                width: 16%;
                background: white;
                padding: 0.5em 1em;
        }
}

#id_start_p {
        float: left;
        margin-right: 2em;
}

#id_jingles_p {
        clear: both;
        ul {
                column-width: 15em;
        }
}

#content .bo-block.team {
        h3, ul.team {
                display: inline-block;
                margin-bottom: 0;
        }
}

table#edit-metadata {
        th {
                padding: 0 0.6em 1em 0;
        }
        td {
                padding: 0 1.6em;
        }
        thead {
                background: white;
                position: sticky;
                top: 0;
        }
        tr:hover {
                background: #eee;
        }
}

form div[id^="id_weight"] {
        display: flex;
        align-items: center;
        div.title {
                display: inline-block;
                width: 25em;
        }
        div.content {
                display: inline-flex;
        }
        margin-bottom: 0.5em;
}

div#content div.section > h3 {
        background: linear-gradient(to right, #386ede 30%, #00d6eb 100%);
        color: white;
}

div#content div.wiki-section h3 {
        margin-bottom: 0;
}

#quickedit {
        position: absolute;
        top: 0.15em;
        right: 2px;
        label {
                display: inline-block;
                margin-left: 6px;
                cursor: pointer;
        }
        input {
                display: none;
        }

        button,
        span {
                display: inline-block;
                font-weight: normal;
                background: white;
                border: 1px solid #386ede;
                padding: 1ex;
                border-radius: 3px;
                color: #386ede;
        }
        button:hover {
                &:hover {
                        color: white;
                        background: #386ede;
                }
        }

        input:checked + span {
                background: #386ede;
                color: white;
        }
}

div[contenteditable=true] {
        outline: 2px solid #386ede;
        outline-offset: 12px;
}

.inline-style-popup,
.block-style-popup {
        background: white;
        box-shadow: 0 0 5px #666;
        input {
                display: none;
                margin: 0;
                padding: 3px;
                border: 1px inset #ccc;
                background: white;
                width: 0px;
                transition: width ease 2s;
                &.shown {
                        display: inline-block;
                        width: 400px;
                }
        }
        button {
                padding: 0 0.5em;
                height: 2em;
                text-align: center;
                font-weight: normal;
                color: #333;
                background: #eee;
                border: 0px;
                &:hover {
                        background: #ccc;
                }
                &[data-action=createLink] {
                        color: blue;
                        text-decoration: underline;
                }
                &.on {
                        background: #444;
                        color: white;
                }
        }
        &.inline-style-popup button {
                width: 2em;
                padding: 0;
        }
        &.block-style-popup {
                &.selected button {
                        display: none;
                        &.on {
                                display: block;
                        }
                }
        }
}

div.wiki-section {
        position: relative;
        margin: 0 auto;
        max-width: 45em;
        font-size: 16px;
        border: none;
        line-height: 150%;
        pre.code {
                background: #111;
                color: white;
                padding: 2px;
                max-width: 100%;
                overflow: auto;
                font-size: 90%;
        }
        div.note {
                margin: 1em auto;
                width: 80%;
                border: 1px solid #babdb6;
                background: #F3F3F0 url(../images/yelp-note.png) no-repeat 1ex 1ex;
                padding: 1ex 1ex 1ex 7ex;
                p:first-child {
                        margin-top: 0;
                }
        }
        [contenteditable=true] div.figure {
                cursor: pointer;
        }
        div.document,
        div.figure {
                text-align: center;
                line-height: initial;
                img {
                        max-width: 90%;
                        max-height: 70vh;
                }
                span.empty::before {
                        min-height: 50px;
                        margin: 0 auto;
                        display: block;
                        width: 90%;
                        background: #eee;
                        padding: 1rem;
                        font-size: 200px;
                        content: "\f03e";
                        color: #aaa;
                        font-family: FontAwesome;
                }
        }
        div.document a {
                &::before {
                        content: "\f019";
                        font-family: FontAwesome;
                        padding-right: 0.7em;
                }
        }
        div.document span.empty::before {
                content: "\f0f6";  // fa-file-text-o
        }
        div[contenteditable] {
                a[href^="/wiki/"] {
                        box-shadow: inset 0 -8px 0 0 rgba(34, 27, 242,0.1);
                        color: #073593;
                        transition: box-shadow ease 0.2s;
                        &:hover {
                                box-shadow: inset 0 -21px 0 0 rgba(34, 27, 242,0.3);
                        }
                }
                a[href^="http://"], a[href^="https://"] {
                        &::after {
                                content: "\f08e"; /* external link */
                                font-family: FontAwesome;
                                font-size: 80%;
                                position: relative;
                                padding-left: 5px;
                                top: -4px;
                        }
                }
        }
}

div#content div.wiki-section > h3 {
        position: sticky;
        top: 0;
}

div#content div.wiki-section h4.intertitle {
        margin-bottom: 1em;
}

.wiki-breadcrumbs-separator {
        padding-left: 1em;
}

.latest-page-updates-cell--item-date {
        font-size: 80%;
}

.latest-page-updates-cell--item-isnew {
        background: #f1f92f;
        color: black;
        font-size: 80%;
        position: relative;
        top: 0px;
}

#document-upload,
#image-upload {
        visibility: hidden;
}

body.loading {
        cursor: wait;
}

body.loading::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 10px;
        background: #386ede;
        z-index: 1100;
        animation-name: load_animation;
        animation-duration: 1000ms;
        animation-timing-function: ease-out;
        transition: opacity 500ms linear;
}

@keyframes load_animation {
        0% { right: 100%; }
        100% { right: 0%; }
}

#search-results {
        background: white;
        ul, li {
                list-style: none;
                margin: 0;
                padding: 0;
        }
        a {
                display: block;
                padding: 0.6rem;
        }
}