3.0 source code

OfficeWeb/apps/common/main/resources/less/about.less

@@ -0,0 +1,76 @@
+.about-dlg {
+    .asc-about-office {
+        background-repeat: no-repeat;
+        .background-ximage('@{common-image-path}/about/OnlyOffice.png', '@{common-image-path}/about/OnlyOffice@2x.png', 420px);
+
+        width: 340px;
+        height: 55px;
+        margin-bottom: 5px;
+    }
+
+    .asc-about-header {
+        margin: 0 30px;
+        font: 12px Tahoma;
+        letter-spacing: 1px;
+        color: #666666;
+        white-space: nowrap;
+    }
+
+    .asc-about-version {
+        font: 15px Tahoma;
+        color: #b6b6b6;
+    }
+
+    .asc-about-companyname {
+        font: bold 15px Tahoma;
+        color: #333;
+    }
+
+    label {
+        &.asc-about-desc,
+        &.asc-about-desc-name,
+        &.asc-about-lic {
+            font: 12px Tahoma;
+            color: #333;
+        }
+
+        &.asc-about-desc-name {
+            color: #666666;
+            white-space: pre;
+        }
+
+        &.asc-about-lic {
+            font-weight: bold;
+        }
+
+    }
+
+    a {
+        font: 12px Tahoma;
+        color: #333;
+    }
+
+    .separator.horizontal {
+        width: 100%;
+
+        &.short {
+            width: 220px;
+
+            &.left {
+                float: right;
+            }
+        }
+    }
+
+    .padding-small {
+        padding-bottom: 10px;
+    }
+
+    .padding-large {
+        padding-bottom: 40px;
+    }
+
+    .margin-bottom {
+        margin-bottom: 20px;
+    }
+}

OfficeWeb/apps/common/main/resources/less/advanced-settings-window.less

@@ -0,0 +1,50 @@
+.advanced-settings-dlg {
+    .body {
+        height: auto;
+        top: 34px;
+
+        & > div {
+            width: 100%;
+        }
+
+        .box > div {
+            display: inline-block;
+            height: 100%;
+        }
+
+        .menu-panel {
+            width: 160px;
+            padding-top: 2px;
+
+            .btn-category {
+                text-align: left;
+                padding: 8px 2px 8px 12px;
+                line-height: normal;
+                height: auto;
+            }
+        }
+
+        .content-panel {
+            vertical-align: top;
+            padding: 5px 15px 0 10px;
+
+            .inner-content {
+                padding-left: 10px;
+                padding-right: 10px;
+            }
+        }
+    }
+
+    .footer {
+        padding-top: 15px;
+
+        &.center {
+            text-align: center;
+        }
+
+        &.justify {
+            padding-left: 30px;
+            padding-right: 30px;
+        }
+    }
+}

OfficeWeb/apps/common/main/resources/less/asc-mixins.less

@@ -0,0 +1,106 @@
+*, *:before, *:after {
+    -moz-user-select: none;
+}
+
+:focus {
+    outline: none;
+}
+
+.gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) {
+    background: @color;
+    background: -webkit-gradient(linear,
+    left bottom,
+    left top,
+    color-stop(0, @start),
+    color-stop(1, @stop));
+    background: -ms-linear-gradient(bottom,
+        @start,
+        @stop);
+    background: -moz-linear-gradient(center bottom,
+        @start 0%,
+        @stop 100%);
+    background: -o-linear-gradient(@stop,
+        @start);
+    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop, @start));
+}
+
+.box-shadow(@arguments) {
+    -webkit-box-shadow: @arguments;
+    -moz-box-shadow: @arguments;
+    box-shadow: @arguments;
+}
+
+.box-inner-shadow(@arguments) {
+    -webkit-box-shadow: inset @arguments;
+    -moz-box-shadow: inset @arguments;
+    box-shadow: inset @arguments;
+}
+
+.border-radius(@radius: 2px) {
+    -webkit-border-radius: @radius;
+    -moz-border-radius: @radius;
+    border-radius: @radius;
+}
+
+.position(@type: absolute, @left: 0, @top: 0, @right: 0, @bottom: 0) {
+    position: @type;
+    left: @left;
+    top: @top;
+    right: @right;
+    bottom: @bottom;
+}
+
+.fontsize(@value) {
+    font-size: @value;
+}
+
+// User select
+.user-select(@select: none) {
+    -webkit-user-select: @select;
+       -moz-user-select: @select;
+        -ms-user-select: @select;
+         -o-user-select: @select;
+            user-select: @select;
+}
+
+.toolbar-btn-icon(@icon-class, @index, @icon-size, @offset-x: 0, @offset-y: 0) {
+                      .@{icon-class},
+    button.over     > .@{icon-class} {background-position: 0 (-1 * (@index * @icon-size) - @offset-y);}
+    .btn-group.open > .@{icon-class},
+    button.active   > .@{icon-class},
+    button:active   > .@{icon-class} {background-position: (-1 * @icon-size - @offset-x) (-1 * @index * @icon-size - @offset-y);}
+    button.disabled > .@{icon-class} {background-position: (-2 * @icon-size - @offset-x) (-1 * @index * @icon-size - @offset-y);}
+}
+
+.menu-btn-icon(@icon-class, @index, @icon-size) {
+                                .menu-item-icon.@{icon-class} {background-position: -0*@icon-size -@index*@icon-size;}
+//    li:hover      > a >         .menu-item-icon.@{icon-class} {background-position: -1*@icon-size -@index*@icon-size;}
+    li            > a.checked > .menu-item-icon.@{icon-class} {background-position: -2*@icon-size -@index*@icon-size;}
+    li.disabled   > a >         .menu-item-icon.@{icon-class} {background-position: -3*@icon-size -@index*@icon-size;}
+}
+
+.options-btn-icon(@icon-class, @index, @icon-size) {
+                  .@{icon-class} {background-position: -0*@icon-size -@index*@icon-size;}
+button.over     > .@{icon-class} {background-position: -1*@icon-size -@index*@icon-size;}
+.btn-group.open > .@{icon-class},
+button.active   > .@{icon-class},
+button:active   > .@{icon-class} {background-position: -2*@icon-size -@index*@icon-size;}
+button.disabled > .@{icon-class} {background-position: -3*@icon-size -@index*@icon-size;}
+}
+
+.background-ximage(@image, @image2x, @w: auto, @h: auto) {
+    background-image: e(%("url(%s)",@image));
+
+    @media
+    only screen and (-webkit-min-device-pixel-ratio: 2),
+    only screen and (min-resolution: 2dppx),
+    only screen and (min-resolution: 192dpi) {
+        background-image: e(%("url(%s)",@image2x));
+        background-size: @w @h;
+
+        @media (-webkit-min-device-pixel-ratio: 0) {
+            background-image: e(%("-webkit-image-set(url(%s) 1x, url(%s) 2x)", @image, @image2x));
+            background-size: auto;
+        }
+    }
+}

OfficeWeb/apps/common/main/resources/less/buttons.less

@@ -0,0 +1,465 @@
+.btn {
+    border-radius: 1px;
+
+    .btnsize(@value) {
+        min-width: @value;
+        height: @value;
+        line-height: @value - 2px;
+    }
+
+    &.small {
+        .btnsize(20px);
+    }
+
+    &.normal {
+        height: 22px;
+    }
+
+    &.large {
+        .btnsize(31px);
+    }
+
+    &.huge {
+        .btnsize(37px);
+    }
+
+    &.x-huge {
+        .btnsize(45px);
+    }
+
+    &[disabled] {
+        opacity: 1;
+    }
+    
+    &:focus {
+        outline: 0;
+        outline-offset: 0;
+    }
+
+    &:active, &.active {
+        -webkit-box-shadow: none;
+        box-shadow: none;
+    }
+
+    .caret {
+        width: 7px;
+        height: 7px;
+        border: 0;
+        background-repeat: no-repeat;
+        background-position: @arrow-small-offset-x @arrow-small-offset-y;
+        position: relative;
+        .background-ximage('@{common-image-path}/@{common-controls}', '@{common-image-path}/@{common-controls2x}', 100px)
+    }
+
+    //&:active,
+    &:active:not(.disabled),
+    &.active:not(.disabled){
+        .caret {
+            background-position: @arrow-small-offset-x - 7px @arrow-small-offset-y;
+        }
+    }
+}
+
+.btn-toolbar {
+    display: inline-block;
+    position: relative;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    .border-radius(1px);
+    background-color: transparent;
+
+    &:before,
+    &:after {
+        content: "";
+        display: none;
+    }
+
+    &:focus {
+        outline: 0;
+        outline-offset: 0;
+    }
+
+    &:hover,
+    .over {
+        outline: 0;
+        background-color: @secondary;
+    }
+
+
+    &:active:not(.disabled),
+    &.active:not(.disabled) {
+        outline: 0;
+        color: lighten(@gray-lighter, 10%);
+        background-color: @primary;
+    }
+
+    span.btn-icon {
+        .position();
+        padding: 0;
+        margin: 0;
+        position: absolute;
+        background-repeat: no-repeat;
+        .background-ximage('@{app-image-path}/toolbar-menu.png', '@{app-image-path}/toolbar-menu@2x.png', 60px);
+    }
+
+    // Normal size
+    // ------------------------
+    &.btn-toolbar-default {
+        .btn.small;
+
+        &.dropdown-toggle {
+            min-width: 7px;
+            padding-left: 1px;
+            padding-right: 1px;
+        }
+
+        span.btn-icon {
+            width: 20px !important;
+            height: 20px;
+            line-height: 20px;
+        }
+    }
+
+    // Large size
+    // ------------------------
+    &.btn-toolbar-large {
+        .btn.large;
+
+        &.dropdown-toggle {
+            min-width: 7px;
+            padding-left: 1px;
+            padding-right: 1px;
+        }
+
+        span.btn-icon {
+            width: 30px !important;
+            height: 30px;
+            line-height: 20px;
+        }
+    }
+
+    // Button has color line
+    // ------------------------
+    .btn-color-value-line {
+        pointer-events: none;
+        position: absolute;
+        left: 3px;
+        bottom: 2px;
+        width: 14px;
+        height: 3px;
+        background-color: red;
+    }
+}
+
+.btn-category {
+    .btn.large;
+    width: 100%;
+    padding: 0;
+    display: block;
+    position: relative;
+    .border-radius(0);
+    background-color: transparent;
+    font-weight: bold;
+
+    &:hover,
+    .over {
+        outline: 0;
+        background-color: @secondary;
+    }
+
+    &:active,
+    &.active {
+        outline: 0;
+        background-color: @primary;
+        color: #fff;
+    }
+
+    span.btn-icon {
+        display: inline-block;
+        position: relative;
+        width: 20px;
+        height: 20px;
+        line-height: 20px;
+        background-repeat: no-repeat;
+        .background-ximage('@{app-image-path}/toolbar-menu.png', '@{app-image-path}/toolbar-menu@2x.png', 60px)
+    }
+
+    &[disabled],
+    &.disabled {
+        color: #000;
+        opacity: 0.4;
+    }
+}
+
+// The clickable button for toggling the menu
+// Remove the gradient and set the same inset shadow as the :active state
+.btn-group {
+    > .btn-toolbar {
+        float: none;
+    }
+
+    &.open {
+        > .btn-toolbar {
+            &.btn-toolbar-default,
+            &.btn-toolbar-large {
+                color: lighten(@gray-lighter, 10%);
+
+                // Show no shadow for `.btn-link` since it has no other button styles.
+                &.btn-link {
+                    .box-shadow(none);
+                }
+            }
+        }
+
+        .dropdown-toggle {
+            .box-shadow(none);
+        }
+    }
+
+    &.over {
+        > button {
+            outline: 0;
+            background-color: @secondary;
+        }
+    }
+
+    &.open,
+    &.over {
+        &.split {
+            > button:first-child {
+                z-index: 3;
+                .box-inner-shadow(-1px 0 0 0 @gray-light);
+            }
+        }
+    }
+
+
+    &:not(.split) {
+        .btn-toolbar {
+            &.btn-toolbar-default {
+                &.dropdown-toggle {
+                    width: 100%;
+                    min-width: 28px;
+
+                    .caret {
+//                        float: right;
+                        position: relative;
+                        right: -8px;
+                    }
+                }
+
+                &.btn-text-value {
+                    .caret {
+                        margin: 6px 3px 6px 0;
+                    }
+                    .caption {
+                        vertical-align: middle
+                    }
+                    &[disabled],
+                    &.disabled {
+                        opacity: 0.65;
+                    }
+                }
+            }
+
+            &.btn-toolbar-large {
+                &.dropdown-toggle {
+                    width: 100%;
+                    min-width: 40px;
+
+                    .caret {
+                        float: right;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.btn-color {
+    padding: 2px;
+    border:1px solid @input-border;
+    .border-radius(@border-radius-small);
+
+    span {
+        display:block;
+        border:1px solid @input-border;
+        background-color: transparent;
+    }
+
+    &,
+    &:hover,
+    .over,
+    &:active,
+    &.active {
+        outline: 0;
+        background: #ffffff  !important;
+        .box-shadow(none)  !important;
+    }
+
+    &[disabled],
+    &.disabled {
+        opacity: 0.35;
+    }
+
+    .transparent {
+        .background-ximage('@{common-image-path}/hsbcolorpicker/transparency_39x15.png', '@{common-image-path}/hsbcolorpicker/transparency_39x15@2x.png', 39px);
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-position: center center;
+    }
+}
+
+.btn-options {
+    padding: 0;
+    margin:0;
+    border: 0 none;
+    .box-shadow(none);
+    background-color: transparent;
+
+    span.btn-icon {
+        position: relative;
+        min-width: inherit;
+        height: inherit;
+        line-height: inherit;
+        padding: 0;
+        margin: 0;
+        display: inline-block;
+        background-repeat: no-repeat;
+    }
+
+    &:hover,
+    .over,
+    &:active,
+    &.active {
+        outline: 0;
+    }
+}
+
+.btn-text-default {
+    width: 75px;
+    height: 22px;
+    background: @input-bg;
+    border: 1px solid @input-border;
+    .border-radius(@border-radius-small);
+
+    &:hover,
+    .over {
+        outline: 0;
+        background-color: @secondary !important;
+    }
+
+    &:active,
+    &.active {
+        outline: 0;
+        background-color: @primary !important;
+        color: white;
+    }
+}
+
+.btn-icon-default {
+    width: 45px;
+    height: 22px;
+    background: @input-bg;
+    border: 1px solid @input-border;
+    .border-radius(@border-radius-small);
+
+    span.btn-icon {
+        width: 28px;
+        padding: 0;
+        margin: 0;
+        position: relative;
+        display: inline-block;
+        background-repeat: no-repeat;
+    }
+
+    &:hover,
+    .over {
+        outline: 0;
+        background-color: @secondary !important;
+    }
+
+    &:active,
+    &.active {
+        outline: 0;
+        background-color: @primary !important;
+    }
+
+    &[disabled],
+    &.disabled {
+        opacity: 0.65;
+    }
+}
+
+.btn-large-dataview {
+    display: inline-block;
+    width: 72px;
+    height: 58px;
+    padding: 2px;
+    margin:0;
+    box-shadow: none;
+    background-color: @input-bg;
+    border: 1px solid @input-border;
+    .border-radius(@border-radius-small);
+
+    span.btn-icon {
+        display: inline-block;
+        .btn.btnsize(52px);
+        padding: 0;
+        margin-right: 3px;
+        background-color: transparent;
+        background-repeat: no-repeat;
+        border: 1px solid @input-border;
+        position: relative;
+    }
+
+    &:hover,
+    .over,
+    &:active,
+    &.active {
+        outline: 0;
+        background-color: @input-bg !important;
+    }
+
+    &:active:not(.disabled),
+    &.active:not(.disabled) {
+        .caret {
+            background-position: @arrow-small-offset-x @arrow-small-offset-y;
+        }
+    }
+
+    &[disabled],
+    &.disabled {
+        opacity: 0.65;
+    }
+}
+
+// Dialog buttons
+// ------------------------
+
+.dlg-btn {
+    font-weight: bold;
+    width: 86px;
+    color: @gray-deep;
+    background-color: @secondary;
+
+    &:hover,
+    &.hover {
+        background-color: @secondary-hover;
+    }
+
+    &.primary {
+        color: #fff;
+        background-color: @primary;
+
+        &:hover,
+        &.hover {
+            background-color: @primary-hover;
+        }
+    }
+
+    &[disabled] {
+        opacity: 0.65;
+    }
+}

OfficeWeb/apps/common/main/resources/less/chat.less

@@ -0,0 +1,139 @@
+#chat-box {
+    display: table;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-collapse: collapse;
+
+    > div {
+        display: table-row;
+
+        &:not(:last-child) {
+            border-bottom: 1px solid @gray-dark;
+        }
+    }
+
+    #chat-title {
+        label {
+            padding: 18px 20px;
+            font-size: @font-size-large;
+        }
+    }
+
+    #chat-users {
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        height: 70px;
+        padding: 5px 0;
+        overflow: hidden;
+
+        .ps-scrollbar-y-rail {
+            margin-top: 5px;
+            margin-bottom: 5px;
+            right: 4px !important;
+        }
+
+        ul {
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+
+            li {
+                list-style: none;
+                padding: 2px 0 3px 20px;
+                overflow: hidden;
+
+                &.offline {
+                    display: none;
+                }
+            }
+        }
+
+        .color {
+            width: 12px;
+            height: 12px;
+            display: inline-block;
+            vertical-align: middle;
+            border: 1px solid @gray-dark;
+        }
+
+        .name {
+            display: block;
+            padding-left: 16px;
+            margin-top: -1px;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            font-weight: bold;
+            vertical-align: middle;
+
+        }
+    }
+
+    #chat-messages {
+        position: absolute;
+        left: 0;
+        top: 70px;
+        right: 0;
+        bottom: 110px;
+        overflow: hidden;
+
+        .ps-scrollbar-y-rail {
+            margin-top: 5px;
+            margin-bottom: 5px;
+            right: 4px !important;
+        }
+
+        ul {
+            margin: 0;
+            padding: 0;
+
+            li {
+                list-style: none;
+
+                padding: 5px 10px 8px 20px;
+                white-space: pre-wrap;
+                white-space: -moz-pre-wrap;
+                white-space: -o-pre-wrap;
+                word-wrap: break-word;
+
+                .user {
+                    font-weight: bold;
+                    white-space: nowrap;
+                    .user-select(text);
+                }
+
+                .message {
+                    word-wrap: break-word;
+                    width: 100%;
+                   .user-select(text);
+
+                    &.service {
+                        text-align: center;
+                        color: #CECECE;
+                        text-shadow: 0 1px 0 #ffffff;
+                        padding-right: 20px;
+                    }
+                }
+            }
+        }
+    }
+
+    #chat-options {
+        height: 110px;
+
+        #chat-options-ct {
+            padding: 10px 20px;
+
+            textarea {
+                .user-select(text);
+                width: 100%;
+                height: 62px;
+                resize: none;
+                margin-bottom: 5px;
+                border: 1px solid @gray-dark;
+            }
+        }
+    }
+}

