$babyblue: #97d0e1;
$blue: #00659a;
$light: rgba(0,0,0,.1);
$medium: rgba(0,0,0,.5);
$dark: rgba(0,0,0,.8);
$bright: rgba(255,255,255,.9);
$midbright: rgba(255,255,255,.5);
$lowbright: rgba(255,255,255,.15);
$gold: #fad669;
$red: #a73632;
@mixin transition($args...) {
-webkit-transition: $args;
-moz-transition: $args;
-ms-transition: $args;
-o-transition: $args;
transition: $args;
}
@mixin rotate($val) {
-webkit-transform: rotate($val);
-moz-transform: rotate($val);
-ms-transform: rotate($val);
-o-transform: rotate($val);
transform: rotate($val);
}
.clearfix {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
/* Mobile Nav */
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
background-color: transparent;
}
.navbar-default {
.navbar-toggle {
border: none;
}
}
html, body {
min-height: 100%;
font-family: 'Open Sans', sans-serif;
height: auto;
}
body {
background: #92c7d6;
background-image: -webkit-radial-gradient(top, circle cover, #97d0e1, #427388 80%);
background-image: -moz-radial-gradient(top, circle cover, #97d0e1, #427388 80%);
background-image: -o-radial-gradient(top, circle cover, #97d0e1, #427388 80%);
background-image: radial-gradient(top, circle cover, #97d0e1, #427388 80%);
a, button {
color: $babyblue;
@include transition(all .2s ease);
}
}
.box {
background: $dark;
color: white;
padding: 2rem;
margin: 2rem 0;
box-shadow: 0 2px 5px rgba(0,0,0,.3), 3px 5px 10px rgba(0,0,0,.15);
clear: both;
}
.navbar {
margin-bottom: 0;
}
.navbar-default {
background-color: transparent;
border: none;
.navbar-nav {
&>li>a {
color: white;
&:hover, &:focus {
color: $babyblue;
}
}
.active>a, .open>a {
background-color: transparent;
background: transparent;
color: $babyblue;
&:hover, &:focus {
color: $babyblue;
background-color: transparent;
}
}
}
}
.user-image {
width: 120px;
height: 120px;
background: url(http://www.grca.org/data1/images/fade_30.jpg) center center no-repeat;
border-radius: 50%;
background-size: cover;
margin: 0 auto;
border: $babyblue 3px solid;
@include transition(all .2s ease);
position: relative;
span {
display: none;
position: absolute;
color: black;
left: 50%;
top: 50%;
margin: -20px 0 0 -25px;
width: 100%;
font-size: 5rem;
text-shadow: 0 0 5px #fff;
}
&:hover {
-webkit-filter: grayscale(.8);
filter: grayscale(.8);
span {
display: block;
}
}
}
.form-control {
border: none;
border-bottom: 1px solid $babyblue;
border-radius: 0;
background-color: transparent;
padding: 5px 0 5px 0;
width: 80%;
color: white;
font-size: 30px;
line-height: 36px;
height: auto;
box-shadow: none;
&:focus {
box-shadow: none;
}
&::-webkit-input-placeholder {
color: $midbright;
}
&:-moz-placeholder { /* Firefox 18- */
color: $midbright;
}
&::-moz-placeholder { /* Firefox 19+ */
color: $midbright;
}
&:-ms-input-placeholder {
color: $midbright;
}
label {
font-weight: normal;
}
input[type=checkbox] {
width: 25px;
height: 25px;
-webkit-appearance: none;
border: 1px solid white;
margin: 0 38px 0 0;
left: 0;
cursor: pointer;
}
}
.btn-default {
background-color: transparent;
border-radius: 0;
padding: 1rem 2rem;
border: 1px solid $babyblue;
color: $babyblue;
&:focus {
background-color: transparent;
box-shadow: none;
}
&:hover {
background-color: $babyblue;
border-color: $babyblue;
color: white;
}
}
p .edit {
display: inline-block;
float: right;
clear: both;
}
.light_box {
background: $light;
color: white;
margin: 2rem 0;
h1 {
display: inline-block;
margin: 0 -6px 0 10%;
position: relative;
top: 10px;
font-size: 45px;
}
svg {
display: inline;
}
p {
margin: 0;
}
.bottom {
background: rgba(0,0,0,.5);
padding: 1rem;
}
}
.medium_box {
background: $medium;
}
.search {
padding: 1rem 2rem;
.mdl-textfield__label:after {
background-color: $babyblue;
bottom: 15px;
}
}
.progress {
border-radius: 0;
-webkit-box-shadow: 0;
box-shadow: 0;
background-color: $lowbright;
&:last-child {
margin: 0;
}
.progress-bar-success {
background-color: $blue;
color: $midbright;
}
.progress-bar-info {
background-color: $babyblue;
color: $medium;
}
.progress-bar-warning {
background-color: adjust-hue($babyblue, 90%);
color: $medium;
}
.progress-bar-danger {
background-color: $red;
color: $midbright;
}
}
/********* Weather **********/
/* VARIABLES */
$baseAnimationDuration: 18s;
$size: 100px;
$svgSize: 100px;
//vars specific for curves
$animationStep: 2;
$increase: pi() / 100;
$fontColor: white;
$strokeColor: white;
$fillColor: $babyblue;
/* Applies a stroke to the icons. Can use percentage for responsive */
$strokeStrokeWidth: 0%;
$strokeStrokeColor: black;
$fillStrokeWidth: 0%;
$fillStrokeColor: black;
.climacon_component-stroke {
fill: $strokeColor;
stroke-width: $strokeStrokeWidth;
stroke: $strokeStrokeColor;
}
.climacon_component-fill {
fill: $fillColor;
stroke-width: $fillStrokeWidth;
stroke: $fillStrokeColor;
}
/* SVG GLOBAL */
svg {
display: inline-block;
width: $size;
height: $size;
shape-rendering: geometricPrecision;
}
g, path, circle, rect {
animation-iteration-count: infinite;
animation-timing-function: linear;
transform-origin: 50% 50%;
animation-duration: $baseAnimationDuration;
animation-direction: normal;
}
/********** Video Player **********/
.cxiv-container {
padding: 15px;
margin-bottom: 10px;
overflow: auto;
display: block;
}
.cxiv-container iframe {
width: 100%;
margin-right: 10px;
float: left;
}
.cxiv-menu a {
height: 39px;
padding: 10px;
display: block;
overflow: hidden;
background-color: #ff9933; /* Orange */
color: #235F7F; /* Link Color */
text-decoration: none;
font-size: 1em;
}
.cxiv-menu a:hover {
background-color: #6699CC; /* Hover Blue */
color: #000000;
}
/********** Calendar **********/
.cal-container {
max-height: 360px;
margin: 0 auto;
overflow: hidden;
/*-webkit-box-shadow: 4px 3px 16px 0px rgba(50, 50, 50, 0.40);
-moz-box-shadow: 4px 3px 16px 0px rgba(50, 50, 50, 0.40);
box-shadow: 4px 3px 16px 0px rgba(50, 50, 50, 0.40);*/
}
.leftContainer {
display: none;
background: #3498db;
height: 100%;
color: white;
text-align: center;
float: left;
.weekday {
font-size: 30px;
}
.date {
position: relative;
top:-70px;
font-size: 110px;
}
.monad{
top:-150px;
font-size:30px;
position:relative;
}
}
.rightContainer {
height: 100%;
color: white;
text-align:center;
position:relative;
padding-bottom: 5rem;
.calendar {
text-align: center;
margin: auto;
position: relative;
top: 15px;
font-size: 18px;
@media (min-width: 768px) and (max-width: 990px) {
font-size: 14px;
}
td {
padding: 4px;
width: 23px;
height: 23px;
&:hover{
border-radius:50%;
background: $babyblue;
color:white;
cursor: pointer;
}
&.greyMarked {
color: $light;
&:hover {
background: transparent;
cursor: default;
}
}
&.currentDate {
background: $dark;
border-radius: 50%;
color: white;
}
&.weekname {
color: $medium;
&:hover {
background: transparent;
cursor: default;
}
}
}
}
.year{
position:relative;
top:15px;
}
}
/******** Clocky Clock ********/
#clock {
color: $midbright;
font-size: 1.5rem;
position: absolute;
}
.clock {
border: 5px solid $bright;
border-radius: 100%;
display: block;
height: 250px;
width: 250px;
margin: 0 auto;
position: relative;
.hour, .minute {
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
position: absolute;
left: 50%;
top: 50%;
background: #fff;
height: 0;
width: 0;
}
.hour {
margin: -60px -2px 0;
padding: 60px 2px 0;
}
.minute {
margin: -105px -2px 0;
padding: 105px 2px 0;
}
}
#notify {
p {
font-size: .8rem;
.glyphicon-ok {
color: $blue;
}
}
}
/************** Music Player *******************/
.music {
padding: 1rem;
position: relative;
.song_info {
position: absolute;
bottom: 2rem;
left: 2rem;
.song, .album, .artist {
font-size: 1rem;
line-height: 1.5rem;
}
.song {
@media (min-width: 500px) {
font-size: 1.5rem;
}
}
.album {
color: $midbright;
@media (min-width: 500px) {
font-size: 1rem;
}
}
.artist {
@media (min-width: 500px) {
font-size: 1.25rem;
}
color: $medium;
}
}
.controls {
position: relative;
.volume {
@include rotate(-90deg);
transform-origin: 73% 40%;
position: absolute;
right: 0;
top: 0;
position: absolute;
@media (min-width: 780px) {
right: -5%;
transform-origin: 98% 89%;
}
@media (min-width: 990px) {
transform-origin: 120% 152%;
}
@media (min-width: 1200px) {
transform-origin: 139% 231%;
}
.volume-control {
width: 100%;
max-width: 120px;
height: 20px;
@media (min-width: 480px) {
max-width: 150px;
height: 35px;
}
@media (min-width: 780px) {
max-width: 400px;
height: 55px;
width: 140%;
}
@media (min-width: 990px) {
width: 180%;
}
@media (min-width: 1200px) {
width: 228%;
}
.glyphicon-volume-up {
@include rotate(90deg);
left: 5px;
top: 2px;
position: absolute;
color: $babyblue;
}
}
}
}
.album_image {
padding-right: 0;
a {
color: $dark;
font-size: 56px;
position: absolute;
opacity: .6;
left: 50%;
top: 50%;
transform: translate(-40%, -50%);
&:hover {
text-decoration: none;
opacity: .9;
}
}
}
.mdl-slider__background-lower {
background: $babyblue;
}
input[type=range]::-webkit-slider-thumb {
background: $babyblue;
}
}
/*********** Google MDL Overrides **************/
.mdl-button {
&.edit {
border-radius: 0;
}
}
.mdl-checkbox__label {
font-size: 12px;
}
.mdl-button--accent.mdl-button--accent.mdl-button--raised, .mdl-button--accent.mdl-button--accent.mdl-button--fab {
background-color: $babyblue;
}
.mdl-card {
background-color: transparent;
width: auto;
.mdl-card__title {
color: $bright;
padding: 0;
h4 {
margin: 0 0 16px;
}
}
.mdl-button.mdl-button--colored {
color: $bright;
}
.mdl-card__actions.mdl-card--border {
border-top: 1px solid rgba(255,255,255,.2);
}
.mdl-card__actions {
padding: 8px 0;
}
i {
float: right;
}
}
!
