forked from mbk-lab/rui_orig
2
0
Fork 0
rui/app_styles.css

201 lines
3.0 KiB
CSS

* {
box-sizing: border-box;
padding: 0;
margin: 0;
overflow: hidden;
min-width: 1px;
min-height: 1px;
text-overflow: ellipsis;
}
:root {
--tooltip-arrow-size: 6px;
--tooltip-background: white;
--tooltip-text-color: black;
--tooltip-shadow-color: gray;
}
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
margin: 0 auto;
width: 100%;
height: 100vh;
}
div {
cursor: default;
}
p, h1, h2, h3, h4, h5, h6, blockquote, code, table {
cursor: text;
-webkit-user-select: auto;
user-select: auto;
}
/*
div:focus {
outline: none;
}
*/
input {
margin: 2px;
padding: 1px;
font-size: inherit;
}
select {
margin: 2px;
font-size: inherit;
}
button {
font-size: inherit;
}
textarea {
margin: 2px;
padding: 1px;
overflow: auto;
font-size: inherit;
}
ul:focus {
outline: none;
}
.ruiRoot {
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
}
.ruiPopupLayer {
background-color: rgba(128,128,128,0.1);
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
}
.ruiTooltipLayer {
display: grid;
grid-template-rows: 1fr auto 1fr;
justify-items: center;
align-items: center;
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
transition: opacity 0.5s ease-out;
filter: drop-shadow(0px 0px 2px var(--tooltip-shadow-color));
}
.ruiTooltipTopArrow {
grid-row-start: 1;
grid-row-end: 2;
border-width: var(--tooltip-arrow-size);
border-style: solid;
border-color: transparent transparent var(--tooltip-background) transparent;
margin-left: 12px;
margin-right: 12px;
}
.ruiTooltipBottomArrow {
grid-row-start: 3;
grid-row-end: 4;
border-width: var(--tooltip-arrow-size);
border-style: solid;
border-color: var(--tooltip-background) transparent transparent transparent;
margin-left: 12px;
margin-right: 12px;
}
.ruiTooltipText {
grid-row-start: 2;
grid-row-end: 3;
padding: 4px 8px 4px 8px;
margin-left: 8px;
margin-right: 8px;
background-color: var(--tooltip-background);
color: var(--tooltip-text-color);
/*box-shadow: 0px 0px 4px 2px #8888;*/
border-radius: 4px;
}
.ruiView {
box-sizing: border-box;
}
.ruiAbsoluteLayout {
position: relative;
}
.ruiGridLayout {
display: grid;
}
.ruiListLayout {
display: flex;
}
.ruiStackLayout {
display: grid;
}
.ruiStackPageLayout {
display: grid;
width: 100%;
height: 100%;
align-items: stretch;
justify-items: stretch;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
.ruiTabsLayout {
display: grid;
}
.ruiImageView {
display: block;
}
.ruiSvgImageView {
display: grid;
}
.ruiListView {
overflow: auto;
}
/*
@media (prefers-color-scheme: light) {
body {
background: #FFF;
color: #000;
}
.ruiRoot {
background-color: #FFFFFF;
}
}
@media (prefers-color-scheme: dark) {
body {
background: #303030;
color: #F0F0F0;
}
.ruiRoot {
background-color: #303030;
}
}
*/