io.parrots
Version:
Parrots.io App
768 lines (739 loc) • 30 kB
text/less
::-moz-selection { background: @CLR_BRAND; color: extract(@CLR_1, 9); text-shadow: none; }
::selection { background:@CLR_BRAND; color: extract(@CLR_1, 9); text-shadow: none; }
@-webkit-keyframes start-instance {
25% {color: extract(@CLR_0, 5);}
75% {color: extract(@CLR_1, 9);}
}
/* Standard syntax */
@keyframes start-instance {
25% {color: extract(@CLR_0, 5);}
75% {color: extract(@CLR_1, 9);}
}
@-webkit-keyframes stop-instance {
0% {color: extract(@CLR_1, 9);}
12.5% {color: extract(@CLR_0, 5);}
25% {color: extract(@CLR_D, 8);}
37.5% {color: extract(@CLR_0, 5);}
50% {color: extract(@CLR_D, 8);}
62.5% {color: extract(@CLR_0, 5);}
87.5% {color: extract(@CLR_0, 5);}
100% {color: extract(@CLR_1, 9);}
}
/* Standard syntax */
@keyframes stop-instance {
0% {color: extract(@CLR_1, 9);}
12.5% {color: extract(@CLR_0, 5);}
25% {color: extract(@CLR_D, 8);}
37.5% {color: extract(@CLR_0, 5);}
50% {color: extract(@CLR_D, 8);}
62.5% {color: extract(@CLR_0, 5);}
87.5% {color: extract(@CLR_0, 5);}
100% {color: extract(@CLR_1, 9);}
}
@keyframes gradient {
0% {
background-position: 0 0;
}
100% {
background-position: -200% 0;
}
}
.bar-loader {
z-index: 11;
position: absolute;
top: 50pt;
height: 6pt;
width: 100%;
background: @CLR_BRAND;
background: -webkit-repeating-linear-gradient(left, @CLR_BRAND , rgb(250, 188, 169));
background: -o-repeating-linear-gradient(right, @CLR_BRAND, rgb(250, 188, 169));
background: -moz-repeating-linear-gradient(right, @CLR_BRAND, rgb(250, 188, 169));
background: repeating-linear-gradient(to right, @CLR_BRAND , rgb(250, 188, 169));
}
.animated-gradient {
background: repeating-linear-gradient(to right, @CLR_BRAND 0%, rgb(250, 188, 169) 25%, rgb(250, 188, 169)75%, @CLR_BRAND 100%);
width: 100%;
height: 10px;
background-size: 200% auto;
background-position: 0 100%;
animation: gradient 1s infinite;
animation-fill-mode: forwards;
animation-timing-function: linear;
}
.icon-sort-down {
margin-left: 12px;
color: @CLR_BRAND;
&:before {
content: "K";
font-family: 'PhloxGlyphicons';
font-size: 10pt;
}
}
.icon-sort-up {
margin-left: 12px;
color: @CLR_BRAND;
&:before {
content: "L";
font-family: 'PhloxGlyphicons';
font-size: 10pt;
}
}
.coa-scroll {
& {
// overflow: auto;
overflow-x: hidden;
&::-webkit-scrollbar-track {
// -webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0);
background-color: extract(@CLR_1, 9);
}
&::-webkit-scrollbar {
width: 6px;
background-color: extract(@CLR_1, 9);
}
&::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: extract(@CLR_1, 5);
}
}
}
.icon-arrow-right {
display: flex;
&:before {
content: "C";
font-family: 'PhloxGlyphicons';
font-size: 10pt;
}
}
parrots-page-main {
position: absolute;
width: 100%;
height: 100%;
}
.wrapper-page-main {
position: relative;
width: 100%;
height: 100%;
// MenuTop 50pt + Bar Loader 6pt
padding-top: 56pt;
>.preload-parrots-page-main-menu-top {
position: absolute;
top: 0;
z-index: 9999;
height: 50pt;
width: 100%;
background-color: extract(@CLR_0, 3);
}
//MenuTop
parrots-page-main-menu-top {
position: absolute;
width: 100%;
top: 0;
>.parrots-page-main-menu-top {
display: flex;
-webkit-user-select: none; /* Safari 3.1+ */
-moz-user-select: none; /* Firefox 2+ */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Standard syntax */
z-index: 9999;
height: 50pt;
width: 100%;
position: absolute;
background-color: extract(@CLR_0, 3);
>.wrapper-instance-collection-menu {
width: 4.5%;
display: flex;
border-right: 0.5px solid extract(@CLR_0, 5);
>.instance-collection-menu {
cursor: pointer;
height: @MENU_TOP_WRAPPER_INSTANCE_COLLECTION_MENU_ICON_HEIGHT;
width: @MENU_TOP_WRAPPER_INSTANCE_COLLECTION_MENU_ICON_WIDGTH;
color: extract(@CLR_1, 9);
display: @MENU_TOP_WRAPPER_INSTANCE_COLLECTION_MENU_ICON_DISPLAY;
justify-content: @MENU_TOP_WRAPPER_INSTANCE_COLLECTION_MENU_ICON_JUSTIFY_CONTENT;
align-items: @MENU_TOP_WRAPPER_INSTANCE_COLLECTION_MENU_ICON_ALIGN_ITEMS;
>.icon-close {
margin: 15px;
display: flex;
&:before {
cursor: pointer;
content: "Y";
font-family: 'PhloxGlyphicons';
font-size: 15pt;
}
}
}
}
div {
display: flex;
width: 96%;
>.wrapper-left-menu{
left: 5%;
height: 50pt;
position: absolute;
display: flex;
width: 12.5%;
.start-instance {
-webkit-transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
-webkit-animation: start-instance 1.5s infinite; /* Safari 4+ */
-moz-animation: start-instance 1.5s infinite; /* Fx 5+ */
-o-animation: start-instance 1.5s infinite; /* Opera 11.5+ */
animation: start-instance 1.5s infinite; /* IE 10+, Fx 29+ */
}
.stop-instance {
-webkit-transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
-webkit-animation: stop-instance 1.5s infinite; /* Safari 4+ */
-moz-animation: stop-instance 1.5s infinite; /* Fx 5+ */
-o-animation: stop-instance 1.5s infinite; /* Opera 11.5+ */
animation: stop-instance 1.5s infinite; /* IE 10+, Fx 29+ */
}
>.brand-menu{
.FC1();
cursor: pointer;
width: 100vw ;
overflow: hidden ;
text-overflow: ellipsis;
white-space: nowrap;
display: @MENU_TOP_WRAPPER_LEFT_MENU_BRAND_DISPLAY ;
height: @MENU_TOP_WRAPPER_LEFT_MENU_BRAND_HEIGHT;
margin-left: 20px;
margin-right: 9px;
color: extract(@CLR_1, 9);
justify-content: @MENU_TOP_WRAPPER_LEFT_MENU_BRAND_JUSTIFY_CONTENT;
align-items: @MENU_TOP_WRAPPER_LEFT_MENU_BRAND_ALIGN_ITEMS;
}
>.wrapper-left-line-menu{
height: @MENU_TOP_WRAPPER_LEFT_MENU_LEFT_LINE_HEIGHT;
margin-left: 10px;
margin-right: 10px;
display: @MENU_TOP_WRAPPER_LEFT_MENU_LEFT_LINE_DISPLAY;
justify-content: @MENU_TOP_WRAPPER_LEFT_MENU_LEFT_LINE_JUSTIFY_CONTENT;
align-items: @MENU_TOP_WRAPPER_LEFT_MENU_LEFT_LINE_ALIGN_ITEMS;
>.vertical-lines-menu{
height: @MENU_TOP_WRAPPER_LEFT_MENU_LEFT_LINE_VERTICAL_HEIGHT;
width: @MENU_TOP_WRAPPER_LEFT_MENU_LEFT_LINE_VERTICAL_WIDGTH;
background-color: extract(@CLR_0, 5);
display: @MENU_TOP_WRAPPER_LEFT_MENU_LEFT_LINE_VERTICAL_DISPLAY;
justify-content: @MENU_TOP_WRAPPER_LEFT_MENU_LEFT_LINE_VERTICAL_JUSTIFY_CONTENT;
align-items: @MENU_TOP_WRAPPER_LEFT_MENU_LEFT_LINE_VERTICAL_ALIGN_ITEMS;
}
}
>.wrapper-power-menu{
height: @MENU_TOP_WRAPPER_LEFT_MENU_POWER_HEIGHT;
width: @MENU_TOP_WRAPPER_LEFT_MENU_POWER_WIDGTH;
color: extract(@CLR_1, 9);
display: @MENU_TOP_WRAPPER_LEFT_MENU_POWER_DISPLAY;
justify-content: @MENU_TOP_WRAPPER_LEFT_MENU_POWER_JUSTIFY_CONTENT;
align-items: @MENU_TOP_WRAPPER_LEFT_MENU_POWER_ALIGN_ITEMS;
}
>.wrapper-power-dropdown {
position: relative;
display: inline-block;
}
.blur-power-dropdown {
z-index: -1;
position: fixed;
display: block;
width: 0;
height: 0;
border: 0;
padding: 0;
}
.dropdown-content {
display: none;
position: absolute;
right: 4.5%;
background-color: extract(@CLR_1, 9);
width: 164px;
margin-top: 35pt;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 3;
>.line-dropdown-content {
position: absolute;
background-color: extract(@CLR_1, 7);
width: 100%;
height: 1pt;
}
>.title-dropdown-content{
cursor: pointer;
display: flex;
height: 37pt;
align-items: center;
padding-left: 25px;
color: extract(@CLR_0, 1);
}
.title-dropdown-content:hover {
color: @ACCOUNT_AUTHENTICATION_PAGE_BACKGROUND_COLOR_STEP_1;
background-color: extract(@CLR_1, 8);
}
}
.button-power {
display: flex;
&:before {
cursor: pointer;
content: "Q";
font-family: 'PhloxGlyphicons';
font-size: 16pt;
transform: rotate(180deg);
}
}
.show-dropdown-content {
display: block;
}
}
>.wrapper-center-menu {
left: 15.3%;
width: 57.5%;
.FC1();
height: @MENU_TOP_WRAPPER_CENTER_MENU_HEIGHT;
display: @MENU_TOP_WRAPPER_CENTER_MENU_DISPLAY;
justify-content: @MENU_TOP_WRAPPER_CENTER_MENU_JUSTIFY_CONTENT;
align-items: @MENU_TOP_WRAPPER_CENTER_MENU_ALIGN_ITEMS;
position: absolute;
>.button-center-menu {
cursor: pointer;
display: @MENU_TOP_WRAPPER_CENTER_MENU_BUTTON_DISPLAY;
color: extract(@CLR_1, 9);
justify-content: @MENU_TOP_WRAPPER_CENTER_MENU_BUTTON_JUSTIFY_CONTENT;
align-items: @MENU_TOP_WRAPPER_CENTER_MENU_BUTTON_ALIGN_ITEMS;
margin: 0 21px;
}
.active {
color: @ACCOUNT_AUTHENTICATION_PAGE_BACKGROUND_COLOR_STEP_1;
}
.none {
cursor: unset;
color: extract(@CLR_0, 4);
}
}
>.wrapper-rigth-menu {
position: @MENU_TOP_WRAPPER_RIGTH_MENU_POSITION;
right: 0;
width: 27%;
height: @MENU_TOP_WRAPPER_RIGTH_MENU_HEIGHT;
color: extract(@CLR_1, 9);
display: @MENU_TOP_WRAPPER_RIGTH_MENU_DISPLAY;
justify-content: @MENU_TOP_WRAPPER_RIGTH_MENU_JUSTIFY_CONTENT;
align-items: @MENU_TOP_WRAPPER_RIGTH_MENU_ALIGN_ITEMS;
>.wrapper-rigth-line-menu {
height: @MENU_TOP_WRAPPER_RIGTH_MENU_RIGTH_LINE_HEIGHT;
padding-left: @MENU_TOP_WRAPPER_RIGTH_MENU_RIGTH_LINE_PADDING_LEFT;
padding-right: 20px;
display: @MENU_TOP_WRAPPER_RIGTH_MENU_RIGTH_LINE_DISPLAY;
justify-content: @MENU_TOP_WRAPPER_RIGTH_MENU_RIGTH_LINE_JUSTIFY_CONTENT;
align-items: @MENU_TOP_WRAPPER_RIGTH_MENU_RIGTH_LINE_ALIGN_ITEMS;
>.vertical-lines-menu {
height: @MENU_TOP_WRAPPER_RIGTH_MENU_RIGTH_LINE_VERTICAL_HEIGHT;
width: 1px;
background-color: extract(@CLR_0, 5);
display: @MENU_TOP_WRAPPER_RIGTH_MENU_RIGTH_LINE_VERTICAL_DISPLAY;
justify-content: @MENU_TOP_WRAPPER_RIGTH_MENU_RIGTH_LINE_VERTICAL_JUSTIFY_CONTENT;
align-items: @MENU_TOP_WRAPPER_RIGTH_MENU_RIGTH_LINE_VERTICAL_ALIGN_ITEMS;
}
}
>.wrapper-email-menu {
color: extract(@CLR_1, 9);
cursor: pointer;
display: @MENU_TOP_WRAPPER_RIGTH_MENU_EMAIL_DISPLAY;
justify-content: @MENU_TOP_WRAPPER_RIGTH_MENU_EMAIL_JUSTIFY_CONTENT;
align-items: @MENU_TOP_WRAPPER_RIGTH_MENU_EMAIL_ALIGN_ITEMS;
>.img-user-menu {
background-position: center center;
width: @MENU_TOP_WRAPPER_RIGTH_MENU_EMAIL_IMG_USER_WIDGTH;
height: @MENU_TOP_WRAPPER_RIGTH_MENU_EMAIL_IMG_USER_HEIGHT;
border-radius: @MENU_TOP_WRAPPER_RIGTH_MENU_EMAIL_IMG_USER_BORDER_RADIUS;
margin-right: @MENU_TOP_WRAPPER_RIGTH_MENU_EMAIL_IMG_USER_MARGIN_RIGHT;
}
}
>.icon-note {
margin: 15px;
display: flex;
&:before {
cursor: pointer;
content: "q";
font-family: 'PhloxGlyphicons';
font-size: 20pt;
transform: rotate(180deg);
}
}
>.icon-signal {
margin: 15px;
display: flex;
&:before {
cursor: pointer;
content: "Z";
font-family: 'PhloxGlyphicons';
font-size: 13pt;
transform: rotateY(180deg);
}
}
>.icon-logout {
margin: 15px;
display: flex;
&:before {
cursor: pointer;
content: "X";
font-family: 'PhloxGlyphicons';
font-size: 16pt;
transform: rotate(180deg);
}
}
}
}
}
//End MenuTop
}
}
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
parrots-page-instance-collection {
z-index: 10;
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
// Instance-CollectionPage
.parrots-page-instance-collection {
padding-top: 56pt;
width: 100%;
height: 100%;
background-color: extract(@CLR_0, 3);
>.wrapper-page {
margin-left: 100px;
margin-right: 100px;
>.col-md-12 {
margin-top: 30pt;
margin-bottom: 30pt;
>.col-md-6 {
>.create-instance{
color: extract(@CLR_1, 9);
cursor: pointer;
}
>.icon-search {
display: flex;
justify-content: flex-end;
color: extract(@CLR_1, 9);
&:before {
cursor: pointer;
content: "s";
font-family: 'PhloxGlyphicons';
font-size: 20pt;
transform: rotateY(180deg);
}
}
}
>.col-md-2 {
padding-left: 7px;
padding-right: 7px;
margin-bottom: 7px;
margin-top: 7px;
cursor: pointer;
>.wrapper-instance {
display: block;
height: 156pt;
background-color: extract(@CLR_1, 9);
div {
>.icon-stop {
display: flex;
right: 13px;
top: 2pt;
position: absolute;
&:before {
cursor: pointer;
content: "l";
font-family: 'PhloxGlyphicons';
font-size: 12pt;
}
}
>.icon-online {
display: flex;
position: absolute;
width: 12px;
height: 12px;
top: 4pt;
left: 13px;
border-radius: 6px;
background-color: greenyellow;
}
}
>.icon-play {
display: flex;
right: 13px;
top: 2pt;
position: absolute;
&:before {
cursor: pointer;
content: "E";
font-family: 'PhloxGlyphicons';
font-size: 12pt;
}
}
>.wrapper-icon-instance {
display: flex;
justify-content: center;
padding-top: 35pt;
padding-bottom: 27pt;
>.icon-instance {
width: unset;
height: unset;
}
}
>.wrapper-instance-name {
display: flex;
justify-content: center;
>.instance-name {
display: flex;
}
.selected {
color: @CLR_BRAND;
}
}
}
>.wrapper-glyphicon-plus {
display: flex;
align-items: center;
justify-content: center;
border: 1px dashed extract(@CLR_0, 5);
height: 156pt;
>.icon-plus {
color: extract(@CLR_1, 9);
&:before {
content: "a";
font-family: 'PhloxGlyphicons';
font-size: 13pt;
}
}
}
}
}
}
}
// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1225px) {
.parrots-page-main-menu-top{
>.wrapper-instance-collection-menu {
>.instance-collection-menu{
height: @MEDIA_MENU_TOP_HEIGHT;
}
>.wrapper-full-line-menu{
height: @MEDIA_MENU_TOP_HEIGHT;
}
}
div {
width: 96%;
>.wrapper-left-menu {
width: 18%;
>.brand-menu {
height: @MEDIA_MENU_TOP_HEIGHT;
.FC0();
margin-top: 19.4px;
}
>.wrapper-left-line-menu {
height: @MEDIA_MENU_TOP_HEIGHT;
>.vertical-lines-menu {
height: @MEDIA_MENU_TOP_VERTICAL_LINE;
}
}
>.wrapper-power-menu {
height: @MEDIA_MENU_TOP_HEIGHT;
}
.dropdown-content {
width: 120px;
right: 9%;
>.title-dropdown-content{
padding-left: 27px;
}
}
}
>.wrapper-center-menu {
left: 22%;
width: 50%;
.FC0();
height: @MEDIA_MENU_TOP_HEIGHT;
>.button-center-menu {
margin: 0 21px ;
}
}
>.wrapper-rigth-menu {
height: @MEDIA_MENU_TOP_HEIGHT;
margin-right: 15px;
>.wrapper-rigth-line-menu {
height: @MEDIA_MENU_TOP_HEIGHT;
padding-left: @MEDIA_MENU_TOP_WRAPPER_RIGTH_MENU_RIGTH_LINE_PADDING_LEFT;
padding-right: @MEDIA_MENU_TOP_WRAPPER_RIGTH_MENU_RIGTH_LINE_PADDING_RIGHT;
>.vertical-lines-menu {
height: @MEDIA_MENU_TOP_VERTICAL_LINE;
width: @MEDIA_MENU_TOP_WRAPPER_RIGTH_MENU_RIGTH_LINE_VERTICAL_WIDTH;
}
}
>.wrapper-email-menu {
.FC0();
>.img-user-menu {
width: @MEDIA_MENU_TOP_WRAPPER_RIGTH_MENU_WIDGTH;
height: @MEDIA_MENU_TOP_WRAPPER_RIGTH_MENU_HEIGHT;
}
}
}
}
}
.parrots-page-instance-collection {
>.wrapper-page {
width: 92%;
margin-left: 4%;
margin-right: 4%;
>.col-md-12 {
margin-bottom: 0;
>.col-md-2 {
>.wrapper-instance {
height: 100pt;
>.wrapper-icon-instance {
display: flex;
justify-content: center;
padding-top: 15pt;
padding-bottom: 15pt;
>.icon-instance {
width: unset;
height: unset;
}
}
}
>.wrapper-glyphicon-plus {
height: 100pt;
}
}
}
}
}
}
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) {
.parrots-page-main-menu-top {
>.wrapper-instance-collection-menu {
margin-left: 16pt;
width: 25pt;
>.instance-collection-menu {
height: @MEDIA_MENU_TOP_HEIGHT;
width: @MEDIA_MENU_TOP_WRAPPER_LEFT_MENU_ICON_WIDTH;
}
>.wrapper-full-line-menu {
height: @MEDIA_MENU_TOP_HEIGHT;
}
}
div {
>.wrapper-left-menu {
left: 41pt;
width: 140px;
width: 22%;
>.brand-menu {
margin-left: 15px;
margin-right: 4px;
height: @MEDIA_MENU_TOP_HEIGHT;
.FC0();
margin-top: 19.4px;
}
>.wrapper-left-line-menu {
height: @MEDIA_MENU_TOP_HEIGHT;
>.vertical-lines-menu {
height: @MEDIA_MENU_TOP_VERTICAL_LINE;
}
}
>.wrapper-power-menu {
height: @MEDIA_MENU_TOP_HEIGHT;
margin-left: 5px;
margin-right: 5px;
// width: 5%;
}
.dropdown-content {
width: 120px;
right: 9%;
>.title-dropdown-content{
padding-left: 22px;
}
}
}
>.wrapper-center-menu {
left: 26.89%;
width: 272pt;
margin: 0 auto;
.FC0();
height: @MEDIA_MENU_TOP_HEIGHT;
>.button-center-menu {
margin: 0 11.5px;
}
}
>.wrapper-rigth-menu {
height: @MEDIA_MENU_TOP_HEIGHT;
>.wrapper-rigth-line-menu {
height: @MEDIA_MENU_TOP_HEIGHT;
padding-left: 13px;
padding-right: 13px;
>.vertical-lines-menu {
height: @MEDIA_MENU_TOP_VERTICAL_LINE;
width: @MEDIA_MENU_TOP_WRAPPER_RIGTH_MENU_RIGTH_LINE_VERTICAL_WIDTH;
}
}
>.wrapper-email-menu {
font-size: 0;
>.img-user-menu {
width: @MEDIA_MENU_TOP_WRAPPER_RIGTH_MENU_WIDGTH;
height: @MEDIA_MENU_TOP_WRAPPER_RIGTH_MENU_HEIGHT;
margin-right: 0;
}
}
>.wrapper-glyphicon-rigth-menu {
margin: 12px;
}
>.icon-note {
margin: 11px;
&:before{
font-size: 25px;
}
}
>.icon-signal {
margin: 11px;
&:before{
font-size: 16px;
}
}
>.icon-logout {
margin: 11px;
&:before{
font-size: 18px;
}
}
}
}
}
.parrots-page-instance-collection {
>.wrapper-page {
width: 92%;
margin-left: 4%;
margin-right: 4%;
>.col-md-12 {
margin-bottom: 0;
>.col-md-2 {
width: 25%;
>.wrapper-instance {
height: 100pt;
>.wrapper-icon-instance {
display: flex;
justify-content: center;
padding-top: 15pt;
padding-bottom: 15pt;
>.icon-instance {
width: unset;
height: unset;
}
}
}
>.wrapper-glyphicon-plus {
height: 100pt;
}
}
}
}
}
}