hobo/hobo/static/css/style.scss

389 lines
6.0 KiB
SCSS
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

div.zone {
clear: both;
}
div.zone h3 {
padding-top: 1em;
}
div.service-block {
background-position: 1em 1em;
background-repeat: no-repeat;
}
div.authentic-block { background-image: url(icons/roles.large.png); }
div.wcs-block { background-image: url(../img/icon-webforms.png); }
div.passerelle-block { background-image: url(icons/connector.large.png); }
div.combo-block { background-image: url(icons/portal.large.png); }
div.chrono-block { background-image: url(icons/calendar.large.png); }
p.being-deployed {
background: url(indicator.gif) no-repeat;
padding-left: 2em;
}
a.delete-service, a.delete-variable, a.delete-tenant {
float: right;
text-decoration: none;
}
a.delete-service:after, a.delete-variable:after, a.delete-tenant:after {
font: normal 1.5em FontAwesome;
content:"\f057";
}
.right {
float: right;
}
.required {
position: relative;
}
.required label:after {
content: '*';
color: #f00;
position: absolute;
top: 0;
}
ul.login li {
list-style-type: none;
margin: .5em auto;
}
ul.login li ul.errorlist {
margin-left: 10em;
}
ul.login label {
float: left;
width: 10em;
}
p.hint::before {
content: "\f05a ";
font-family: FontAwesome;
}
p.hint {
color: #aaa;
}
span.handle {
cursor: move;
display: inline-block;
padding: 0.5ex;
text-align: center;
width: 1em;
}
div#themes-list {
-moz-column-width: 20em;
-webkit-column-width: 20em;
column-width: 20em;
}
div.objects-list > div {
padding: 1ex;
border: 1px solid #bcbcbc;
border-collapse: collapse;
margin-top: -1px;
background: white;
}
div#attributes-list > div {
padding-left: 0;
}
div#attributes-list > div:hover {
background: #f0f0f0;
}
div.objects-list > div.disabled {
color: #aaa;
}
span.extra-info {
font-size: 80%;
color: #aaa;
}
div#attributes-list a {
float: right;
}
h3 span.slug {
font-weight: normal;
font-size: 90%;
}
h4.custom-variables {
cursor: pointer;
}
h4.custom-variables:after {
font-family: FontAwesome;
content: "\f105";
padding-left: 1ex;
color: #999;
transition: color 0.2s ease;
}
h4.custom-variables:hover:after {
color: inherit;
}
h4.custom-variables.toggled:after {
content: "\f107";
}
h4.untoggled + div {
display: none;
}
div.objects-list > div > label {
box-sizing: border-box;
display: block;
width: 100%;
border-left: 20px solid white;
min-height: 20px;
padding-left: 2ex;
}
div.objects-list > div > label > input[type=radio] {
margin-right: 1.5ex;
}
div.buttons {
margin: 1em 0;
}
.service-link {
color: #3c3c33;
box-sizing: border-box;
background: white;
border: 1px solid #ccc;
border-width: 1px 1px 1px 10px;
margin-bottom: 1rem;
width: 49%;
padding: 0 1ex;
.service-title {
margin-top: 0.5rem;
white-space: pre;
overflow: hidden;
}
.service-url {
font-size: 80%;
font-weight: normal;
color: #003388;
}
&:hover {
color: #3c3c33;
.service-url {
border-bottom: 1px dotted #003388;
}
}
&:nth-child(2n+1) {
float: left;
}
&:nth-child(2n) {
float: right;
}
&.op-ok {
border-color: #00b000;
}
&.op-nok {
border-color: #b00000;
}
.service-status-items {
margin-bottom: 0.5rem;
span {
margin-right: 1rem;
}
}
span.op-ok::before {
font-family: FontAwesome;
content: "\f058"; /* check-circle */
display: inline-block;
width: 1.5rem;
color: #00b000;
}
span.op-nok::before {
font-family: FontAwesome;
content: "\f057"; /* times-circle */
display: inline-block;
width: 1.5rem;
color: #b00000;
}
.sec-NaN {
color: #666;
}
.security::before {
font-family: FontAwesome;
content: "\f05a"; /* info-circle */
display: inline-block;
width: 1.5rem;
color: #ffc000;
}
.security.sec-1::before {
color: #00b000;
}
.security.sec-0::before {
color: #00b000;
content: "\f058"; /* check-circle */
}
}
textarea#id_tracking_js {
width: 100%;
}
ul#id_scopes,
ul#id_scopes li {
list-style: none;
margin: 0;
padding: 0;
-moz-column-width: 20em;
-webkit-column-width: 20em;
column-width: 20em;
}
#id_meta_description,
#id_meta_keywords {
width: 100%;
}
a.button.button-paragraph {
box-sizing: border-box;
display: block;
max-width: 100%;
width: 40rem;
margin-bottom: 1rem;
text-align: left;
}
a.button.button-paragraph p {
font-weight: normal;
color: #333;
margin: 0;
margin-bottom: 5px;
line-height: 150%;
&.warning {
&::before {
font-family: FontAwesome;
content: "\f071"; // exclamation-triangle
}
}
}
a.button.button-paragraph:hover p {
color: white;
}
.application-elements {
max-height: 40vh;
overflow-y: scroll;
label {
display: block;
max-width: 40em;
}
}
#application-empty {
background: url(build-application.svg) bottom right no-repeat;
background-size: auto 90%;
width: 100%;
height: 80vh;
}
#no-applications {
background: url(applications.svg) bottom center no-repeat;
background-size: auto 90%;
width: 100%;
height: 80vh;
}
#applications {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.application {
background: white;
flex: 1;
display: flex;
flex-direction: column;
min-width: calc(50% - 0.5em);
max-width: calc(50% - 0.5em);
color: #3c3c33;
box-sizing: border-box;
border: 1px solid #ccc;
margin-bottom: 1rem;
padding: 0 1em;
h3 {
margin-top: 1em;
img {
vertical-align: middle;
}
}
p {
flex: 1;
}
.buttons {
justify-content: flex-end;
}
&--editable {
background-position: right -100px bottom -100px;
background-repeat: no-repeat;
background-size: 200px;
background-image: url(../img/app-gear.svg);
}
}
}
h2.application-title {
img {
vertical-align: middle;
}
}
ul.objects-list.application-content {
span.tag-error {
background: #CD2026;
}
}
#versions {
.version {
background: white;
color: #3c3c33;
box-sizing: border-box;
border: 1px solid #ccc;
margin-bottom: 1rem;
padding: 0 1em;
h3 {
margin-top: 1em;
}
p span {
font-size: 1rem;
opacity: 0.6;
font-weight: normal;
}
.buttons {
justify-content: flex-end;
}
}
}
div.app-parameters--values label {
display: block;
font-weight: bold;
}