Some CSS bundling with webpack.
This commit is contained in:
parent
4b64d4a793
commit
f01d10b81d
23 changed files with 1893 additions and 81 deletions
|
|
@ -14,7 +14,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
*/
|
*/
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Uhrenfont';
|
font-family: 'Uhrenfont';
|
||||||
src: url('../resources/uhr.woff') format('woff');
|
src: url('../resources/assets/fonts/uhr.woff') format('woff');
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
|
@ -206,7 +206,7 @@ body {
|
||||||
|
|
||||||
a.uhr-configlink {
|
a.uhr-configlink {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background: url("../resources/settings.png") no-repeat;
|
background: url("../resources/assets/images/settings.png") no-repeat;
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
@ -236,7 +236,7 @@ a.uhr-closecontrolpanel {
|
||||||
top: -1em;
|
top: -1em;
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
background: url("../resources/close.png") no-repeat;
|
background: url("../resources/assets/images/close.png") no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
#disclaimer {
|
#disclaimer {
|
||||||
|
|
|
||||||
254
css/uhr.scss
Normal file
254
css/uhr.scss
Normal file
|
|
@ -0,0 +1,254 @@
|
||||||
|
/*!
|
||||||
|
* Copyright (C) Schweizerische Bundesbahnen SBB, 2019.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*
|
||||||
|
This program is free software: you can redistribute it and/or modify
|
||||||
|
it under the terms of the GNU General Public License as published by
|
||||||
|
the Free Software Foundation, either version 3 of the License, or
|
||||||
|
(at your option) any later version.
|
||||||
|
|
||||||
|
This program is distributed in the hope that it will be useful,
|
||||||
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
GNU General Public License for more details.
|
||||||
|
|
||||||
|
You should have received a copy of the GNU General Public License
|
||||||
|
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Uhrenfont';
|
||||||
|
src: url('../resources/assets/fonts/uhr.woff') format('woff');
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Uhrenfont', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uhr {
|
||||||
|
position: relative;
|
||||||
|
margin: 0;
|
||||||
|
transition: background-color 0.5s;
|
||||||
|
|
||||||
|
.reflection {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: radial-gradient(225em 45em at 160% 0, rgba(255, 255, 255, 0.4) 0, rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0) 40%) no-repeat scroll;
|
||||||
|
display: block;
|
||||||
|
margin: 0.15em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#themeswitcher {
|
||||||
|
}
|
||||||
|
|
||||||
|
.uhr .letterarea {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 12%;
|
||||||
|
bottom: 12%;
|
||||||
|
left: 12%;
|
||||||
|
right: 12%;
|
||||||
|
overflow: hidden;
|
||||||
|
font-size: 200%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
transition: box-shadow 0.5s, text-shadow 0.5s, border-color 0.5s, color 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot {
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
border: 0.2em solid;
|
||||||
|
border-radius: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot.active {
|
||||||
|
border-color: #eee;
|
||||||
|
box-shadow: 0 0 0.2em #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot1 {
|
||||||
|
top: 3.75%;
|
||||||
|
left: 3.75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot2 {
|
||||||
|
top: 3.75%;
|
||||||
|
right: 3.75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot3 {
|
||||||
|
bottom: 3.75%;
|
||||||
|
right: 3.75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot4 {
|
||||||
|
bottom: 3.75%;
|
||||||
|
left: 3.75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.letter {
|
||||||
|
height: 10%;
|
||||||
|
width: 9.0909%;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
display: inline-block;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 160%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.letter.active {
|
||||||
|
color: #eee;
|
||||||
|
text-shadow: 0 0 0.2em #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.onoffswitch {
|
||||||
|
position: relative;
|
||||||
|
width: 86px;
|
||||||
|
margin: 1em;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.onoffswitch-checkbox {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.onoffswitch-label {
|
||||||
|
display: block;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 2px solid #999;
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.onoffswitch-inner, .modeswitch-inner {
|
||||||
|
width: 200%;
|
||||||
|
margin-left: -100%;
|
||||||
|
-moz-transition: margin 0.3s ease-in 0s;
|
||||||
|
-webkit-transition: margin 0.3s ease-in 0s;
|
||||||
|
-o-transition: margin 0.3s ease-in 0s;
|
||||||
|
transition: margin 0.3s ease-in 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.onoffswitch-inner:before, .onoffswitch-inner:after, .modeswitch-inner:before, .modeswitch-inner:after {
|
||||||
|
float: left;
|
||||||
|
width: 50%;
|
||||||
|
height: 24px;
|
||||||
|
padding: 0;
|
||||||
|
line-height: 24px;
|
||||||
|
font-size: 18px;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.onoffswitch-inner:before {
|
||||||
|
content: "EIN";
|
||||||
|
padding-left: 12px;
|
||||||
|
color: #eee;
|
||||||
|
transition: background-color 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.onoffswitch-inner:after {
|
||||||
|
content: "AUS";
|
||||||
|
padding-right: 12px;
|
||||||
|
background-color: #eee;
|
||||||
|
color: #999;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.onoffswitch-switch {
|
||||||
|
width: 30px;
|
||||||
|
margin: -3px;
|
||||||
|
background: #fff;
|
||||||
|
border: 2px solid #999;
|
||||||
|
border-radius: 50px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 58px;
|
||||||
|
-moz-transition: all 0.3s ease-in 0s;
|
||||||
|
-webkit-transition: all 0.3s ease-in 0s;
|
||||||
|
-o-transition: all 0.3s ease-in 0s;
|
||||||
|
transition: all 0.3s ease-in 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner,
|
||||||
|
.onoffswitch-checkbox:checked + .onoffswitch-label .modeswitch-inner {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modeswitch-inner:before {
|
||||||
|
content: "MIN";
|
||||||
|
padding-left: 12px;
|
||||||
|
background-color: #fff;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modeswitch-inner:after {
|
||||||
|
content: "SEC";
|
||||||
|
padding-right: 12px;
|
||||||
|
background-color: #fff;
|
||||||
|
color: #000;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.uhr-configlink {
|
||||||
|
cursor: pointer;
|
||||||
|
background: url("../resources/assets/images/settings.png") no-repeat;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 2px;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uhr-controlpanel {
|
||||||
|
border-radius: 0.5em;
|
||||||
|
box-shadow: 0 0 1em black;
|
||||||
|
background-color: #fff;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.5em;
|
||||||
|
position: sticky;
|
||||||
|
bottom: 0;
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uhr-controlpanel .content {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.uhr-closecontrolpanel {
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: -1em;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
background: url("../resources/assets/images/close.png") no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
#disclaimer {
|
||||||
|
font-size: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#disclaimer a {
|
||||||
|
color: #444;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
0
resources/close.png → dist/assets/close.png
vendored
0
resources/close.png → dist/assets/close.png
vendored
|
Before Width: | Height: | Size: 407 B After Width: | Height: | Size: 407 B |
|
Before Width: | Height: | Size: 435 B After Width: | Height: | Size: 435 B |
1
dist/assets/uhr-black.css
vendored
Normal file
1
dist/assets/uhr-black.css
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
.uhr.black{background-color:#111}.black .onoffswitch-inner:before{background-color:#111}.uhr.black .dot:not(.active){border-color:rgba(255,255,255,0.1);box-shadow:0 0 0.1em rgba(255,255,255,0.1)}.uhr.black .letter:not(.active){color:rgba(255,255,255,0.1);text-shadow:0 0 0.1em rgba(255,255,255,0.1)}
|
||||||
1
dist/assets/uhr-blue.css
vendored
Normal file
1
dist/assets/uhr-blue.css
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
.uhr.blue{background-color:#00a}.blue .onoffswitch-inner:before{background-color:#00a}.uhr.blue .dot:not(.active){border-color:rgba(255,255,255,0.1);box-shadow:0 0 0.1em rgba(255,255,255,0.1)}.uhr.blue .letter:not(.active){color:rgba(255,255,255,0.1);text-shadow:0 0 0.1em rgba(255,255,255,0.1)}
|
||||||
1
dist/assets/uhr-green.css
vendored
Normal file
1
dist/assets/uhr-green.css
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
.uhr.green{background-color:#0c0}.green .onoffswitch-inner:before{background-color:#0c0}.uhr.green .dot:not(.active){border-color:rgba(0,0,0,0.1);box-shadow:0 0 0.1em rgba(0,0,0,0.1)}.uhr.green .letter:not(.active){color:rgba(0,0,0,0.1);text-shadow:0 0 0.1em rgba(0,0,0,0.1)}
|
||||||
1
dist/assets/uhr-pink.css
vendored
Normal file
1
dist/assets/uhr-pink.css
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
.uhr.pink{background-color:#f0a}.uhr.pink .dot.active{border-color:#fff;box-shadow:0 0 0.1em #fff}.uhr.pink .letter.active{color:#fff;text-shadow:0 0 0.1em #fff}.pink .onoffswitch-inner:before{background-color:#f0a}.uhr.pink .dot:not(.active){border-color:rgba(255,255,255,0.1);box-shadow:0 0 0.1em rgba(255,255,255,0.1)}.uhr.pink .letter:not(.active){color:rgba(255,255,255,0.1);text-shadow:0 0 0.1em rgba(255,255,255,0.1)}
|
||||||
1
dist/assets/uhr-red.css
vendored
Normal file
1
dist/assets/uhr-red.css
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
.uhr.red{background-color:#700}.red .onoffswitch-inner:before{background-color:#700}.uhr.red .dot:not(.active){border-color:rgba(255,255,255,0.1);box-shadow:0 0 0.1em rgba(255,255,255,0.1)}.uhr.red .letter:not(.active){color:rgba(255,255,255,0.1);text-shadow:0 0 0.1em rgba(255,255,255,0.1)}
|
||||||
1
dist/assets/uhr-white.css
vendored
Normal file
1
dist/assets/uhr-white.css
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
.uhr.white{background-color:#ccc}.uhr.white .dot.active{border-color:#fff;box-shadow:0 0 0.1em #fff}.uhr.white .letter.active{color:#fff;text-shadow:0 0 0.1em #fff}.white .onoffswitch-inner:before{background-color:#ccc}.uhr.white .dot:not(.active){border-color:rgba(0,0,0,0.1);box-shadow:0 0 0.1em rgba(0,0,0,0.1)}.uhr.white .letter:not(.active){color:rgba(0,0,0,0.1);text-shadow:0 0 0.1em rgba(0,0,0,0.1)}
|
||||||
1
dist/assets/uhr-yellow.css
vendored
Normal file
1
dist/assets/uhr-yellow.css
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
.uhr.yellow{background-color:#fd0}.uhr.yellow .dot.active{border-color:#fff;box-shadow:0 0 0.1em #fff}.uhr.yellow .letter.active{color:#fff;text-shadow:0 0 0.1em #fff}.yellow .onoffswitch-inner:before{background-color:#fd0}.uhr.yellow .dot:not(.active){border-color:rgba(0,0,0,0.05);box-shadow:0 0 0.1em rgba(0,0,0,0.05)}.uhr.yellow .letter:not(.active){color:rgba(0,0,0,0.05);text-shadow:0 0 0.1em rgba(0,0,0,0.05)}
|
||||||
3
dist/assets/uhr.css
vendored
Normal file
3
dist/assets/uhr.css
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
/*!
|
||||||
|
* Copyright (C) Schweizerische Bundesbahnen SBB, 2019.
|
||||||
|
*/@font-face{font-family:'Uhrenfont';src:url(../assets/uhr.woff) format("woff")}body{font-family:'Uhrenfont', sans-serif}.uhr{position:relative;margin:0;transition:background-color 0.5s}.uhr .reflection{position:absolute;top:0;bottom:0;left:0;right:0;background:radial-gradient(225em 45em at 160% 0, rgba(255,255,255,0.4) 0, rgba(255,255,255,0.05) 40%, rgba(255,255,255,0) 40%) no-repeat scroll;display:block;margin:0.15em}.uhr .letterarea{display:block;position:absolute;top:12%;bottom:12%;left:12%;right:12%;overflow:hidden;font-size:200%}.item{transition:box-shadow 0.5s, text-shadow 0.5s, border-color 0.5s, color 0.5s}.dot{position:absolute;display:block;height:0;width:0;border:0.2em solid;border-radius:1em}.dot.active{border-color:#eee;box-shadow:0 0 0.2em #eee}.dot1{top:3.75%;left:3.75%}.dot2{top:3.75%;right:3.75%}.dot3{bottom:3.75%;right:3.75%}.dot4{bottom:3.75%;left:3.75%}.letter{height:10%;width:9.0909%;padding:0;margin:0;display:inline-block;text-align:center;line-height:160%}.letter.active{color:#eee;text-shadow:0 0 0.2em #eee}.onoffswitch{position:relative;width:86px;margin:1em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.onoffswitch-checkbox{display:none}.onoffswitch-label{display:block;overflow:hidden;cursor:pointer;border:2px solid #999;border-radius:50px}.onoffswitch-inner,.modeswitch-inner{width:200%;margin-left:-100%;-moz-transition:margin 0.3s ease-in 0s;-webkit-transition:margin 0.3s ease-in 0s;-o-transition:margin 0.3s ease-in 0s;transition:margin 0.3s ease-in 0s}.onoffswitch-inner:before,.onoffswitch-inner:after,.modeswitch-inner:before,.modeswitch-inner:after{float:left;width:50%;height:24px;padding:0;line-height:24px;font-size:18px;color:white;font-weight:bold;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.onoffswitch-inner:before{content:"EIN";padding-left:12px;color:#eee;transition:background-color 0.5s}.onoffswitch-inner:after{content:"AUS";padding-right:12px;background-color:#eee;color:#999;text-align:right}.onoffswitch-switch{width:30px;margin:-3px;background:#fff;border:2px solid #999;border-radius:50px;position:absolute;top:0;bottom:0;right:58px;-moz-transition:all 0.3s ease-in 0s;-webkit-transition:all 0.3s ease-in 0s;-o-transition:all 0.3s ease-in 0s;transition:all 0.3s ease-in 0s}.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner,.onoffswitch-checkbox:checked+.onoffswitch-label .modeswitch-inner{margin-left:0}.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch{right:0}.modeswitch-inner:before{content:"MIN";padding-left:12px;background-color:#fff;color:#000}.modeswitch-inner:after{content:"SEC";padding-right:12px;background-color:#fff;color:#000;text-align:right}a.uhr-configlink{cursor:pointer;background:url(../assets/settings.png) no-repeat;width:24px;height:24px;display:inline-block;margin:2px;vertical-align:top}.uhr-controlpanel{border-radius:0.5em;box-shadow:0 0 1em black;background-color:#fff;display:inline-block;padding:0.5em;position:sticky;bottom:0;margin-left:1em}.uhr-controlpanel .content{position:relative}a.uhr-closecontrolpanel{cursor:pointer;display:inline-block;position:absolute;right:0;top:-1em;width:24px;height:24px;background:url(../assets/close.png) no-repeat}#disclaimer{font-size:0.5em}#disclaimer a{color:#444;text-decoration:underline}
|
||||||
0
resources/uhr.woff → dist/assets/uhr.woff
vendored
0
resources/uhr.woff → dist/assets/uhr.woff
vendored
2
dist/uhr.js
vendored
2
dist/uhr.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -21,8 +21,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
|
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
|
||||||
<meta name="apple-mobile-web-app-title" content="Bärneruhr"/>
|
<meta name="apple-mobile-web-app-title" content="Bärneruhr"/>
|
||||||
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1"/>
|
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1"/>
|
||||||
<link rel="stylesheet" type="text/css" href="css/uhr.css"/>
|
<link rel="stylesheet" type="text/css" href="dist/assets/uhr.css"/>
|
||||||
<link rel="stylesheet" type="text/css" href="css/uhr-black.css" data-class="black" data-name="Schwarz"/>
|
<link rel="stylesheet" type="text/css" href="dist/assets/uhr-black.css" data-class="black" data-name="Schwarz"/>
|
||||||
<link rel="stylesheet" type="text/css" href="css/uhr-white.css" data-class="white" data-name="Weiss"/>
|
<link rel="stylesheet" type="text/css" href="css/uhr-white.css" data-class="white" data-name="Weiss"/>
|
||||||
<link rel="stylesheet" type="text/css" href="css/uhr-red.css" data-class="red" data-name="Rot"/>
|
<link rel="stylesheet" type="text/css" href="css/uhr-red.css" data-class="red" data-name="Rot"/>
|
||||||
<link rel="stylesheet" type="text/css" href="css/uhr-yellow.css" data-class="yellow" data-name="Gelb"/>
|
<link rel="stylesheet" type="text/css" href="css/uhr-yellow.css" data-class="yellow" data-name="Gelb"/>
|
||||||
|
|
|
||||||
1352
package-lock.json
generated
1352
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -37,10 +37,18 @@
|
||||||
"@types/js-cookie": "2.2.2",
|
"@types/js-cookie": "2.2.2",
|
||||||
"@typescript-eslint/parser": "1.7.0",
|
"@typescript-eslint/parser": "1.7.0",
|
||||||
"chai": "4.2.0",
|
"chai": "4.2.0",
|
||||||
|
"clean-webpack-plugin": "2.0.2",
|
||||||
|
"css-loader": "2.1.1",
|
||||||
"eslint": "5.16.0",
|
"eslint": "5.16.0",
|
||||||
"eslint-loader": "2.1.2",
|
"eslint-loader": "2.1.2",
|
||||||
|
"extract-loader": "3.1.0",
|
||||||
|
"file-loader": "3.0.1",
|
||||||
|
"mini-css-extract-plugin": "0.6.0",
|
||||||
"mocha": "6.1.4",
|
"mocha": "6.1.4",
|
||||||
|
"node-sass": "4.12.0",
|
||||||
"phantomjs-prebuilt": "2.1.16",
|
"phantomjs-prebuilt": "2.1.16",
|
||||||
|
"sass-loader": "7.1.0",
|
||||||
|
"style-loader": "0.23.1",
|
||||||
"ts-loader": "5.4.5",
|
"ts-loader": "5.4.5",
|
||||||
"typescript": "3.4.5",
|
"typescript": "3.4.5",
|
||||||
"webpack": "4.30.0",
|
"webpack": "4.30.0",
|
||||||
|
|
|
||||||
BIN
resources/assets/fonts/uhr.woff
Normal file
BIN
resources/assets/fonts/uhr.woff
Normal file
Binary file not shown.
BIN
resources/assets/images/close.png
Normal file
BIN
resources/assets/images/close.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 407 B |
BIN
resources/assets/images/settings.png
Normal file
BIN
resources/assets/images/settings.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 435 B |
254
resources/styles/uhr.scss
Normal file
254
resources/styles/uhr.scss
Normal file
|
|
@ -0,0 +1,254 @@
|
||||||
|
/*!
|
||||||
|
* Copyright (C) Schweizerische Bundesbahnen SBB, 2019.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*
|
||||||
|
This program is free software: you can redistribute it and/or modify
|
||||||
|
it under the terms of the GNU General Public License as published by
|
||||||
|
the Free Software Foundation, either version 3 of the License, or
|
||||||
|
(at your option) any later version.
|
||||||
|
|
||||||
|
This program is distributed in the hope that it will be useful,
|
||||||
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
GNU General Public License for more details.
|
||||||
|
|
||||||
|
You should have received a copy of the GNU General Public License
|
||||||
|
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Uhrenfont';
|
||||||
|
src: url('../assets/fonts/uhr.woff') format('woff');
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Uhrenfont', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uhr {
|
||||||
|
position: relative;
|
||||||
|
margin: 0;
|
||||||
|
transition: background-color 0.5s;
|
||||||
|
|
||||||
|
.reflection {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: radial-gradient(225em 45em at 160% 0, rgba(255, 255, 255, 0.4) 0, rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0) 40%) no-repeat scroll;
|
||||||
|
display: block;
|
||||||
|
margin: 0.15em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#themeswitcher {
|
||||||
|
}
|
||||||
|
|
||||||
|
.uhr .letterarea {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 12%;
|
||||||
|
bottom: 12%;
|
||||||
|
left: 12%;
|
||||||
|
right: 12%;
|
||||||
|
overflow: hidden;
|
||||||
|
font-size: 200%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
transition: box-shadow 0.5s, text-shadow 0.5s, border-color 0.5s, color 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot {
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
border: 0.2em solid;
|
||||||
|
border-radius: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot.active {
|
||||||
|
border-color: #eee;
|
||||||
|
box-shadow: 0 0 0.2em #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot1 {
|
||||||
|
top: 3.75%;
|
||||||
|
left: 3.75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot2 {
|
||||||
|
top: 3.75%;
|
||||||
|
right: 3.75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot3 {
|
||||||
|
bottom: 3.75%;
|
||||||
|
right: 3.75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot4 {
|
||||||
|
bottom: 3.75%;
|
||||||
|
left: 3.75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.letter {
|
||||||
|
height: 10%;
|
||||||
|
width: 9.0909%;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
display: inline-block;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 160%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.letter.active {
|
||||||
|
color: #eee;
|
||||||
|
text-shadow: 0 0 0.2em #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.onoffswitch {
|
||||||
|
position: relative;
|
||||||
|
width: 86px;
|
||||||
|
margin: 1em;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.onoffswitch-checkbox {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.onoffswitch-label {
|
||||||
|
display: block;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 2px solid #999;
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.onoffswitch-inner, .modeswitch-inner {
|
||||||
|
width: 200%;
|
||||||
|
margin-left: -100%;
|
||||||
|
-moz-transition: margin 0.3s ease-in 0s;
|
||||||
|
-webkit-transition: margin 0.3s ease-in 0s;
|
||||||
|
-o-transition: margin 0.3s ease-in 0s;
|
||||||
|
transition: margin 0.3s ease-in 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.onoffswitch-inner:before, .onoffswitch-inner:after, .modeswitch-inner:before, .modeswitch-inner:after {
|
||||||
|
float: left;
|
||||||
|
width: 50%;
|
||||||
|
height: 24px;
|
||||||
|
padding: 0;
|
||||||
|
line-height: 24px;
|
||||||
|
font-size: 18px;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.onoffswitch-inner:before {
|
||||||
|
content: "EIN";
|
||||||
|
padding-left: 12px;
|
||||||
|
color: #eee;
|
||||||
|
transition: background-color 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.onoffswitch-inner:after {
|
||||||
|
content: "AUS";
|
||||||
|
padding-right: 12px;
|
||||||
|
background-color: #eee;
|
||||||
|
color: #999;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.onoffswitch-switch {
|
||||||
|
width: 30px;
|
||||||
|
margin: -3px;
|
||||||
|
background: #fff;
|
||||||
|
border: 2px solid #999;
|
||||||
|
border-radius: 50px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 58px;
|
||||||
|
-moz-transition: all 0.3s ease-in 0s;
|
||||||
|
-webkit-transition: all 0.3s ease-in 0s;
|
||||||
|
-o-transition: all 0.3s ease-in 0s;
|
||||||
|
transition: all 0.3s ease-in 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner,
|
||||||
|
.onoffswitch-checkbox:checked + .onoffswitch-label .modeswitch-inner {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modeswitch-inner:before {
|
||||||
|
content: "MIN";
|
||||||
|
padding-left: 12px;
|
||||||
|
background-color: #fff;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modeswitch-inner:after {
|
||||||
|
content: "SEC";
|
||||||
|
padding-right: 12px;
|
||||||
|
background-color: #fff;
|
||||||
|
color: #000;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.uhr-configlink {
|
||||||
|
cursor: pointer;
|
||||||
|
background: url("../assets/images/settings.png") no-repeat;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 2px;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uhr-controlpanel {
|
||||||
|
border-radius: 0.5em;
|
||||||
|
box-shadow: 0 0 1em black;
|
||||||
|
background-color: #fff;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.5em;
|
||||||
|
position: sticky;
|
||||||
|
bottom: 0;
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uhr-controlpanel .content {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.uhr-closecontrolpanel {
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: -1em;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
background: url("../assets/images/close.png") no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
#disclaimer {
|
||||||
|
font-size: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#disclaimer a {
|
||||||
|
color: #444;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
@ -94,9 +94,10 @@ $.widget('fritteli.uhr', {
|
||||||
$.fritteli.uhr.register = Globals.registerLayout;
|
$.fritteli.uhr.register = Globals.registerLayout;
|
||||||
|
|
||||||
declare namespace $ {
|
declare namespace $ {
|
||||||
const fritteli: Fritteli;
|
const fritteli: Fritteli.Fritteli;
|
||||||
const widget: JQueryUI.Widget;
|
const widget: JQueryUI.Widget;
|
||||||
|
}
|
||||||
|
declare namespace Fritteli {
|
||||||
interface Fritteli {
|
interface Fritteli {
|
||||||
uhr: Uhr;
|
uhr: Uhr;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,19 @@
|
||||||
/*
|
|
||||||
* Copyright (C) Schweizerische Bundesbahnen SBB, 2019.
|
|
||||||
*/
|
|
||||||
|
|
||||||
const path = require('path');
|
const path = require('path');
|
||||||
|
const CleanWebpackPlugin = require('clean-webpack-plugin');
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
entry: [
|
entry: {
|
||||||
'./src/index.ts'
|
uhr: './src/index.ts',
|
||||||
],
|
style_main: require.resolve('./resources/styles/uhr.scss'),
|
||||||
|
style_black: require.resolve('./css/uhr-black.css'),
|
||||||
|
style_blue: require.resolve('./css/uhr-blue.css'),
|
||||||
|
style_green: require.resolve('./css/uhr-green.css'),
|
||||||
|
style_pink: require.resolve('./css/uhr-pink.css'),
|
||||||
|
style_red: require.resolve('./css/uhr-red.css'),
|
||||||
|
style_white: require.resolve('./css/uhr-white.css'),
|
||||||
|
style_yellow: require.resolve('./css/uhr-yellow.css')
|
||||||
|
|
||||||
|
},
|
||||||
// devtool: 'inline-source-map',
|
// devtool: 'inline-source-map',
|
||||||
mode: 'production',
|
mode: 'production',
|
||||||
module: {
|
module: {
|
||||||
|
|
@ -17,18 +23,73 @@ module.exports = {
|
||||||
test: /\.tsx?$/,
|
test: /\.tsx?$/,
|
||||||
exclude: /node_modules/,
|
exclude: /node_modules/,
|
||||||
use: 'eslint-loader'
|
use: 'eslint-loader'
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
|
test: /\.(png|svg|jpg|gif|woff)$/,
|
||||||
|
use: [
|
||||||
|
{
|
||||||
|
loader: 'file-loader',
|
||||||
|
options: {
|
||||||
|
name: 'assets/[name].[ext]'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
//////
|
||||||
|
|
||||||
|
{
|
||||||
|
test: /\.s?css$/,
|
||||||
|
use: [
|
||||||
|
{
|
||||||
|
loader: 'file-loader',
|
||||||
|
options: {
|
||||||
|
name: 'assets/[name].css'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
loader: 'extract-loader',
|
||||||
|
options: {
|
||||||
|
publicPath: '../',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'css-loader',
|
||||||
|
{
|
||||||
|
loader: 'sass-loader',
|
||||||
|
options: {
|
||||||
|
outputStyle: 'compressed'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// test: /\.s?css$/,
|
||||||
|
// use: [
|
||||||
|
// // fallback to style-loader in development
|
||||||
|
// process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
|
||||||
|
// 'css-loader',
|
||||||
|
// 'sass-loader'
|
||||||
|
// ]
|
||||||
|
// },
|
||||||
|
{
|
||||||
test: /\.tsx?$/,
|
test: /\.tsx?$/,
|
||||||
exclude: /node_modules/,
|
exclude: /node_modules/,
|
||||||
use: 'ts-loader'
|
use: 'ts-loader'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
plugins: [
|
||||||
|
new CleanWebpackPlugin({
|
||||||
|
dry: false,
|
||||||
|
cleanAfterEveryBuildPatterns: ['**/deleteme_*.del'],
|
||||||
|
dangerouslyAllowCleanPatternsOutsideProject: false
|
||||||
|
})
|
||||||
|
],
|
||||||
resolve: {
|
resolve: {
|
||||||
extensions: ['.tsx', '.ts', '.js']
|
extensions: ['.tsx', '.ts', '.js']
|
||||||
},
|
},
|
||||||
output: {
|
output: {
|
||||||
filename: 'uhr.js',
|
filename: (chunkData) => chunkData.chunk.name === 'uhr' ? 'uhr.js' : 'deleteme_[name].del',
|
||||||
library: 'uhr',
|
library: 'uhr',
|
||||||
path: path.resolve(__dirname, 'dist')
|
path: path.resolve(__dirname, 'dist')
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue