352 lines
6.9 KiB
CSS
352 lines
6.9 KiB
CSS
|
/*//////////////////////////////////////////////////////////////////
|
||
|
[ FIN ]*/
|
||
|
|
||
|
@charset "UTF-8";
|
||
|
body {
|
||
|
margin: auto;
|
||
|
font-family: Tahoma, sans-serif;
|
||
|
font-size: 16px;
|
||
|
}
|
||
|
|
||
|
/*//////////////////////////////////////////////////////////////////
|
||
|
[ Page layout ]*/
|
||
|
|
||
|
.panel {
|
||
|
padding: 5px;
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
.apps {
|
||
|
margin: auto;
|
||
|
width: 100%;
|
||
|
display: flex;
|
||
|
flex-wrap: wrap;
|
||
|
justify-content: center;
|
||
|
}
|
||
|
|
||
|
div.footer.version {
|
||
|
font-size: 12px;
|
||
|
margin-top: 12px;
|
||
|
}
|
||
|
|
||
|
@media only screen and (min-width: 800px) {
|
||
|
.content {
|
||
|
grid-template-columns: auto auto;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media only screen and (min-width: 1200px) {
|
||
|
.content {
|
||
|
grid-template-columns: auto auto auto;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media only screen and (min-width: 1600px) {
|
||
|
.content {
|
||
|
grid-template-columns: auto auto auto auto;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
/*//////////////////////////////////////////////////////////////////
|
||
|
[ Button grid layout ]*/
|
||
|
|
||
|
.grid-container {
|
||
|
display: grid;
|
||
|
/* grid-template-areas: 'logo title' 'logo description' 'logo infos' 'logo status'; */
|
||
|
grid-template-areas:
|
||
|
'logo title'
|
||
|
'logo description'
|
||
|
'logo info'
|
||
|
'status tags';
|
||
|
gap: 2px;
|
||
|
padding: 2px;
|
||
|
}
|
||
|
|
||
|
.grid-container-title {
|
||
|
grid-area: title;
|
||
|
text-align: right;
|
||
|
font-weight: bold;
|
||
|
padding-right: 2px;
|
||
|
font-size: min(max(3vw, 8px), 18px);
|
||
|
display: -webkit-box;
|
||
|
-webkit-line-clamp: 1;
|
||
|
-webkit-box-orient: vertical;
|
||
|
overflow: hidden;
|
||
|
max-width: 25ch;
|
||
|
|
||
|
}
|
||
|
|
||
|
.grid-container-title.jp {
|
||
|
font-size: min(max(3.75vw, 6px), 21px);
|
||
|
}
|
||
|
|
||
|
.grid-container-logo {
|
||
|
grid-area: logo;
|
||
|
padding-top: 10px;
|
||
|
}
|
||
|
|
||
|
.grid-container-description {
|
||
|
grid-area: description;
|
||
|
text-align: right;
|
||
|
font-size: min(max(3vw, 8px), 15px);
|
||
|
font-style: italic;
|
||
|
padding: 0.5px;
|
||
|
padding-right: 2px;
|
||
|
display: -webkit-box;
|
||
|
-webkit-box-orient: vertical;
|
||
|
-webkit-line-clamp: 2;
|
||
|
overflow: hidden;
|
||
|
}
|
||
|
|
||
|
.grid-container-info {
|
||
|
grid-area: info;
|
||
|
text-align: right;
|
||
|
padding: 0.25px;
|
||
|
padding-right: 2px;
|
||
|
text-align: right;
|
||
|
font-size: 15px;
|
||
|
|
||
|
}
|
||
|
|
||
|
.grid-container-tags {
|
||
|
grid-area: tags;
|
||
|
text-align: right;
|
||
|
padding: 0.5px;
|
||
|
padding-right: 2px;
|
||
|
padding-top: 3px;
|
||
|
fill: blue;
|
||
|
}
|
||
|
|
||
|
.grid-container-status {
|
||
|
grid-area: status;
|
||
|
text-align: left;
|
||
|
padding: 2px;
|
||
|
padding-left: 20px;
|
||
|
display: -webkit-box;
|
||
|
-webkit-line-clamp: 1;
|
||
|
-webkit-box-orient: vertical;
|
||
|
overflow: hidden;
|
||
|
max-width: 25ch;
|
||
|
}
|
||
|
|
||
|
/*//////////////////////////////////////////////////////////////////
|
||
|
[ Icons ]*/
|
||
|
|
||
|
.dashboard-logo {
|
||
|
padding: 0.5px;
|
||
|
padding-left: 4px;
|
||
|
width: min(3.24vw, 14px);
|
||
|
height: min(3.24vw, 14px);
|
||
|
}
|
||
|
|
||
|
.lock {
|
||
|
padding: 0.8px;
|
||
|
/* padding-top: 5px; */
|
||
|
width: min(3.24vw, 20px);
|
||
|
height: min(3.24vw, 20px);
|
||
|
fill: green;
|
||
|
}
|
||
|
|
||
|
.lockopen {
|
||
|
padding: 0.8px;
|
||
|
/* padding-top: 5px; */
|
||
|
width: min(3.24vw, 20px);
|
||
|
height: min(3.24vw, 20px);
|
||
|
fill: red;
|
||
|
}
|
||
|
|
||
|
.status-logo {
|
||
|
padding: 0.8px;
|
||
|
/* padding-top: 5px; */
|
||
|
width: min(3.24vw, 20px);
|
||
|
height: min(3.24vw, 20px);
|
||
|
fill: blue;
|
||
|
}
|
||
|
|
||
|
/*//////////////////////////////////////////////////////////////////
|
||
|
[ Glow ] https://webdeasy.de/en/top-css-buttons-en */
|
||
|
|
||
|
.glow-on-hover {
|
||
|
display: inline-block;
|
||
|
width: 90vw;
|
||
|
max-width: 400px;
|
||
|
height: 45vw;
|
||
|
max-height: 200px;
|
||
|
margin: 5px;
|
||
|
border: 1px solid #111;
|
||
|
outline: none;
|
||
|
cursor: pointer;
|
||
|
position: relative;
|
||
|
z-index: 0;
|
||
|
border-radius: 10px;
|
||
|
padding: 6px;
|
||
|
}
|
||
|
|
||
|
/* .light .glow-on-hover {
|
||
|
color: white;
|
||
|
background-color: rgba(41, 109, 181, 0.5);
|
||
|
}
|
||
|
|
||
|
.dark .glow-on-hover {
|
||
|
color: #95c7fd;
|
||
|
background-color: rgba(190, 197, 203, 0.3);
|
||
|
} */
|
||
|
|
||
|
.glow-on-hover:before {
|
||
|
content: '';
|
||
|
/* background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000); */
|
||
|
background: linear-gradient(45deg,#052479, #0b36ac, #1b58fe, #3c6ffa, #5580f7, #6c93fe, #91adf9, #b7c9fc, #91adf9, #6c93fe, #5580f7, #3c6ffa, #1b58fe, #0b36ac, #052479, #091c4f);
|
||
|
position: absolute;
|
||
|
top: -2px;
|
||
|
left: -2px;
|
||
|
background-size: 400%;
|
||
|
z-index: -1;
|
||
|
filter: blur(5px);
|
||
|
width: calc(100% + 4px);
|
||
|
height: calc(100% + 4px);
|
||
|
animation: glowing 20s linear infinite;
|
||
|
opacity: 0;
|
||
|
transition: opacity .3s ease-in-out;
|
||
|
border-radius: 10px;
|
||
|
color: white;
|
||
|
background-color: rgba(36, 139, 251, 0.5);
|
||
|
}
|
||
|
|
||
|
.glow-on-hover:active {
|
||
|
color: #888888
|
||
|
}
|
||
|
|
||
|
.glow-on-hover:active:after {
|
||
|
background: transparent;
|
||
|
}
|
||
|
|
||
|
.glow-on-hover:hover:before {
|
||
|
opacity: 1;
|
||
|
}
|
||
|
|
||
|
.glow-on-hover:after {
|
||
|
z-index: -1;
|
||
|
content: '';
|
||
|
position: absolute;
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
left: 0;
|
||
|
top: 0;
|
||
|
border-radius: 10px;
|
||
|
}
|
||
|
|
||
|
.glow-on-hover:hover:after {
|
||
|
color: white;
|
||
|
background-color: rgb(41, 139, 214)
|
||
|
}
|
||
|
|
||
|
.dark .glow-on-hover:hover:after {
|
||
|
background-color: rgba(25, 25, 25, 1);
|
||
|
}
|
||
|
|
||
|
@keyframes glowing {
|
||
|
0% {
|
||
|
background-position: 0 0;
|
||
|
}
|
||
|
50% {
|
||
|
background-position: 400% 0;
|
||
|
}
|
||
|
100% {
|
||
|
background-position: 0 0;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/*//////////////////////////////////////////////////////////////////
|
||
|
[ Cross fade image Brands - Bookmark ]*/
|
||
|
div.crossfade {
|
||
|
position: relative;
|
||
|
width: min(32.4vw, 124px);
|
||
|
height: min(32.4vw, 124px);
|
||
|
}
|
||
|
|
||
|
div.crossfade > img {
|
||
|
position: absolute;
|
||
|
top: -1px;
|
||
|
bottom: 0;
|
||
|
left: -1px;
|
||
|
right: 0;
|
||
|
width: min(32.4vw, 124px);
|
||
|
height: min(32.4vw, 124px);
|
||
|
}
|
||
|
|
||
|
|
||
|
div.crossfade > img {
|
||
|
position:absolute;
|
||
|
left:0;
|
||
|
-webkit-transition: all 1s ease-in-out;
|
||
|
-moz-transition: all 1s ease-in-out;
|
||
|
-o-transition: all 1s ease-in-out;
|
||
|
transition: all 1s ease-in-out;
|
||
|
}
|
||
|
|
||
|
div.crossfade > img.bookmark {
|
||
|
-webkit-transform:scale(0,0);
|
||
|
-moz-transform:scale(0,0);
|
||
|
-o-transform:scale(0,0);
|
||
|
transform:scale(0,0);
|
||
|
opacity:0;
|
||
|
|
||
|
}
|
||
|
|
||
|
div.crossfade:hover img.bookmark, div.crossfade.hover_effect img.bookmark {
|
||
|
opacity:1;
|
||
|
-webkit-transform:scale(1,1);
|
||
|
-webkit-transform-origin: top right;
|
||
|
-moz-transform:scale(1,1);
|
||
|
-moz-transform-origin: top right;
|
||
|
-o-transform:scale(1,1);
|
||
|
-o-transform-origin: top right;
|
||
|
transform:scale(1,1);
|
||
|
transform-origin: top right;
|
||
|
}
|
||
|
|
||
|
div.crossfade:hover img.brands, div.crossfade.hover_effect img.brands {
|
||
|
-webkit-transform:scale(0,0);
|
||
|
-webkit-transform-origin: bottom left;
|
||
|
-moz-transform:scale(0,0);
|
||
|
-moz-transform-origin: bottom left;
|
||
|
-o-transform:scale(0,0);
|
||
|
-o-transform-origin: bottom left;
|
||
|
transform:scale(0,0);
|
||
|
transform-origin: bottom left;
|
||
|
}
|
||
|
|
||
|
|
||
|
@keyframes fade-bottom {
|
||
|
0% {
|
||
|
opacity: 0;
|
||
|
}
|
||
|
25% {
|
||
|
opacity: 0;
|
||
|
}
|
||
|
75% {
|
||
|
opacity: 1;
|
||
|
}
|
||
|
100% {
|
||
|
opacity: 1;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@keyframes fade-top {
|
||
|
0% {
|
||
|
opacity: 1;
|
||
|
}
|
||
|
25% {
|
||
|
opacity: 1;
|
||
|
}
|
||
|
75% {
|
||
|
opacity: 0;
|
||
|
}
|
||
|
100% {
|
||
|
opacity: 0;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/*//////////////////////////////////////////////////////////////////
|
||
|
[ FIN ]*/
|