commit mix - code incomplet
This commit is contained in:
@@ -1,699 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
body {
|
||||
margin: auto;
|
||||
font-family: Tahoma, sans-serif;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
opacity: .5;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.ellipsis {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel {
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.apps {
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
div.footer.version {
|
||||
font-size: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
div.footer.sorts {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dialog>div {
|
||||
margin: 5px 20px;
|
||||
padding: 1px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.dialog>div.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dialog>div>button {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.headline {
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.logout {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
grid-gap: 10px;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
margin: auto;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.content>div {
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
.gwt-Button {
|
||||
margin: 0px;
|
||||
border: none;
|
||||
padding: 6px;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
min-width: 28px;
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
.gwt-Anchor.spacer,
|
||||
.gwt-Button.spacer {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.gwt-Button:disabled {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.gwt-DialogBox {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.gwt-DialogBox .Caption {
|
||||
padding: 4px 8px 4px 4px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.gwt-DialogBox .dialogTopLeftInner {
|
||||
width: 10px;
|
||||
height: 8px;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.gwt-DialogBox .dialogTopRightInner {
|
||||
width: 12px;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.gwt-DialogBox .dialogBottomLeftInner {
|
||||
width: 10px;
|
||||
height: 12px;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.gwt-DialogBox .dialogBottomRightInner {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.gwt-DialogBox .dialogMiddleCenter {
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
|
||||
/** Light theme */
|
||||
|
||||
body.light {
|
||||
background: #f5f5f5 url("images/Background.png") no-repeat center fixed;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.light a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.light a:hover {
|
||||
color: #248bfb;
|
||||
}
|
||||
|
||||
.light a.pagination:hover {
|
||||
color: #248bfb;
|
||||
background: #ececec;
|
||||
}
|
||||
|
||||
.light a.pagination.current {
|
||||
color: #248bfb;
|
||||
background: #ececec;
|
||||
}
|
||||
|
||||
.light .title {
|
||||
background-color: #248bfb;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.light .content {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.light .gwt-Button {
|
||||
border: 1px solid navy;
|
||||
background-color: #248bfb;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.light .gwt-Button:hover {
|
||||
background-color: #0362cb;
|
||||
}
|
||||
|
||||
.light .gwt-Button:disabled {
|
||||
border-color: #aaa;
|
||||
background-color: #ccc;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.light .gwt-Button.sort:disabled {
|
||||
border-color: green;
|
||||
background-color: #03cb62;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.light .gwt-DialogBox {
|
||||
background-color: #248bfb;
|
||||
border: 3px solid #abd2fe;
|
||||
}
|
||||
|
||||
.light .gwt-DialogBox .Caption {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.light .gwt-DialogBox .dialogMiddleCenter {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.light .gwt-PopupPanelGlass {
|
||||
background-color: black;
|
||||
opacity: 0.3;
|
||||
filter: alpha(opacity=30);
|
||||
}
|
||||
|
||||
.light .content>div {
|
||||
border: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
|
||||
/** Dark theme */
|
||||
|
||||
body.dark {
|
||||
background: #272c30 url("images/Background-Dark.png") no-repeat center fixed;
|
||||
background-size: contain;
|
||||
color: #95c7fd;
|
||||
}
|
||||
|
||||
.dark a {
|
||||
color: #95c7fd;
|
||||
}
|
||||
|
||||
.dark a:hover {
|
||||
color: #e7e9eb;
|
||||
}
|
||||
|
||||
.dark a.pagination:hover {
|
||||
color: #e7e9eb;
|
||||
background: #95a0aa;
|
||||
}
|
||||
|
||||
.dark a.pagination.current {
|
||||
color: #e7e9eb;
|
||||
background: #95a0aa;
|
||||
}
|
||||
|
||||
.dark .title {
|
||||
background-color: #024793;
|
||||
color: #95c7fd;
|
||||
}
|
||||
|
||||
.dark .content {
|
||||
background-color: #202326;
|
||||
}
|
||||
|
||||
.dark .gwt-Button {
|
||||
border: 1px solid black;
|
||||
background-color: #95a0aa;
|
||||
color: #04356b;
|
||||
}
|
||||
|
||||
.dark .gwt-Button:hover {
|
||||
background-color: #bec5cb;
|
||||
}
|
||||
|
||||
.dark .gwt-Button:disabled {
|
||||
border-color: #666;
|
||||
background-color: #333;
|
||||
color: #248bfb;
|
||||
}
|
||||
|
||||
.dark .gwt-Button.sort:disabled {
|
||||
color: #03cb62;
|
||||
}
|
||||
|
||||
.dark .gwt-DialogBox {
|
||||
background-color: #555;
|
||||
border: 3px solid #999;
|
||||
}
|
||||
|
||||
.dark .gwt-DialogBox .Caption {
|
||||
color: #95c7fd;
|
||||
}
|
||||
|
||||
.dark .gwt-DialogBox .dialogMiddleCenter {
|
||||
background: #272c30;
|
||||
}
|
||||
|
||||
.dark .gwt-PopupPanelGlass {
|
||||
background-color: black;
|
||||
opacity: 0.5;
|
||||
filter: alpha(opacity=50);
|
||||
}
|
||||
|
||||
.dark .content>div {
|
||||
border: 1px solid #b9b9b9;
|
||||
}
|
||||
|
||||
.grid-container-title {
|
||||
grid-area: title;
|
||||
text-align: center;
|
||||
font-size: min(max(5vw, 10px), 24px);
|
||||
}
|
||||
|
||||
.grid-container-title.jp {
|
||||
font-size: min(max(3.75vw, 6px), 21px);
|
||||
}
|
||||
|
||||
.grid-container-logo {
|
||||
grid-area: logo;
|
||||
}
|
||||
|
||||
.grid-container-description {
|
||||
grid-area: description;
|
||||
font-size: min(max(3.25vw, 8px), 18px);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.grid-container-description.jp {
|
||||
font-size: min(max(3vw, 5px), 15px);
|
||||
}
|
||||
|
||||
.grid-container-languages {
|
||||
grid-area: languages;
|
||||
font-size: min(max(3vw, 7px), 16px);
|
||||
}
|
||||
|
||||
.grid-container-languages.jp {
|
||||
font-size: min(max(2.75vw, 5px), 13px);
|
||||
;
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-areas: 'logo title' 'logo description' 'logo languages';
|
||||
gap: 2px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
||||
/** 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(36, 139, 251, 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);
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.light .glow-on-hover:hover:after {
|
||||
background-color: rgba(0, 33, 122, 1);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
div.crossfade {
|
||||
position: relative;
|
||||
width: min(32.4vw, 144px);
|
||||
height: min(32.4vw, 144px);
|
||||
}
|
||||
|
||||
div.crossfade>img {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
bottom: 0;
|
||||
left: -1px;
|
||||
right: 0;
|
||||
width: min(32.4vw, 144px);
|
||||
height: min(32.4vw, 144px);
|
||||
}
|
||||
|
||||
div.crossfade>img.bottom {
|
||||
animation-name: fade-bottom;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-iteration-count: infinite;
|
||||
animation-duration: 5s;
|
||||
animation-direction: alternate;
|
||||
}
|
||||
|
||||
div.crossfade>img.top {
|
||||
animation-name: fade-top;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-iteration-count: infinite;
|
||||
animation-duration: 5s;
|
||||
animation-direction: alternate;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* loading.css */
|
||||
|
||||
#fountainG {
|
||||
position: relative;
|
||||
width: 234px;
|
||||
height: 38px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.fountainG {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
background-color: rgb(255, 255, 255);
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
animation-name: bounce_fountainG;
|
||||
-o-animation-name: bounce_fountainG;
|
||||
-ms-animation-name: bounce_fountainG;
|
||||
-webkit-animation-name: bounce_fountainG;
|
||||
-moz-animation-name: bounce_fountainG;
|
||||
animation-duration: 0.975s;
|
||||
-o-animation-duration: 0.975s;
|
||||
-ms-animation-duration: 0.975s;
|
||||
-webkit-animation-duration: 0.975s;
|
||||
-moz-animation-duration: 0.975s;
|
||||
animation-iteration-count: infinite;
|
||||
-o-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
animation-direction: normal;
|
||||
-o-animation-direction: normal;
|
||||
-ms-animation-direction: normal;
|
||||
-webkit-animation-direction: normal;
|
||||
-moz-animation-direction: normal;
|
||||
transform: scale(.3);
|
||||
-o-transform: scale(.3);
|
||||
-ms-transform: scale(.3);
|
||||
-webkit-transform: scale(.3);
|
||||
-moz-transform: scale(.3);
|
||||
border-radius: 19px;
|
||||
-o-border-radius: 19px;
|
||||
-ms-border-radius: 19px;
|
||||
-webkit-border-radius: 19px;
|
||||
-moz-border-radius: 19px;
|
||||
}
|
||||
|
||||
#fountainG_1 {
|
||||
left: 0;
|
||||
animation-delay: 0.386s;
|
||||
-o-animation-delay: 0.386s;
|
||||
-ms-animation-delay: 0.386s;
|
||||
-webkit-animation-delay: 0.386s;
|
||||
-moz-animation-delay: 0.386s;
|
||||
}
|
||||
|
||||
#fountainG_2 {
|
||||
left: 29px;
|
||||
animation-delay: 0.4825s;
|
||||
-o-animation-delay: 0.4825s;
|
||||
-ms-animation-delay: 0.4825s;
|
||||
-webkit-animation-delay: 0.4825s;
|
||||
-moz-animation-delay: 0.4825s;
|
||||
}
|
||||
|
||||
#fountainG_3 {
|
||||
left: 58px;
|
||||
animation-delay: 0.589s;
|
||||
-o-animation-delay: 0.589s;
|
||||
-ms-animation-delay: 0.589s;
|
||||
-webkit-animation-delay: 0.589s;
|
||||
-moz-animation-delay: 0.589s;
|
||||
}
|
||||
|
||||
#fountainG_4 {
|
||||
left: 88px;
|
||||
animation-delay: 0.6855s;
|
||||
-o-animation-delay: 0.6855s;
|
||||
-ms-animation-delay: 0.6855s;
|
||||
-webkit-animation-delay: 0.6855s;
|
||||
-moz-animation-delay: 0.6855s;
|
||||
}
|
||||
|
||||
#fountainG_5 {
|
||||
left: 117px;
|
||||
animation-delay: 0.782s;
|
||||
-o-animation-delay: 0.782s;
|
||||
-ms-animation-delay: 0.782s;
|
||||
-webkit-animation-delay: 0.782s;
|
||||
-moz-animation-delay: 0.782s;
|
||||
}
|
||||
|
||||
#fountainG_6 {
|
||||
left: 146px;
|
||||
animation-delay: 0.8785s;
|
||||
-o-animation-delay: 0.8785s;
|
||||
-ms-animation-delay: 0.8785s;
|
||||
-webkit-animation-delay: 0.8785s;
|
||||
-moz-animation-delay: 0.8785s;
|
||||
}
|
||||
|
||||
#fountainG_7 {
|
||||
left: 175px;
|
||||
animation-delay: 0.975s;
|
||||
-o-animation-delay: 0.975s;
|
||||
-ms-animation-delay: 0.975s;
|
||||
-webkit-animation-delay: 0.975s;
|
||||
-moz-animation-delay: 0.975s;
|
||||
}
|
||||
|
||||
#fountainG_8 {
|
||||
left: 205px;
|
||||
animation-delay: 1.0715s;
|
||||
-o-animation-delay: 1.0715s;
|
||||
-ms-animation-delay: 1.0715s;
|
||||
-webkit-animation-delay: 1.0715s;
|
||||
-moz-animation-delay: 1.0715s;
|
||||
}
|
||||
|
||||
@keyframes bounce_fountainG {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
100% {
|
||||
transform: scale(.3);
|
||||
background-color: rgb(255, 255, 255);
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes bounce_fountainG {
|
||||
0% {
|
||||
-o-transform: scale(1);
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
100% {
|
||||
-o-transform: scale(.3);
|
||||
background-color: rgb(255, 255, 255);
|
||||
}
|
||||
}
|
||||
|
||||
@-ms-keyframes bounce_fountainG {
|
||||
0% {
|
||||
-ms-transform: scale(1);
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
100% {
|
||||
-ms-transform: scale(.3);
|
||||
background-color: rgb(255, 255, 255);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bounce_fountainG {
|
||||
0% {
|
||||
-webkit-transform: scale(1);
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(.3);
|
||||
background-color: rgb(255, 255, 255);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes bounce_fountainG {
|
||||
0% {
|
||||
-moz-transform: scale(1);
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
100% {
|
||||
-moz-transform: scale(.3);
|
||||
background-color: rgb(255, 255, 255);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,352 @@
|
||||
/*//////////////////////////////////////////////////////////////////
|
||||
[ 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 ]*/
|
||||
+2
-7
@@ -1,7 +1,3 @@
|
||||
|
||||
|
||||
|
||||
|
||||
/*//////////////////////////////////////////////////////////////////
|
||||
[ FONT ]*/
|
||||
|
||||
@@ -25,9 +21,6 @@
|
||||
src: url('../fonts/poppins/Poppins-SemiBold.ttf');
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*//////////////////////////////////////////////////////////////////
|
||||
[ RESTYLE TAG ]*/
|
||||
|
||||
@@ -489,6 +482,8 @@ iframe {
|
||||
}
|
||||
}
|
||||
|
||||
/*//////////////////////////////////////////////////////////////////
|
||||
[ FIN ]*/
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -119,6 +119,19 @@ a {
|
||||
}
|
||||
|
||||
|
||||
/* Search bar */
|
||||
.search-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: .25rem;
|
||||
padding:3em;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
/* Clear floats after the columns */
|
||||
|
||||
.row:after {
|
||||
|
||||
Reference in New Issue
Block a user