Gitlab CSE Unil

Commit ab1d122d authored by Julien Furrer's avatar Julien Furrer
Browse files

AnObj Manager dlg responsive

parent 1125b211
......@@ -593,7 +593,7 @@ input[type=number]::-webkit-outer-spin-button {
text-decoration: none;
}
#login-mode .local-login-head a:hover {
text-decoration: underline;
color: #60a4df;
}
#login-mode #login-local-panel {
background-color: #333;
......@@ -1029,6 +1029,7 @@ canvas {
#tool-colorselect .color-menu > li > a:hover,
#tool-colorselect .color-menu > li > a:focus {
background-color: #333330;
background-image: none;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.33) inset, 0 0 0 3px rgba(255, 255, 255, 0.9);
border-color: transparent;
}
......@@ -1036,26 +1037,44 @@ canvas {
#tool-colorselect .color-menu > li > a.c1:hover {
background-color: #fff700;
}
#tool-colorselect .color-menu > li > a.c1:hover {
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.66) inset, 0 0 1px 3px rgba(255, 247, 0, 0.9);
}
#tool-colorselect .color-menu > li > a.c2,
#tool-colorselect .color-menu > li > a.c2:hover {
background-color: #ff8017;
}
#tool-colorselect .color-menu > li > a.c2:hover {
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.66) inset, 0 0 1px 3px rgba(255, 128, 23, 0.9);
}
#tool-colorselect .color-menu > li > a.c3,
#tool-colorselect .color-menu > li > a.c3:hover {
background-color: #00d400;
}
#tool-colorselect .color-menu > li > a.c3:hover {
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.66) inset, 0 0 1px 3px rgba(0, 212, 0, 0.9);
}
#tool-colorselect .color-menu > li > a.c4,
#tool-colorselect .color-menu > li > a.c4:hover {
background-color: #1977ff;
}
#tool-colorselect .color-menu > li > a.c4:hover {
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.66) inset, 0 0 1px 3px rgba(25, 119, 255, 0.9);
}
#tool-colorselect .color-menu > li > a.c5,
#tool-colorselect .color-menu > li > a.c5:hover {
background-color: #fc6ca2;
}
#tool-colorselect .color-menu > li > a.c5:hover {
box-shadow: 0 1px 4px -1px rgba(23, 0, 9, 0.66) inset, 0 0 1px 3px rgba(252, 108, 162, 0.9);
}
#tool-colorselect .color-menu > li > a.c6,
#tool-colorselect .color-menu > li > a.c6:hover {
background-color: #fa0000;
}
#tool-colorselect .color-menu > li > a.c6:hover {
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.66) inset, 0 0 1px 3px rgba(250, 0, 0, 0.9);
}
#tool-colorselect .color-menu > li > a.cx {
background-image: url(../img/adim/alpha.png);
width: 52px;
......@@ -1447,8 +1466,59 @@ fieldset[disabled] .btn-cimaf-layer.active {
#aom-modal .modal-body {
padding: 0;
}
#aom-modal #aom-list-container {
height: 444px;
@media (min-height: 370px) {
#aom-modal #aom-list-container {
max-height: 220px;
height: auto;
}
}
@media (min-height: 590px) {
#aom-modal #aom-list-container {
max-height: 440px;
height: auto;
}
}
@media (min-height: 810px) {
#aom-modal #aom-list-container {
max-height: 660px;
height: auto;
}
}
@media (min-height: 1030px) {
#aom-modal #aom-list-container {
max-height: 880px;
height: auto;
}
}
@media (min-width: 540px) {
#aom-modal .modal-dialog {
width: 460px;
transition: width 0.3s ease 0s;
}
}
@media (min-width: 760px) {
#aom-modal .modal-dialog {
width: 680px;
transition: width 0.3s ease 0s;
}
}
@media (min-width: 980px) {
#aom-modal .modal-dialog {
width: 900px;
transition: width 0.3s ease 0s;
}
}
@media (min-width: 1200px) {
#aom-modal .modal-dialog {
width: 1120px;
transition: width 0.3s ease 0s;
}
}
@media (min-width: 1420px) {
#aom-modal .modal-dialog {
width: 1340px;
transition: width 0.3s ease 0s;
}
}
#aom-list-container {
overflow-y: scroll;
......
......@@ -196,7 +196,10 @@ input[type=number]::-webkit-outer-spin-button {
color: @brand-primary;
text-decoration: none;
}
a:hover { text-decoration: underline; }
a:hover {
color: saturate(lighten(@brand-primary, 10%), 10%);
// text-decoration: underline;
}
}
#login-local-panel {
......@@ -766,6 +769,9 @@ canvas {
&, &:hover {
background-color: @color;
}
&:hover {
box-shadow: 0 1px 4px -1px fade(darken(@color, 66%), 66%) inset, 0 0 1px 3px fade(@color, 90%);
}
}
> button {
......@@ -796,6 +802,7 @@ canvas {
&:hover, &:focus {
background-color: #333330;
background-image: none;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.33) inset, 0 0 0 3px rgba(255, 255, 255, 0.9);
border-color: transparent;
}
......
#aom-modal .modal-body {
padding: 0;
}
#aom-modal #aom-list-container {
height: 444px;
@media (min-height: 370px) {
#aom-modal #aom-list-container {
max-height: 220px;
height: auto;
}
}
@media (min-height: 590px) {
#aom-modal #aom-list-container {
max-height: 440px;
height: auto;
}
}
@media (min-height: 810px) {
#aom-modal #aom-list-container {
max-height: 660px;
height: auto;
}
}
@media (min-height: 1030px) {
#aom-modal #aom-list-container {
max-height: 880px;
height: auto;
}
}
@media (min-width: 540px) {
#aom-modal .modal-dialog {
width: 460px;
transition: width 0.3s ease 0s;
}
}
@media (min-width: 760px) {
#aom-modal .modal-dialog {
width: 680px;
transition: width 0.3s ease 0s;
}
}
@media (min-width: 980px) {
#aom-modal .modal-dialog {
width: 900px;
transition: width 0.3s ease 0s;
}
}
@media (min-width: 1200px) {
#aom-modal .modal-dialog {
width: 1120px;
transition: width 0.3s ease 0s;
}
}
@media (min-width: 1420px) {
#aom-modal .modal-dialog {
width: 1340px;
transition: width 0.3s ease 0s;
}
}
#aom-list-container {
overflow-y: scroll;
......
@import "../lib/bootstrap/less/mixins";
@aom-list-item-width: 180px;
@aom-list-item-height: 200px;
@aom-thumb-width: 150px;
@aom-thumb-height: @aom-thumb-width;
@aom-list-item-width: @aom-thumb-width + 30;
@aom-list-item-height: @aom-thumb-width + 50;
@aom-list-item-border: rgb(164, 164, 164);
@aom-list-item-margin-v: 10px; // margin vertical: top and bottom (both are set)
@aom-list-item-margin-h: 20px; // margin horizontal: left and right (both are set)
@aom-list-item-color: #646464;
@aom-thumb-width: 150px;
@aom-thumb-height: @aom-thumb-width;
.gen-mod-width(@n, @i: 2) when (@i =< @n) {
@dlg-w: (((@aom-list-item-width + 40) * @i) + 20);
@media (min-width: (@dlg-w + 80)) {
width: @dlg-w;
transition: width 0.3s ease 0s;
}
.gen-mod-width(@n, (@i + 1));
}
.gen-lst-height(@n, @i: 2) when (@i =< @n) {
@lst-h: ((@aom-list-item-height + @aom-list-item-margin-v*2) * @i);
@media (min-height: (@lst-h + 150)) {
max-height: @lst-h;
height: auto;
// transition: height 0.5s ease 0s;
}
.gen-lst-height(@n, (@i + 1));
}
#aom-modal {
.modal-body {
padding: 0;
}
#aom-list-container {
height: 444px;
.gen-lst-height(4, 1);
}
.modal-dialog {
.gen-mod-width(6);
}
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment