647 lines
11 KiB
CSS
647 lines
11 KiB
CSS
/* generalities */
|
||
|
||
html, body {
|
||
margin: 0;
|
||
font-family: "Bitstream Vera Sans", "Verdana", sans-serif;
|
||
background: #eee;
|
||
color: #3c3c33;
|
||
}
|
||
|
||
html {
|
||
min-height: 100%;
|
||
position: relative;
|
||
}
|
||
|
||
body {
|
||
height: 100%;
|
||
}
|
||
|
||
a {
|
||
color: #0066cc;
|
||
text-decoration: none;
|
||
border-width: 0;
|
||
border-bottom: 1px dotted #ff9900;
|
||
-webkit-transition: color 200ms ease-out;
|
||
}
|
||
|
||
a:hover {
|
||
color: #003388;
|
||
border-style: solid;
|
||
}
|
||
|
||
a img {
|
||
border: 0;
|
||
}
|
||
|
||
dl dt {
|
||
margin : 0;
|
||
padding : 0 0 0 0;
|
||
}
|
||
|
||
dl dd {
|
||
margin : 0.3em 0 1.5em 10px;
|
||
}
|
||
|
||
span.error-message {
|
||
color: #e00;
|
||
font-weight: bold;
|
||
}
|
||
|
||
span.warning {
|
||
background-color: orange;
|
||
}
|
||
|
||
.clear {
|
||
clear: both;
|
||
}
|
||
|
||
|
||
/* from top to bottom */
|
||
|
||
/* top bar */
|
||
|
||
div#top {
|
||
background: black;
|
||
color: #eee;
|
||
text-align: right;
|
||
line-height: 200%;
|
||
height: 2em;
|
||
}
|
||
|
||
div#top a {
|
||
color: #aaa;
|
||
font-weight: normal;
|
||
}
|
||
|
||
div#top a:hover {
|
||
color: #888;
|
||
border: 0;
|
||
}
|
||
|
||
ul.user-info {
|
||
margin: 0;
|
||
padding: 0;
|
||
font-size: 85%;
|
||
font-weight: bold;
|
||
}
|
||
|
||
ul.user-info li {
|
||
display: inline;
|
||
padding-left: 10px;
|
||
padding-right: 3em;
|
||
}
|
||
|
||
ul.user-info a {
|
||
border: none;
|
||
}
|
||
|
||
/* header */
|
||
|
||
div#header {
|
||
background: #ff7800;
|
||
background: linear-gradient(to bottom, #f13600 5%, #ff7800 30%) top right no-repeat;
|
||
color: white;
|
||
padding-left: 25px;
|
||
border-bottom: 1px solid #888;
|
||
position: relative;
|
||
height: 5em;
|
||
}
|
||
|
||
div#header h1:after {
|
||
content: "";
|
||
display: block;
|
||
background: url(../images/banner-green.jpg) top right no-repeat;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0px;
|
||
width: calc(100% - 15em);
|
||
max-width: 75%;
|
||
height: 100%;
|
||
}
|
||
|
||
div#header h1 {
|
||
margin: 0;
|
||
padding: 15px 0 25px 0;
|
||
font-weight: normal;
|
||
text-shadow: 0 2px 15px black;
|
||
}
|
||
|
||
/* main content */
|
||
|
||
div#main-content {
|
||
width: 95%;
|
||
margin-left: 2%;
|
||
padding: 0 6px;
|
||
border: 1px solid #888;
|
||
border-width: 0 1px 1px 0;
|
||
background: white;
|
||
float: left;
|
||
position: relative;
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
}
|
||
|
||
div#main-content h2 {
|
||
font-weight: normal;
|
||
}
|
||
|
||
/* breadcrumb */
|
||
|
||
div#more-user-links {
|
||
padding: 5px 0px;
|
||
font-size: 110%;
|
||
}
|
||
|
||
div#more-user-links a,
|
||
div#more-user-links a:after {
|
||
background: #ccc;
|
||
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
|
||
border: 1px solid #bbb;
|
||
transition: background 0.5s;
|
||
}
|
||
|
||
div#more-user-links a {
|
||
box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
|
||
padding: 4px 12px;
|
||
border-radius: 2px;
|
||
text-decoration: none;
|
||
font-size: 90%;
|
||
color: black;
|
||
}
|
||
|
||
span#breadcrumb {
|
||
display: inline-block;
|
||
margin: 1ex 0;
|
||
}
|
||
|
||
span#breadcrumb a {
|
||
display: inline;
|
||
padding-left: 20px;
|
||
position: relative;
|
||
height: 26px;
|
||
margin-left: -4px;
|
||
}
|
||
|
||
span#breadcrumb a:first-child {
|
||
margin-left: 0;
|
||
padding-left: 16px;
|
||
}
|
||
|
||
span#breadcrumb a:after {
|
||
content: "";
|
||
height: 20px;
|
||
width: 20px;
|
||
-webkit-transform: scale(0.4, 0.707) rotate(45deg);
|
||
-moz-transform: scale(0.4, 0.707) rotate(45deg);
|
||
transform: scale(0.4, 0.707) rotate(45deg);
|
||
display: inline-block;
|
||
position: absolute;
|
||
top: 0px;
|
||
box-shadow: 1px -1px 0px 1px #bbb, 2px -2px 0px 2px white;
|
||
z-index: 100;
|
||
border-width: 1px 1px 0 0;
|
||
}
|
||
|
||
div#more-user-links a:hover,
|
||
div#more-user-links a:hover:after {
|
||
text-decoration: underline;
|
||
background: #aaa;
|
||
}
|
||
|
||
/* page content */
|
||
|
||
div#content {
|
||
margin: 1em 1ex;
|
||
padding: 7px;
|
||
position: relative;
|
||
}
|
||
|
||
div#content h2 {
|
||
margin-top: 0;
|
||
font-weight: normal;
|
||
color: #656551;
|
||
font-size: 18px;
|
||
letter-spacing: -1px;
|
||
line-height: 25px;
|
||
margin-bottom: 20px;
|
||
padding: 0 0 10px 15px;
|
||
position: relative;
|
||
top: 4px;
|
||
border-bottom: 1px dotted #d8d8d8;
|
||
}
|
||
|
||
div#appbar a {
|
||
position: relative;
|
||
top: -45px;
|
||
float: right;
|
||
margin-left: 2em;
|
||
}
|
||
|
||
table.main {
|
||
width: 100%;
|
||
}
|
||
|
||
table.main th {
|
||
font-weight: normal;
|
||
border-bottom: 1px solid #888;
|
||
}
|
||
|
||
table.main td {
|
||
text-align: center;
|
||
}
|
||
|
||
table.main tr td.checkbox {
|
||
width: 1em;
|
||
}
|
||
|
||
table.main tr:nth-child(odd) td {
|
||
background: #eee;
|
||
}
|
||
|
||
table.main tr:hover td {
|
||
background: #ccf;
|
||
cursor: pointer;
|
||
}
|
||
|
||
table.main tr.active td {
|
||
background: #bbf;
|
||
}
|
||
|
||
|
||
/* zone selection */
|
||
|
||
ul.apps {
|
||
margin-top: 2em;
|
||
margin-bottom: 2em;
|
||
}
|
||
|
||
ul.apps li {
|
||
display: block;
|
||
float: left;
|
||
margin-right: 1em;
|
||
margin-bottom: 1em;
|
||
}
|
||
|
||
ul.apps li a {
|
||
background-color: transparent;
|
||
background-repeat: no-repeat;
|
||
background-position: 50% 50%;
|
||
}
|
||
|
||
ul.apps li a {
|
||
display: block;
|
||
width: 120px;
|
||
height: 30px;
|
||
padding-top: 90px;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
border: 1px dotted #666;
|
||
text-decoration: none;
|
||
transition: all .2s ease-in-out;
|
||
-webkit-transition: all .2s ease-in-out;
|
||
-moz-transition: all .2s ease-in-out;
|
||
color: #FF7800;
|
||
}
|
||
|
||
ul.apps li a:hover {
|
||
border: 1px solid #333;
|
||
color: #FF7800;
|
||
}
|
||
|
||
/* footer */
|
||
|
||
div#footer {
|
||
clear: both;
|
||
margin-left: 2%;
|
||
font-size: 60%;
|
||
width: 96%;
|
||
}
|
||
|
||
/* icons */
|
||
|
||
[class^="icon-"]:after, [class*=" icon-"]:after,
|
||
[class^="icon-"]:before, [class*=" icon-"]:before {
|
||
font-family: FontAwesome;
|
||
font-weight: normal;
|
||
font-style: normal;
|
||
display: inline-block;
|
||
text-decoration: none;
|
||
}
|
||
a[class^="icon-"], a[class*=" icon-"] {
|
||
display: inline-block;
|
||
text-decoration: none;
|
||
border: none;
|
||
color: #FF7800;
|
||
}
|
||
|
||
.icon-home-space:before { content: "\f015 "; }
|
||
.icon-remove-sign:before { content: "\f057"; }
|
||
|
||
/* misc */
|
||
|
||
div.bo-block {
|
||
border: 1px solid #e4e4e4;
|
||
background: #fcfcfc;
|
||
color: #505050;
|
||
margin: 1em;
|
||
padding: 1ex;
|
||
}
|
||
|
||
div.bo-block h2 {
|
||
margin: 0;
|
||
border-bottom: 1px solid #bcbcbc;
|
||
color: #474747;
|
||
}
|
||
|
||
div.dimmed-block h2 {
|
||
color: #808080;
|
||
}
|
||
|
||
div.bo-block ul {
|
||
padding-left: 2em;
|
||
padding-bottom: 1ex;
|
||
}
|
||
|
||
div.big-msg-info {
|
||
background: transparent url(../images/info-icon.png) 5px 5px no-repeat;
|
||
width: 30em;
|
||
padding-left: 90px;
|
||
margin: 3em auto;
|
||
min-height: 90px;
|
||
padding-top: 20px;
|
||
}
|
||
|
||
p.paginator a,
|
||
p.paginator span {
|
||
padding: 2px 5px;
|
||
border: 1px solid #aaa;
|
||
}
|
||
|
||
/* widgets & dialogs */
|
||
|
||
textarea:focus,
|
||
input[type="text"]:focus,
|
||
input[type="email"]:focus,
|
||
input[type="password"]:focus,
|
||
textarea,
|
||
input[type="text"],
|
||
input[type="email"],
|
||
input[type="password"] {
|
||
border: 1px solid #bbb;
|
||
padding: 5px 8px;
|
||
background: white;
|
||
color: black;
|
||
box-shadow: inset 0 1px 3px #ddd;
|
||
}
|
||
|
||
textarea:focus,
|
||
input[type="text"]:focus,
|
||
input[type="email"]:focus,
|
||
input[type="password"]:focus {
|
||
box-shadow: 0 0 0px 1px #1999cd;
|
||
}
|
||
|
||
textarea:focus,
|
||
input[type="text"]:focus,
|
||
input[type="email"]:focus,
|
||
input[type="password"]:focus {
|
||
box-shadow: 0 0 0px 1px #1999cd;
|
||
}
|
||
|
||
button::-moz-focus-inner {
|
||
border: 0;
|
||
padding: 1px 0 -1px 0;
|
||
margin: -3px 0 1px 0;
|
||
}
|
||
|
||
a.button, button, input[type=submit] {
|
||
line-height: 100%;
|
||
cursor: pointer;
|
||
border: 1px solid #b7b7b7;
|
||
border-radius: 1px;
|
||
color: #424258;
|
||
padding: 1ex 2ex;
|
||
text-decoration: none;
|
||
background: #aaaaaa;
|
||
background-image: linear-gradient(to bottom, #f9f9f9, #eeeeee);
|
||
box-shadow: 0 2px 2px 0px #ddd;
|
||
}
|
||
|
||
a.button {
|
||
padding-bottom: calc(1ex + 1px);
|
||
}
|
||
|
||
a.button.disabled, button[disabled] {
|
||
background: #f9f9f9;
|
||
color: #888;
|
||
box-shadow: none;
|
||
cursor: default;
|
||
}
|
||
|
||
input[type="submit"][name="submit"] {
|
||
background: #283c54;
|
||
background-image: linear-gradient(to bottom, #1cabe7, #1999cd);
|
||
color: white;
|
||
border-color: #267dae;
|
||
}
|
||
|
||
input[type=submit]:hover {
|
||
border-color: #666;
|
||
}
|
||
|
||
.ui-dialog .ui-widget-content .ui-state-default.delete-button {
|
||
background: #bc4c38;
|
||
background-image: linear-gradient(to bottom, #dc2c18, #a43c28);
|
||
color: white;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.ui-dialog .ui-widget-content .ui-state-default.delete-button:hover {
|
||
border-color: #a43c28;
|
||
}
|
||
|
||
.ui-dialog .ui-widget-content .ui-state-default.submit-button {
|
||
background: #283c54;
|
||
background-image: linear-gradient(to bottom, #1cabe7, #1999cd);
|
||
color: white;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.ui-dialog .ui-widget-content .ui-state-default.submit-button:hover {
|
||
border-color: #283c94;
|
||
}
|
||
|
||
.ui-dialog .ui-widget-content .ui-state-default.ui-button {
|
||
border-radius: 1px;
|
||
}
|
||
|
||
div.ui-widget-overlay {
|
||
background: #333;
|
||
}
|
||
|
||
div.ui-dialog {
|
||
border: 0;
|
||
box-shadow: rgb(102, 102, 102) 0px 0px 20px 2px;
|
||
padding: 0;
|
||
border-radius: 0;
|
||
max-width: 80%;
|
||
}
|
||
|
||
div.ui-dialog .ui-dialog-titlebar {
|
||
background: #eee;
|
||
border-radius: 0;
|
||
border: none;
|
||
}
|
||
|
||
div.ui-dialog .ui-dialog-titlebar button {
|
||
border: transparent;
|
||
background: transparent;
|
||
box-shadow: none;
|
||
}
|
||
|
||
form p {
|
||
margin: 0 0 1em 0;
|
||
}
|
||
|
||
form p label {
|
||
display: block;
|
||
}
|
||
|
||
form p.required label:after {
|
||
padding-left: 1ex;
|
||
content: "*";
|
||
color: red;
|
||
}
|
||
|
||
form p input,
|
||
form p textarea {
|
||
margin-left: 10px;
|
||
}
|
||
|
||
ul.errorlist {
|
||
margin: 0;
|
||
padding: 0;
|
||
color: #e80404;
|
||
list-style: none;
|
||
}
|
||
|
||
form.small p input {
|
||
margin-left: 0;
|
||
}
|
||
|
||
form.small p {
|
||
margin-bottom: 0.5em;
|
||
}
|
||
|
||
form.small label {
|
||
width: 200px;
|
||
display: inline-block;
|
||
}
|
||
|
||
form.small a.button,
|
||
form.small button {
|
||
margin-left: 205px;
|
||
display: inline-block;
|
||
}
|
||
|
||
form.small button + button,
|
||
form.small button + a.button {
|
||
margin-left: 1em;
|
||
}
|
||
|
||
#sidepage {
|
||
position: absolute;
|
||
z-index: 100;
|
||
background: black;
|
||
width: 220px;
|
||
height: 2em;
|
||
text-align: left;
|
||
transition: all 0ms ease-in;
|
||
overflow: hidden;
|
||
}
|
||
|
||
#main.sidepage-expanded {
|
||
margin-left: 220px;
|
||
}
|
||
|
||
#main.enable-transitions,
|
||
#sidepage.enable-transitions {
|
||
transition-duration: 100ms;
|
||
}
|
||
|
||
#sidepage.sidepage-expanded {
|
||
height: 100%;
|
||
background: #23282d url(texture.png);
|
||
overflow: initial;
|
||
}
|
||
|
||
#main {
|
||
transition: margin-left 0ms ease-in;
|
||
}
|
||
|
||
#sidepage span#applabel {
|
||
padding-left: 1em;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
display: block;
|
||
background: black;
|
||
}
|
||
|
||
#sidepage ul#sidepage-menu {
|
||
list-style: none;
|
||
padding: 0;
|
||
}
|
||
|
||
#sidepage ul#sidepage-menu a {
|
||
border: none;
|
||
display: block;
|
||
}
|
||
|
||
#sidepage ul#sidepage-menu li {
|
||
padding-left: 1em;
|
||
position: relative;
|
||
line-height: 24px;
|
||
}
|
||
|
||
ul#sidepage-menu li a {
|
||
background: transparent no-repeat 0 50%;
|
||
padding: 5px 0 5px 25px;
|
||
}
|
||
|
||
#sidepage ul#sidepage-menu .active a {
|
||
color: #eee;
|
||
}
|
||
|
||
#sidepage ul#sidepage-menu li.active,
|
||
#sidepage ul#sidepage-menu li.active:hover {
|
||
background: #215D9C;
|
||
}
|
||
|
||
#sidepage ul#sidepage-menu li:hover {
|
||
background: rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
|
||
#sidepage ul#sidepage-menu li.active:after {
|
||
content: "";
|
||
position: absolute;
|
||
display: block;
|
||
top: 0;
|
||
background: #215D9C;
|
||
right: -17px;
|
||
width: 34px;
|
||
height: 34px;
|
||
-moz-transform: scale(0.4, 0.707) rotate(45deg);
|
||
-webkit-transform: scale(0.4, 0.707) rotate(45deg);
|
||
transform: scale(0.4, 0.707) rotate(45deg);
|
||
}
|
||
|
||
ul#sidepage-menu li a.icon-management { background-image: url(small-icon-management.png); }
|
||
ul#sidepage-menu li a.icon-submission { background-image: url(small-icon-submission.png); }
|
||
ul#sidepage-menu li a.icon-categories { background-image: url(small-icon-categories.png); }
|
||
ul#sidepage-menu li a.icon-workflows { background-image: url(small-icon-workflows.png); }
|
||
ul#sidepage-menu li a.icon-forms { background-image: url(small-icon-forms.png); }
|
||
ul#sidepage-menu li a.icon-roles { background-image: url(small-icon-roles.png); }
|
||
ul#sidepage-menu li a.icon-users { background-image: url(small-icon-users.png); }
|
||
ul#sidepage-menu li a.icon-settings { background-image: url(small-icon-settings.png); }
|