122 lines
1.9 KiB
Plaintext
122 lines
1.9 KiB
Plaintext
@import "vars";
|
|
|
|
.windows-border {
|
|
border-radius: 0;
|
|
border: none;
|
|
box-shadow: inset -1px -1px @color-black,
|
|
inset 1px 1px white,
|
|
inset -2px -2px @color-dark-grey,
|
|
inset 2px 2px @color-light-grey;
|
|
}
|
|
|
|
.button {
|
|
@border-size: 3px;
|
|
|
|
.windows-border();
|
|
|
|
padding: 3px 14px;
|
|
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 20%;
|
|
cursor: pointer;
|
|
|
|
&:active, &.active {
|
|
box-shadow: inset -1px -1px white,
|
|
inset 1px 1px @color-black,
|
|
inset -2px -2px @color-light-grey,
|
|
inset 2px 2px @color-dark-grey;
|
|
}
|
|
}
|
|
|
|
table.table {
|
|
border-collapse: collapse;
|
|
border: 1px solid @color-dark-grey;
|
|
|
|
tr.grey {
|
|
background: @color-dark-grey;
|
|
}
|
|
|
|
td {
|
|
padding: 0 6px;
|
|
}
|
|
|
|
thead td {
|
|
.windows-border();
|
|
background: @color-grey;
|
|
}
|
|
|
|
tbody {
|
|
background: white;
|
|
}
|
|
}
|
|
|
|
@keyframes rotating {
|
|
from {
|
|
transform: rotate3d(0, 1, 0, -25deg) translateY(-10px);
|
|
}
|
|
50% {
|
|
transform: rotate3d(0, 1, 0, 25deg) translateY(10px);
|
|
}
|
|
to {
|
|
transform: rotate3d(0, 1, 0, -25deg) translateY(-10px);
|
|
}
|
|
}
|
|
|
|
.window {
|
|
position: absolute;
|
|
|
|
.windows-border();
|
|
padding: 2px;
|
|
background: silver;
|
|
|
|
&.three-d {
|
|
animation-duration: 20s;
|
|
animation-name: rotating;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
&-title {
|
|
background: linear-gradient(90deg, navy, @color-cyan);
|
|
padding: 4px;
|
|
color: white;
|
|
cursor: grab;
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.close {
|
|
width: 20px;
|
|
padding: 2px 0;
|
|
text-align: center;
|
|
background: @color-grey;
|
|
color: @color-black;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
&-body {
|
|
padding: 10px 15px;
|
|
|
|
.error {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 16px;
|
|
|
|
&::after {
|
|
display: block;
|
|
content: "!";
|
|
}
|
|
|
|
img {
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|