OfficeWeb/apps/common/main/resources/less/checkbox.less

@@ -0,0 +1,42 @@
+.checkbox-indeterminate {
+    padding-left: 22px;
+    margin-bottom: 0;
+    .font-size-normal();
+    font-weight: normal;
+
+    input[type=button] {
+        .background-ximage('@{common-image-path}/@{common-controls}', '@{common-image-path}/@{common-controls2x}', 100px);
+        background-color: transparent;
+        background-repeat: no-repeat;
+        background-position: @checkbox-offset-x @checkbox-offset-y;
+        border: none;
+        margin-left: -22px;
+        margin-right: 6px;
+        padding-bottom: 4px;
+        width: 16px;
+        height: 16px;
+        cursor: default;
+        vertical-align: top;
+        margin-top: -1px;
+
+        &.checked {
+            background-position: @checkbox-offset-x @checkbox-offset-y - 16px;
+        }
+
+        &.indeterminate {
+            background-position: @checkbox-offset-x @checkbox-offset-y - 48px;
+        }
+
+        &.disabled {
+            background-position: @checkbox-offset-x - 48px @checkbox-offset-y;
+
+            &.checked {
+                background-position: @checkbox-offset-x - 48px @checkbox-offset-y - 16px;
+            }
+
+            &.indeterminate {
+                background-position: @checkbox-offset-x - 48px @checkbox-offset-y - 48px;
+            }
+        }
+    }
+}

OfficeWeb/apps/common/main/resources/less/colorpalette.less

@@ -0,0 +1,13 @@
+.palette-color {
+    .color-item {
+        float: left;
+        width: 28px;
+        height: 28px;
+        margin: 1px;
+
+        &:hover,
+        &.selected {
+            .box-shadow(0 0 0 1px @primary);
+        }
+    }
+}

OfficeWeb/apps/common/main/resources/less/combo-border-size.less

@@ -0,0 +1,55 @@
+.combo-border-size {
+    .form-control {
+        cursor: pointer;
+        background-color: white;
+
+        &.text {
+            background: white;
+            vertical-align: bottom;
+        }
+
+        &.image {
+            background: ~"url('@{common-image-path}/combo-border-size/BorderSize.png') no-repeat scroll 0 0, white";
+        }
+    }
+
+    li {
+        a {
+            white-space: normal;
+        }
+
+        span {
+            display: inline-block;
+            margin-top: 3px;
+            font-size: 11px;
+            height: 17px;
+        }
+
+        img {
+            width:69px;
+            height:20px;
+            background: ~"url('@{common-image-path}/combo-border-size/BorderSize.png')  0 0";
+        }
+    }
+}
+
+.combo-border-size-editable {
+    li {
+        a {
+            white-space: normal;
+        }
+
+        span {
+            display: inline-block;
+            margin-top: 3px;
+            font-size: 11px;
+            height: 17px;
+        }
+
+        img {
+            width:69px;
+            height:20px;
+            background: ~"url('@{common-image-path}/combo-border-size/BorderSize.png')  0 0";
+        }
+    }
+}

OfficeWeb/apps/common/main/resources/less/combo-dataview.less

@@ -0,0 +1,226 @@
+.combo-dataview(@combo-dataview-button-width: 30px, @combo-dataview-width: 100%, @combo-dataview-height: 46px ) {
+    width: @combo-dataview-width;
+    height: @combo-dataview-height;
+
+    .view {
+        display: inline-block;
+        float: left;
+        overflow: hidden;
+        width: @combo-dataview-width;
+        height: @combo-dataview-height;
+        margin-right: -@combo-dataview-button-width;
+        padding-right: @combo-dataview-button-width;
+        .border-radius(@border-radius-small);
+        border: 1px solid @input-border;
+        background-color: @input-bg;
+
+        .dataview {
+            padding: 1px;
+        }
+    }
+
+    .button {
+        display: inline-block;
+        float: right;
+        width: @combo-dataview-button-width;
+        height: @combo-dataview-height;
+
+        button {
+            .border-left-radius(0);
+            .border-right-radius(@border-radius-small);
+            border: 1px solid @input-border;
+            background-color: @input-bg;
+
+            &.dropdown-toggle {
+                .caret {
+                    width: 7px;
+                    height: 7px;
+                    border: 0;
+                    .background-ximage('@{common-image-path}/@{common-controls}', '@{common-image-path}/@{common-controls2x}', 100px);
+                    background-repeat: no-repeat;
+                    background-position: @arrow-small-offset-x @arrow-small-offset-y;
+                }
+            }
+        }
+    }
+
+    .dropdown-menu {
+        margin: 0;
+        padding: 1px;
+        overflow: hidden;
+    }
+
+    &.disabled {
+        opacity: 0.65;
+
+        .dataview.inner {
+            > div:not(.grouped-data):not(.ps-scrollbar-x-rail):not(.ps-scrollbar-y-rail) {
+                cursor: default;
+            }
+        }
+    }
+}
+
+.combo-styles {
+    .combo-dataview();
+
+    .view {
+        .border-left-radius(0);
+
+        .dataview {
+            height: 46px;
+            padding: 0;
+            margin: -1px 0 0 -1px;
+        }
+    }
+
+    .dataview {
+        &.inner > div:not(.grouped-data):not(.ps-scrollbar-x-rail):not(.ps-scrollbar-y-rail) {
+            padding: 3px;
+            border: 1px solid @gray;
+            .box-shadow(none);
+            margin: 0 -1px -1px 0;
+
+
+            &:hover {
+                .box-inner-shadow(0 0 0 2px @gray);
+            }
+
+            &.selected {
+                .box-inner-shadow(0 0 0 2px @gray-darker);
+            }
+        }
+    }
+
+    &.disabled {
+        .dataview.inner {
+            > div:not(.grouped-data):not(.ps-scrollbar-x-rail):not(.ps-scrollbar-y-rail) {
+                &:hover:not(.selected) {
+                    .box-shadow(none);
+
+                    .style > div {
+                        background-color: transparent;
+                    }
+                }
+            }
+        }
+    }
+
+    .dropdown-menu {
+        box-sizing: content-box;
+        border-color: @gray;
+        padding: 0;
+        border-top-right-radius: 0;
+        border-top-left-radius: 0;
+        border-left: 0 none;
+
+        .dataview {
+            margin-top: -1px;
+        }
+    }
+
+    .style {
+        width: auto;
+        position: relative;
+        border: none;
+        .box-shadow(0 0 0 1px @body-bg);
+
+        > div {
+            background-repeat: no-repeat;
+            background-size: cover;
+        }
+    }
+
+    .button {
+        button {
+            &.dropdown-toggle {
+                padding: 0;
+
+                .caret {
+                    width: 27px;
+                    height: 27px;
+                    .background-ximage('@{common-image-path}/@{common-controls}', '@{common-image-path}/@{common-controls2x}', 100px);
+                    background-position: @arrow-big-offset-x @arrow-big-offset-y;
+                }
+
+                &.active {
+                    .caret {
+                        transform: rotate(180deg);
+                    }
+                }
+            }
+        }
+    }
+
+    .ps-scrollbar-y-rail {
+        margin-top: 2px;
+    }
+};
+
+.combo-template {
+    .combo-dataview(18px, 100%, 64px);
+    .dropdown-menu {
+        padding: 2px;
+    }
+
+    .view {
+        .dataview {
+            padding: 2px;
+        }
+    }
+
+    &.disabled {
+        .dataview.inner {
+            > div:not(.grouped-data):not(.ps-scrollbar-x-rail):not(.ps-scrollbar-y-rail) {
+                &:hover:not(.selected) {
+                    .box-shadow(0 0 0 1px @gray);
+                }
+            }
+        }
+    }
+
+    .ps-scrollbar-y-rail {
+        margin-top: 3px;
+        margin-bottom: 3px;
+        right: 3px !important;
+    }
+};
+
+.combo-pattern {
+    .combo-dataview(15px, 100%, 40px);
+
+    .dataview.inner {
+        & > div:not(.ps-scrollbar-x-rail):not(.ps-scrollbar-y-rail) {
+            margin: 4px 0 4px 4px;
+
+            .box-shadow(none);
+
+            &:hover {
+                .box-shadow(0 0 0 1px @gray);
+            }
+
+            &.selected {
+                .box-shadow(0 0 0 2px @primary);
+            }
+        }
+    }
+
+    &.disabled {
+        .dataview.inner {
+            > div:not(.grouped-data):not(.ps-scrollbar-x-rail):not(.ps-scrollbar-y-rail) {
+                &:hover:not(.selected) {
+                    .box-shadow(none);
+                }
+            }
+        }
+    }
+
+    .dropdown-menu {
+        padding-right: 2px;
+    }
+
+    .ps-scrollbar-y-rail {
+        margin-top: 4px;
+        margin-bottom: 4px;
+    }
+};

OfficeWeb/apps/common/main/resources/less/combobox.less

@@ -0,0 +1,101 @@
+.combobox {
+    display: block;
+
+    &.input-group-sm .btn { .input-sm(); }
+    &.input-group-lg .btn { .input-lg(); }
+    &.input-group-nr > .form-control,
+    &.input-group-nr > .btn {
+        height: @input-height-base;
+        padding:  @padding-base-vertical @padding-base-horizontal;
+        font-size:  @font-size-base;
+        line-height: @line-height-base;
+    }
+
+    &.input-group-nr > .form-control {
+        padding-right: 7px + 2 * @padding-base-horizontal;
+    }
+
+    &.input-group-nr > .btn {
+        &.dropdown-toggle {
+            .caret {
+                width: 7px;
+                height: 7px;
+                border: 0;
+                background-repeat: no-repeat;
+                background-position: @arrow-small-offset-x @arrow-small-offset-y;
+
+                .background-ximage('@{common-image-path}/@{common-controls}', '@{common-image-path}/@{common-controls2x}', 100px)
+            }
+
+            &:active,
+            &.active {
+                .caret {
+                    background-position: @arrow-small-offset-x @arrow-small-offset-y;
+                }
+            }
+        }
+    }
+
+    .form-control {
+        .border-right-radius(0);
+        border-right: 0;
+    }
+
+    .btn {
+        .border-left-radius(0) !important;
+        border-left: 0;
+        border-color: @input-border;
+        background-color: transparent;
+        margin-left: -1px;
+        position: absolute;
+        top: 0;
+        right: 0;
+    }
+
+    .btn-default:hover,
+    .btn-default:focus,
+    .btn-default:active,
+    .btn-default.active,
+    &.open .dropdown-toggle.btn-default {
+        background-color: @input-bg;
+        border-color: @input-border;
+    }
+
+    li {
+        a {
+            white-space: pre;
+        }
+
+        &.selected {
+            background-color: @primary;
+
+            a {
+                color: @dropdown-link-active-color;
+
+                &:hover,
+                &.hover {
+                    background-color: @primary;
+                }
+            }
+        }
+    }
+
+    // Font combobox
+    // ------------------------
+    li {
+        &.selected {
+            img {
+                -webkit-filter: invert(100%) brightness(4);
+                -moz-filter: invert(100%) brightness(4);
+                -ms-filter: invert(100%) brightness(4);
+                -o-filter: invert(100%) brightness(4);
+                filter: invert(100%) brightness(4);
+                filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='invert'><feColorMatrix in='SourceGraphic' type='matrix' values='-.1 0 0 0 1 0 -.1 0 0 1 0 0 -.1 0 1 0 0 0 1 0'/></filter></svg>#invert");
+            }
+        }
+
+        &.divider:first-child {
+            display: none;
+        }
+    }
+}

OfficeWeb/apps/common/main/resources/less/comments-panel.less

@@ -0,0 +1,68 @@
+.comments-panel {
+    display: table;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-collapse: collapse;
+    font-size: 12px;
+    font-family: arial;
+
+    .row {
+        display: table-row;
+    }
+
+    .user-name {
+        color: @gray-darker;
+        font-weight: bold;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        cursor: default;
+        padding: 9px 10px 0 20px;
+        height: 25px;
+    }
+
+    .user-date {
+        color: @gray-darker;
+        font-size: 10px;
+        padding: 0 0 0 20px;
+        height: 12px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        cursor: default;
+    }
+
+    .user-quote {
+        color: @gray-darker;
+        font-style: italic;
+        border-left: 1px solid @gray-darker;
+        margin-left: 20px;
+        margin-top: 3px;
+        padding: 5px 9px 5px 9px;
+        white-space: pre-wrap;
+        cursor: pointer;
+    }
+
+    .user-message {
+       .user-select(text);
+        color: @black;
+        padding: 9px 10px 0 20px;
+        white-space: pre-wrap;
+        word-wrap: break-word;
+        cursor: default;
+    }
+
+    .user-reply {
+        color: @black;
+        border-bottom-width: 1px solid @black;
+        box-sizing: border-box;
+        height: auto;
+        margin-left: 18px;
+        margin-top: 10px;
+        white-space: pre-wrap;
+        width: auto;
+        cursor: pointer;
+    }
+}
+

OfficeWeb/apps/common/main/resources/less/comments.less

