diff options
Diffstat (limited to 'frontend/themes/base.less')
| -rw-r--r-- | frontend/themes/base.less | 264 |
1 files changed, 264 insertions, 0 deletions
diff --git a/frontend/themes/base.less b/frontend/themes/base.less new file mode 100644 index 00000000..f9fa139e --- /dev/null +++ b/frontend/themes/base.less @@ -0,0 +1,264 @@ +@import "../../node_modules/bootstrap/less/bootstrap"; +@import "../angelFont/angelFont.css"; + +body { + padding-top: 50px; +} + +.footer a { + color: @text-muted; +} + +.first { + clear: both; + margin-top: 30px; +} + +.text-big { + display: block; + font-size: 30px; + line-height: 30px; + margin: 0px; +} + +.stats { + .make-md-column(3); + .make-xs-column(6); + font-size: 20px; + height: 150px; + text-align: center; + + .number { + font-size: 80px; + font-weight: 200; + } + @media (max-width: @screen-md) { + font-size: inherit; + .number { + font-size: 40px; + } + } +} + +.stats-danger { + color: @brand-danger; +} + +.stats-warning { + color: @brand-warning; +} + +.stats-success { + color: @brand-success; +} + +.dashboard-panel { + position: relative; + font-size: 20px; + color: @headings-color; + + .panel-link { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + text-decoration: none; /* No underlines on the link */ + z-index: 10; /* Places the link above everything else in the div */ + background-color: @brand-primary; /* Fix to make div clickable in IE */ + opacity: 0; /* Fix to make div clickable in IE */ + filter: alpha(opacity=1); /* Fix to make div clickable in IE */ + } + + .panel-link:hover { + opacity: 0.3; + } +} + +.panel-primary .panel-heading a { + color: @panel-primary-text; +} + +.panel-default .panel-heading a { + color: @panel-default-text; +} + +.panel-info .panel-heading a { + color: @panel-info-text; +} + +.panel-success .panel-heading a { + color: @panel-success-text; +} + +.panel-warning .panel-heading a { + color: @panel-warning-text; +} + +.panel-danger .panel-heading a { + color: @panel-danger-text; +} + +.selection .checkbox { + display: block; +} + +.shift-calendar { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-itmes: stretch; + width: 100%; + + .lane { + background: @table-bg-accent; + flex-grow: 1; + min-width: 280px; + width: 280px; + flex-shrink: 1; + + .header { + background: @panel-bg; + border-bottom: 1px solid @table-border-color; + height: 30px; + padding: 5px 5px 5px 16px; + } + + .tick { + height: 30px; + border-top: 1px solid darken(@table-bg-accent, 2%); + } + + .tick.hour { + border-top: 2px solid @table-border-color; + font-size: 0.9em; + padding-left: 5px; + } + + .tick.day { + border-top: 2px solid @brand-primary; + font-size: 0.9em; + padding-left: 5px; + } + } + + .lane.time { + border-right: 1px solid @table-border-color; + flex-grow: 0; + min-width: 50px; + width: 50px; + flex-shrink: 0; + } + + .shift { + margin: 0 5px 5px 0; + overflow: hidden; + } +} + +.space-top { + margin-top: 15px; +} + +.column_duration { + text-align: right; +} + +.messages { + &:focus { + outline: none; + } + a:focus { + outline: none; + } +} + +.messages span.text-danger { + animation: pulse 1s infinite; + -webkit-animation: pulse 1s infinite; + -moz-animation: pulse 1s infinite; +} + +@keyframes pulse { + 0% { + transform: rotate(0deg); + } + 10% { + transform: rotate(5deg) translateY(-2px); + } + 20% { + transform: rotate(-5deg); + } + 30% { + transform: rotate(5deg) translateY(-2px);; + } + 40% { + transform: rotate(-5deg); + } + 50% { + transform: rotate(0deg) translateY(-2px); + } + 75% { + transform: rotate(0deg) translateY(0px); + } +} + +@-webkit-keyframes pulse { + 0% { + transform: rotate(0deg); + } + 10% { + transform: rotate(5deg) translateY(-2px); + } + 20% { + transform: rotate(-5deg); + } + 30% { + transform: rotate(5deg) translateY(-2px); + } + 40% { + transform: rotate(-5deg); + } + 50% { + transform: rotate(0deg) translateY(-2px); + } + 75% { + transform: rotate(0deg) translateY(0px); + } +} + +@-moz-keyframes pulse { + 0% { + transform: rotate(0deg); + } + 10% { + transform: rotate(5deg) translateY(-2px); + } + 20% { + transform: rotate(-5deg); + } + 30% { + transform: rotate(5deg) translateY(-2px); + } + 40% { + transform: rotate(-5deg); + } + 50% { + transform: rotate(0deg) translateY(-2px); + } + 75% { + transform: rotate(0deg) translateY(0px); + } +} + +@media (max-width: 525px) { + .col-xxs-12 { + float: none; + width: 100%; + + position: relative; left: 0; right: 0; + min-height: 1px; + padding-right: 15px; + padding-left: 15px; + } +} |