mirror of
https://github.com/WebStackPage/WebStackPage.github.io.git
synced 2026-02-10 22:05:52 +08:00
1246 lines
23 KiB
Plaintext
1246 lines
23 KiB
Plaintext
@widget-spacing: 20px;
|
|
|
|
.xe-widget {
|
|
position: relative;
|
|
|
|
// Counters
|
|
&.xe-counter {
|
|
background: #fff;
|
|
padding: @base-margin + 8;
|
|
line-height: 1;
|
|
display: table;
|
|
width: 100%;
|
|
margin-bottom: @widget-spacing;
|
|
|
|
.xe-icon,
|
|
.xe-label {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
padding: @base-margin - 2;
|
|
}
|
|
|
|
.xe-icon {
|
|
width: 1%;
|
|
|
|
i {
|
|
@s: 50px;
|
|
|
|
display: block;
|
|
background: @secondary-color;
|
|
color: #fff;
|
|
text-align: center;
|
|
font-size: 25px;
|
|
line-height: @s;
|
|
.size(@s);
|
|
.border-radius(50%);
|
|
}
|
|
|
|
+ .xe-label {
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
|
|
.xe-label {
|
|
|
|
.num {
|
|
display: block;
|
|
font-size: 28px;
|
|
font-weight: normal;
|
|
color: darken(@main-text-color, 35%);
|
|
}
|
|
|
|
span {
|
|
display: block;
|
|
font-style: normal;
|
|
font-size: @font-size-small - 2;
|
|
text-transform: uppercase;
|
|
color: @main-text-color;
|
|
margin-top: @base-padding/2;
|
|
}
|
|
|
|
+ .xe-icon {
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
|
|
&.xe-counter-primary { .xe-counter-variant(@brand-primary, #fff); }
|
|
&.xe-counter-success { .xe-counter-variant(@brand-success, #fff); }
|
|
&.xe-counter-warning { .xe-counter-variant(@brand-warning, #fff); }
|
|
&.xe-counter-info { .xe-counter-variant(@brand-info, #fff); }
|
|
&.xe-counter-danger { .xe-counter-variant(@brand-danger, #fff); }
|
|
&.xe-counter-blue { .xe-counter-variant(@xe-blue, #fff); }
|
|
&.xe-counter-red { .xe-counter-variant(@xe-red, #fff); }
|
|
&.xe-counter-purple { .xe-counter-variant(@xe-purple, #fff); }
|
|
&.xe-counter-orange { .xe-counter-variant(@xe-orange, #fff); }
|
|
&.xe-counter-yellow { .xe-counter-variant(@xe-yellow, #fff); }
|
|
&.xe-counter-turquoise { .xe-counter-variant(@xe-turquoise, #fff); }
|
|
&.xe-counter-white { .xe-counter-variant(#fff, darken(@main-text-color, 30%)); .xe-icon i { border: 1px solid @default-border-color; } }
|
|
&.xe-counter-gray { .xe-counter-variant(@xe-gray, #555); }
|
|
&.xe-counter-pink { .xe-counter-variant(@xe-pink, #fff); }
|
|
}
|
|
|
|
&.xe-counter-block {
|
|
color: #fff;
|
|
background: @secondary-color;
|
|
margin-bottom: @widget-spacing;
|
|
|
|
.xe-upper {
|
|
&:extend(.xe-widget.xe-counter all);
|
|
margin: 0;
|
|
border-spacing: 0;
|
|
border: 0;
|
|
background: @secondary-color;
|
|
|
|
.xe-icon,
|
|
.xe-label {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.xe-icon {
|
|
text-align: center;
|
|
|
|
i {
|
|
background: @secondary-color;
|
|
font-size: 32px;
|
|
}
|
|
}
|
|
|
|
.xe-label {
|
|
|
|
.num {
|
|
color: #fff;
|
|
}
|
|
|
|
span {
|
|
color: fade(#fff, 70%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.xe-lower {
|
|
padding: @default-padding/2 @default-padding;
|
|
|
|
.border {
|
|
height: 1px;
|
|
background: fade(#fff, 50%);
|
|
margin-bottom: @base-padding;
|
|
}
|
|
|
|
span, strong {
|
|
font-size: @font-size-small - 2;
|
|
text-transform: uppercase;
|
|
display: block;
|
|
}
|
|
|
|
span {
|
|
color: fade(#fff, 70%);
|
|
}
|
|
|
|
strong {
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
|
|
&.xe-counter-block-primary { .xe-counter-block-variant(@brand-primary; #fff); }
|
|
&.xe-counter-block-success { .xe-counter-block-variant(@brand-success; #fff); }
|
|
&.xe-counter-block-warning { .xe-counter-block-variant(@brand-warning; #fff); }
|
|
&.xe-counter-block-danger { .xe-counter-block-variant(@brand-danger; #fff); }
|
|
&.xe-counter-block-info { .xe-counter-block-variant(@brand-info; #fff); }
|
|
&.xe-counter-block-purple { .xe-counter-block-variant(@xe-purple; #fff); }
|
|
&.xe-counter-block-blue { .xe-counter-block-variant(@xe-blue; #fff); }
|
|
&.xe-counter-block-red { .xe-counter-block-variant(@xe-red; #fff); }
|
|
&.xe-counter-block-orange { .xe-counter-block-variant(@xe-orange; #fff); }
|
|
&.xe-counter-block-turquoise { .xe-counter-block-variant(@xe-turquoise; #fff); }
|
|
&.xe-counter-block-pink { .xe-counter-block-variant(@xe-pink; #fff); }
|
|
&.xe-counter-block-yellow { .xe-counter-block-variant(@xe-yellow; #fff); }
|
|
&.xe-counter-block-gray { .xe-counter-block-variant(darken(@xe-gray, 10%), #666); }
|
|
&.xe-counter-block-white { .xe-counter-block-variant(#fff; darken(@main-text-color, 30%)); }
|
|
}
|
|
|
|
|
|
// Progress Counter
|
|
&.xe-progress-counter {
|
|
position: relative;
|
|
color: #fff;
|
|
background: @secondary-color;
|
|
margin-bottom: @widget-spacing;
|
|
overflow: hidden;
|
|
&:extend(.xe-widget.xe-counter-block all);
|
|
|
|
.xe-background {
|
|
position: absolute;
|
|
left: -40%;
|
|
bottom: -10%;
|
|
color: #fff;
|
|
font-size: 150px;
|
|
.opacity(.1);
|
|
|
|
i {
|
|
line-height: 1;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.xe-upper {
|
|
|
|
.xe-icon {
|
|
|
|
i {
|
|
font-size: 28px;
|
|
background: none;
|
|
}
|
|
}
|
|
|
|
.xe-label {
|
|
|
|
span {
|
|
padding: 0;
|
|
padding-bottom: @base-padding/2;
|
|
}
|
|
|
|
.num {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.xe-progress {
|
|
height: 2px;
|
|
position: relative;
|
|
background: fade(#000, 10%);
|
|
margin: 0 @default-padding;
|
|
margin-top: @base-padding;
|
|
|
|
.xe-progress-fill {
|
|
position: absolute;
|
|
display: block;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
background: #fff;
|
|
}
|
|
}
|
|
|
|
&.xe-progress-counter-primary { .xenon-progress-counter-variant(@brand-primary; #fff); }
|
|
&.xe-progress-counter-success { .xenon-progress-counter-variant(@brand-success; #fff); }
|
|
&.xe-progress-counter-info { .xenon-progress-counter-variant(@brand-info; #fff); }
|
|
&.xe-progress-counter-danger { .xenon-progress-counter-variant(@brand-danger; #fff); }
|
|
&.xe-progress-counter-warning { .xenon-progress-counter-variant(@brand-warning; #fff); }
|
|
&.xe-progress-counter-pink { .xenon-progress-counter-variant(@xe-pink; #fff); }
|
|
&.xe-progress-counter-turquoise { .xenon-progress-counter-variant(@xe-turquoise; #fff); }
|
|
&.xe-progress-counter-red { .xenon-progress-counter-variant(@xe-red; #fff); }
|
|
&.xe-progress-counter-orange { .xenon-progress-counter-variant(@xe-orange; #fff); }
|
|
&.xe-progress-counter-yellow { .xenon-progress-counter-variant(@xe-yellow; #fff); }
|
|
&.xe-progress-counter-purple { .xenon-progress-counter-variant(@xe-purple; #fff); }
|
|
}
|
|
|
|
|
|
// Vertical Counter
|
|
&.xe-vertical-counter {
|
|
background: @secondary-color;
|
|
padding: @base-margin;
|
|
padding-top: @base-margin * 2;
|
|
margin-bottom: @widget-spacing;
|
|
color: #fff;
|
|
|
|
.xe-icon {
|
|
font-size: 75px;
|
|
text-align: center;
|
|
padding-bottom: @default-padding/2;
|
|
|
|
i {
|
|
display: block;
|
|
line-height: 1.4;
|
|
}
|
|
}
|
|
|
|
.xe-label {
|
|
padding-top: @default-padding/2;
|
|
text-align: center;
|
|
|
|
.num {
|
|
display: block;
|
|
font-weight: normal;
|
|
font-size: @font-size-h3;
|
|
}
|
|
|
|
span {
|
|
display: block;
|
|
padding-top: @base-padding/2;
|
|
text-transform: uppercase;
|
|
font-size: @font-size-base - 1;
|
|
color: fade(#fff, 95%);
|
|
}
|
|
}
|
|
|
|
&.xe-vertical-counter-primary { .xenon-vertical-counter-variant(@brand-primary; #fff); }
|
|
&.xe-vertical-counter-success { .xenon-vertical-counter-variant(@brand-success; #fff); }
|
|
&.xe-vertical-counter-danger { .xenon-vertical-counter-variant(@brand-danger; #fff); }
|
|
&.xe-vertical-counter-warning { .xenon-vertical-counter-variant(@brand-warning; #fff); }
|
|
&.xe-vertical-counter-info { .xenon-vertical-counter-variant(@brand-info; #fff); }
|
|
&.xe-vertical-counter-purple { .xenon-vertical-counter-variant(@xe-purple; #fff); }
|
|
&.xe-vertical-counter-orange { .xenon-vertical-counter-variant(@xe-orange; #fff); }
|
|
&.xe-vertical-counter-red { .xenon-vertical-counter-variant(@xe-red; #fff); }
|
|
&.xe-vertical-counter-blue { .xenon-vertical-counter-variant(@xe-blue; #fff); }
|
|
&.xe-vertical-counter-turquoise { .xenon-vertical-counter-variant(@xe-turquoise; #fff); }
|
|
&.xe-vertical-counter-pink { .xenon-vertical-counter-variant(@xe-pink; #fff); }
|
|
&.xe-vertical-counter-yellow { .xenon-vertical-counter-variant(@xe-yellow; #fff); }
|
|
&.xe-vertical-counter-gray { .xenon-vertical-counter-variant(darken(@xe-gray, 10%); #555); }
|
|
&.xe-vertical-counter-white { .xenon-vertical-counter-variant(#fff; darken(@main-text-color, 30%)); }
|
|
}
|
|
|
|
|
|
// Todo List
|
|
&.xe-todo-list {
|
|
background: #fff;
|
|
padding: @base-margin+5 @default-padding;
|
|
margin-bottom: @widget-spacing;
|
|
|
|
.xe-header {
|
|
display: table;
|
|
width: 100%;
|
|
border-bottom: 1px solid #eee;
|
|
margin-bottom: @default-padding/2;
|
|
|
|
.xe-icon,
|
|
.xe-label {
|
|
display: table-cell;
|
|
vertical-align: top;
|
|
padding-bottom: @base-margin;
|
|
}
|
|
|
|
.xe-icon {
|
|
width: 1%;
|
|
|
|
i {
|
|
display: block;
|
|
line-height: 1;
|
|
font-size: 28px;
|
|
}
|
|
}
|
|
|
|
.xe-label {
|
|
padding-left: @default-padding/2;
|
|
|
|
span, strong {
|
|
display: block;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
span {
|
|
font-size: @font-size-small;
|
|
.opacity(.8);
|
|
}
|
|
|
|
strong {
|
|
font-size: @font-size-base + 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
.xe-body {
|
|
padding-top: @base-padding/2;
|
|
padding-bottom: @base-padding;
|
|
|
|
label {
|
|
.user-select(none);
|
|
|
|
> span {
|
|
position: relative;
|
|
display: inline-block;
|
|
color: darken(@main-text-color, 10%);
|
|
}
|
|
}
|
|
|
|
li {
|
|
margin: 2px 0;
|
|
|
|
&.done {
|
|
|
|
label {
|
|
|
|
> span {
|
|
.opacity(0.5);
|
|
//color: @main-text-color;
|
|
|
|
&:after {
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 9px;
|
|
height: 1px;
|
|
background: darken(@main-text-color, 5%);
|
|
content: '';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.xe-todo-list-primary { .xenon-todo-list-variant(@brand-primary; #fff); }
|
|
&.xe-todo-list-success { .xenon-todo-list-variant(@brand-success; #fff); }
|
|
&.xe-todo-list-warning { .xenon-todo-list-variant(@brand-warning; #fff); }
|
|
&.xe-todo-list-danger { .xenon-todo-list-variant(@brand-danger; #fff); }
|
|
&.xe-todo-list-info { .xenon-todo-list-variant(@brand-info; #fff); }
|
|
&.xe-todo-list-secondary { .xenon-todo-list-variant(@secondary-color; #fff); }
|
|
&.xe-todo-list-turquoise { .xenon-todo-list-variant(@xe-turquoise; #fff); }
|
|
&.xe-todo-list-pink { .xenon-todo-list-variant(@xe-pink; #fff); }
|
|
&.xe-todo-list-red { .xenon-todo-list-variant(@xe-red; #fff); }
|
|
&.xe-todo-list-blue { .xenon-todo-list-variant(@xe-blue; #fff); }
|
|
&.xe-todo-list-purple { .xenon-todo-list-variant(@xe-purple; #fff); }
|
|
&.xe-todo-list-yellow { .xenon-todo-list-variant(@xe-yellow; #fff); }
|
|
}
|
|
|
|
|
|
// Status Update
|
|
&.xe-status-update {
|
|
background: #55acee;
|
|
color: #fff;
|
|
margin-bottom: @widget-spacing;
|
|
padding: @default-padding;
|
|
padding-bottom: @base-margin;
|
|
|
|
.xe-header {
|
|
display: table;
|
|
width: 100%;
|
|
|
|
.xe-icon,
|
|
.xe-nav {
|
|
display: table-cell;
|
|
vertical-align: top;
|
|
color: #fff;
|
|
padding-bottom: @base-margin;
|
|
}
|
|
|
|
.xe-icon {
|
|
|
|
i {
|
|
font-size: 48px;
|
|
}
|
|
}
|
|
|
|
.xe-nav {
|
|
text-align: right;
|
|
|
|
a {
|
|
position: relative;
|
|
margin-right: -@base-padding;
|
|
margin-top: -@base-padding;
|
|
color: #fff;
|
|
padding: 0 @base-padding - 2;
|
|
display: inline-block;
|
|
line-height: 32px;
|
|
//&:extend(.transall);
|
|
|
|
&:hover {
|
|
background: fade(#fff, 10%);
|
|
}
|
|
|
|
+ a {
|
|
margin-left: @base-padding;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.xe-body {
|
|
|
|
li {
|
|
display: none !important;
|
|
|
|
.status-date {
|
|
display: block;
|
|
font-size: @font-size-base + 3;
|
|
.opacity(.5);
|
|
padding-bottom: @base-padding;
|
|
}
|
|
|
|
p {
|
|
font-size: @font-size-base + 1;
|
|
color: #fff;
|
|
.opacity(.8);
|
|
}
|
|
|
|
&.active {
|
|
display: block !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.xe-footer {
|
|
text-transform: uppercase;
|
|
font-size: @font-size-small - 1;
|
|
padding-top: @default-padding/2;
|
|
|
|
a {
|
|
color: #fff;
|
|
.opacity(.8);
|
|
|
|
&:hover {
|
|
.opacity(1);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.xe-status-update-facebook { .xenon-status-update-variant(#3b5998); }
|
|
&.xe-status-update-google-plus { .xenon-status-update-variant(#dd4b39); }
|
|
}
|
|
|
|
|
|
// Single News
|
|
&.xe-single-news {
|
|
margin-bottom: @widget-spacing;
|
|
position: relative;
|
|
|
|
.xe-image {
|
|
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.xe-gradient {
|
|
position: absolute;
|
|
left: 0; right: 0; top: 0; bottom: 0;
|
|
.background-image(linear-gradient(to top, #000 0%, fade(#000,5%) 100%));
|
|
&:extend(.transall);
|
|
}
|
|
}
|
|
|
|
.xe-details {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: @base-margin;
|
|
|
|
.category {
|
|
font-size: @font-size-small - 1;
|
|
text-transform: uppercase;
|
|
margin-bottom: @base-padding;
|
|
|
|
a {
|
|
color: #fff;
|
|
.opacity(.5);
|
|
|
|
&:hover {
|
|
.opacity(1);
|
|
}
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
margin: 0;
|
|
padding: 0;
|
|
margin-bottom: @base-padding;
|
|
font-size: @font-size-h3 - 4;
|
|
|
|
a {
|
|
color: #fff;
|
|
.opacity(.8);
|
|
|
|
&:hover {
|
|
.opacity(1);
|
|
}
|
|
}
|
|
}
|
|
|
|
time {
|
|
position: relative;
|
|
display: block;
|
|
color: #fff;
|
|
font-size: @font-size-base;
|
|
margin-bottom: -20px;
|
|
.transition(~"all 350ms cubic-bezier(0.175, 0.885, 0.320, 1.275)");
|
|
.opacity(0);
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
|
|
.xe-details {
|
|
|
|
time {
|
|
margin-bottom: 0;
|
|
.opacity(.7);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Conversations
|
|
&.xe-conversations {
|
|
position: relative;
|
|
background: #fff;
|
|
margin-bottom: @widget-spacing;
|
|
padding: @default-padding;
|
|
|
|
.xe-bg-icon {
|
|
position: absolute;
|
|
right: @base-margin;
|
|
top: @base-margin;
|
|
|
|
i {
|
|
font-size: 80px;
|
|
display: block;
|
|
line-height: 1;
|
|
.opacity(.1);
|
|
}
|
|
}
|
|
|
|
.xe-header {
|
|
display: table;
|
|
width: 100%;
|
|
border-bottom: 1px solid #eee;
|
|
|
|
.xe-icon,
|
|
.xe-label {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
padding-bottom: @base-margin;
|
|
}
|
|
|
|
.xe-icon {
|
|
width: 1%;
|
|
|
|
i {
|
|
display: block;
|
|
line-height: 1;
|
|
font-size: 37px;
|
|
}
|
|
}
|
|
|
|
.xe-label {
|
|
padding-left: @base-padding;
|
|
|
|
h3 {
|
|
display: block;
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
small {
|
|
padding-top: @base-padding/2;
|
|
font-size: @font-size-base;
|
|
display: block;
|
|
.opacity(.5);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.xe-body {
|
|
border-bottom: 1px solid #eee;
|
|
|
|
.xe-user-img {
|
|
float: left;
|
|
display: block;
|
|
padding-right: @base-padding;
|
|
}
|
|
|
|
.xe-comment-entry {
|
|
display: table;
|
|
width: 100%;
|
|
|
|
.xe-user-img,
|
|
.xe-comment {
|
|
display: table-cell;
|
|
vertical-align: top;
|
|
padding-top: @base-padding;
|
|
padding-bottom: @base-padding;
|
|
}
|
|
|
|
.xe-user-img {
|
|
|
|
img {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.xe-comment {
|
|
width: 99%;
|
|
padding-left: @base-padding/2 + 5;
|
|
|
|
.xe-user-name {
|
|
display: block;
|
|
margin-bottom: @base-padding/2;
|
|
|
|
&:hover strong {
|
|
color: darken(@main-text-color, 10%);
|
|
}
|
|
}
|
|
|
|
p {
|
|
font-size: @font-size-small;
|
|
}
|
|
}
|
|
}
|
|
|
|
ul {
|
|
|
|
> li {
|
|
margin: @base-padding 0;
|
|
border-bottom: 1px solid #eee;
|
|
|
|
&:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.xe-footer {
|
|
|
|
a {
|
|
margin-top: @base-margin;
|
|
display: block;
|
|
font-size: @font-size-small - 1;
|
|
color: darken(@main-text-color, 10%);
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
|
|
&:hover {
|
|
color: darken(@main-text-color, 20%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Weather
|
|
&.xe-weather {
|
|
position: relative;
|
|
background: #459ec4;
|
|
color: #fff;
|
|
overflow: hidden;
|
|
margin-bottom: @widget-spacing;
|
|
&:extend(.clearfix all);
|
|
|
|
.xe-background {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
|
|
img {
|
|
display: block;
|
|
line-height: 1;
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
&.xe-background-animated {
|
|
left: -10%;
|
|
top: -20%;
|
|
|
|
img {
|
|
width: 120%;
|
|
.animation(weatherBgMove 10s infinite linear);
|
|
.animation-direction(alternate);
|
|
}
|
|
|
|
.keyframes(~"weatherBgMove, 0% { left: 0%; } 50% { left: 10%; } 100% { left: 0%; }");
|
|
}
|
|
|
|
@media screen and (max-width: @screen-sm){
|
|
top: auto;
|
|
bottom: 0;
|
|
|
|
&.xe-background-animated {
|
|
top: auto;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
@weekdays-width: 35%;
|
|
|
|
.xe-current-day {
|
|
position: absolute;
|
|
z-index: 2;
|
|
right: @weekdays-width;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
padding: @default-padding;
|
|
|
|
.xe-now {
|
|
margin-bottom: @base-margin;
|
|
&:extend(.clearfix all);
|
|
|
|
.xe-temperature {
|
|
display: table;
|
|
float: left;
|
|
|
|
.xe-icon,
|
|
.xe-label {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.xe-icon {
|
|
|
|
i {
|
|
display: block;
|
|
line-height: 1;
|
|
font-size: 35px;
|
|
}
|
|
}
|
|
|
|
.xe-label {
|
|
padding-left: @base-padding;
|
|
line-height: 1;
|
|
text-transform: uppercase;
|
|
color: fade(#fff, 80%);
|
|
font-size: @font-size-small - 1;
|
|
|
|
strong {
|
|
display: block;
|
|
padding-top: 2px;
|
|
font-size: @font-size-h3;
|
|
line-height: 1;
|
|
color: #fff;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
.xe-location {
|
|
float: right;
|
|
text-align: right;
|
|
|
|
h4 {
|
|
margin: 0;
|
|
padding-bottom: @base-padding/2;
|
|
color: fade(#fff, 95%);
|
|
}
|
|
|
|
time {
|
|
color: fade(#fff, 80%);
|
|
font-size: @font-size-small;
|
|
}
|
|
}
|
|
}
|
|
|
|
.xe-forecast {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 0 @default-padding;
|
|
padding-bottom: @default-padding;
|
|
|
|
ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: table;
|
|
width: 100%;
|
|
|
|
> li {
|
|
position: relative;
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
width: 1%;
|
|
|
|
&:after {
|
|
content: '';
|
|
display: block;
|
|
width: 1px;
|
|
top: 32px;
|
|
left: 0;
|
|
bottom: 0;
|
|
background: fade(#fff, 25%);
|
|
position: absolute;
|
|
}
|
|
|
|
&:first-child:after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.xe-forecast-entry {
|
|
text-align: center;
|
|
|
|
time {
|
|
display: inline-block;
|
|
background: fade(#000, 15%);
|
|
padding: 5px 5px;
|
|
line-height: 1;
|
|
color: fade(#fff, 70%);
|
|
font-size: @font-size-small - 1;
|
|
&:extend(.transall);
|
|
}
|
|
|
|
.xe-icon {
|
|
|
|
i {
|
|
display: block;
|
|
line-height: 42px;
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
|
|
.xe-temp {
|
|
display: block;
|
|
font-weight: normal;
|
|
font-size: @font-size-base + 1;
|
|
color: fade(#fff, 85%);
|
|
}
|
|
|
|
&:hover {
|
|
|
|
time,
|
|
.xe-temp {
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
@media screen and (max-width: @screen-sm) {
|
|
position: relative;
|
|
width: 100%;
|
|
|
|
.xe-forecast {
|
|
position: relative;
|
|
margin-top: 90px;
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.xe-weekdays {
|
|
float: right;
|
|
position: relative;
|
|
z-index: 2;
|
|
background: fade(#000, 5%);
|
|
padding: @default-padding/2 @default-padding;
|
|
width: @weekdays-width;
|
|
|
|
ul {
|
|
|
|
> li {
|
|
position: relative;
|
|
|
|
&:after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
right: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
height: 1px;
|
|
background: fade(#fff, 25%);
|
|
}
|
|
|
|
&:last-child:after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.xe-weekday-forecast {
|
|
display: table;
|
|
width: 100%;
|
|
cursor: default;
|
|
|
|
.xe-temp,
|
|
.xe-day,
|
|
.xe-icon {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
padding: @default-padding/2 0;
|
|
}
|
|
|
|
.xe-temp {
|
|
width: 20%;
|
|
font-size: 14px;
|
|
color: fade(#fff, 50%);
|
|
&:extend(.transall);
|
|
}
|
|
|
|
.xe-icon {
|
|
text-align: right;
|
|
font-size: 20px;
|
|
|
|
i {
|
|
display: block;
|
|
line-height: 1;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
|
|
.xe-temp {
|
|
color: fade(#fff, 95%);
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: @screen-sm) {
|
|
float: none;
|
|
width: 100%;
|
|
|
|
.xe-weekday-forecast {
|
|
|
|
.xe-temp {
|
|
width: 10%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Map
|
|
&.xe-map-stats {
|
|
background: #385868;
|
|
color: #fff;
|
|
margin-bottom: @widget-spacing;
|
|
display: table;
|
|
width: 100%;
|
|
&:extend(.clearfix all);
|
|
|
|
@details-width: 35%;
|
|
|
|
.xe-map,
|
|
.xe-details {
|
|
display: table-cell;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.xe-map {
|
|
width: 100% - @details-width;
|
|
position: relative;
|
|
|
|
> div {
|
|
@spacing: @default-padding - 10;
|
|
|
|
position: absolute;
|
|
top: @spacing;
|
|
bottom: @spacing;
|
|
left: @spacing;
|
|
right: @spacing;
|
|
|
|
.jvectormap-zoomin,
|
|
.jvectormap-zoomout {
|
|
.size(22px);
|
|
line-height: 22px - 2;
|
|
padding: 0;
|
|
border: 0;
|
|
|
|
&.jvectormap-zoomout {
|
|
top: 32px;
|
|
border-top: 1px solid fade(#ccc, 80%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.xe-details {
|
|
width: @details-width;
|
|
background: fade(#000, 30%);
|
|
padding: @default-padding;
|
|
|
|
> .xe-label {
|
|
|
|
h3 {
|
|
margin: 0;
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
padding-top: @base-padding/2;
|
|
color: fade(#fff, 80%);
|
|
}
|
|
}
|
|
|
|
ul {
|
|
margin-top: @base-margin;
|
|
|
|
li {
|
|
position: relative;
|
|
padding: @base-padding @base-padding/2;
|
|
border-top: 1px solid fade(#fff, 10%);
|
|
}
|
|
}
|
|
|
|
.xe-map-data {
|
|
display: block;
|
|
|
|
.label {
|
|
display: inline-block;
|
|
text-align: center;
|
|
min-width: 30px;
|
|
margin-right: @base-padding/2;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.xe-label {
|
|
font-size: @font-size-base + 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: @screen-sm){
|
|
display: block;
|
|
|
|
.xe-map {
|
|
min-height: 300px;
|
|
}
|
|
|
|
.xe-map,
|
|
.xe-details {
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.xe-counter-variant(@bg-color; @text-color)
|
|
{
|
|
.xe-icon {
|
|
|
|
i {
|
|
background-color: @bg-color;
|
|
color: @text-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.xe-counter-block-variant(@bg-color; @text-color)
|
|
{
|
|
background: @bg-color;
|
|
|
|
.xe-upper {
|
|
background: @bg-color;
|
|
|
|
.xe-icon i {
|
|
background-color: @bg-color;
|
|
color: @text-color;
|
|
}
|
|
|
|
.xe-label {
|
|
|
|
.num {
|
|
color: @text-color;
|
|
}
|
|
|
|
span {
|
|
color: fade(@text-color, 70%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.xe-lower {
|
|
|
|
.border {
|
|
background: fade(@text-color, 50%);
|
|
}
|
|
|
|
span {
|
|
color: fade(@text-color, 70%);
|
|
}
|
|
|
|
strong {
|
|
color: @text-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.xenon-progress-counter-variant(@bg-color; @text-color)
|
|
{
|
|
background-color: @bg-color;
|
|
|
|
.xe-background {
|
|
color: @text-color;
|
|
}
|
|
|
|
.xe-upper {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
.xenon-vertical-counter-variant(@bg-color; @text-color)
|
|
{
|
|
background: @bg-color;
|
|
color: @text-color;
|
|
|
|
.xe-label {
|
|
|
|
span {
|
|
color: fade(@text-color, 95%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.xenon-todo-list-variant(@bg-color; @text-color)
|
|
{
|
|
@pct: 70%;
|
|
|
|
background: @bg-color;
|
|
color: @text-color;
|
|
|
|
.xe-header {
|
|
border-bottom: 1px solid fade(@text-color, @pct);
|
|
}
|
|
|
|
.xe-body {
|
|
|
|
.cbr-replaced {
|
|
|
|
.cbr-state {
|
|
border: 1px solid fade(@text-color, @pct);
|
|
}
|
|
}
|
|
|
|
label {
|
|
|
|
> span {
|
|
color: @text-color;
|
|
}
|
|
}
|
|
|
|
li {
|
|
|
|
&.done {
|
|
|
|
label {
|
|
|
|
> span {
|
|
.opacity(.8);
|
|
|
|
&:after {
|
|
background: fade(@text-color, @pct);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.xe-footer {
|
|
|
|
.form-control {
|
|
background: transparent;
|
|
border: 1px solid fade(@text-color, @pct);
|
|
color: @text-color;
|
|
.placeholder(fade(@text-color, 90%));
|
|
}
|
|
}
|
|
}
|
|
|
|
.xenon-status-update-variant(@bg-color)
|
|
{
|
|
background-color: @bg-color;
|
|
} |