@@ -0,0 +1,405 @@
+#comments-box {
+    display: table;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-collapse: collapse;
+    font-size: 12px;
+    font-family: arial;
+
+    > div {
+        display: table-row;
+
+        &:not(:last-child) {
+
+        }
+    }
+
+    #comments-messages {
+        position: absolute;
+        overflow: hidden;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 45px;
+
+        .ps-scrollbar-y-rail {
+            margin-top: 5px;
+            margin-bottom: 5px;
+            right: 4px !important;
+        }
+    }
+
+    #comments-message-ct {
+        border-bottom: 1px solid @gray-dark;
+        position: absolute;
+        top: 55px;
+        bottom: 50px;
+        width: 260px;
+        overflow: hidden;
+        display: inline;
+    }
+
+    #comments-add-link-ct {
+        height: 45px;
+        text-align: center;
+        border-top: 1px solid @gray-dark;
+
+        label {
+            color: @black;
+            font-size: 12px;
+            font-family: arial;
+            line-height: normal;
+            border-bottom: 1px dotted @black;
+            padding-top: 15px;
+            outline: none;
+            height: 32px;
+            cursor: pointer;
+        }
+    }
+
+    #comments-new-comment-ct {
+        border-top: 1px solid @gray-dark;
+        height: 110px;
+        display: none;
+
+        #comments-inner-ct{
+            padding: 10px 20px;
+        }
+
+        textarea {
+           .user-select(text);
+            font-size: 12px;
+            width: 100%;
+            height: 62px;
+            resize: none;
+            margin-bottom: 5px;
+            border: 1px solid @gray-dark;
+        }
+    }
+
+    #comment-btn-cancel {
+        margin-left: 7px;
+    }
+}
+
+.dataview-ct {
+    width: 100%;
+    height: 100%;
+    font-size: 12px;
+    font-family: arial;
+    line-height: normal;
+    position: relative;
+    overflow: hidden;
+
+    textarea {
+        .user-select(text);
+        width: 100%;
+        height: 50px;
+        resize: none;
+        margin-bottom: 5px;
+        border: 1px solid @gray-dark;
+        word-break: break-all;
+        line-height: 15px;
+    }
+
+    .text-select {
+        .user-select(text);
+    }
+
+    .btn-fix {
+        margin-left: -3px;
+    }
+
+    .textarea-fix {
+        margin-left: -3px;
+        margin-top: -1px;
+    }
+
+    .separator-cmt {
+        border-bottom: 1px solid @gray-dark;
+        margin: 20px 0px 0px 0px;
+    }
+
+    .user-comment-item {
+        position: relative;
+        padding: 0px 20px 10px 20px;
+    }
+
+    .user-name {
+        color: @gray-darker;
+        font-weight: bold;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        padding: 9px 0px 0 0px;
+        height: 25px;
+        cursor: default;
+    }
+
+    .user-date {
+        color: @gray-darker;
+        font-size: 11px;
+        white-space: nowrap;
+        padding: 0;
+        height: 12px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        cursor: default;
+    }
+
+    .user-quote {
+        color: @gray-darker;
+        font-style: italic;
+        margin-top: 10px;
+        padding: 0px 5px 5px 5px;
+        border-left: 1px solid #939393;
+        word-break: break-all;
+        white-space: pre-wrap;
+        cursor: pointer;
+    }
+
+    .user-message {
+        .user-select(text);
+        color: @black;
+        padding: 9px 0px 0 0px;
+        white-space: pre-wrap;
+        word-wrap: break-word;
+        cursor: pointer;
+    }
+
+    .user-reply {
+        color: @black;
+        margin-top: 10px;
+        white-space: pre-wrap;
+        width: auto;
+        border-bottom: 1px dotted @black;
+        height: 16px;
+        cursor: pointer;
+    }
+
+    .msg-reply {
+        max-height:150px;
+        word-break: break-word;
+    }
+
+    .edit-ct {
+        position: absolute;
+        right: 0;
+        top: 0;
+        margin: 10px 10px;
+        height: 30px;
+    }
+
+    .btns-reply-ct {
+        position: absolute;
+        right: 0;
+        top: 0;
+        height: 30px;
+        margin-top: 7px;
+    }
+
+    .reply-item-ct {
+        position: relative;
+        padding-bottom: 10px;
+        padding-left: 20px;
+    }
+
+    .btn-edit {
+        width: 16px;
+        height: 16px;
+        float: left;
+        margin: 5px 5px 0 0;
+        .background-ximage('@{common-image-path}/@{common-controls}', '@{common-image-path}/@{common-controls2x}', 100px);
+        background-repeat: no-repeat;
+        background-color: transparent;
+        background-position: 0 -232px;
+        cursor: pointer;
+    }
+
+    .btn-delete {
+        width: 16px;
+        height: 16px;
+        float: left;
+        margin: 5px 5px 0 0;
+        .background-ximage('@{common-image-path}/@{common-controls}', '@{common-image-path}/@{common-controls2x}', 100px);
+        background-repeat: no-repeat;
+        background-color: transparent;
+        background-position: -20px -232px;
+        cursor: pointer;
+    }
+
+    .btn-resolve {
+        color: @black;
+        display: block;
+        float: left;
+        padding-top: 5px;
+        margin-right: 15px;
+        margin-left: 5px;
+        border-bottom: 1px dotted @black;
+        height: 21px;
+        cursor: pointer;
+    }
+
+    .btn-resolve-check {
+        display: block;
+        float: left;
+        padding-top: 6px;
+        margin-right: 5px;
+        height: 21px;
+        cursor: pointer;
+    }
+
+    .inner-edit-ct {
+        padding: 7px 0px 0px 0px;
+
+        .btn-inner-close {
+            margin-left: 7px;
+        }
+    }
+
+    .reply-ct {
+        padding: 10px 0px 0px 0px;
+
+        .btn-close {
+            margin-left: 7px;
+        }
+    }
+    .reply-inner-ct {
+        padding: 0px 20px 0px 30px;
+    }
+
+    .reply-arrow {
+        .background-ximage('@{common-image-path}/@{common-controls}', '@{common-image-path}/@{common-controls2x}', 100px);
+        background-repeat: no-repeat;
+        background-color: transparent;
+        background-position: -60px -232px;
+        width: 16px;
+        height: 16px;
+        margin-top: 10px;
+        position: absolute;
+    }
+
+    .lock-area {
+        display: block;
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        background-color: #F4F4F4;
+        margin-top: 2px;
+        margin-bottom: -2px;
+        opacity: .5;
+        cursor: pointer;
+    }
+
+    .lock-author {
+        display: block;
+        position: absolute;
+        right: 0;
+        top: 0;
+        max-width: 150px;
+        line-height: 20px;
+        background-color: #EE3525;
+        margin: 18px 25px;
+        padding: 2px 10px;
+        color: #fff;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        min-width: 100px;
+        text-align: center;
+        cursor: pointer;
+    }
+
+    .resolved {
+        width: 18px;
+        height: 16px;
+        float: left;
+        margin: 5px 5px 0 0;
+        .background-ximage('@{common-image-path}/@{common-controls}', '@{common-image-path}/@{common-controls2x}', 100px);
+        background-repeat: no-repeat;
+        background-color: transparent;
+        background-position: -40px -232px;
+    }
+}
+
+.comments-caret {
+    width: 7px;
+    height: 7px;
+    border: 0;
+    .background-ximage('@{common-image-path}/@{common-controls}', '@{common-image-path}/@{common-controls2x}', 100px);
+    background-repeat: no-repeat;
+    background-position: @arrow-small-offset-x @arrow-small-offset-y;
+    margin-top: 10px;
+    margin-left: -2px;
+    margin-right: 8px;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+// POPOVER
+
+.comments-popover {
+    width:100%;
+    height:100%;
+    margin-bottom: 5px;
+}
+
+.comments-arrow-left {
+    position: absolute;
+    overflow: hidden;
+    left: -10px;
+    top: 20px;
+    width: 10px;
+    height: 30px;
+}
+
+.comments-arrow-left:after {
+    content: '';
+    position: absolute;
+    top: 5px;
+    left: 2px;
+    width: 15px;
+    height: 15px;
+    background-color: #ffffff;
+    -moz-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+    -o-transform: rotate(45deg);
+    transform: rotate(45deg);
+    border: solid 1px @gray-dark;
+}
+.comments-arrow-right {
+    position: absolute;
+    overflow: hidden;
+    left: 100%;
+    top: 20px;
+    width: 10px;
+    height: 30px;
+}
+.comments-arrow-right:after {
+    content: '';
+    position: absolute;
+    top: 5px;
+    left: -8px;
+    width: 15px;
+    height: 15px;
+    background-color: #ffffff;
+    -moz-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+    -o-transform: rotate(45deg);
+    transform: rotate(45deg);
+    border: solid 1px @gray-dark;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+
+    body.safari & {
+        box-shadow: none;
+    }
+
+    body.chrome & {
+        box-shadow: none;
+    }
+}

OfficeWeb/apps/common/main/resources/less/common.less

@@ -0,0 +1,26 @@
+label {
+    &.link {
+        border-bottom: 1px dotted #aaa;
+        cursor: pointer;
+
+        &.disabled {
+            cursor: default;
+        }
+    }
+
+    &.disabled {
+        opacity: 0.5;
+    }
+}
+
+.menu-shapes .dataview {
+    > div:not(.grouped-data):not(.ps-scrollbar-x-rail):not(.ps-scrollbar-y-rail) {
+        .box-shadow(none);
+    }
+}
+
+.combobox.fonts {
+    > .dropdown-menu {
+        max-height: 388px;
+    }
+}

OfficeWeb/apps/common/main/resources/less/dataview.less

@@ -0,0 +1,56 @@
+.dataview {
+    &.inner {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        overflow: hidden;
+
+        > div:not(.grouped-data):not(.ps-scrollbar-x-rail):not(.ps-scrollbar-y-rail) {
+            display: inline-block;
+            float: left;
+            margin: 4px;
+            cursor: pointer;
+
+            .box-shadow(0 0 0 1px @gray);
+
+            &:hover,
+            &.selected {
+                .box-shadow(0 0 0 2px @primary);
+            }
+        }
+
+        .empty-text {
+            text-align: center;
+            height: 100%;
+            margin: 0 10px;
+            color: #b2b2b2;
+        }
+    }
+
+    .grouped-data {
+        clear: left;
+        overflow: hidden;
+
+        & > div {
+            display: inline-block;
+        }
+
+        .group-items-container {
+            overflow: hidden;
+
+            & > div {
+                display: inline-block;
+                float: left;
+                margin: 4px;
+                cursor: pointer;
+
+                .box-shadow(0 0 0 1px @gray);
+
+                &:hover,
+                &.selected {
+                    .box-shadow(0 0 0 2px @primary);
+                }
+            }
+        }
+    }
+}

OfficeWeb/apps/common/main/resources/less/dimension-picker.less

@@ -0,0 +1,41 @@
+.dimension-picker {
+    font-size: 18px;
+}
+
+.dimension-picker div {
+    position: relative;
+}
+
+.dimension-picker div.dimension-picker-mousecatcher {
+    left: 0;
+    top: 0;
+    position: absolute !important;
+}
+
+.dimension-picker div.dimension-picker-highlighted {
+    left: 0;
+    top: 0;
+    overflow: hidden;
+    position: absolute;
+}
+
+.dimension-picker-unhighlighted {
+    background-repeat: repeat;
+    background-attachment: scroll;
+    background-position: 0 0;
+    background-color: transparent;
+    .background-ximage('@{app-image-path}/controls/dimension-picker/dimension-unhighlighted.png', '@{app-image-path}/controls/dimension-picker/dimension-unhighlighted@2x.png', 18px);
+}
+
+.dimension-picker div.dimension-picker-highlighted {
+    background-repeat: repeat;
+    background-attachment: scroll;
+    background-position: 0 0;
+    background-color: transparent;
+    .background-ximage('@{app-image-path}/controls/dimension-picker/dimension-highlighted.png', '@{app-image-path}/controls/dimension-picker/dimension-highlighted@2x.png', 18px);
+}
+
+.dimension-picker-status {
+    font-size: 12px;
+    text-align: center;
+}

OfficeWeb/apps/common/main/resources/less/dropdown-menu.less

@@ -0,0 +1,100 @@
+.dropdown-menu > .disabled > a {
+    &:hover,
+    &:focus {
+        cursor: default;
+    }
+}
+
+.dropdown-menu {
+    &.scrollable-menu {
+        height: auto;
+        max-height: 400px;
+    }
+
+    &.ps-container {
+        overflow: hidden;
+        .ps-scrollbar-y-rail {
+            margin-top: 1px;
+            margin-bottom: 1px;
+        }
+    }
+
+    li {
+        & > a {
+            padding: 5px 20px;
+            cursor: pointer;
+
+            &:focus {
+                outline: 0;
+            }
+        }
+
+        &.over > a {
+            text-decoration: none;
+            color: @dropdown-link-hover-color;
+            background-color: @dropdown-link-hover-bg;
+        }
+
+        .checked {
+            &:before {
+                content: '';
+                width: 16px;
+                height: 16px;
+                display: inline-block;
+                float: left;
+                margin-left: -18px;
+                background-image: ~"url('@{common-image-path}/@{common-controls}')";
+                background-repeat: no-repeat;
+                background-position: @menu-check-offset-x @menu-check-offset-y;
+                .background-ximage('@{common-image-path}/@{common-controls}', '@{common-image-path}/@{common-controls2x}', 100px);
+            }
+        }
+
+        .menu-item-icon {
+            display: inline-block;
+            float: left;
+            width: 22px;
+            height: 22px;
+            margin: -3px 5px 0 -15px;
+            .background-ximage('@{app-image-path}/popupmenu-btns.png', '@{app-image-path}/popupmenu-btns@2x.png', 88px);
+            background-repeat: no-repeat;
+        }
+    }
+
+    .menu-scroll {
+        position: absolute;
+        background-color: @dropdown-bg;
+        height: 16px;
+        width: 100%;
+
+        &.top {
+            top: 0;
+
+            &::before {
+                content: '';
+                position: absolute;
+                left: 48%;
+                top: 7px;
+                border-top: none;
+                border-bottom: 3px solid;
+                border-right: 3px solid transparent;
+                border-left: 3px solid transparent;
+            }
+        }
+
+        &.bottom {
+            bottom: 0;
+
+            &::before {
+                content: '';
+                position: absolute;
+                left: 48%;
+                top: 7px;
+                border-bottom: none;
+                border-top: 3px solid;
+                border-right: 3px solid transparent;
+                border-left: 3px solid transparent;
+            }
+        }
+    }
+}

OfficeWeb/apps/common/main/resources/less/dropdown-submenu.less

@@ -0,0 +1,40 @@
+.dropdown-submenu {
+    position:relative;
+
+    & > .dropdown-menu {
+        top: 0;
+        left: 100%;
+        margin-top: -6px;
+        margin-left: -1px;
+        -webkit-border-radius:@border-radius-base @border-radius-base @border-radius-base @border-radius-base;
+           -moz-border-radius:@border-radius-base @border-radius-base @border-radius-base @border-radius-base;
+                border-radius:@border-radius-base @border-radius-base @border-radius-base @border-radius-base;
+
+        &.pull-right {
+            right: 100%;
+            left: auto;
+        }
+    }
+
+    & > a:after {
+        display: block;
+        content: " ";
+        float: right;
+        width: 0;
+        height: 0;
+        border-color: transparent;
+        border-style: solid;
+        border-width: 3px 0 3px 3px;
+        border-left-color: @dropdown-link-color;
+        margin-top: 5px;
+        margin-right: -10px;
+    }
+
+    &.over:not(.disabled) > .dropdown-menu {
+        display: block;
+    }
+
+    &.over > a:after {
+        border-left-color: @dropdown-link-color;
+    }
+}

OfficeWeb/apps/common/main/resources/less/extended-color-picker.less

@@ -0,0 +1,80 @@
+.extended-color-dlg {
+    .color-box {
+        padding: 16px 16px 5px 16px;
+
+        & > div {
+            display: inline-block;
+        }
+
+        .hsb-colorpicker {
+            display: inline;
+            width:225px;
+            height:200px;
+        }
+
+        label {
+            font-weight: normal;
+            font-size: 12px;
+            margin-bottom: 0;
+            vertical-align: middle;
+
+            &.color-label {
+                text-align: center;
+                width: 100%;
+            }
+
+            &.input-label {
+                width: 12px;
+            }
+        }
+
+        input {
+            font-weight: normal;
+            font-size: 12px;
+        }
+
+        .color-cnt {
+            width: 63px;
+            height: 20px;
+            background-color: transparent;
+            border: 1px solid rgb(190, 190, 190);
+
+            &.top {
+                border-bottom: none;
+            }
+            &.bottom {
+                border-top: none;
+            }
+        }
+
+        .color-spin {
+            display: inline-block;
+            vertical-align:middle;
+        }
+
+        .color-transparent {
+            .background-ximage('@{common-image-path}/hsbcolorpicker/transparency_63x20.png', '@{common-image-path}/hsbcolorpicker/transparency_63x20@2x.png', 63px);
+            background-repeat: no-repeat;
+            background-size: cover;
+            background-position: center center;
+        }
+    }
+
+
+    .footer {
+        height: 37px;
+        width: 100%;
+        bottom: 0;
+        text-align: center;
+        padding: 7px 0 0 0;
+
+        button {
+            width: 75px;
+            height: 22px;
+
+            &:not(:first-child) {
+                margin-left: 10px;
+            }
+        }
+    }
+}

OfficeWeb/apps/common/main/resources/less/header.less

@@ -0,0 +1,81 @@
+#header-container {
+    height: @app-header-height;
+    display: table;
+
+    & > div {
+        display: table-cell;
+        height: @app-header-height;
+        white-space: nowrap;
+        vertical-align: middle;
+        color: #fff;
+    }
+}
+
+#header-logo {
+    background-color: @app-header-bg-color-dark;
+    min-width: 15px + 90px + 5px;
+    .background-ximage('@{common-image-path}/header/header-logo.png', '@{common-image-path}/header/header-logo@2x.png', 86px);
+    background-repeat: no-repeat;
+    background-position: 15px center;
+    cursor: pointer;
+}
+
+#header-caption {
+    & > div {
+        position: relative;
+        background-color: @app-header-bg-color-dark;
+        color: lighten(@app-header-bg-color-light, 20%) !important;
+        padding-right: 15px;
+        cursor: default;
+        z-index: 1;
+        white-space: nowrap;
+        height: @app-header-height;
+        line-height: @app-header-height;
+
+        &:after {
+            content: '';
+            position: absolute;
+            top: 0;
+            right: -@app-header-height / 2;
+            width: @app-header-height / 2;
+            height: @app-header-height;
+            border-top: @app-header-height / 2 solid transparent;
+            border-left: @app-header-height / 3 solid @app-header-bg-color-dark;
+            border-bottom: @app-header-height / 2 solid transparent;
+        }
+    }
+}
+
+#header-documentcaption {
+    width: 100%;
+    max-width: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    background-color: @app-header-bg-color;
+    padding: 0 15px + @app-header-height / 3;
+    cursor: default;
+}
+
+#header-back {
+    & > div {
+        position: relative;
+        background-color: @app-header-bg-color-light;
+        padding: 0 15px 0 15px + @app-header-height / 3;
+        cursor: pointer;
+        white-space: nowrap;
+        height: @app-header-height;
+        line-height: @app-header-height - 2px;
+
+        &:after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: @app-header-height / 2;
+            height: @app-header-height;
+            border-top: @app-header-height / 2 solid transparent;
+            border-left: @app-header-height / 3 solid @app-header-bg-color;
+            border-bottom: @app-header-height / 2 solid transparent;
+        }
+    }
+}

OfficeWeb/apps/common/main/resources/less/hsb-colorpicker.less

@@ -0,0 +1,109 @@
+.hsb-colorpicker {
+    .top-panel {
+        height: 22px;
+        margin: 0 0 10px;
+    }
+
+    .color-value {
+        width: 22px;
+        height: 22px;
+        float: left;
+        border: 1px solid #C4C4C4;
+        background-image: none;
+        background-position: 0 -206px;
+        background-repeat: no-repeat;
+
+        .transparent-color {
+            width: 22px;
+            height: 22px;
+            float: left;
+            .background-ximage('@{common-image-path}/hsbcolorpicker/hsb-colorpicker.png', '@{common-image-path}/hsbcolorpicker/hsb-colorpicker@2x.png', 205px);
+            background-position: 0 -206px;
+            background-repeat: no-repeat;
+        }
+    }
+
+    .color-text {
+        color: #464646;
+        height: 22px;
+        padding: 4px 32px;
+        cursor: default;
+    }
+
+    .cnt-hb {
+        display: inline-block;
+        overflow: hidden;
+        width: 195px;
+        height: 196px;
+        position: relative;
+        border: 1px solid #C4C4C4;
+        .background-ximage('@{common-image-path}/hsbcolorpicker/hsb-colorpicker.png', '@{common-image-path}/hsbcolorpicker/hsb-colorpicker@2x.png', 205px);
+        background-position: 0 0;
+        background-repeat: no-repeat;
+    }
+
+    .cnt-root {
+        display: inline-block;
+        width: 10px;
+        height: 196px;
+        margin: 0 8px;
+    }
+
+    .cnt-sat {
+        width: 10px;
+        height: 100%;
+        position: relative;
+        border: 1px solid #C4C4C4;
+        .background-ximage('@{common-image-path}/hsbcolorpicker/hsb-colorpicker.png', '@{common-image-path}/hsbcolorpicker/hsb-colorpicker@2x.png', 205px);
+        background-position: -195px 0;
+        background-repeat: no-repeat;
+    }
+
+    .cnt-hb-arrow {
+        width: 9px;
+        height: 9px;
+        margin: -4px;
+        position: absolute;
+        .background-ximage('@{common-image-path}/hsbcolorpicker/hsb-colorpicker.png', '@{common-image-path}/hsbcolorpicker/hsb-colorpicker@2x.png', 205px);
+        background-position: 0 -196px;
+        background-repeat: no-repeat;
+    }
+
+    .cnt-sat-arrow {
+        width: 14px;
+        height: 9px;
+        margin: -4px -3px;
+        position: absolute;
+        .background-ximage('@{common-image-path}/hsbcolorpicker/hsb-colorpicker.png', '@{common-image-path}/hsbcolorpicker/hsb-colorpicker@2x.png', 205px);
+        background-position: -11px -196px;
+        background-repeat: no-repeat;
+    }
+
+    .empty-color {
+        color: #464646;
+        height: 16px;
+        margin: 5px 0;
+
+        &:hover {
+            cursor: pointer;
+            background-color: #efefef;
+        }
+
+        &:active {
+            background-color: #cecece;
+        }
+
+        &:before {
+            content: "";
+            .background-ximage('@{common-image-path}/hsbcolorpicker/hsb-colorpicker.png', '@{common-image-path}/hsbcolorpicker/hsb-colorpicker@2x.png', 205px);
+            background-position: -26px -196px;
+            background-repeat: no-repeat;
+            float: left;
+            width: 10px;
+            height: 10px;
+            margin-right: 5px;
+            margin-top: 1px;
+            border: 1px solid #C4C4C4;
+        }
+    }
+}

OfficeWeb/apps/common/main/resources/less/input.less

@@ -0,0 +1,81 @@
+.form-control {
+    .border-radius(@border-radius-small);
+    .box-shadow(none);
+    color: @gray-deep;
+    .user-select(text);
+
+    &:focus {
+        border-color: @input-border;
+        outline: 0;
+        .box-shadow(none);
+    }
+}
+
+.form-control[readonly] {
+    cursor: pointer;
+    background-color: @input-bg;
+    .user-select(text);
+}
+
+.form-control[disabled] {
+    cursor: default;
+    background-color: @input-bg;
+   .user-select(none);
+}
+
+.input-row {
+    position: relative;
+}
+
+.input-error {
+    display: none;
+
+    &:before {
+        content: '';
+        position: absolute;
+        right: 3px;
+        top: 4px;
+        width: 16px;
+        height: 16px;
+        .background-ximage('@{common-image-path}/@{common-controls}', '@{common-image-path}/@{common-controls2x}', 100px);
+        background-position: @input-error-offset-x @input-error-offset-y;
+        background-repeat: no-repeat;
+    }
+}
+
+.input-field {
+    input,
+    .input-error {
+        float: left;
+        position: relative;
+    }
+
+    &.error {
+        input {
+            border-color: @brand-danger;
+        }
+
+        .input-error {
+            display: block;
+        }
+    }
+}
+
+input:required:focus:invalid,
+input:focus:invalid,
+input.error {
+    border-color: @brand-danger;
+
+    & + span.input-error {
+        display: block;
+    }
+}
+
+.disabled .form-control {
+    opacity: 0.65;
+    cursor: default !important;
+}
+
+::-ms-clear {
+    display: none;
+}

OfficeWeb/apps/common/main/resources/less/layout.less

@@ -0,0 +1,54 @@
+/**
+ *    layout.less
+ *
+ *    Created by Maxim Kadushkin on 10 February 2014
+ *    Copyright (c) 2014 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+.layout-ct {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+
+    .layout-item, .layout-resizer {
+        position: absolute;
+    }
+
+    .layout-resizer {
+        z-index: @zindex-dropdown - 10;
+        background: @gray-light;
+
+        &.move {
+            opacity: 0.4;
+        }
+    }
+
+    &.vbox {
+        .layout-item, > .layout-resizer {
+            left: 0;
+            width: 100%;
+        }
+
+        > .layout-resizer {
+            height: 4px;
+            cursor: row-resize;
+            border-top: solid 1px @gray-dark;
+            border-bottom: solid 1px @gray-dark;
+        }
+    }
+
+    &.hbox {
+        .layout-item, > .layout-resizer {
+            top: 0;
+            height: 100%;
+        }
+
+        > .layout-resizer {
+            width: 4px;
+            cursor: col-resize;
+            border-left: solid 1px @gray-dark;
+            border-right: solid 1px @gray-dark;
+        }
+    }
+}

OfficeWeb/apps/common/main/resources/less/listview.less

@@ -0,0 +1,51 @@
+.listview {
+  border: 1px solid @input-border;
+
+  &.inner {
+    width: 100%;
+    height: 100%;
+    max-height: 100%;
+    overflow: hidden;
+    position: relative;
+
+    .empty-text {
+        text-align: center;
+        height: 100%;
+        margin: 0 10px;
+        color: #b2b2b2;
+    }
+  }
+
+  & > div:not(.ps-scrollbar-x-rail):not(.ps-scrollbar-y-rail) {
+    display: block;
+    text-overflow: ellipsis;
+    padding: 3px 6px;
+    cursor: pointer;
+    white-space: pre-wrap;
+
+    background-color: @list-group-bg;
+    border-color: @list-group-border;
+    border-style: solid;
+    border-width: 1px 0;
+    border-top-color: #fafafa;
+
+    &:hover {
+        background-color: @secondary;
+        border-color: @secondary;
+        border-style: solid;
+        border-width: 1px 0;
+    }
+
+    &.selected {
+        background-color: @primary;
+        color: #ffffff;
+        border-color: @primary;
+        border-style: solid;
+        border-width: 1px 0;
+    }
+  }
+
+  &.ps-container {
+      overflow: hidden;
+  }
+}

OfficeWeb/apps/common/main/resources/less/loadmask.less

@@ -0,0 +1,78 @@
+@loadmask-zindex: @zindex-modal + 100;
+
+.asc-loadmask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    zoom: 1;
+    background-color: transparent;
+    z-index: @loadmask-zindex;
+}
+
+.asc-loadmask-body {
+    position: absolute;
+    z-index: @loadmask-zindex + 1;
+    padding: 20px;
+    line-height: 33px;
+    border: none;
+    background-image: none;
+    background-color: fade(darken(@gray-deep, 15%), 70%);
+    color: @gray-light;
+    .border-radius(@border-radius-large);
+
+    & > div {
+        display: inline-block;
+        vertical-align: middle;
+    }
+
+    .asc-loadmask-image {
+        background-image: ~"url('@{common-image-path}/load-mask/loading.gif')";
+        height: 33px;
+        width: 33px;
+        float: left;
+        margin-left: 20px;
+    }
+
+    .asc-loadmask-title {
+        .fontsize(@font-size-large);
+        margin: 0 20px;
+    }
+}
+
+.application-error-panel {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: #f4f4f4;
+
+    .application-error-message-block {
+        display: inline-block;
+        vertical-align: middle;
+        width: 100%;
+
+        .application-error-message-inner {
+            width: 550px;
+            margin: auto;
+            padding: 30px;
+            background-color: #e3e3e3;
+            text-align: center;
+
+            .application-error-message-title {
+                font-size: 24px;
+                margin: 0 0 14px;
+            }
+
+            .application-error-message-text {
+                font-size: 14px;
+            }
+        }
+    }
+
+    .application-error-message-auxiliary {
+        display: inline-block;
+        vertical-align: middle;
+        height: 100%;
+    }
+}

OfficeWeb/apps/common/main/resources/less/masked-field.less

@@ -0,0 +1,7 @@
+.masked-field {
+    text-align: right;
+    border: 1px solid @gray;
+    border-radius: 2px;
+    padding: 0 3px;
+    .user-select(text);
+}

OfficeWeb/apps/common/main/resources/less/multislider-gradient.less

@@ -0,0 +1,30 @@
+.multi-slider-gradient {
+    height: 35px;
+    background: transparent;
+
+    .thumb {
+        top: 18px;
+        .background-ximage('@{common-image-path}/@{common-controls}', '@{common-image-path}/@{common-controls2x}', 100px);
+        background-position: @multislide-thumb-offset-x @multislide-thumb-offset-y;
+
+        &.active {
+            background-position: @multislide-thumb-offset-x @multislide-thumb-offset-y - 30px;
+        }
+    }
+
+    .track {
+        background: #ededed; /* Old browsers */
+        background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
+        background: -webkit-linear-gradient(left, #000000 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
+        background: -moz-linear-gradient(left, #000000 0%,#ffffff 100%); /* FF3.6+ */
+        background: -o-linear-gradient(left,  #000000 0%,#ffffff 100%); /* Opera 11.10+ */
+        background: -ms-linear-gradient(left,  #000000 0%,#ffffff 100%); /* IE10+ */
+        background: linear-gradient(to right,  #000000 0%,#ffffff 100%); /* W3C */
+        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
+
+        background-position: 0 0;
+        outline: 1px solid rgba(162, 162, 162, 1);
+    }
+}
+
+

OfficeWeb/apps/common/main/resources/less/radiobox.less

@@ -0,0 +1,33 @@
+.radiobox {
+    padding-left: 22px;
+    margin-bottom: 0;
+    .font-size-normal();
+    font-weight: normal;
+
+    input[type=button] {
+        .background-ximage('@{common-image-path}/@{common-controls}', '@{common-image-path}/@{common-controls2x}', 100px);
+        background-repeat: no-repeat;
+        background-position: @radio-offset-x @radio-offset-y;
+        background-color: transparent;
+        border: none;
+        margin-left: -22px;
+        margin-right: 6px;
+        padding-bottom: 4px;
+        width: 16px;
+        height: 16px;
+        cursor: default;
+        vertical-align: top;
+
+        &.checked {
+            background-position: @radio-offset-x @radio-offset-y - 16px;
+        }
+
+        &.disabled {
+            background-position: @radio-offset-x - 48px @radio-offset-y;
+
+            &.checked {
+                background-position: @radio-offset-x - 48px @radio-offset-y - 16px;
+            }
+        }
+    }
+}

OfficeWeb/apps/common/main/resources/less/scroller.less

@@ -0,0 +1,71 @@
+.ps-scrollbar-x-rail {
+    z-index: 1;
+}
+
+.ps-scrollbar-y-rail {
+    z-index: 1;
+    right: 1px !important;
+    width: 9px !important;
+    margin-top: 1px;
+    margin-bottom: 1px;
+
+    &.always-visible-y {
+        opacity: 1 !important;
+    }
+
+    .ps-scrollbar-y  {
+        background-color: @gray-light;
+
+        &.always-visible-y {
+            right: 0px !important;
+            width: 9px;
+
+            background-color: @gray-light;
+//            background-image: ~"url('@{common-image-path}/controls/Scroll_center.png')";
+//            background-image: ~"-webkit-image-set(url('@{common-image-path}/controls/Scroll_center.png') 1x, url('@{common-image-path}/controls/Scroll_center@2x.png') 2x)";
+            /*background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAYAAACZ3F9/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RURFNzkyNkE0RTFGMTFFNDkyRUNFRUEwNkNERTY4N0QiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RURFNzkyNkI0RTFGMTFFNDkyRUNFRUEwNkNERTY4N0QiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFREU3OTI2ODRFMUYxMUU0OTJFQ0VFQTA2Q0RFNjg3RCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFREU3OTI2OTRFMUYxMUU0OTJFQ0VFQTA2Q0RFNjg3RCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtLoUWcAAAA2SURBVHjaYvz//z8DCFy4cAHCgABGEGFoaAjmfPz4EUOOAaQRppkUwDhq46iNdLORGUQABBgA2y5vq3CS7yUAAAAASUVORK5CYII=');*/
+            /*background-image: -webkit-image-set(url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAYAAACZ3F9/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RURFNzkyNkE0RTFGMTFFNDkyRUNFRUEwNkNERTY4N0QiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RURFNzkyNkI0RTFGMTFFNDkyRUNFRUEwNkNERTY4N0QiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFREU3OTI2ODRFMUYxMUU0OTJFQ0VFQTA2Q0RFNjg3RCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFREU3OTI2OTRFMUYxMUU0OTJFQ0VFQTA2Q0RFNjg3RCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtLoUWcAAAA2SURBVHjaYvz//z8DCFy4cAHCgABGEGFoaAjmfPz4EUOOAaQRppkUwDhq46iNdLORGUQABBgA2y5vq3CS7yUAAAAASUVORK5CYII=') 1x,*/
+                                                /*url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAaCAYAAACkVDyJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDlFQjdBRjE0RTFGMTFFNDk3Q0ZDOUVBNkQwRkFGNTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDlFQjdBRjI0RTFGMTFFNDk3Q0ZDOUVBNkQwRkFGNTYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpEOUVCN0FFRjRFMUYxMUU0OTdDRkM5RUE2RDBGQUY1NiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpEOUVCN0FGMDRFMUYxMUU0OTdDRkM5RUE2RDBGQUY1NiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PupPpWQAAABYSURBVHjaYvz//z8DMrhw4QKqABQYGBgwMuABnz59wqqPj48PRR8TA50BCxYxRjLNIkrfoPDhfzJ9QJS+0TgcjcPROByNw9E4HI3D0TgcjcPROCQDAAQYAPFLF1XTzO2YAAAAAElFTkSuQmCC') 2x);*/
+            .background-ximage('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAYAAACZ3F9/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RURFNzkyNkE0RTFGMTFFNDkyRUNFRUEwNkNERTY4N0QiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RURFNzkyNkI0RTFGMTFFNDkyRUNFRUEwNkNERTY4N0QiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFREU3OTI2ODRFMUYxMUU0OTJFQ0VFQTA2Q0RFNjg3RCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFREU3OTI2OTRFMUYxMUU0OTJFQ0VFQTA2Q0RFNjg3RCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtLoUWcAAAA2SURBVHjaYvz//z8DCFy4cAHCgABGEGFoaAjmfPz4EUOOAaQRppkUwDhq46iNdLORGUQABBgA2y5vq3CS7yUAAAAASUVORK5CYII=',
+             'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAaCAYAAACkVDyJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDlFQjdBRjE0RTFGMTFFNDk3Q0ZDOUVBNkQwRkFGNTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDlFQjdBRjI0RTFGMTFFNDk3Q0ZDOUVBNkQwRkFGNTYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpEOUVCN0FFRjRFMUYxMUU0OTdDRkM5RUE2RDBGQUY1NiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpEOUVCN0FGMDRFMUYxMUU0OTdDRkM5RUE2RDBGQUY1NiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PupPpWQAAABYSURBVHjaYvz//z8DMrhw4QKqABQYGBgwMuABnz59wqqPj48PRR8TA50BCxYxRjLNIkrfoPDhfzJ9QJS+0TgcjcPROByNw9E4HI3D0TgcjcPROCQDAAQYAPFLF1XTzO2YAAAAAElFTkSuQmCC', 14px);
+
+            background-repeat: no-repeat;
+            background-position: 0 center;
+            .border-radius(2px);
+            border:1px solid @gray;
+            -o-transition: background-color .5s 0 linear;
+            -webkit-transition: background-color .5s 0 linear;
+            -moz-transition: background-color .5s 0 linear;
+            transition: background-color .5s 0 linear;
+        }
+    }
+
+    &:hover,
+    .hover {
+        .ps-scrollbar-y  {
+            &.always-visible-y {
+                background-color: @gray;
+                background-position: -7px center;
+            }
+        }
+    }
+
+    &.in-scrolling {
+        .ps-scrollbar-y  {
+            &.always-visible-y {
+                background-color: @gray-soft;
+                border-color: @gray-soft;
+                background-position: -7px center;
+            }
+        }
+    }
+}
+
+.ps-container:hover .ps-scrollbar-y-rail,
+.ps-container.hover .ps-scrollbar-y-rail,
+.ps-container .ps-scrollbar-y-rail:hover,
+.ps-container .ps-scrollbar-y-rail.hover,
+.ps-container .ps-scrollbar-y-rail.in-scrolling {
+    background-color: transparent !important;
+    opacity: 1 !important;
+}

OfficeWeb/apps/common/main/resources/less/searchdialog.less

@@ -0,0 +1,84 @@
+
+.search {
+    .body {
+        padding: 24px 0;
+
+        .box {
+            padding-left: 18px;
+            padding-bottom: 16px;
+        }
+
+        .input-row {
+            height: @input-height-base;
+            width: 510px;
+            margin-bottom: 10px;
+
+            .row-el {
+                margin-top: 3px;
+                margin-right: 10px;
+            }
+        }
+
+        input[type=text] {
+            display: inline-block;
+            width: 470px;
+        }
+
+        #sd-text-search {
+            &:not(.clear) {
+                margin-left: 8px;
+            }
+
+            &.clear {
+                width: 100%;
+            }
+        }
+
+        #sd-text-replace, #search-label-replace {
+            margin-left: 36px;
+        }
+
+        #search-label-replace {
+            padding-top: 3px;
+        }
+
+        .btn.normal {
+            width: 100px;
+
+            &.iconic {
+                width: 45px;
+                padding-top: 2px;
+
+                span.icon {
+                    display: inline-block;
+                    width: 16px;
+                    height: 16px;
+                    .background-ximage('@{common-image-path}/@{common-controls}', '@{common-image-path}/@{common-controls2x}', 100px);
+
+                    &.back {
+                        background-position: @search-dlg-offset-x @search-dlg-offset-y;
+                    }
+
+                    &.next {
+                        background-position: @search-dlg-offset-x @search-dlg-offset-y - 16px;
+                    }
+                }
+            }
+
+            &.right {
+                float: right;
+            }
+        }
+
+        .separator.horizontal {
+            width: 100%;
+        }
+
+        .footer {
+            padding: 20px;
+            &.right {
+                text-align: right;
+            }
+        }
+    }
+}

