993 lines
17 KiB
SCSS
993 lines
17 KiB
SCSS
body{
|
|
// prevent marking text
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.pf-body{
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
a{
|
|
color: $teal;
|
|
will-change: color;
|
|
text-decoration: none;
|
|
@include transition( color 0.08s ease-out );
|
|
|
|
&:hover{
|
|
color: $teal-lightest;
|
|
text-decoration: none;
|
|
}
|
|
|
|
&:focus{
|
|
color: $teal;
|
|
}
|
|
}
|
|
|
|
// emphasized text
|
|
em{
|
|
|
|
font-style: italic;
|
|
|
|
&.pf-brand{
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
|
|
.pf-font-capitalize{
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.no-padding{
|
|
padding: 0 !important;
|
|
}
|
|
|
|
// help elements ====================================================
|
|
.pf-help{
|
|
cursor: pointer; // fallback
|
|
cursor: help;
|
|
@extend .txt-color;
|
|
@extend .txt-color-gray;
|
|
@include transition( color 0.08s ease-out );
|
|
|
|
&:hover{
|
|
@extend .txt-color-blue;
|
|
}
|
|
}
|
|
|
|
// icon buttons =====================================================
|
|
.pf-dialog-icon-button{
|
|
cursor: pointer;
|
|
margin-top: 2px;
|
|
@include transition(color 0.15s ease-out);
|
|
|
|
&:not(.collapsed), &:hover{
|
|
color: $orange;
|
|
}
|
|
}
|
|
|
|
.pf-module-icon-button{
|
|
cursor: pointer;
|
|
@include transition(color 0.15s ease-out);
|
|
|
|
&:hover{
|
|
color: $orange;
|
|
}
|
|
|
|
}
|
|
|
|
// alert messages ===================================================
|
|
.alert{
|
|
will-change: opacity, transform;
|
|
}
|
|
|
|
// form fields custom styles ========================================
|
|
.editable-input{
|
|
optgroup[label]{
|
|
background-color: $gray;
|
|
color: $gray-light;
|
|
|
|
option{
|
|
background-color: $gray-dark;
|
|
color: $gray-lighter;
|
|
font-family: $font-family-monospace;
|
|
}
|
|
}
|
|
}
|
|
select:active, select:hover {
|
|
outline: none
|
|
}
|
|
|
|
/* make it red instead (with with same width and style) */
|
|
select:active, select:hover {
|
|
outline-color: red
|
|
}
|
|
|
|
// select2 custom template ==========================================
|
|
|
|
.select2-results{
|
|
[class*="col-"]{
|
|
line-height: 22px;
|
|
}
|
|
}
|
|
|
|
.select2{
|
|
::-webkit-search-cancel-button{
|
|
-webkit-appearance: none !important;
|
|
}
|
|
|
|
.select2-selection__choice__remove{
|
|
float: left;
|
|
}
|
|
|
|
.select2-selection--multiple{
|
|
input{
|
|
box-shadow: none !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// global datatable styles ==========================================
|
|
.dataTable{
|
|
|
|
th{
|
|
&.pf-table-image-cell,
|
|
&.pf-table-image-small-cell{
|
|
// no padding for image content
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
&.sorting,
|
|
&.sorting_asc,
|
|
&.sorting_desc{
|
|
// prevent overlapping of text and sort icon (if text-right align)
|
|
padding-right: 18px !important;
|
|
}
|
|
}
|
|
|
|
// "special" column styles
|
|
td{
|
|
&.pf-table-action-cell{
|
|
cursor: pointer;
|
|
}
|
|
|
|
&.pf-table-image-cell{
|
|
// no padding for image content
|
|
padding: 0 !important;
|
|
|
|
img{
|
|
width: 26px; // smaller image (default 32)
|
|
border-left: 1px solid $gray;
|
|
border-right: 1px solid $gray;
|
|
}
|
|
}
|
|
|
|
&.pf-table-image-small-cell{
|
|
img{
|
|
width: 24px; // smaller image (default 32)
|
|
// overwrite "default" border for image cells
|
|
border-left: 1px solid transparent;
|
|
border-right: 1px solid transparent;
|
|
}
|
|
}
|
|
|
|
&.pf-table-counter-cell{
|
|
color: $gray-light;
|
|
|
|
.pf-digit-counter-small{
|
|
width: 20px;
|
|
display: inline-block;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.pf-digit-counter-large{
|
|
width: 26px;
|
|
display: inline-block;
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// table styles =====================================================
|
|
table{
|
|
tr{
|
|
&.collapsing{
|
|
@include transition( height .01s ease );
|
|
}
|
|
|
|
&.collapse{
|
|
&.in{
|
|
display: table-row !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// table icon toolbar
|
|
.pf-table-tools{
|
|
height: 45px;
|
|
|
|
.btn:not(:last-child){
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
.pf-table-tools-action{
|
|
will-change: height, opacity, display;
|
|
opacity: 0; // triggered by js
|
|
display: none; // triggered by js
|
|
height: 0;
|
|
visibility: hidden;
|
|
}
|
|
|
|
// laoding indicator overlay =====================================
|
|
.pf-loading-overlay{
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
opacity: 0;
|
|
background: $gray-darker;
|
|
z-index: 1060;
|
|
@include border-radius(5px);
|
|
|
|
.pf-loading-overlay-wrapper{
|
|
width: 25px;
|
|
height: 25px;
|
|
margin: auto;
|
|
text-align: center;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
|
|
i{
|
|
padding: 3px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// navbar li ====================================================
|
|
.navbar-nav {
|
|
li{
|
|
&:hover, &.active{
|
|
|
|
&:before{
|
|
top: -4px;
|
|
opacity: 1;
|
|
}
|
|
|
|
}
|
|
|
|
&:before{
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 2px;
|
|
background-color: $green;
|
|
top: 0;
|
|
opacity: 0;
|
|
will-change: opacity, top;
|
|
@include transition( top 0.15s ease-out, opacity 0.15s ease-out );
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
.pf-navbar-version-info{
|
|
cursor: pointer;
|
|
}
|
|
|
|
// page menu =====================================================
|
|
.pf-site{
|
|
will-change: transform;
|
|
}
|
|
|
|
.sb-slidebar{
|
|
will-change: transform;
|
|
}
|
|
|
|
.sb-left{
|
|
.list-group-item{
|
|
@include box-shadow(inset -10px 0px 5px -5px rgba(0,0,0,0.4));
|
|
}
|
|
}
|
|
|
|
.sb-right{
|
|
.list-group-item{
|
|
@include box-shadow(inset 10px 0px 5px -5px rgba(0,0,0,0.4));
|
|
}
|
|
}
|
|
|
|
// custom scrollbars =============================================
|
|
.mCSB_container, .mCSB_dragger{
|
|
will-change: top, left;
|
|
}
|
|
|
|
// log types =====================================================
|
|
.pf-log-info{
|
|
@extend .txt-color-green;
|
|
}
|
|
|
|
.pf-log-warning{
|
|
@extend .txt-color-warning;
|
|
}
|
|
|
|
.pf-log-error{
|
|
@extend .txt-color-red;
|
|
}
|
|
|
|
// map types =====================================================
|
|
.pf-map-type-private{
|
|
color: $indigo;
|
|
}
|
|
|
|
.pf-map-type-corporation{
|
|
color: $green;
|
|
}
|
|
|
|
.pf-map-type-alliance{
|
|
color: $blue;
|
|
}
|
|
|
|
.pf-map-type-global{
|
|
color: $teal-lighter;
|
|
}
|
|
|
|
// maps module ===================================================
|
|
#pf-map-module{
|
|
margin: 20px 10px 0 10px;
|
|
|
|
// Tabs (colored)
|
|
#pf-map-tabs {
|
|
|
|
.pf-map-type-tab-default{
|
|
border-top: 2px solid transparent;
|
|
}
|
|
|
|
.pf-map-type-tab-private{
|
|
border-top: 2px solid $indigo;
|
|
}
|
|
|
|
.pf-map-type-tab-corporation{
|
|
border-top: 2px solid $green;
|
|
}
|
|
|
|
.pf-map-type-tab-alliance{
|
|
border-top: 2px solid $blue;
|
|
}
|
|
|
|
.pf-map-type-tab-global{
|
|
border-top: 2px solid $teal-lighter;
|
|
}
|
|
|
|
.pf-map-tab-icon{
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.pf-map-tab-shared-icon{
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Tab Content Body Grid ========================================
|
|
.pf-map-content-row{
|
|
margin-top: 10px;
|
|
padding-bottom: 40px; // space for footer
|
|
|
|
// all modules within a row
|
|
.pf-module{
|
|
font-family: $font-family-bold;
|
|
background: rgba($gray, 0.3);
|
|
padding: 10px;
|
|
width: 100%;
|
|
margin-bottom: 10px;
|
|
will-change: height, transform, opacity;
|
|
overflow: hidden;
|
|
@include border-radius(5px);
|
|
|
|
&:before{
|
|
content:'';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
border-style: solid;
|
|
border-width: 0 0 8px 8px;
|
|
border-color: transparent transparent transparent $gray;
|
|
cursor: pointer;
|
|
}
|
|
|
|
// all labels in a module
|
|
.label{
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
// dynamic areas as child of a module
|
|
.pf-dynamic-area{
|
|
background: rgba($gray-darker, 0.4);
|
|
}
|
|
|
|
h5{
|
|
// icons in headline
|
|
.pf-module-icon-button{
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// User status =================================================
|
|
.pf-user-status{
|
|
color: $red-darker;
|
|
}
|
|
|
|
.pf-user-status-corp{
|
|
color: $green;
|
|
}
|
|
|
|
.pf-user-status-ally{
|
|
color: $blue;
|
|
}
|
|
|
|
.pf-user-status-own{
|
|
color: $indigo;
|
|
}
|
|
|
|
// WH effects ==================================================
|
|
|
|
.pf-system-effect{
|
|
display: none; // if effect is active it will be overwritten
|
|
cursor: default;
|
|
color: $gray-lighter;
|
|
}
|
|
|
|
.pf-system-effect-magnetar{
|
|
color: $wh-color-magnetar;
|
|
display: inline-block;
|
|
}
|
|
|
|
.pf-system-effect-redgiant{
|
|
color: $wh-color-redgiant;
|
|
display: inline-block;
|
|
}
|
|
|
|
.pf-system-effect-pulsar{
|
|
color: $wh-color-pulsar;
|
|
display: inline-block;
|
|
}
|
|
|
|
.pf-system-effect-wolfrayet{
|
|
color: $wh-color-wolfrayet;
|
|
display: inline-block;
|
|
}
|
|
|
|
.pf-system-effect-cataclysmic{
|
|
color: $wh-color-cataclysmic;
|
|
display: inline-block;
|
|
}
|
|
|
|
.pf-system-effect-blackhole{
|
|
color: $wh-color-blackhole;
|
|
display: inline-block;
|
|
}
|
|
|
|
// system info status ================================================
|
|
.pf-system-info-rally{
|
|
.pf-system-head{
|
|
background-color: $pink-darker;
|
|
|
|
@include background-image(linear-gradient(-45deg,
|
|
$purple-dark 25%,
|
|
transparent 25%,
|
|
transparent 50%,
|
|
$purple-dark 50%,
|
|
$purple-dark 75%,
|
|
transparent 75%,
|
|
transparent));
|
|
background-size:25px 25px;
|
|
-webkit-animation:move 3s linear infinite;
|
|
-moz-animation:move 3s linear infinite;
|
|
-ms-animation:move 3s linear infinite;
|
|
animation:move 3s linear infinite;
|
|
}
|
|
}
|
|
|
|
|
|
// system security status ============================================
|
|
|
|
.pf-system-security-0-0{
|
|
color: $system-color-sec-0-0;
|
|
}
|
|
|
|
.pf-system-security-0-1{
|
|
color: $system-color-sec-0-1;
|
|
}
|
|
|
|
.pf-system-security-0-2{
|
|
color: $system-color-sec-0-2;
|
|
}
|
|
|
|
.pf-system-security-0-3{
|
|
color: $system-color-sec-0-3;
|
|
}
|
|
|
|
.pf-system-security-0-4{
|
|
color: $system-color-sec-0-4;
|
|
}
|
|
|
|
.pf-system-security-0-5{
|
|
color: $system-color-sec-0-5;
|
|
}
|
|
|
|
.pf-system-security-0-6{
|
|
color: $system-color-sec-0-6;
|
|
}
|
|
|
|
.pf-system-security-0-7{
|
|
color: $system-color-sec-0-7;
|
|
}
|
|
|
|
.pf-system-security-0-8{
|
|
color: $system-color-sec-0-8;
|
|
}
|
|
|
|
.pf-system-security-0-9{
|
|
color: $system-color-sec-0-9;
|
|
}
|
|
|
|
.pf-system-security-1-0{
|
|
color: $system-color-sec-1-0;
|
|
}
|
|
|
|
// system security level =============================================
|
|
|
|
.pf-system-sec{
|
|
margin-right: 5px;
|
|
cursor: -moz-grab;
|
|
cursor: -webkit-grab;
|
|
}
|
|
|
|
.pf-system-sec-highSec{
|
|
color: $green;
|
|
}
|
|
|
|
.pf-system-sec-lowSec{
|
|
color: $orange;
|
|
}
|
|
|
|
.pf-system-sec-nullSec{
|
|
color: $red;
|
|
}
|
|
|
|
.pf-system-sec-high{
|
|
color: $red;
|
|
}
|
|
|
|
.pf-system-sec-mid{
|
|
color: $orange;
|
|
}
|
|
|
|
.pf-system-sec-low{
|
|
color: $blue;
|
|
}
|
|
|
|
.pf-system-sec-unknown{
|
|
color: $indigo;
|
|
}
|
|
|
|
// system status ======================================================
|
|
|
|
.pf-system-status-friendly{
|
|
border-color: $blue !important;
|
|
color: $blue;
|
|
}
|
|
|
|
.pf-system-status-occupied{
|
|
border-color: $orange !important;
|
|
color: $orange;
|
|
}
|
|
|
|
.pf-system-status-hostile{
|
|
border-color: $red !important;
|
|
color: $red;
|
|
}
|
|
|
|
.pf-system-status-empty{
|
|
border-color: $green !important;
|
|
color: $green;
|
|
}
|
|
|
|
.pf-system-status-unscanned{
|
|
border-color: $teal-lighter !important;
|
|
color: $teal-lighter;
|
|
}
|
|
|
|
// system status within label
|
|
.pf-system-info-status-label{
|
|
background-color: $gray-light;
|
|
color: $black;
|
|
will-change: background-color;
|
|
@include transition( background-color 0.5s ease-out );
|
|
|
|
&.pf-system-status-friendly{
|
|
background-color: $blue;
|
|
}
|
|
|
|
&.pf-system-status-occupied{
|
|
background-color: $orange;
|
|
}
|
|
|
|
&.pf-system-status-hostile{
|
|
background-color: $red;
|
|
}
|
|
|
|
&.pf-system-status-empty{
|
|
background-color: $green;
|
|
}
|
|
|
|
&.pf-system-status-unscanned{
|
|
background-color: $teal-lighter;
|
|
}
|
|
}
|
|
|
|
// system effect info dialog ==========================================
|
|
.pf-system-effect-dialog-wrapper, .pf-jump-info-dialog{
|
|
.table{
|
|
margin: 15px 0;
|
|
|
|
td{
|
|
text-transform: capitalize;
|
|
}
|
|
}
|
|
}
|
|
|
|
// "fake connection" classes for the map manual
|
|
.pf-fake-connection{
|
|
box-sizing: content-box;
|
|
display: inline-block;
|
|
width: 70px;
|
|
height: 4px;
|
|
margin-right: 5px;
|
|
border-top: 2px solid $gray-light;
|
|
border-bottom: 2px solid $gray-light;
|
|
background-color: #3c3f41;
|
|
position: relative;
|
|
font-family: $font-family-sans-serif;
|
|
|
|
&.pf-map-connection-stargate{
|
|
background-color: $indigo-darkest;
|
|
border-color: $gray-light;
|
|
}
|
|
|
|
&.pf-map-connection-jumpbridge{
|
|
background-color: $teal-lightest;
|
|
border-color: $gray;
|
|
background: repeating-linear-gradient(
|
|
to right,
|
|
$teal-lightest,
|
|
$teal-lightest 10px,
|
|
$gray 10px,
|
|
$gray 20px
|
|
);
|
|
}
|
|
|
|
&.pf-map-connection-wh-eol{
|
|
border-color: $pink-dark;
|
|
}
|
|
|
|
&.pf-map-connection-wh-reduced{
|
|
background-color: $orange;
|
|
}
|
|
|
|
&.pf-map-connection-wh-critical{
|
|
background-color: $red-darker;
|
|
}
|
|
|
|
&.pf-map-connection-frig{
|
|
border-style: dashed;
|
|
border-left: none;
|
|
border-right: none;
|
|
|
|
&:after{
|
|
content: 'frig';
|
|
background-color: $orange;
|
|
color: $gray-darkest;
|
|
padding: 0px 3px;
|
|
position: absolute;
|
|
left: 25px;
|
|
top: -6px;
|
|
font-family: $font-family-bold;
|
|
@include border-radius(3px);
|
|
}
|
|
}
|
|
|
|
&.pf-map-connection-preserve-mass{
|
|
&:after{
|
|
content: 'save mass';
|
|
background-color: $red-darker;
|
|
color: $gray-lightest;
|
|
padding: 0px 3px;
|
|
position: absolute;
|
|
left: 9px;
|
|
top: -6px;
|
|
font-family: $font-family-bold;
|
|
@include border-radius(3px);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
// global tooltip settings ======================================
|
|
.tooltip-inner{
|
|
color: $green;
|
|
background-color: $gray;
|
|
font-family: $font-family-bold;
|
|
padding: 5px 5px;
|
|
@include border-radius(3px);
|
|
@include box-shadow(0 6px 12px rgba(0,0,0,.4));
|
|
}
|
|
|
|
|
|
.modal{
|
|
|
|
// tooltips within modals
|
|
.tooltip{
|
|
// higher z-index
|
|
z-index: $zindex-modal + 10;
|
|
|
|
.tooltip-inner{
|
|
color: $gray-dark;
|
|
background-color: $gray-lighter;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.tooltip.top .tooltip-arrow{
|
|
border-top-color: $gray-light;
|
|
}
|
|
|
|
.tooltip.right .tooltip-arrow{
|
|
border-right-color: $gray-light;
|
|
}
|
|
|
|
.tooltip.bottom .tooltip-arrow{
|
|
border-bottom-color: $gray-light;
|
|
}
|
|
|
|
.tooltip.left .tooltip-arrow{
|
|
border-left-color: $gray-light;
|
|
}
|
|
|
|
// global popover settings ======================================
|
|
.popover{
|
|
|
|
// on top of modals even if they are attached to <body>
|
|
z-index: $zindex-modal + 10;
|
|
|
|
// image in popover
|
|
img{
|
|
@include border-radius(5px);
|
|
}
|
|
|
|
h4{
|
|
color: $gray-lighter;
|
|
}
|
|
|
|
// table in pop popover
|
|
table{
|
|
color: $gray-lighter;
|
|
font-family: $font-family-bold;
|
|
line-height: 16px;
|
|
font-size: 11px;
|
|
|
|
td{
|
|
padding: 0 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// dynamic area (e.g. for loading animation) ====================
|
|
.pf-dynamic-area{
|
|
padding: 10px;
|
|
min-height: 100px;
|
|
position: relative;
|
|
background-color: $gray-dark;
|
|
overflow: hidden;
|
|
@include border-radius(5px);
|
|
|
|
.dl-horizontal{
|
|
margin-bottom: 0;
|
|
|
|
dd{
|
|
min-width: 100px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// svg logo =====================================================
|
|
#pf-logo-wrapper{
|
|
display: block; // remove default height
|
|
}
|
|
|
|
// header =======================================================
|
|
#pf-head{
|
|
margin-bottom: 0px;
|
|
|
|
a{
|
|
@include transition( color 0.15s ease-out );
|
|
will-change: color;
|
|
|
|
&:focus{
|
|
color: $teal;
|
|
|
|
img{
|
|
border-color: $gray;
|
|
}
|
|
}
|
|
|
|
&:hover{
|
|
text-decoration: none;
|
|
|
|
.badge{
|
|
color: $teal-lightest;
|
|
}
|
|
|
|
img{
|
|
border-color: $teal-lighter;
|
|
}
|
|
}
|
|
}
|
|
|
|
i{
|
|
margin-right: 2px;
|
|
}
|
|
|
|
// brand description (smaller text)
|
|
.pf-brand-desc{
|
|
margin: 6px 10px 0 90px;
|
|
width: 180px;
|
|
}
|
|
|
|
.pf-head-menu{
|
|
|
|
//overwrite some default styles
|
|
padding: 3px 10px;
|
|
line-height: 24px;
|
|
|
|
.pf-head-menu-logo{
|
|
width: 24px;
|
|
height: 24px;
|
|
display: inline-block;
|
|
float: left;
|
|
}
|
|
|
|
}
|
|
|
|
.badge{
|
|
background-color: $gray;
|
|
color: $gray-lighter;
|
|
}
|
|
|
|
|
|
.pf-head-user-character, .pf-head-user-ship{
|
|
opacity: 0; // triggered by js
|
|
visibility: hidden;
|
|
}
|
|
|
|
.pf-head-active-user, .pf-head-current-location{
|
|
display: none; // triggered by js
|
|
|
|
.badge{
|
|
@include transition( color 0.3s ease-out );
|
|
}
|
|
}
|
|
|
|
.pf-head-user-character-image, .pf-head-user-ship-image{
|
|
display: inline-block;
|
|
margin-top: -6px;
|
|
margin-bottom: -6px;
|
|
width: 27px;
|
|
border: 1px solid $gray;
|
|
margin-right: 3px;
|
|
@include transition( border-color 0.15s ease-out );
|
|
will-change: border-color;
|
|
}
|
|
|
|
.pf-head-program-status{
|
|
cursor: pointer;
|
|
}
|
|
|
|
.navbar-text{
|
|
min-width: 60px; // fixes a load-delay issue for "toggle" map-tracking
|
|
}
|
|
|
|
// tooltips header
|
|
.tooltip{
|
|
.tooltip-inner{
|
|
color: $gray-lighter;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.pf-head{
|
|
@include box-shadow(0 6px 12px rgba(0,0,0,.4));
|
|
}
|
|
|
|
// footer =======================================================
|
|
#pf-footer{
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
margin: 0;
|
|
background: rgba($gray, 0.3);
|
|
|
|
a{
|
|
font-family: $font-family-bold;
|
|
color: $teal-dark;
|
|
|
|
&:hover{
|
|
color: $teal;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*
|
|
Animate the stripes
|
|
*/
|
|
@-webkit-keyframes move{
|
|
0% {
|
|
background-position: 0 0;
|
|
}
|
|
100% {
|
|
background-position: 50px 50px;
|
|
}
|
|
}
|
|
@-moz-keyframes move{
|
|
0% {
|
|
background-position: 0 0;
|
|
}
|
|
100% {
|
|
background-position: 50px 50px;
|
|
}
|
|
}
|
|
@-ms-keyframes move{
|
|
0% {
|
|
background-position: 0 0;
|
|
}
|
|
100% {
|
|
background-position: 50px 50px;
|
|
}
|
|
}
|
|
@keyframes move{
|
|
0% {
|
|
background-position: 0 0;
|
|
}
|
|
100% {
|
|
background-position: 50px 50px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|