source/assets/css/main.css
/********************************************************
Global HTML Elements
********************************************************/
body {
position: relative;
/*background: url("../images/dark_dotted_@2X.png") repeat;
background-size: 5px 5px;*/
background: #333 url('../images/mainarea_back.jpg') repeat;
}
[ng-cloak] {
display: none;
}
/********************************************************
Generic HTML Elements (p, a, li...)
********************************************************/
html {
height: 100%;
}
body {
height: 100%;
}
h3 {
background: rgb(250, 250, 250);
background: rgba(250, 250, 250, 0.1);
color: white;
font-weight: bold;
padding: 5px;
margin-top: 10px;
margin-bottom: 5px;
}
a, a:visited, a:hover {
color: #1496BB;
cursor: pointer;
}
p {
color: lightgray;
}
p.lead {
font-size: 14px;
}
a {
text-decoration: none;
}
label {
color: #FE6B1B;
}
img {
margin: 10px;
}
input[type=submit] {
text-transform: uppercase;
}
.hidden {
display: none;
}
/********************************************************
Zori specific : layout
********************************************************/
#header {
position: absolute;
}
#main-wrapper {
height: 100%;
}
#front-panel {
height: 100%;
}
#toolbar-panel {
z-index: 2;
width: 100%;
height: 30%;
}
#front-panel-links {
z-index: 1;
width: 100%;
height: 40%;
}
#front-panel-footer {
width: 70%;
height: 30%;
margin-left: 15%;
}
/********************************************************
Zori specific : Front panel
********************************************************/
#front-panel {
padding: 0;
margin: 0;
}
.zori-form-input {
width: 100%;
padding: 5px 1em;
border: 1px solid rgb(250,250,250);
border: 1px solid rgba(250,250,250,0.5);
color: #eee;
background-color: #333333;
background-color: rgba(150, 150, 150, 0.2);
margin-bottom: 10px;
}
.zori-form-input:focus {
border: none;
outline: 0;
background-color: #333333;
background-color: rgba(0, 0, 0, 0.4);
}
.front-panel ::-webkit-input-placeholder {
text-align: center;
}
.front-panel :-moz-placeholder {
text-align: center;
}
.front-panel ::-moz-placeholder {
text-align: center;
}
.front-panel :-ms-input-placeholder {
text-align: center;
}
.front-panel .btn-add-link {
position: absolute;
top: calc(50% - 15px);
width: 20px;
height: 30px;
border: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
padding: 6px 0 4px;
background: rgb(198,198,198); /* Old browsers */
background: -moz-linear-gradient(top, rgba(198,198,198,1) 50%, rgba(165,165,165,1) 51%);
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
padding: 6px 0 4px;
background: rgb(198,198,198); /* Old browsers */
background: -moz-linear-gradient(top, rgba(198,198,198,1) 50%, rgba(165,165,165,1) 51%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,rgba(198,198,198,1)), color-stop(51%,rgba(165,165,165,1)));
background: -webkit-linear-gradient(top, rgba(198,198,198,1) 50%,rgba(165,165,165,1) 51%);
background: -o-linear-gradient(top, rgba(198,198,198,1) 50%,rgba(165,165,165,1) 51%);
background: -ms-linear-gradient(top, rgba(198,198,198,1) 50%,rgba(165,165,165,1) 51%);
background: linear-gradient(to bottom, rgba(198,198,198,1) 50%,rgba(165,165,165,1) 51%);
}
.front-panel .btn-add-link:focus,
.front-panel li:focus {
outline: none;
}
.front-panel .btn-add-link:active {
background: rgb(133,133,133);
}
/********************************************************
Zori specific : toolbar-panel
********************************************************/
#toolbar-panel {
box-shadow: 0 4px 14px #000;
}
#toolbar-panel .inner-wrapper {
position: relative;
width: 70%;
height: 100%;
margin-left: 15%;
}
#main-menu {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
text-align: center;
}
#main-menu:hover {
opacity: 1;
}
#main-menu li {
display: inline-block;
height: 30px;
font-size: 18px;
}
#main-menu .ui-state-active {
opacity: 1;
}
#main-menu .glitz,
#main-menu .glitz a{
opacity: 1;
color: red;
}
#main-menu .icon {
line-height: 30px;
padding: 0 1em;
text-decoration: none;
color: #FFFFFF;
outline: none;
}
#main-menu .icon:active,
#main-menu .ui-state-active .icon {
color: #1496BB;
}
#main-menu span {
display: none;
}
.main-menu-tab {
position: absolute;
top: 100%;
width: 100%;
height: 133%;
/*background-color: #1496BB;*/
}
/********************************************************
Zori specific : Registration modal
********************************************************/
#registration-modal {}
/********************************************************
Zori specific : Front panel links
********************************************************/
#front-panel-links {
background: #111 url('http://tof.canardpc.com/view/de0ea765-089a-488c-8a7a-3f67e458acc8.jpg') repeat;
box-shadow: inset 0 -4px 14px #000;
}
#front-panel-links .inner-wrapper {
position: relative;
width: 70%;
height: 100%;
margin-left: 15%;
}
#front-panel-links ul {
padding: 0;
height: 100%;
display: inline-block;
}
#scroller {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#link-loader {
position: absolute;
top: calc(50% - 10px);
left: calc(50% - 10px);
width: 20px;
height: 20px;
color: #1496BB;
line-height: 20px;
font-size: 18px;
}
/********************************************************
Zori specific : Front panel footer
********************************************************/
#front-panel-footer {
text-align: center;
}
#front-panel-footer blockquote {
display: inline-block;
margin: 0;
font-size: 0.8em;
line-height: 30px;
color: #FFFFFF;
cursor: default;
}
#front-panel-footer blockquote:hover {
opacity: 1;
}
/********************************************************
Zori specific : categories
********************************************************/
.category-block {
display: block;
width: 8px;
overflow: hidden;
margin-right: 1px;
height: 100%;
}
.category {
box-sizing: border-box;
border-radius: 0;
padding: 2px;
width: 100%;
min-height: 10%;
position: relative;
display: block;
cursor: pointer;
background: rgb(198,198,198); /* Old browsers */
background: -moz-linear-gradient(top, rgba(198,198,198,1) 50%, rgba(255,255,255,0.2) 51%, rgba(255,255,255,0.2) 75%, rgba(255,255,255,0) 76%, rgba(255,255,255,0) 100%);
background: -webkit-linear-gradient(top, rgba(198,198,198,1) 50%, rgba(255,255,255,0.2) 51%, rgba(255,255,255,0.2) 75%, rgba(255,255,255,0) 76%, rgba(255,255,255,0) 100%);
background: -o-linear-gradient(top, rgba(198,198,198,1) 50%, rgba(255,255,255,0.2) 51%, rgba(255,255,255,0.2) 75%, rgba(255,255,255,0) 76%, rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(top, rgba(198,198,198,1) 50%, rgba(255,255,255,0.2) 51%, rgba(255,255,255,0.2) 75%, rgba(255,255,255,0) 76%, rgba(255,255,255,0) 100%);
background: linear-gradient(to bottom, rgba(198,198,198,1) 50%, rgba(255,255,255,0.2) 51%, rgba(255,255,255,0.2) 75%, rgba(255,255,255,0) 76%, rgba(255,255,255,0) 100%);
}
/********************************************************
Zori specific : Admin
********************************************************/
.admin-panel .link-list {
padding-left: 0;
list-style-type: none;
}
.link-list .input-group-addon {
padding: 5px;
}
.link-list .input-group-addon input {
width: 30px;
border-radius: 3px;
}
/********************************************************
Zori specific : Elements
********************************************************/
/*.play-button {
background: transparent url("../images/logo-header.png") top left no-repeat;
background-size: 32px 32px;
padding-left: 35px;
height: 32px;
border: none;
width: auto;
text-align: left;
}*/
.loader {
-webkit-animation: cssAnimation 1s infinite linear;
-moz-animation: cssAnimation 1s infinite linear;
-o-animation: cssAnimation 1s infinite linear;
}
@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
to { -webkit-transform: rotate(360deg) scale(1) skew(1deg) translate(0px); }
}
@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
to { -moz-transform: rotate(360deg) scale(1) skew(1deg) translate(0px); }
}
@-o-keyframes cssAnimation {
from { -o-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
to { -o-transform: rotate(360deg) scale(1) skew(1deg) translate(0px); }
}
.opacity-transition {
opacity: 0.3;
transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
-webkit-transition: opacity .2s ease-out;
-o-transition: opacity .2s ease-out;
}
.opacity-transition:hover {
opacity: 1;
}
.loader {
-webkit-animation: cssAnimation 1s infinite linear;
-moz-animation: cssAnimation 1s infinite linear;
-o-animation: cssAnimation 1s infinite linear;
}
@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
to { -webkit-transform: rotate(360deg) scale(1) skew(1deg) translate(0px); }
}
@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
to { -moz-transform: rotate(360deg) scale(1) skew(1deg) translate(0px); }
}
@-o-keyframes cssAnimation {
from { -o-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
to { -o-transform: rotate(360deg) scale(1) skew(1deg) translate(0px); }
}
.opacity-transition {
opacity: 0.3;
transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
-webkit-transition: opacity .2s ease-out;
-o-transition: opacity .2s ease-out;
}
.opacity-transition:hover {
opacity: 1;
}
/********************************************************
Zori specific : Tab control
********************************************************/
.main-menu-tab h2 {
font-weight: bold;
font-size: 1.2em;
color: #FE6B1B;
margin-bottom: 12px;
}
.main-menu-tab form label {
text-transform: uppercase;
font-weight: bolder;
font-size: 0.8em;
color: #FE6B1B;
}
.main-menu-tab input[type=submit] {
background: white;
color: #FE6B1B;
font-weight: bold;
margin-top: 10px;
}
.css-form input.ng-invalid.ng-dirty {
background-color: #FA787E;
}
.css-form input.ng-valid.ng-dirty {
background-color: #78FA89;
}
form .required:after {
content: "*";
}
/********************************************************
Generic tooltip
********************************************************/
.ui-tooltip {
position: absolute;
display: inline-block;
padding: 20px;
color: #FFFFFF;
background-color: #1496BB;
}
.ui-tooltip-content {
display: inline-block;
width: 100%;
color: #FFFFFF;
text-align: center;
}
.ui-tooltip .arrow {
overflow: hidden;
position: absolute;
left: 50%;
margin-left: -5px;
bottom: -8px;
width: 0;
height: 0;
border-style: solid;
border-width: 8.7px 5px 0 5px;
border-color: #1496BB transparent transparent transparent;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
/********************************************************
Generic tabs
********************************************************/
.ui-tabs {
position: relative; /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
zoom: 1;
}
.ui-tabs .ui-tabs-nav {}
.ui-tabs .ui-tabs-nav li {
white-space: nowrap;
}
.ui-tabs .ui-tabs-nav li a {}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a,
.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
.ui-tabs .ui-tabs-nav li.ui-state-processing a {
cursor: text;
}
.ui-tabs .ui-tabs-nav li a,
.ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
cursor: pointer; /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
}
.ui-tabs .ui-tabs-panel {
display: block;
border-width: 0;
padding: 1em 1.4em;
}
.ui-tabs .ui-tabs-hide {
display: none !important;
}