350 lines · 6.0 KB · CSS
RawDownload
/*//  SnapshotReview.css////  Created by Howard Stearns for David Rowe on August 22nd, 2016.//  Copyright 2016 High Fidelity, Inc.//  Copyright 2025 Overte e.V.////  Distributed under the Apache License, Version 2.0.//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html*/ /*// START styling of top bar and its contents*/ .title {    padding: 6px 10px;    text-align: left;    height: 26px;    line-height: 26px;    clear: both;} .title label {    position: relative;    font-size: 18px;    float: left;} #snapshotSettings {    position: relative;    float: right;}#settingsLabel {    position: relative;    float: right;    font-family: Raleway-SemiBold;    font-size: 14px;}.hifi-glyph {    font-size: 30px;    top: -4px;}input[type=button].naked {    color: #afafaf;    background: none;}input[type=button].naked:hover {    color: #ffffff;}input[type=button].naked:active {    color: #afafaf;}/*// END styling of top bar and its contents*/ /*// START styling of snapshot instructions panel*/.snapshotInstructions {    font-family: Raleway-Regular;    margin: 0 20px;    width: 100%;    height: 50%;}/*// END styling of snapshot instructions panel*/ /*// START styling of snapshot pane and its contents*/#snapshot-pane {    width: 100%;    height: 560px;    display: flex;    justify-content: center;    align-items: center;} #snapshot-images {    width: 100%;    display: flex;    justify-content: center;    flex-direction: column;} #snapshot-images img {    max-width: 100%;    max-height: 100%;} .gifLabel {    position:absolute;    left: 15px;    top: 10px;    font-family: Raleway-SemiBold;    font-size: 18px;    color: white;    text-shadow: 2px 2px 3px #000000;}/*// END styling of snapshot pane and its contents*/ /*// START styling of share overlay*/.shareControls {    display: flex;    justify-content: space-between;    flex-direction: row;    align-items: center;    height: 65px;    line-height: 65px;    width: calc(100% - 8px);    position: absolute;    bottom: 4px;    left: 4px;    right: 4px;}.showShareButtonsButtonDiv {    display: inline-flex;    align-items: center;    font-family: Raleway-SemiBold;    font-size: 14px;    color: white;    width: 75px;    height: 100%;    margin-bottom: 0px;}.showShareButtonsButtonDiv.active:hover {    background-color: rgba(0, 0, 0, 0.45);    background-size: 2px;}.showShareButtonsButtonDiv > label {    text-shadow: 2px 2px 3px #000000;    margin-bottom: -14px;    margin-left: 12px;}.showShareButtonsButtonDiv:hover > label {    text-shadow: none;}.showShareButtonDots {    display: block;    width: 40px;    height: 40px;    font-family: HiFi-Glyphs;    font-size: 60px;    position: absolute;    left: 6px;    bottom: 32px;    color: white;    pointer-events: none;}.shareButtons {    display: flex;    align-items: flex-end;    height: 40px;    width: calc(100% - 60px);    margin-bottom: -24px;    margin-left: 0;}.shareButtons img {    width: 40px;    height: 40px;}.shareButton {    width: 40px;    height: 40px;    display: inline-block;}.shareButton.disabled {    background-color: #000000;    opacity: 0.5;}.shareControlsHelp {    height: 25px;    line-height: 25px;    position: absolute;    bottom: 40px;    left: 73px;    right: 0;    font-family: Raleway-Regular;    font-weight: 500;    font-size: 16px;    padding-left: 8px;    color: white;}.helpTextDiv {    width: 350px;    height: 65px;    margin-right: 15px;    line-height: 65px;    position: absolute;    bottom: 0;    right: 0;    font-family: Raleway-Regular;    font-weight: 500;    font-size: 16px;    color: white;}/*// END styling of share overlay*/ /*// START styling of confirmation message*/.confirmationMessageContainer {    width: 100%;    height: 100%;    position: absolute;    background-color: rgba(0, 0, 0, 0.45);    text-align: center;    left: 0;    top: 0;    pointer-events: none;    color: white;    font-weight: bold;    font-size: 16px;}.confirmationMessage {    width: 130px;    height: 130px;    margin: 50px auto 0 auto;}.confirmationMessage > img {    width: 72px;    height: 72px;    display: block;    margin: 0 auto;    padding: 10px 0 0 0;}/*// END styling of uploading message*/ /*// START styling of snapshot controls (bottom panel) and its contents*/#snapshot-controls {    width: 100%;    position: absolute;    left: 0;    overflow: hidden;    display: flex;    justify-content: center;}#snap-settings {    display: inline;    width: 150px;    margin: 2px auto 0 auto;}#snap-settings form input {    margin-bottom: 5px;} #snap-button {    width: 72px;    height: 72px;    padding: 0;    border-radius: 50%;    background: #EA4C5F;    border: 3px solid white;    margin: 2px auto 0 auto;    box-sizing: content-box;    display: inline;    outline:none;    color: #f5bdc7;    font-size: 11px;}#snap-button:disabled {    background: gray;    color: #eee;}#snap-button:hover:enabled {    background: #C62147;}#snap-button:active:enabled {    background: #EA4C5F;}#snap-settings-right {    display: inline;    width: 150px;    margin: auto;}/*// END styling of snapshot controls (bottom panel) and its contents*/  /*// START polaroid styling*/ #print-button {    width: 72px;    height: 72px;    margin-left: 30px;    margin-top: -10px;    box-sizing: content-box;    display: inline;    outline:none;} .print-icon {    margin: auto;} .print-icon-default {    background: url(../img/button-snap-print.svg) no-repeat;    margin-right: -1px;    width: 64px;    height: 64px;} .print-icon-loading {    background: url(../img/loader.gif) no-repeat;    width: 32px;    height: 32px;} /*// END polaroid styling*/  /*// START misc styling*/body {    padding: 0;    margin: 0;    overflow: hidden;}p {    margin: 2px 0;}h4 {    margin: 14px 0 0 0;}.centeredImage {    margin: 0 auto;    display: block;}/*// END misc styling*/