diff --git a/front/dist/Charcoal.cb9045e5.woff2 b/front/dist/Charcoal.cb9045e5.woff2 new file mode 100644 index 0000000..4d4293c Binary files /dev/null and b/front/dist/Charcoal.cb9045e5.woff2 differ diff --git a/front/dist/Geneva.41461b69.woff2 b/front/dist/Geneva.41461b69.woff2 new file mode 100644 index 0000000..adc77a9 Binary files /dev/null and b/front/dist/Geneva.41461b69.woff2 differ diff --git a/front/dist/apps/about-me/about-me.css b/front/dist/apps/about-me/about-me.css index 62711af..7bfbbce 100644 --- a/front/dist/apps/about-me/about-me.css +++ b/front/dist/apps/about-me/about-me.css @@ -1,3 +1,23 @@ +@font-face { + font-family: Geneva; + src: url("../../Geneva.41461b69.woff2"); +} + +@font-face { + font-family: Charcoal; + src: url("../../Charcoal.cb9045e5.woff2"); +} + +.large-system-font, .ShortBio > .Text > .Name, .Island .Title, .Island .Key { + letter-spacing: .35px; + font-family: Charcoal; + font-size: 12px; +} + +.small-system-font, .views-font { + font-family: Geneva; +} + .PersPropsContent { flex-direction: row; justify-content: center; @@ -26,13 +46,9 @@ .PropertiesList .ShortBio { flex-direction: row; - flex: 1 0 auto; - order: 0; - align-self: stretch; align-items: center; gap: 15px; - margin-right: 20px; - padding: 0; + width: 100%; display: flex; } @@ -53,22 +69,23 @@ display: flex; } -.ShortBio .Name { - letter-spacing: .35px; - font-family: Virtue; -} - .PropertiesList .Links { - align-items: left; - flex-direction: row; - gap: 4px; + flex-direction: column; + justify-content: center; + align-items: end; width: auto; height: auto; padding: 0; display: flex; - position: absolute; - top: 27px; - right: 14px; +} + +.Links > a { + flex-direction: row; + justify-content: center; + align-items: end; + gap: 2px; + padding: 0; + display: flex; } .PropertiesList .Links .Link { @@ -85,20 +102,14 @@ } .Island .Title { - letter-spacing: .35px; background-color: #ddd; max-width: 100%; - font-family: Virtue; display: inline-block; position: relative; top: -9px; left: 12px; } -.Focused .Island .Title { - background-color: #ccc; -} - .Island .Content { flex-direction: column; justify-content: center; @@ -119,12 +130,9 @@ } .Island .Key { - letter-spacing: .35px; text-align: end; white-space: nowrap; width: 34%; - font-family: Virtue; - font-size: 11px; position: relative; top: -1.5px; } diff --git a/front/dist/apps/about-me/about-me.css.map b/front/dist/apps/about-me/about-me.css.map index 98d5014..6db50aa 100644 --- a/front/dist/apps/about-me/about-me.css.map +++ b/front/dist/apps/about-me/about-me.css.map @@ -1 +1 @@ -{"mappings":"AAwBA;;;;;;;;;;AAYA;;;;;AAKA;;;;;;;;;;;AAkBA;;;;;;;;;;;;AAoBA;;;;;;AAMA;;;;;;;;;;;AAkBA;;;;;AAMA;;;;;;;;;;;;;AAgBA;;;;;AAMA;;;;;;;;AAeA;;;;;;;;;;;AAYA;;;;AAIA;;;;;;;;;AAWA;;;;;;;;;;AAUA;;;;;;;;;;;AAaA;;;;;;;;AAUA","sources":["src/apps/about-me/about-me.less"],"sourcesContent":["/* TODO Move this to body? */\n/*.ScrollContent {\n width: 100%;\n height: 100%;\n overflow: scroll;\n overflow-x: hidden;\n /* Firefox */\n /* scrollbar-width: none; */\n /* Internet Explorer 10+ */\n /* -ms-overflow-style: none; */\n\n /* Auto layout */\n /*display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: flex-start;\n padding: 0px;\n}*/\n\n/* WebKit */\n/* .ScrollContent::-webkit-scrollbar { \n width: 0;\n height: 0;\n} */\n.PersPropsContent{\n width: 100%;\n height: 100%;\n\n /* Auto layout */\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: flex-start;\n padding: 0px;\n}\n\n.PersPropsContent .PropsView{\n /* background-color: rebeccapurple; */\n width: 100%;\n height: auto;\n}\n.PropertiesList{\n /* width: 100%;\n height: auto; */\n\n /* Inside auto layout */\n order: 0;\n align-self: flex-start;\n flex-grow: 0;\n\n /* Auto layout */\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 12px;\n gap:16px;\n}\n\n\n.PropertiesList .ShortBio{\n /* width: 100%;\n height: auto; */\n /* margin-right: -20px; */\n\n /* Inside auto layout */\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 1;\n\n /* Auto layout */\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n margin-right: 20;\n gap:15px;\n}\n\n.ShortBio .Image{\n width: 48px;\n height: 48px;\n padding-left: 10px;\n}\n\n.ShortBio .Text{\n /* width: 100%;\n height: auto; */\n\n /* Inside auto layout */\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 1;\n \n /* Auto layout */\n display: flex;\n flex-direction: column;\n align-items: left;\n padding: 0px;\n gap:1px;\n}\n\n.ShortBio .Name{\n font-family: \"Virtue\";\n /* FIXME */\n letter-spacing: 0.35px; \n}\n\n.PropertiesList .Links {\n position: absolute;\n right: 14px;\n top: 27px;\n /* background-color: aqua; */\n height: auto;\n width: auto;\n\n /* Auto layout */\n display: flex;\n flex-direction: row;\n align-items: left;\n padding: 0px;\n gap:4px;\n}\n\n.PropertiesList .Links .Link {\n /* background-color:brown; */\n width: 16px;\n height: 16px;\n}\n\n.PropertiesList .Island{\n width: 100%;\n height: auto;\n border: 1px solid #888888;\n box-shadow: 1px 1px 0px #FFFFFF, inset 1px 1px 0px #FFFFFF;\n padding-bottom: 10px;\n\n /* Auto layout */\n /* display: flex;\n flex-direction: column;\n align-items: center;\n padding: 0px;\n gap:1px; */\n}\n\n.Island .Title {\n font-family: \"Virtue\";\n /* FIXME */\n letter-spacing: 0.35px; \n position:relative;\n display: inline-block;\n max-width: 100%;\n background-color: #DDDDDD;\n left: 12px;\n top: -9px;\n}\n\n.Focused .Island .Title{\n background-color: #CCCCCC;\n}\n\n.Island .Content{\n width: 100%;\n /* top: 0px; */\n /* Auto layout */\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 0px;\n gap: 12px;\n}\n\n.Island .Row{\n margin-left: 12px;\n margin-right: 12px;\n /* Auto layout */\n display: flex;\n flex-direction: row;\n justify-content: center;\n padding: 0px;\n gap: 5px;\n}\n.Island .Key{\n position: relative;\n font-family: \"Virtue\";\n font-size: 11px;\n letter-spacing: 0.35px;\n text-align: end;\n width: 34%;\n white-space: nowrap;\n top: -1.5px;\n\n /* font-weight: bold; */\n}\n\n.Island .KeyComment{\n /* color: rgb(129, 129, 129); TODO*/\n color: #646464;\n font-size: 9px;\n font-style: italic;\n text-align: end;\n white-space:normal;\n /* filter: drop-shadow(-.5px -.5px 0px #616161); */\n}\n\n.Island .Values{\n width: 55%;\n display: flex;\n flex-direction: column;\n justify-content: left;\n padding: 0px;\n gap: 5px;\n\n}\n\n.Values .Value{\n /* width: 55%; */\n\n}"],"names":[],"version":3,"file":"about-me.css.map","sourceRoot":"/__parcel_source_root/"} \ No newline at end of file +{"mappings":"ACiBA;;;;;AAKA;;;;;AAKA;;;;;;AAMA;;;;AD/BA;;;;;;;;;;AAYA;;;;;AAKA;;;;;;;;;;;AAkBA;;;;;;;;AAsBA;;;;;;AAMA;;;;;;;;;;;AAuBA;;;;;;;;;;AAiBA;;;;;;;;;AAeA;;;;;AAMA;;;;;;;;AAeA;;;;;;;;;AAWA;;;;;;;;;AAWA;;;;;;;;;;AAUA;;;;;;;;AAcA;;;;;;;;AAUA","sources":["src/apps/about-me/about-me.less","src/theme.less"],"sourcesContent":["@import \"../../theme.less\";\n\n.PersPropsContent{\n width: 100%;\n height: 100%;\n\n /* Auto layout */\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: flex-start;\n padding: 0px;\n}\n\n.PersPropsContent .PropsView{\n /* background-color: rebeccapurple; */\n width: 100%;\n height: auto;\n}\n.PropertiesList{\n /* width: 100%;\n height: auto; */\n\n /* Inside auto layout */\n order: 0;\n align-self: flex-start;\n flex-grow: 0;\n\n /* Auto layout */\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 12px;\n gap:16px;\n}\n\n\n.PropertiesList .ShortBio{\n /* width: 100%;\n height: auto; */\n /* margin-right: -20px; */\n\n // background-color: aquamarine;\n /* Inside auto layout */\n width: 100%;\n // flex: none;\n // order: 0;\n // align-self: stretch;\n // flex-grow: 1;\n\n /* Auto layout */\n display: flex;\n flex-direction: row;\n align-items: center;\n // padding: 0px;\n // margin-right: 20;\n gap:15px;\n}\n\n.ShortBio .Image{\n width: 48px;\n height: 48px;\n padding-left: 10px;\n}\n\n.ShortBio .Text{\n /* width: 100%;\n height: auto; */\n\n /* Inside auto layout */\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 1;\n \n /* Auto layout */\n display: flex;\n flex-direction: column;\n align-items: left;\n padding: 0px;\n gap:1px;\n}\n\n.ShortBio > .Text > .Name{\n &:extend(.large-system-font);\n // background-color: aqua;\n}\n\n.PropertiesList .Links {\n // position: absolute;\n // right: 14px;\n // top: 27px;\n // background-color: aqua;\n height: auto;\n width: auto;\n\n // background-color: aqua;\n /* Auto layout */\n display: flex;\n flex-direction: column;\n align-items: end;\n justify-content: center;\n padding: 0px;\n // gap:4px;\n}\n.Links > a{\n /* Auto layout */\n display: flex;\n flex-direction: row;\n align-items: end;\n justify-content: center;\n padding: 0px;\n gap: 2px;\n}\n.Links > a > .link-lable{\n // background-color: aqua;\n // line-height: 60px;\n // display:table\n}\n\n.PropertiesList .Links .Link {\n /* background-color:brown; */\n width: 16px;\n height: 16px;\n}\n\n.PropertiesList .Island{\n width: 100%;\n height: auto;\n border: 1px solid #888888;\n box-shadow: 1px 1px 0px #FFFFFF, inset 1px 1px 0px #FFFFFF;\n padding-bottom: 10px;\n\n /* Auto layout */\n /* display: flex;\n flex-direction: column;\n align-items: center;\n padding: 0px;\n gap:1px; */\n}\n\n.Island .Title {\n //FIXME\n &:extend(.large-system-font);\n position:relative;\n display: inline-block;\n max-width: 100%;\n background-color: #DDDDDD;\n left: 12px;\n top: -9px;\n}\n\n.Island .Content{\n width: 100%;\n /* top: 0px; */\n /* Auto layout */\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 0px;\n gap: 12px;\n}\n\n.Island .Row{\n margin-left: 12px;\n margin-right: 12px;\n /* Auto layout */\n display: flex;\n flex-direction: row;\n justify-content: center;\n padding: 0px;\n gap: 5px;\n}\n.Island .Key{\n position: relative;\n &:extend(.large-system-font);\n // font-family: \"Virtue\";\n // font-size: 11px;\n // letter-spacing: 0.35px;\n text-align: end;\n width: 34%;\n white-space: nowrap;\n top: -1.5px;\n\n /* font-weight: bold; */\n}\n\n.Island .KeyComment{\n /* color: rgb(129, 129, 129); TODO*/\n color: #646464;\n font-size: 9px;\n font-style: italic;\n text-align: end;\n white-space:normal;\n /* filter: drop-shadow(-.5px -.5px 0px #616161); */\n}\n\n.Island .Values{\n width: 55%;\n display: flex;\n flex-direction: column;\n justify-content: left;\n padding: 0px;\n gap: 5px;\n\n}\n\n.Values .Value{\n /* width: 55%; */\n\n}",null],"names":[],"version":3,"file":"about-me.css.map","sourceRoot":"/__parcel_source_root/"} \ No newline at end of file diff --git a/front/dist/apps/finder/finder.css b/front/dist/apps/finder/finder.css index f426f50..66e3a66 100644 --- a/front/dist/apps/finder/finder.css +++ b/front/dist/apps/finder/finder.css @@ -1,6 +1,55 @@ -.FinderContent { +@font-face { + font-family: Geneva; + src: url("../../Geneva.41461b69.woff2"); +} + +@font-face { + font-family: Charcoal; + src: url("../../Charcoal.cb9045e5.woff2"); +} + +.large-system-font { + letter-spacing: .35px; + font-family: Charcoal; + font-size: 12px; +} + +.small-system-font, .views-font { + font-family: Geneva; +} + +.adjective { + border: 1px solid #555; +} + +.convex { + box-shadow: 1px 1px #00000040, inset -1px -1px #00000045, inset 1px 1px #fff; +} + +.border .grey { + border: 1px solid #555; +} + +.border .black { + border: 1px solid #000; +} + +.shadow .grey { + box-shadow: 1px 1px #555; +} + +.shadow .black { + box-shadow: 1px 1px #000; +} + +.rows-fill-shadowed { + filter: drop-shadow(1px 1px #777); + background: linear-gradient(#0000 0%, #fff 0% 50%, #0000 50%) 0 0 / 2px 2px; +} + +.finder-content { flex-direction: column; - justify-content: center; + justify-content: start; align-items: flex-start; width: 100%; height: 100%; @@ -8,20 +57,18 @@ display: flex; } -.FinderContent .ToolBar { - background-color: #eee; +.finder-content > .tool-bar { border-bottom: 1px solid #555; width: 100%; - height: 20px; + min-height: 20px; } -.Focused .FinderContent .ToolBar { - background-color: #ddd; +.window-frame.Focused .tool-bar { border-bottom: 1px solid #000; + box-shadow: inset -1px -1px #00000045, inset 1px 1px #fff; } -.FinderContent .FinderFileView { - background-color: #fff; +.finder-content > .file-view-container { flex-direction: row; justify-content: center; align-items: flex-start; diff --git a/front/dist/apps/finder/finder.css.map b/front/dist/apps/finder/finder.css.map index 3cfcbb8..4868130 100644 --- a/front/dist/apps/finder/finder.css.map +++ b/front/dist/apps/finder/finder.css.map @@ -1 +1 @@ -{"mappings":"AAAA;;;;;;;;;;AAYA;;;;;;;AAOA;;;;;AAOA","sources":["src/apps/finder/finder.less"],"sourcesContent":[".FinderContent {\n width: 100%;\n height: 100%;\n\n /* Auto layout */\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n padding: 0px;\n}\n\n.FinderContent .ToolBar{\n width: 100%;\n height: 20px;\n border-bottom: 1px solid #555555;\n background-color: #EEEEEE;\n}\n\n.Focused .FinderContent .ToolBar{\n border-bottom: 1px solid #000000;\n background-color: #DDDDDD;\n}\n\n\n\n.FinderContent .FinderFileView{\n width: 100%;\n height: 100%;\n\n background-color: #FFFFFF;\n\n /* Auto layout */\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: flex-start;\n padding: 0px;\n}"],"names":[],"version":3,"file":"finder.css.map","sourceRoot":"/__parcel_source_root/"} \ No newline at end of file +{"mappings":"ACiBA;;;;;AAKA;;;;;AAKA;;;;;;AAMA;;;;ACjCA;;;;AAIA;;;;AAMA;;;;AAAA;;;;AAUA;;;;AAAA;;;;AAWA;;;;;AF5BA;;;;;;;;;;AAYA;;;;;;AAMA;;;;;AAKA","sources":["src/apps/finder/finder.less","src/theme.less","src/wde/effects.less"],"sourcesContent":["@import \"../../theme.less\";\n@import \"../../wde/effects.less\";\n\n.finder-content {\n width: 100%;\n height: 100%;\n\n /* Auto layout */\n display: flex;\n flex-direction: column;\n justify-content: start;\n align-items: flex-start;\n padding: 0px;\n}\n\n.finder-content > .tool-bar{\n width: 100%;\n min-height: 20px;\n border-bottom: @eff-border-grey;\n}\n\n.window-frame.Focused .tool-bar{\n border-bottom: 1px solid #000000;\n box-shadow: @eff-box-shadow-convex;\n}\n\n.finder-content > .file-view-container{\n width: 100%;\n height: 100%;\n\n // background-color: #FFFFFF;\n\n /* Auto layout */\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: flex-start;\n padding: 0px;\n}",null,null],"names":[],"version":3,"file":"finder.css.map","sourceRoot":"/__parcel_source_root/"} \ No newline at end of file diff --git a/front/dist/desktop.css b/front/dist/desktop.css index 7a1b10b..0e5f8d8 100644 --- a/front/dist/desktop.css +++ b/front/dist/desktop.css @@ -1,7 +1,11 @@ -.WdePrimitives.AdjectiveElement { +.WdePrimitives .adjective { border: 1px solid #555; } +.WdePrimitives .black-border { + border: 1px solid #000; +} + .FileTileView { width: 100%; height: 100%; @@ -41,13 +45,6 @@ } .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; @@ -67,170 +64,105 @@ background-color: #000; } -.WindowFrame { - background: #ddd; - border: 1px solid #555; - flex-direction: column; +.scrollbar-place { + border-left: 1px solid #555; 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%; + width: 14px; height: 100%; - padding: 0; - display: flex; + bottom: 0; + right: 0; overflow: hidden; } -.MobileApplicationWindow { - flex-direction: column; - align-items: flex-start; - gap: 4px; - width: 100%; - height: 100%; +.Focused .active .scrollbar-place { + background-color: #aaa; + border-left: 1px solid #000; + box-shadow: inset -1px 0 #ffffff4a, inset -2px 0 #ffffff30, inset 1px 1px #00000024, inset 2px 2px #00000030; +} + +.scroll-element { + visibility: hidden; + background: #99f; + flex-direction: row; + justify-content: space-around; + align-items: center; + gap: 5px; + width: 14px; + height: 31px; + padding: 0; display: flex; - position: absolute; - top: 0; - left: 0; + position: relative; + box-shadow: 0 -1px #000, 0 1px #000, 0 2px #00000021, 0 3px #00000030, inset 0 1px #ffffff80, inset 1px 0 #ffffff80, inset -1px -1px #6666cce8; } -.MobileWindowFrameBottomBar { - flex: none; - order: 0; - align-self: stretch; - width: 100%; - height: 20px; +.Focused .active .scroll-element { + visibility: visible; } -.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 { +.drag-element { pointer-events: none; - white-space: nowrap; - letter-spacing: .35px; - font-family: Virtue; - position: absolute; - left: 50%; + filter: drop-shadow(1px 1px #339); + background: linear-gradient(#0000 0%, #ccf 0% 50%, #0000 50%) 0 0 / 2px 2px; + width: 7px; + height: 7px; + margin-left: -1px; +} + +.ScrollContent { + scrollbar-width: none; + -ms-overflow-style: none; + overflow-x: hidden; + overflow-y: scroll; +} + +.ScrollContent::-webkit-scrollbar { + width: 0; + height: 0; +} + +.adjective { + border: 1px solid #555; +} + +.convex { + box-shadow: 1px 1px #00000040, inset -1px -1px #00000045, inset 1px 1px #fff; +} + +.border .grey { + border: 1px solid #555; +} + +.border .black { + border: 1px solid #000; +} + +.shadow .grey { + box-shadow: 1px 1px #555; +} + +.shadow .black { + box-shadow: 1px 1px #000; +} + +.rows-fill-shadowed, .window-frame.Focused .title-bar .visual-drag-area { + filter: drop-shadow(1px 1px #777); + background: linear-gradient(#0000 0%, #fff 0% 50%, #0000 50%) 0 0 / 2px 2px; +} + +.wde-button { + background-color: #ddd; + border: 1px solid #000; + border-radius: 3px; + width: auto; + height: 20px; + box-shadow: inset -1px -1px #00000045, inset 1px 1px #fff; +} + +.wde-button:active { + background-color: #666; + box-shadow: inset 1px 1px #00000045, inset -1px -1px gray; } .ContentBorder { @@ -273,6 +205,121 @@ font-family: Virtue; } +@font-face { + font-family: Geneva; + src: url("Geneva.41461b69.woff2"); +} + +@font-face { + font-family: Charcoal; + src: url("Charcoal.cb9045e5.woff2"); +} + +.large-system-font, .title-bar .lable { + letter-spacing: .35px; + font-family: Charcoal; + font-size: 12px; +} + +.small-system-font, .views-font, body { + font-family: Geneva; +} + +.window-frame { + background-color: #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; + box-shadow: 1px 1px #555; +} + +.window-frame.Focused { + background-color: #ccc; + border: 1px solid #000; + box-shadow: 1px 1px #555, inset -1px -1px #00000045, inset 1px 1px #fff; +} + +.content-border { + background-color: #eee; + border: 1px solid #555; + width: 100%; + height: 100%; + overflow: hidden; +} + +.Focused .content-border { + background-color: #ddd; + border: 1px solid #000; + box-shadow: -1px -1px #00000040, 1px 1px #fff; +} + +.title-bar { + 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; +} + +.title-bar .lable { + color: gray; + pointer-events: none; + white-space: nowrap; + position: relative; + top: 1px; +} + +.window-frame.Focused .title-bar .lable { + color: #000; +} + +.window-frame.Focused .title-bar .visual-drag-area { + pointer-events: none; + width: 100%; + height: 11px; +} + +.title-bar > .icon { + width: 16px; + height: 16px; +} + +.title-bar > .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; +} + +.title-bar > .button:active { + background-color: #0006; + box-shadow: .5px .5px 0 .5px #fff, -.5px -.5px 0 .5px #00000040; +} + +.window-frame.Focused .title-bar > .button { + visibility: visible; +} + .NoClick { pointer-events: none; } @@ -281,20 +328,13 @@ 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); + src: url("Geneva.41461b69.woff2"); -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; @@ -303,6 +343,7 @@ body { width: 100%; height: 100%; margin: 0; + font-size: 11px; position: absolute; } diff --git a/front/dist/desktop.css.map b/front/dist/desktop.css.map index 84629cb..bd7ef87 100644 --- a/front/dist/desktop.css.map +++ b/front/dist/desktop.css.map @@ -1 +1 @@ -{"mappings":"ACAA;;;;ACAA;;;;;AASA;;;;AAKA;;;;;;;;;;;;;AAqBA;;;;;AAKA;;;;;;;;;;;AAkBA;;;;;;;;;;;;;AAeA;;;;AAIA;;;;AAIA;;;;;;ACjFA;;;;;;;;;;;;;;AAwBA;;;;;AAKA;;;;AAKA;;;;AAIA;;;;AAMA;;;;AAIA;;;;;AAQA;;;;;;;AAOA;;;;;AAMA;;;;;;;;;;;;;;AAmBA;;;;;;;;;;AAYA;;;;AAKA;;;;;;;;;;;;;;AAoBA;;;;AAIA;;;;;AAOA;;;;;;;;AASA;;;;;;;;;;;;AAsBA;;;;;;;;;;;;AAcA;;;;;;;;AAkBA;;;;;;;;;;;;;;AAqBA;;;;;;;;;AC5NA;;;;;;AAUA;;;;;;;;AAUA;;;;;;;;;AAgBA;;;;;AAYA;;;;;AAKA;;;;;;;AJ/BA;;;;AAGA;;;;AAGA;;;;;;;AAOA;;;;;AAKA;;;;;;;;;;;;;AAkBA;;;;;;;AAOA;;;;;;AAOA","sources":["src/desktop.less","src/wde/primitives.less","src/wde/widgets/file-view/file-view.less","src/wde/legacy-ui.less","src/wde/widgets/basic-widgets.less"],"sourcesContent":["@import \"./wde/primitives.less\";\n@import \"./wde/widgets/file-view/file-view.less\";\n@import \"./wde/legacy-ui.less\";\n@import \"./wde/widgets/basic-widgets.less\";\n@import \"./theme.less\";\n\n// @font-face{\n// font-family: \"Virtue\";\n// src:url(\"/res/dev-fs/fonts/virtue.ttf\");\n// }\n\n/* @font-face{\n font-family: \"Virtue\";\n src:url(\"/res/dev-fs/fonts/virtue.ttf\")\n} */\n\n/* @media screen and (max-device-width: 2048px) and (max-device-height: 2048px) {\n html {\n zoom: 3\n }\n } */\n\n.NoClick {\n pointer-events: none;\n}\n.Click {\n pointer-events: all;\n}\n*{\n font-family: Verdana, Geneva, sans-serif;\n font-size: 11px;\n font-style: normal;\n font-weight:initial;\n}\n\n*::-webkit-scrollbar { /* WebKit */\n width: 0;\n height: 0;\n}\n\nbody{\n zoom: var(--zoom);\n position: absolute;\n width: 100%;\n height: 100%;\n margin: 0px;\n\n /* font: normal 14px Summer Pixel 22, \"res/SummerPixel22Regular.ttf\"; */\n -webkit-touch-callout: none; /* iOS Safari */\n -webkit-user-select: none; /* Safari */\n -khtml-user-select: none; /* Konqueror HTML */\n -moz-user-select: none; /* Old versions of Firefox */\n -ms-user-select: none; /* Internet Explorer/Edge */\n user-select: none; /* Non-prefixed version, currently\n supported by Chrome, Edge, Opera and Firefox */\n touch-action: manipulation;\n}\n\n#applications{\n position: static;\n width: 0px;\n height: 0px;\n visibility: hidden;\n}\n\n#windows-layer {\n width: 0px;\n height: 0px;\n /* position: fixed; */\n position: static;\n}\n\n#desktop-layer{\n position: fixed;\n /* margin: 0px; */\n width: 100%;\n height: 100%;\n background-color: @col-ceil;\n}",null,null,null,null],"names":[],"version":3,"file":"desktop.css.map","sourceRoot":"/__parcel_source_root/"} \ No newline at end of file +{"mappings":"ACAA;;;;AAAA;;;;ACCA;;;;;AAWA;;;;AAKA;;;;;;;;;;;;;AAqBA;;;;;AAKA;;;;;;;;;;;AAkBA;;;;;;AAeA;;;;AAIA;;;;AAIA;;;;;;ACrEA;;;;;;;;;;;;AAsBA;;;;;;AASA;;;;;;;;;;;;;;;AAyBA;;;;AAIA;;;;;;;;;AAeA;;;;;;;AAgBA;;;;;AC1GA;;;;AAIA;;;;AAMA;;;;AAAA;;;;AAUA;;;;AAAA;;;;AAWA;;;;;AE5BA;;;;;;;;;AACI;;;;;ACJJ;;;;;;AAUA;;;;;;;;AAUA;;;;;;;;;AAgBA;;;;;AAYA;;;;;AAKA;;;;;;;ACpCA;;;;;AAKA;;;;;AAKA;;;;;;AAMA;;;;AC9BA;;;;;;;;;;;;;;;AAyBA;;;;;;AAOA;;;;;;;;AAUA;;;;;;AJ1CA;;;;;;;;;;;;;;AAmBA;;;;;;;;AAcA;;;;AAIA;;;;;;AAOA;;;;;AAOA;;;;;;;;;;;;;;AAQI;;;;;AAmBJ;;;;ALvEA;;;;AAGA;;;;AAYA;;;;;AAKA;;;;;;;;;;;;;;AAwBA;;;;;;;AAOA;;;;;;AAOA","sources":["src/desktop.less","src/wde/primitives.less","src/wde/widgets/file-view/file-view.less","src/wde/widgets/scrollbar/scrollbar.less","src/wde/effects.less","src/wde/widgets/title-bar/title-bar.less","src/wde/widgets/button/button.less","src/wde/widgets/basic-widgets.less","src/theme.less","src/wde/window-frame.less"],"sourcesContent":["@import \"./wde/primitives.less\";\n@import \"./wde/widgets/file-view/file-view.less\";\n@import \"./wde/widgets/scrollbar/scrollbar.less\";\n@import \"./wde/widgets/button/button.less\";\n// @import \"./wde/legacy-ui.less\";\n@import \"./wde/widgets/basic-widgets.less\";\n@import \"./theme.less\";\n@import \"./wde/window-frame.less\";\n@import \"./wde/widgets/title-bar/title-bar.less\";\n\n.NoClick {\n pointer-events: none;\n}\n.Click {\n pointer-events: all;\n}\n// .DragArea\n\n// *{\n// font-family: Verdana, Geneva, sans-serif;\n// font-size: 11px;\n// font-style: normal;\n// font-weight:initial;\n// }\n\n*::-webkit-scrollbar { /* WebKit */\n width: 0;\n height: 0;\n}\n\nbody{\n &:extend(.views-font);\n // zoom: var(--zoom);\n position: absolute;\n width: 100%;\n height: 100%;\n margin: 0px;\n\n font-size: 11px;\n\n // font-family: \"Geneva\";\n src:url(\"./fonts/Geneva.woff2\");\n\n /* font: normal 14px Summer Pixel 22, \"res/SummerPixel22Regular.ttf\"; */\n -webkit-touch-callout: none; /* iOS Safari */\n -webkit-user-select: none; /* Safari */\n -khtml-user-select: none; /* Konqueror HTML */\n -moz-user-select: none; /* Old versions of Firefox */\n -ms-user-select: none; /* Internet Explorer/Edge */\n user-select: none; /* Non-prefixed version, currently\n supported by Chrome, Edge, Opera and Firefox */\n touch-action: manipulation;\n}\n\n#applications{\n position: static;\n width: 0px;\n height: 0px;\n visibility: hidden;\n}\n\n#windows-layer {\n width: 0px;\n height: 0px;\n /* position: fixed; */\n position: static;\n}\n\n#desktop-layer{\n position: fixed;\n /* margin: 0px; */\n width: 100%;\n height: 100%;\n background-color: @col-ceil;\n}",null,null,null,null,null,null,null,null,null],"names":[],"version":3,"file":"desktop.css.map","sourceRoot":"/__parcel_source_root/"} \ No newline at end of file diff --git a/front/dist/mobile.css b/front/dist/mobile.css index 1117fbe..b50753f 100644 --- a/front/dist/mobile.css +++ b/front/dist/mobile.css @@ -1,7 +1,11 @@ -.WdePrimitives.AdjectiveElement { +.WdePrimitives .adjective { border: 1px solid #555; } +.WdePrimitives .black-border { + border: 1px solid #000; +} + #mobile-sunboard { flex-direction: column; justify-content: flex-start; @@ -12,7 +16,6 @@ } #icons { - background-color: #99c; width: 100%; height: 100%; } @@ -23,8 +26,8 @@ align-content: flex-start; align-self: stretch; align-items: flex-start; - gap: 103px 18px; - padding: 64px 32px; + gap: 64px 0; + padding: 64px 16px; display: flex; } @@ -33,40 +36,106 @@ align-items: center; gap: 10px; width: 100px; - height: 100px; - padding: 4px 8px; display: flex; } .app-icon .icon { - background-color: beige; - width: 64px; - height: 64px; + width: 32px; + height: 32px; +} + +@font-face { + font-family: Geneva; + src: url("Geneva.41461b69.woff2"); +} + +@font-face { + font-family: Charcoal; + src: url("Charcoal.cb9045e5.woff2"); +} + +.large-system-font { + letter-spacing: .35px; + font-family: Charcoal; + font-size: 12px; +} + +.small-system-font, .views-font, body { + font-family: Geneva; +} + +.adjective { + border: 1px solid #555; +} + +.convex { + box-shadow: 1px 1px #00000040, inset -1px -1px #00000045, inset 1px 1px #fff; +} + +.border .grey { + border: 1px solid #555; +} + +.border .black { + border: 1px solid #000; +} + +.shadow .grey { + box-shadow: 1px 1px #555; +} + +.shadow .black { + box-shadow: 1px 1px #000; +} + +.rows-fill-shadowed { + filter: drop-shadow(1px 1px #777); + background: linear-gradient(#0000 0%, #fff 0% 50%, #0000 50%) 0 0 / 2px 2px; +} + +.wde-button, .wde-mobile-button { + background-color: #ddd; + border: 1px solid #000; + border-radius: 3px; + width: auto; + height: 20px; + box-shadow: inset -1px -1px #00000045, inset 1px 1px #fff; +} + +.wde-button:active, .wde-mobile-button:active { + background-color: #666; + box-shadow: inset 1px 1px #00000045, inset -1px -1px gray; +} + +@font-face { + font-family: Geneva; + src: url("Geneva.41461b69.woff2"); } body { - zoom: 2; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -khtml-user-select: none; touch-action: manipulation; - background-image: linear-gradient(45deg, silver 25%, #0000 25%), linear-gradient(45deg, #0000 75%, silver 75%), linear-gradient(45deg, #0000 75%, silver 75%), linear-gradient(45deg, silver 25%, #777 25%); + background-color: silver; background-position: 0 0, 0 0, -5px -5px, 5px 5px; background-size: 10px 10px; width: 100%; height: 100%; margin: 0; + font-size: 12px; position: absolute; } #mobile-app-views { - background: #99c; + background: #ddd; border: 1px solid #000; - border-radius: 15px; + border-radius: 5px; position: absolute; - inset: 16px 16px 128px; + inset: 16px 16px 100px; overflow: hidden; + box-shadow: 1px 1px #000; } #controls-bar { @@ -86,4 +155,14 @@ body { height: 100%; } +.wde-mobile-button { + flex-direction: row; + justify-content: center; + align-items: center; + width: 95px; + height: 35px; + padding-right: 5px; + display: flex; +} + /*# sourceMappingURL=mobile.css.map */ diff --git a/front/dist/mobile.css.map b/front/dist/mobile.css.map index c9d389f..d428aad 100644 --- a/front/dist/mobile.css.map +++ b/front/dist/mobile.css.map @@ -1 +1 @@ -{"mappings":"ACAA;;;;ACGA;;;;;;;;;AAWA;;;;;;AAaA;;;;;;;;;;;AAYA;;;;;;;;;;AAYA;;;;;;AFjDA;;;;;;;;;;;;;;;;AAmCA;;;;;;;;;AAYA;;;;;;;;;;;;AAiBA","sources":["src/mobile.less","src/wde/primitives.less","src/wde/sunboard/sunboard-mobile.less"],"sourcesContent":["@import \"./wde/sunboard/sunboard-mobile.less\";\n\nbody{\n zoom: 2;\n position: absolute;\n width: 100%;\n height: 100%;\n margin: 0px;\n\n /* font: normal 14px Summer Pixel 22, \"res/SummerPixel22Regular.ttf\"; */\n -webkit-touch-callout: none; /* iOS Safari */\n -webkit-user-select: none; /* Safari */\n -khtml-user-select: none; /* Konqueror HTML */\n -moz-user-select: none; /* Old versions of Firefox */\n -ms-user-select: none; /* Internet Explorer/Edge */\n user-select: none; /* Non-prefixed version, currently\n supported by Chrome, Edge, Opera and Firefox */\n touch-action: manipulation;\n\n // /* Auto layout */\n // display: flex;\n // flex-direction: column;\n // align-items: flex-start;\n // justify-content: flex-start;\n // margin: 32px;\n\n background-image:\n linear-gradient(45deg, @col-argent 25%, transparent 25%),\n linear-gradient(45deg, transparent 75%, @col-argent 75%),\n linear-gradient(45deg, transparent 75%, @col-argent 75%),\n linear-gradient(45deg, @col-argent 25%, #777777 25%); \n\n background-size:10px 10px; \n\n background-position:0 0, 0 0, -5px -5px, 5px 5px;\n}\n\n#mobile-app-views{\n position: absolute;\n // background-color: aqua;\n inset: 16px;\n bottom: 128px;\n \n border-radius: 15px;\n border: 1px solid #000;\n background: #99C;\n overflow: hidden;\n}\n\n#controls-bar{\n position: absolute;\n\n width: 100%;\n height: 100px;\n // background-color: @col-argent;\n bottom: 0px;\n\n /* Auto layout */\n display: flex;\n // padding: 10px;\n justify-content: center;\n align-items: center;\n gap: 53px;\n align-self: stretch;\n}\n\n.mobile-app-view{\n // background-color: burlywood;\n width: 100%;\n height: 100%;\n // position: absolute;\n}",null,null],"names":[],"version":3,"file":"mobile.css.map","sourceRoot":"/__parcel_source_root/"} \ No newline at end of file +{"mappings":"ACAA;;;;AAAA;;;;ACGA;;;;;;;;;AAWA;;;;;AAaA;;;;;;;;;;;AAYA;;;;;;;;AAaA;;;;;ACnCA;;;;;AAKA;;;;;AAKA;;;;;;AAMA;;;;ACjCA;;;;AAIA;;;;AAMA;;;;AAAA;;;;AAUA;;;;AAAA;;;;AAWA;;;;;AC5BA;;;;;;;;;AACI;;;;;ALCJ;;;;;AAKA;;;;;;;;;;;;;;;;AAwCA;;;;;;;;;;AAaA;;;;;;;;;;;;AAiBA;;;;;AAOA","sources":["src/mobile.less","src/wde/primitives.less","src/wde/sunboard/sunboard-mobile.less","src/theme.less","src/wde/effects.less","src/wde/widgets/button/button.less"],"sourcesContent":["@import \"./wde/sunboard/sunboard-mobile.less\";\n@import \"./theme.less\";\n@import \"./wde/effects.less\";\n@import \"./wde/widgets/button/button.less\";\n\n@font-face{\n font-family: \"Geneva\";\n src:url(\"./fonts/Geneva.woff2\");\n} \n\nbody{\n &:extend(.views-font);\n // zoom: 2;\n position: absolute;\n width: 100%;\n height: 100%;\n margin: 0px;\n\n\n font-size: 12px;\n\n /* font: normal 14px Summer Pixel 22, \"res/SummerPixel22Regular.ttf\"; */\n -webkit-touch-callout: none; /* iOS Safari */\n -webkit-user-select: none; /* Safari */\n -khtml-user-select: none; /* Konqueror HTML */\n -moz-user-select: none; /* Old versions of Firefox */\n -ms-user-select: none; /* Internet Explorer/Edge */\n user-select: none; /* Non-prefixed version, currently\n supported by Chrome, Edge, Opera and Firefox */\n touch-action: manipulation;\n\n background-color: @col-argent;\n // /* Auto layout */\n // display: flex;\n // flex-direction: column;\n // align-items: flex-start;\n // justify-content: flex-start;\n // margin: 32px;\n\n // background-image:\n // linear-gradient(45deg, @col-argent 25%, transparent 25%),\n // linear-gradient(45deg, transparent 75%, @col-argent 75%),\n // linear-gradient(45deg, transparent 75%, @col-argent 75%),\n // linear-gradient(45deg, @col-argent 25%, #777777 25%); \n\n background-size:10px 10px; \n\n background-position:0 0, 0 0, -5px -5px, 5px 5px;\n}\n\n#mobile-app-views{\n position: absolute;\n // background-color: aqua;\n inset: 16px;\n bottom: 100px;\n \n border-radius: 5px;\n border: @eff-border-black;\n box-shadow: @eff-box-shadow-black;\n background: @col-gainsboro;\n overflow: hidden;\n}\n\n#controls-bar{\n position: absolute;\n\n width: 100%;\n height: 100px;\n // background-color: @col-argent;\n bottom: 0px;\n\n /* Auto layout */\n display: flex;\n // padding: 10px;\n justify-content: center;\n align-items: center;\n gap: 53px;\n align-self: stretch;\n}\n\n.mobile-app-view{\n // background-color: burlywood;\n width: 100%;\n height: 100%;\n // position: absolute;\n}\n\n.wde-mobile-button{\n &:extend(.wde-button);\n &:active{\n &:extend(.wde-button:active);\n }\n height: 35px;\n width: 95px;\n /* Auto layout */\n display: flex;\n // padding: 10px;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding-right: 5px;\n // gap: 53px;\n // align-self: stretch;\n}\n\n.wde-mobile-button > .icon{\n \n // width: 8rem;\n // height: 8rem;\n}",null,null,null,null,null],"names":[],"version":3,"file":"mobile.css.map","sourceRoot":"/__parcel_source_root/"} \ No newline at end of file