Compare commits
No commits in common. "master" and "4.2" have entirely different histories.
|
|
@ -1,4 +1,5 @@
|
||||||
assets
|
assets
|
||||||
|
config
|
||||||
bin
|
bin
|
||||||
|
|
||||||
# Created by https://www.gitignore.io/api/osx
|
# Created by https://www.gitignore.io/api/osx
|
||||||
|
|
@ -29,36 +30,3 @@ Icon
|
||||||
Network Trash Folder
|
Network Trash Folder
|
||||||
Temporary Items
|
Temporary Items
|
||||||
.apdisk
|
.apdisk
|
||||||
.lock-waf_darwin_build
|
|
||||||
build
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# Created by https://www.gitignore.io/api/xcode
|
|
||||||
|
|
||||||
### Xcode ###
|
|
||||||
# Xcode
|
|
||||||
#
|
|
||||||
# gitignore contributors: remember to update Global/Xcode.gitignore, Objective-C.gitignore & Swift.gitignore
|
|
||||||
|
|
||||||
## Build generated
|
|
||||||
build/
|
|
||||||
DerivedData
|
|
||||||
|
|
||||||
## Various settings
|
|
||||||
*.pbxuser
|
|
||||||
!default.pbxuser
|
|
||||||
*.mode1v3
|
|
||||||
!default.mode1v3
|
|
||||||
*.mode2v3
|
|
||||||
!default.mode2v3
|
|
||||||
*.perspectivev3
|
|
||||||
!default.perspectivev3
|
|
||||||
xcuserdata
|
|
||||||
|
|
||||||
## Other
|
|
||||||
*.xccheckout
|
|
||||||
*.moved-aside
|
|
||||||
*.xcuserstate
|
|
||||||
*.pbxproj
|
|
||||||
*.xcworkspacedata
|
|
||||||
|
|
|
||||||
42
README.md
|
|
@ -2,43 +2,7 @@
|
||||||
|
|
||||||
A Pebble Watchface for Pebble, Pebble Time and Pebble Time Round
|
A Pebble Watchface for Pebble, Pebble Time and Pebble Time Round
|
||||||
|
|
||||||
## Store page
|
Original source code by lastfuture
|
||||||
|
|
||||||
[Squared 4.0 – Rebble Store Page](https://apps.rebble.io/en_US/application/52f014d342937dc4430000ee)
|
|
||||||
|
|
||||||
## Demo videos
|
|
||||||
|
|
||||||
[](https://youtu.be/EjgYxUxGvdI)
|
|
||||||
|
|
||||||
[](https://youtu.be/P3UX2pdzZdk)
|
|
||||||
|
|
||||||
## Gallery
|
|
||||||
|
|
||||||
#### App banners for the Pebble featured section
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#### Official Pebble promo shot for the Pebble website
|
|
||||||
|
|
||||||
|
|
||||||
#### Showcase of some color options
|
|
||||||
|
|
||||||
|
|
||||||
#### Settings page automatically showing the correct frame for the connected model and colorway
|
|
||||||
|
|
||||||
|
|
||||||
#### Own promo photo of Squared 4.0 on the Pebble Time Round
|
|
||||||
|
|
||||||
|
|
||||||
## Other Platforms
|
|
||||||
[Fitbit Versa](https://git.broken.graphics/alina/fitbit-squared)
|
|
||||||
|
|
||||||
## Credits
|
|
||||||
|
|
||||||
Original Squared 1.0 source code by Alina
|
|
||||||
SDK 2.0beta4 port by Jnm
|
SDK 2.0beta4 port by Jnm
|
||||||
SDK 3.0 port and colorization by hexahedria
|
SDK 3.0 port and colorizing by hexahedria
|
||||||
Adaptations for all black and white and color Pebble models as well as continued development by Alina
|
adaptations for Chalk and Aplite by lastfuture
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
{
|
||||||
|
"appKeys": {
|
||||||
|
"background_color": 4,
|
||||||
|
"eu_date": 1,
|
||||||
|
"invert": 9,
|
||||||
|
"large_mode": 0,
|
||||||
|
"leading_zero": 3,
|
||||||
|
"monochrome": 10,
|
||||||
|
"number_base_color": 5,
|
||||||
|
"number_variation": 6,
|
||||||
|
"ornament_base_color": 7,
|
||||||
|
"ornament_variation": 8,
|
||||||
|
"quick_start": 2
|
||||||
|
},
|
||||||
|
"capabilities": [
|
||||||
|
"configurable"
|
||||||
|
],
|
||||||
|
"companyName": "lastfuture",
|
||||||
|
"longName": "Squared 4.0",
|
||||||
|
"projectType": "native",
|
||||||
|
"resources": {
|
||||||
|
"media": []
|
||||||
|
},
|
||||||
|
"sdkVersion": "3",
|
||||||
|
"shortName": "Squared",
|
||||||
|
"targetPlatforms": [
|
||||||
|
"aplite",
|
||||||
|
"basalt",
|
||||||
|
"chalk"
|
||||||
|
],
|
||||||
|
"uuid": "793bab03-9464-48a2-b63f-3f779c473db8",
|
||||||
|
"versionLabel": "4.1",
|
||||||
|
"watchapp": {
|
||||||
|
"watchface": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,485 +0,0 @@
|
||||||
@font-face {
|
|
||||||
font-family: 'PFDinDisplayProLightWebfont';
|
|
||||||
src: url("../fonts/PFDinDisplayPro-Light.woff") format("woff");
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
font-variant: normal; }
|
|
||||||
@font-face {
|
|
||||||
font-family: 'PTSansRegularWebfont';
|
|
||||||
src: url("../fonts/PTSans-regular.woff") format("woff");
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
font-variant: normal; }
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0; }
|
|
||||||
|
|
||||||
*:focus {
|
|
||||||
outline-width: 0; }
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #FF4700;
|
|
||||||
text-decoration: none; }
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: #EAEAEA;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
font-size: 1.2em;
|
|
||||||
line-height: 1.4em;
|
|
||||||
-webkit-user-select: none !important;
|
|
||||||
-moz-user-select: none !important;
|
|
||||||
-ms-user-select: none !important;
|
|
||||||
user-select: none !important; }
|
|
||||||
|
|
||||||
body, select, input[type=text], input[type=time], input[type=date] {
|
|
||||||
font-family: 'PFDinDisplayPro-Light', PFDinDisplayProLightWebfont, sans-serif;
|
|
||||||
font-weight: normal; }
|
|
||||||
|
|
||||||
select, input[type=time], input[type=date] {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
-moz-appearance: none;
|
|
||||||
-ms-appearance: none;
|
|
||||||
appearance: none;
|
|
||||||
border: none;
|
|
||||||
position: absolute;
|
|
||||||
top: 13px;
|
|
||||||
color: #A8A8A8;
|
|
||||||
font-size: 1em;
|
|
||||||
line-height: 1em;
|
|
||||||
background-color: #F7F7F7; }
|
|
||||||
|
|
||||||
input[type=date] {
|
|
||||||
direction: rtl; }
|
|
||||||
|
|
||||||
select {
|
|
||||||
right: 30px;
|
|
||||||
top: 14px; }
|
|
||||||
|
|
||||||
input[type=time] {
|
|
||||||
right: 10px !important; }
|
|
||||||
|
|
||||||
input[type=date] {
|
|
||||||
right: 10px !important; }
|
|
||||||
|
|
||||||
.select-triangle {
|
|
||||||
position: absolute;
|
|
||||||
right: 10px;
|
|
||||||
top: 20px;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-left: 7px solid transparent;
|
|
||||||
border-right: 7px solid transparent;
|
|
||||||
border-top: 7px solid #FF4700; }
|
|
||||||
|
|
||||||
.item-container {
|
|
||||||
color: #333333;
|
|
||||||
margin-top: 15px; }
|
|
||||||
|
|
||||||
.item-container-header {
|
|
||||||
padding: 3px 10px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-family: 'PT Sans', PTSansRegularWebfont, sans-serif;
|
|
||||||
font-size: .8em;
|
|
||||||
font-weight: normal;
|
|
||||||
color: #A8A8A8; }
|
|
||||||
|
|
||||||
.item-container-content {
|
|
||||||
background-color: #F7F7F7;
|
|
||||||
border-top: 1px solid #DEDEDE;
|
|
||||||
border-bottom: 1px solid #DEDEDE; }
|
|
||||||
|
|
||||||
.item-container-footer {
|
|
||||||
padding: 3px 10px;
|
|
||||||
font-size: .7em;
|
|
||||||
line-height: 1.4em;
|
|
||||||
color: #A8A8A8; }
|
|
||||||
|
|
||||||
.item {
|
|
||||||
position: relative;
|
|
||||||
padding: 10px;
|
|
||||||
display: block;
|
|
||||||
overflow: hidden; }
|
|
||||||
|
|
||||||
.item:not(:first-child) {
|
|
||||||
border-top: 1px solid #DEDEDE; }
|
|
||||||
|
|
||||||
.item-subtitle-wrapper {
|
|
||||||
font-size: 1em; }
|
|
||||||
|
|
||||||
.item-subtitle-wrapper .item-styled-toggle-wrapper {
|
|
||||||
top: 16px; }
|
|
||||||
|
|
||||||
.item-subtitle-wrapper .item-styled-checkbox {
|
|
||||||
top: 18px; }
|
|
||||||
|
|
||||||
.item-subtitle-wrapper .item-styled-radio {
|
|
||||||
top: 16px; }
|
|
||||||
|
|
||||||
.item-subtitle-wrapper .item-draggable-handle {
|
|
||||||
top: 18px; }
|
|
||||||
|
|
||||||
.item-subtitle {
|
|
||||||
font-size: .7em;
|
|
||||||
line-height: .7em;
|
|
||||||
padding: .3em 0; }
|
|
||||||
|
|
||||||
.item-styled-toggle-wrapper {
|
|
||||||
position: absolute;
|
|
||||||
right: 10px;
|
|
||||||
top: 8px;
|
|
||||||
width: 56px;
|
|
||||||
height: 30px;
|
|
||||||
border-radius: 5px;
|
|
||||||
transition-timing-function: ease-in-out;
|
|
||||||
transition-duration: 0.3s;
|
|
||||||
transition-property: background-color; }
|
|
||||||
|
|
||||||
.item-styled-toggle {
|
|
||||||
position: relative;
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
border-radius: 5px;
|
|
||||||
top: 1px;
|
|
||||||
transition-timing-function: ease-in-out;
|
|
||||||
transition-duration: 0.3s;
|
|
||||||
transition-property: left; }
|
|
||||||
|
|
||||||
.item-toggle {
|
|
||||||
display: none; }
|
|
||||||
|
|
||||||
.item-toggle + .item-styled-toggle-wrapper {
|
|
||||||
background-color: #A8A8A8; }
|
|
||||||
|
|
||||||
.item-toggle:checked + .item-styled-toggle-wrapper {
|
|
||||||
background-color: #FF4700; }
|
|
||||||
|
|
||||||
.item-toggle + .item-styled-toggle-wrapper .item-styled-toggle {
|
|
||||||
left: 1px; }
|
|
||||||
|
|
||||||
.item-toggle:checked + .item-styled-toggle-wrapper .item-styled-toggle {
|
|
||||||
left: 27px; }
|
|
||||||
|
|
||||||
.item-styled-toggle-bar {
|
|
||||||
width: 3px;
|
|
||||||
height: 15px;
|
|
||||||
margin-left: 3px;
|
|
||||||
background-color: #EAEAEA;
|
|
||||||
float: left;
|
|
||||||
position: relative;
|
|
||||||
left: 4px;
|
|
||||||
top: 7px; }
|
|
||||||
|
|
||||||
.item-styled-checkbox {
|
|
||||||
position: absolute;
|
|
||||||
right: 10px;
|
|
||||||
top: 10px;
|
|
||||||
width: 21px;
|
|
||||||
height: 21px;
|
|
||||||
border-radius: 5px;
|
|
||||||
border-width: 2px;
|
|
||||||
border-style: solid; }
|
|
||||||
|
|
||||||
.item-checkbox {
|
|
||||||
display: none; }
|
|
||||||
|
|
||||||
.item-checkbox + .item-styled-checkbox {
|
|
||||||
border-color: #DEDEDE; }
|
|
||||||
|
|
||||||
.item-checkbox:checked + .item-styled-checkbox {
|
|
||||||
border-color: #FF4700;
|
|
||||||
background-color: #FF4700; }
|
|
||||||
|
|
||||||
.item-checkbox:checked + .item-styled-checkbox:before {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
left: 7px;
|
|
||||||
width: 6px;
|
|
||||||
height: 14px;
|
|
||||||
border-color: #F7F7F7;
|
|
||||||
border-width: 0 2px 2px 0;
|
|
||||||
border-style: solid;
|
|
||||||
-webkit-transform: rotate(45deg);
|
|
||||||
-moz-transform: rotate(45deg);
|
|
||||||
-ms-transform: rotate(45deg);
|
|
||||||
-o-transform: rotate(45deg);
|
|
||||||
transform: rotate(45deg); }
|
|
||||||
|
|
||||||
.item-styled-radio {
|
|
||||||
position: absolute;
|
|
||||||
right: 10px;
|
|
||||||
top: 10px;
|
|
||||||
width: 21px;
|
|
||||||
height: 21px;
|
|
||||||
border-radius: 12px;
|
|
||||||
border-width: 2px;
|
|
||||||
border-style: solid; }
|
|
||||||
|
|
||||||
.item-radio {
|
|
||||||
display: none; }
|
|
||||||
|
|
||||||
.item-radio + .item-styled-radio {
|
|
||||||
border-color: #DEDEDE; }
|
|
||||||
|
|
||||||
.item-radio:checked + .item-styled-radio {
|
|
||||||
border-color: #FF4700;
|
|
||||||
background-color: #FF4700; }
|
|
||||||
|
|
||||||
.item-radio:checked + .item-styled-radio:before {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
top: 1px;
|
|
||||||
left: 6px;
|
|
||||||
width: 6px;
|
|
||||||
height: 14px;
|
|
||||||
border-color: #F7F7F7;
|
|
||||||
border-width: 0 2px 2px 0;
|
|
||||||
border-style: solid;
|
|
||||||
-webkit-transform: rotate(45deg);
|
|
||||||
-moz-transform: rotate(45deg);
|
|
||||||
-ms-transform: rotate(45deg);
|
|
||||||
-o-transform: rotate(45deg);
|
|
||||||
transform: rotate(45deg); }
|
|
||||||
|
|
||||||
.item-color {
|
|
||||||
display: none; }
|
|
||||||
|
|
||||||
.item-styled-color {
|
|
||||||
background: #F7F7F7; }
|
|
||||||
.item-styled-color .value {
|
|
||||||
position: absolute;
|
|
||||||
right: 10px;
|
|
||||||
top: 10px;
|
|
||||||
width: 56px;
|
|
||||||
height: 30px;
|
|
||||||
border-radius: 5px;
|
|
||||||
border-color: #A8A8A8;
|
|
||||||
border-width: 1px;
|
|
||||||
border-style: solid; }
|
|
||||||
.item-styled-color .color-box-wrap {
|
|
||||||
display: none;
|
|
||||||
box-sizing: border-box;
|
|
||||||
position: relative;
|
|
||||||
height: 0;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0 0 100% 0;
|
|
||||||
margin: 0.6em 0 0em; }
|
|
||||||
.item-styled-color .color-box-wrap.show {
|
|
||||||
display: block; }
|
|
||||||
.item-styled-color .color-box-wrap .color-box-container {
|
|
||||||
position: absolute;
|
|
||||||
height: 99.97%;
|
|
||||||
width: 100%;
|
|
||||||
left: 0;
|
|
||||||
top: 0; }
|
|
||||||
.item-styled-color .color-box-wrap .color-box-container .color-box {
|
|
||||||
float: left;
|
|
||||||
cursor: pointer; }
|
|
||||||
.item-styled-color .color-box-wrap .color-box-container .color-box.rounded-tl {
|
|
||||||
border-top-left-radius: 5px; }
|
|
||||||
.item-styled-color .color-box-wrap .color-box-container .color-box.rounded-tr {
|
|
||||||
border-top-right-radius: 5px; }
|
|
||||||
.item-styled-color .color-box-wrap .color-box-container .color-box.rounded-bl {
|
|
||||||
border-bottom-left-radius: 5px; }
|
|
||||||
.item-styled-color .color-box-wrap .color-box-container .color-box.rounded-br {
|
|
||||||
border-bottom-right-radius: 5px; }
|
|
||||||
|
|
||||||
.item-date, .item-time {
|
|
||||||
position: absolute;
|
|
||||||
color: #F7F7F7 !important; }
|
|
||||||
|
|
||||||
.item-styled-date, .item-styled-time {
|
|
||||||
position: absolute;
|
|
||||||
top: 13px;
|
|
||||||
right: 10px;
|
|
||||||
color: #A8A8A8;
|
|
||||||
font-size: 1em;
|
|
||||||
line-height: 1em;
|
|
||||||
background-color: #F7F7F7; }
|
|
||||||
|
|
||||||
.item-input-wrapper {
|
|
||||||
border-radius: 5px;
|
|
||||||
border: 2px solid #DEDEDE; }
|
|
||||||
|
|
||||||
.item-input-wrapper-button {
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 77%; }
|
|
||||||
|
|
||||||
.item-input {
|
|
||||||
border: 0;
|
|
||||||
background-color: transparent;
|
|
||||||
padding: 0 10px 7px 10px;
|
|
||||||
font-size: 13px;
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box; }
|
|
||||||
|
|
||||||
.button-container {
|
|
||||||
text-align: center; }
|
|
||||||
|
|
||||||
.item-button {
|
|
||||||
width: 60%;
|
|
||||||
height: 35px;
|
|
||||||
background-color: #FF4700;
|
|
||||||
border-radius: 5px;
|
|
||||||
color: white;
|
|
||||||
font-size: 0.8em;
|
|
||||||
border: none;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
-moz-appearance: none;
|
|
||||||
-ms-appearance: none;
|
|
||||||
appearance: none; }
|
|
||||||
|
|
||||||
.item-input-button {
|
|
||||||
position: absolute;
|
|
||||||
right: 10px;
|
|
||||||
top: 9px;
|
|
||||||
width: 20%; }
|
|
||||||
|
|
||||||
.tab-buttons {
|
|
||||||
display: table;
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
table-layout: fixed; }
|
|
||||||
|
|
||||||
.tab-button {
|
|
||||||
display: table-cell;
|
|
||||||
position: relative;
|
|
||||||
color: #FF4700;
|
|
||||||
border: 1px solid #FF4700;
|
|
||||||
border-right-width: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
padding: 5px 0;
|
|
||||||
text-align: center;
|
|
||||||
right: -1px; }
|
|
||||||
|
|
||||||
.tab-button:first-child {
|
|
||||||
border-top-left-radius: 5px;
|
|
||||||
border-bottom-left-radius: 5px;
|
|
||||||
border-right-width: 0; }
|
|
||||||
|
|
||||||
.tab-button:last-child {
|
|
||||||
border-top-right-radius: 5px;
|
|
||||||
border-bottom-right-radius: 5px;
|
|
||||||
border-right-width: 1px; }
|
|
||||||
|
|
||||||
.tab-button.active {
|
|
||||||
background-color: #FF4700;
|
|
||||||
color: #F7F7F7; }
|
|
||||||
|
|
||||||
.item-slider {
|
|
||||||
position: relative;
|
|
||||||
top: 8px;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
-moz-appearance: none;
|
|
||||||
-ms-appearance: none;
|
|
||||||
appearance: none;
|
|
||||||
height: 30px;
|
|
||||||
width: 79%;
|
|
||||||
overflow: hidden;
|
|
||||||
background-color: transparent;
|
|
||||||
margin-top: -10px; }
|
|
||||||
|
|
||||||
.item-slider::-webkit-slider-thumb:before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: 11px;
|
|
||||||
left: -1001px;
|
|
||||||
height: 2px;
|
|
||||||
width: 1000px;
|
|
||||||
background: #FF4700; }
|
|
||||||
|
|
||||||
.item-slider::-webkit-slider-thumb {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
-moz-appearance: none;
|
|
||||||
-ms-appearance: none;
|
|
||||||
appearance: none;
|
|
||||||
position: relative;
|
|
||||||
top: -13px;
|
|
||||||
height: 28px;
|
|
||||||
width: 28px;
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
border-radius: 5px;
|
|
||||||
border: 2px solid #EAEAEA; }
|
|
||||||
|
|
||||||
.item-slider::-webkit-slider-runnable-track {
|
|
||||||
height: 2px;
|
|
||||||
background-color: #DEDEDE; }
|
|
||||||
|
|
||||||
.item-slider::-webkit-slider-thumb:after {
|
|
||||||
content: "lll";
|
|
||||||
position: absolute;
|
|
||||||
left: 4px;
|
|
||||||
top: 3px;
|
|
||||||
height: 12px;
|
|
||||||
width: 10px;
|
|
||||||
font-weight: normal;
|
|
||||||
text-align: center;
|
|
||||||
color: #DEDEDE;
|
|
||||||
font-size: 16px;
|
|
||||||
letter-spacing: 1px; }
|
|
||||||
|
|
||||||
.item-slider-text {
|
|
||||||
position: absolute;
|
|
||||||
top: 6px;
|
|
||||||
right: 10px;
|
|
||||||
width: 16%; }
|
|
||||||
|
|
||||||
.item-slider-text .item-input {
|
|
||||||
text-align: center; }
|
|
||||||
|
|
||||||
.delete-item {
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
right: 5px;
|
|
||||||
top: 5px;
|
|
||||||
position: absolute;
|
|
||||||
border-radius: 6px; }
|
|
||||||
|
|
||||||
.delete-item:before, .delete-item:after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: 24px;
|
|
||||||
height: 2px;
|
|
||||||
background-color: #A8A8A8;
|
|
||||||
border-radius: 2px;
|
|
||||||
top: 16px; }
|
|
||||||
|
|
||||||
.delete-item:before {
|
|
||||||
-webkit-transform: rotate(45deg);
|
|
||||||
-moz-transform: rotate(45deg);
|
|
||||||
-ms-transform: rotate(45deg);
|
|
||||||
-o-transform: rotate(45deg);
|
|
||||||
transform: rotate(45deg);
|
|
||||||
left: 3px; }
|
|
||||||
|
|
||||||
.delete-item:after {
|
|
||||||
-webkit-transform: rotate(-45deg);
|
|
||||||
-moz-transform: rotate(-45deg);
|
|
||||||
-ms-transform: rotate(-45deg);
|
|
||||||
-o-transform: rotate(-45deg);
|
|
||||||
transform: rotate(-45deg);
|
|
||||||
right: 3px; }
|
|
||||||
|
|
||||||
.add-item {
|
|
||||||
color: #FF4700; }
|
|
||||||
|
|
||||||
.item-draggable-handle {
|
|
||||||
position: absolute;
|
|
||||||
right: 5px;
|
|
||||||
top: 10px;
|
|
||||||
height: 28px;
|
|
||||||
width: 28px; }
|
|
||||||
|
|
||||||
.item-draggable-handle-bar {
|
|
||||||
margin-top: 5px;
|
|
||||||
height: 2px;
|
|
||||||
width: 20px;
|
|
||||||
background-color: #A8A8A8;
|
|
||||||
text-align: center; }
|
|
||||||
|
|
||||||
[draggable=true] {
|
|
||||||
background-color: #F7F7F7;
|
|
||||||
border: 2px solid #EAEAEA;
|
|
||||||
border-radius: 2px; }
|
|
||||||
|
|
@ -1,124 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>Squared 4.0 Settings</title>
|
|
||||||
<link rel="stylesheet" href="css/slate.min.css">
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div class="item-container">
|
|
||||||
<div class="item-container-header">Colors</div>
|
|
||||||
<div class="item-container-content">
|
|
||||||
<label class="item bwhide">
|
|
||||||
Number Color
|
|
||||||
<select id="num_color" dir='rtl' class="item-select">
|
|
||||||
<option class="bwhide" selected="selected">Diamond</option>
|
|
||||||
<option class="bwhide">Ruby</option>
|
|
||||||
<option class="bwhide">Fire</option>
|
|
||||||
<option class="bwhide">Forest</option>
|
|
||||||
<option class="bwhide">Red</option>
|
|
||||||
<option class="bwhide">Green</option>
|
|
||||||
<option class="bwhide">Blue</option>
|
|
||||||
<option class="bwhide">Yellow</option>
|
|
||||||
<option class="bwhide">Cyan</option>
|
|
||||||
<option class="bwhide">Magenta</option>
|
|
||||||
<option class="bwhide">Violet</option>
|
|
||||||
<option class="bwhide">Orange</option>
|
|
||||||
<option class="bwhide">Vivid Cerulean</option>
|
|
||||||
<option class="bwhide">Chrome Yellow</option>
|
|
||||||
<option class="bwhide">Spring Green</option>
|
|
||||||
<option>Black</option>
|
|
||||||
<option>Dark Gray</option>
|
|
||||||
<option class="bwhide">Light Gray</option>
|
|
||||||
<option class="bwdefault">White</option>
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
<label class="item bwhide">
|
|
||||||
Ornament Color
|
|
||||||
<select id="orn_color" dir='rtl' class="item-select">
|
|
||||||
<option class="bwhide">Diamond</option>
|
|
||||||
<option class="bwhide" selected="selected">Ruby</option>
|
|
||||||
<option class="bwhide">Fire</option>
|
|
||||||
<option class="bwhide">Forest</option>
|
|
||||||
<option class="bwhide">Red</option>
|
|
||||||
<option class="bwhide">Green</option>
|
|
||||||
<option class="bwhide">Blue</option>
|
|
||||||
<option class="bwhide">Yellow</option>
|
|
||||||
<option class="bwhide">Cyan</option>
|
|
||||||
<option class="bwhide">Magenta</option>
|
|
||||||
<option class="bwhide">Violet</option>
|
|
||||||
<option class="bwhide">Orange</option>
|
|
||||||
<option class="bwhide">Vivid Cerulean</option>
|
|
||||||
<option class="bwhide">Chrome Yellow</option>
|
|
||||||
<option class="bwhide">Spring Green</option>
|
|
||||||
<option>Black</option>
|
|
||||||
<option class="bwdefault">Dark Gray</option>
|
|
||||||
<option class="bwhide">Light Gray</option>
|
|
||||||
<option>White</option>
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
<label class="item bwhide">
|
|
||||||
Background Color
|
|
||||||
<select id="bg_color" dir='rtl' class="item-select">
|
|
||||||
<option class="bwdefault" selected="selected">Black</option>
|
|
||||||
<option>Dark Gray</option>
|
|
||||||
<option class="bwhide">Light Gray</option>
|
|
||||||
<option>White</option>
|
|
||||||
<option class="bwhide">Red</option>
|
|
||||||
<option class="bwhide">Green</option>
|
|
||||||
<option class="bwhide">Blue</option>
|
|
||||||
<option class="bwhide">Yellow</option>
|
|
||||||
<option class="bwhide">Cyan</option>
|
|
||||||
<option class="bwhide">Magenta</option>
|
|
||||||
<option class="bwhide">Violet</option>
|
|
||||||
<option class="bwhide">Orange</option>
|
|
||||||
<option class="bwhide">Vivid Cerulean</option>
|
|
||||||
<option class="bwhide">Chrome Yellow</option>
|
|
||||||
<option class="bwhide">Spring Green</option>
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
<label class='item colorhide'>
|
|
||||||
Three Colors
|
|
||||||
<input id='monochrome' type='checkbox' class='item-toggle'>
|
|
||||||
</label>
|
|
||||||
<label class='item colorhide'>
|
|
||||||
Invert colors
|
|
||||||
<input id='invert' type='checkbox' class='item-toggle'>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class='item-container-footer'>
|
|
||||||
Cras mattis consectetur purus sit amet fermentum.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class='item-container'>
|
|
||||||
<div class='item-container-header'>Appearance</div>
|
|
||||||
<div class='item-container-content'>
|
|
||||||
<label class='item roundhide'>
|
|
||||||
Large Numbers
|
|
||||||
<input id='size' type='checkbox' class='item-toggle'>
|
|
||||||
</label>
|
|
||||||
<label class='item'>
|
|
||||||
Leading Zero
|
|
||||||
<input id='zero' type='checkbox' class='item-toggle'>
|
|
||||||
</label>
|
|
||||||
<label class='item'>
|
|
||||||
European Date (dd/mm)
|
|
||||||
<input id='date' type='checkbox' class='item-toggle'>
|
|
||||||
</label>
|
|
||||||
<label class='item'>
|
|
||||||
Fast Start Delay
|
|
||||||
<input id='delay' type='checkbox' class='item-toggle'>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="item-container">
|
|
||||||
<div class="button-container">
|
|
||||||
<input id="send" type="button" class="item-button" value="SEND">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="js/slate.min.js"></script>
|
|
||||||
<script src="js/main.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,150 +0,0 @@
|
||||||
function parse(val) {
|
|
||||||
var result = "Not found",
|
|
||||||
tmp = [];
|
|
||||||
location.search
|
|
||||||
//.replace ( "?", "" )
|
|
||||||
// this is better, there might be a question mark inside
|
|
||||||
.substr(1)
|
|
||||||
.split("&")
|
|
||||||
.forEach(function (item) {
|
|
||||||
tmp = item.split("=");
|
|
||||||
if (tmp[0] === val) result = decodeURIComponent(tmp[1]);
|
|
||||||
});
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getColorByName(name) {
|
|
||||||
return {
|
|
||||||
"Diamond": 202,
|
|
||||||
"Ruby": 226,
|
|
||||||
"Fire": 224,
|
|
||||||
"Forest": 200,
|
|
||||||
"Red": 240,
|
|
||||||
"Green": 204,
|
|
||||||
"Blue": 195,
|
|
||||||
"Yellow": 252,
|
|
||||||
"Cyan": 207,
|
|
||||||
"Magenta": 243,
|
|
||||||
"Violet": 227,
|
|
||||||
"Orange": 244,
|
|
||||||
"Vivid Cerulean": 203,
|
|
||||||
"Chrome Yellow": 248,
|
|
||||||
"Spring Green": 206,
|
|
||||||
"Black": 192,
|
|
||||||
"Dark Gray": 213,
|
|
||||||
"Light Gray": 234,
|
|
||||||
"White": 255
|
|
||||||
}[name];
|
|
||||||
}
|
|
||||||
function getVariationByName(name) {
|
|
||||||
return ["Diamond", "Ruby", "Fire", "Forest"].indexOf(name) != -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
(function() {
|
|
||||||
loadOptions();
|
|
||||||
submitHandler();
|
|
||||||
})();
|
|
||||||
|
|
||||||
function getDataToSend() {
|
|
||||||
bg_color = $("#bg_color").val();
|
|
||||||
num_color = $("#num_color").val();
|
|
||||||
orn_color = $("#orn_color").val();
|
|
||||||
data = {
|
|
||||||
large_mode: ''+$("#size").prop("checked"),
|
|
||||||
eu_date: ''+$("#date").prop("checked"),
|
|
||||||
quick_start: ''+$("#delay").prop("checked"),
|
|
||||||
leading_zero: ''+$("#zero").prop("checked"),
|
|
||||||
background_color: getColorByName(bg_color),
|
|
||||||
number_base_color: getColorByName(num_color),
|
|
||||||
number_variation: 0+getVariationByName(num_color),
|
|
||||||
ornament_base_color: getColorByName(orn_color),
|
|
||||||
ornament_variation: 0+getVariationByName(orn_color),
|
|
||||||
invert: ''+$("#invert").prop("checked"),
|
|
||||||
monochrome: ''+$("#monochrome").prop("checked"),
|
|
||||||
};
|
|
||||||
return data;
|
|
||||||
}
|
|
||||||
|
|
||||||
function saveData(){
|
|
||||||
if(localStorage) {
|
|
||||||
toStore = {
|
|
||||||
size: ''+$("#size").prop("checked"),
|
|
||||||
date: ''+$("#date").prop("checked"),
|
|
||||||
delay: ''+$("#delay").prop("checked"),
|
|
||||||
zero: ''+$("#zero").prop("checked"),
|
|
||||||
bg_color: $("#bg_color").val(),
|
|
||||||
num_color: $("#num_color").val(),
|
|
||||||
orn_color: $("#orn_color").val(),
|
|
||||||
invert: ''+$("#invert").prop("checked"),
|
|
||||||
monochrome: ''+$("#monochrome").prop("checked")
|
|
||||||
};
|
|
||||||
localStorage.setItem("lastconfig", JSON.stringify(toStore));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function restoreData(){
|
|
||||||
if(localStorage) {
|
|
||||||
stored = JSON.parse(localStorage.getItem("lastconfig"));
|
|
||||||
if(stored){
|
|
||||||
$("#size").prop("checked", (stored.size === 'true'));
|
|
||||||
$("#date").prop("checked", (stored.date === 'true'));
|
|
||||||
$("#delay").prop("checked", (stored.delay === 'true'));
|
|
||||||
$("#zero").prop("checked", (stored.zero === 'true'));
|
|
||||||
$("#bg_color").val(stored.bg_color);
|
|
||||||
$("#num_color").val(stored.num_color);
|
|
||||||
$("#orn_color").val(stored.orn_color);
|
|
||||||
$("#invert").prop("checked", (stored.invert === 'true'));
|
|
||||||
$("#monochrome").prop("checked", (stored.monochrome === 'true'));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function submitHandler() {
|
|
||||||
var $submitButton = $('#send');
|
|
||||||
|
|
||||||
$submitButton.on('click', function() {
|
|
||||||
console.log('Submit');
|
|
||||||
|
|
||||||
var return_to = getQueryParam('return_to', 'pebblejs://close#');
|
|
||||||
document.location = return_to + encodeURIComponent(JSON.stringify(getAndStoreConfigData()));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadOptions() {
|
|
||||||
if(parse('rect') == 'true') {
|
|
||||||
// $('.recthide').hide();
|
|
||||||
} else {
|
|
||||||
$('.roundhide').hide();
|
|
||||||
}
|
|
||||||
if(parse('bw') == 'true') {
|
|
||||||
$('.bwhide').hide();
|
|
||||||
$("option.bwhide").remove();
|
|
||||||
$("select").each(function() {
|
|
||||||
if ($(this)[0].value == "") {
|
|
||||||
$(this)[0].value = $(this).find('option.bwdefault').html();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
$('.colorhide').hide();
|
|
||||||
}
|
|
||||||
restoreData();
|
|
||||||
}
|
|
||||||
|
|
||||||
function getAndStoreConfigData() {
|
|
||||||
saveData();
|
|
||||||
return getDataToSend();
|
|
||||||
}
|
|
||||||
|
|
||||||
function getQueryParam(variable, defaultValue) {
|
|
||||||
var query = location.search.substring(1);
|
|
||||||
var vars = query.split('&');
|
|
||||||
for (var i = 0; i < vars.length; i++) {
|
|
||||||
var pair = vars[i].split('=');
|
|
||||||
if (pair[0] === variable) {
|
|
||||||
return decodeURIComponent(pair[1]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return defaultValue || false;
|
|
||||||
}
|
|
||||||
|
|
@ -1,485 +0,0 @@
|
||||||
@font-face {
|
|
||||||
font-family: 'PFDinDisplayProLightWebfont';
|
|
||||||
src: url("../fonts/PFDinDisplayPro-Light.woff") format("woff");
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
font-variant: normal; }
|
|
||||||
@font-face {
|
|
||||||
font-family: 'PTSansRegularWebfont';
|
|
||||||
src: url("../fonts/PTSans-regular.woff") format("woff");
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
font-variant: normal; }
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0; }
|
|
||||||
|
|
||||||
*:focus {
|
|
||||||
outline-width: 0; }
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #FF4700;
|
|
||||||
text-decoration: none; }
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: #EAEAEA;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
font-size: 1.2em;
|
|
||||||
line-height: 1.4em;
|
|
||||||
-webkit-user-select: none !important;
|
|
||||||
-moz-user-select: none !important;
|
|
||||||
-ms-user-select: none !important;
|
|
||||||
user-select: none !important; }
|
|
||||||
|
|
||||||
body, select, input[type=text], input[type=time], input[type=date] {
|
|
||||||
font-family: 'PFDinDisplayPro-Light', PFDinDisplayProLightWebfont, sans-serif;
|
|
||||||
font-weight: normal; }
|
|
||||||
|
|
||||||
select, input[type=time], input[type=date] {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
-moz-appearance: none;
|
|
||||||
-ms-appearance: none;
|
|
||||||
appearance: none;
|
|
||||||
border: none;
|
|
||||||
position: absolute;
|
|
||||||
top: 13px;
|
|
||||||
color: #A8A8A8;
|
|
||||||
font-size: 1em;
|
|
||||||
line-height: 1em;
|
|
||||||
background-color: #F7F7F7; }
|
|
||||||
|
|
||||||
input[type=date] {
|
|
||||||
direction: rtl; }
|
|
||||||
|
|
||||||
select {
|
|
||||||
right: 30px;
|
|
||||||
top: 14px; }
|
|
||||||
|
|
||||||
input[type=time] {
|
|
||||||
right: 10px !important; }
|
|
||||||
|
|
||||||
input[type=date] {
|
|
||||||
right: 10px !important; }
|
|
||||||
|
|
||||||
.select-triangle {
|
|
||||||
position: absolute;
|
|
||||||
right: 10px;
|
|
||||||
top: 20px;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-left: 7px solid transparent;
|
|
||||||
border-right: 7px solid transparent;
|
|
||||||
border-top: 7px solid #FF4700; }
|
|
||||||
|
|
||||||
.item-container {
|
|
||||||
color: #333333;
|
|
||||||
margin-top: 15px; }
|
|
||||||
|
|
||||||
.item-container-header {
|
|
||||||
padding: 3px 10px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-family: 'PT Sans', PTSansRegularWebfont, sans-serif;
|
|
||||||
font-size: .8em;
|
|
||||||
font-weight: normal;
|
|
||||||
color: #A8A8A8; }
|
|
||||||
|
|
||||||
.item-container-content {
|
|
||||||
background-color: #F7F7F7;
|
|
||||||
border-top: 1px solid #DEDEDE;
|
|
||||||
border-bottom: 1px solid #DEDEDE; }
|
|
||||||
|
|
||||||
.item-container-footer {
|
|
||||||
padding: 3px 10px;
|
|
||||||
font-size: .7em;
|
|
||||||
line-height: 1.4em;
|
|
||||||
color: #A8A8A8; }
|
|
||||||
|
|
||||||
.item {
|
|
||||||
position: relative;
|
|
||||||
padding: 10px;
|
|
||||||
display: block;
|
|
||||||
overflow: hidden; }
|
|
||||||
|
|
||||||
.item:not(:first-child) {
|
|
||||||
border-top: 1px solid #DEDEDE; }
|
|
||||||
|
|
||||||
.item-subtitle-wrapper {
|
|
||||||
font-size: 1em; }
|
|
||||||
|
|
||||||
.item-subtitle-wrapper .item-styled-toggle-wrapper {
|
|
||||||
top: 16px; }
|
|
||||||
|
|
||||||
.item-subtitle-wrapper .item-styled-checkbox {
|
|
||||||
top: 18px; }
|
|
||||||
|
|
||||||
.item-subtitle-wrapper .item-styled-radio {
|
|
||||||
top: 16px; }
|
|
||||||
|
|
||||||
.item-subtitle-wrapper .item-draggable-handle {
|
|
||||||
top: 18px; }
|
|
||||||
|
|
||||||
.item-subtitle {
|
|
||||||
font-size: .7em;
|
|
||||||
line-height: .7em;
|
|
||||||
padding: .3em 0; }
|
|
||||||
|
|
||||||
.item-styled-toggle-wrapper {
|
|
||||||
position: absolute;
|
|
||||||
right: 10px;
|
|
||||||
top: 8px;
|
|
||||||
width: 56px;
|
|
||||||
height: 30px;
|
|
||||||
border-radius: 5px;
|
|
||||||
transition-timing-function: ease-in-out;
|
|
||||||
transition-duration: 0.3s;
|
|
||||||
transition-property: background-color; }
|
|
||||||
|
|
||||||
.item-styled-toggle {
|
|
||||||
position: relative;
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
border-radius: 5px;
|
|
||||||
top: 1px;
|
|
||||||
transition-timing-function: ease-in-out;
|
|
||||||
transition-duration: 0.3s;
|
|
||||||
transition-property: left; }
|
|
||||||
|
|
||||||
.item-toggle {
|
|
||||||
display: none; }
|
|
||||||
|
|
||||||
.item-toggle + .item-styled-toggle-wrapper {
|
|
||||||
background-color: #A8A8A8; }
|
|
||||||
|
|
||||||
.item-toggle:checked + .item-styled-toggle-wrapper {
|
|
||||||
background-color: #FF4700; }
|
|
||||||
|
|
||||||
.item-toggle + .item-styled-toggle-wrapper .item-styled-toggle {
|
|
||||||
left: 1px; }
|
|
||||||
|
|
||||||
.item-toggle:checked + .item-styled-toggle-wrapper .item-styled-toggle {
|
|
||||||
left: 27px; }
|
|
||||||
|
|
||||||
.item-styled-toggle-bar {
|
|
||||||
width: 3px;
|
|
||||||
height: 15px;
|
|
||||||
margin-left: 3px;
|
|
||||||
background-color: #EAEAEA;
|
|
||||||
float: left;
|
|
||||||
position: relative;
|
|
||||||
left: 4px;
|
|
||||||
top: 7px; }
|
|
||||||
|
|
||||||
.item-styled-checkbox {
|
|
||||||
position: absolute;
|
|
||||||
right: 10px;
|
|
||||||
top: 10px;
|
|
||||||
width: 21px;
|
|
||||||
height: 21px;
|
|
||||||
border-radius: 5px;
|
|
||||||
border-width: 2px;
|
|
||||||
border-style: solid; }
|
|
||||||
|
|
||||||
.item-checkbox {
|
|
||||||
display: none; }
|
|
||||||
|
|
||||||
.item-checkbox + .item-styled-checkbox {
|
|
||||||
border-color: #DEDEDE; }
|
|
||||||
|
|
||||||
.item-checkbox:checked + .item-styled-checkbox {
|
|
||||||
border-color: #FF4700;
|
|
||||||
background-color: #FF4700; }
|
|
||||||
|
|
||||||
.item-checkbox:checked + .item-styled-checkbox:before {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
left: 7px;
|
|
||||||
width: 6px;
|
|
||||||
height: 14px;
|
|
||||||
border-color: #F7F7F7;
|
|
||||||
border-width: 0 2px 2px 0;
|
|
||||||
border-style: solid;
|
|
||||||
-webkit-transform: rotate(45deg);
|
|
||||||
-moz-transform: rotate(45deg);
|
|
||||||
-ms-transform: rotate(45deg);
|
|
||||||
-o-transform: rotate(45deg);
|
|
||||||
transform: rotate(45deg); }
|
|
||||||
|
|
||||||
.item-styled-radio {
|
|
||||||
position: absolute;
|
|
||||||
right: 10px;
|
|
||||||
top: 10px;
|
|
||||||
width: 21px;
|
|
||||||
height: 21px;
|
|
||||||
border-radius: 12px;
|
|
||||||
border-width: 2px;
|
|
||||||
border-style: solid; }
|
|
||||||
|
|
||||||
.item-radio {
|
|
||||||
display: none; }
|
|
||||||
|
|
||||||
.item-radio + .item-styled-radio {
|
|
||||||
border-color: #DEDEDE; }
|
|
||||||
|
|
||||||
.item-radio:checked + .item-styled-radio {
|
|
||||||
border-color: #FF4700;
|
|
||||||
background-color: #FF4700; }
|
|
||||||
|
|
||||||
.item-radio:checked + .item-styled-radio:before {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
top: 1px;
|
|
||||||
left: 6px;
|
|
||||||
width: 6px;
|
|
||||||
height: 14px;
|
|
||||||
border-color: #F7F7F7;
|
|
||||||
border-width: 0 2px 2px 0;
|
|
||||||
border-style: solid;
|
|
||||||
-webkit-transform: rotate(45deg);
|
|
||||||
-moz-transform: rotate(45deg);
|
|
||||||
-ms-transform: rotate(45deg);
|
|
||||||
-o-transform: rotate(45deg);
|
|
||||||
transform: rotate(45deg); }
|
|
||||||
|
|
||||||
.item-color {
|
|
||||||
display: none; }
|
|
||||||
|
|
||||||
.item-styled-color {
|
|
||||||
background: #F7F7F7; }
|
|
||||||
.item-styled-color .value {
|
|
||||||
position: absolute;
|
|
||||||
right: 10px;
|
|
||||||
top: 10px;
|
|
||||||
width: 56px;
|
|
||||||
height: 30px;
|
|
||||||
border-radius: 5px;
|
|
||||||
border-color: #A8A8A8;
|
|
||||||
border-width: 1px;
|
|
||||||
border-style: solid; }
|
|
||||||
.item-styled-color .color-box-wrap {
|
|
||||||
display: none;
|
|
||||||
box-sizing: border-box;
|
|
||||||
position: relative;
|
|
||||||
height: 0;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0 0 100% 0;
|
|
||||||
margin: 0.6em 0 0em; }
|
|
||||||
.item-styled-color .color-box-wrap.show {
|
|
||||||
display: block; }
|
|
||||||
.item-styled-color .color-box-wrap .color-box-container {
|
|
||||||
position: absolute;
|
|
||||||
height: 99.97%;
|
|
||||||
width: 100%;
|
|
||||||
left: 0;
|
|
||||||
top: 0; }
|
|
||||||
.item-styled-color .color-box-wrap .color-box-container .color-box {
|
|
||||||
float: left;
|
|
||||||
cursor: pointer; }
|
|
||||||
.item-styled-color .color-box-wrap .color-box-container .color-box.rounded-tl {
|
|
||||||
border-top-left-radius: 5px; }
|
|
||||||
.item-styled-color .color-box-wrap .color-box-container .color-box.rounded-tr {
|
|
||||||
border-top-right-radius: 5px; }
|
|
||||||
.item-styled-color .color-box-wrap .color-box-container .color-box.rounded-bl {
|
|
||||||
border-bottom-left-radius: 5px; }
|
|
||||||
.item-styled-color .color-box-wrap .color-box-container .color-box.rounded-br {
|
|
||||||
border-bottom-right-radius: 5px; }
|
|
||||||
|
|
||||||
.item-date, .item-time {
|
|
||||||
position: absolute;
|
|
||||||
color: #F7F7F7 !important; }
|
|
||||||
|
|
||||||
.item-styled-date, .item-styled-time {
|
|
||||||
position: absolute;
|
|
||||||
top: 13px;
|
|
||||||
right: 10px;
|
|
||||||
color: #A8A8A8;
|
|
||||||
font-size: 1em;
|
|
||||||
line-height: 1em;
|
|
||||||
background-color: #F7F7F7; }
|
|
||||||
|
|
||||||
.item-input-wrapper {
|
|
||||||
border-radius: 5px;
|
|
||||||
border: 2px solid #DEDEDE; }
|
|
||||||
|
|
||||||
.item-input-wrapper-button {
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 77%; }
|
|
||||||
|
|
||||||
.item-input {
|
|
||||||
border: 0;
|
|
||||||
background-color: transparent;
|
|
||||||
padding: 0 10px 7px 10px;
|
|
||||||
font-size: 13px;
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box; }
|
|
||||||
|
|
||||||
.button-container {
|
|
||||||
text-align: center; }
|
|
||||||
|
|
||||||
.item-button {
|
|
||||||
width: 60%;
|
|
||||||
height: 35px;
|
|
||||||
background-color: #FF4700;
|
|
||||||
border-radius: 5px;
|
|
||||||
color: white;
|
|
||||||
font-size: 0.8em;
|
|
||||||
border: none;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
-moz-appearance: none;
|
|
||||||
-ms-appearance: none;
|
|
||||||
appearance: none; }
|
|
||||||
|
|
||||||
.item-input-button {
|
|
||||||
position: absolute;
|
|
||||||
right: 10px;
|
|
||||||
top: 9px;
|
|
||||||
width: 20%; }
|
|
||||||
|
|
||||||
.tab-buttons {
|
|
||||||
display: table;
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
table-layout: fixed; }
|
|
||||||
|
|
||||||
.tab-button {
|
|
||||||
display: table-cell;
|
|
||||||
position: relative;
|
|
||||||
color: #FF4700;
|
|
||||||
border: 1px solid #FF4700;
|
|
||||||
border-right-width: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
padding: 5px 0;
|
|
||||||
text-align: center;
|
|
||||||
right: -1px; }
|
|
||||||
|
|
||||||
.tab-button:first-child {
|
|
||||||
border-top-left-radius: 5px;
|
|
||||||
border-bottom-left-radius: 5px;
|
|
||||||
border-right-width: 0; }
|
|
||||||
|
|
||||||
.tab-button:last-child {
|
|
||||||
border-top-right-radius: 5px;
|
|
||||||
border-bottom-right-radius: 5px;
|
|
||||||
border-right-width: 1px; }
|
|
||||||
|
|
||||||
.tab-button.active {
|
|
||||||
background-color: #FF4700;
|
|
||||||
color: #F7F7F7; }
|
|
||||||
|
|
||||||
.item-slider {
|
|
||||||
position: relative;
|
|
||||||
top: 8px;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
-moz-appearance: none;
|
|
||||||
-ms-appearance: none;
|
|
||||||
appearance: none;
|
|
||||||
height: 30px;
|
|
||||||
width: 79%;
|
|
||||||
overflow: hidden;
|
|
||||||
background-color: transparent;
|
|
||||||
margin-top: -10px; }
|
|
||||||
|
|
||||||
.item-slider::-webkit-slider-thumb:before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: 11px;
|
|
||||||
left: -1001px;
|
|
||||||
height: 2px;
|
|
||||||
width: 1000px;
|
|
||||||
background: #FF4700; }
|
|
||||||
|
|
||||||
.item-slider::-webkit-slider-thumb {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
-moz-appearance: none;
|
|
||||||
-ms-appearance: none;
|
|
||||||
appearance: none;
|
|
||||||
position: relative;
|
|
||||||
top: -13px;
|
|
||||||
height: 28px;
|
|
||||||
width: 28px;
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
border-radius: 5px;
|
|
||||||
border: 2px solid #EAEAEA; }
|
|
||||||
|
|
||||||
.item-slider::-webkit-slider-runnable-track {
|
|
||||||
height: 2px;
|
|
||||||
background-color: #DEDEDE; }
|
|
||||||
|
|
||||||
.item-slider::-webkit-slider-thumb:after {
|
|
||||||
content: "lll";
|
|
||||||
position: absolute;
|
|
||||||
left: 4px;
|
|
||||||
top: 3px;
|
|
||||||
height: 12px;
|
|
||||||
width: 10px;
|
|
||||||
font-weight: normal;
|
|
||||||
text-align: center;
|
|
||||||
color: #DEDEDE;
|
|
||||||
font-size: 16px;
|
|
||||||
letter-spacing: 1px; }
|
|
||||||
|
|
||||||
.item-slider-text {
|
|
||||||
position: absolute;
|
|
||||||
top: 6px;
|
|
||||||
right: 10px;
|
|
||||||
width: 16%; }
|
|
||||||
|
|
||||||
.item-slider-text .item-input {
|
|
||||||
text-align: center; }
|
|
||||||
|
|
||||||
.delete-item {
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
right: 5px;
|
|
||||||
top: 5px;
|
|
||||||
position: absolute;
|
|
||||||
border-radius: 6px; }
|
|
||||||
|
|
||||||
.delete-item:before, .delete-item:after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: 24px;
|
|
||||||
height: 2px;
|
|
||||||
background-color: #A8A8A8;
|
|
||||||
border-radius: 2px;
|
|
||||||
top: 16px; }
|
|
||||||
|
|
||||||
.delete-item:before {
|
|
||||||
-webkit-transform: rotate(45deg);
|
|
||||||
-moz-transform: rotate(45deg);
|
|
||||||
-ms-transform: rotate(45deg);
|
|
||||||
-o-transform: rotate(45deg);
|
|
||||||
transform: rotate(45deg);
|
|
||||||
left: 3px; }
|
|
||||||
|
|
||||||
.delete-item:after {
|
|
||||||
-webkit-transform: rotate(-45deg);
|
|
||||||
-moz-transform: rotate(-45deg);
|
|
||||||
-ms-transform: rotate(-45deg);
|
|
||||||
-o-transform: rotate(-45deg);
|
|
||||||
transform: rotate(-45deg);
|
|
||||||
right: 3px; }
|
|
||||||
|
|
||||||
.add-item {
|
|
||||||
color: #FF4700; }
|
|
||||||
|
|
||||||
.item-draggable-handle {
|
|
||||||
position: absolute;
|
|
||||||
right: 5px;
|
|
||||||
top: 10px;
|
|
||||||
height: 28px;
|
|
||||||
width: 28px; }
|
|
||||||
|
|
||||||
.item-draggable-handle-bar {
|
|
||||||
margin-top: 5px;
|
|
||||||
height: 2px;
|
|
||||||
width: 20px;
|
|
||||||
background-color: #A8A8A8;
|
|
||||||
text-align: center; }
|
|
||||||
|
|
||||||
[draggable=true] {
|
|
||||||
background-color: #F7F7F7;
|
|
||||||
border: 2px solid #EAEAEA;
|
|
||||||
border-radius: 2px; }
|
|
||||||
|
|
@ -1,119 +0,0 @@
|
||||||
.preview {
|
|
||||||
width: 144px;
|
|
||||||
height: 168px;
|
|
||||||
position: relative;
|
|
||||||
margin: 10px auto;
|
|
||||||
box-shadow: 0px 3px 7px rgba(0,0,0,0.4);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.round-preview {
|
|
||||||
width: 178px;
|
|
||||||
height: 178px;
|
|
||||||
border-radius: 90px;
|
|
||||||
}
|
|
||||||
.round-preview .preview-scaler {
|
|
||||||
position: relative;
|
|
||||||
top: 6px;
|
|
||||||
left: 17px;
|
|
||||||
}
|
|
||||||
.preview-r {
|
|
||||||
top: -1px;
|
|
||||||
left: -1px;
|
|
||||||
}
|
|
||||||
.round-preview .preview-b-round {
|
|
||||||
width: 180px;
|
|
||||||
height: 180px;
|
|
||||||
}
|
|
||||||
.preview img {
|
|
||||||
image-rendering: crisp-edges;
|
|
||||||
}
|
|
||||||
.preview-scaler.scaled {
|
|
||||||
zoom: 1.2;
|
|
||||||
position: absolute;
|
|
||||||
top: -15px;
|
|
||||||
left: -12px;
|
|
||||||
}
|
|
||||||
.preview-n, .preview-o, .preview-o2, .preview-b, .preview-r, .preview-zero, .preview-zero2, .preview-eurodate, .preview-eurodate2, .preview-centeralign, .preview-centeralign-digit2 {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
.preview-zero {
|
|
||||||
width: 75px;
|
|
||||||
height: 75px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.preview-zero2 {
|
|
||||||
width: 30px;
|
|
||||||
height: 31px;
|
|
||||||
top: 132px;
|
|
||||||
left: 10px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.preview-zero2.smallzero .preview-o2 {
|
|
||||||
top: -132px;
|
|
||||||
left: -10px;
|
|
||||||
}
|
|
||||||
.showzero {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.showzero.activeshowzero {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.preview-zero2.eurodate.activeeurodate {
|
|
||||||
left: 70px;
|
|
||||||
}
|
|
||||||
.preview-eurodate, .preview-eurodate2 {
|
|
||||||
width: 55px;
|
|
||||||
height: 27px;
|
|
||||||
overflow: hidden;
|
|
||||||
top: 130px;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.preview-eurodate img, .preview-eurodate2 img {
|
|
||||||
top: -130px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-eurodate img {
|
|
||||||
left: -15px;
|
|
||||||
}
|
|
||||||
.preview-eurodate2 img {
|
|
||||||
left: -75px;
|
|
||||||
}
|
|
||||||
.preview-eurodate {
|
|
||||||
left: 75px;
|
|
||||||
}
|
|
||||||
.preview-eurodate2 {
|
|
||||||
left: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-eurodate .preview-o2 {
|
|
||||||
left: -15px;
|
|
||||||
top: -130px;
|
|
||||||
}
|
|
||||||
.preview-eurodate .preview-b.showzero {
|
|
||||||
left: -120px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-eurodate.activeeurodate, .preview-eurodate2.activeeurodate {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-centeralign {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.preview-centeralign.activecenteralign {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-centeralign .preview-n {
|
|
||||||
left: -45px;
|
|
||||||
}
|
|
||||||
.preview-centeralign-digit2 {
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
left: 30px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hide {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
.preview{width:144px;height:168px;position:relative;margin:10px auto;box-shadow:0px 3px 7px rgba(0,0,0,0.4)}.preview-n,.preview-o,.preview-o2,.preview-b,.preview-zero,.preview-zero2,.preview-eurodate,.preview-eurodate2,.preview-centeralign,.preview-centeralign-digit2{position:absolute}.preview-zero{width:75px;height:75px;overflow:hidden}.preview-zero2{width:30px;height:30px;top:132px;left:10px;overflow:hidden}.preview-zero2.smallzero .preview-o2{top:-132px;left:-10px}.showzero{display:none}.showzero.activeshowzero{display:block}.preview-zero2.eurodate.activeeurodate{left:70px}.preview-eurodate,.preview-eurodate2{width:55px;height:25px;overflow:hidden;top:130px;display:none}.preview-eurodate img,.preview-eurodate2 img{top:-130px}.preview-eurodate img{left:-15px}.preview-eurodate2 img{left:-75px}.preview-eurodate{left:75px}.preview-eurodate2{left:15px}.preview-eurodate .preview-o2{left:-15px;top:-130px}.preview-eurodate .preview-b.showzero{left:-120px}.preview-eurodate.activeeurodate,.preview-eurodate2.activeeurodate{display:block}.preview-centeralign{display:none}.preview-centeralign.activecenteralign{display:block}.preview-centeralign .preview-n{left:-45px}.preview-centeralign-digit2{width:30px;height:30px;left:30px;overflow:hidden}
|
|
||||||
|
Before Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 9.1 KiB |
|
Before Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 4.5 KiB |
|
Before Width: | Height: | Size: 5.6 KiB |
|
Before Width: | Height: | Size: 4.9 KiB |
|
Before Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 7.0 KiB |
|
Before Width: | Height: | Size: 8.4 KiB |
|
Before Width: | Height: | Size: 6.6 KiB |
|
Before Width: | Height: | Size: 5.9 KiB |
|
Before Width: | Height: | Size: 3.7 KiB |
|
Before Width: | Height: | Size: 4.1 KiB |
|
Before Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 4.5 KiB |
|
Before Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 143 B |
|
Before Width: | Height: | Size: 143 B |
|
Before Width: | Height: | Size: 143 B |
|
Before Width: | Height: | Size: 143 B |
|
Before Width: | Height: | Size: 143 B |
|
Before Width: | Height: | Size: 234 B |
|
Before Width: | Height: | Size: 236 B |
|
Before Width: | Height: | Size: 234 B |
|
Before Width: | Height: | Size: 143 B |
|
Before Width: | Height: | Size: 143 B |
|
Before Width: | Height: | Size: 143 B |
|
Before Width: | Height: | Size: 143 B |
|
Before Width: | Height: | Size: 234 B |
|
Before Width: | Height: | Size: 143 B |
|
Before Width: | Height: | Size: 234 B |
|
Before Width: | Height: | Size: 143 B |
|
Before Width: | Height: | Size: 143 B |
|
Before Width: | Height: | Size: 143 B |
|
Before Width: | Height: | Size: 143 B |
|
Before Width: | Height: | Size: 143 B |
|
Before Width: | Height: | Size: 83 B |
|
Before Width: | Height: | Size: 97 B |
|
Before Width: | Height: | Size: 97 B |
|
Before Width: | Height: | Size: 98 B |
|
Before Width: | Height: | Size: 97 B |
|
Before Width: | Height: | Size: 97 B |
|
Before Width: | Height: | Size: 97 B |
|
Before Width: | Height: | Size: 97 B |
|
Before Width: | Height: | Size: 97 B |
|
Before Width: | Height: | Size: 97 B |
|
Before Width: | Height: | Size: 97 B |
|
Before Width: | Height: | Size: 97 B |
|
Before Width: | Height: | Size: 98 B |
|
Before Width: | Height: | Size: 91 B |
|
Before Width: | Height: | Size: 97 B |
|
Before Width: | Height: | Size: 185 B |
|
Before Width: | Height: | Size: 185 B |
|
Before Width: | Height: | Size: 184 B |
|
Before Width: | Height: | Size: 182 B |
|
Before Width: | Height: | Size: 185 B |
|
Before Width: | Height: | Size: 370 B |
|
Before Width: | Height: | Size: 370 B |
|
Before Width: | Height: | Size: 370 B |
|
Before Width: | Height: | Size: 184 B |
|
Before Width: | Height: | Size: 184 B |
|
Before Width: | Height: | Size: 182 B |
|
Before Width: | Height: | Size: 184 B |
|
Before Width: | Height: | Size: 364 B |
|
Before Width: | Height: | Size: 184 B |
|
Before Width: | Height: | Size: 371 B |
|
Before Width: | Height: | Size: 185 B |
|
Before Width: | Height: | Size: 185 B |
|
Before Width: | Height: | Size: 185 B |
|
Before Width: | Height: | Size: 185 B |
|
Before Width: | Height: | Size: 184 B |
|
Before Width: | Height: | Size: 164 B |
|
Before Width: | Height: | Size: 220 B |
|
Before Width: | Height: | Size: 164 B |
|
Before Width: | Height: | Size: 164 B |