active_administration 0.0.2 → 0.0.3

data/app/assets/stylesheets/active_administration/streamer.less

@@ -0,0 +1,250 @@
+.streamer {
+    position: relative;
+    display: block;
+    width: 100%;
+    overflow: hidden;
+}
+
+.streamer {
+    .meter {
+        height: 25px;
+        width: auto;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        display: block;
+        overflow: hidden;
+
+        li {
+            display: block;
+            float: left;
+            width: 213px;
+            padding: 2px 3px;
+            background: url("/images/meter-210.png") top left repeat-x;
+
+            em {
+                font-size: 10px;
+                font-style: normal;
+            }
+        }
+    }
+
+    .streams {
+        width: 142px;
+        padding-top: 25px;
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: 2;
+        background-color: rgba(255,255,255, 1);
+
+        .streams-title {
+            position: absolute;
+            top: 0;
+        }
+
+        .stream {
+            position: relative;
+            display: block;
+            width: 100%;
+            height: 75px;
+            margin: 0 2px 2px 0;
+            padding: 5px;
+            color: @white;
+            cursor: pointer;
+
+            .stream-title {
+                #font > .segoe-light;
+                font-size: 12px;
+                line-height: 12px;
+                br {
+
+                }
+            }
+
+            .stream-number {
+                position: absolute;
+                left: 5px;
+                bottom: 5px;
+                #font > .segoe-light;
+                font-size: 11px;
+                line-height: 11px;
+            }
+
+            &:hover {
+
+            }
+        }
+    }
+
+    .events {
+        padding-left: 143px;
+        overflow: hidden;
+        height: 100%;
+        min-height: 100%;
+        overflow-x: scroll;
+
+        .double {
+            width: @eventWidth * 2 + @eventMargin;
+        }
+
+        .triple {
+            width: @eventWidth * 3 + @eventMargin * 2;
+        }
+
+        .quadro {
+            width: @eventWidth * 4 + @eventMargin * 3;
+        }
+
+        .events-area {
+            height: 100%;
+            min-height: 100%;
+            overflow: hidden;
+            .clearfix;
+        }
+
+        .events-grid {
+            height: 100%;
+            min-height: 100%;
+            .clearfix;
+        }
+
+        .event-group {
+            height: @eventHeight * 6 + @eventMargin * 5;
+            //min-height: 100%;
+            min-width: @eventWidth;
+            margin: 0 @eventMargin @eventMargin 0;
+            float: left;
+        }
+
+        .event-super {
+            height: 100%;
+            min-height: 100%;
+            .border;
+        }
+
+        .event-stream {
+            height: 75px;
+
+            .event {
+                min-width: @eventWidth;
+                height: @eventHeight;
+                float: left;
+                display: block;
+                margin: 0 @eventMargin @eventMargin 0;
+                cursor: pointer;
+                position: relative;
+                overflow: hidden;
+                .border;
+
+                &:last-child {
+                    margin-right: 0;
+                }
+
+                &.event-disable {
+                    opacity: .2;
+                }
+
+                .event-content {
+                    width: 100%;
+                    height: 100%;
+                    padding: 0;
+                    margin: 0;
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    overflow: hidden;
+                    display: none;
+
+                    &:first-child {
+                        display: block;
+                    }
+                }
+
+                .event-content-logo {
+                    display: block;
+                    float: left;
+                    margin-right: 5px;
+                    padding: 3px;
+
+                    .icon {
+                        position: relative;
+                        width: 39px;
+                        height: 39px;
+                        margin-bottom: 1px;
+                        img {
+                            width: 100%;
+                            height: 100%;
+                        }
+                    }
+
+                    .time {
+                        position: relative;
+                        width: 39px;
+                        padding: 8px 4px;
+                        #font > .segoe;
+                        font-size: 12px;
+                        color: @white;
+                        line-height: 12px;
+                    }
+                }
+
+                .event-content-data {
+                    display: block;
+                    padding: 0;
+                    margin: 0;
+                    position: relative;
+                    margin-left: 50px;
+
+                    .title {
+                        position: relative;
+                        #font > .segoe-bold;
+                        font-size: 14px;
+                        line-height: 14px;
+                        margin: 3px 0 0;
+                        padding: 0;
+                    }
+
+                    .subtitle {
+                        position: relative;
+                        #font > .segoe;
+                        font-size: 10px;
+                        line-height: 10px;
+                        margin: 0;
+                        padding: 0;
+                        margin-bottom: 10px;
+                    }
+
+                    .remark {
+                        position: absolute;
+                        display: block;
+                        top: 36px;
+                        margin-right: 4px;
+                        #font > .segoe;
+                        font-size: 11px;
+                        line-height: 11px;
+                        //font-style: italic;
+                        color: @grayLight;
+                    }
+                }
+
+                &:hover {
+                    border-color: @grayLight;
+                }
+
+                &.selected {
+                    .event-content-logo {
+                        .time {
+                            //padding: 5px 4px;
+                        }
+                    }
+                    #element > .selected;
+                    border-width: 1px;
+                    &:before {
+                        right: 3px;
+                    }
+                }
+            }
+        }
+    }
+}

