summaryrefslogtreecommitdiff
path: root/frontend/themes/base.less
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/themes/base.less')
-rw-r--r--frontend/themes/base.less264
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;
+ }
+}