Skip to content

Instantly share code, notes, and snippets.

@conofor

conofor/digital-clock.markdown

Created March 15, 2023 03:00
Show Gist options
  • Save conofor/21b89730672af1cfd4bd073ce1e6791e to your computer and use it in GitHub Desktop.
Save conofor/21b89730672af1cfd4bd073ce1e6791e to your computer and use it in GitHub Desktop.
Download ZIP
Digital Clock
Raw
digital-clock.markdown

Digital Clock

Wanted to create a old school digital display clock using css. I wanted the transitions between numbers to be fluid, so I didn't want to use a font.

A Pen by Maneesh on CodePen.

License.

Raw
index.html
<div class="screen" id="app">
<div class="time-display">
<div class="hours">
<div class="digit h1">
<div class="segment horizontal a"></div>
<div class="segment vertical b"></div>
<div class="segment vertical c"></div>
<div class="segment horizontal d"></div>
<div class="segment vertical e"></div>
<div class="segment vertical f"></div>
<div class="segment horizontal g"></div>
</div>
<div class="digit h2">
<div class="segment horizontal a"></div>
<div class="segment vertical b"></div>
<div class="segment vertical c"></div>
<div class="segment horizontal d"></div>
<div class="segment vertical e"></div>
<div class="segment vertical f"></div>
<div class="segment horizontal g"></div>
</div>
</div>
<div class="separator">
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="minutes">
<div class="digit m1">
<div class="segment horizontal a"></div>
<div class="segment vertical b"></div>
<div class="segment vertical c"></div>
<div class="segment horizontal d"></div>
<div class="segment vertical e"></div>
<div class="segment vertical f"></div>
<div class="segment horizontal g"></div>
</div>
<div class="digit m2">
<div class="segment horizontal a"></div>
<div class="segment vertical b"></div>
<div class="segment vertical c"></div>
<div class="segment horizontal d"></div>
<div class="segment vertical e"></div>
<div class="segment vertical f"></div>
<div class="segment horizontal g"></div>
</div>
</div>
<div class="separator">
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="seconds">
<div class="digit s1">
<div class="segment horizontal a"></div>
<div class="segment vertical b"></div>
<div class="segment vertical c"></div>
<div class="segment horizontal d"></div>
<div class="segment vertical e"></div>
<div class="segment vertical f"></div>
<div class="segment horizontal g"></div>
</div>
<div class="digit s2">
<div class="segment horizontal a"></div>
<div class="segment vertical b"></div>
<div class="segment vertical c"></div>
<div class="segment horizontal d"></div>
<div class="segment vertical e"></div>
<div class="segment vertical f"></div>
<div class="segment horizontal g"></div>
</div>
</div>
</div>
</div>
Raw
script.js
var currentDate,
currentHours,
currentMinutes,
currentSeconds;
var a = [2,3,5,6,7,8,9,0],
b = [1,2,3,4,7,8,9,0],
c = [1,3,4,5,6,7,8,9,0],
d = [2,3,5,6,8,0],
e = [6,8,2,0],
f = [4,5,6,8,9,0],
g = [2,3,4,5,6,8,9];
var constants = [ [2,3,5,6,7,8,9,0],[1,2,3,4,7,8,9,0],[1,3,4,5,6,7,8,9,0],[2,3,5,6,8,0],[6,8,2,0],[4,5,6,8,9,0],[2,3,4,5,6,8,9] ];
var hours = [],
minutes = [],
seconds = [];
var map = ['a','b','c','d','e','f'];
function updateDate(){
currentDate = new Date();
currentHours = currentDate.getHours();
if (currentHours < 10){
currentHours = '0' + currentHours;
}
currentMinutes = currentDate.getMinutes();
if (currentMinutes < 10){
currentMinutes = '0' + currentMinutes;
}
currentSeconds = currentDate.getSeconds();
if (currentSeconds < 10){
currentSeconds = '0' + currentSeconds;
}
}
function splitDigits(stringVal,array){
var tempString = stringVal.toString();
array.length = 0
for (var i = 0; i < tempString.length; i++) {
array.push(+tempString.charAt(i));
}
}
function checkVal(val,array){
for (var k = 0; k < array.length; k++){
if (val == array[k]){
return true;
}
}
return false;
}
function printDigits(array, elem){
for (var count = 0; count < array.length; count++) {
for (var segmentCount = 0; segmentCount < 7; segmentCount++){
if ( checkVal(array[count], constants[segmentCount] ) == true){
turnOn(elem+(count+1)+' div:nth-of-type('+(segmentCount+1)+')');
} else {
turnOff(elem+(count+1)+' div:nth-of-type('+(segmentCount+1)+')');
}
}
};
}
function turnOn(elem){
$(elem).addClass('on');
}
function turnOff(elem){
$(elem).removeClass('on');
}
$( document ).ready(function() {
setInterval(function(){
$('.dot').toggleClass('on');
},1000);
console.log( checkVal(7,constants[4]) );
setInterval(function(){
updateDate();
splitDigits(currentSeconds,seconds);
printDigits(seconds,'.s');
splitDigits(currentMinutes,minutes);
printDigits(minutes,'.m');
splitDigits(currentHours,hours);
printDigits(hours,'.h');
},1000);
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.less
@body-bg: #000;
@brand-dark: #263238;
@brand-highlight: #311b92;
@brand-primary: @brand-highlight;
@brand-secondary: #03A9F4;
@text-colour-dark: #212121;
@text-colour-medium: #616161;
@text-colour-light: #eeeeee;
@inactive: @text-colour-medium;
@link-colour: @brand-highlight;
@link-hover-colour: #fff;
@success: #00e676;
@error: #ff5252;
@notification: #ffc400;
@input-background: #fff;
@input-colour: @text-colour-dark;
/* Break Points */
@mobile-bp:930px;
@tablet-bp:1260px;
@laptop-bp:1520px;
@max-bp:3840px;
@mobile-mq:929px;
@tablet-mq:1259px;
@ipad-mq:1023px;
@laptop-mq:1519px;
@max-mq:3839px;
@mobile: ~"only screen and (max-width:@{mobile-mq})";
@tablet: ~"only screen and (max-width:@{tablet-mq})";
@ipad: ~"only screen and (max-width:@{ipad-mq})";
@laptop: ~"only screen and (max-width:@{laptop-mq})";
@max: ~"only screen and (max-width:@{max-mq})";
html,body {height: 100%; background-color:@body-bg;}
.screen {width: 100%; height: 100%; display: table;}
.time-display {display: table-cell; vertical-align: middle; text-align: center;}
@off-colour: rgb(7, 18, 5);
@on-colour: rgb(50, 132, 32);
@media @max {
@segment-height: 21px;
@segment-width: 150px;
@segment-space: 21px;
@offset: 1.05;
@digit-height: (((@segment-width)*@offset)*2)+(@segment-space*3);
.digit:not(:last-of-type) {margin-right: (@segment-space*1.5);}
.digit { width: 192px; height: @digit-height; display: block; position: relative; float: left;
.segment {background: @off-colour; border-radius: @segment-width; position: absolute; z-index: 0; transition: all 0.5s ease;}
.on {background: @on-colour;}
.horizontal {width: @segment-width; height: @segment-height;}
.vertical {width: @segment-height; height: ((@segment-width)*@offset);}
.a {top: 0; left: @segment-space;
&:before, &:after {content: ''; position: absolute; bottom: 0; width: 0; height: 0;}
&:before {
left: -(ceil(@segment-space/2));
border-left: ceil(@segment-space/2) solid @body-bg;
border-right: ceil(@segment-space/2) solid transparent;
border-bottom: @segment-space solid @body-bg;
}
&:after {
right: -(ceil(@segment-space/2));
border-right: ceil(@segment-space/2) solid @body-bg;
border-left: ceil(@segment-space/2) solid transparent;
border-bottom: @segment-space solid @body-bg;
}
}
.b {top: @segment-space; right: 0;
&:before, &:after {content: ''; position: absolute; left: 0; width: 0; height: 0;}
&:before {
top:-(ceil(@segment-space/2));
border-bottom: ceil(@segment-space/2) solid transparent;
border-left: @segment-space solid @body-bg;
border-top: ceil(@segment-space/2) solid @body-bg;
}
&:after {
bottom:-(ceil(@segment-space/2));
border-top: ceil(@segment-space/2) solid transparent;
border-left: @segment-space solid @body-bg;
border-bottom: ceil(@segment-space/2) solid @body-bg;
}
}
.c {top: (@segment-space+((@segment-width)*@offset)+@segment-space); right: 0;
&:before, &:after {content: ''; position: absolute; left: 0; width: 0; height: 0;}
&:before {
top:-(ceil(@segment-space/2));
border-bottom: ceil(@segment-space/2) solid transparent;
border-left: @segment-space solid @body-bg;
border-top: ceil(@segment-space/2) solid @body-bg;
}
&:after {
bottom:-(ceil(@segment-space/2));
border-top: ceil(@segment-space/2) solid transparent;
border-left: @segment-space solid @body-bg;
border-bottom: ceil(@segment-space/2) solid @body-bg;
}
}
.d {bottom: 0; left: @segment-space;
&:before, &:after {content: ''; position: absolute; bottom: 0; width: 0; height: 0;}
&:before {
left: -(ceil(@segment-space/2));
border-left: ceil(@segment-space/2) solid @body-bg;
border-right: ceil(@segment-space/2) solid transparent;
border-top: @segment-space solid @body-bg;
}
&:after {
right: -(ceil(@segment-space/2));
border-right: ceil(@segment-space/2) solid @body-bg;
border-left: ceil(@segment-space/2) solid transparent;
border-top: @segment-space solid @body-bg;
}
}
.e {top: (@segment-space+((@segment-width)*@offset)+@segment-space); left: 0;
&:before, &:after {content: ''; position: absolute; left: 0; width: 0; height: 0;}
&:before {
top:-(ceil(@segment-space/2));
border-bottom: ceil(@segment-space/2) solid transparent;
border-right: @segment-space solid @body-bg;
border-top: ceil(@segment-space/2) solid @body-bg;
}
&:after {
bottom:-(ceil(@segment-space/2));
border-top: ceil(@segment-space/2) solid transparent;
border-right: @segment-space solid @body-bg;
border-bottom: ceil(@segment-space/2) solid @body-bg;
}
}
.f {top: @segment-space; left: 0;
&:before, &:after {content: ''; position: absolute; left: 0; width: 0; height: 0;}
&:before {
top:-(ceil(@segment-space/2));
border-bottom: ceil(@segment-space/2) solid transparent;
border-right: @segment-space solid @body-bg;
border-top: ceil(@segment-space/2) solid @body-bg;
}
&:after {
bottom:-(ceil(@segment-space/2));
border-top: ceil(@segment-space/2) solid transparent;
border-right: @segment-space solid @body-bg;
border-bottom: ceil(@segment-space/2) solid @body-bg;
}
}
.g {top:(@segment-space+((@segment-width)*@offset)); left: @segment-space;
&:before, &:after {content: ''; position: absolute; bottom: 0; width: 0; height: 0;}
&:before {
left: 0;
border-right: ceil(@segment-space/2) solid transparent;
border-top: ceil(@segment-space/2) solid @body-bg;
border-bottom: ceil(@segment-space/2) solid @body-bg;
}
&:after {
right: 0;
border-left: ceil(@segment-space/2) solid transparent;
border-top: ceil(@segment-space/2) solid @body-bg;
border-bottom: ceil(@segment-space/2) solid @body-bg;
}
}
}
.hours,.minutes,.seconds {display: inline-block; overflow: auto; text-align: center;}
.separator{ width: @segment-space; height: @digit-height; display: inline-block; position: relative; text-align: center; margin: 0 (@segment-space*2);
.dot {background:@off-colour; width: @segment-space; height: @segment-space; border-radius: @segment-space; transition: all 0.5s ease; position: absolute;}
.dot.on {background: @on-colour;}
.dot:first-of-type {top: 33%;}
.dot:last-of-type {top: 66%;}
}
}
@media @laptop {
@segment-height: 18px;
@segment-width: 120px;
@segment-space: 18px;
@offset: 1.05;
@digit-height: (((@segment-width)*@offset)*2)+(@segment-space*3);
.digit:not(:last-of-type) {margin-right: (@segment-space*1.5);}
.digit { width: 156px; height: @digit-height; display: block; position: relative; float: left;
.segment {background: @off-colour; border-radius: @segment-width; position: absolute; z-index: 0; transition: all 0.5s ease;}
.on {background: @on-colour;}
.horizontal {width: @segment-width; height: @segment-height;}
.vertical {width: @segment-height; height: ((@segment-width)*@offset);}
.a {top: 0; left: @segment-space;
&:before, &:after {content: ''; position: absolute; bottom: 0; width: 0; height: 0;}
&:before {
left: -(ceil(@segment-space/2));
border-left: ceil(@segment-space/2) solid @body-bg;
border-right: ceil(@segment-space/2) solid transparent;
border-bottom: @segment-space solid @body-bg;
}
&:after {
right: -(ceil(@segment-space/2));
border-right: ceil(@segment-space/2) solid @body-bg;
border-left: ceil(@segment-space/2) solid transparent;
border-bottom: @segment-space solid @body-bg;
}
}
.b {top: @segment-space; right: 0;
&:before, &:after {content: ''; position: absolute; left: 0; width: 0; height: 0;}
&:before {
top:-(ceil(@segment-space/2));
border-bottom: ceil(@segment-space/2) solid transparent;
border-left: @segment-space solid @body-bg;
border-top: ceil(@segment-space/2) solid @body-bg;
}
&:after {
bottom:-(ceil(@segment-space/2));
border-top: ceil(@segment-space/2) solid transparent;
border-left: @segment-space solid @body-bg;
border-bottom: ceil(@segment-space/2) solid @body-bg;
}
}
.c {top: (@segment-space+((@segment-width)*@offset)+@segment-space); right: 0;
&:before, &:after {content: ''; position: absolute; left: 0; width: 0; height: 0;}
&:before {
top:-(ceil(@segment-space/2));
border-bottom: ceil(@segment-space/2) solid transparent;
border-left: @segment-space solid @body-bg;
border-top: ceil(@segment-space/2) solid @body-bg;
}
&:after {
bottom:-(ceil(@segment-space/2));
border-top: ceil(@segment-space/2) solid transparent;
border-left: @segment-space solid @body-bg;
border-bottom: ceil(@segment-space/2) solid @body-bg;
}
}
.d {bottom: 0; left: @segment-space;
&:before, &:after {content: ''; position: absolute; bottom: 0; width: 0; height: 0;}
&:before {
left: -(ceil(@segment-space/2));
border-left: ceil(@segment-space/2) solid @body-bg;
border-right: ceil(@segment-space/2) solid transparent;
border-top: @segment-space solid @body-bg;
}
&:after {
right: -(ceil(@segment-space/2));
border-right: ceil(@segment-space/2) solid @body-bg;
border-left: ceil(@segment-space/2) solid transparent;
border-top: @segment-space solid @body-bg;
}
}
.e {top: (@segment-space+((@segment-width)*@offset)+@segment-space); left: 0;
&:before, &:after {content: ''; position: absolute; left: 0; width: 0; height: 0;}
&:before {
top:-(ceil(@segment-space/2));
border-bottom: ceil(@segment-space/2) solid transparent;
border-right: @segment-space solid @body-bg;
border-top: ceil(@segment-space/2) solid @body-bg;
}
&:after {
bottom:-(ceil(@segment-space/2));
border-top: ceil(@segment-space/2) solid transparent;
border-right: @segment-space solid @body-bg;
border-bottom: ceil(@segment-space/2) solid @body-bg;
}
}
.f {top: @segment-space; left: 0;
&:before, &:after {content: ''; position: absolute; left: 0; width: 0; height: 0;}
&:before {
top:-(ceil(@segment-space/2));
border-bottom: ceil(@segment-space/2) solid transparent;
border-right: @segment-space solid @body-bg;
border-top: ceil(@segment-space/2) solid @body-bg;
}
&:after {
bottom:-(ceil(@segment-space/2));
border-top: ceil(@segment-space/2) solid transparent;
border-right: @segment-space solid @body-bg;
border-bottom: ceil(@segment-space/2) solid @body-bg;
}
}
.g {top:(@segment-space+((@segment-width)*@offset)); left: @segment-space;
&:before, &:after {content: ''; position: absolute; bottom: 0; width: 0; height: 0;}
&:before {
left: 0;
border-right: ceil(@segment-space/2) solid transparent;
border-top: ceil(@segment-space/2) solid @body-bg;
border-bottom: ceil(@segment-space/2) solid @body-bg;
}
&:after {
right: 0;
border-left: ceil(@segment-space/2) solid transparent;
border-top: ceil(@segment-space/2) solid @body-bg;
border-bottom: ceil(@segment-space/2) solid @body-bg;
}
}
}
.hours,.minutes,.seconds {display: inline-block; overflow: auto; text-align: center;}
.separator{ width: @segment-space; height: @digit-height; display: inline-block; position: relative; text-align: center; margin: 0 (@segment-space*2);
.dot {background:@off-colour; width: @segment-space; height: @segment-space; border-radius: @segment-space; transition: all 0.5s ease; position: absolute;}
.dot.on {background: @on-colour;}
.dot:first-of-type {top: 33%;}
.dot:last-of-type {top: 66%;}
}
}
@media @tablet {
@segment-height: 15px;
@segment-width: 80px;
@segment-space: 15px;
@offset: 1;
@digit-height: (((@segment-width)*@offset)*2)+(@segment-space*3);
.digit:not(:last-of-type) {margin-right: (@segment-space*1.5);}
.digit { width: 110px; height: @digit-height; display: block; position: relative; float: left;
.segment {background: @off-colour; border-radius: @segment-width; position: absolute; z-index: 0; transition: all 0.5s ease;}
.on {background: @on-colour;}
.horizontal {width: @segment-width; height: @segment-height;}
.vertical {width: @segment-height; height: ((@segment-width)*@offset);}
.a {top: 0; left: @segment-space;
&:before, &:after {content: ''; position: absolute; bottom: 0; width: 0; height: 0;}
&:before {
left: -(ceil(@segment-space/2));
border-left: ceil(@segment-space/2) solid @body-bg;
border-right: ceil(@segment-space/2) solid transparent;
border-bottom: @segment-space solid @body-bg;
}
&:after {
right: -(ceil(@segment-space/2));
border-right: ceil(@segment-space/2) solid @body-bg;
border-left: ceil(@segment-space/2) solid transparent;
border-bottom: @segment-space solid @body-bg;
}
}
.b {top: @segment-space; right: 0;
&:before, &:after {content: ''; position: absolute; left: 0; width: 0; height: 0;}
&:before {
top:-(ceil(@segment-space/2));
border-bottom: ceil(@segment-space/2) solid transparent;
border-left: @segment-space solid @body-bg;
border-top: ceil(@segment-space/2) solid @body-bg;
}
&:after {
bottom:-(ceil(@segment-space/2));
border-top: ceil(@segment-space/2) solid transparent;
border-left: @segment-space solid @body-bg;
border-bottom: ceil(@segment-space/2) solid @body-bg;
}
}
.c {top: (@segment-space+((@segment-width)*@offset)+@segment-space); right: 0;
&:before, &:after {content: ''; position: absolute; left: 0; width: 0; height: 0;}
&:before {
top:-(ceil(@segment-space/2));
border-bottom: ceil(@segment-space/2) solid transparent;
border-left: @segment-space solid @body-bg;
border-top: ceil(@segment-space/2) solid @body-bg;
}
&:after {
bottom:-(ceil(@segment-space/2));
border-top: ceil(@segment-space/2) solid transparent;
border-left: @segment-space solid @body-bg;
border-bottom: ceil(@segment-space/2) solid @body-bg;
}
}
.d {bottom: 0; left: @segment-space;
&:before, &:after {content: ''; position: absolute; bottom: 0; width: 0; height: 0;}
&:before {
left: -(ceil(@segment-space/2));
border-left: ceil(@segment-space/2) solid @body-bg;
border-right: ceil(@segment-space/2) solid transparent;
border-top: @segment-space solid @body-bg;
}
&:after {
right: -(ceil(@segment-space/2));
border-right: ceil(@segment-space/2) solid @body-bg;
border-left: ceil(@segment-space/2) solid transparent;
border-top: @segment-space solid @body-bg;
}
}
.e {top: (@segment-space+((@segment-width)*@offset)+@segment-space); left: 0;
&:before, &:after {content: ''; position: absolute; left: 0; width: 0; height: 0;}
&:before {
top:-(ceil(@segment-space/2));
border-bottom: ceil(@segment-space/2) solid transparent;
border-right: @segment-space solid @body-bg;
border-top: ceil(@segment-space/2) solid @body-bg;
}
&:after {
bottom:-(ceil(@segment-space/2));
border-top: ceil(@segment-space/2) solid transparent;
border-right: @segment-space solid @body-bg;
border-bottom: ceil(@segment-space/2) solid @body-bg;
}
}
.f {top: @segment-space; left: 0;
&:before, &:after {content: ''; position: absolute; left: 0; width: 0; height: 0;}
&:before {
top:-(ceil(@segment-space/2));
border-bottom: ceil(@segment-space/2) solid transparent;
border-right: @segment-space solid @body-bg;
border-top: ceil(@segment-space/2) solid @body-bg;
}
&:after {
bottom:-(ceil(@segment-space/2));
border-top: ceil(@segment-space/2) solid transparent;
border-right: @segment-space solid @body-bg;
border-bottom: ceil(@segment-space/2) solid @body-bg;
}
}
.g {top:(@segment-space+((@segment-width)*@offset)); left: @segment-space;
&:before, &:after {content: ''; position: absolute; bottom: 0; width: 0; height: 0;}
&:before {
left: 0;
border-right: ceil(@segment-space/2) solid transparent;
border-top: ceil(@segment-space/2) solid @body-bg;
border-bottom: ceil(@segment-space/2) solid @body-bg;
}
&:after {
right: 0;
border-left: ceil(@segment-space/2) solid transparent;
border-top: ceil(@segment-space/2) solid @body-bg;
border-bottom: ceil(@segment-space/2) solid @body-bg;
}
}
}
.hours,.minutes,.seconds {display: inline-block; overflow: auto; text-align: center;}
.separator{ width: @segment-space; height: @digit-height; display: inline-block; position: relative; text-align: center; margin: 0 (@segment-space*2);
.dot {background:@off-colour; width: @segment-space; height: @segment-space; border-radius: @segment-space; transition: all 0.5s ease; position: absolute;}
.dot.on {background: @on-colour;}
.dot:first-of-type {top: 33%;}
.dot:last-of-type {top: 66%;}
}
}
@media @mobile {
@segment-height: 8px;
@segment-width: 40px;
@segment-space: 8px;
@offset: 1;
@digit-height: (((@segment-width)*@offset)*2)+(@segment-space*3);
.digit:not(:last-of-type) {margin-right: (@segment-space*1.5);}
.digit { width: 56px; height: @digit-height; display: block; position: relative; float: left;
.segment {background: @off-colour; border-radius: @segment-width; position: absolute; z-index: 0; transition: all 0.5s ease;}
.on {background: @on-colour;}
.horizontal {width: @segment-width; height: @segment-height;}
.vertical {width: @segment-height; height: ((@segment-width)*@offset);}
.a {top: 0; left: @segment-space;
&:before, &:after {content: ''; position: absolute; bottom: 0; width: 0; height: 0;}
&:before {
left: -(ceil(@segment-space/2));
border-left: ceil(@segment-space/2) solid @body-bg;
border-right: ceil(@segment-space/2) solid transparent;
border-bottom: @segment-space solid @body-bg;
}
&:after {
right: -(ceil(@segment-space/2));
border-right: ceil(@segment-space/2) solid @body-bg;
border-left: ceil(@segment-space/2) solid transparent;
border-bottom: @segment-space solid @body-bg;
}
}
.b {top: @segment-space; right: 0;
&:before, &:after {content: ''; position: absolute; left: 0; width: 0; height: 0;}
&:before {
top:-(ceil(@segment-space/2));
border-bottom: ceil(@segment-space/2) solid transparent;
border-left: @segment-space solid @body-bg;
border-top: ceil(@segment-space/2) solid @body-bg;
}
&:after {
bottom:-(ceil(@segment-space/2));
border-top: ceil(@segment-space/2) solid transparent;
border-left: @segment-space solid @body-bg;
border-bottom: ceil(@segment-space/2) solid @body-bg;
}
}
.c {top: (@segment-space+((@segment-width)*@offset)+@segment-space); right: 0;
&:before, &:after {content: ''; position: absolute; left: 0; width: 0; height: 0;}
&:before {
top:-(ceil(@segment-space/2));
border-bottom: ceil(@segment-space/2) solid transparent;
border-left: @segment-space solid @body-bg;
border-top: ceil(@segment-space/2) solid @body-bg;
}
&:after {
bottom:-(ceil(@segment-space/2));
border-top: ceil(@segment-space/2) solid transparent;
border-left: @segment-space solid @body-bg;
border-bottom: ceil(@segment-space/2) solid @body-bg;
}
}
.d {bottom: 0; left: @segment-space;
&:before, &:after {content: ''; position: absolute; bottom: 0; width: 0; height: 0;}
&:before {
left: -(ceil(@segment-space/2));
border-left: ceil(@segment-space/2) solid @body-bg;
border-right: ceil(@segment-space/2) solid transparent;
border-top: @segment-space solid @body-bg;
}
&:after {
right: -(ceil(@segment-space/2));
border-right: ceil(@segment-space/2) solid @body-bg;
border-left: ceil(@segment-space/2) solid transparent;
border-top: @segment-space solid @body-bg;
}
}
.e {top: (@segment-space+((@segment-width)*@offset)+@segment-space); left: 0;
&:before, &:after {content: ''; position: absolute; left: 0; width: 0; height: 0;}
&:before {
top:-(ceil(@segment-space/2));
border-bottom: ceil(@segment-space/2) solid transparent;
border-right: @segment-space solid @body-bg;
border-top: ceil(@segment-space/2) solid @body-bg;
}
&:after {
bottom:-(ceil(@segment-space/2));
border-top: ceil(@segment-space/2) solid transparent;
border-right: @segment-space solid @body-bg;
border-bottom: ceil(@segment-space/2) solid @body-bg;
}
}
.f {top: @segment-space; left: 0;
&:before, &:after {content: ''; position: absolute; left: 0; width: 0; height: 0;}
&:before {
top:-(ceil(@segment-space/2));
border-bottom: ceil(@segment-space/2) solid transparent;
border-right: @segment-space solid @body-bg;
border-top: ceil(@segment-space/2) solid @body-bg;
}
&:after {
bottom:-(ceil(@segment-space/2));
border-top: ceil(@segment-space/2) solid transparent;
border-right: @segment-space solid @body-bg;
border-bottom: ceil(@segment-space/2) solid @body-bg;
}
}
.g {top:(@segment-space+((@segment-width)*@offset)); left: @segment-space;
&:before, &:after {content: ''; position: absolute; bottom: 0; width: 0; height: 0;}
&:before {
left: 0;
border-right: ceil(@segment-space/2) solid transparent;
border-top: ceil(@segment-space/2) solid @body-bg;
border-bottom: ceil(@segment-space/2) solid @body-bg;
}
&:after {
right: 0;
border-left: ceil(@segment-space/2) solid transparent;
border-top: ceil(@segment-space/2) solid @body-bg;
border-bottom: ceil(@segment-space/2) solid @body-bg;
}
}
}
.hours,.minutes,.seconds {display: inline-block; overflow: auto; text-align: center; white-space: nowrap;}
.separator{ width: @segment-space; height: @digit-height; display: inline-block; position: relative; text-align: center; margin: 0 (@segment-space*2); white-space: nowrap;
.dot {background:@off-colour; width: @segment-space; height: @segment-space; border-radius: @segment-space; transition: all 0.5s ease; position: absolute;}
.dot.on {background: @on-colour;}
.dot:first-of-type {top: 33%;}
.dot:last-of-type {top: 66%;}
}
}
@media only screen and (max-width:500px) {
@segment-height: 4px;
@segment-width: 16px;
@segment-space: 4px;
@offset: 1;
@digit-height: (((@segment-width)*@offset)*2)+(@segment-space*3);
.digit:not(:last-of-type) {margin-right: (@segment-space*1.5);}
.digit { width: 24px; height: @digit-height; display: block; position: relative; float: left;
.segment {background: @off-colour; border-radius: @segment-width; position: absolute; z-index: 0; transition: all 0.5s ease;}
.on {background: @on-colour;}
.horizontal {width: @segment-width; height: @segment-height;}
.vertical {width: @segment-height; height: ((@segment-width)*@offset);}
.a {top: 0; left: @segment-space;
&:before, &:after {content: ''; position: absolute; bottom: 0; width: 0; height: 0;}
&:before {
left: -(ceil(@segment-space/2));
border-left: ceil(@segment-space/2) solid @body-bg;
border-right: ceil(@segment-space/2) solid transparent;
border-bottom: @segment-space solid @body-bg;
}
&:after {
right: -(ceil(@segment-space/2));
border-right: ceil(@segment-space/2) solid @body-bg;
border-left: ceil(@segment-space/2) solid transparent;
border-bottom: @segment-space solid @body-bg;
}
}
.b {top: @segment-space; right: 0;
&:before, &:after {content: ''; position: absolute; left: 0; width: 0; height: 0;}
&:before {
top:-(ceil(@segment-space/2));
border-bottom: ceil(@segment-space/2) solid transparent;
border-left: @segment-space solid @body-bg;
border-top: ceil(@segment-space/2) solid @body-bg;
}
&:after {
bottom:-(ceil(@segment-space/2));
border-top: ceil(@segment-space/2) solid transparent;
border-left: @segment-space solid @body-bg;
border-bottom: ceil(@segment-space/2) solid @body-bg;
}
}
.c {top: (@segment-space+((@segment-width)*@offset)+@segment-space); right: 0;
&:before, &:after {content: ''; position: absolute; left: 0; width: 0; height: 0;}
&:before {
top:-(ceil(@segment-space/2));
border-bottom: ceil(@segment-space/2) solid transparent;
border-left: @segment-space solid @body-bg;
border-top: ceil(@segment-space/2) solid @body-bg;
}
&:after {
bottom:-(ceil(@segment-space/2));
border-top: ceil(@segment-space/2) solid transparent;
border-left: @segment-space solid @body-bg;
border-bottom: ceil(@segment-space/2) solid @body-bg;
}
}
.d {bottom: 0; left: @segment-space;
&:before, &:after {content: ''; position: absolute; bottom: 0; width: 0; height: 0;}
&:before {
left: -(ceil(@segment-space/2));
border-left: ceil(@segment-space/2) solid @body-bg;
border-right: ceil(@segment-space/2) solid transparent;
border-top: @segment-space solid @body-bg;
}
&:after {
right: -(ceil(@segment-space/2));
border-right: ceil(@segment-space/2) solid @body-bg;
border-left: ceil(@segment-space/2) solid transparent;
border-top: @segment-space solid @body-bg;
}
}
.e {top: (@segment-space+((@segment-width)*@offset)+@segment-space); left: 0;
&:before, &:after {content: ''; position: absolute; left: 0; width: 0; height: 0;}
&:before {
top:-(ceil(@segment-space/2));
border-bottom: ceil(@segment-space/2) solid transparent;
border-right: @segment-space solid @body-bg;
border-top: ceil(@segment-space/2) solid @body-bg;
}
&:after {
bottom:-(ceil(@segment-space/2));
border-top: ceil(@segment-space/2) solid transparent;
border-right: @segment-space solid @body-bg;
border-bottom: ceil(@segment-space/2) solid @body-bg;
}
}
.f {top: @segment-space; left: 0;
&:before, &:after {content: ''; position: absolute; left: 0; width: 0; height: 0;}
&:before {
top:-(ceil(@segment-space/2));
border-bottom: ceil(@segment-space/2) solid transparent;
border-right: @segment-space solid @body-bg;
border-top: ceil(@segment-space/2) solid @body-bg;
}
&:after {
bottom:-(ceil(@segment-space/2));
border-top: ceil(@segment-space/2) solid transparent;
border-right: @segment-space solid @body-bg;
border-bottom: ceil(@segment-space/2) solid @body-bg;
}
}
.g {top:(@segment-space+((@segment-width)*@offset)); left: @segment-space;
&:before, &:after {content: ''; position: absolute; bottom: 0; width: 0; height: 0;}
&:before {
left: 0;
border-right: ceil(@segment-space/2) solid transparent;
border-top: ceil(@segment-space/2) solid @body-bg;
border-bottom: ceil(@segment-space/2) solid @body-bg;
}
&:after {
right: 0;
border-left: ceil(@segment-space/2) solid transparent;
border-top: ceil(@segment-space/2) solid @body-bg;
border-bottom: ceil(@segment-space/2) solid @body-bg;
}
}
}
.hours,.minutes,.seconds {display: inline-block; overflow: auto; text-align: center; white-space: nowrap;}
.separator{ width: @segment-space; height: @digit-height; display: inline-block; position: relative; text-align: center; margin: 0 (@segment-space*2); white-space: nowrap;
.dot {background:@off-colour; width: @segment-space; height: @segment-space; border-radius: @segment-space; transition: all 0.5s ease; position: absolute;}
.dot.on {background: @on-colour;}
.dot:first-of-type {top: 33%;}
.dot:last-of-type {top: 66%;}
}
}
/*Material Card*/
.m-card {position: relative; overflow: hidden; margin: 3em auto 1em auto; padding: 1em; background-color: #fff; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); transition:all 0.25s ease; max-width: 450px; z-index: 1;
&:hover {box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
h1 {border-bottom: 1px solid @brand-highlight;
#because {font-size: 0.35em; text-align: center; display: block; margin-bottom: 0.5em; font-weight: 300;}
}
#logo {max-width: 300px; margin: 0 auto; display: block;}
h5 {margin: 0.5em 0 0.7em;}
#file-upload-container { cursor: pointer; border: 3px dashed @brand-highlight; display: block; width: 100%; height: 200px; border-radius: 25px; text-align: center;
input {display: none;}
#add-symbol {display: block; margin: 0 auto; height: 70%; fill :@text-colour-medium; max-width: 40px;
&:hover{ fill:@brand-highlight; }
}
#file-name {display: block; margin: 0 auto; color:@text-colour-medium; max-width: 90%; word-break:break-all; }
.file-added {color: @text-colour-dark!important;}
&:hover {
#add-symbol {fill:@brand-highlight;}
}
}
button { width: 100%; padding-top: 1.3em;
#upload-symbol {fill:@brand-highlight; transition:all 0.25s ease; max-width: 36px; max-height: 36px; display: inline; vertical-align: middle; margin-top: -4px;}
span {display: inline-block;}
&:hover {
#upload-symbol {fill:#fff;}
#upload-symbol #arrow {top: -12px;}
}
}
button.disabled { pointer-events: none; cursor: default; color:@text-colour-medium; border-color: @text-colour-medium; background: @text-colour-light;
#upload-symbol {fill:@text-colour-medium;}
}
.how-to {display: block; text-align: center; width: 100%; margin-top:1em; padding: 0.75em 0; font-weight: 300; transition:all 0.25s ease;
&:hover {transform: scale(1.2);}
}
#how-to { position: absolute; top: 0; left: 0; margin-top: 0!important; width: 100%; height: 100%; background: #fff; z-index: 3; padding: 1em; display: none;
h3 { border-bottom:1px solid @text-colour-dark; padding-bottom: 0.25em;}
#close { position: absolute; top: 1em; right: 1em;
#close-symbol {transform: rotate(45deg); max-width: 20px; max-height: 20px; fill:@text-colour-medium;}
&:hover {
#close-symbol {fill:@brand-highlight;}
}
}
}
.step { float: left; width: 100%;
img {max-width: 120px; display: block; float: left; margin-right: 0.5em; border:1px solid @text-colour-dark;}
h6 {margin-bottom: 0.5em;}
}
#upload-animation {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 4; padding: 1em; text-align: center; opacity: 0; pointer-events: none; transition:opacity 0.25s ease;
h3 {margin-bottom: 0px;}
}
#upload-animation.show {opacity: 1;}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment