Files
Disco/Disco.Web/ClientSource/Style/Site.less
T
Gary Sharp 3f63281dc4 Feature: Job Queues
Also UI style, theme and element changes
2014-02-03 14:50:08 +11:00

1327 lines
36 KiB
Plaintext

@import "Shared";
// Document Layout
body {
font-size: @FontSizeDefault;
font-family: @FontFamilyBody;
margin: 0;
padding: 0;
color: @FontBodyColour;
&.layout {
background: url(data:image/png;base64,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) /*Images/BackgroundDocument.png*/ left top repeat-x @BackgroundColour;
background: linear-gradient(to bottom, @BackgroundColourGradient 0px, @BackgroundColour 370px) left top repeat-x @BackgroundColour;
min-height: 370px;
}
}
// Primary Layout Elements
.page {
max-width: 1232px;
min-width: 752px;
margin-left: auto;
margin-right: auto;
}
header, #header {
position: relative;
background-color: @HeaderBackgroundColour;
margin: 0;
padding: 0;
height: 34px;
#heading {
float: left;
height: 34px;
i {
display: block;
height: 34px;
width: 34px;
background-image: url(data:image/png;base64,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) /*Images/Heading.png*/;
}
}
nav {
float: left;
height: 34px;
padding: 0;
margin: 0;
ul#menu {
height: 26px;
padding: 0;
margin: 8px 0 0 8px;
list-style: none;
z-index: 100000;
font-size: 0;
line-height: 0;
& > li {
display: inline-block;
z-index: 100000;
font-size: @FontSizeDefault * 1.1;
line-height: @FontSizeDefault * 1.6;
&.moveRight {
margin-left: 40px;
}
& > a {
display: inline-block;
padding: 2px 10px 4px 10px;
height: 20px;
color: @white;
font-weight: 400;
text-transform: uppercase;
text-decoration: none;
&:active {
text-decoration: none;
}
}
&.active > a {
background-color: @MenuActiveBackgroundColour;
}
&:hover > a {
background-color: @MenuHoverBackgroundColour;
text-decoration: none;
}
& > ul {
z-index: 100000;
display: none;
list-style: none;
position: absolute;
margin: 0;
border-left: 1px solid @BackgroundColour;
border-bottom: 1px solid @BackgroundColour;
border-right: 1px solid @BackgroundColour;
background-color: hsla(hue(@BackgroundColour), saturation(@BackgroundColour), 95%, 1);
padding: 0;
min-width: 180px;
box-shadow: 2px 2px 5px fade(@BackgroundColour, 50%);
li {
position: relative;
background-position: top;
background-repeat: repeat-x;
border-top: 1px solid hsla(hue(@BackgroundColour), saturation(@BackgroundColour), 90%, 1);
&:first-child {
border-top: 1px solid @BackgroundColour;
}
&:hover {
border-top: 1px solid hsla(hue(@BackgroundColour), saturation(@BackgroundColour), 85%, 1);
background-color: hsla(hue(@BackgroundColour), saturation(@BackgroundColour), 90%, 1);
}
a {
display: block;
color: @black;
padding: 4px 8px;
text-decoration: none;
&:hover {
color: @HyperLinkColour;
text-decoration: none;
}
&:active {
text-decoration: none;
}
}
i.fa-caret-right {
cursor: pointer;
color: lighten(@HeaderBackgroundColour, 20%);
font-size: 16px;
position: absolute;
display: block;
right: 12px;
top: 7px;
}
&:hover i.fa-caret-right {
color: @HeaderBackgroundColour;
}
}
ul {
display: none;
list-style: none;
position: absolute;
top: -1px;
left: 180px;
background-color: hsla(hue(@BackgroundColour), saturation(@BackgroundColour), 95%, 1);
border-left: 1px solid @BackgroundColour;
border-right: 1px solid @BackgroundColour;
border-bottom: 1px solid @BackgroundColour;
padding: 0;
min-width: 180px;
box-shadow: 2px 2px 5px fade(@BackgroundColour, 50%);
}
}
}
}
}
#headerMenu {
float: right;
height: 24px;
padding: 5px 8px;
font-size: .9em;
line-height: 22px;
text-align: right;
color: @white;
a {
color: @white;
text-decoration: none;
}
a:hover {
color: @MenuHoverColour;
text-decoration: none;
}
}
#SearchQuery {
font-size: 0.9em;
margin-left: 6px;
width: 130px;
background-color: #eee;
-moz-transition-property: width;
-o-transition-property: width;
-webkit-transition-property: width;
transition-property: width;
-moz-transition-duration: .1s;
-o-transition-duration: .1s;
-webkit-transition-duration: .1s;
transition-duration: .1s;
&:hover, &:focus {
background-color: @white;
width: 200px;
}
}
.watermark {
background-color: #888;
}
}
#layout_PageHeading {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAA8CAYAAABfESsNAAAAOUlEQVRIx+2SuREAIAzDFELL/uOSFVLx3Mm1C8nnABaNDJq5WJzAVkZGZXyPMg7+jUwCIeNZmdcZC2pxCZOpoRNgAAAAAElFTkSuQmCC) /*Images/BackgroundPage.png*/ left top repeat-x @white;
background: linear-gradient(to bottom, @BackgroundColourGradient 0px, @white 50px) @white;
height: 50px;
padding: 6px 20px 4px 20px;
font-size: 2em;
color: @black;
line-height: 50px;
position: relative;
border-left: 1px solid @BackgroundColour;
border-right: 1px solid @BackgroundColour;
a {
text-decoration: none;
}
}
#layout_Page {
background-color: @white;
overflow: auto;
border-left: 1px solid @BackgroundColour;
border-right: 1px solid @BackgroundColour;
border-bottom: 1px solid @BackgroundColour;
// min-height: 400px;
padding: 0 30px 15px 30px;
.border-radius4(0, 0, 4px, 4px);
}
#layout_Error {
min-height: 200px;
table {
background-color: @white;
}
h1, h2, h3, h4, h5 {
color: @white;
white-space: pre-wrap;
}
h2.error {
margin-bottom: 10px;
}
.stacktrace {
white-space: pre;
overflow: auto;
}
& > div {
margin: 0 auto;
width: 650px;
}
}
#layout_uiExtensions {
display: none;
}
footer, #footer {
color: #777;
padding: 10px 0;
text-align: center;
margin: 0;
font-size: 0.9em;
a {
&:link, &:visited, &:active {
color: #777;
}
&:link, &:active {
text-decoration: underline;
}
&:hover {
color: @HyperLinkHoverColour;
text-decoration: none;
}
}
}
// Element Resets
p {
margin: 0 0 20px 0;
line-height: 1.6em;
}
ul {
margin: 0;
padding: 0 0 0 25px;
list-style: square;
line-height: 1.6em;
}
header, footer, nav, section {
display: block;
}
form {
display: inline;
}
img {
border: none;
padding: 0;
margin: 0;
vertical-align: bottom;
}
code {
font-family: @FontFamilyMono;
}
hr {
border: none;
border-bottom: 1px dashed #aaa;
margin-top: 15px;
}
// Anchor Tags (Default)
a {
&:link {
color: @HyperLinkColour;
text-decoration: none;
}
&:visited {
color: @HyperLinkColour;
}
&:hover {
color: @HyperLinkHoverColour;
text-decoration: underline;
}
&:active {
color: @HyperLinkColour;
}
&[disabled] {
color: @ButtonBorderHoverColour;
text-decoration: none;
cursor: default;
}
}
// Anchor Tags (Button)
a.button {
display: inline-block;
padding: 4px 10px;
margin: 2px;
border: 1px solid @ButtonBorderColour;
background: @ButtonColour;
color: @white;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
text-decoration: none;
&[disabled], &.disabled {
background: @ButtonHoverColour;
border: 1px solid @ButtonBorderHoverColour;
cursor: default;
}
&.alert {
border-color: @ButtonBorderAlertColour;
background-color: @ButtonAlertColour;
}
&.small {
padding: 2px 5px;
font-size: .9em;
}
&:hover {
border: 1px solid @ButtonBorderHoverColour;
background: @ButtonHoverColour;
}
}
div.actionBar {
margin: 0 -30px 0 -30px;
padding: 10px;
border-top: 1px solid @ActionBarBorder;
text-align: right;
background-color: @ActionBarBackgound;
&:not(:first-child) {
margin-top: 10px;
}
&:last-child {
margin-bottom: -15px;
.border-radius4(0, 0, 6px, 6px);
}
}
h1, h2, h3, h4, h5, h6 {
color: @black;
font-family: @FontFamilyHeading;
font-weight: @FontWeightHeading;
font-stretch: @FontStretchHeading;
margin: 0;
&:first-child {
margin-top: 0 !important;
padding-top: 0 !important;
}
& > a:link {
text-decoration: none;
}
}
h1 {
font-size: 24px;
}
h2 {
font-size: 20px;
padding: 8px 0 4px 0;
}
h3 {
font-size: 18px;
}
h4 {
font-size: 14px;
}
h5, h6 {
font-size: 12px;
font-family: @FontFamilyHeading;
font-stretch: normal;
font-weight: bold;
}
table {
border: none;
border-collapse: collapse;
width: 100%;
td {
padding: 5px;
margin: 0;
border: none;
vertical-align: top;
}
th {
padding: 5px;
margin: 0;
text-align: left;
font-weight: bold;
vertical-align: top;
}
}
table.none {
border: none !important;
tr, td, th {
padding: 0 !important;
margin: 0 !important;
background: none !important;
border: none !important;
}
}
table.genericData {
.tableData;
td.id {
text-align: center;
a {
padding: 0 6px;
}
}
}
.smallTable {
th, td {
font-size: .9em;
}
}
/* Data Table Styles */
.dataTables_wrapper {
position: relative;
.dataTables_filter {
position: absolute;
height: 20px;
margin-top: -20px;
right: 0;
font-size: .9em;
-moz-opacity: 0.3;
opacity: 0.3;
input {
font-size: .95em;
padding: 0;
height: 1.4em;
width: 150px;
}
}
.dataTables_length {
position: absolute;
height: 20px;
margin-top: -20px;
right: 200px;
font-size: .9em;
select {
font-size: .95em;
padding: 0;
height: 1.4em;
}
-moz-opacity: 0.3;
opacity: 0.3;
}
.dataTables_showStatusClosed {
display: block;
position: absolute;
height: 20px;
margin-top: -20px;
right: 320px;
font-weight: bold;
}
.dataTables_paginate {
text-align: right;
background-color: @TableDataBorderColour;
padding: 2px 4px;
font-size: .9em;
a {
cursor: pointer;
padding: 2px;
margin: 0 3px;
color: @HyperLinkColour;
background-repeat: no-repeat;
-moz-opacity: 0.3;
opacity: 0.3;
text-transform: uppercase;
}
.first {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAYAAAA1WQxeAAAAKklEQVQI12NgQALGUe0SQPwfnY0iCcVwNjZJFAxT8J+QAvwmEHQDPl8AAAYqTAY6Jng6AAAAAElFTkSuQmCC) /*Images/Actions/dataTableFirst.png*/;
background-position: left center;
padding-left: 12px;
&.paginate_button_disabled {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAYAAAA1WQxeAAAAKklEQVQI12NgQAKxsbESQPwfnY0iCcVwNjZJFAxT8J+QAvwmEHQDPl8AAEm8TIFT3+fIAAAAAElFTkSuQmCC) /*Images/Actions/dataTableFirstDisabled.png*/;
}
}
.previous {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAYAAAA1WQxeAAAAJUlEQVQI12NgwAGMo9olgPg/XkmsCpAlcSn4T0gBfhMIugFdEQCMVyg5CPiC8wAAAABJRU5ErkJggg==) /*Images/Actions/dataTablePrev.png*/;
background-position: left center;
padding-left: 12px;
&.paginate_button_disabled {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAYAAAA1WQxeAAAAJUlEQVQI12NgwAH6+vokgPg/XkmsCpAlcSn4T0gBfhMIugFdEQDzojUdMBAGjgAAAABJRU5ErkJggg==) /*Images/Actions/dataTablePrevDisabled.png*/;
}
}
.next {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAYAAAA1WQxeAAAAJUlEQVQI12Mwjmr/D8QSDLgAVAFuRUgKsCtCU/CfIhPwugGnLwCZ1Cg5w6CPqwAAAABJRU5ErkJggg==) /*Images/Actions/dataTableNext.png*/;
background-position: right center;
padding-right: 12px;
&.paginate_button_disabled {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAYAAAA1WQxeAAAAJUlEQVQI12Po6+v7D8QSDLgAVAFuRUgKsCtCU/CfIhPwugGnLwDwPjUdLMfQ6AAAAABJRU5ErkJggg==) /*Images/Actions/dataTableNextDisabled.png*/;
}
}
.last {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAYAAAA1WQxeAAAAK0lEQVQI12Mwjmr/D8QSDECAzIYDqCBYApmNTQE6liCk4D/JJuB1A05fAABJ/EwGJKVDGAAAAABJRU5ErkJggg==) /*Images/Actions/dataTableLast.png*/;
background-position: right center;
padding-right: 12px;
&.paginate_button_disabled {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAYAAAA1WQxeAAAAK0lEQVQI12OIjY39D8QSDECAzIYDqCBYApmNTQE6liCk4D/JJuB1A05fAACQykyB48rZCQAAAABJRU5ErkJggg==) /*Images/Actions/dataTableLastDisabled.png*/;
}
}
.paginate_active {
font-weight: bold;
color: @ButtonColour;
}
.paginate_button_disabled {
color: #ccc;
cursor: default;
}
.paginate_enabled_previous {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAYAAAA1WQxeAAAAJUlEQVQI12NgwAGMo9olgPg/XkmsCpAlcSn4T0gBfhMIugFdEQCMVyg5CPiC8wAAAABJRU5ErkJggg==) /*Images/Actions/dataTablePrev.png*/;
background-position: left center;
padding-left: 12px;
}
.paginate_disabled_previous {
color: #ccc;
cursor: default;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAYAAAA1WQxeAAAAJUlEQVQI12NgwAH6+vokgPg/XkmsCpAlcSn4T0gBfhMIugFdEQDzojUdMBAGjgAAAABJRU5ErkJggg==) /*Images/Actions/dataTablePrevDisabled.png*/;
background-position: left center;
padding-left: 12px;
}
.paginate_enabled_next {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAYAAAA1WQxeAAAAJUlEQVQI12Mwjmr/D8QSDLgAVAFuRUgKsCtCU/CfIhPwugGnLwCZ1Cg5w6CPqwAAAABJRU5ErkJggg==) /*Images/Actions/dataTableNext.png*/;
background-position: right center;
padding-right: 12px;
}
.paginate_disabled_next {
color: #ccc;
cursor: default;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAYAAAA1WQxeAAAAJUlEQVQI12Po6+v7D8QSDLgAVAFuRUgKsCtCU/CfIhPwugGnLwDwPjUdLMfQ6AAAAABJRU5ErkJggg==) /*Images/Actions/dataTableNextDisabled.png*/;
background-position: right center;
padding-right: 12px;
}
}
&:hover {
.dataTables_filter, .dataTables_length, .dataTables_paginate a {
-moz-opacity: 1;
opacity: 1;
}
}
table > thead tr > th {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAD6CAYAAACoLMeFAAAAdElEQVRo3u3bOwqAMBAFwBwjh/CUluKRhfVTiil0UYjMwJLqLfmUYUuBtw3jUreKfc2E43aTi/C9Jo3wUR4WAAAAAAAAejBPc90q9jUTjkdNTuGjPj9/bgfpO0i/AgAAAAAAAPQnPZ6YHpBsNEnNefrt4+9Wmn6nW/cZ1MQAAAAASUVORK5CYII=) /*Images/Actions/dataTableSort.png*/;
background-repeat: no-repeat;
&.sorting {
background-position: right center;
cursor: pointer;
}
&.sorting_desc {
background-position: right bottom;
cursor: pointer;
}
&.sorting_asc {
background-position: right top;
cursor: pointer;
}
&.sorting_disabled {
background-image: none;
}
}
}
.jobStatus {
color: @StatusUnknown;
&.Closed {
color: @StatusClosed;
}
&.Open {
color: @StatusOpen;
}
&.AwaitingWarrantyRepair, &.AwaitingRepairs {
color: @StatusAwaitingRepair;
}
&.AwaitingDeviceReturn, &.AwaitingUserAction, &.AwaitingAccountingPayment, &.AwaitingAccountingCharge {
color: @StatusAwaitingUser;
}
&.AwaitingInsuranceProcessing {
color: @StatusAwaitingProcessing;
}
}
.deviceStatus {
color: @StatusUnknown;
&.Decommissioned {
color: @StatusClosed;
}
&.Active {
color: @StatusOpen;
}
&.NotEnrolled {
color: @StatusAwaitingUser;
}
}
#layout_Page > div.jobTable:first-child {
padding-top: 30px;
}
table.jobTable {
.tableData;
table-layout: fixed;
&.hideStatusClosed {
tr[data-status=Closed] {
display: none;
}
}
td.id, th.id {
width: 50px;
text-align: center;
a {
padding: 0 6px;
}
}
tr {
&.statusSlaWarning td {
background-color: mix(lighten(@StatusSlaWarning, 32%), @white, 50%);
&:not(:last-child) {
border-right: 1px solid average(lighten(@StatusSlaWarning, 32%), @TableDataBorderColour);
}
}
&.statusSlaExpired td {
background-color: mix(lighten(@StatusSlaExpired, 38%), @white, 50%);
&:not(:last-child) {
border-right: 1px solid average(lighten(@StatusSlaExpired, 38%), @TableDataBorderColour);
}
}
&:nth-child(odd) {
&.statusSlaWarning td {
background-color: mix(lighten(@StatusSlaWarning, 32%), @TableDataRowBackgroundColor, 50%) !important;
}
&.statusSlaExpired td {
background-color: mix(lighten(@StatusSlaExpired, 38%), @TableDataRowBackgroundColor, 50%) !important;
}
}
&:hover {
&.statusSlaWarning td {
background-color: darken(mix(lighten(@StatusSlaWarning, 32%), @TableDataRowBackgroundColor, 50%), 1%) !important;
}
&.statusSlaExpired td {
background-color: darken(mix(lighten(@StatusSlaExpired, 38%), @TableDataRowBackgroundColor, 50%), 1%) !important;
}
}
}
div.queues {
display: inline-block;
float: right;
}
td.dates, th.dates {
width: 130px;
}
td.type, th.type {
width: 50px;
}
td.device, th.device {
width: 110px;
}
td.user, th.user {
width: 240px;
}
td.technician, th.technician {
width: 80px;
}
td.location, th.location {
width: 200px;
}
}
table.deviceTable {
tr.decommissioned {
background-color: @SubtleColour;
}
}
textarea {
font-size: 12px;
font-family: @FontFamilyBody;
border: 1px solid #ccc;
min-height: 75px;
padding: 2px;
color: #444;
width: 200px;
}
input[type="text"], input[type="password"], input[type="file"], input[type="number"] {
font-size: 12px;
font-family: @FontFamilyBody;
border: 1px solid #ccc;
padding: 2px;
color: #444;
width: 200px;
}
input[type="text"].small, input[type="password"].small, input[type="file"].small, input[type="number"].small {
padding: 0 2px;
width: 150px;
}
input[type="text"].discreet, input[type="password"].discreet, input[type="file"].discreet, input[type="number"].discreet {
border: 1px solid @white;
&:hover, &:focus {
border: 1px solid #ccc;
}
}
input[type="checkbox"], input[type="radio"] {
margin-right: 4px;
vertical-align: sub;
}
select {
font-family: @FontFamilyBody;
font-size: 12px;
border: 1px solid #ccc;
padding: 2px;
color: #444;
}
input[type="submit"], button {
font-family: @FontFamilyBody;
padding: 5px;
&.button {
font-size: 12px;
padding: 4px 10px 4px 10px;
margin: 2px;
border: 1px solid @ButtonBorderColour;
background: @ButtonColour;
color: @white;
font-weight: 600;
text-transform: uppercase;
cursor: pointer;
&.alert {
border-color: @ButtonBorderAlertColour;
background-color: @ButtonAlertColour;
}
&.small {
padding: 2px 5px;
font-size: .9em;
}
&[disabled] {
background: @ButtonHoverColour;
border: 1px solid @ButtonBorderHoverColour;
cursor: default;
}
&:hover {
border: 1px solid @ButtonBorderHoverColour;
background: @ButtonHoverColour;
}
}
}
ul.none {
list-style: none;
margin: 0;
padding: 0;
li {
margin: 0;
}
}
div.form {
margin: 0 auto;
& > p.actions {
text-align: right;
}
& > table {
border-top: 6px solid @FormBorderColour;
border-left: 1px solid @FormBorderColour;
border-right: 1px solid @FormBorderColour;
border-bottom: 3px solid @FormBorderColour;
background-color: @FormBackgroundEvenColour;
& > tbody {
& > tr {
& > td, & > th {
background: none;
border: none;
margin: 0;
padding: 8px 5px;
}
& > th {
font-weight: normal;
text-align: right;
}
&:nth-child(odd) {
background-color: @FormBackgroundOddColour;
margin: 0;
padding: 0;
}
& > td.details {
padding: 0;
}
& > th.name {
width: 150px;
text-align: right;
}
}
}
table.sub {
& > tbody {
& > tr:not(:first-child) {
& > th, & > td {
border-top: 1px dashed #aaa;
}
}
& > tr {
& > th {
font-weight: normal;
text-align: right;
}
& > th.name {
text-align: right;
}
}
}
}
}
}
#pageMenu {
td {
border-right: 1px dashed #aaa;
width: 33%;
padding: 10px;
.pageMenuArea {
& > .fa {
font-size: 1.3em;
color: @ButtonBorderHoverColour;
margin-right: 4px;
}
& > a, & > h3 {
text-decoration: none;
font-size: 1.2em;
}
.pageMenuBlurb {
font-size: 0.9em;
color: #888;
margin-bottom: 10px;
a {
text-decoration: none;
}
}
}
.pageMenuArea:not(:last-child) {
border-bottom: 1px dashed #aaa;
}
.pageMenuArea.noSeperator {
border-bottom: none;
}
}
td:first-child {
padding-left: 0;
}
td:last-child {
border-right: none;
padding-right: 0;
}
}
// Priority Colours
.d-priority-high {
color: @PriorityHigh;
width: 1.2857142857142858em;
text-align: center;
&:before {
content: "\f12a";
}
}
.d-priority-normal {
color: @PriorityNormal;
width: 1.2857142857142858em;
text-align: center;
&:before {
content: "\f068";
}
}
.d-priority-low {
color: @PriorityLow;
width: 1.2857142857142858em;
text-align: center;
&:before {
content: "\f063";
}
}
.fa-stack .d-priority-high, .fa-stack .d-priority-normal, .fa-stack .d-priority-low {
width: 100%;
font-size: .8em;
margin-left: .5em;
margin-top: .4em;
opacity: .6;
}
// Theme Colours
.d-lime {
color: @ThemeLime;
}
.d-green {
color: @ThemeGreen;
}
.d-emerald {
color: @ThemeEmerald;
}
.d-teal {
color: @ThemeTeal;
}
.d-cyan {
color: @ThemeCyan;
}
.d-cobalt {
color: @ThemeCobalt;
}
.d-indigo {
color: @ThemeIndigo;
}
.d-violet {
color: @ThemeViolet;
}
.d-pink {
color: @ThemePink;
}
.d-magenta {
color: @ThemeMagenta;
}
.d-crimson {
color: @ThemeCrimson;
}
.d-red {
color: @ThemeRed;
}
.d-orange {
color: @ThemeOrange;
}
.d-amber {
color: @ThemeAmber;
}
.d-yellow {
color: @ThemeYellow;
}
.d-brown {
color: @ThemeBrown;
}
.d-olive {
color: @ThemeOlive;
}
.d-steel {
color: @ThemeSteel;
}
.d-mauve {
color: @ThemeMauve;
}
.d-sienna {
color: @ThemeSienna;
}
table.subtleHighlight {
border: 1px solid @SubtleBorderColour;
background-color: @SubtleColour;
.border-radius(3px);
}
td.subtleHighlight {
border: 1px solid @SubtleBorderColour;
background-color: @SubtleColour;
.border-radius(3px);
}
.field-validation-error {
color: red;
}
.field-validation-valid {
display: none;
}
.input-validation-error {
border: 1px solid red;
background-color: #ffeeee;
}
.validation-summary-errors {
font-weight: bold;
color: red;
}
.validation-summary-valid {
display: none;
}
.ajaxLoading {
height: 11px;
width: 16px;
display: inline-block;
background-repeat: no-repeat;
background-image: url(data:image/gif;base64,R0lGODlhEAALAPQAAP///zNah+Hm7dng6O7x9DddiTNah1d3nJqtw3+Xs8fS3k5vlm6JqaGzx4KatcrU4FFymDZciHGMq+ru8t/l7Pb3+V9+oeLo7vT2+MTP3LLB0dTc5fHz9gAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCwAAACwAAAAAEAALAAAFLSAgjmRpnqSgCuLKAq5AEIM4zDVw03ve27ifDgfkEYe04kDIDC5zrtYKRa2WQgAh+QQJCwAAACwAAAAAEAALAAAFJGBhGAVgnqhpHIeRvsDawqns0qeN5+y967tYLyicBYE7EYkYAgAh+QQJCwAAACwAAAAAEAALAAAFNiAgjothLOOIJAkiGgxjpGKiKMkbz7SN6zIawJcDwIK9W/HISxGBzdHTuBNOmcJVCyoUlk7CEAAh+QQJCwAAACwAAAAAEAALAAAFNSAgjqQIRRFUAo3jNGIkSdHqPI8Tz3V55zuaDacDyIQ+YrBH+hWPzJFzOQQaeavWi7oqnVIhACH5BAkLAAAALAAAAAAQAAsAAAUyICCOZGme1rJY5kRRk7hI0mJSVUXJtF3iOl7tltsBZsNfUegjAY3I5sgFY55KqdX1GgIAIfkECQsAAAAsAAAAABAACwAABTcgII5kaZ4kcV2EqLJipmnZhWGXaOOitm2aXQ4g7P2Ct2ER4AMul00kj5g0Al8tADY2y6C+4FIIACH5BAkLAAAALAAAAAAQAAsAAAUvICCOZGme5ERRk6iy7qpyHCVStA3gNa/7txxwlwv2isSacYUc+l4tADQGQ1mvpBAAIfkECQsAAAAsAAAAABAACwAABS8gII5kaZ7kRFGTqLLuqnIcJVK0DeA1r/u3HHCXC/aKxJpxhRz6Xi0ANAZDWa+kEAA7AAAAAAAAAAAA) /*Images/Status/loading.gif*/;
margin-bottom: 0;
}
.ajaxOk {
color: @StatusSuccess;
}
.ajaxSave {
color: @StatusInformation;
cursor: pointer;
}
.ajaxRemove {
color: @StatusRemove;
cursor: pointer;
opacity: .8;
&:hover {
opacity: 1;
}
}
#layout_Page div.hiddenDialog {
display: none;
}
// Clearfix
/* float clearing for IE6 */
* html .clearfix {
height: 1%;
overflow: visible;
}
/* float clearing for IE7 */
* + html .clearfix {
min-height: 1%;
}
/* float clearing for everyone else */
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
font-size: 0;
}
div.columnHost {
.column50 {
float: left;
width: 50%;
}
}
// Misc
.hidden {
display: none;
}
.success {
color: @StatusSuccess;
}
.information {
color: @StatusInformation;
}
.warning {
color: @StatusWarning;
}
.error {
color: @StatusError;
}
.alert {
color: @StatusAlert;
}
.smallText {
font-size: 0.9em;
}
.smallMessage {
font-style: italic;
color: #666;
font-size: 0.9em;
}
.nowrap {
white-space: nowrap;
}
.code {
font-family: @FontFamilyMono;
}
div.code {
border: 1px dashed #bbb;
background-color: @white;
margin: 3px 6px;
padding: 4px;
font-size: 0.9em;
}
a.smallLink {
font-size: 0.9em;
}
textarea.block {
width: 250px;
height: 100px;
}
.checkboxBulkSelectContainer {
margin-top: 6px;
font-size: 0.8em;
a {
text-decoration: none;
}
}
.ui-widget .checkboxBulkSelectContainer {
font-size: 1em;
}
#licence {
text-align: justify;
p {
font-size: 0.9em;
}
li {
font-size: 0.9em;
}
}