personal-website/front/dist/desktop.css

330 lines
5.6 KiB
CSS
Raw Normal View History

2023-07-21 01:42:12 +00:00
.WdePrimitives.AdjectiveElement {
border: 1px solid #555;
}
.FileTileView {
width: 100%;
height: 100%;
}
.FileTileView.DragDropBorder {
box-shadow: inset 0 0 0 4px #99c;
}
.FileTileView .FlexContainer {
scrollbar-width: none;
-ms-overflow-style: none;
flex-flow: wrap;
place-content: flex-start;
align-items: flex-start;
gap: 20px 50px;
width: 100%;
height: auto;
margin: 15px;
display: flex;
}
.FileTileView::-webkit-scrollbar {
width: 0;
height: 0;
}
.FileTileView .Tile {
flex-flow: column;
justify-content: flex-start;
align-items: center;
gap: 2px;
width: 50px;
height: 50px;
padding: 0;
display: flex;
}
.FileTileView .Icon {
image-rendering: optimizespeed;
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: pixelated;
image-rendering: optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;
background-size: cover;
width: 32px;
height: 32px;
}
.FileTileView .Selected .Icon {
filter: brightness(.4);
}
.FileTileView .Lable {
white-space: nowrap;
}
.FileTileView .Selected .Lable {
white-space: nowrap;
color: #fff;
background-color: #000;
}
.WindowFrame {
background: #ddd;
border: 1px solid #555;
flex-direction: column;
flex: 1 0 auto;
order: 1;
align-self: stretch;
align-items: flex-start;
gap: 4px;
padding: 2px 6px 4px 4px;
display: flex;
position: absolute;
}
.WindowFrame.Focused {
background-color: #ccc;
border: 1px solid #000;
}
.WindowFrameShadow {
box-shadow: 2px 2px #555;
}
.WindowFrameShadow.Focused {
box-shadow: 2px 2px #000;
}
.ConvexElement.Focused {
box-shadow: 1px 1px #00000040, inset -1px -1px #00000045, inset 1px 1px #fff;
}
.AdjectiveElement {
border: 1px solid #555;
}
.Focused .AdjectiveElement {
border: 1px solid #000;
box-shadow: -1px -1px #00000040, 1px 1px #fff;
}
.AdjectiveHorizontalLine {
border-top: 1px solid #00000040;
border-bottom: 1px solid #fff;
width: 100%;
height: 0;
}
.AdjectiveHorizontalLine:last-child {
visibility: hidden;
height: 0%;
}
.WindowFrame .TitleBar {
flex-direction: row;
flex: none;
order: 0;
justify-content: center;
align-self: stretch;
align-items: center;
gap: 5px;
width: 100%;
height: 13px;
padding: 0;
display: flex;
}
.WindowFrame .TitleBar .Lable {
color: #777;
pointer-events: none;
white-space: nowrap;
letter-spacing: .35px;
font-family: Virtue;
position: relative;
top: 1px;
}
.WindowFrame.Focused .TitleBar .Lable {
color: #000;
}
.WindowFrame .TitleBar .Button {
visibility: hidden;
background: linear-gradient(135deg, #999 18.18%, #fff 81.82%);
border: 1px solid #222;
flex: none;
order: 0;
width: 11px;
height: 11px;
padding: 0%;
position: relative;
top: 1px;
box-shadow: .5px .5px 0 .5px #fff, -.5px -.5px 0 .5px #00000040, inset 1px 1px #ffffff80, inset -1px -1px #00000045;
}
.WindowFrame.Focused .TitleBar .Button {
visibility: visible;
}
.WindowFrame .TitleBar .Button:active {
background-color: #0006;
box-shadow: .5px .5px 0 .5px #fff, -.5px -.5px 0 .5px #00000040;
}
.Focused .VisualDragArea {
pointer-events: none;
filter: drop-shadow(1px 1px #777);
background: linear-gradient(#0000 0%, #fff 0% 50%, #0000 50%) 0 0 / 2px 2px;
width: 100%;
height: 11px;
}
.MobileContentBorder {
background-color: #ddd;
flex-direction: row;
justify-content: center;
align-items: flex-start;
width: 100%;
height: 100%;
padding: 0;
display: flex;
overflow: hidden;
}
.MobileApplicationWindow {
flex-direction: column;
align-items: flex-start;
gap: 4px;
width: 100%;
height: 100%;
display: flex;
position: absolute;
top: 0;
left: 0;
}
.MobileWindowFrameBottomBar {
flex: none;
order: 0;
align-self: stretch;
width: 100%;
height: 20px;
}
.MobileWindowFrameBottomBarButton {
background: linear-gradient(135deg, #999 18.18%, #fff 81.82%);
border: 1px solid #222;
flex: none;
order: 0;
width: auto;
min-width: 11px;
height: 15px;
padding: 0 4px;
position: absolute;
right: 4px;
box-shadow: .5px .5px 0 .5px #fff, -.5px -.5px 0 .5px #00000040, inset 1px 1px #ffffff80, inset -1px -1px #00000045;
}
.MobileWindowFrameBottomBar .MobileLable {
pointer-events: none;
white-space: nowrap;
letter-spacing: .35px;
font-family: Virtue;
position: absolute;
left: 50%;
}
.ContentBorder {
width: 100%;
height: 100%;
overflow: hidden;
}
.ContextMenu {
background-color: #ddd;
border: 1px solid #000;
width: auto;
height: auto;
position: absolute;
}
.ContextMenu .Content {
flex-direction: column;
align-items: flex-start;
width: auto;
height: auto;
display: flex;
position: relative;
}
.ContextMenu .Row {
width: 100%;
height: 16px;
}
.ContextMenu .Row:hover {
color: #fff;
background-color: #339;
}
.ContextMenu .Row .Lable {
white-space: nowrap;
margin-left: 20px;
margin-right: 12px;
font-family: Virtue;
}
.NoClick {
pointer-events: none;
}
.Click {
pointer-events: all;
}
* {
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: initial;
}
::-webkit-scrollbar {
width: 0;
height: 0;
}
body {
zoom: var(--zoom);
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
-khtml-user-select: none;
touch-action: manipulation;
width: 100%;
height: 100%;
margin: 0;
position: absolute;
}
#applications {
visibility: hidden;
width: 0;
height: 0;
position: static;
}
#windows-layer {
width: 0;
height: 0;
position: static;
}
#desktop-layer {
background-color: #99c;
width: 100%;
height: 100%;
position: fixed;
}
/*# sourceMappingURL=desktop.css.map */