.facer-editor { position: fixed; top: 0; left: 0; right: 0; bottom: 0; height: 100%; /** { -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important; }*/ } .facer-editor .facer-editor-inner-wrapper { width: 100%; min-width: 992px; margin: 0 auto; height: 100%; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .facer-editor #photoAlbum { position: fixed; top: -9999px; left: -9999px; } .facer-editor #photoAlbum canvas { width: 312px !important; height: 390px !important; } .facer-editor #mobileMessage { position: fixed; top: 0; right: 0; bottom: 0; left: 0; color: #FFF; background: rgba(0, 0, 0, 0.8); z-index: 100000; padding: 10px; padding-right: 50px; } .facer-editor #mobileMessage .close-button { position: absolute; top: 15px; right: 15px; color: white; } .facer-editor { /*#circlePreview:after, #squarePreview:after { position: absolute; top: -5px; right: 50px; height: 280px; left: 50px; background: #DDD; content: " "; z-index: -1; } #squarePreview { //position: absolute; //top: -9999px; //right: -9999px; }*/ /*.ios #preview { .lower-canvas, .upper-canvas { width: .8 * 175px !important; height: 175px !important; } }*/ /*.ios .applewatch .canvas-container { top: 30px !important; left: 0px !important; } .ios .applewatch .canvas-container, .ios .applewatch .canvas-container canvas { width: 89px !important; height: 112px !important; }*/ } .facer-editor #logo { position: relative; display: inline-block; } .facer-editor #logo img { width: 270px; margin-bottom: 20px; } .facer-editor #back { margin-right: 7px; } .facer-editor header { position: relative; height: 60px; line-height: 55px; z-index: 10; padding-right: 15px; background-color: #fff; min-width: 1080px; -webkit-box-shadow: 0px -12px 38px 12px rgba(0, 0, 0, 0.35); -moz-box-shadow: 0px -12px 38px 12px rgba(0, 0, 0, 0.35); box-shadow: 0px -12px 38px 12px rgba(0, 0, 0, 0.35); } .facer-editor header #logo img { font-style: italic; vertical-align: middle; margin: 0 20px 0 0; } .facer-editor header #logo img img { width: 50px; vertical-align: middle; } .facer-editor header #siteTitle { float: left; display: inline-block; width: 350px; margin-left: 15px; } .facer-editor header #watchfaceTitle { display: inline-block; width: 280px; line-height: normal; margin-top: 13px; } .facer-editor header #watchfaceTitle input { margin: 0 !important; } .facer-editor header .btn-default { border: none; } @media screen and (max-width: 1130px) { .facer-editor header #siteTitle { width: 350px; } .facer-editor header #watchfaceTitle { width: 240px; } } @media screen and (max-height: 740px) { .facer-editor header #siteTitle { width: 350px; } .facer-editor header #watchfaceTitle { width: 240px; } } .facer-editor header #undo, .facer-editor header #redo, .facer-editor header #download { position: relative; float: right; padding: 0 25px; -webkit-user-select: none; } .facer-editor header #undo:hover, .facer-editor header #redo:hover, .facer-editor header #download:hover { background: #DDD; } .facer-editor header #undo:active, .facer-editor header #redo:active, .facer-editor header #download:active { background: #CCC; } .facer-editor h2 { margin: 0 0 10px; color: #464646; font-size: 25px; vertical-align: bottom; font-weight: 400; } .facer-editor h4 { margin: 0 0 10px; } .facer-editor label { font-weight: 400; } .facer-editor .title { font-size: 18px; } .facer-editor .blue { color: #2BADE3; } .facer-editor .image-bg { background-color: #d5f408; } .facer-editor .text-bg { background-color: #9a6fb0; } .facer-editor .shape-bg { background-color: #ff9000; } .facer-editor .essential-bg { background-color: #f272ba; } .facer-editor .complication-bg { background-color: #72f29f; } .facer-editor .recipe-bg { background-color: #5fd9ff; } .facer-editor.google-io .image-bg { background-color: #F5426E !important; } .facer-editor.google-io .text-bg { background-color: #69C14C !important; } .facer-editor.google-io .shape-bg { background-color: #F5CF3F !important; } .facer-editor.google-io .essential-bg { background-color: #00BED5 !important; } .facer-editor.google-io .complication-bg { background-color: #616DB2 !important; } .facer-editor #editor { position: relative; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; min-width: 768px; margin-top: 0px; margin-bottom: 0px; overflow: hidden; background: #CFCFCF; } .facer-editor #editor.highlighted { border: 8px solid #38b4ec; } .facer-editor #editor .dropdown-backdrop { display: none; } .facer-editor #watchfaceTitleTemp { width: 100%; padding: 10px; border-radius: 3px; border: 1px solid #ddd; } .facer-editor #saveDraft { position: relative; } .facer-editor #saveDraft #saveDraftStatus { position: absolute; top: 32px; left: 2px; font-size: 10px; line-height: 0; white-space: nowrap; } .facer-editor .watch-canvas-wrapper { -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; z-index: 2; background: #FFF; border-radius: 5px; margin: -1px -1px -1px -1px; text-align: center; position: relative; } .facer-editor .watch-canvas-wrapper.full { z-index: 10; } .facer-editor .watch-canvas-wrapper #watchfaceTitle { z-index: 2; margin: 0 auto 20px; width: 300px; position: relative; } .facer-editor .watch-canvas-wrapper #watchfaceTitle input { padding: 5px 10px; border-radius: 5px; background: transparent; border: none; text-align: center; color: #999; font-size: 20px; } .facer-editor .watch-canvas-wrapper #watchfaceTitle input:hover { border: 1px solid #999; } .facer-editor .watch-canvas-wrapper #watchfaceTitle input:focus { border: 1px solid #999; outline: none; } .facer-editor .watch-canvas-wrapper #watchfaceTitle.fullscreen { margin-bottom: 80px; } .facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper { padding-bottom: 60px !important; box-shadow: 0 0 10px #a0a0a0; } .facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper.preview-mode { background-image: url("/img/graph-bg.png"); background-position-y: 20px; } .facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper, .facer-editor .watch-canvas-wrapper .browser-wrapper { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 5px; overflow: hidden; z-index: 1; } .facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper.full, .facer-editor .watch-canvas-wrapper .browser-wrapper.full { top: -16px; right: -16px; bottom: -16px; left: -296px; border-radius: 0; } .facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper.highlighted, .facer-editor .watch-canvas-wrapper .browser-wrapper.highlighted { border-color: #38b4ec; } .facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool, .facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool { position: absolute; cursor: pointer; padding: 10px 15px; text-align: left; } .facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button, .facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button { color: #000; position: relative; -webkit-user-select: none; } .facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button.btn-primary, .facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button.btn-primary { color: #FFF; } .facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button:not(:first-child), .facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button:not(:first-child) { margin-left: 5px; } .facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button:after, .facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button:after { content: " "; position: absolute; left: -5px; top: -5px; right: -5px; bottom: -5px; } .facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button:hover, .facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button:active, .facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button:hover, .facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button:active { color: #38b4ec; text-decoration: none; } .facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button:active, .facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .watch-canvas-corner-tool-button:active { opacity: .75; } .facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .small-square, .facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .small-circle, .facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .small-square, .facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .small-circle { display: inline-block; width: 15px; height: 15px; background: #AAA; white-space: nowrap; } .facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .small-square.selected, .facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .small-circle.selected, .facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .small-square.selected, .facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .small-circle.selected { background: #555; } .facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool .small-circle, .facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool .small-circle { border-radius: 50%; } .facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool.top-left, .facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool.top-left { top: 0; left: 0; margin-top: 6px; } .facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool.top-right, .facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool.top-right { top: 0; right: 0; text-align: right; } .facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool.bottom-left, .facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool.bottom-left { bottom: 0; left: 0; } .facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool.bottom-right, .facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool.bottom-right { bottom: 0; right: 0; text-align: right; } .facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool.bottom, .facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool.bottom { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; background: #EFEFEF; padding: 10px 15px 10px; bottom: 0; right: 0; left: 0px; /*[type=range]::-ms-track { border: 15px solid transparent !important; border-width: 15px 0 !important; }*/ /*input[type=range]::-ms-fill-lower { background: transparent; border: 0 none; } input[type=range]::-ms-fill-upper { background: transparent; border: 0 none; } input[type=range]::-ms-tooltip { display: none; }*/ } .facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool.bottom .timeline, .facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool.bottom .timeline { -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; } .facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool.bottom [type=range], .facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool.bottom [type=range] { width: 100%; height: 1px; -webkit-appearance: none; background: transparent; position: relative; z-index: 1; } .facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool.bottom [type=range]::-webkit-slider-runnable-track, .facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool.bottom [type=range]::-webkit-slider-runnable-track { width: 100%; margin-bottom: 7px; background: #AAA; height: 1px; border: none; } .facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool.bottom [type=range]::-webkit-slider-thumb, .facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool.bottom [type=range]::-webkit-slider-thumb { position: relative; -webkit-appearance: none; margin-top: -7px; width: 15px; background: #AAA; height: 15px; border: none; border-radius: 50%; /*&:after { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: monospace; }*/ } .facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool.bottom [type=range]:active::-webkit-slider-thumb, .facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool.bottom [type=range]:active::-webkit-slider-thumb { background: #555; } .facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool.bottom [type=range]:focus, .facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool.bottom [type=range]:focus { outline: none; } .facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool.bottom #currentTimeSliderWrapper, .facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool.bottom #currentTimeSliderWrapper { position: relative; padding: 21px 10px 18px; margin: 0 15px 0 0; background: #DDD; border-radius: 5px; } .facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool.bottom #currentTime, .facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool.bottom #currentTime { position: absolute; top: -6px; left: 45px; color: #AAA; text-align: left; font-family: monospace; } .facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool.bottom #timeMachineTitle, .facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool.bottom #timeMachineTitle { margin: 0 10px; line-height: normal; width: 100px; font-weight: 500; } .facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool.bottom #timeMachineTitle #currentTimeValue, .facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool.bottom #timeMachineTitle #currentTimeValue { font-size: 17px; font-weight: 100; } .facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool.bottom .time-marker, .facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool.bottom .time-marker { position: absolute; font-size: 10px; top: 19px; } .facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool.bottom .time-marker i, .facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool.bottom .time-marker i { position: absolute; top: -15px; } .facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool.bottom #timeMarker2, .facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool.bottom #timeMarker2 { left: 50%; transform: translateX(-50%); } .facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool.bottom #timeMarker2 i, .facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool.bottom #timeMarker2 i { left: 50%; transform: translateX(-50%); } .facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool.bottom #timeMarker3, .facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool.bottom #timeMarker3 { right: 10px; } .facer-editor .watch-canvas-wrapper .watch-canvas-inner-wrapper .watch-canvas-corner-tool.bottom #timeMarker3 i, .facer-editor .watch-canvas-wrapper .browser-wrapper .watch-canvas-corner-tool.bottom #timeMarker3 i { right: 0; } .facer-editor .watch-canvas-wrapper .watch-canvas-container .canvas-container { margin: auto; width: 400px !important; height: 400px !important; top: 0px !important; left: 0 !important; -webkit-transition: left ease-in-out 0.25s; -moz-transition: left ease-in-out 0.25s; -ms-transition: left ease-in-out 0.25s; transition: left ease-in-out 0.25s; } .facer-editor .watch-canvas-wrapper .watch-canvas { position: absolute; left: 0 !important; -webkit-transition: left ease-in-out 0.25s; -moz-transition: left ease-in-out 0.25s; -ms-transition: left ease-in-out 0.25s; transition: left ease-in-out 0.25s; } .facer-editor .watch-canvas-wrapper .has-previews .watch-canvas { left: -88px !important; } .facer-editor .watch-canvas-wrapper .ios .canvas-container, .facer-editor .watch-canvas-wrapper .ios.has-previews .watch-canvas { left: 0 !important; } .facer-editor .watch-canvas-wrapper .watch-canvas-outer-container { -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; z-index: -1; background-image: url("/img/graph-bg.png"); } .facer-editor .watch-canvas-wrapper .watch-canvas-container { position: relative; margin: 0px auto 5px; margin-bottom: 40px; width: 400px; height: 400px; z-index: -1; opacity: 0; -webkit-transition: opacity ease-in-out 1s, left ease-in-out 0.5s; -moz-transition: opacity ease-in-out 1s, left ease-in-out 0.5s; -ms-transition: opacity ease-in-out 1s, left ease-in-out 0.5s; transition: opacity ease-in-out 1s, left ease-in-out 0.5s; } .facer-editor .watch-canvas-wrapper .watch-canvas-container.loaded { opacity: 1; } .facer-editor .watch-canvas-wrapper .watch-canvas-container #canvasOptions { position: absolute; z-index: 1; bottom: -68px; right: -3px; } .facer-editor .watch-canvas-wrapper .watch-canvas-container.fullscreen { margin-bottom: 80px; } .facer-editor .watch-canvas-wrapper .watch-canvas-container.ios { width: 400px; } .facer-editor .watch-canvas-wrapper .watch-canvas.lower-canvas, .facer-editor .watch-canvas-wrapper .watch-canvas.upper-canvas { position: absolute; top: -600px !important; left: -600px !important; width: 1600px !important; height: 1600px !important; -webkit-transition: background 0.5s linear, border-radius 0.5s linear; -moz-transition: background 0.5s linear, border-radius 0.5s linear; -ms-transition: background 0.5s linear, border-radius 0.5s linear; transition: background 0.5s linear, border-radius 0.5s linear; } .facer-editor .watch-canvas-wrapper .ios.watch-canvas-container, .facer-editor .watch-canvas-wrapper .ios .canvas-container { margin: auto; width: 400px !important; height: 500px !important; top: 0px !important; left: 0px !important; } .facer-editor .watch-canvas-wrapper .ios .watch-canvas.lower-canvas, .facer-editor .watch-canvas-wrapper .ios .watch-canvas.upper-canvas { top: -1250px !important; left: -1000px !important; width: 2400px !important; height: 3000px !important; } .facer-editor .watch-canvas-wrapper .watch-canvas.circle, .facer-editor .watch-canvas-wrapper .watch-canvas-bounds.circle { border-radius: 50%; } .facer-editor .watch-canvas-wrapper.circle .lower-canvas, .facer-editor .watch-canvas-wrapper.circle .upper-canvas { border-radius: 50%; } .facer-editor .watch-canvas-wrapper .watch-canvas-bounds { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 1px solid transparent; z-index: 1; pointer-events: none; -webkit-transition: right 0.25s linear, left 0.25s linear; -moz-transition: right 0.25s linear, left 0.25s linear; -ms-transition: right 0.25s linear, left 0.25s linear; transition: right 0.25s linear, left 0.25s linear; } .facer-editor .watch-canvas-wrapper .watch-canvas-bounds.opaque { pointer-events: auto; } .facer-editor .watch-canvas-wrapper .has-previews .watch-canvas-bounds { right: 88px; left: -88px; } .facer-editor .watch-canvas-wrapper .ios .watch-canvas-bounds { right: 0 !important; left: 0 !important; } .facer-editor .watch-canvas-wrapper .ios #watchPreview .canvas-container { width: 100% !important; height: 100% !important; } .facer-editor .watch-canvas-wrapper .watch-band { position: absolute; left: 0; top: -50px; width: 500px; height: 600px; background-image: url("/img/watch-band.png"); z-index: 10; } .facer-editor .watch-canvas-wrapper .watch-band.circle { background-image: url("/img/watch-band-circle.png"); } .facer-editor .watch-canvas-wrapper .canvas-element { position: absolute; -webkit-transition: 0.5s linear opacity; -moz-transition: 0.5s linear opacity; -ms-transition: 0.5s linear opacity; transition: 0.5s linear opacity; } .facer-editor .watch-canvas-wrapper .canvas-element .element-border { position: absolute; top: -10px; right: -10px; bottom: -10px; left: -10px; border-radius: 5px; } .facer-editor .watch-canvas-wrapper .canvas-element:hover .element-border, .facer-editor .watch-canvas-wrapper .canvas-element.hovered .element-border, .facer-editor .watch-canvas-wrapper .canvas-element.selected .element-border { border: 2px solid #28839e; } .facer-editor .watch-canvas-wrapper .canvas-element .text-element { display: inline-block; line-height: 1; } .facer-editor .watch-canvas-wrapper .canvas-element .text-element p { margin: 0; vertical-align: middle; display: inline-block; white-space: nowrap; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-start: 0; -webkit-margin-end: 0; } .facer-editor #minuteHandContainer { position: absolute; top: 30px; right: 30px; bottom: 30px; left: 30px; border-radius: 30px; cursor: pointer; } .facer-editor #minuteHandContainer #minuteHandContainerBorder { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 30px; } .facer-editor #minuteHandContainer #minuteHandContainerBorder:hover, .facer-editor #minuteHandContainer #minuteHandContainerBorder.hovered, .facer-editor #minuteHandContainer #minuteHandContainerBorder.selected { border: 5px solid editorButtonBlueH; } .facer-editor .hovered, .facer-editor .selected { border-color: editorButtonBlueH !important; } .facer-editor .no-events { pointer-events: none; opacity: .5; } .facer-editor #minuteHand { position: absolute; top: 10px; left: 215px; width: 10px; height: 260px; background: #555; } .facer-editor .vertical-slider { min-width: 0; } .facer-editor .vertical-slider input[type=range] { min-width: 32px; -webkit-appearance: slider-vertical; } .facer-editor button { border-radius: 2px; } .facer-editor .btn { border-radius: 2px; } .facer-editor .alignment-control { padding: 0; } .facer-editor .left-input-panel, .facer-editor .right-input-panel { position: absolute; z-index: 5; } .facer-editor .left-input-panel { left: -185px; top: calc(50% - 22px); } .facer-editor .right-input-panel { right: -325px; top: calc(50% - 38px); } .facer-editor [time-input] { width: 40px; text-align: center; border-radius: 3px; padding: 10px; border: 1px solid #DDD; } .facer-editor [time-input]:focus { border-color: #38b4ec; outline: none; } .facer-editor .time-input-box { position: relative; display: inline-block; padding: 15px 0; } .facer-editor .time-input-box .time-arrow-up, .facer-editor .time-input-box .time-arrow-down { position: absolute; right: 0; left: 0; font-size: 10px; cursor: pointer; color: #2BADE3; } .facer-editor .time-input-box .time-arrow-up:active, .facer-editor .time-input-box .time-arrow-down:active { opacity: .5; } .facer-editor .time-input-box .time-arrow-up { top: 0px; } .facer-editor .time-input-box .time-arrow-down { bottom: 0px; } .facer-editor .time-reset { cursor: pointer; display: inline-block; font-size: 16px; font-weight: bold; padding: 7px; vertical-align: middle; color: #999; } .facer-editor .time-reset:hover { color: #2BADE3; } .facer-editor .time-reset.active { color: #2BADE3; } .facer-editor .time-reset:active { opacity: .5; } .facer-editor .play-button { border: 1px solid #ccc; border-radius: 50%; width: 34px; height: 34px; margin: 0 5px; padding-left: 8px; text-align: center; } .facer-editor .play-button.active, .facer-editor .play-button:hover { color: #2BADE3; border-color: #2BADE3; } .facer-editor .play-button:active { opacity: .5; } .facer-editor .watch-canvas-toolbar-container { position: absolute; bottom: 60px; left: 0; right: 0; z-index: 1; } .facer-editor .watch-canvas-toolbar-container .watch-canvas-toolbar-corner-tool { position: absolute; } .facer-editor .watch-canvas-toolbar-container .watch-canvas-toolbar-corner-tool.right { top: -44px; right: 10px; text-align: right; } .facer-editor .watch-canvas-toolbar-container .watch-canvas-toolbar-corner-tool.left { top: -44px; left: 10px; text-align: left; } .facer-editor .watch-canvas-alert { position: absolute; top: 0; right: 0; left: 0; height: 40px; line-height: 40px; border-bottom: 2px solid #2BADE3; background: rgba(49, 209, 255, 0.7); text-align: center; z-index: 1; text-shadow: 2px 2px 0 rgba(49, 209, 255, 0.8); color: white; } .facer-editor .watch-canvas-alert.watch-canvas-alert-info .watch-canvas-alert-stripes { position: absolute; height: 10px; bottom: -10px; left: 0; right: 0; background-image: url("/img/pattern.png"); background-size: auto 10px; } .facer-editor .watch-canvas-alert.watch-canvas-alert-success { border-bottom-color: #72f29f; background: rgba(114, 242, 159, 0.42); color: black; } .facer-editor .watch-canvas-alert i.large-icon { font-size: 27px; vertical-align: middle; vertical-align: -webkit-baseline-middle; } .facer-editor .watch-canvas-alert.watch-canvas-alert-danger { border-bottom-color: red; background: rgba(255, 0, 0, 0.32); } .facer-editor .watch-canvas-toolbar { display: inline-block; width: 100%; min-height: 34px; padding: 5px 10px; z-index: 2; color: #999; border-top: 2px solid #FFA500; background: rgba(255, 165, 0, 0.32); cursor: default; } .facer-editor .watch-canvas-toolbar .btn-toolbar div { display: inline-block; vertical-align: top; } .facer-editor .watch-canvas-toolbar .btn, .facer-editor .watch-canvas-toolbar .btn-set, .facer-editor .watch-canvas-toolbar input { cursor: pointer; } .facer-editor .watch-canvas-toolbar .btn-set { float: none; margin: 5px; } .facer-editor .watch-canvas-toolbar .btn-set button { border-color: #FFA500; } .facer-editor .watch-canvas-toolbar .btn-set button.active { background-color: #D0AA64; } .facer-editor .watch-canvas-toolbar .button-label { position: absolute; top: 5px; right: 5px; bottom: 5px; margin-bottom: 0; border: 1px solid #DDD; } .facer-editor .watch-canvas-toolbar .button-label input { position: absolute; top: -9999px; left: -9999px; } .facer-editor .watch-canvas-toolbar .btn-group.open .dropdown-menu { max-height: 400px; overflow-y: auto; } .facer-editor .watch-canvas-toolbar .btn-group.open .dropdown-menu.list-with-header { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .facer-editor .watch-canvas-toolbar .btn-group.open .dropdown-menu.list-with-header .list-header { min-height: 50px; padding: 5px; } .facer-editor .watch-canvas-toolbar .btn-group.open .dropdown-menu.list-with-header .list-header .upload-control { display: block; margin: 0; } .facer-editor .watch-canvas-toolbar .btn-group.open .dropdown-menu.list-with-header .list-header .upload-control button { float: none; } .facer-editor .watch-canvas-toolbar .btn-group.open .dropdown-menu.list-with-header .list-header .upload-control input { max-width: 100%; } .facer-editor .watch-canvas-toolbar .btn-group.open .dropdown-menu.text-style-list > div, .facer-editor .watch-canvas-toolbar .btn-group.open .dropdown-menu.text-style-list .text-style-list-group { display: block; } .facer-editor .watch-canvas-toolbar .btn-group.open .dropdown-menu.text-style-list h4 { margin: 4px 0 0; } .facer-editor .watch-canvas-toolbar .btn-group.open .dropdown-menu.text-style-list .list-group-item-header-image { display: block; width: 50%; } .facer-editor .watch-canvas-toolbar .btn-group.open .dropdown-menu.text-style-list .list-group-item-header-image img { -webkit-filter: brightness(0); filter: brightness(0); width: 100%; } .facer-editor .watch-canvas-toolbar .btn-group.open .dropdown-menu.text-style-list .list-group { margin: 5px; display: block; } .facer-editor .watch-canvas-toolbar .color-control { padding-right: 56px; } .facer-editor .watch-canvas-toolbar .color-control .button-label { width: 44px; top: 5px; right: 5px; bottom: 5px; } .facer-editor .watch-canvas-toolbar .watch-canvas-tool { display: inline-block; margin: 0 5px; padding: 5px; border: 2px solid #EEE; color: #BBB; border-radius: 5px; font-size: 12px; cursor: pointer; -webkit-user-select: none; } .facer-editor .watch-canvas-toolbar input[type=range] { width: 100%; } .facer-editor .watch-canvas-toolbar .photo-album-toolbar { overflow: auto; white-space: nowrap; margin: 0px -17px; padding: 0px 12px; } .facer-editor .watch-canvas-toolbar .photo-album-toolbar .photo-album-toolbar-header { text-align: left; color: #FFA500; } .facer-editor .watch-canvas-toolbar .photo-album-toolbar .photo-album-toolbar-list { margin: 0; text-align: left; padding: 0; } .facer-editor .watch-canvas-toolbar .photo-album-toolbar .photo-album-toolbar-list .photo-album-toolbar-image-container { position: relative; display: inline-block; margin: 5px; border: 2px solid transparent; vertical-align: top; } .facer-editor .watch-canvas-toolbar .photo-album-toolbar .photo-album-toolbar-list .photo-album-toolbar-image-container .remove-image { display: none; position: absolute; width: 15px; height: 15px; top: -7.5px; right: -7.5px; border-radius: 7.5px; text-align: center; line-height: 18px; color: #FFF; font-size: 7px; } .facer-editor .watch-canvas-toolbar .photo-album-toolbar .photo-album-toolbar-list .photo-album-toolbar-image-container.add-image { border: 2px dashed; border-color: transparent !important; color: #FFA500; } .facer-editor .watch-canvas-toolbar .photo-album-toolbar .photo-album-toolbar-list .photo-album-toolbar-image-container.add-image .photo-album-toolbar-image { border: 2px dashed #FFA500; background-color: rgba(255, 165, 0, 0.25); border-radius: 5px; line-height: 100px; text-align: center; font-size: 30px; } .facer-editor .watch-canvas-toolbar .photo-album-toolbar .photo-album-toolbar-list .photo-album-toolbar-image-container .photo-album-toolbar-image { width: 80px; height: 100px; background-size: cover; background-repeat: no-repeat; } .facer-editor .watch-canvas-toolbar .photo-album-toolbar .photo-album-toolbar-list .photo-album-toolbar-image-container:hover { border-color: #FFA500; } .facer-editor .watch-canvas-toolbar .photo-album-toolbar .photo-album-toolbar-list .photo-album-toolbar-image-container:hover .remove-image { display: block; background-color: #FFA500; } .facer-editor .watch-canvas-toolbar .photo-album-toolbar .photo-album-toolbar-list .photo-album-toolbar-image-container.selected .remove-image { display: block; background-color: #2BADE3; } .facer-editor .watch-canvas-toolbar .photo-album-toolbar .photo-album-toolbar-list .photo-album-toolbar-image-container.add-image .photo-album-toolbar-image:hover { border-color: #2BADE3; color: #2BADE3; background-color: rgba(49, 209, 255, 0.25); } .facer-editor .watch-canvas-toolbar .photo-album-toolbar .photo-album-toolbar-list #photoAlbumImageUpload { display: none; } .facer-editor .settings-list { min-width: 200px; } .facer-editor .settings-list > li > div { margin: 10px 0; padding: 0 20px; white-space: nowrap; line-height: normal; } .facer-editor .gif-link { padding-top: 13px; padding-bottom: 10px; } .facer-editor #shareableLink { margin: 10px; padding: 13px; -webkit-user-select: text !important; cursor: text; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .facer-editor .grid-line-x, .facer-editor .grid-line-y { display: none; position: absolute; background: #2BADE3; opacity: .5; z-index: 1000; } .facer-editor .grid-line-x { width: 1px; top: 0; bottom: 0; left: 50%; } .facer-editor .grid-line-y { height: 1px; top: 50%; right: 0; left: 0; } .facer-editor .palette { position: relative; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding: 20px 20px 0; width: 280px; overflow: visible; color: #BBB; z-index: 3; } .facer-editor .palette .back-button, .facer-editor .palette .close-button { border-radius: 50%; width: 22px; height: 22px; padding: 1px; margin-top: -4px; } .facer-editor .palette .close-button { padding: 2px; width: 17px; height: 17px; font-size: 8px; } .facer-editor .palette .inner-palette { padding: 10px; border-radius: 3px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); background-color: #DDD; } .facer-editor .palette .inner-palette label { color: #999; } .facer-editor .palette .inner-palette .form-group:last-child { margin-bottom: 0; } .facer-editor .palette .layer-name { width: 88%; font-size: 26px; font-weight: 400; border: none; outline: none; background: transparent; color: #888; } .facer-editor .palette .image-control { margin: 6px 15px; } .facer-editor .palette .color-control { width: 100%; height: 34px; border-radius: 4px; border: 1px solid; margin-bottom: 0; } .facer-editor .palette .color-control input { position: absolute; top: -9999px; left: -9999px; } .facer-editor .palette input:not(.layer-name) { font-family: monospace; } .facer-editor .palette .image-preview { width: 240px; height: 240px; border: 1px solid #ddd; background-repeat: no-repeat; background-size: contain; background-position: center; } .facer-editor .palette .image-preview.image-preview-small { width: 120px; height: 120px; } .facer-editor .running { border-color: #2BADE3 !important; } .facer-editor .pulse { -webkit-animation: pulse 2s linear infinite; -moz-animation: pulse 2s linear infinite; -ms-animation: pulse 2s linear infinite; animation: pulse 2s linear infinite; } @keyframes pulse { 0% { text-shadow: 0px 0px 2px #777; } 50% { text-shadow: 0px 0px 10px #2BADE3; } 100% { text-shadow: 0px 0px 2px #777; } } .facer-editor .upload-control { display: block !important; position: relative; margin-top: 10px; } .facer-editor .upload-control.list-control { margin: 10px 10px 15px; height: 34px; } .facer-editor .upload-control.toolbar-control { margin-top: 0; height: 34px; } .facer-editor .upload-control button { pointer-events: none; } .facer-editor .upload-control input[type=file] { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; outline: none; } .facer-editor #dateInputWrapper { position: relative; } .facer-editor #dateInputWrapper #dateInput { margin: 0; color: #777; } .facer-editor #dateInputWrapper #dateInput img { height: 33px; opacity: .5; } .facer-editor #dateInputWrapper #dateInput span { position: absolute; top: 14px; font-size: 9px; font-weight: bold; text-align: center; transform: translateX(-50%); left: 17px; } .facer-editor #dateInputWrapper input { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; outline: none; cursor: pointer; } .facer-editor #fileDropOverlayContainer { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; padding: 10px; z-index: 10; } .facer-editor #fileDropOverlayContainer #fileDropOverlay { width: 100%; height: 100%; border-radius: 5px; background-color: rgba(255, 255, 255, 0.85); border: 1px dashed #999; color: #999; text-align: center; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; } .facer-editor #newLayer { margin-right: 1px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .facer-editor #newLayer.open { background: #999; box-shadow: inset 0 0 34px #6A6A6A; margin-bottom: 15px; } .facer-editor #newLayer .accordion { height: 0; min-height: 0; overflow: auto; padding: 0 10px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .facer-editor #newLayer .accordion .inner-accordion { overflow: auto; height: 350px; } .facer-editor #newLayer .accordion .cancel { padding-top: 5px; height: 50px; } .facer-editor #newLayer .accordion.open { height: 400px; min-height: 400px; margin: 0 0 16px; } .facer-editor #newLayer .accordion.open.accordion-small { height: 200px; min-height: 200px; } .facer-editor #newLayer #newLayerToggle { padding: 0 10px; } .facer-editor #newLayer #newLayerToggle.open { padding-top: 0; padding: 10px; } .facer-editor .element.btn-primary { box-shadow: 0px 3px 9px #a5a5a5; } .facer-editor .palette-wrapper { position: relative; height: calc(100% - 60px); } .facer-editor .palette-wrapper .header-tabs { position: absolute; top: 0; right: 10px; left: 10px; z-index: 10; } .facer-editor .palette-wrapper .palette-scroll-wrapper { height: 100%; overflow-y: auto; padding: 0 10px 122px; border-radius: 33px; } .facer-editor .palette-wrapper .palette-section { border-radius: 10px; box-shadow: 0px 3px 9px #8c8c8c; } .facer-editor .palette-wrapper .palette-section #layerList { height: 100%; border-radius: 7px; padding-top: 44px; margin-bottom: 10px; z-index: 0; position: relative; } .facer-editor .palette-wrapper .btn { border-top-color: transparent !important; border-left-color: transparent !important; border-right-color: transparent !important; box-shadow: none !important; } .facer-editor .palette-wrapper .btn:first-child { border-top-left-radius: 7px; } .facer-editor .palette-wrapper .btn:last-child { border-top-right-radius: 7px; } .facer-editor .palette-wrapper .btn.active:last-child { border-left-color: #CCC !important; box-shadow: inset 5px -6px 10px -5px #c3c3c3 !important; } .facer-editor .palette-wrapper .btn.active:first-child { border-right-color: #CCC !important; box-shadow: inset -5px -6px 10px -5px #c3c3c3 !important; } .facer-editor .palette-group { overflow-y: auto; } .facer-editor .palette-well { background-color: #f8f8f8; margin: 5px 0px 10px; padding: 1px 5px; border-radius: 3px; } .facer-editor .palette-panel { padding: 10px 20px; border: 1px solid #bbb; margin: 0 0; border-radius: 10px; color: #555; } .facer-editor #modeSelect.btn-group > .btn:last-child:not(:first-child), .facer-editor #modeSelect .btn-group > .dropdown-toggle:not(:first-child) { border-bottom-right-radius: 0; } .facer-editor #modeSelect.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) { border-bottom-left-radius: 0; } .facer-editor #modeSelect .btn-default:not(.active) { background-color: #f8f8f8; border-bottom-width: 0; } .facer-editor #layerListDivider { background-color: #f8f8f8; height: 15px; border-top-width: 0; border-bottom: 1px solid #eaeaea; } .facer-editor #layerList { border-top-width: 0; padding-right: 0; } .facer-editor #layerList .palette-well { margin: 0px 0px 0px; padding: 1px 5px 1px; border-radius: 0 0 10px 10px; } .facer-editor .palette-header { padding: 10px 12px 0; color: #999; } .facer-editor.ios #layerList .palette-well { border-radius: 10px; } .facer-editor .main-palette { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .facer-editor .palette-left { padding: 0; width: 0; z-index: 3; -webkit-transition: width 0.5s ease-in-out; -moz-transition: width 0.5s ease-in-out; -ms-transition: width 0.5s ease-in-out; transition: width 0.5s ease-in-out; } .facer-editor .palette-left.open { width: 280px; padding: 15px 20px 0; } .facer-editor .palette-left > div { width: 280px; position: absolute; right: 0; top: 4px; bottom: 0; /*@include transition(all .5s ease-in-out); &.slid { @include transition(all .5s ease-in-out); @include transform(translateX(-300px)); opacity: 0; pointer-events: none; }*/ } .facer-editor .palette-right { padding-left: 0; padding-top: 20px; padding-bottom: 20px; } .facer-editor .palette-right > div { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; overflow-x: hidden; } .facer-editor .palette-right .advanced-settings-wrapper { box-shadow: 0 0 10px #a0a0a0; background-color: #f8f8f8; border-radius: 8px; border: 1px solid #ccc; } .facer-editor .palette-right .advanced-settings-wrapper .palette-corner-icon { right: 20px; top: 23px; font-size: 12px; } .facer-editor .palette-right .advanced-settings-wrapper .palette-title { margin-bottom: 2px; } .facer-editor .palette-right .advanced-settings-wrapper .advanced-settings-inner-wrapper { padding: 6px; } .facer-editor .palette-title { color: #4a4a4a; padding: 9px 10px 6px; background: #ececec; border-radius: 8px 8px 0 0; } .facer-editor .palette-title i { vertical-align: middle; } .facer-editor .palette-corner-icon { position: absolute; color: #AAA; } .facer-editor .footer-palette { position: absolute; bottom: 0; left: 0; right: 1px; height: 102px; z-index: 2; background: #CCC; border-top: 1px solid #dadada; box-shadow: inset -4px 0px 10px -4px #a0a0a0; } .facer-editor .footer-palette .palette-corner-icon { right: 20px; top: 15px; font-size: 17px; } .facer-editor .footer-palette .palette-well { margin: 7px 9px 10px; padding: 0; border-radius: 8px; box-shadow: 0px 3px 9px #8c8c8c; } .facer-editor .footer-palette .palette-item { margin: 0 5px 5px; } .facer-editor .form-group .twitter-typeahead { display: block !important; } .facer-editor .form-group .twitter-typeahead .tt-menu { left: 0; right: 0; background-color: #FFF; border: 1px solid #DDD; max-height: 200px; overflow-y: auto; } .facer-editor .form-group .twitter-typeahead .tt-menu .tt-header { background-color: #999; color: #FFF; padding: 5px 10px; } .facer-editor .form-group .twitter-typeahead .tt-menu .tt-suggestion { padding: 5px 10px; } .facer-editor .form-group .twitter-typeahead .tt-menu .tt-suggestion.tt-highlight, .facer-editor .form-group .twitter-typeahead .tt-menu .tt-suggestion.tt-cursor, .facer-editor .form-group .twitter-typeahead .tt-menu .tt-suggestion:hover { color: #2BADE3; } .facer-editor .form-group .tag-input { position: relative; } .facer-editor .form-group .tag-input input { padding-right: 54px; } .facer-editor .form-group .tag-input .btn { position: absolute; top: 6px; right: 6px; } .facer-editor .sub-palette { position: absolute; width: 280px; top: 47px; bottom: 0; padding-left: 0; } .facer-editor .sub-palette.slid { -webkit-transform: translateX(300px) !important; -moz-transform: translateX(300px) !important; -ms-transform: translateX(300px) !important; transform: translateX(300px) !important; opacity: 0; pointer-events: none; } .facer-editor #newElement, .facer-editor #minuteHandOptions, .facer-editor #watchOptions { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .facer-editor #sidebarToggle { display: none; } .facer-editor #previews { position: absolute; top: -29px; right: -232px !important; pointer-events: none; opacity: 0; -webkit-transition: opacity linear 0.25s, right ease-in-out 0.25s; -moz-transition: opacity linear 0.25s, right ease-in-out 0.25s; -ms-transition: opacity linear 0.25s, right ease-in-out 0.25s; transition: opacity linear 0.25s, right ease-in-out 0.25s; } .facer-editor #previews #squarePreview { background-image: url("/img/squareBG.png"); background-size: auto 197.6px; background-position: top center; background-repeat: no-repeat; } .facer-editor #previews #squarePreview .canvas-container { top: 43px !important; left: 0 !important; border-radius: 2%; } .facer-editor #previews #squarePreview .canvas-container, .facer-editor #previews #squarePreview .canvas-container canvas { width: 110px !important; height: 110px !important; } .facer-editor #previews #circlePreview { background-image: url("/img/circleBG.png"); background-size: auto 189.8px; background-position: top center; background-repeat: no-repeat; } .facer-editor #previews #circlePreview .canvas-container { top: 30px !important; left: 0 !important; } .facer-editor #previews #circlePreview .canvas-container, .facer-editor #previews #circlePreview .canvas-container canvas { width: 130px !important; height: 130px !important; } .facer-editor #previews #circlePreview, .facer-editor #previews #squarePreview, .facer-editor #previews canvas, .facer-editor #previews .canvas-container { width: 200px !important; height: 242px !important; } .facer-editor .has-previews #previews { opacity: 1; right: -144px !important; } .facer-editor #preview { position: relative; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; text-align: center; line-height: 200px; width: 250px; height: 250px; padding: none; color: #DDD; } .facer-editor #preview .upper-canvas { opacity: 0; } .facer-editor #preview .lower-canvas { border-radius: 3px; } .facer-editor #preview .lower-canvas.circle { border-radius: 50%; } .facer-editor #preview .canvas-container { z-index: 2; } .facer-editor .preview { position: relative; margin: 0 auto; width: 175px; height: 175px; background: #FFF; } .facer-editor #circlePreview .preview { border-radius: 50%; } .facer-editor #publishView { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; } .facer-editor #publishView #watchPreview { -webkit-flex: 0 0 350px; -moz-flex: 0 0 350px; -ms-flex: 0 0 350px; flex: 0 0 350px; } @media screen and (max-width: 1200px) { .facer-editor #publishView #watchPreview { -webkit-flex: 0 0 300px; -moz-flex: 0 0 300px; -ms-flex: 0 0 300px; flex: 0 0 300px; } } .facer-editor #publishView #watchPreview #watch { height: 400px; } .facer-editor #publishView #watchPreview #watch .watchface-display-options { position: absolute; right: 0; bottom: 25px; left: 0; line-height: 0; } .facer-editor #publishView #publishForm { -webkit-flex: 0 0 400px; -moz-flex: 0 0 400px; -ms-flex: 0 0 400px; flex: 0 0 400px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; -webkit-transition: flex 0.5s; -moz-transition: flex 0.5s; -ms-transition: flex 0.5s; transition: flex 0.5s; text-align: left; padding: 30px; } @media screen and (max-width: 1200px) { .facer-editor #publishView #publishForm { -webkit-flex: 0 0 320px; -moz-flex: 0 0 320px; -ms-flex: 0 0 320px; flex: 0 0 320px; padding: 30px 20px; } } .facer-editor #publishView #publishForm.messages { -webkit-flex: 0 0 300px; -moz-flex: 0 0 300px; -ms-flex: 0 0 300px; flex: 0 0 300px; } .facer-editor #publishView #publishForm .input-lg { border-radius: 4px; font-weight: bold; } .facer-editor #publishView #publishForm textarea { height: 75px; } .facer-editor #preview { margin: auto; padding-top: 33px; padding-bottom: 47px; width: 175px; } .facer-editor #watchBand { position: absolute; z-index: 1; width: 912px; height: 357px; top: -51px; left: -35px; pointer-events: none; } .facer-editor #wrist, .facer-editor #watchBand { position: absolute; top: -30px; left: -300px; width: 912px; height: 357px; pointer-events: none; } .facer-editor #editor, .facer-editor .palette-right > div { -webkit-transition: width 0.5s ease-in-out; -moz-transition: width 0.5s ease-in-out; -ms-transition: width 0.5s ease-in-out; transition: width 0.5s ease-in-out; } .facer-editor .palette-right { -webkit-transition: width 0.5s ease-in-out; -moz-transition: width 0.5s ease-in-out; -ms-transition: width 0.5s ease-in-out; transition: width 0.5s ease-in-out; padding: 0; width: 0; overflow: auto; } .facer-editor .palette-right.open { width: 270px; } .facer-editor .palette-right > div { position: absolute; padding: 10px 10px 10px 10px; width: 270px; top: 0; left: 0; bottom: 0; z-index: 1; border-radius: 5px; } @media screen and (max-width: 992px) { .facer-editor { /*#editor, .palette-right > div { @include transition(-webkit-transform .5s ease-in-out); @include transition(-moz-transform .5s ease-in-out); @include transition(-ms-transform .5s ease-in-out); @include transition(transform .5s ease-in-out); } .palette-right { padding: 0; width: 0; overflow: visible; } .palette-right > div { position: absolute; padding: 20px 20px 20px; width: 300px; top: 0; right: -285px; bottom: 0; background: rgba(255, 255, 255, .95); z-index: 1; border-radius: 5px; }*/ } .facer-editor #sidebarToggle { display: block; position: absolute; left: -10px; width: 15px; height: 15px; border-radius: 50%; color: gray; cursor: pointer; } .facer-editor .sidebar-open { -webkit-transform: translateX(-285px); -moz-transform: translateX(-285px); -ms-transform: translateX(-285px); transform: translateX(-285px); } } @media screen and (max-height: 740px) { .facer-editor .watch-canvas-wrapper #previews { display: none; } .facer-editor .watch-canvas-wrapper .has-previews .watch-canvas { left: 0 !important; } .facer-editor .watch-canvas-wrapper #canvasOptions { bottom: -54px !important; right: -14px !important; } .facer-editor .watch-canvas-wrapper #canvasOptions .btn { padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; } .facer-editor .watch-canvas-wrapper .watch-canvas-bounds { left: 0 !important; right: 0 !important; } .facer-editor .watch-canvas-wrapper .watch-canvas-container { margin: 10px auto; width: 300px; height: 300px; } .facer-editor .watch-canvas-wrapper .watch-canvas-container .canvas-container { left: 0 !important; } .facer-editor .watch-canvas-wrapper .watch-canvas { width: 300px !important; height: 300px !important; } .facer-editor .watch-canvas-wrapper .watch-canvas.upper-canvas, .facer-editor .watch-canvas-wrapper .watch-canvas.lower-canvas { top: -450px !important; left: -450px !important; width: 1200px !important; height: 1200px !important; } .facer-editor .watch-canvas-wrapper .watch-canvas.lower-canvas { position: absolute; -webkit-transition: background 0.5s linear, border-radius 0.5s linear; -moz-transition: background 0.5s linear, border-radius 0.5s linear; -ms-transition: background 0.5s linear, border-radius 0.5s linear; transition: background 0.5s linear, border-radius 0.5s linear; } } @media screen and (max-height: 800px) { .facer-editor .ios.watch-canvas-container { margin: 10px auto 120px; width: 256px !important; height: 320px !important; } .facer-editor .watch-canvas-wrapper .ios.watch-canvas-container > .canvas-container { width: 1536px !important; height: 1920px !important; } .facer-editor .watch-canvas-wrapper .ios.watch-canvas-container, .facer-editor .watch-canvas-wrapper .ios .watch-canvas, .facer-editor .watch-canvas-wrapper .ios .canvas-container { width: 256px !important; height: 320px !important; } .facer-editor .watch-canvas-wrapper .ios .watch-canvas.lower-canvas, .facer-editor .watch-canvas-wrapper .ios .watch-canvas.upper-canvas { top: -800px !important; left: -640px !important; width: 1536px !important; height: 1920px !important; } .facer-editor .ios .watch-container .canvas-container { width: 100% !important; height: 100% !important; } } @media screen and (max-width: 1080px) { .facer-editor .watch-canvas-wrapper #previews { display: none; } .facer-editor .watch-canvas-wrapper .has-previews .watch-canvas { left: 0 !important; } .facer-editor .watch-canvas-wrapper #canvasOptions { bottom: -54px !important; right: -14px !important; } .facer-editor .watch-canvas-wrapper #canvasOptions .btn { padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; } .facer-editor .watch-canvas-wrapper .watch-canvas-bounds { left: 0 !important; right: 0 !important; } .facer-editor .watch-canvas-wrapper .watch-canvas { width: 300px !important; height: 300px !important; } .facer-editor .watch-canvas-wrapper .watch-canvas-container { margin: 10px auto; width: 300px; height: 300px; } .facer-editor .watch-canvas-wrapper .watch-canvas-container .canvas-container { left: 0 !important; } .facer-editor .watch-canvas-wrapper .watch-canvas.upper-canvas, .facer-editor .watch-canvas-wrapper .watch-canvas.lower-canvas { top: -450px !important; left: -450px !important; width: 1200px !important; height: 1200px !important; } .facer-editor .watch-canvas-wrapper .watch-canvas.lower-canvas { position: absolute; -webkit-transition: background 0.5s linear, border-radius 0.5s linear; -moz-transition: background 0.5s linear, border-radius 0.5s linear; -ms-transition: background 0.5s linear, border-radius 0.5s linear; transition: background 0.5s linear, border-radius 0.5s linear; } .facer-editor .watch-canvas-wrapper .ios.watch-canvas-container { margin: 10px auto 120px; width: 256px; height: 320px; } .facer-editor .watch-canvas-wrapper .ios.watch-canvas-container, .facer-editor .watch-canvas-wrapper .ios .watch-canvas, .facer-editor .watch-canvas-wrapper .ios .canvas-container { width: 256px !important; height: 320px !important; } .facer-editor .watch-canvas-wrapper .ios.watch-canvas-container > .canvas-container { width: 1536px !important; height: 1920px !important; } .facer-editor .watch-canvas-wrapper .ios .watch-canvas.lower-canvas, .facer-editor .watch-canvas-wrapper .ios .watch-canvas.upper-canvas { top: -800px !important; left: -640px !important; width: 1536px !important; height: 1920px !important; } .facer-editor .watch-canvas-wrapper .ios .watch-container .canvas-container { width: 100% !important; height: 100% !important; } .facer-editor #minuteHandContainer { top: 10px; right: 10px; bottom: 10px; left: 10px; } .facer-editor #minuteHandContainerBorder:hover, .facer-editor #minuteHandContainerBorder.hovered, .facer-editor #minuteHandContainerBorder.selected { border-width: 3px; } .facer-editor #minuteHand { position: absolute; top: 10px; left: 177px; width: 6px; height: 211px; } } .facer-editor .list-input { position: relative; } .facer-editor .list-input input { width: calc(100% - 20px); font-family: inherit !important; padding: 5px 0; margin: 0 10px; background-color: transparent; border: 1px solid transparent; border-radius: 3px; font-size: 18px; color: #555; font-weight: bold; -webkit-transition: border linear 0.25s, background linear 0.25s, padding linear 0.25s; -moz-transition: border linear 0.25s, background linear 0.25s, padding linear 0.25s; -ms-transition: border linear 0.25s, background linear 0.25s, padding linear 0.25s; transition: border linear 0.25s, background linear 0.25s, padding linear 0.25s; } .facer-editor .list-input input:hover, .facer-editor .list-input input:focus { padding: 5px 0 5px 5px; outline: none; border: 1px solid #CCC; } .facer-editor .list-input input:focus { background-color: #fff; border: 2px solid #2BADE3; } .facer-editor .list-input:hover .list-input-overlays, .facer-editor .list-input input:focus + .list-input-overlays { display: none; } .facer-editor .list-input .list-input-overlays { pointer-events: none; margin: 0 15px; border-radius: 3px; } .facer-editor .list-input .list-input-overlays i { position: absolute; top: 10px; right: 5px; z-index: 10; } .facer-editor .list-input.floating-list-input { margin: 0 auto 50px; width: 400px; -webkit-transition: border linear 0.25s, background linear 0.25s, padding linear 0.25s; -moz-transition: border linear 0.25s, background linear 0.25s, padding linear 0.25s; -ms-transition: border linear 0.25s, background linear 0.25s, padding linear 0.25s; transition: border linear 0.25s, background linear 0.25s, padding linear 0.25s; } .facer-editor .list-input.floating-list-input.ng-enter, .facer-editor .list-input.floating-list-input.ng-leave { -webkit-transition: none; -moz-transition: none; -ms-transition: none; transition: none; } .facer-editor .list-input.floating-list-input input { text-align: center; } .facer-editor .list-input.floating-list-input .list-input-gradient { background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 87%, white 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(87%, rgba(255, 255, 255, 0)), color-stop(100%, white)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 87%, white 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 87%, white 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 87%, white 100%); /* IE10+ */ background: linear-gradient(to right, rgba(255, 255, 255, 0) 87%, white 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00dddddd', endColorstr='#f8f8f8',GradientType=1 ); } .facer-editor .floating-textarea { width: 400px; height: 50px; background: transparent; text-align: center; border: none; resize: none; border-radius: 3px; } .facer-editor .floating-textarea:hover, .facer-editor .floating-textarea:focus { outline: none; border: 1px solid #CCC; } .facer-editor .floating-textarea:focus { border: 2px solid #2BADE3; } .facer-editor .palette-items div.layer { white-space: nowrap; text-overflow: ellipsis; } .facer-editor .palette-items .color-label { position: absolute; top: 0; bottom: 0; left: 0; width: 5px; background: #F00; border-radius: 7px 0 0 7px; border: 0px solid #CCC; border-right-width: 0; background-color: #2BADE3; } .facer-editor .palette-items .colorpicker { margin-top: -14px !important; margin-left: 114px !important; } .facer-editor .palette-items .colorpicker .dropdown-menu::after { left: 106px !important; } .facer-editor .palette-items .colorpicker .dropdown-menu::before { left: 105px !important; } .facer-editor .palette-items .element:not(.unhoverable).hovered, .facer-editor .palette-items .element:not(.unhoverable):hover { border-color: #2BADE3; color: #2BADE3; border-width: 1px; } .facer-editor .palette-items .element:not(.unhoverable).hovered .color-label, .facer-editor .palette-items .element:not(.unhoverable):hover .color-label { border-color: #2BADE3; } .facer-editor .palette-items .element:not(.unhoverable).hovered.selected, .facer-editor .palette-items .element:not(.unhoverable):hover.selected { background-color: #ffeecf; border: 2px solid #ffa500; } .facer-editor .palette-items .element.selected { background-color: #ffeecf; border: 2px solid #ffa500; } .facer-editor .palette-items .element.selected .color-label { border-width: 0px; border-right-width: 0; border-color: #2BADE3; } .facer-editor .element.unhoverable { cursor: default; } .facer-editor .palette-box { text-align: center; } .facer-editor .palette-box:hover { color: #2BADE3; border-color: #2BADE3; } .facer-editor .palette-item { line-height: 26px; } .facer-editor .palette-item, .facer-editor .palette-box { position: relative; padding: 10px; margin-bottom: 10px; border: 1px solid #CCC; border-radius: 3px; background: #FFF; cursor: pointer; color: #AAA; -webkit-user-select: none; } .facer-editor .palette-item .color-band, .facer-editor .palette-box .color-band { position: absolute; bottom: -1px; height: 7px; left: -1px; right: -1px; border-radius: 0 0 3px 3px; } .facer-editor .palette-item:hover .color-band, .facer-editor .palette-box:hover .color-band { bottom: 0; left: 0; right: 0; } .facer-editor .palette-item.palette-box-small .color-band, .facer-editor .palette-box.palette-box-small .color-band { height: 5px; } .facer-editor .palette-item .palette-item-content, .facer-editor .palette-box .palette-item-content { overflow: hidden; text-overflow: ellipsis; } .facer-editor .palette-item .palette-item-content input, .facer-editor .palette-box .palette-item-content input { display: inline; vertical-align: top; height: 28px; font-family: inherit; padding-left: 3px; border: none; color: #999; background: #efefef; border-radius: 1px; } .facer-editor .palette-item .palette-item-content input:focus, .facer-editor .palette-box .palette-item-content input:focus { outline: none; } .facer-editor .palette-item .palette-box-image, .facer-editor .palette-box .palette-box-image { display: block; opacity: .5; margin: auto; } .facer-editor .palette-item .palette-box-icon, .facer-editor .palette-box .palette-box-icon { line-height: 1; display: inline-block; } .facer-editor .palette-item .palette-box-title, .facer-editor .palette-box .palette-box-title { text-align: center; } .facer-editor .palette-item .handle, .facer-editor .palette-box .handle { float: left; margin-right: 3px; margin-left: -4px; cursor: ns-resize; } .facer-editor .palette-item .handle i, .facer-editor .palette-box .handle i { font-size: 22px; display: inline-block; margin-top: 4px; } .facer-editor .palette-item .layer-show, .facer-editor .palette-box .layer-show { color: #AAA; font-size: 20px; vertical-align: middle; display: inline-block; margin-top: 4px; } .facer-editor .palette-item .layer-show:hover, .facer-editor .palette-box .layer-show:hover { color: #AAA; } .facer-editor .palette-item .layer-show:hover.active, .facer-editor .palette-box .layer-show:hover.active { color: #2BADE3; } .facer-editor .palette-item .layer-show.active, .facer-editor .palette-box .layer-show.active { color: #2BADE3; } .facer-editor .palette-item .layer-actions, .facer-editor .palette-box .layer-actions { position: absolute; right: 0px; top: 9px; } .facer-editor .palette-item .layer-actions i.icon-caret-down, .facer-editor .palette-box .layer-actions i.icon-caret-down { font-size: 10px; display: inline-block; margin-top: 2px; } .facer-editor .palette-item .layer-actions .dropdown-menu, .facer-editor .palette-box .layer-actions .dropdown-menu { z-index: 10000; } .facer-editor .palette-item .element-thumbnail, .facer-editor .palette-box .element-thumbnail { display: inline-block; position: absolute; background: #FFF; z-index: 1000; right: 7px; height: 30px; width: 30px; margin-left: 8px; margin-top: -1px; vertical-align: middle; text-align: center; background-size: contain; background-position: center center; background-repeat: no-repeat; overflow: visible; border-radius: 2px; cursor: pointer; font-size: 28px; } .facer-editor .palette-item .element-thumbnail.circular, .facer-editor .palette-box .element-thumbnail.circular { border-radius: 50%; } .facer-editor .palette-item .element-thumbnail:after, .facer-editor .palette-box .element-thumbnail:after { content: " "; position: absolute; left: -5px; top: -5px; right: -5px; bottom: -5px; } .facer-editor .palette-item .element-thumbnail.hoverable, .facer-editor .palette-box .element-thumbnail.hoverable { border: 1px solid #CCC; } .facer-editor .palette-item .element-thumbnail.hoverable:hover, .facer-editor .palette-box .element-thumbnail.hoverable:hover { border: 1px solid #2BADE3; } .facer-editor .palette-item.palette-item-transparent, .facer-editor .palette-box.palette-item-transparent { border-color: transparent; background: transparent; } .facer-editor .element.selected .element-thumbnail { background-color: #ffeecf; } .facer-editor .palette-item-small { height: 50px; min-height: 50px; padding-right: 30px; margin: 5px 0; border-radius: 7px; } .facer-editor .palette-item-large { -webkit-flex-basis: 100px; -webkit-flex-shrink: 0; } .facer-editor .palette-item-button { -webkit-flex-basis: 50px; -webkit-flex-shrink: 0; margin-top: 10px; background: #2BADE3; color: #FFF; border: none; } .facer-editor .palette-box-small { float: left; width: calc(33.3333333% - 8px); height: 75px; margin-right: 12px; font-size: 12px; } .facer-editor .palette-box-small .palette-box-image { width: 35px; height: 35px; margin: 3px auto; } .facer-editor .palette-box-small .palette-box-icon { font-size: 30px; margin-top: 4px; } .facer-editor .palette-box-small:nth-child(3n) { margin-right: 0; } .facer-editor .palette-box-medium { float: left; width: calc(50% - 6px); height: 120px; margin-right: 12px; } .facer-editor .palette-box-medium .palette-box-image { width: 70px; height: 70px; margin: 5px auto; } .facer-editor .palette-box-medium .palette-box-icon { font-size: 62px; margin-top: 8px; line-height: 46px; } .facer-editor .palette-box-floating { display: inline-block; width: 120px; float: none; } .facer-editor .well .palette-box-medium { width: 100px; height: 100px; } .facer-editor .well .palette-box-medium .palette-box-icon { font-size: 47px; } .facer-editor .well .palette-box-medium.active { color: #2BADE3; border-color: #2BADE3; } .facer-editor .palette-box-medium:nth-child(2n) { margin-right: 0; } .facer-editor .style-list-well { width: 260px; padding-left: 0; padding-right: 0; } .facer-editor .style-list { overflow: auto; padding: 10px 0px; } .facer-editor .style-list .list-group { width: calc(50% - 10px); height: 125px; margin: 5px; display: inline-block; } .facer-editor .style-list .list-group .list-group-item { height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; } .facer-editor .style-list .list-group .list-group-item.no-image { text-align: center; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; } .facer-editor .style-list .style-label { padding: 0 10px; } .facer-editor .list-group .list-group-item.active { color: #2BADE3; background: #FFF; border-color: #2BADE3; } .facer-editor form.alignment-form { position: relative; width: 260px; height: 260px; background: #CCC; } .facer-editor form.alignment-form input { position: absolute; } .facer-editor form.alignment-form [value="0"], .facer-editor form.alignment-form [value="1"], .facer-editor form.alignment-form [value="2"] { top: 10px; } .facer-editor form.alignment-form [value="3"], .facer-editor form.alignment-form [value="4"], .facer-editor form.alignment-form [value="5"] { top: 126px; } .facer-editor form.alignment-form [value="6"], .facer-editor form.alignment-form [value="7"], .facer-editor form.alignment-form [value="8"] { bottom: 10px; } .facer-editor form.alignment-form [value="0"], .facer-editor form.alignment-form [value="3"], .facer-editor form.alignment-form [value="6"] { left: 10px; } .facer-editor form.alignment-form [value="1"], .facer-editor form.alignment-form [value="4"], .facer-editor form.alignment-form [value="7"] { left: 126px; } .facer-editor form.alignment-form [value="2"], .facer-editor form.alignment-form [value="5"], .facer-editor form.alignment-form [value="8"] { right: 10px; } .facer-editor .back { cursor: pointer; } .facer-editor .hr { margin: 10px 0 5px; height: 1px; background: rgba(0, 0, 0, 0.1); clear: both; } .facer-editor .vr { display: inline-block; margin: 0px 10px -10px 9px; width: 1px; height: 29px; background: #DDD; clear: both; } .facer-editor .pull-left { float: left; } .facer-editor .pull-right { float: right; } .facer-editor .btn-default { border-color: #ccc; } .facer-editor .btn-group-primary .btn-primary { border-right-color: #8de6ff !important; border-right-width: 2px; } .facer-editor .btn-group-green > .btn-green { border-right-color: #1eec1e !important; border-right-width: 2px; } .facer-editor .btn-primary { background: #2BADE3; border-color: #28839e; color: #FFF !important; border-radius: 2px; } .facer-editor .btn-primary.element { color: #FFF; font-weight: bold; font-size: 16px; text-align: center; } .facer-editor .btn-green { background: #6DBD45; border-color: #508b33; color: #FFF !important; } .facer-editor .btn i:not(.glyphicon) { font-size: 20px; display: inline-block; height: 19px; vertical-align: middle; line-height: 0px; margin-top: -3px; } .facer-editor .btn-default.element { color: #000; font-size: 16px; text-align: center; } .facer-editor i.active { color: #2BADE3; } .facer-editor .icon-button { padding-top: 10px; } .facer-editor .icon-button.active { color: #2BADE3; } .facer-editor .row { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; } .facer-editor .column-1 { -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; } .facer-editor #themeIntroHighlight { position: absolute; width: 38px; height: 38px; top: 4px; left: 45.5px; border-radius: 50%; border: 3px solid #212121; background: #e4e4e4; z-index: 0; } .facer-editor .theme-intro-highlight { color: #212121 !important; } .facer-editor .z-1 { position: relative; z-index: 1; } .facer-editor #themeIntroTooltip { top: -143px; left: -256.5px; display: block; } .facer-editor #themeIntroTooltip .tooltip-inner { background: #212121; color: white; opacity: 1; box-shadow: 0 3px 30px #a7a7a7; } .facer-editor #themeIntroTooltip .tooltip-arrow { width: 20px; z-index: 100; height: 20px; background: #212121; transform: rotate(45deg); top: 119px; border: 3px solid #fff; border-left-width: 0; border-top-width: 0; left: 260px !important; } .facer-editor #themeIntroTooltip .tooltip-arrow-image { position: absolute; width: 29px; height: 13px; top: -9.5px; left: -14.5px; background-image: url("/img/popuptail.png"); } .facer-editor .theme-tooltip { opacity: 1; } .facer-editor .theme-tooltip .tooltip-inner { max-width: none; border: 3px solid #fff; width: 485px; text-align: left; margin-left: 45px; padding: 15px 19px 3px; white-space: nowrap; border-radius: 10px; } .facer-editor .theme-tooltip .tooltip-inner a { color: #fff; text-decoration: underline; } .facer-editor .theme-tooltip .tooltip-inner > div { display: inline-block; vertical-align: top; } .facer-editor .theme-tooltip .tooltip-inner .tooltip-image { margin-right: 10px; margin-top: -4px; } .facer-editor .theme-tooltip .tooltip-inner .tooltip-text { width: 380px; white-space: normal; } .facer-editor .theme-tooltip .tooltip-inner .tooltip-close { position: absolute; top: 15px; right: 10px; } .facer-editor .theme-tooltip .tooltip-arrow { left: 265px !important; } .facer-editor .overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .facer-editor .disabled { opacity: 0.3 !important; pointer-events: none; cursor: not-allowed !important; } .facer-editor #fonts { position: absolute; top: -9999px; left: -9999px; visibility: hidden; /*top: 10px; left: 200px; z-index: 20;*/ } .facer-editor .visually-hidden { visibility: hidden; pointer-events: none; } .facer-editor .opacity-zero { opacity: 0; } .facer-editor .faded { opacity: 0.3; pointer-events: none; } .facer-editor .text-red { color: red; } .facer-editor .faded-animated { -webkit-transition: opacity ease-in-out 0.5s; -moz-transition: opacity ease-in-out 0.5s; -ms-transition: opacity ease-in-out 0.5s; transition: opacity ease-in-out 0.5s; } .facer-editor #inProgress { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100000; } .facer-editor #canvasSaveSpinner { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; z-index: 100000; background-image: url("/img/spinner-transparent.gif"); } .facer-editor #saveSpinner img { width: 100px; margin: -44px; } .facer-editor #loadSpinner, .facer-editor #register { z-index: 10; position: absolute; top: 1px; left: 1px; right: 1px; bottom: 1px; border-radius: 4px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; } .facer-editor #loadSpinner #close, .facer-editor #register #close { position: absolute; top: 10px; right: 10px; } .facer-editor #loadSpinner { background-color: #FFF; } .facer-editor #loadSpinner img { width: 150px; height: 150px; } .facer-editor #register { background-color: rgba(255, 255, 255, 0.95); -webkit-transition: all linear 0.25s; -moz-transition: all linear 0.25s; -ms-transition: all linear 0.25s; transition: all linear 0.25s; } .facer-editor.google-io { background-color: #FFF; } .facer-editor.google-io .google-io-template-picker { margin: 0 auto; padding-top: 140px; } .facer-editor.google-io .alert-google-io { position: absolute; top: 0px; right: 0px; left: 0px; background: #2BADE3; border: none; border-bottom: 2px #72DBFA solid; border-radius: 0; color: white; font-size: 18px; } .facer-editor.google-io .alert-google-io strong { font-weight: 500; } .facer-editor.google-io .canvas-container #canvas { background-image: url("/img/graph-bg.png") !important; background-size: auto !important; background-position: 31px 29px !important; } @media screen and (max-height: 740px) { .facer-editor.google-io .canvas-container #canvas { background-position: 1px; } } .facer-editor.google-io header #siteTitle { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; width: 100%; padding-right: 15px; } .facer-editor.google-io header #siteTitle #logo { width: 270px; } .facer-editor.google-io header #siteTitle #logo .google-io-mode-logo { height: 43px; width: auto; } .facer-editor.google-io header #siteTitle #mwc2017 { font-size: 22px; font-family: Roboto; color: #48484a; margin: 0 auto; display: inline-block; } .facer-editor.google-io header #siteTitle #mwc2017 strong { font-weight: 300; font-family: Roboto-Bold; } .facer-editor.google-io header #siteTitle #googleIoLogo { margin: 0 auto; display: inline-block; } .facer-editor.google-io header #siteTitle #googleIoLogo img { height: 27px; } .facer-editor.google-io header #siteTitle #androidWearLogo { display: inline-block; float: right; text-align: right; padding-right: 13px; padding-left: 86px; } .facer-editor.google-io header #siteTitle #androidWearLogo img { height: 22px; } .facer-editor.google-io header #menu { padding-right: 6px; -webkit-transition: -webkit-transform 0.5s ease-in-out; -moz-transition: -webkit-transform 0.5s ease-in-out; -ms-transition: -webkit-transform 0.5s ease-in-out; transition: -webkit-transform 0.5s ease-in-out; -webkit-transition: -moz-transform 0.5s ease-in-out; -moz-transition: -moz-transform 0.5s ease-in-out; -ms-transition: -moz-transform 0.5s ease-in-out; transition: -moz-transform 0.5s ease-in-out; -webkit-transition: -ms-transform 0.5s ease-in-out; -moz-transition: -ms-transform 0.5s ease-in-out; -ms-transition: -ms-transform 0.5s ease-in-out; transition: -ms-transform 0.5s ease-in-out; -webkit-transition: transform 0.5s ease-in-out; -moz-transition: transform 0.5s ease-in-out; -ms-transition: transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out; } .facer-editor.google-io header #menu.advanced-panel-open { -webkit-transform: translateX(-271px); -moz-transform: translateX(-271px); -ms-transform: translateX(-271px); transform: translateX(-271px); } .facer-editor.google-io .browser-wrapper #detail #designOptions { margin-left: 0; background: none; } .facer-editor.google-io .browser-wrapper #detail #newDesign { background: none; } .facer-editor.google-io .browser-wrapper .column { max-width: none !important; } .facer-editor.google-io .browser-wrapper span.mwc-item-label { padding-top: 20px; display: block; margin: 0 auto; font-size: 22px; text-align: center; color: #48484a; } .facer-editor.google-io .browser-wrapper .item { display: inline-block; margin: 45px !important; min-height: 356px !important; } .facer-editor.google-io .browser-wrapper .item img { width: 123px; height: auto !important; margin: 0 auto; } .facer-editor.google-io .btn-primary { background-color: #2BADE3; border: 0; } .facer-modal-wrapper { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10000; } @media (max-width: 767px) { .facer-modal-wrapper { padding: 30px; } } .facer-modal-wrapper .facer-modal-content { position: relative; padding: 30px 20px; margin: auto; width: 400px; background-color: #FFF; border-radius: 5px; border: 1px solid #AAA; box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.35); text-align: center; z-index: 1; } @media (max-width: 767px) { .facer-modal-wrapper .facer-modal-content { width: 100%; } .facer-modal-wrapper .facer-modal-content .well { font-size: 11px; } } .facer-modal-wrapper .facer-modal-content.facer-modal-video { padding: 0; border: 0; width: auto; background-color: #FFF; padding: 15px; } .facer-modal-wrapper .facer-modal-content .facer-modal-image { margin: 0 auto 30px; max-width: 350px; max-height: 350px; } .facer-modal-wrapper .facer-modal-content .facer-modal-image img { max-width: 350px; max-height: 350px; } .facer-modal-wrapper .facer-modal-content .facer-modal-share-cta { margin-bottom: 10px; } .facer-modal-wrapper .facer-modal-content .facer-modal-title, .facer-modal-wrapper .facer-modal-content .facer-modal-body { margin: 0 0 20px; } .facer-modal-wrapper .facer-modal-content .facer-modal-title.no-margin-bottom { margin-bottom: 0; } .facer-modal-wrapper .facer-modal-content .facer-modal-input { margin: 10px 0; } .facer-modal-wrapper .facer-modal-content .facer-modal-input textarea { padding: 5px 8px; width: 100%; height: 100px; resize: none; margin: 10px 0; border-radius: 4px; border-color: #ddd; } .facer-modal-wrapper .facer-modal-content .facer-modal-input textarea:focus { outline: none; border-color: #999; } .facer-modal-wrapper .facer-modal-content .facer-modal-input select { width: 100%; margin: 10px 0; } .facer-modal-wrapper .facer-modal-content .facer-modal-form button { min-width: 150px; margin: 0 5px; } .facer-modal-wrapper .facer-image-modal-content { padding: 20px 20px 30px; } .facer-modal-wrapper .facer-modal-backdrop { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.8); } .facer-modal-wrapper .facer-modal-backdrop .facer-modal-close { position: absolute; top: 15px; right: 15px; color: white; } .facer-modal-wrapper.ng-enter { -webkit-transition: opacity 0.5s ease-out; -moz-transition: opacity 0.5s ease-out; -ms-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; opacity: 0; } .facer-modal-wrapper.ng-enter.ng-enter-active { opacity: 1; } .facer-modal-wrapper.ng-leave { -webkit-transition: opacity 0.5s ease-out; -moz-transition: opacity 0.5s ease-out; -ms-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; opacity: 1; } .facer-modal-wrapper.ng-leave.ng-leave-active { opacity: 0; } .facer-message-bar-wrapper { position: fixed; width: 100%; top: 0; left: 0; background-color: #90ddf2; border-bottom: 2px solid #31D1FF; z-index: 1000; } .facer-message-bar-wrapper .facer-message-bar { padding: 15px 40px; text-align: center; color: #FFF; font-size: 16px; font-weight: 500; } .facer-message-bar-wrapper .facer-message-bar-close { position: absolute; top: 18px; right: 18px; color: white; } .facer-message-bar-wrapper .facer-message-bar-close:after { content: ""; position: absolute; top: -5px; right: -5px; bottom: -5px; left: -5px; } .facer-modal-wrapper.google-io .facer-modal-content { border: 0; } .facer-modal-wrapper.google-io .facer-modal-content .form-group label { text-align: left; width: 100%; } .facer-modal-wrapper.google-io .facer-modal-content .form-group label p { font-size: 12px; font-weight: normal; } .btn { outline: none !important; border-radius: 2px; } .btn-primary { background-color: #2BADE3; border-color: #28839e; } .btn-primary:hover { background-color: #38b4ec; } .btn-green { background-color: #6DBD45; border-color: #508b33; } .btn-green:hover { background-color: #7ccd53; } .circle { border-radius: 50%; } .half-turn { transform: rotate(90deg); } .relative { position: relative; } .style-loader { background-color: rgba(0, 0, 0, 0.25); position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; /*loader { margin: 60px auto; }*/ } .text-dark { color: #777; } #editorVersion { display: inline-block; margin-left: 5px; font-size: 57%; color: #A6A6A6; } .input-lock, .absolute-cover, .facer-editor .list-input .list-input-overlays, .facer-editor .list-input .list-input-overlays .list-input-gradient { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; } [dnd-list], [dnd-draggable] { position: relative; } .dndDraggingSource { display: none; } .drop-placeholder div { height: 50px; border-radius: 3px; background: #2BADE3; opacity: .1; } ::-webkit-input-placeholder { color: #CCC; } .ui-datepicker { z-index: 1000 !important; } .uv-icon.uv-bottom-right { bottom: 30px !important; right: 30px !important; } [ng-click] { cursor: pointer; } /*.fade-in { opacity: 1; }*/ .icon-pulse { -webkit-animation: pulse 1.5s linear infinite; -moz-animation: pulse 1.5s linear infinite; -ms-animation: pulse 1.5s linear infinite; animation: pulse 1.5s linear infinite; } @keyframes pulse { 0% { color: #AAA; } 50% { color: #2BADE3; } 100% { color: #AAA; } } @-moz-keyframes pulse { 0% { color: #AAA; } 50% { color: #2BADE3; } 100% { color: #AAA; } } @-webkit-keyframes pulse { 0% { color: #AAA; } 50% { color: #2BADE3; } 100% { color: #AAA; } } @-ms-keyframes pulse { 0% { color: #AAA; } 50% { color: #2BADE3; } 100% { color: #AAA; } } .fade-in.ng-enter, .fade-in.ng-leave { -webkit-transition: opacity ease-in-out 0.5s; -moz-transition: opacity ease-in-out 0.5s; -ms-transition: opacity ease-in-out 0.5s; transition: opacity ease-in-out 0.5s; } .fade-in.ng-enter, .fade-in.ng-leave.ng-leave-active { opacity: 0; } .fade-in.ng-leave, .fade-in.ng-enter.ng-enter-active { opacity: 1; } .slide-in-down.ng-enter, .slide-in-down.ng-leave { -webkit-transition: transform ease-in-out 0.5s; -moz-transition: transform ease-in-out 0.5s; -ms-transition: transform ease-in-out 0.5s; transition: transform ease-in-out 0.5s; } .slide-in-down.ng-enter, .slide-in-down.ng-leave.ng-leave-active { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } .slide-in-down.ng-leave, .slide-in-down.ng-enter.ng-enter-active { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; } html[data-useragent*='MSIE 10.0'] .facer-editor #currentTimeSlider[type=range], html[data-useragent*='rv:11.0'] .facer-editor #currentTimeSlider[type=range] { position: relative; z-index: 1000; padding: 0; } html[data-useragent*='MSIE 10.0'] .facer-editor #currentTimeSliderWrapper, html[data-useragent*='rv:11.0'] .facer-editor #currentTimeSliderWrapper { padding: 20px 10px 6px; } .primary-section-header, .browser-wrapper #detail .section-header, .editor-modal .facer-modal-content .facer-modal-title { margin: 0; padding: 16px 15px 11px 22px; color: #FFF; background: #2BADE3; border-bottom: 2px solid #28839e; } .browser-wrapper { -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; justify-content: flex-start; padding: 0; } .browser-wrapper > div { -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; justify-content: flex-start; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; } .browser-wrapper #master { min-width: 100px; width: 100px; background: #BBB; } .browser-wrapper #master #newWatchface { margin: 10px; border-radius: 5px; background: #ddd; height: 65px; } .browser-wrapper #master .section-header { padding-top: 10px; color: white; } .browser-wrapper #master .section-header h5 { margin: 0; } .browser-wrapper #master .section-header.template { background: #DDD; } .browser-wrapper #master .watchface-item-wrapper { position: relative; padding: 0 5px; } .browser-wrapper #master .watchface-item-wrapper.template { background: #DDD; } .browser-wrapper #master .watchface-item-wrapper .watchface-item-inner-wrapper { border-radius: 5px; padding: 5px 0; } .browser-wrapper #master .watchface-item-wrapper .watchface-item-inner-wrapper:hover { background: #CCC; } .browser-wrapper #master .watchface-item-wrapper .watchface-item-inner-wrapper .watchface-item { position: relative; margin: 0 auto; padding-top: 27px; width: 77px; } .browser-wrapper #master .watchface-item-wrapper .watchface-item-inner-wrapper .watchface-item .watchface-item-face { position: relative; z-index: 2; width: 50px; height: 50px; margin-bottom: 23px; } .browser-wrapper #master .watchface-item-wrapper .watchface-item-inner-wrapper .watchface-item .watchface-item-background { position: absolute; top: 0px; left: 1px; background-repeat: no-repeat; z-index: 1; } .browser-wrapper #master .watchface-item-wrapper .watchface-item-inner-wrapper .watchface-title { color: #555; text-indent: 3px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .browser-wrapper #master .section-start { padding-top: 10px; } .browser-wrapper #master .section-end { border-bottom: 1px solid white; padding-bottom: 15px; } .browser-wrapper #browser { overflow: auto; } .browser-wrapper #detail { position: relative; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; } .browser-wrapper #detail a { text-decoration: none; } .browser-wrapper #detail #designOptions { margin-left: 300px; border-left: 1px solid #EEE; } @media (max-width: 1000px) { .browser-wrapper #detail #designOptions { margin-left: 0; } } .browser-wrapper #detail.google-io-mode { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .browser-wrapper #detail.google-io-mode .section-body { -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; } .browser-wrapper #detail.google-io-mode .section-body .column { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; } .browser-wrapper #detail hr { border-color: #BBB; } .browser-wrapper #detail .section-body { padding: 20px 0; } .browser-wrapper #detail #newDesign { background-image: url("/img/graph-bg.png"); background-position-y: 20px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; } .browser-wrapper #detail #newDesign .text-center { color: #464646; } .browser-wrapper #detail #newDesign .column { -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; max-width: 500px; white-space: nowrap; } .browser-wrapper #detail #newDesign .column .item { display: inline-block; margin: 15px; cursor: pointer; -webkit-transition: opacity linear 0.25s; -moz-transition: opacity linear 0.25s; -ms-transition: opacity linear 0.25s; transition: opacity linear 0.25s; } .browser-wrapper #detail #newDesign .column .item img { width: auto; height: 200px; } .browser-wrapper #detail #newDesign .column .item:hover { opacity: 0.75; } .browser-wrapper #detail #newDesign .column .item .btn { background: #2BADE3; margin-top: 15px; } .browser-wrapper #detail #newDesign .column.android { flex: 1.4; max-width: 700px; } .browser-wrapper #detail .watchface-wrapper { position: relative; display: inline-block; margin: 0 15px; } .browser-wrapper #detail .watchface-wrapper .watchface-item-wrapper { position: relative; z-index: 0; flex: 1; display: inline-block; } .browser-wrapper #detail .watchface-wrapper .watchface-item-wrapper .watchface-item { margin-top: 16px; width: 200px; height: 200px; position: relative; } .browser-wrapper #detail .watchface-wrapper .watchface-item-wrapper .watchface-item .watchface-item-face { display: block; position: absolute; z-index: 2; } .browser-wrapper #detail .watchface-wrapper .watchface-item-wrapper .watchface-item .watchface-item-face img { border-radius: 3px; width: 100%; height: 100%; } .browser-wrapper #detail .watchface-wrapper .watchface-item-wrapper .watchface-item .watchface-item-face.applewatch { width: 91px !important; height: 114px !important; top: 30px !important; left: 45px !important; } .browser-wrapper #detail .watchface-wrapper .watchface-item-wrapper .watchface-item .watchface-item-face.lggwatch { top: 37px; left: 46px; width: 102px; height: 102px; } .browser-wrapper #detail .watchface-wrapper .watchface-item-wrapper .watchface-item .watchface-item-face.gearlive { top: 37px; left: 46px; width: 102px; height: 102px; } .browser-wrapper #detail .watchface-wrapper .watchface-item-wrapper .watchface-item .watchface-item-face.moto360 { top: 7px; left: 15px; width: 159px; height: 159px; } .browser-wrapper #detail .watchface-wrapper .watchface-item-wrapper .watchface-item .watchface-item-face.draftface { top: 7px; left: 15px; width: 159px; height: 159px; } .browser-wrapper #detail .watchface-wrapper .watchface-item-wrapper .watchface-item .watchface-item-face.lggwatchr { top: 11px; left: 23px; width: 147px; height: 147px; } .browser-wrapper #detail .watchface-wrapper .watchface-item-wrapper .watchface-item .watchface-item-face.smartwatch3 { top: 31px; left: 41px; width: 102px; height: 102px; } .browser-wrapper #detail .watchface-wrapper .watchface-item-wrapper .watchface-item .watchface-item-face.smartwatch3 img { border-radius: 1px; } .browser-wrapper #detail .watchface-wrapper .watchface-item-wrapper .watchface-item .watchface-item-face.zenwatch { top: 31px; left: 37px; width: 110px; height: 110px; } .browser-wrapper #detail .watchface-wrapper .watchface-item-wrapper .watchface-item .watchface-item-face.zenwatch img { border-radius: 6px; } .browser-wrapper #detail .watchface-wrapper .watchface-item-wrapper .watchface-item .watchface-item-face.urbane { top: 25px; left: 39px; width: 117px; height: 117px; } .browser-wrapper #detail .watchface-wrapper .watchface-item-wrapper .watchface-item .watchface-item-face.huaweismartwatch4 { top: 17px; left: 25px; width: 132px; height: 132px; } .browser-wrapper #detail .watchface-wrapper .watchface-item-wrapper .watchface-item .watchface-item-face.tagheuerconnectedwatch { top: 21px; left: 31px; width: 125px; height: 125px; } .browser-wrapper #detail .watchface-wrapper .watchface-item-wrapper .watchface-item .watchface-item-face.moto3602 { top: 6px; left: 15px; width: 161px; height: 161px; } .browser-wrapper #detail .watchface-wrapper .watchface-item-wrapper .watchface-item .watchface-item-face.zenwatch2 { top: 34px; left: 48px; width: 101px; height: 101px; } .browser-wrapper #detail .watchface-wrapper .watchface-item-wrapper .watchface-item .watchface-item-face.zenwatch2 img { border-radius: 1px; } .browser-wrapper #detail .watchface-wrapper .watchface-item-wrapper .watchface-item .watchface-item-face.fossilq { top: 17px; left: 23px; width: 143px; height: 143px; } .browser-wrapper #detail .watchface-wrapper .watchface-item-wrapper .watchface-item .watchface-item-face.casiowsdf10 { top: 11px; left: 22px; width: 147px; height: 147px; } .browser-wrapper #detail .watchface-wrapper .watchface-item-wrapper .watchface-item .watchface-item-face.moto3602w { top: 10px; left: 22px; width: 148px; height: 148px; } .browser-wrapper #detail .watchface-wrapper .watchface-item-wrapper .watchface-item .watchface-item-face.huaweismartwatch4w { top: 12px; left: 22px; width: 147px; height: 147px; } .browser-wrapper #detail .watchface-wrapper .watchface-item-wrapper .watchface-item .watchface-item-face.urbanelte { top: 11px; left: 22px; width: 147px; height: 147px; } .browser-wrapper #detail .watchface-wrapper .watchface-item-wrapper .watchface-item .watchface-item-face.gears2 { top: 22px; left: 34px; width: 125px; height: 125px; } .browser-wrapper #detail .watchface-wrapper .watchface-item-wrapper .watchface-item .watchface-item-face.gears3 { top: 25px; left: 32px; width: 125px; height: 125px; } .browser-wrapper #detail .watchface-wrapper .watchface-item-wrapper .watchface-item .watchface-item-face.moto360sport { top: 12px; left: 23px; width: 147px; height: 147px; } .browser-wrapper #detail .watchface-wrapper .watchface-item-wrapper .watchface-item .watchface-item-face.nixonmission { top: 7px; left: 17px; width: 157px; height: 157px; } .browser-wrapper #detail .watchface-wrapper .watchface-item-wrapper .watchface-item .watchface-item-face.polarm600 { top: 44px; left: 45px; width: 102px; height: 102px; } .browser-wrapper #detail .watchface-wrapper .watchface-item-wrapper .watchface-item .watchface-item-face.michaelkors { top: 12px; left: 24px; width: 144px; height: 144px; } .browser-wrapper #detail .watchface-wrapper .watchface-item-wrapper .watchface-item .circle img { border-radius: 50%; } .browser-wrapper #detail .watchface-wrapper .watchface-item-wrapper .watchface-item .watchface-item-background { position: absolute; top: -62px; left: -300px; width: 937px; height: 365px; z-index: -1; } .browser-wrapper #detail .watchface-wrapper .watchface-item-wrapper .watchface-item .watchface-item-background div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .browser-wrapper #detail .watchface-wrapper .watchface-item-wrapper .watchface-item .watchface-item-background .watchface-item-wrist { opacity: .15; z-index: 0; } .browser-wrapper #detail .watchface-wrapper .watchface-item-wrapper .watchface-item .watchface-item-background .watchface-item-watchband { z-index: 1; } .browser-wrapper #detail .watchface-wrapper:hover .watchface-item-wrist, .browser-wrapper #detail .watchface-wrapper.in-focus .watchface-item-wrist { opacity: 1 !important; } .browser-wrapper #detail .watchface-wrapper .watchface-info-wrapper { z-index: 3; width: 300px; padding-top: 55px; display: inline-block; vertical-align: top; } .browser-wrapper #detail .watchface-wrapper .watchface-info-wrapper .watchface-info { margin: 0 auto; } .browser-wrapper #detail .watchface-wrapper .watchface-info-wrapper .watchface-info > div { text-align: left; padding-left: 25px; } .browser-wrapper #detail .watchface-wrapper .watchface-info-wrapper .watchface-info > div .watchface-title { margin-bottom: 4px; padding-bottom: 6px; font-size: 28px; font-weight: 700; border-bottom: 2px solid; overflow: hidden; text-overflow: ellipsis; } .browser-wrapper #detail .watchface-wrapper .watchface-info-wrapper .watchface-info > div .watchface-description { max-width: 400px; word-wrap: break-word; } .browser-wrapper #detail .watchface-wrapper .watchface-info-wrapper .watchface-info > div.watchface-labels .draft { background: #2BADE3; } .browser-wrapper #detail .watchface-wrapper .watchface-info-wrapper .watchface-info > div.watchface-labels .unpublished { background: #FFF; color: #999; } .browser-wrapper #detail .watchface-wrapper .watchface-info-wrapper .watchface-info > div .label-stat { display: inline-block; color: #FFF; font-size: 11px; font-weight: 300; } .browser-wrapper #detail .watchface-wrapper .watchface-info-wrapper .watchface-info > div .label-stat .stat-icon-label { background: #919191; padding: 3px; padding-left: 8px; display: inline-block; height: 25px; line-height: 1.5; border-radius: 4px 0 0 4px; border: 2px solid #858585; border-right: 0; padding-right: 2px; } .browser-wrapper #detail .watchface-wrapper .watchface-info-wrapper .watchface-info > div .label-stat .stat-icon-label img { display: inline; max-height: 17px; margin: -2px 0 0 3px; } .browser-wrapper #detail .watchface-wrapper .watchface-info-wrapper .watchface-info > div .label-stat .stat-icon-count { color: #898989; font-weight: 700; background: #efefef; padding: 3px; padding-right: 6px; padding-left: 8px; display: inline-block; height: 25px; line-height: 1.5; border-radius: 0 4px 4px 0; border: 2px solid #e2e2e2; border-left: 0; } .browser-wrapper #detail .section-start { padding-top: 10px; } .user-line, #creatorInfoColumn .info-inner-section .community-item-icon, .editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-body .user { margin-top: 0.25em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .user-line img, #creatorInfoColumn .info-inner-section .community-item-icon img, .editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-body .user img { display: inline-block; border-radius: 50%; margin-right: 5px; width: 24px; height: 24px; border: 1px solid #DDD; } #creatorInfoColumn { position: fixed; top: 60px; overflow: auto; left: 0; height: 100%; width: 300px; background-color: #FFF; display: block; z-index: 5; } @media (max-width: 1000px) { #creatorInfoColumn { display: none; } } #creatorInfoColumn #latestReviewsSection .comment { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; } #creatorInfoColumn #latestReviewsSection .comment:not(:last-child) { margin-bottom: 25px; } #creatorInfoColumn #latestReviewsSection .comment .watch-container { width: 50px; height: 50px; margin: 0; -webkit-flex: 0 0 50px; -moz-flex: 0 0 50px; -ms-flex: 0 0 50px; flex: 0 0 50px; margin: 20px 10px 0 0; } #creatorInfoColumn #latestReviewsSection .comment .comment-content { overflow: hidden; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; } #creatorInfoColumn #latestReviewsSection .comment .comment-content .comment-body { padding: 5px 5px 0 5px; } #creatorInfoColumn #latestReviewsSection .comment .comment-content .comment-body .comment-text { font-style: italic; } #creatorInfoColumn #latestReviewsSection .comment .comment-content .comment-body .reply-button { margin-top: 10px; width: 88px; } #creatorInfoColumn #latestReviewsSection .comment .comment-content .comment-body .reply-button.disabled { color: #2bade3 !important; opacity: 1 !important; } #creatorInfoColumn .info-section { margin-left: 20px; margin-right: 20px; } #creatorInfoColumn h1 { text-align: left; font-size: 16px; margin-bottom: 15px; border-bottom: 3px solid #EEE; padding-bottom: 14px; color: #464646; } #creatorInfoColumn h1 .section-logo { position: relative; top: 1px; margin-right: 3px; color: #AAA; font-size: 80%; font-size: 14px; } #creatorInfoColumn .info-inner-section { margin-top: 10px; margin-bottom: 40px; text-align: left; font-size: 12px; line-height: 1.6; margin-left: 12px; } #creatorInfoColumn .info-inner-section .news-item-date { color: #c7c7c7; } #creatorInfoColumn .info-inner-section .news-item-link { margin-bottom: 10px; } #creatorInfoColumn .info-inner-section .community-item-noticon { margin-left: 0px; } #creatorInfoColumn .info-inner-section .community-item-name { display: inline; } #creatorInfoColumn .info-inner-section .community-item-name a { color: #AAA; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #creatorInfoColumn .info-inner-section .community-item-link { margin-bottom: 10px; } #creatorInfoColumn .info-inner-section .info-inner-section-intro { color: #AAA; margin-bottom: 1em; } #creatorInfoColumn .info-inner-section a, #creatorInfoColumn .info-inner-section a:visited { color: #5d5d5d; } #creatorInfoColumn .info-inner-section a:hover { color: #121212; } #creatorInfoColumn .info-inner-section .chevron { color: #ace1f9; float: right; display: block; } #creatorInfoColumn .info-inner-section .chevron i { position: relative; top: 2px; } .editor-modal .facer-modal-content { width: auto; border: none; overflow: hidden; padding: 0; background-color: #e6f3f7; } .editor-modal .facer-modal-content .facer-modal-title { text-align: left; } .editor-modal .facer-modal-content .facer-modal-title .header-close-button { float: right; font-size: 83%; } .editor-modal .facer-modal-content .facer-modal-body-wrapper { padding: 25px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; text-align: left; } .editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-image .watch-container { width: 150px; height: 150px; margin: 75px 25px 35px 10px; } .editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-body { width: 300px; margin: 0; } .editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-body .user .author-name { font-weight: bold; } .editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-body .comment-text { font-style: italic; padding-left: 10px; margin: 21px 0px 21px 0px; max-height: 150px; min-height: 50px; overflow: auto; } .editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-body .comment-list { max-height: 361px; overflow: auto; margin-bottom: 12px; } .editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-body .comment-list .comment { border-bottom: 1px solid rgba(43, 173, 227, 0.21); padding-bottom: 15px; margin-bottom: 15px; } .editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-body .comment-list .comment-text { min-height: 0px; } .editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-body .facer-modal-form textarea { width: 100%; height: 75px; padding: 5px 10px; resize: none; border: none; box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.15); } .editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-body .facer-modal-form .submit-btn-wrapper { margin-top: 20px; text-align: right; } .editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-body .facer-modal-form .submit-btn-wrapper .btn, .editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-body .facer-modal-form .submit-btn-wrapper .btn-green { color: white; min-width: 0; margin: 0; width: 88px; } .editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-body .facer-modal-form .submit-btn-wrapper .btn.disabled, .editor-modal .facer-modal-content .facer-modal-body-wrapper .facer-modal-body .facer-modal-form .submit-btn-wrapper .btn-green.disabled { color: #2bade3 !important; opacity: 1 !important; }