OfficeWeb/apps/common/main/resources/less/separator.less

@@ -0,0 +1,25 @@
+/**
+ *  description of styles for the '.separator' element
+ *
+ *  Created by Maxim Kadushkin 1/22/14
+ *  Copyright (c) 2014 Ascensio System SIA. All rights reserved.
+ *
+*/
+
+.separator {
+    display: inline-block;
+    position: inherit;
+    border-left: 1px solid @gray-dark;
+    vertical-align: top;
+    padding: 0;
+    width: 0;
+
+    &.horizontal {
+        height: 0;
+        display: block;
+
+        border-left: none;
+        border-right: none;
+        border-top: 1px solid @gray-dark;
+    }
+}

OfficeWeb/apps/common/main/resources/less/slider.less

@@ -0,0 +1,46 @@
+.slider {
+    position: relative;
+    height: 18px;
+
+    .thumb {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 13px;
+        height: 15px;
+        margin-left: -7px;
+        cursor: default;
+        .background-ximage('@{common-image-path}/@{common-controls}', '@{common-image-path}/@{common-controls2x}', 100px);
+        background-position: @slide-thumb-offset-x @slide-thumb-offset-y;
+
+        &.active {
+            background-position: @slide-thumb-offset-x @slide-thumb-offset-y - 30px;
+        }
+    }
+
+    .track {
+        height: 18px;
+        .track-left {
+            width: 7px;
+            background: transparent no-repeat @slide-track-offset-x @slide-track-offset-y;
+        }
+        .track-right {
+            width: 7px;
+            background: transparent no-repeat @slide-track-offset-x - 7px @slide-track-offset-y;
+        }
+        .track-center {
+            background: transparent repeat-x @slide-track-offset-x @slide-track-offset-y - 18px;
+        }
+
+        div {
+            height: 18px;
+            display: inline-block;
+            .background-ximage('@{common-image-path}/@{common-controls}', '@{common-image-path}/@{common-controls2x}', 100px)  !important;
+        }
+
+    }
+
+    &.disabled {
+        opacity: 0.35;
+    }
+}

OfficeWeb/apps/common/main/resources/less/spinner.less

@@ -0,0 +1,71 @@
+.spinner{
+    @spin-height: 22px;
+    @trigger-width: 17px;
+    position: relative;
+
+    input {
+        height: @spin-height;
+        text-align: right;
+        padding-left: 1px;
+        padding-right: @trigger-width + 2px;
+    }
+
+    button {
+        display: block;
+        position: relative;
+        width: @trigger-width;
+        height: @spin-height/2;
+        padding: 0;
+        margin: 0;
+        border: none;
+        background: none;
+        line-height: 1;
+
+        &.disabled {
+            cursor: default;
+        }
+
+        &:focus {
+            outline: 0;
+            outline-offset: 0;
+        }
+    }
+
+    .spinner-buttons {
+        position: absolute;
+        top: 0;
+        right: 0;
+
+        i {
+            display: inline-block;
+            width: @trigger-width;
+            height: @spin-height/2;
+        }
+
+        button {
+            &.disabled {
+                opacity: .35;
+            }
+        }
+    }
+
+    .spinner-up {
+        i {
+            .background-ximage('@{common-image-path}/@{common-controls}', '@{common-image-path}/@{common-controls2x}', 100px);
+            background-position: @spinner-offset-x @spinner-offset-y;
+        }
+
+        &.over   i { background-position: @spinner-offset-x - @trigger-width @spinner-offset-y; }
+        &.active i { background-position: @spinner-offset-x @spinner-offset-y; }
+    }
+
+    .spinner-down {
+        i {
+            .background-ximage('@{common-image-path}/@{common-controls}', '@{common-image-path}/@{common-controls2x}', 100px);
+            background-position: @spinner-offset-x @spinner-offset-y - @spin-height / 2;
+        }
+
+        &.over   i { background-position: @spinner-offset-x - @trigger-width @spinner-offset-y - @spin-height / 2; }
+        &.active i { background-position: @spinner-offset-x @spinner-offset-y - @spin-height / 2; }
+    }
+}

OfficeWeb/apps/common/main/resources/less/synchronize-tip.less

@@ -0,0 +1,71 @@
+.synch-tip-root {
+    position: absolute;
+    z-index: @zindex-tooltip + 5;
+    margin: -32px 0 0 15px;
+    width: 300px;
+}
+
+.asc-synchronizetip {
+    padding: 15px 8px 15px 15px;
+    border-radius: 5px;
+    background-color: #fcfed7;
+    overflow: visible;
+
+    .box-shadow(0 4px 15px -2px rgba(0, 0, 0, 0.5));
+    font-size: 11px;
+}
+
+.asc-synchronizetip .tip-arrow {
+    position: absolute;
+    overflow: hidden;
+    left: -15px;
+    top: 20px;
+    width: 15px;
+    height: 30px;
+}
+
+.asc-synchronizetip .tip-arrow:after {
+    content: '';
+    position: absolute;
+    top: 5px;
+    left: 8px;
+    background-color: #fcfed7;
+    width: 15px;
+    height: 15px;
+
+    -moz-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+    -o-transform: rotate(45deg);
+    transform: rotate(45deg);
+
+    .box-shadow(0 4px 8px -1px rgba(0, 0, 0, 0.2));
+}
+
+.asc-synchronizetip .show-link {
+    margin-top: 10px;
+}
+
+.show-link label {
+    border-bottom: 1px dotted #445799;
+    color: #445799;
+    cursor: pointer;
+}
+
+.asc-synchronizetip .close {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 16px;
+    height: 16px;
+    margin: 8px;
+    cursor: pointer;
+
+    .background-ximage('@{common-image-path}/@{common-controls}', '@{common-image-path}/@{common-controls2x}', 100px);
+    background-position: @but-close-offset-x @but-close-offset-y;
+
+    &.over,
+    &:hover {
+        background-position: @but-close-offset-x @but-close-offset-y - 16px;
+    }
+}

OfficeWeb/apps/common/main/resources/less/tabbar.less

@@ -0,0 +1,49 @@
+.nav-tabs {
+    white-space: nowrap;
+    overflow: hidden;
+
+    > li {
+        float: none;
+        display: inline;
+
+        &.active {
+            > a, > a:hover, > a:focus {
+                background-color: #fff;
+                color: #000;
+                border-color: #fff;
+                cursor: pointer;
+            }
+        }
+
+        > a {
+            display: inline;
+            background-color: #7a7a7a;
+            color: #fff;
+
+            padding-top: 0;
+            padding-bottom: 0;
+            white-space: pre-wrap;
+
+            &:hover, &:focus {
+                background-color: #7a7a7a;
+                border-color: #7a7a7a;
+                cursor: pointer;
+            }
+        }
+    }
+
+    &.bottom {
+        border-bottom: none;
+        border-top: none;
+
+        > li {
+            vertical-align: middle;
+
+            > a {
+                padding-bottom: 1px;
+                border-radius: 0 0 4px 4px;
+            }
+        }
+    }
+}
+

OfficeWeb/apps/common/main/resources/less/table-styler.less

@@ -0,0 +1,24 @@
+.table-styler {
+    td {
+        padding: 0;
+
+        &.content-box {
+            height: 50%;
+
+            .tablestyler-cell {
+                height: 100%;
+
+                .cell-content{
+                    height: 100%;
+                    padding: 6px;
+                }
+            }
+        }
+    }
+
+    .tablestyler-cell .cell-content .content-text {
+        display: block;
+        background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAECAMAAACTMR4LAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAwBQTFRFwMDA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA+ifx7AAAAAlwSFlzAAAOwwAADsMBx2+oZAAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjM1MO6znwAAAA9JREFUGFdjYAADRkYgAgAAGAAFJc9JkQAAAABJRU5ErkJggg==') repeat 0 0 scroll;
+        height: 100%;
+    }
+}

OfficeWeb/apps/common/main/resources/less/theme-colorpalette.less

@@ -0,0 +1,53 @@
+.theme-colorpalette {
+    margin: 0 !important;
+    color: black;
+
+    em {
+        border: none;
+        display: block;
+
+        span{
+            height: 12px;
+            width: 12px;
+            cursor: pointer;
+            display: block;
+        }
+    }
+
+    a {
+        padding: 0;
+        border: 1px solid #fff;
+        float: left;
+        text-decoration: none;
+        -moz-outline: 0 none;
+        outline: 0 none;
+        cursor: pointer;
+
+        em span {
+            border: 1px solid rgba(0, 0, 0, 0.2);
+        }
+
+        &:hover, &.selected {
+            border-color: #000;
+            em span {
+                border-color: #fff;
+            }
+        }
+    }
+
+    .dynamic-empty-color em span {
+        border:solid 1px #C0C0C0;
+        background:#ffffff
+    }
+
+    .color-transparent {
+        .background-ximage('@{common-image-path}/@{common-controls}', '@{common-image-path}/@{common-controls2x}', 100px);
+        background-position: @nocolor-offset-x @nocolor-offset-y;
+        background-repeat: no-repeat;
+
+        em span {
+            border:solid 1px #C0C0C0;
+        }
+    }
+}
+

OfficeWeb/apps/common/main/resources/less/tooltip.less

@@ -0,0 +1,52 @@
+
+.tooltip {
+    &.in {
+        opacity: 1;
+    }
+
+    &.arrow-free {
+        &.top    { margin-top: 0; }
+    //    &.right  { margin-left:  3px; padding: 0 @tooltip-arrow-width; }
+        &.bottom { margin-top: 0; }
+    //    &.left   { margin-left: -3px; padding: 0 @tooltip-arrow-width; }
+    }
+
+    &.top-left .tooltip-arrow,
+    &.top-right .tooltip-arrow {
+        bottom: 1px;
+        border-width: 5px 5px 0;
+        border-top-color: @body-bg;
+    }
+
+    &.top-left .tooltip-arrow,
+    &.bottom-left .tooltip-arrow {
+        left: 5px;
+    }
+
+    &.top-right .tooltip-arrow,
+    &.bottom-right .tooltip-arrow {
+        right: 5px;
+    }
+
+    &.bottom-left .tooltip-arrow,
+    &.bottom-right .tooltip-arrow {
+        top: 1px;
+        border-width: 0 5px 5px;
+        border-bottom-color: @body-bg;
+    }
+}
+
+.tooltip-inner {
+    font-size: 11px;
+    background-color: @body-bg;
+    color: @gray-deep;
+    padding: 5px 12px;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    .box-shadow(0 6px 12px rgba(0, 0, 0, 0.175));
+    background-clip: padding-box;
+
+    white-space: pre-wrap;
+    text-align: left;
+    word-wrap: break-word;
+    max-width: 300px;
+}

OfficeWeb/apps/common/main/resources/less/variables.less

