515 lines
8.0 KiB
CSS
515 lines
8.0 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;
|
|
}
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.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 {
|
|
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;
|
|
}
|
|
} |