/* app css stylesheet */ @import "elements.less"; @pop-color: #ff554e ; @primary-font: 'Open Sans', sans-serif; @secondary-font: 'Open Sans', serif; @font-color: lighten(#5b5252, 40%); @border-color: darken(#5b5252, 20%); @header-color: darken(white, 10%); body { background: url('/api/db/meta/camel/img/support/background.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; color: @font-color; line-height: 26px; } .bg{ padding: 10px; background-image: url('/api/db/meta/camel/img/support/bg-trans.png'); border: 1px solid @border-color; } .btn{ border-radius: 0px; font-family: @primary-font; font-size: 20px; color: white; display: block; background-color: @pop-color; text-transform: uppercase; border: 1px solid darken(@pop-color, 10%); padding: 10px; margin-top: 0px; margin-top: 5px; .transition(.5s, ease-out); &:hover{ background-color: darken(@pop-color, 13%); .transition(.5s, ease-out); color: white; } } a.cart-remove{ color: @pop-color; cursor: pointer; } .menu { list-style: none; border-bottom: 0.1em solid black; margin-bottom: 2em; padding: 0 0 0.5em; } .menu:before { content: "["; } .menu:after { content: "]"; } .menu > li { display: inline; } .menu > li:before { content: "|"; padding-right: 0.3em; } .menu > li:nth-child(1):before { content: ""; padding: 0; } #payment{ margin-top: 40px; } .alert-success{ background-image: url('/api/db/meta/camel/img/support/bg-trans.png'); border: 1px solid @border-color; color: @pop-color; background-color: transparent; } h1{ font-family: @primary-font; font-size: 86px; text-transform: uppercase; letter-spacing:2px; margin-top: 0px; text-align: center; font-weight: 100; border-top: 4px solid @header-color; border-bottom: 4px solid @header-color; text-shadow: 1px 1px 1px rgba(0, 0, 0, 1); color: @header-color; width: 100%; } h2{ font-family: @primary-font; font-size: 46px; text-transform: uppercase; letter-spacing:2px; margin-top: 0px; text-align: center; font-weight: 100; color: @header-color; } iframe{ margin: -7px 0px; } .loaderGif{ width: 100%; } #loader{ width: 20%; margin: 100px auto; display: block; } h3.instruction{ font-family: @secondary-font; font-weight: 100; font-style: italic; text-align: center; } .track-info{ margin-top: 25px; } .choices{ overflow-y: scroll; overflow-x: hidden; height:425px; } .toggle-title{ padding-left: 0px; } .selected .shell{ border: 5px solid @pop-color; padding: 8px !important; .transition(.5s, ease-out); } div.toggle{ margin-bottom: 10px; .bg{ margin-left: -15px; margin-right: -15px; } } div.section{ margin-bottom: 10px; .bg{ margin-left: -15px; margin-right: -15px; } } .options { img{ visibility: hidden; position: absolute; } .option{ padding-left: 5px; padding-right: 5px; } .option .shell{ .transition(.3s, ease-out); cursor:pointer; background-repeat: no-repeat; background-size: cover; background-position: center; position: relative; color: white; padding: 10px; height: 200px; .title{ text-shadow: 1px 1px 2px rgba(0, 0, 0, 1); } .description{ visibility: hidden; } } .detail{ .transition(.3s, ease-out); .description{ /* visibility: visible; position: absolute; bottom: 10px; right: 10px; text-align: right; */ } } } .modal-backdrop.am-fade { opacity: .5; transition: opacity .15s linear; &.ng-enter { opacity: 0; &.ng-enter-active { opacity: .5; } } &.ng-leave { opacity: .5; &.ng-leave-active { opacity: 0; } } } .collapse.am-collapse { animation-duration: .3s; animation-timing-function: ease; animation-fill-mode: backwards; overflow: hidden; &.in-remove { animation-name: collapse; display: block; } &.in-add { animation-name: expand; } } .app{ margin-top: 15px; margin-bottom:15px; } .choices h4.title { font-family: @primary-font; font-size: 30px; display: block; background-color: @pop-color; text-transform: uppercase; border: 1px solid darken(@pop-color, 10%); padding: 10px; margin-top: 0px; color: white; font-weight: 100; } .options{ .transition(.5s, ease-out); } .focused{ display:block; } .visual { .option{ padding-left: 5px; padding-right: 5px; min-height: 100px; img{ width: 100%; } h5{ font-size: 10px; } } } span.badge{ color: @pop-color; background-color: white; } .modal-content { background-image: url('/api/db/meta/camel/img/support/bg-trans.png'); border: 1px solid white; background-color: transparent; color: white; } //---------------------------------------------------MEDIA QUERIES ------------------------------------------- @media (max-width: 1200px) { .btn{ font-size: 12px; } } //fonts