@@ -0,0 +1,722 @@
+//
+// Global values
+// --------------------------------------------------
+
+// Paths
+// -------------------------
+
+@app-image-path:        "resources/img";
+@common-image-path:     "../../common/main/resources/img";
+
+// Grays
+// -------------------------
+
+@gray-deep:             #444444; //rgb(68, 68, 68)
+@gray-darker:           #848484; //rgb(132, 132, 132)
+@gray-dark:             #cbcbcb; //rgb(203, 203, 203)
+@gray:                  #cfcfcf; //rgb(207, 207, 207)
+@gray-light:            #f1f1f1; //rgb(241, 241, 241)
+@gray-lighter:          #ededed; //rgb(237, 237, 237)
+@gray-soft:             #adadad; //rgb(173, 173, 173)
+
+@primary:               #7d858c; //rgb(125, 133, 140)
+@primary-hover:         #666d73; //rgb(102, 109, 115)
+@secondary:             #d8dadc; //rgb(216, 218, 220)
+@secondary-hover:       #cbced1; //rgb(203, 206, 209)
+
+@black:                 #000000;
+
+// Brand colors
+// -------------------------
+
+@brand-primary:         #428bca;
+@brand-success:         #5cb85c;
+@brand-warning:         #f0ad4e;
+@brand-danger:          #d9534f;
+@brand-info:            #5bc0de;
+
+// Scaffolding
+// -------------------------
+
+@body-bg:               #fff;
+@text-color:            @gray-dark;
+
+// Links
+// -------------------------
+
+@link-color:            @brand-primary;
+@link-hover-color:      darken(@link-color, 15%);
+
+// Typography
+// -------------------------
+
+@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
+@font-family-serif:       Georgia, "Times New Roman", Times, serif;
+@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
+@font-family-tahoma:      tahoma, arial, verdana, sans-serif;
+@font-family-base:        @font-family-sans-serif;
+
+@font-size-base:          11px;
+@font-size-large:         13px;
+@font-size-small:         9px;
+
+@font-size-h1:            floor(@font-size-base * 2.6);
+@font-size-h2:            floor(@font-size-base * 2.15);
+@font-size-h3:            ceil(@font-size-base * 1.7);
+@font-size-h4:            ceil(@font-size-base * 1.25);
+@font-size-h5:            @font-size-base;
+@font-size-h6:            ceil(@font-size-base * 0.85);
+
+@line-height-base:        1.428571429; // 20/14
+@line-height-computed:    floor(@font-size-base * @line-height-base);
+
+@headings-font-family:    @font-family-base;
+@headings-font-weight:    500;
+@headings-line-height:    1.1;
+@headings-color:          inherit;
+
+
+// Iconography
+// -------------------------
+
+@icon-font-path:          "../fonts/";
+@icon-font-name:          "glyphicons-halflings-regular";
+
+
+// Components
+// -------------------------
+// Based on 14px font-size and 1.428 line-height (~20px to start)
+
+@padding-base-vertical:          1px;
+@padding-base-horizontal:        3px;
+
+@padding-large-vertical:         10px;
+@padding-large-horizontal:       16px;
+
+@padding-small-vertical:         1px;
+@padding-small-horizontal:       3px;
+
+@padding-xs-vertical:            1px;
+@padding-xs-horizontal:          5px;
+
+@line-height-large:              1.33;
+@line-height-small:              1.5;
+
+@border-radius-base:             4px;
+@border-radius-large:            6px;
+@border-radius-small:            2px;
+
+@component-active-color:         #fff;
+@component-active-bg:            @primary;
+
+@caret-width-base:               4px;
+@caret-width-large:              5px;
+
+// Tables
+// -------------------------
+
+@table-cell-padding:                 8px;
+@table-condensed-cell-padding:       5px;
+
+@table-bg:                           transparent; // overall background-color
+@table-bg-accent:                    #f9f9f9; // for striping
+@table-bg-hover:                     #f5f5f5;
+@table-bg-active:                    @table-bg-hover;
+
+@table-border-color:                 #ddd; // table and cell border
+
+
+// Buttons
+// -------------------------
+
+@btn-font-weight:                normal;
+
+@btn-default-color:              #333;
+@btn-default-bg:                 #fff;
+@btn-default-border:             #ccc;
+
+@btn-primary-color:              #fff;
+@btn-primary-bg:                 @brand-primary;
+@btn-primary-border:             darken(@btn-primary-bg, 5%);
+
+@btn-success-color:              #fff;
+@btn-success-bg:                 @brand-success;
+@btn-success-border:             darken(@btn-success-bg, 5%);
+
+@btn-warning-color:              #fff;
+@btn-warning-bg:                 @brand-warning;
+@btn-warning-border:             darken(@btn-warning-bg, 5%);
+
+@btn-danger-color:               #fff;
+@btn-danger-bg:                  @brand-danger;
+@btn-danger-border:              darken(@btn-danger-bg, 5%);
+
+@btn-info-color:                 #fff;
+@btn-info-bg:                    @brand-info;
+@btn-info-border:                darken(@btn-info-bg, 5%);
+
+@btn-link-disabled-color:        @gray-light;
+
+
+// Forms
+// -------------------------
+
+@input-bg:                       #fff;
+@input-bg-disabled:              @gray-lighter;
+
+@input-color:                    #000;
+@input-border:                   @gray;
+@input-border-radius:            @border-radius-base;
+@input-border-focus:             #66afe9;
+
+@input-color-placeholder:        @gray;
+
+@input-height-base:              (floor(@font-size-base * @line-height-base) + (@padding-base-vertical * 2) + 5);
+@input-height-large:             (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
+@input-height-small:             (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
+
+@legend-color:                   @gray-dark;
+@legend-border-color:            #e5e5e5;
+
+@input-group-addon-bg:           @input-bg;
+@input-group-addon-border-color: @input-border;
+
+
+// Dropdowns
+// -------------------------
+
+@dropdown-bg:                    #fff;
+@dropdown-border:                rgba(0,0,0,.15);
+@dropdown-fallback-border:       #ccc;
+@dropdown-divider-bg:            #e5e5e5;
+
+@dropdown-link-color:            @gray-deep;
+@dropdown-link-hover-color:      darken(@gray-deep, 5%);
+@dropdown-link-hover-bg:         @secondary;
+
+@dropdown-link-active-color:     @component-active-color;
+@dropdown-link-active-bg:        @component-active-bg;
+
+@dropdown-link-disabled-color:   @gray;
+
+@dropdown-header-color:          @gray;
+
+
+// COMPONENT VARIABLES
+// --------------------------------------------------
+
+
+// Z-index master list
+// -------------------------
+// Used for a bird's eye view of components dependent on the z-axis
+// Try to avoid customizing these :)
+
+@zindex-navbar:            1000;
+@zindex-dropdown:          1000;
+@zindex-popover:           1010;
+@zindex-tooltip:           1030;
+@zindex-navbar-fixed:      1030;
+@zindex-modal-background:  1040;
+@zindex-modal:             1050;
+
+// Media queries breakpoints
+// --------------------------------------------------
+
+// Extra small screen / phone
+// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
+@screen-xs:                  480px;
+@screen-xs-min:              @screen-xs;
+@screen-phone:               @screen-xs-min;
+
+// Small screen / tablet
+// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
+@screen-sm:                  768px;
+@screen-sm-min:              @screen-sm;
+@screen-tablet:              @screen-sm-min;
+
+// Medium screen / desktop
+// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
+@screen-md:                  992px;
+@screen-md-min:              @screen-md;
+@screen-desktop:             @screen-md-min;
+
+// Large screen / wide desktop
+// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
+@screen-lg:                  1200px;
+@screen-lg-min:              @screen-lg;
+@screen-lg-desktop:          @screen-lg-min;
+
+// So media queries don't overlap when required, provide a maximum
+@screen-xs-max:              (@screen-sm-min - 1);
+@screen-sm-max:              (@screen-md-min - 1);
+@screen-md-max:              (@screen-lg-min - 1);
+
+
+// Grid system
+// --------------------------------------------------
+
+// Number of columns in the grid system
+@grid-columns:              12;
+// Padding, to be divided by two and applied to the left and right of all columns
+@grid-gutter-width:         30px;
+
+// Navbar collapse
+
+// Point at which the navbar becomes uncollapsed
+@grid-float-breakpoint:     @screen-sm-min;
+// Point at which the navbar begins collapsing
+@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
+
+
+// Navbar
+// -------------------------
+
+// Basics of a navbar
+@navbar-height:                    50px;
+@navbar-margin-bottom:             @line-height-computed;
+@navbar-border-radius:             @border-radius-base;
+@navbar-padding-horizontal:        floor(@grid-gutter-width / 2);
+@navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);
+
+@navbar-default-color:             #777;
+@navbar-default-bg:                #f8f8f8;
+@navbar-default-border:            darken(@navbar-default-bg, 6.5%);
+
+// Navbar links
+@navbar-default-link-color:                #777;
+@navbar-default-link-hover-color:          #333;
+@navbar-default-link-hover-bg:             transparent;
+@navbar-default-link-active-color:         #555;
+@navbar-default-link-active-bg:            darken(@navbar-default-bg, 6.5%);
+@navbar-default-link-disabled-color:       #ccc;
+@navbar-default-link-disabled-bg:          transparent;
+
+// Navbar brand label
+@navbar-default-brand-color:               @navbar-default-link-color;
+@navbar-default-brand-hover-color:         darken(@navbar-default-brand-color, 10%);
+@navbar-default-brand-hover-bg:            transparent;
+
+// Navbar toggle
+@navbar-default-toggle-hover-bg:           #ddd;
+@navbar-default-toggle-icon-bar-bg:        #ccc;
+@navbar-default-toggle-border-color:       #ddd;
+
+
+// Inverted navbar
+//
+// Reset inverted navbar basics
+@navbar-inverse-color:                      @gray-light;
+@navbar-inverse-bg:                         #222;
+@navbar-inverse-border:                     darken(@navbar-inverse-bg, 10%);
+
+// Inverted navbar links
+@navbar-inverse-link-color:                 @gray-light;
+@navbar-inverse-link-hover-color:           #fff;
+@navbar-inverse-link-hover-bg:              transparent;
+@navbar-inverse-link-active-color:          @navbar-inverse-link-hover-color;
+@navbar-inverse-link-active-bg:             darken(@navbar-inverse-bg, 10%);
+@navbar-inverse-link-disabled-color:        #444;
+@navbar-inverse-link-disabled-bg:           transparent;
+
+// Inverted navbar brand label
+@navbar-inverse-brand-color:                @navbar-inverse-link-color;
+@navbar-inverse-brand-hover-color:          #fff;
+@navbar-inverse-brand-hover-bg:             transparent;
+
+// Inverted navbar toggle
+@navbar-inverse-toggle-hover-bg:            #333;
+@navbar-inverse-toggle-icon-bar-bg:         #fff;
+@navbar-inverse-toggle-border-color:        #333;
+
+
+// Navs
+// -------------------------
+
+@nav-link-padding:                          10px 15px;
+@nav-link-hover-bg:                         @gray-lighter;
+
+@nav-disabled-link-color:                   @gray-light;
+@nav-disabled-link-hover-color:             @gray-light;
+
+@nav-open-link-hover-color:                 #fff;
+
+// Tabs
+@nav-tabs-border-color:                     #ddd;
+
+@nav-tabs-link-hover-border-color:          @gray-lighter;
+
+@nav-tabs-active-link-hover-bg:             @body-bg;
+@nav-tabs-active-link-hover-color:          @gray;
+@nav-tabs-active-link-hover-border-color:   #ddd;
+
+@nav-tabs-justified-link-border-color:            #ddd;
+@nav-tabs-justified-active-link-border-color:     @body-bg;
+
+// Pills
+@nav-pills-border-radius:                   @border-radius-base;
+@nav-pills-active-link-hover-bg:            @component-active-bg;
+@nav-pills-active-link-hover-color:         @component-active-color;
+
+
+// Pagination
+// -------------------------
+
+@pagination-bg:                        #fff;
+@pagination-border:                    #ddd;
+
+@pagination-hover-bg:                  @gray-lighter;
+
+@pagination-active-bg:                 @brand-primary;
+@pagination-active-color:              #fff;
+
+@pagination-disabled-color:            @gray-light;
+
+
+// Pager
+// -------------------------
+
+@pager-border-radius:                  15px;
+@pager-disabled-color:                 @gray-light;
+
+
+// Jumbotron
+// -------------------------
+
+@jumbotron-padding:              30px;
+@jumbotron-color:                inherit;
+@jumbotron-bg:                   @gray-lighter;
+@jumbotron-heading-color:        inherit;
+@jumbotron-font-size:            ceil(@font-size-base * 1.5);
+
+
+// Form states and alerts
+// -------------------------
+
+@state-success-text:             #3c763d;
+@state-success-bg:               #dff0d8;
+@state-success-border:           darken(spin(@state-success-bg, -10), 5%);
+
+@state-info-text:                #31708f;
+@state-info-bg:                  #d9edf7;
+@state-info-border:              darken(spin(@state-info-bg, -10), 7%);
+
+@state-warning-text:             #8a6d3b;
+@state-warning-bg:               #fcf8e3;
+@state-warning-border:           darken(spin(@state-warning-bg, -10), 5%);
+
+@state-danger-text:              #a94442;
+@state-danger-bg:                #f2dede;
+@state-danger-border:            darken(spin(@state-danger-bg, -10), 5%);
+
+
+// Tooltips
+// -------------------------
+@tooltip-max-width:           200px;
+@tooltip-color:               #fff;
+@tooltip-bg:                  #000;
+
+@tooltip-arrow-width:         5px;
+@tooltip-arrow-color:         @tooltip-bg;
+
+
+// Popovers
+// -------------------------
+@popover-bg:                          #fff;
+@popover-max-width:                   276px;
+@popover-border-color:                rgba(0,0,0,.2);
+@popover-fallback-border-color:       #ccc;
+
+@popover-title-bg:                    darken(@popover-bg, 3%);
+
+@popover-arrow-width:                 10px;
+@popover-arrow-color:                 #fff;
+
+@popover-arrow-outer-width:           (@popover-arrow-width + 1);
+@popover-arrow-outer-color:           rgba(0,0,0,.25);
+@popover-arrow-outer-fallback-color:  #999;
+
+
+// Labels
+// -------------------------
+
+@label-default-bg:            @gray-light;
+@label-primary-bg:            @brand-primary;
+@label-success-bg:            @brand-success;
+@label-info-bg:               @brand-info;
+@label-warning-bg:            @brand-warning;
+@label-danger-bg:             @brand-danger;
+
+@label-color:                 #fff;
+@label-link-hover-color:      #fff;
+
+
+// Modals
+// -------------------------
+@modal-inner-padding:         20px;
+
+@modal-title-padding:         15px;
+@modal-title-line-height:     @line-height-base;
+
+@modal-content-bg:                             #fff;
+@modal-content-border-color:                   rgba(0,0,0,.2);
+@modal-content-fallback-border-color:          #999;
+
+@modal-backdrop-bg:           #000;
+@modal-header-border-color:   #e5e5e5;
+@modal-footer-border-color:   @modal-header-border-color;
+
+
+// Alerts
+// -------------------------
+@alert-padding:               15px;
+@alert-border-radius:         @border-radius-base;
+@alert-link-font-weight:      bold;
+
+@alert-success-bg:            @state-success-bg;
+@alert-success-text:          @state-success-text;
+@alert-success-border:        @state-success-border;
+
+@alert-info-bg:               @state-info-bg;
+@alert-info-text:             @state-info-text;
+@alert-info-border:           @state-info-border;
+
+@alert-warning-bg:            @state-warning-bg;
+@alert-warning-text:          @state-warning-text;
+@alert-warning-border:        @state-warning-border;
+
+@alert-danger-bg:             @state-danger-bg;
+@alert-danger-text:           @state-danger-text;
+@alert-danger-border:         @state-danger-border;
+
+
+// Progress bars
+// -------------------------
+@progress-bg:                 #f5f5f5;
+@progress-bar-color:          #fff;
+
+@progress-bar-bg:             @brand-primary;
+@progress-bar-success-bg:     @brand-success;
+@progress-bar-warning-bg:     @brand-warning;
+@progress-bar-danger-bg:      @brand-danger;
+@progress-bar-info-bg:        @brand-info;
+
+
+// List group
+// -------------------------
+@list-group-bg:               #fff;
+@list-group-border:           #ddd;
+@list-group-border-radius:    @border-radius-base;
+
+@list-group-hover-bg:         #f5f5f5;
+@list-group-active-color:     @component-active-color;
+@list-group-active-bg:        @component-active-bg;
+@list-group-active-border:    @list-group-active-bg;
+
+@list-group-link-color:          #555;
+@list-group-link-heading-color:  #333;
+
+
+// Panels
+// -------------------------
+@panel-bg:                    #fff;
+@panel-inner-border:          #ddd;
+@panel-border-radius:         @border-radius-base;
+@panel-footer-bg:             #f5f5f5;
+
+@panel-default-text:          @gray-dark;
+@panel-default-border:        #ddd;
+@panel-default-heading-bg:    #f5f5f5;
+
+@panel-primary-text:          #fff;
+@panel-primary-border:        @brand-primary;
+@panel-primary-heading-bg:    @brand-primary;
+
+@panel-success-text:          @state-success-text;
+@panel-success-border:        @state-success-border;
+@panel-success-heading-bg:    @state-success-bg;
+
+@panel-warning-text:          @state-warning-text;
+@panel-warning-border:        @state-warning-border;
+@panel-warning-heading-bg:    @state-warning-bg;
+
+@panel-danger-text:           @state-danger-text;
+@panel-danger-border:         @state-danger-border;
+@panel-danger-heading-bg:     @state-danger-bg;
+
+@panel-info-text:             @state-info-text;
+@panel-info-border:           @state-info-border;
+@panel-info-heading-bg:       @state-info-bg;
+
+
+// Thumbnails
+// -------------------------
+@thumbnail-padding:           4px;
+@thumbnail-bg:                @body-bg;
+@thumbnail-border:            #ddd;
+@thumbnail-border-radius:     @border-radius-base;
+
+@thumbnail-caption-color:     @text-color;
+@thumbnail-caption-padding:   9px;
+
+
+// Wells
+// -------------------------
+@well-bg:                     #f5f5f5;
+
+
+// Badges
+// -------------------------
+@badge-color:                 #fff;
+@badge-link-hover-color:      #fff;
+@badge-bg:                    @gray-light;
+
+@badge-active-color:          @link-color;
+@badge-active-bg:             #fff;
+
+@badge-font-weight:           bold;
+@badge-line-height:           1;
+@badge-border-radius:         10px;
+
+
+// Breadcrumbs
+// -------------------------
+@breadcrumb-bg:               #f5f5f5;
+@breadcrumb-color:            #ccc;
+@breadcrumb-active-color:     @gray-light;
+@breadcrumb-separator:        "/";
+
+
+// Carousel
+// ------------------------
+
+@carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6);
+
+@carousel-control-color:                      #fff;
+@carousel-control-width:                      15%;
+@carousel-control-opacity:                    .5;
+@carousel-control-font-size:                  20px;
+
+@carousel-indicator-active-bg:                #fff;
+@carousel-indicator-border-color:             #fff;
+
+@carousel-caption-color:                      #fff;
+
+
+// Close
+// ------------------------
+@close-font-weight:           bold;
+@close-color:                 #000;
+@close-text-shadow:           0 1px 0 #fff;
+
+
+// Code
+// ------------------------
+@code-color:                  #c7254e;
+@code-bg:                     #f9f2f4;
+
+@pre-bg:                      #f5f5f5;
+@pre-color:                   @gray-dark;
+@pre-border-color:            #ccc;
+@pre-scrollable-max-height:   340px;
+
+// Type
+// ------------------------
+@text-muted:                  @gray-light;
+@abbr-border-color:           @gray-light;
+@headings-small-color:        @gray-light;
+@blockquote-small-color:      @gray-light;
+@blockquote-border-color:     @gray-lighter;
+@page-header-border-color:    @gray-lighter;
+
+// Miscellaneous
+// -------------------------
+
+// Hr border color
+@hr-border:                   @gray-lighter;
+
+// Horizontal forms & lists
+@component-offset-horizontal: 180px;
+
+
+// Container sizes
+// --------------------------------------------------
+
+// Small screen / tablet
+@container-tablet:             ((720px + @grid-gutter-width));
+@container-sm:                 @container-tablet;
+
+// Medium screen / desktop
+@container-desktop:            ((940px + @grid-gutter-width));
+@container-md:                 @container-desktop;
+
+// Large screen / wide desktop
+@container-large-desktop:      ((1140px + @grid-gutter-width));
+@container-lg:                 @container-large-desktop;
+
+
+// Texture offsets
+// --------------------------------------------------
+
+// Common components texture
+@common-controls: "controls/common-controls.png";
+@common-controls2x: "controls/common-controls@2x.png";
+
+// Dialog alerts
+@alerts-offset-x: 0;
+@alerts-offset-y: 0;
+
+// Dialog close
+@but-close-offset-x: -26px;
+@but-close-offset-y: -151px;
+
+// Dropdown arrow
+@arrow-small-offset-x: -85px;
+@arrow-small-offset-y: -96px;
+
+// Dropdown arrow up
+@arrow-up-small-offset-x: -85px;
+@arrow-up-small-offset-y: -104px;
+
+// Dropdown arrow big
+@arrow-big-offset-x: -41px;
+@arrow-big-offset-y: -144px;
+
+// Checkbox
+@checkbox-offset-x: -35px;
+@checkbox-offset-y: 0px;
+
+// Radio button
+@radio-offset-x: -35px;
+@radio-offset-y: -65px;
+
+// Menu check
+@menu-check-offset-x: -41px;
+@menu-check-offset-y: -172px;
+
+// Multislider thumb
+@slide-thumb-offset-x: -13px;
+@slide-thumb-offset-y: -150px;
+
+// Slider thumb
+@multislide-thumb-offset-x: 0px;
+@multislide-thumb-offset-y: -150px;
+
+// Slider track
+@slide-track-offset-x: 0px;
+@slide-track-offset-y: -195px;
+
+// Input error
+@input-error-offset-x: -73px;
+@input-error-offset-y: -172px;
+
+// Spinner
+@spinner-offset-x: -41px;
+@spinner-offset-y: -187px;
+
+// Search dialog
+@search-dlg-offset-x: -36px;
+@search-dlg-offset-y: -96px;
+
+// No color
+@nocolor-offset-x: 0;
+@nocolor-offset-y: -137px;

