STEINNI
270 lines
7.7 KiB
CSS
Executable File
270 lines
7.7 KiB
CSS
Executable File
/* 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, #555 10px, #000 10px, #555 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 20px #0000004d;
|
|
}
|
|
|
|
[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: 2;
|
|
}
|
|
[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: 3px;
|
|
background: var(--app-color-secondary);
|
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.35);
|
|
cursor: nwse-resize;
|
|
right: auto;
|
|
bottom: auto;
|
|
overflow: hidden;
|
|
z-index: 2;
|
|
display: grid;
|
|
grid-template-rows: min-content 1fr;
|
|
max-height: 90vh;
|
|
max-width: 90vw;
|
|
}
|
|
[eicapp] .app-workspace .window.active {
|
|
z-index: 3;
|
|
background: var(--app-color-primary);
|
|
border-radius: .3rem;
|
|
}
|
|
[eicapp] .app-workspace .window > header { display: grid; }
|
|
[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 {
|
|
padding: var(--eicui-base-spacing-xs) var(--eicui-base-spacing-s);
|
|
/*background: var(--app-bg-color);*/
|
|
cursor: default;
|
|
margin: 0;
|
|
overflow: auto;
|
|
transition: all 0.5s;
|
|
}
|
|
[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) var(--eicui-base-spacing-3xl) var(--eicui-base-spacing-2xs);
|
|
background: repeating-linear-gradient( -45deg, #000, #555 10px, #000 10px, #555 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-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 14px 0px #00000066;
|
|
cursor: pointer;
|
|
background: var(--app-color-primary);
|
|
}
|
|
[eicapp] .app-content-thesaurus [eicchip] label { cursor: pointer; }
|
|
|
|
|
|
[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);
|
|
}
|
|
|
|
.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;
|
|
} |