P42/P42_UI
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
3912523b0a3c31c812ed2f27e8f1938ab2d0d7aa
P42_UI/app/assets/styles/app.css
T
STEINNI 3912523b0a ageent preview & select in KF editor
2025-10-16 20:39:09 +00:00

356 lines
10 KiB
CSS
Executable File
Raw Blame History

@import '/app/assets/styles/icons.css';
/* Default app color palette */
:root,:after,:before {
--app-color-primary: #473;
--app-color-secondary: var(--eicui-base-color-grey-100);
--app-color-success: var(--eicui-base-color-success-100);
--app-color-danger: var(--eicui-base-color-danger-100);
--app-color-warning: var(--eicui-base-color-warning-100);
--app-color-accent: var(--eicui-base-color-accent-100);
--app-color-info: var(--eicui-base-color-info-100);
--app-color-white: var(--eicui-base-color-white);
--app-color-black: var(--eicui-base-color-black);
--app-bg-color: var(--eicui-app-body-bg-color);
--app-font-size-2xs: var(--eicui-base-icon-size-2xs);
--app-font-size-xs: var(--eicui-base-icon-size-xs);
--app-font-size-s: var(--eicui-base-icon-size-s);
--app-font-size-m: var(--eicui-base-icon-size-m);
--app-font-size-l: var(--eicui-base-icon-size-l);
--app-font-size-xl: var(--eicui-base-icon-size-xl);
--app-font-size-2xl: var(--eicui-base-icon-size-2xl);
--app-font-size-3xl: var(--eicui-base-icon-size-3xl);
--app-font-size-4xl: var(--eicui-base-icon-size-4xl);
--app-header-height: var(--eicui-app-top-message-height);
--app-menu-collapsed-width: 50px;
--app-menu-expanded-width: 160px;
--app-menu-width: var(--app-menu-expanded-width);
}
body[eicapp] {
all: unset;
display: grid;
grid-template-rows: auto;
grid-template-columns: min-content auto;
min-height: 100vh;
box-sizing: border-box;
background: repeating-linear-gradient( -45deg, #000, #333 10px, #000 10px, #333 20px );
}
[eicapp] [eicapptoolbar] {
display: flex;
position: fixed;
right: 0;
left: 0;
top: calc(var(--eicui-app-header-height) + var(--eicui-app-top-message-height));
z-index: 10;
box-shadow: 0 0 13px rgba(147, 255, 255, 0.55);
}
[eicapp] footer {
position: fixed;
bottom: 0;
}
[eicapp] [eicmenu].app-menu {
height: calc(100vh - var(--eicui-app-toolbar-height-active));
position: fixed;
top: var(--eicui-app-toolbar-height-active);
z-index: 99;
box-shadow: 0 10px 13px rgba(147, 255, 255, 0.55);
}
menu[eicmenu] [menuitem] > a > i, menu[eicmenu] [menuitem] > .nolink > i{
font-size: var(--eicui-base-font-size-l) !important;
}
menu[eicmenu] [menuitem] > a > button, menu[eicmenu] [menuitem] > .nolink button {
background: var(--app-color-primary);
}
[eicapp] .app-workspace {
display: grid;
/*
flex-direction: column;
flex-grow: 1;
*/
min-height: 0;
padding: 0 0 0 0;
position: relative;
width: 100%;
margin-top: var(--eicui-app-toolbar-height-active);
box-sizing: border-box;
grid-column: 2;
grid-row: 1;
transition: all .2s;
}
[eicapp] > [eicmenu] + .app-workspace,
[eicapp] > [eicmenu][collapsed]:hover + .app-workspace {
padding-left: var(--app-menu-expanded-width);
}
[eicapp] > [eicmenu][collapsed]:not(:hover) + .app-workspace{
padding-left: var(--app-menu-collapsed-width);
}
[eicapp] .app-workspace .window {
position: fixed;
padding: 5px;
background: var(--app-color-secondary);
box-shadow: 0 0 13px rgba(147, 255, 255, 0.55);
right: auto;
bottom: auto;
overflow: hidden;
z-index: 2;
grid-template-rows: min-content 1fr;
max-height: 90vh;
max-width: 90vw;
display: flex;
flex-direction: column;
border-radius: .3rem;
}
[eicapp] .app-workspace .window.active {
z-index: 3;
background: var(--app-color-primary);
}
[eicapp] .app-workspace .window > header {
flex: 0 0 auto;
width: 100%;
}
[eicapp] .app-workspace .window > header h1 {
padding: var(--eicui-base-spacing-xs);
color: var(--app-color-white);
margin: 0;
font-size: large;
cursor: move;
}
[eicapp] .app-workspace .window > header .controls {
position: relative;
display: flex;
grid-auto-columns: auto;
white-space: nowrap;
align-items: center;
grid-gap: var(--eicui-base-spacing-xs);
margin-right: var(--eicui-base-spacing-s);
}
[eicapp] .app-workspace .window > header .controls button.expand { display: inline-flex; }
[eicapp] .app-workspace .window > header .controls button.shrink { display: none; }
[eicapp] .app-workspace .window > section {
cursor: default;
overflow: hidden;
transition: all 0.5s;
flex: 1 1 auto;
width: 100%;
}
[eicapp] .app-workspace .window[device="tablet"] > section {
padding: 0;
}
[eicapp] .app-workspace .window[device="mobile"] > section {
padding: 0;
}
[eicapp] .app-workspace .window[expanded] {
box-shadow: none;
width: 100%;
max-width:none;
padding: 0 var(--eicui-base-spacing-2xs) 0 var(--eicui-base-spacing-2xs);
background: repeating-linear-gradient( -45deg, #000, #333 10px, #000 10px, #333 20px );
cursor: default;
margin: 0;
overflow: visible;
position: relative;
height: auto;
box-sizing: border-box;
min-height: calc(100vh - var(--eicui-app-toolbar-height-active));
overflow-y: auto;
}
[eicapp] .app-workspace .window[expanded] > header h1 {
display:none;
}
[eicapp] .app-workspace .window[expanded] > header .controls {
position: absolute;
top: 0;
right: 0;
z-index: 2;
padding: var(--eicui-base-spacing-m) var(--eicui-base-spacing-xs) 0 0;
}
[eicapp] .app-workspace .window[expanded] > header .controls button {
background: var(--eicui-base-color-grey-20) !important;
padding: var(--eicui-base-spacing-m) var(--eicui-base-spacing-xs);
color: var(--app-color-secondary);
}
[eicapp] .app-workspace .window[expanded] > header .controls button.expand {
display: none;
}
[eicapp] .app-workspace .window[expanded] > header .controls button.shrink {
display: inline-flex;
}
[eicapp] .app-workspace .window[expanded] > section {
margin: 0;
padding: 0 0 var(--eicui-base-spacing-s) 0;
overflow: visible;
height: 100%;
}
[eicapp] .app-workspace .window .handle {
position: absolute;
z-index: 2;
}
[eicapp] .app-workspace .window .handle[data-side="n"] {
top: 0; left: 6px; right: 6px; height: 5px;
cursor: n-resize;
}
[eicapp] .app-workspace .window .handle[data-side="e"] {
top: 6px; right: 0; bottom: 6px; width: 5px;
cursor: e-resize;
}
[eicapp] .app-workspace .window .handle[data-side="w"] {
top: 6px; left: 0; bottom: 6px; width: 5px;
cursor: w-resize;
}
[eicapp] .app-workspace .window .handle[data-side="nw"] {
top: 0px; left: 0px; width: 6px; height: 6px;
cursor: nw-resize;
}
[eicapp] .app-workspace .window .handle[data-side="ne"] {
top: 0; right: 0; width: 6px; height: 6px;
cursor: ne-resize;
}
[eicapp] .app-workspace .window .handle[data-side="s"] {
bottom: 0; left: 6px; right: 6px; height: 5px;
cursor: s-resize;
}
[eicapp] .app-workspace .window .handle[data-side="sw"] {
bottom: -0; left: 0; width: 6px; height: 6px;
cursor: sw-resize;
}
[eicapp] .app-workspace .window .handle[data-side="se"] {
bottom: 0; right: 0; width: 6px; height: 6px;
cursor: se-resize;
}
[eicapp] .app-content-thesaurus {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 4;
overflow: hidden;
padding: var(--eicui-base-spacing-m) var(--eicui-base-spacing-m) var(--eicui-base-spacing-s) var(--eicui-base-spacing-m);
text-align: center;
pointer-events: none;
}
[eicapp] .app-content-thesaurus [eicchip] {
box-shadow: 0px 0px 13px 0px rgba(147, 255, 255, 0.55);
cursor: pointer;
background: var(--app-color-primary);
}
[eicapp] .app-content-thesaurus [eicchip] label { cursor: pointer; }
[eicapp] article[eiccard] {
background-color: #1d261d;
color:#EEE;
}
[eicapp] [eicdialog][device="tablet"] > [eiccard] {
max-height: 95vh;
max-width: 95vw;
}
[eicapp] [eicdialog][device="mobile"] > [eiccard] {
max-height: 100vh;
max-width: 100vw;
height: 100vh;
width: 100vw;
}
[eicapp] [device="tablet"] article[eiccard] {
margin: 0;
}
[eicapp] [device="mobile"] article[eiccard] {
margin: 0;
}
article[eiccard][media] > header {
padding: var(--eicui-base-spacing-l) var(--eicui-base-spacing-m) var(--eicui-base-spacing-s) var(--eicui-base-spacing-m);
}
[eicapp] select {
width: 100%;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
color: #DDD;
border: 1px solid #444;
border-radius: 2rem;
padding: .3rem 2rem .3rem 1rem;
font-size: 15px;
cursor: pointer;
margin: 0.5rem 0 0.5rem 0;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='4 8 12 16 20 8' stroke='green' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
no-repeat right 12px center / 12px 12px,
linear-gradient(0deg, #353, #222) no-repeat padding-box;
}
.eic-session {
padding: 0;
display: grid;
grid-template-columns: min-content;
grid-gap: 10px;
position: absolute;
right: 160px;
}
.eic-session button.status {
display: inline-grid;
justify-content: center;
align-content: center;
overflow: hidden;
font-size: 1.6rem;
}
[device="tablet"] section .cols-2:not(.noflex), [device="mobile"] section .cols-2:not(.noflex) {
display: flex;
flex-direction: column;
grid-template-columns: none;
align-items: initial;
}
[device="tablet"] .cols-3, [device="mobile"] .cols-3,
[device="tablet"] .cols-4, [device="mobile"] .cols-4,
[device="tablet"] .cols-5, [device="mobile"] .cols-5,
[device="mobile"] .cols-6 {
display: flex;
flex-direction: column;
grid-template-columns: none;
}
[device="tablet"] .cols-6 {
grid-template-columns: 1fr 1fr 1fr;
}
[device="tablet"] .cols-8 {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
[device="mobile"] .cols-8 {
grid-template-columns: 1fr 1fr;
}
div.window > section:first-of-type > article[eiccard]:first-of-type{
border: 2px solid var(--app-color-primary);
border-radius: .5rem;
}
div.window header .controls menu[data-output="settingsMenu"]{
background: var(--app-color-secondary)
}
menu[eicmenu] [menuitem] .nolink label {
color: #CFC;
}
menu[eicmenu] [menuitem] a label {
color: #4E4;
}
menu[eicmenu] [menuitem] i[class^="icon-"] {
color:#fdfb93;;
}
/*
[eicdropdown] > menu{
}*/
Reference in New Issue View Git Blame Copy Permalink