BackofficeBundle/Resources/public/less/theme/open-orchestra.less
@import "bootstrap/less/mixins/clearfix";
@import "bootstrap/less/variables";
@import "variables.less";
/* ===================================================================
* GLOBAL LAYOUT
* =================================================================*/
.inner {
display: table;
width: 100%;
height: 100%;
table-layout: fixed;
padding-top: 40px;
}
#left-column {
width: 235px;
height: 100%;
position: fixed;
overflow-x: hidden;
overflow-y: auto;
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
top: 40px;
z-index: 20;
.ps-scrollbar-y-rail {
z-index: 10;
background-color: transparent;
opacity: 0.9;
}
.ps-scrollbar-y {
width: 6px;
}
}
#central-column {
background: #e6e6e6;
padding: 10px 30px 10px 265px;
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
display: table-cell;
width: 100%;
&.toggle-left {
padding-left: 90px;
}
}
.top-central-column {
background: @lightGrey;
margin: -10px -30px 10px -30px;
padding: 0;
overflow: hidden;
}
/* ===================================================================
* INITIALIZATION ------- A TRIER
* =================================================================*/
html, body {
font-size: 100%;
height: 100%;
}
body {
background: #fff;
color: @baseColor;
.Roboto;
font-size: @initialFontSize;
margin: 0;
padding: 0;
}
a {
color: @lightBlue;
text-decoration: underline;
&:hover, &:hover {
text-decoration: none;
}
}
h1 {
.Montserrat;
font-weight: 700;
text-transform: uppercase;
.fontSize(24);
padding-bottom: 5px;
margin: 0 0 20px 0;
border-bottom: 3px dotted #ccc;
clear: both;
}
ul {
margin: 0 0 10px 0;
overflow: hidden;
padding: 0 0 0 15px;
zoom: 1;
}
ul li {
line-height: 24px;
padding: 0 0 0 15px;
}
img {
max-width: 100%;
height: auto;
}
a {
&:hover {
cursor: pointer
}
text-decoration: underline;
color: @lightBlue
}
/* erreurs */
.has-error {
.form-control, .form-control:focus {
border: 2px solid @red;
background-color: #ffe1e0;
}
.help-block {
clear: both;
color: @red;
.fontSize(14);
float: left;
font-style: italic;
line-height: 1;
margin-bottom: 0;
}
}
.glyphicon {
&::before {
margin-right: 5px;
font-family: 'Glyphicons Halflings';
position: relative;
top: 2px;
}
}
.fa {
&-trash {
font-size: 22px;
}
}
.btn {
&-nostyle {
background: none;
border: 0 none;
padding: 0;
}
}
/* ===================================================================
* HEADER
* =================================================================*/
.header-region {
position: relative;
z-index: 99;
}
.header {
position: fixed;
width: 100%;
background: #fff;
z-index: 10;
-webkit-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
top: 0;
border-bottom: 1px solid #e6e6e6;
& > div {
float: left;
}
.dropdown-menu {
background: #e6e6e6;
margin: 0;
border-radius: 0;
li {
padding: 0;
margin: 0;
a {
text-decoration: none;
&:hover, &:focus {
background: @paleBlue;
}
}
}
}
.pull-right {
height: 40px;
}
}
.logo {
padding: 5px 15px;
}
.website {
float: left;
.btn {
color: #151722;
.fontSize(14);
font-weight: 400;
letter-spacing: 0;
background: #e6e6e6;
border-right: 1px solid #c7c7c7;
border-left: 1px solid #c7c7c7;
border-radius: 0;
padding: 10px 15px;
}
i {
.fontSize(20);
position: relative;
top: 2px;
margin-left: 7px;
}
}
.home {
float: left;
color: #36aee0;
.fontSize(18);
line-height: 2.222em;
padding: 0 20px;
a {
color: #36aee0;
}
}
.account {
display: inline;
position: relative;
.btn {
background: none;
padding: 0;
.Montserrat;
color: @darkBlue;
.fontSize(13);
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0;
line-height: 3.077em;
span {
font-weight: 700;
}
&:focus {
box-shadow: none;
}
&::before {
content: "\f007";
.FontAwesome;
margin-right: 6px;
}
}
.dropdown-menu {
margin-top: 12px;
}
}
.expand {
.fontSize(18);
color: #fff;
display: inline-block;
margin: 0 10px 0 25px;
line-height: 2.222em;
a {
width: 25px;
height: 25px;
line-height: 25px;
border-radius: 50%;
background-color: @darkBlue;
color: #fff;
display: block;
text-align: center;
}
}
/* ===================================================================
* MAIN MENU
* =================================================================*/
.btn-menu {
color: #6b6e78;
.fontSize(25);
position: fixed;
left: 0;
cursor: pointer;
padding: 0 18px;
top: 90%;
width: 235px;
height: 30px;
text-align: left;
overflow: hidden;
span {
.fontSize(8.5);
color: #fff;
line-height: 30px;
margin-left: 20px;
text-transform: uppercase;
vertical-align: text-top;
}
}
.main-menu {
display: table;
width: 235px;
height: 100%;
table-layout: fixed;
background: #151722;
ul, li {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.level1 {
width: 100%;
vertical-align: top;
& > li > a {
height: 60px;
display: block;
line-height: 60px;
text-align: left;
padding: 0 18px;
color: @lightPurple;
text-transform: uppercase;
span {
margin-left: 20px;
}
&:hover, &:focus {
background: @darkBlue;
}
}
& > .active a {
background: @darkBlue;
}
}
.sublevels {
position: absolute;
background-color: @darkBlue;
width: 0;
vertical-align: top;
padding: 0;
opacity: 0;
right: 0;
top: 0;
height: 0;
margin: 0;
z-index: 1;
-webkit-transition: width 0.3s linear 0.1s;
transition: width 0.3s linear 0.1s;
}
.return {
.Montserrat;
color: #878eaf;
.fontSize(13);
text-transform: uppercase;
a {
display: block;
padding: 20px;
color: #878eaf;
&::before {
content: "\f053";
.FontAwesome;
margin-right: 15px;
}
}
}
.level2 {
.fontSize(14);
color: #fff;
.Montserrat;
a {
line-height: 1.143em;
}
& > li {
padding: 17px 10px 17px 20px;
& > a {
color: #fff;
padding: 6px 0;
}
&.active > a, & > a:hover, & > a:focus {
border-left: 4px solid @lightBlue;
background-color: transparent;
padding-left: 10px;
}
}
.parent > a {
&::after {
content: "\f068";
.FontAwesome;
color: #626a90;
float: right;
}
&.collapsed::after {
content: "\f067";
}
}
}
.level3 {
margin-left: 15px;
list-style: none;
li {
padding: 2px 0;
}
a {
color: #747b9c;
padding: 5px 10px 5px 0;
display: inline-block;
}
li.active, li:hover, li:focus {
color: #a0a9d4;
border-left: 2px solid @lightBlue;
padding-left: 10px;
width: 100%;
}
}
/* sublevel is opened */
&.sublevel-open {
.level1 {
left: 0;
overflow: hidden;
}
.sublevels {
opacity: 1;
width: 74.36%;
min-height: 100%;
height: auto;
padding: 0 0 50px;
}
}
&.sublevel-closed {
.level1 {
width: 100%;
}
.sublevels {
width: 0;
}
}
}
/* main menu toggle in and out */
#left-column {
&.toggle-left {
width: 60px;
.btn-menu {
width: 60px;
.fa {
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
}
}
}
/* ===================================================================
* BREADCRUMB
* =================================================================*/
.breadcrumb-region {
& > div {
display: inline;
}
}
.breadcrumb {
background: @lightGrey;
color: @darkBlue;
.Montserrat;
text-transform: uppercase;
padding: 0;
margin: 0;
border-radius: 0;
overflow: hidden;
float: left;
& > li {
&:not(.breadcrumb-tab) {
.fontSize(11);
padding: 10px;
}
background: @lightGrey;
float: left;
position: relative;
line-height: 20px;
&:first-child {
padding-left: 30px;
}
& + li.breadcrumb-tab::before, &.breadcrumb-tab + li::before {
content: '';
padding: 0;
}
&:not(.breadcrumb-tab) + li:not(.breadcrumb-tab) {
&::before {
content: '>';
color: @darkBlue;
padding: 0;
position: absolute;
left: -2px;
}
}
}
a {
color: @darkBlue;
text-decoration: none;
line-height: 16px;
display: inline-block;
}
}
/* ===================================================================
* LANGUAGES
* =================================================================*/
.languages {
ul {
list-style: none;
margin: 5px 0;
padding: 0;
}
li {
display: inline;
padding-left: 20px;
a {
color: @lightBlue;
text-decoration: underline;
}
img {
margin-right: 10px;
margin-bottom: 10px;
opacity: 0.4;
}
&.active img {
opacity: 1;
}
}
}
/* ===================================================================
* TABS
* =================================================================*/
.nav-tabs {
padding: 0;
margin: 0;
border: none;
li {
padding: 0;
margin: 0;
}
& > li {
& > a {
.Montserrat;
font-weight: 700;
color: #4a4d60;
.fontSize(14);
line-height: 1.214em;
text-transform: uppercase;
background: #d6dbdf;
border-radius: 0;
text-decoration: none;
padding: 9px 10px;
border: none;
&.has-error::after {
content: "\f071";
.FontAwesome;
margin-left: 8px;
color: @red;
}
}
&.active > a,
&.active > a:focus,
&.active > a:hover {
color: @darkBlue;
border: none;
}
}
}
.tab-content {
background: #fff;
padding: 20px 10px;
border-radius: 0 0 10px 10px;
margin-bottom: 30px;
.clearfix;
&.forms {
background-color: transparent;
padding: 0;
}
.tab-content {
background: transparent;
}
}
.blue-tabs {
background: #c9dae7;
& > li > a {
background: #c9dae7;
.fontSize(12);
}
& > li.active > a, & > li.active > a:hover, & > li.active > a:focus, li > a:hover {
background: #e0eaf1;
}
}
.blue-tab-content {
background: #e0eaf1;
}
/* ===================================================================
* BUTTONS
* =================================================================*/
.btn {
font-family: 'Roboto', sans-serif;
font-weight: 700;
letter-spacing: 0.1em;
text-decoration: none;
border: none;
padding: 10px 20px;
&.disabled {
cursor: not-allowed;
}
}
a.btn.disabled {
cursor: not-allowed;
pointer-events: auto;
}
.btn-default {
color: #fff;
background: #6b6e78;
&:hover {
color: #fff;
background-color: #585a62;
}
}
.btn-success {
background-color: @green;
&:hover {
background-color: #1f9a64;
}
}
.btn-danger {
background-color: @red;
&:hover {
background-color: #d63632;
}
}
.btn-info {
background-color: @lightBlue;
&:hover {
background-color: #2f9cc9;
}
}
.btn-border {
background-color: transparent;
color: @darkBlue;
.fontSize(14);
border: 2px solid @darkBlue;
letter-spacing: 0;
padding: 0 5px;
&:hover {
border-color: @purpleGrey;
color: @purpleGrey;
}
}
.btn-large {
padding: 8px 20px;
letter-spacing: 0.1em;
}
.btn-blue {
color: #fff;
.fontSize(14);
background: @darkBlue;
letter-spacing: 0;
padding: 2px 5px;
&:hover {
background-color: @purpleGrey;
color: #fff;
}
}
.btn-return::before {
content: "\f0d9";
.FontAwesome;
margin-right: 4px;
}
.btn-close::before {
content: "\f056";
.FontAwesome;
margin-right: 4px;
}
.btn-open::before {
content: "\f055";
.FontAwesome;
margin-right: 4px;
}
.btn-add::before {
content: "\f067";
.FontAwesome;
margin-right: 4px;
}
.btn-set::before {
content: "\f013";
.FontAwesome;
margin-right: 4px;
}
.btn-edit::before {
content: "\f040";
.FontAwesome;
margin-right: 4px;
}
.btn-browse::before {
content: "\f115";
.FontAwesome;
margin-right: 8px;
}
.btn-remove::before {
content: "\f00d";
.FontAwesome;
margin-right: 8px;
}
.btn-crop::before {
content: "\f125";
.FontAwesome;
margin-right: 4px;
}
.btn-exchange::before {
content: "\f0ec";
.FontAwesome;
margin-right: 4px;
}
/* ===================================================================
* CSS COMPONENTS
* =================================================================*/
.header-results {
margin: 0 0 30px;
.pagination {
margin: 0 0 0 -75px;
}
}
.nb-results {
color: #737687;
font-weight: 500;
.fontSize(18);
span {
color: @lightBlue;
}
}
#filter-items {
color: @baseColor;
font-weight: 400;
letter-spacing: 0;
padding: 8px 10px 8px 20px;
background-color: #fff;
font-size: 100%;
i {
margin-left: 20px;
color: #6b6e78;
}
& + .dropdown-menu {
font-size: 100%;
li {
padding: 0;
}
a {
text-decoration: none;
&:hover {
background: @paleBlue;
}
}
}
}
.text-danger {
color: @red;
}
.text-success {
color: @green;
}
.row {
margin-left: -10px;
margin-right: -10px;
}
.underline-label {
.fontSize(18);
font-weight: 700;
color: #737687;
padding-bottom: 15px;
margin-bottom: 10px;
border-bottom: 1px solid #d5d5d5;
clear: both;
&.no-border {
border: 0;
padding-bottom: 0;
}
}
.group {
.clearfix;
&:not(:first-child) {
margin-top: 40px;
}
}
.well {
background: #f1f1f1;
padding: 10px;
border-radius: 0;
border: none;
box-shadow: none;
.clearfix;
}
.block {
background: #fff;
padding: 20px 30px;
min-height: 115px;
margin: 15px 0;
-webkit-box-shadow: 0px 0px 7px -2px rgba(148,148,148,0.39);
-moz-box-shadow: 0px 0px 7px -2px rgba(148,148,148,0.39);
box-shadow: 0px 0px 7px -2px rgba(148,148,148,0.39);
span {
.fontSize(18);
font-weight: 700;
line-height: 23px;
margin-bottom: 5px;
display: block;
}
p {
line-height: 16px;
margin: 0;
}
}
/* Contents */
.contents {
font-weight: 500;
.action-links {
margin: 0;
padding: 0;
list-style: none;
li {
list-style: none;
position: relative;
padding-left: 30px;
}
a {
position: relative;
color: @lightBlue;
text-decoration: none;
&:hover, &:focus {
text-decoration: underline;
}
&::before {
content: "\f138";
.FontAwesome;
margin-right: 13px;
color: @lightBlue;
float: left;
}
}
}
}
/* List add block */
.add-block .block {
background: #ffffff;
display: block;
color: @baseColor;
text-decoration: none;
height: 100%;
&.shared-block {
background: @grey;
}
&:hover, &:focus, &.active {
cursor: pointer;
background: #fff;
}
}
/* Action buttons */
.top-action-buttons {
display: inline-block;
overflow: hidden;
clear: both;
.btn {
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
}
.top-action-buttons {
margin-bottom: 12px;
}
.bottom-action-buttons {
position: relative;
.btn-group {
position: inherit;
}
.btn-group > .btn + .btn:not(.dropdown-toggle) {
margin-left: 20px;
}
.btn-group > .btn-success + .dropdown-toggle {
background-color: #1f9a64;
}
.dropdown-menu {
padding: 0;
margin: 0;
}
}
/* No item */
.no-item {
.fontSize(18);
color: #737687;
font-weight: 700;
text-align: center;
p {
margin: 0;
}
img {
display: block;
margin: 45px auto 73px;
}
}
/* tooltips */
.form-help-tooltip + .tooltip > .tooltip-inner {
background-color: #e6e6e6;
color: @baseColor;
border-top-left-radius: 0;
border-top-right-radius: 0;
padding: 10px;
max-width: 100%;
}
.form-help-tooltip + .tooltip.bottom > .tooltip-arrow {
top: 0;
left: 50%;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #e6e6e6;
}
.form-help-tooltip {
color: @lightBlue;
text-decoration: none;
margin: 0 0 0 7px;
vertical-align: text-top;
&:focus {
text-decoration: none;
}
}
.bottom-action-buttons {
.form-help-tooltip {
line-height: 2.5em;
float:left;
}
.tooltip > .tooltip-inner {
background-color: #fff;
}
.tooltip.right .tooltip-arrow {
border-right-color: #fff;
}
}
/* date picker */
.datepicker {
position: relative;
&::after {
content: "\f017";
font-family: 'FontAwesome';
color: @baseColor;
position: absolute;
right: 10px;
}
}
/** remove datepicker navigator **/
input[type=date].datepicker::-webkit-inner-spin-button, input[type=date].datepicker::-webkit-calendar-picker-indicator {
display: none;
}
/** button loading **/
button.active-loading {
position: relative;
.fa-spin {
position: absolute;
font-size: 2em;
width: 100%;
left: 0;
top: ~'calc(50% - 13px)';
}
}
/* ===================================================================
* TABLES
* =================================================================*/
.dataTables_wrapper {
position: relative;
& .table-responsive {
position: relative;
min-height: 150px;
.spinner {
left: 50%
}
}
.header-results .list-length select {
padding-right: 30px;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
margin-left: 10px;
}
}
table.dataTable {
i.btn-restore.disabled {
cursor: not-allowed;
color: #999;
}
i.duplicate-icon:hover, i.btn-restore:hover, i.delete-icon:hover {
cursor: pointer;
}
thead {
.sorting:after {
opacity: 0.2;
content: "\e150";
/* sort */
}
.sorting_asc:after {
content: "\e113";
/* sort-by-attributes */
}
.sorting_desc:after {
content: "\e114";
/* sort-by-attributes-alt */
}
}
.data-list-csv:not(:empty) {
background-color: #B4B8C1;
padding: 3px;
border-radius: 5px;
margin: 0 5px 5px 0;
display: inline-block;
}
}
form {
i.fa.fa-arrows {
cursor: move;
color: @lightBlue;
}
}
.table {
& > tbody > tr > td,
& > tbody > tr > th,
& > thead > tr > td,
& > thead > tr > th,
& > tfoot > tr > td,
& > tfoot > tr > th {
border-color: #e6e6e6;
padding: 12px;
}
& > thead > tr > th {
background-color: @lightGrey;
border-bottom: 1px solid #e6e6e6;
font-weight: bold;
color: #151722;
i {
font-size: 0.875em;
margin: 0 3px;
}
}
a {
text-decoration: none;
font-weight: 500;
}
.checkbox-inline {
padding-left: 10px;
}
& > tbody > tr > td:first-child {
//width: 300px;
}
}
.table-striped > tbody > tr {
background-color: #f1f5f8;
&:nth-of-type(2n+1) {
background-color: #fff;
}
}
.table-hide-striped > tbody {
background-color: #f1f5f8;
&:nth-of-type(2n +1) {
background-color: #fff;
}
&.active {
background-color: #f1f5f8;
border: 2px solid #8d8f8e;
}
.accordion-formrow {
& > td {
border-top: 0 none;
padding: 0 12px;
}
.row {
background-color: #e1eaf1;
margin: 0 0 12px;
}
}
&.accordion-formrow-container {
& > tr:first-child > td:first-child {
font-weight: 600;
}
}
.nav-tabs:not(.multi-languages) {
background-color: #c9d9e6;
li {
&.active {
background-color: #e1eaf1;
a {
background: none;
}
}
a {
background: none;
}
}
}
}
.table-form {
border-radius: 0 0 30px 0;
overflow: hidden;
table-layout: fixed;
& > thead > tr > th {
background-color: #d9dbe0;
font-weight: 400;
vertical-align: middle;
}
& > tbody > tr > td:first-child {
font-weight: 500;
}
label {
font-weight: 400;
margin-left: 10px;
}
}
.double-table {
margin: 0;
table-layout: fixed;
}
/* ===================================================================
* ACCORDION
* =================================================================*/
.accordion .action {
clear: both;
a {
margin-right: 10px;
}
}
/* ===================================================================
* PAGINATION
* =================================================================*/
.content-pager {
text-align: center;
}
.pagination > li {
display: inline-block;
padding: 0 5px;
& > a, & > span {
background: #6b6e78;
font-weight: bold;
color: #fff;
.fontSize(14);
border-radius: 50%;
border: none;
padding: 0;
height: 28px;
width: 28px;
line-height: 28px;
}
&:first-child > a, &:first-child > span,
&:last-child > a, &:last-child > span {
border-radius: 50%;
}
&.active > a,
&.active > a:focus,
&.active > a:hover,
&.active > span,
&.active > span:focus,
&.active > span:hover {
color: #050610;
background: #6b6e78;
}
a:focus, a:hover,
span:focus, span:hover {
color: #fff;
background: @darkBlue;
}
}
/* ===================================================================
* TREES
* =================================================================*/
.tree {
position: relative;
.actions {
margin-bottom: 10px;
.btn + .btn {
margin-left: 5px;
}
}
ul, li {
margin: 0;
padding: 0;
}
i.fa {
&.fa-arrows {
cursor: move;
color: @lightBlue;
}
&.fa-square-o {
color: @baseColor;
.fontSize(19);
}
&[class*="fa-chevron-"] {
color: #6b6e78;
&.closed {
-ms-transform: rotate(-90deg); /* IE 9 */
-webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
transform: rotate(-90deg);
}
}
}
ul.children {
min-height: 10px;
& > li {
& > ul.children, & > div {
padding-left: 40px;
}
& div > .fa-arrows {
left: 5px;
}
& div > i[class*="fa-chevron-"] {
left: 30px;
}
}
}
ul.root-level {
& > li > div {
padding-left: 0;
& .fa-arrows {
display: none;
}
& i[class*="fa-chevron-"] {
left: 5px;
}
}
}
li {
list-style: none;
& > div {
display: block;
padding: 13px 0 13px 90px;
border-bottom: 1px solid @paleBlue;
min-height: 50px;
overflow: hidden;
& > span {
float: left;
position: relative;
z-index: 1;
}
&:hover .links {
display: block;
}
}
}
& > ul {
color: @baseColor;
.fontSize(18);
font-weight: 500;
margin: 0;
padding: 0;
& > li {
border: none;
}
}
.links {
margin-left: 30px;
float: left;
display: none;
position: relative;
z-index: 1;
a {
color: @lightBlue;
font-weight: 700;
.fontSize(12);
letter-spacing: 0.1em;
text-decoration: none;
&:hover {
text-decoration: underline;
}
&:not(:first-child)::before {
content: "|";
margin: 0 5px;
}
}
}
/* Legend panel */
.legend-panel {
position: absolute;
right: 0;
top: 0;
z-index: 2;
border: 2px solid @lightGrey;
border-radius: 10px;
min-width: 202px;
.panel-heading {
.fontSize(18);
color: #737687;
font-weight: 700;
border-bottom: 1px solid @lightGrey;
text-align: center;
cursor: pointer;
}
.panel-body {
padding: 3px 10px;
}
}
/* State */
.state {
li {
margin: 0 0 4px;
&::before {
margin-right: 10px;
}
}
}
i.state {
float: left;
position: relative;
z-index: 1;
&::before {
margin-left: 20px;
}
}
i.state::before, .state li::before {
content: "\f0eb";
left: 5px;
background-repeat: no-repeat;
width: 20px;
height: 20px;
display: inline-block;
position: relative;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.state li span {
color: #393d4e;
}
.state li.out-of-bounds::before, i.state.out-of-bounds::before {
content: "";
background-image: url("/images/out-of-bounds.png");
top: 5px;
left: 0;
}
.ui-state-highlight {
height: 50px;
line-height: 1.2em;
background: #ddd;
border: 2px dashed #c9c9c9;
color: #737687;
margin-left: 50px;
}
}
.tree.tree-new-node {
.new-node-link {
padding-left: 30px;
}
}
.tree:not(.tree-new-node) li > div::before {
content: "";
position: absolute;
left: 0; right: 0;
height: 51px;
margin-top: -12px;
}
.tree:not(.tree-new-node) li > div:hover::before {
background: @paleBlue;
}
.tree p.tree-icon {
margin: 0;
float: left;
padding-right: 10px;
position: relative;
z-index: 1;
}
/* ===================================================================
* ALERTS
* =================================================================*/
.alert {
border-width: 2px;
border-radius: 0;
padding: 20px;
}
.alert .heading {
.fontSize(24);
font-weight: 700;
}
.alert p {
line-height: normal;
}
.alert p + .btn {
margin-top: 20px;
}
.alert-success {
background: #fff;
border-color: @green;
color: #0f9b5e;
}
.alert-danger {
background: #fff;
border-color: @red;
color: @red;
}
/* ===================================================================
* MOVEMENT
* =================================================================*/
.node-action-toolbar .row, .content-action-toolbar .row {
padding: 0 10px;
.pull-left, .pull-right {
.form-group {
margin-top: 6px;
}
}
}
.movement {
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
&>.well .row {
padding: 10px;
}
.area {
background-color: #fff;
height: 100%;
border: 2px solid @grey;
position: relative;
padding: 15px 10px;
.block-container .ui-sortable {
min-height: 50px;
height: 100%;
.block-item .move-block i:hover {
cursor: move;
}
}
& > span {
.Montserrat;
color: @darkBlue;
.fontSize(18);
font-weight: 700;
line-height: normal;
text-transform: uppercase;
text-align: center;
display: block;
margin-bottom: 15px;
}
&.disabled {
background: url("/images/block-disabled.png") repeat 0 0;
text-align: center;
& > span {
color: @grey;
font-weight: 700;
.fontSize(24);
margin-bottom: 0;
position: relative;
&::before {
.FontAwesome;
font-size: 2.5em;
display: block;
}
}
& > span::before {
content: "\f18e";
}
}
&.active, &.read {
border-color: #8e8e8e;
background-color: @paleBlue;
&::before {
color: #fff;
position: absolute;
left: -15px;
top: -15px;
background: #8e8e8e;
border-radius: 50%;
width: 30px;
height: 30px;
display: block;
text-align: center;
line-height: 30px;
.FontAwesome;
}
}
&.active {
&::before {
content: "\f040";
}
.toolbar, .add-block {
display: block;
}
}
&.read {
&::before {
content: "\f06e";
}
.toolbar-read {
display: block;
}
}
}
.area {
&:not(.disabled):not(.active):hover {
background-color: @paleBlue;
cursor: pointer;
}
}
.add-block {
display: none;
text-align: center;
position: relative;
margin-bottom: 20px;
&::before {
content: "";
background: #d6dbdf;
width: 100%;
height: 2px;
position: absolute;
left: 0;
top: 12px;
}
span {
background: @paleBlue;
padding: 0 6px;
display: inline-block;
position: relative;
z-index: 1;
.btn-add {
background: #fff;
}
}
}
.panel {
border-radius: 0;
box-shadow: none;
border: 2px solid @grey;
}
.panel-heading {
background-color: #f3f3f3;
border-bottom: 2px solid @grey;
padding: 6px 10px;
}
.panel-body {
padding: 15px 10px;
word-break: break-all;
p {
margin: 0;
line-height: normal;
}
}
.well {
background: #fff;
}
}
.toolbar, .toolbar-read {
display: none;
float: right;
.fontSize(18);
ul, li {
padding: 0;
margin: 0;
list-style: none;
}
li {
display: inline;
margin: 0 2px;
}
a {
color: @darkBlue;
&:hover {
color: @purpleGrey;
}
}
}
/* ===================================================================
* FORMS
* =================================================================*/
/* radio buttons */
.radioBouton('\f058', 22px, 0, 0, @baseColor);
/* checkboxes */
.checkBox('\f14a', 22px, @left: 0, @top: -5px, @color: @darkBlue);
input[type="checkbox"]:not(:checked) + label, input[type="checkbox"]:checked + label {
margin: 0 20px 20px 0;
}
/* surcharge checkbox et checkbox dans les tableaux */
.table,
.tree-form,
.list-checkbox {
//.checkBox('\f14a', 22px, 0, -5px, @darkBlue);
//.radioBouton('\f058', 22px, 0, 0, @baseColor);
}
.list-checkbox {
.form-group {
margin: 0 0 15px;
}
input[type="checkbox"] + label {
line-height: normal;
}
}
/* dropdown stylé */
.styledSelect();
.dropdown-menu {
li {
padding: 0;
margin: 0;
}
}
.form-horizontal {
&.contributor {
.underline-label {
margin-top: 30px;
}
}
.underline-label {
margin: 50px 0 15px 0;
&:first-child {
margin-top: 0;
}
}
.champs-group {
background-color: #ffffff;
border-radius: 0 0 15px 15px;
margin-bottom: 50px;
padding: 28px 10px;
}
}
.form-group {
.spinner {
position: relative;
margin: 0 auto;
left: auto;
}
.control-label {
font-weight: normal;
}
.form-control {
.fontSize(16);
&::-moz-placeholder {
color: @baseColor;
}
&:-ms-input-placeholder {
color: @baseColor;
}
&::-webkit-input-placeholder {
color: @baseColor;
}
&[disabled] {
background-color: #ccc;
pointer-events: auto;
cursor: not-allowed;
&::-moz-placeholder {
color: @lightGrey;
}
&:-ms-input-placeholder {
color: @lightGrey;
}
&::-webkit-input-placeholder {
color: @lightGrey;
}
}
}
[disabled] + .slider {
background-color: #ccc;
pointer-events: auto;
cursor: not-allowed;
}
/* textarea */
textarea {
color: @baseColor;
}
/* radio buttons */
.radio {
padding-left: 0;
}
/* checkboxes */
.checkbox-inline {
padding-left: 0;
}
/* colonnage 30% */
.col-30 {
float: left;
width: 30%;
}
.switch-button {
margin-top: 7px;
}
.switch {
width: 40px;
height: 20px;
position: relative;
display: inline-block;
vertical-align: middle;
margin: 0 5px;
input {
display: none;
&:checked + .slider::before {
background-color: @lightBlue;
-webkit-transform: translateX(20px);
-ms-transform: translateX(20px);
transform: translateX(20px);
}
&:checked:disabled + .slider::before {
background-color: @lightGrey;
-webkit-transform: translateX(20px);
-ms-transform: translateX(20px);
transform: translateX(20px);
}
}
}
.slider {
width: 40px;
height: 20px;
box-sizing: border-box;
border-radius: 10px;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
background-color: #fff;
border: 1px solid #d2e1ec;
&::before {
position: absolute;
content: "";
height: 10px;
width: 10px;
left: 4px;
bottom: 4px;
background-color: @lightGrey;
-webkit-transition: .4s;
transition: .4s;
transition-property: transform;
border-radius: 50%;
}
}
.action {
float: left;
margin-left: 15px;
margin-bottom: 15px;
.fontSize(14);
line-height: 34px;
font-weight: 700;
}
/* multi-line select with arrows */
.mutiselect-label {
font-weight: normal;
text-align: center;
width: 100%;
}
.push-arrows {
padding-top: 95px;
a {
display: block;
line-height: 10px;
text-align: center;
text-decoration: none;
&::before {
font-family: 'FontAwesome';
color: #d9dbe0;
.fontSize(60);
}
}
}
.to-right::before {
content: "\f178";
}
.to-left::before {
content: "\f177";
}
/*tags */
.tags {
height: 38px;
.tag {
background-color: @lightGrey;
padding: 3px 10px;
border-radius: 5px;
margin-right: 5px;
&:before {
content: "\f02b";
font-family: 'FontAwesome';
color: #858c9a;
margin-right: 5px;
}
}
&.disabled {
cursor: not-allowed;
}
}
/** Select 2 **/
.select2-container {
.select2-arrow {
display: none;
}
.select2-choice {
background-image: none;
height: 34px;
padding: 6px 12px;
line-height: 1.42857143;
color: #555;
border: 1px solid #ccc;
border-radius: 4px;
}
.select2-choices .select2-search-choice {
.tags .tag;
border: none;
box-shadow: none;
background-image: none;
line-height: inherit;
&.bg-color-red {
background-color: @red;
color: #fff;
&:before {
color: white;
}
}
div {
display: inline-block;
}
a {
display: inline-block;
position: relative;
right: auto;
left: auto;
top: auto;
padding-left: 20px;
vertical-align: middle;
}
}
}
}
li.orchestra-tree-option-choice {
line-height: 12px;
div.select2-result-label {
line-height: 17px;
}
.hierarchical {
font-family: "Courier New";
font-size: 22px;
line-height: 0;
}
}
fieldset {
display: table-column;
& + fieldset {
margin-top: 50px;
}
}
.required {
&:after {
content: "*";
padding-left: 5px;
}
}
.multi-languages + .tab-content {
padding: 0 14px;
margin-bottom: 0;
}
.oo-input-file {
padding-top: 7px;
.upload-file-info {
margin-left: 10px;
}
}
/* ===================================================================
* SEARCH ENGINE
* =================================================================*/
.search-engine {
background-color: #fff;
border-radius: 0 0 15px 15px;
padding: 28px 10px;
margin-bottom: 50px;
.clearfix;
.form-group {
margin: 6px 0;
}
.form-control {
font-size: 100%;
height: 40px;
}
div[class*='col-'] {
padding-right: 0;
padding-left: 0;
}
.styled-select {
& > select.form-control {
padding-right: 30px;
}
&::after {
color: #6b6e78;
font-size: 1.125em;
top: 8px;
}
}
.control-label {
padding: 10px 30px 0 0;
line-height: 1em;
}
.radio-inline, .checkbox-inline {
padding-left: 0;
}
&.form-inline, & > .form-inline {
.styled-select, .styled-select > select, .dropdown-toggle {
width: 100%;
}
.styled-select {
display: inline-block;
}
.form-group {
padding: 0 0 0 20px;
}
}
}
/* ===================================================================
* CONTRIBUTIONS LANGUE
* =================================================================*/
.contribution {
.contribution-group {
margin-left: -10px;
margin-right: -10px;
.col-md-10 {
padding-right: 0;
}
}
.btn {
margin-top: 7px;
}
.table {
border-bottom: 1px solid #dddddd;
&.table-language {
table-layout: fixed;
td {
padding-left: 0;
padding-right: 0;
vertical-align: middle;
}
}
&.source {
z-index: 1;
}
&.clone {
position: absolute;
display: none;
width: auto;
border-right: 1px dotted #000000;
background-color: #000000;
overflow: auto;
z-index: 1;
}
div.wraper {
overflow: auto;
}
thead td {
font-weight: normal;
background-color: #d9dbe0;
}
th {
font-weight: 500;
overflow-wrap: break-word;
}
.fa {
.fontSize(24);
cursor: pointer;
}
}
.btn-border {
margin-right: 10px;
}
}
/* ===================================================================
* GROUP LIST FOR USER EDIT
* =================================================================*/
.user-groups-list i.fa-trash {
cursor: pointer;
}
.user-groups-list i.fa-close {
cursor: pointer;
}
/* ===================================================================
* GROUP EDIT
* =================================================================*/
.multi-languages.nav-tabs > li > a {
background-color: transparent;
opacity: 0.5;
display: block;
min-height: 33px;
margin-bottom: 10px;
padding-left: 0;
margin-right: 10px;
img, label {
display: inline-block;
}
label {
width: auto;
padding: 5px 5px 0 5px;
}
}
.multi-languages.nav-tabs > li.active > a {
opacity: 1;
}
.multi-languages.nav-tabs > li > a img {
width: 23px;
}
/* ===================================================================
* USER LIST FOR GROUP EDIT
* =================================================================*/
.group-users-list i.fa-close {
cursor: pointer;
}
/* ===================================================================
* ALIAS
* =================================================================*/
#alias {
td:first-child {
width: 15%;
}
td:nth-child(2) {
width: 40%;
}
td:nth-child(3) {
width: 15%;
}
td:nth-child(4) {
width: 27%;
}
td.active {
width: 100%;
padding: 0;
}
td.active > table {
margin: 0;
border: 2px solid #8e8e8e;
td {
border: none;
padding: 12px 30px;
}
tr.edited {
max-height: 0;
-webkit-transition: max-height 0.5s ease-in;
transition: max-height 0.5s ease-in;
&.active {
max-height: 400px;
}
td {
border: none;
padding: 0 8px 8px;
.tab-content {
border-radius: 0;
margin: 0;
}
}
}
}
}
/* ===================================================================
* MODALS
* =================================================================*/
.modal {
text-align: center;
padding: 0!important;
}
.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px; /* Adjusts for spacing */
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
.modal-backdrop {
background-color: @darkBlue;
&.in {
opacity: 0.9;
}
}
.modal-content {
box-shadow: none;
border-radius: 0;
.spinner {
left: 50%
}
.modal-header {
background: #e6e6e6;
color: #737687;
text-align: center;
.site-name {
color: @darkBlue;
}
&.warning {
background: @brand-warning;
color: @paleBlue;
}
&.danger {
background-color: @red;
color: @paleBlue;
}
}
.modal-body {
padding: 35px 45px;
p {
margin-bottom: 20px;
line-height: 18px;
}
}
.btn {
margin-bottom: 0;
}
}
/* ===================================================================
* AUTHENTICATION
* =================================================================*/
#authentication {
background-color: @darkBlue;
position: relative;
height: 100%;
.form-login {
background-color: #fff;
border-radius: 3px;
width: 640px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.header {
border-radius: 3px 3px 0 0;
padding: 5px;
background-color: #e6e6e6;
text-align: center;
color: #737687;
position: relative;
img {
margin-right: 10px;
}
}
.body-login {
padding: 50px 30px 30px;
border-radius: 0 0 3px 3px;
}
.form-group {
margin-bottom: 30px;
&.action-buttons,
.btn {
margin-bottom: 0;
}
.fa {
.fontSize(16);
color: #9fa1aa;
position: absolute;
right: 30px;
top: 10px;
}
}
}
/* ===================================================================
* Node/Content toolbar
* =================================================================*/
.dropdown-workflow.dropdown-loading::after {
content: '';
}
/* ===================================================================
* LOADER
* =================================================================*/
.spinner {
width: 30px;
height: 30px;
background-color: @lightGrey;
position: absolute;
top: 50%;
left: 52.5%;
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
animation: sk-rotateplane 1.2s infinite ease-in-out;
}
@-webkit-keyframes sk-rotateplane {
0% {
-webkit-transform: perspective(120px)
}
50% {
-webkit-transform: perspective(120px) rotateY(180deg)
}
100% {
-webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
}
}
@keyframes sk-rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
}
50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
}
100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
/* ===================================================================
* GRID
* =================================================================*/
.grid {
display: flex;
flex-wrap: wrap;
.grid-item {
display: flex;
flex-direction: column;
}
}
/* ===================================================================
* RESPONSIVE
* =================================================================*/
@media (max-width: @tablet) {
.breadcrumb {
float: none;
}
#central-column {
padding-left: 90px;
&.wide {
padding-left: 265px;
overflow: hidden;
}
}
/* formulaires */
.radio-inline + .radio-inline, .checkbox-inline + .checkbox-inline {
margin-left: 0;
}
.form-group .col-30 {
width: 100%;
}
.form-group .datepicker {
width: 75%;
}
.search-engine.form-inline .form-group {
margin: 6px 0 6px 20px;
}
/* tables */
.table {
& > tbody > tr > td,
& > tbody > tr > th,
& > thead > tr > td,
& > thead > tr > th,
& > tfoot > tr > td,
& > tfoot > tr > th {
padding: 5px;
word-wrap: break-word;
vertical-align: top;
}
}
.double-table, .contribution .table.table-language, .table-form {
table-layout: auto;
}
.contribution .table.table-language td {
padding: 5px;
vertical-align: top;
}
.medias .col-5 {
width: 50%;
}
.dropbox .btn,
.dropbox .btn + .btn {
margin: 0 0 10px;
display: block;
white-space: normal;
}
.tree {
.links {
margin-left: 0;
}
}
}
@media (max-width: @mobile) {
#central-column {
padding: 10px 10px 10px 70px;
&.toggle-left {
padding-left: 70px;
}
&.wide {
padding-left: 245px;
}
}
.radio-inline, .checkbox-inline {
display: block;
}
/* header */
.website {
.btn {
width: 100%;
overflow: hidden;
}
}
.account {
.dropdown-toggle {
overflow: hidden;
width: 20px;
&::before {
.fontSize(22);
line-height: 2;
}
}
.dropdown-menu {
right: 0;
left: auto;
}
}
.home {
.fontSize(20);
line-height: 2;
padding: 0 10px;
float: right;
}
.expand {
margin: 0 10px;
padding: 7.5px 0;
vertical-align: top;
}
.top-action-buttons {
margin-bottom: 0;
}
.languages li {
display: inline-block;
height: 40px;
margin: 0;
overflow: hidden;
padding: 0;
width: 40px;
img {
margin: 0;
}
}
.top-central-column {
margin: -10px -10px 10px;
}
#authentication {
.form-login {
width: 90%
}
.action-buttons {
text-align: center;
label {
margin: 0;
padding: 0;
display: block;
}
}
}
.contents .action-links li {
padding-left: 0;
}
.table-form > tbody > tr > td:first-child {
white-space: normal;
}
.table-responsive {
&.row {
margin: 0 0 15px;
}
.table > thead > tr > th {
white-space: normal;
}
}
/* formulaires */
.form-group .datepicker {
width: 50%;
}
.contribution {
.contribution-group .col-md-10 {
padding: 0;
td {
padding: 5px 2px;
text-align: center;
}
}
}
/*pagination */
.content-pager {
clear: both;
}
.header-results .pagination {
margin: 15px 0 0;
}
.modal {
&.in .modal-dialog {
transform: translate(0px, 50px);
}
}
.search-engine.form-inline {
.styled-select, .styled-select > select {
width: 100%;
}
}
}
.multi-languages.nav-tabs > li > a {
//background-color: #fff;
opacity: 0.5;
}
.multi-languages.nav-tabs > li.active > a {
opacity: 1;
}
.multi-languages.nav-tabs > li > a img {
float: left;
}
/* ===================================================================
* Bootstrap responsive tabs
* =================================================================*/
@media (max-width: @mobile) {
.nav-tabs-responsive {
> li {
display: none;
width: 23%;
> a {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
width: 100%;
text-align: center;
vertical-align: top;
}
&.active {
width: 54%;
&:first-child {
margin-left: 23%;
}
}
&.active,
&.active + li,
&.prev,
&.next {
display: block !important;
}
&.prev,
&.active + li,
&.next {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
&.active + li > a,
&.next > a,
&.prev > a {
-webkit-transition: none;
transition: none;
.text {
display: none;
}
&:after,
&:after {
position: relative;
top: 1px;
display: inline-block;
font-family: 'FontAwesome';
font-style: normal;
font-weight: 400;
line-height: 1;
}
}
&.prev > a:after{
content: "\f0d9";
}
&.next > a:after, &.active + li > a:after {
content: "\f0da";
}
}
}
}