manuel.sowada/radixOS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style engine updated

Browse Source
This commit is contained in:
Manuel Sowada
2026-04-23 09:07:52 +02:00
parent 573cc5dc74
commit cba94f6e75
5 changed files with 208 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
public/styles/os.css
View File

@@ -10,7 +10,7 @@ body, html { margin:0; padding:0; height:100%; overflow: hidden; font-family: va
.window-icon { height: 12px; background-size:contain; transform: translate(1px, -1px); background-repeat: no-repeat; background-position: left; background-color: rgb(144, 179, 144); padding:4px;border-radius: 6px;}
.window .controls { display: flex; flex-shrink: 0;}
.window .controls button { transition: background-color .3s, color .3s; padding: 2px 10px; border:none;}
.window .controls button { transition: background-color var(--times-transition-colors), color var(--times-transition-colors); padding: 2px 10px; border:none;}
.window-content { display: flex; flex-direction: column; flex:1; padding:8px; overflow: auto; }
.window[class="max"] .window-resize-handle { display: none; }
.window-resize-handle { position:absolute; right:0; bottom:0; width:12px; height:12px; cursor:se-resize; z-index: 10; }
@@ -25,10 +25,10 @@ body, html { margin:0; padding:0; height:100%; overflow: hidden; font-family: va
#taskbar { z-index: 2; position: absolute; width:100%; bottom:0; left:0; height:auto; overflow:visible; display:flex; flex: 0 0 auto; min-width:0; align-items:center; padding:0 8px; box-sizing:border-box; }
#start-btn { transition: background-color 0.3s ease; padding: 8px 12px; border-radius: 5px; border: none; margin-right:8px; }
#start-btn { transition: background-color var(--times-transition-colors) ease; padding: 8px 12px; border-radius: 5px; border: none; margin-right:8px; }
#taskbar-windows { display:flex; gap:6px; align-items:center; flex:1; overflow-y:hidden;overflow-x: auto; min-width: 0;scrollbar-width: thin; }
.taskbar-item { display: flex; position: relative; padding:4px 10px; border-radius:4px; }
.taskbar-item::before { content: ''; position: absolute; bottom:1px; left:50%; width:40%; height: 4px; border-radius:4px; transform:translateX(-50%) scaleX(0); transform-origin:center; transition:transform 0.3s ease; }
.taskbar-item::before { content: ''; position: absolute; bottom:1px; left:50%; width:40%; height: 4px; border-radius:4px; transform:translateX(-50%) scaleX(0); transform-origin:center; transition:transform var(--times-transition-colors) ease; }
.taskbar-item.focus::before { transform: translateX(-50%) scaleX(1); }
.notify-button { margin-left:auto; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
@@ -52,25 +52,25 @@ body, html { margin:0; padding:0; height:100%; overflow: hidden; font-family: va
.hidden { opacity: 0; pointer-events: none; }
/* Open submenu vertical */
#start-menu { z-index: 2; transition: opacity 0.3s; display:flex; flex-direction:column; position: absolute; bottom: 50px; left: 8px; width: auto; min-width: 300px; border-radius: 8px; overflow: hidden; }
#start-menu { z-index: 2; transition: opacity var(--times-transition-opacity); display:flex; flex-direction:column; position: absolute; bottom: 50px; left: 8px; width: auto; min-width: 300px; border-radius: 8px; overflow: hidden; }
.start-header { display: flex; align-items: center; padding: 8px; font-weight: 600; }
.start-header > img { height: 24px; width: 24px; margin-right: 5px; }
.start-list { list-style: none; margin: 0; padding: 8px 0; height: 60vh; overflow-y: auto; }
.start-item { padding: 8px 12px 16px 20px; display: flex; gap: 8px; transition: background 0.2s; border-radius: 4px; }
.start-item { padding: 8px 12px 16px 20px; display: flex; gap: 8px; transition: background var(--times-transition-colors); border-radius: 4px; }
.start-item:not(:has(.submenu)) { padding: 12px;align-items:center; }
.start-icon, #start-menu-icon { height: 20px; width: 20px; border-radius: 8px; padding:4px; }
.menu-label { display: block; margin-top: 4px; padding-bottom: 0; margin-left: 26px }
.start-item.has-submenu { position: relative; display: flex; flex-direction: column; padding-bottom: 8px; }
.start-item.has-submenu > .submenu { width: 100%; list-style: none; padding-left: 2px; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; margin: 2px 0 0 8px; }
.start-item.has-submenu > .submenu { width: 100%; list-style: none; padding-left: 2px; max-height: 0; overflow: hidden; transition: max-height var(--times-transition-transform) ease; margin: 2px 0 0 8px; }
.start-item-sys-container { position: relative; left:0; bottom: -8px; padding: 5px 0px; width:100%; display:flex; height:30px; flex-direction:row; justify-content:flex-end; }
.start-sys-item { margin: 0 10px 0 8px !important; }
.start-submenu-head { position: relative; margin-left: 16px; height:32px; display:flex; flex-direction: row; align-items: center; gap:8px; }
.start-item.has-submenu > .menu-label::after { content: ""; position: absolute; right: 14px; transform: translateY(50%) rotate(0deg); border: 5px solid transparent; border-top-color: #aaa; transition: transform 0.3s; }
.start-item.has-submenu.open > .menu-label::after { content: ""; position: absolute; right: 14px; transform: translateY(50%) rotate(180deg); border: 5px solid transparent; border-top-color: #aaa; transition: transform 0.3s; }
.start-item.has-submenu > .menu-label::after { content: ""; position: absolute; right: 14px; transform: translateY(50%) rotate(0deg); border: 5px solid transparent; border-top-color: #aaa; transition: transform var(--times-transition-transform); }
.start-item.has-submenu.open > .menu-label::after { content: ""; position: absolute; right: 14px; transform: translateY(50%) rotate(180deg); border: 5px solid transparent; border-top-color: #aaa; transition: var(--times-transition-transform); }
.start-item.has-submenu.open > .submenu { max-height: 500px; }
.start-item.has-submenu > .submenu li { opacity: 0; transform: translateY(-5px); transition: opacity 0.2s, transform 0.2s; }
.start-item.has-submenu > .submenu li { opacity: 0; transform: translateY(-5px); transition: opacity var(--times-transition-opacity), transform 0.2s; }
.start-item.has-submenu.open > .submenu li { opacity: 1; transform: translateY(0); }
@@ -109,7 +109,7 @@ img.icon { width: auto; height:20px; object-fit: contain; filter: var(--theme-no
}
.window-content {
padding: 12px;
padding: 0px;
}
/* Taskbar größer für Touch */
@@ -119,13 +119,15 @@ img.icon { width: auto; height:20px; object-fit: contain; filter: var(--theme-no
}
#start-btn {
padding: 5px 14px;
padding: 4px 8px;
font-size: 16px;
}
.taskbar-item {
padding: 5px 5px 0 0;
white-space:nowrap; text-overflow:ellipsis;
padding: 0 5px 4px 0;
top: 0px;
white-space:nowrap;
text-overflow:ellipsis;
}
.start-list { list-style: none; margin: 0; padding: 8px 0; height: 100%; overflow-y: auto; }