data/app/assets/stylesheets/active_administration/tab-control.less

@@ -0,0 +1,79 @@
+.tab-control {
+    .tabs {
+        .unstyled;
+        .clearfix;
+        .no-margin;
+
+        & > li {
+            background-color: @white;
+            display: block;
+            float: left;
+            margin-left: 5px;
+            position: relative;
+
+            & > a {
+                border: 1px @grayLighter solid;
+                display: block;
+                float: left;
+                padding: 5px 10px;
+                z-index: 10;
+                top: 0;
+                left: 0;
+                color: inherit;
+                background-color: @grayLighter;
+            }
+
+            &.active {
+                a {
+                    border-bottom-color: @white ;
+                    background-color: @white ;
+                    border-top: 2px @red solid;
+                }
+
+                &:hover {
+                    a {
+                        background-color: @white ;
+                        color: @dark;
+                    }
+                }
+            }
+
+            &:hover {
+                a {
+                    background-color: darken(@grayLighter, 10%);
+                    color: @white;
+                }
+            }
+
+            &.place-right {
+                float: right;
+                margin-right: 5px;
+                margin-left: auto;
+            }
+        }
+
+        &.no-spaces {
+            & > li {
+                margin-left: 0;
+            }
+        }
+        z-index: 2;
+    }
+
+    .frames {
+        z-index: 1;
+        border: 1px @grayLighter solid;
+        margin-top: -1px;
+
+        .frame {
+            display: none;
+
+            &:first-child {
+                display: block;
+            }
+        }
+    }
+    .frame {
+        padding: @unitSize;
+    }
+}

data/app/assets/stylesheets/active_administration/tables.less

@@ -0,0 +1,170 @@
+table {
+    max-width: 100%;
+    background-color: @white;
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+.table {
+    width: 100%;
+    margin-bottom: @baseLineHeight;
+
+    th, td {
+        padding: @tableCellPadding;
+        font-size: 14px;
+        line-height: @baseLineHeight;
+        vertical-align: top;
+        border-bottom: 1px @tableBorderColor solid;
+
+        &[class*="span"] {
+            display: table-cell !important;
+            float: none !important;
+            margin: 0;
+        }
+    }
+
+    th {
+        //text-align: left;
+    }
+
+    thead {
+        tr:last-child {
+        }
+
+        th {
+            vertical-align: bottom;
+        }
+
+        th, td {
+            border-bottom: 1px solid #111111;
+        }
+    }
+
+    tbody {
+        tr {
+            &:last-child {
+                td {
+                    border-bottom: 0;
+                }
+            }
+        }
+    }
+
+    tbody + tbody {
+        border-top: 2px solid @tableBorderColor;
+    }
+
+    tfoot {
+        th, td {
+            border-top: 1px solid #111111;
+        }
+    }
+
+    .table {
+        background-color: darken(@white, 25%);
+    }
+
+    &.condensed {
+        th, td {
+            padding: 4px 5px;
+            .input-control {
+                margin: 0;
+            }
+        }
+    }
+
+    &.super-condensed {
+        th, td {
+            padding: 2px;
+            .input-control {
+                margin: 0;
+            }
+        }
+    }
+
+    &.striped {
+        tbody tr:nth-child(odd) {
+            background: @tableOddColor;
+        }
+    }
+
+    &.bordered {
+        border: 1px @tableBorderColor solid;
+        border-left: 0;
+        td, th {
+            border-left: 1px @tableBorderColor solid;
+            border-bottom: 1px @tableBorderColor solid;
+        }
+    }
+
+    &.no-border {
+        td, th {
+            border: 0;
+        }
+    }
+
+    &.border {
+        border: 1px @tableBorderColor solid !important;
+        td, th {
+            //border-color: transparent;
+        }
+    }
+
+    &.hovered {
+        //border-collapse: separate;
+        tbody {
+            tr {
+                &:hover {
+                    background-color: rgba(28, 183, 236, 0.10);
+                    td:first-child {
+                        //border-left: 1px #1c98cc solid ;
+                    }
+                    td:last-child {
+                        //border-right: 1px #1c98cc solid ;
+                    }
+                    td {
+                        //border-top: 1px #1c98cc solid ;
+                        //border-bottom: 1px #1c98cc solid;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.table {
+    tr {
+        &.success {
+            .bg-green;
+        }
+        &.error {
+            .bg-red;
+        }
+        &.warning {
+            .bg-orange;
+        }
+        &.info {
+            .bg-lightBlue;
+        }
+
+        &.info, &.warning, &.error, &.success {
+            td, td * {
+                .fg-white;
+            }
+        }
+
+        &.selected {
+            background-color: rgba(28, 183, 236, 0.10);
+            td:first-child {
+                //border-left: 1px #1c98cc solid;
+            }
+            td:last-child {
+                //border-right: 1px #1c98cc solid;
+            }
+            td {
+                //border-top: 1px #1c98cc solid;
+                //border-bottom: 1px #1c98cc solid;
+            }
+        }
+    }
+}