699 lines
12 KiB
CSS
699 lines
12 KiB
CSS
@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);
|
|
}
|
|
} |