mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-12-30 10:39:18 +01:00
WIP login Ui
- Implements apps tooltip
This commit is contained in:
parent
42aa383cd4
commit
41ab849ecc
api/src/Framework
pixelegg
@ -320,8 +320,16 @@ class Login
|
||||
foreach ($data['apps'] as $app)
|
||||
{
|
||||
$icon = strpos($app['icon'], "/") === 0 ? $GLOBALS['egw_info']['server']['webserver_url'].$app['icon'] : $app['icon'];
|
||||
$nodes .= '<a class="app" href="'.htmlspecialchars($app['url']).'" title="'.htmlspecialchars(lang($app['title'])).'">'
|
||||
.'<img src="'.htmlspecialchars($icon).'"/><span>'.htmlspecialchars($app['desc']).'</span></a>';
|
||||
$title = lang($app['title']);
|
||||
$nodes .= '<div class="app">'
|
||||
.'<img class="icon" src="'.htmlspecialchars($icon).'"/>'
|
||||
.'<div class="tooltip">'
|
||||
.'<div class="content">'
|
||||
.'<h3><a href="'.htmlspecialchars($app['url']).'" title="'.htmlspecialchars($title).'">'
|
||||
.htmlspecialchars($title).'</a></h3>'
|
||||
.'<img class="icon-bg" src="'.htmlspecialchars($icon).'"/>'
|
||||
.'<p>'.htmlspecialchars($app['desc']).'</p><div class="arrow"></div>'
|
||||
.'</div></div></div>';
|
||||
}
|
||||
}
|
||||
return $nodes;
|
||||
|
@ -2046,7 +2046,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
|
||||
margin: 5px 20px auto 20px;
|
||||
display: flex;
|
||||
}
|
||||
#loginMainDiv div#login_footer .apps .app img {
|
||||
#loginMainDiv div#login_footer .apps .app img.icon {
|
||||
width: 30px;
|
||||
filter: brightness(0) invert(1);
|
||||
height: 30px;
|
||||
@ -2054,6 +2054,70 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
|
||||
#loginMainDiv div#login_footer .apps .app span {
|
||||
display: none;
|
||||
}
|
||||
#loginMainDiv div#login_footer .apps .tooltip {
|
||||
display: inline-flex;
|
||||
position: absolute;
|
||||
text-align: left;
|
||||
height: 34px;
|
||||
width: 30px;
|
||||
}
|
||||
#loginMainDiv div#login_footer .apps .tooltip .content {
|
||||
min-width: 300px;
|
||||
top: -10px;
|
||||
left: 50%;
|
||||
height: 190px;
|
||||
max-height: 190px;
|
||||
transform: translate(-50%, -100%);
|
||||
padding: 10px 20px;
|
||||
color: #444444;
|
||||
background-color: #fafafa;
|
||||
font-weight: normal;
|
||||
font-size: 13px;
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
z-index: 99999999;
|
||||
box-sizing: border-box;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.8s;
|
||||
border: 1px solid #1865aa;
|
||||
border-bottom: 6px solid #1865aa;
|
||||
}
|
||||
#loginMainDiv div#login_footer .apps .tooltip .content img.icon-bg {
|
||||
width: 35px;
|
||||
position: absolute;
|
||||
margin: 0 auto;
|
||||
right: 15px;
|
||||
top: 15px;
|
||||
}
|
||||
#loginMainDiv div#login_footer .apps .tooltip .content h3 {
|
||||
height: 30px;
|
||||
border-bottom: 1px solid #d9e4ed;
|
||||
}
|
||||
#loginMainDiv div#login_footer .apps .tooltip:hover .content {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
#loginMainDiv div#login_footer .apps .tooltip:hover .content:hover {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
#loginMainDiv div#login_footer .apps .tooltip .content .arrow {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -21px;
|
||||
height: 15px;
|
||||
}
|
||||
#loginMainDiv div#login_footer .apps .tooltip .content .arrow::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
background-color: #1865aa;
|
||||
}
|
||||
#loginMainDiv div#centerBox {
|
||||
margin: 0 auto -20px;
|
||||
background: transparent;
|
||||
|
@ -2026,7 +2026,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
|
||||
margin: 5px 20px auto 20px;
|
||||
display: flex;
|
||||
}
|
||||
#loginMainDiv div#login_footer .apps .app img {
|
||||
#loginMainDiv div#login_footer .apps .app img.icon {
|
||||
width: 30px;
|
||||
filter: brightness(0) invert(1);
|
||||
height: 30px;
|
||||
@ -2034,6 +2034,70 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
|
||||
#loginMainDiv div#login_footer .apps .app span {
|
||||
display: none;
|
||||
}
|
||||
#loginMainDiv div#login_footer .apps .tooltip {
|
||||
display: inline-flex;
|
||||
position: absolute;
|
||||
text-align: left;
|
||||
height: 34px;
|
||||
width: 30px;
|
||||
}
|
||||
#loginMainDiv div#login_footer .apps .tooltip .content {
|
||||
min-width: 300px;
|
||||
top: -10px;
|
||||
left: 50%;
|
||||
height: 190px;
|
||||
max-height: 190px;
|
||||
transform: translate(-50%, -100%);
|
||||
padding: 10px 20px;
|
||||
color: #444444;
|
||||
background-color: #fafafa;
|
||||
font-weight: normal;
|
||||
font-size: 13px;
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
z-index: 99999999;
|
||||
box-sizing: border-box;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.8s;
|
||||
border: 1px solid #1865aa;
|
||||
border-bottom: 6px solid #1865aa;
|
||||
}
|
||||
#loginMainDiv div#login_footer .apps .tooltip .content img.icon-bg {
|
||||
width: 35px;
|
||||
position: absolute;
|
||||
margin: 0 auto;
|
||||
right: 15px;
|
||||
top: 15px;
|
||||
}
|
||||
#loginMainDiv div#login_footer .apps .tooltip .content h3 {
|
||||
height: 30px;
|
||||
border-bottom: 1px solid #d9e4ed;
|
||||
}
|
||||
#loginMainDiv div#login_footer .apps .tooltip:hover .content {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
#loginMainDiv div#login_footer .apps .tooltip:hover .content:hover {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
#loginMainDiv div#login_footer .apps .tooltip .content .arrow {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -21px;
|
||||
height: 15px;
|
||||
}
|
||||
#loginMainDiv div#login_footer .apps .tooltip .content .arrow::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
background-color: #1865aa;
|
||||
}
|
||||
#loginMainDiv div#centerBox {
|
||||
margin: 0 auto -20px;
|
||||
background: transparent;
|
||||
|
@ -2036,7 +2036,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
|
||||
margin: 5px 20px auto 20px;
|
||||
display: flex;
|
||||
}
|
||||
#loginMainDiv div#login_footer .apps .app img {
|
||||
#loginMainDiv div#login_footer .apps .app img.icon {
|
||||
width: 30px;
|
||||
filter: brightness(0) invert(1);
|
||||
height: 30px;
|
||||
@ -2044,6 +2044,70 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
|
||||
#loginMainDiv div#login_footer .apps .app span {
|
||||
display: none;
|
||||
}
|
||||
#loginMainDiv div#login_footer .apps .tooltip {
|
||||
display: inline-flex;
|
||||
position: absolute;
|
||||
text-align: left;
|
||||
height: 34px;
|
||||
width: 30px;
|
||||
}
|
||||
#loginMainDiv div#login_footer .apps .tooltip .content {
|
||||
min-width: 300px;
|
||||
top: -10px;
|
||||
left: 50%;
|
||||
height: 190px;
|
||||
max-height: 190px;
|
||||
transform: translate(-50%, -100%);
|
||||
padding: 10px 20px;
|
||||
color: #444444;
|
||||
background-color: #fafafa;
|
||||
font-weight: normal;
|
||||
font-size: 13px;
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
z-index: 99999999;
|
||||
box-sizing: border-box;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.8s;
|
||||
border: 1px solid #1865aa;
|
||||
border-bottom: 6px solid #1865aa;
|
||||
}
|
||||
#loginMainDiv div#login_footer .apps .tooltip .content img.icon-bg {
|
||||
width: 35px;
|
||||
position: absolute;
|
||||
margin: 0 auto;
|
||||
right: 15px;
|
||||
top: 15px;
|
||||
}
|
||||
#loginMainDiv div#login_footer .apps .tooltip .content h3 {
|
||||
height: 30px;
|
||||
border-bottom: 1px solid #d9e4ed;
|
||||
}
|
||||
#loginMainDiv div#login_footer .apps .tooltip:hover .content {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
#loginMainDiv div#login_footer .apps .tooltip:hover .content:hover {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
#loginMainDiv div#login_footer .apps .tooltip .content .arrow {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -21px;
|
||||
height: 15px;
|
||||
}
|
||||
#loginMainDiv div#login_footer .apps .tooltip .content .arrow::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
background-color: #1865aa;
|
||||
}
|
||||
#loginMainDiv div#centerBox {
|
||||
margin: 0 auto -20px;
|
||||
background: transparent;
|
||||
|
@ -179,13 +179,79 @@ div#loginMainDiv.stockLoginBackground {
|
||||
height: 30px;
|
||||
margin: 5px 20px auto 20px;
|
||||
display: flex;
|
||||
img {
|
||||
img.icon {
|
||||
width: 30px;
|
||||
filter: brightness(0) invert(1);
|
||||
height: 30px;
|
||||
}
|
||||
span {display:none;}
|
||||
}
|
||||
.tooltip {
|
||||
display: inline-flex;
|
||||
position: absolute;
|
||||
text-align: left;
|
||||
height: 34px;
|
||||
width: 30px;
|
||||
}
|
||||
.tooltip .content {
|
||||
min-width: 300px;
|
||||
top: -10px;
|
||||
left: 50%;
|
||||
height: 190px;
|
||||
max-height: 190px;
|
||||
transform: translate(-50%, -100%);
|
||||
padding: 10px 20px;
|
||||
color: #444444;
|
||||
background-color: #fafafa;
|
||||
font-weight: normal;
|
||||
font-size: 13px;
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
z-index: 99999999;
|
||||
box-sizing: border-box;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.8s;
|
||||
border: 1px solid #1865aa;
|
||||
border-bottom: 6px solid #1865aa;
|
||||
img.icon-bg {
|
||||
width: 35px;
|
||||
position: absolute;
|
||||
margin: 0 auto;
|
||||
right: 15px;
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
height: 30px;
|
||||
border-bottom: 1px solid #d9e4ed;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip:hover .content {
|
||||
visibility:visible;
|
||||
opacity:1;
|
||||
&:hover {
|
||||
visibility:visible;
|
||||
opacity:1;
|
||||
}
|
||||
}
|
||||
.tooltip .content .arrow{
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -21px;
|
||||
height: 15px;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
background-color: #1865aa;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -2057,7 +2057,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
|
||||
margin: 5px 20px auto 20px;
|
||||
display: flex;
|
||||
}
|
||||
#loginMainDiv div#login_footer .apps .app img {
|
||||
#loginMainDiv div#login_footer .apps .app img.icon {
|
||||
width: 30px;
|
||||
filter: brightness(0) invert(1);
|
||||
height: 30px;
|
||||
@ -2065,6 +2065,70 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
|
||||
#loginMainDiv div#login_footer .apps .app span {
|
||||
display: none;
|
||||
}
|
||||
#loginMainDiv div#login_footer .apps .tooltip {
|
||||
display: inline-flex;
|
||||
position: absolute;
|
||||
text-align: left;
|
||||
height: 34px;
|
||||
width: 30px;
|
||||
}
|
||||
#loginMainDiv div#login_footer .apps .tooltip .content {
|
||||
min-width: 300px;
|
||||
top: -10px;
|
||||
left: 50%;
|
||||
height: 190px;
|
||||
max-height: 190px;
|
||||
transform: translate(-50%, -100%);
|
||||
padding: 10px 20px;
|
||||
color: #444444;
|
||||
background-color: #fafafa;
|
||||
font-weight: normal;
|
||||
font-size: 13px;
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
z-index: 99999999;
|
||||
box-sizing: border-box;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.8s;
|
||||
border: 1px solid #1865aa;
|
||||
border-bottom: 6px solid #1865aa;
|
||||
}
|
||||
#loginMainDiv div#login_footer .apps .tooltip .content img.icon-bg {
|
||||
width: 35px;
|
||||
position: absolute;
|
||||
margin: 0 auto;
|
||||
right: 15px;
|
||||
top: 15px;
|
||||
}
|
||||
#loginMainDiv div#login_footer .apps .tooltip .content h3 {
|
||||
height: 30px;
|
||||
border-bottom: 1px solid #d9e4ed;
|
||||
}
|
||||
#loginMainDiv div#login_footer .apps .tooltip:hover .content {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
#loginMainDiv div#login_footer .apps .tooltip:hover .content:hover {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
#loginMainDiv div#login_footer .apps .tooltip .content .arrow {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -21px;
|
||||
height: 15px;
|
||||
}
|
||||
#loginMainDiv div#login_footer .apps .tooltip .content .arrow::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
background-color: #1865aa;
|
||||
}
|
||||
#loginMainDiv div#centerBox {
|
||||
margin: 0 auto -20px;
|
||||
background: transparent;
|
||||
|
Loading…
Reference in New Issue
Block a user