OfficeWeb/apps/common/main/resources/less/window.less

@@ -0,0 +1,259 @@
+/**
+ *      Window.less
+ *
+ *      Describes styles for base class 'Window'
+ *
+ *      Created by Maxim Kadushkin on 24 January 2014
+ *      Copyright (c) 2014 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+.modals-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    background-color: rgb(0,0,0);
+    z-index: @zindex-modal - 1;
+}
+
+.asc-window {
+    min-height: 50px;
+    min-width: 150px;
+    box-sizing: border-box;
+    z-index: @zindex-modal-background;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+    border-radius: 5px;
+    background-color: @body-bg;
+    border: solid 1px @gray-dark;
+
+    left: 0;
+    top: 0;
+
+    position: fixed;
+
+    .backimage {
+        .background-ximage('@{common-image-path}/@{common-controls}', '@{common-image-path}/@{common-controls2x}', 100px);
+    }
+
+    > .header {
+        height: 34px;
+        border-radius: 5px 5px 0 0;
+        position: absolute;
+        padding: 5px 6px 6px;
+        left: 0;
+        right: 0;
+        top: 0;
+        text-overflow: ellipsis;
+
+        color: @gray-darker;
+        text-align: center;
+        font-size: 12px;
+        font-weight: 700;
+        text-shadow: 1px 1px #f8f8f8;
+        vertical-align: bottom;
+        line-height: 26px;
+
+        .user-select;
+
+        background: @gray-lighter;
+        border-bottom: solid 1px @gray-dark;
+
+        cursor: move;
+
+        .tool {
+            float: right;
+            width: 16px;
+            height: 16px;
+            cursor: pointer;
+            overflow: hidden;
+            padding: 0px;
+            margin: 4px 3px 0px 0px;
+
+            &.close {
+                .backimage;
+                background-position: @but-close-offset-x @but-close-offset-y;
+
+                &:hover {
+                    background-position: @but-close-offset-x @but-close-offset-y - 16px;
+                }
+
+                &.disabled {
+                    background-position: @but-close-offset-x @but-close-offset-y - 32px;
+                    cursor: default;
+                }
+            }
+        }
+    }
+
+    > .body {
+        .user-select;
+        border-radius: 0 0 5px 5px;
+        position: absolute;
+        top: 34px;
+        width: 100%;
+        background-color: @body-bg;
+    }
+
+    &.modal {
+        z-index: @zindex-modal;
+    }
+
+    &.dethrone {
+        z-index: @zindex-modal - 2;
+    }
+
+    &.alert {
+        min-height: 90px;
+        min-width: 230px;
+
+        .body {
+            .info-box {
+                padding: 20px 20px 20px 10px;
+                height: 50px;
+
+                .icon {
+                    float: left;
+                    width: 35px;
+                    height: 35px;
+                    margin: 0 0 0 10px;
+                    background-repeat: no-repeat;
+
+                    &.warn {
+                        .backimage;
+                        height: 32px;
+                        background-position: @alerts-offset-x @alerts-offset-y - 105px;
+                    }
+
+                    &.error {
+                        .backimage;
+                        background-position: @alerts-offset-x @alerts-offset-y - 0;
+                    }
+
+                    &.info {
+                        .backimage;
+                        background-position: @alerts-offset-x @alerts-offset-y - 35px;
+                    }
+
+                    &.confirm {
+                        .backimage;
+                        background-position: @alerts-offset-x @alerts-offset-y - 70px;
+                    }
+                }
+
+                .text {
+                    padding-left: 70px;
+
+                    span {
+                        font-size: 12px;
+                        white-space: nowrap;
+
+                        a {
+                            text-decoration: underline;
+                            color: @gray-deep;
+
+                            &:focus, &:hover {
+                                color: @gray-deep;
+                            }
+                        }
+                    }
+                }
+            }
+
+            .footer {
+                height: 37px;
+                width: 100%;
+                bottom: 0;
+                text-align: center;
+                padding: 7px 0 0 0;
+
+                button {
+                    &:not(:first-child) {
+                        margin-left: 10px;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.modal-dlg {
+    .body {
+        height: auto;
+        padding: 15px;
+
+        .input-row {
+            height: @input-height-base;
+
+            label:not(.checkbox-indeterminate)  {
+                line-height: @input-height-base;
+            }
+
+            div {
+                display: inline-block;
+            }
+        }
+    }
+
+    .footer {
+        padding-top: 15px;
+
+        &.center {
+            text-align: center;
+        }
+
+        &.right {
+            text-align: right;
+        }
+    }
+}
+
+// CopyWarningDialog
+
+.copy-warning {
+    .body {
+        padding: 15px 0;
+
+        & > div {
+            width: 100%;
+            padding: 0 20px;
+        }
+
+        .box {
+            text-align: center;
+            padding-bottom: 15px;
+        }
+        .message{
+            text-align: justify;
+        }
+        .hotkeys {
+            padding-top: 5px;
+
+            > div {
+                display: inline-block;
+            }
+
+            > div:first-child {
+                margin-right: 35px;
+            }
+
+            > div:last-child {
+                margin-left: 35px;
+            }
+
+            .hotkey {
+                font-size: 32px;
+            }
+
+            .message {
+                text-align: center;
+            }
+        }
+
+        .footer {
+            padding: 20px;
+        }
+    }
+}