mirror of
https://github.com/SpartanJ/eepp.git
synced 2026-05-29 09:36:29 +03:00
43a1dca16c
Default StyleSheetUnit is now Dp when it's not specified (this is not used very often but in HTML mode we need to respect the DPI). Fix MarkdownView fonts color when on Light theme.
522 lines
8.4 KiB
CSS
522 lines
8.4 KiB
CSS
@font-face {
|
|
font-family: "OpenSans Regular";
|
|
src: url("https://raw.githubusercontent.com/SpartanJ/eepp/develop/bin/assets/fonts/OpenSans-Regular.ttf");
|
|
/*src: url("file://assets/fonts/OpenSans-Regular.ttf");*/
|
|
}
|
|
|
|
@import url("assets/layouts/imported.css") screen and (min-width: 800px);
|
|
|
|
:root {
|
|
--font-color: #E6E6E6FF;
|
|
}
|
|
|
|
/* Global rules */
|
|
* {
|
|
color: #E6E6E6FF;
|
|
text-shadow-color: #32323296;
|
|
selection-color: #000;
|
|
selection-back-color: #969696FF;
|
|
}
|
|
|
|
TabWidget {
|
|
tab-separation: -1dp;
|
|
}
|
|
|
|
TabWidget::TabBar {
|
|
background-image: rectangle(solid, #2f3030);
|
|
background-size: 100% 1dp;
|
|
background-position-y: bottom;
|
|
}
|
|
|
|
ProgressBar {
|
|
display-percent: true;
|
|
vertical-expand: true;
|
|
movement-speed: 32dp 0dp;
|
|
padding: 2dp;
|
|
}
|
|
|
|
MenuBar {
|
|
padding-left: 1dp;
|
|
}
|
|
|
|
MenuBar::button {
|
|
padding-left: -3dp;
|
|
padding-right: -3dp;
|
|
}
|
|
|
|
Menu,
|
|
PopUpMenu {
|
|
color: #E6E6E6FF;
|
|
min-width: 100dp;
|
|
min-icon-size: 16dp 16dp;
|
|
}
|
|
|
|
Menu::Item,
|
|
Menu::CheckBox,
|
|
Menu::Separator,
|
|
Menu::SubMenu {
|
|
padding-left: 4dp;
|
|
}
|
|
|
|
Menu::Item::text,
|
|
Menu::CheckBox::text,
|
|
Menu::Separator::text,
|
|
Menu::SubMenu::text {
|
|
padding-right: 4dp;
|
|
}
|
|
|
|
Menu::SubMenu::arrow {
|
|
margin-right: 1dp;
|
|
}
|
|
|
|
Menu:hover,
|
|
PopUpMenu:hover,
|
|
Menu::Item:hover,
|
|
Menu::CheckBox:hover,
|
|
Menu::SubMenu:hover,
|
|
ListBox::item:hover,
|
|
Tab:selected,
|
|
Tab:hover,
|
|
Tab:pressed {
|
|
color: #FFF;
|
|
}
|
|
|
|
Slider {
|
|
half-slider: true;
|
|
}
|
|
|
|
ScrollBar {
|
|
background-expand: true;
|
|
}
|
|
|
|
Window {
|
|
window-flags: default|shadow;
|
|
window-buttons-offset: -2dp 0;
|
|
}
|
|
|
|
Window::title {
|
|
color: #E6E6E6FF;
|
|
font-style: shadow;
|
|
}
|
|
|
|
Tab::text {
|
|
padding-left: 4dp;
|
|
padding-right: 4dp;
|
|
}
|
|
|
|
Tooltip {
|
|
padding: 8dp;
|
|
color: #020203;
|
|
}
|
|
|
|
CheckBox {
|
|
foreground-color: transparent;
|
|
}
|
|
|
|
CheckBox:checked {
|
|
foreground-color: rgba(255,255,255,0.1);
|
|
}
|
|
|
|
#lvbox > * {
|
|
margin-top: 8dp;
|
|
}
|
|
|
|
#lvbox > #tpad {
|
|
margin-top: 0dp;
|
|
border-width: 2dp;
|
|
border-color: #66666666;
|
|
background-color: #33FF3310;
|
|
border-radius: 12;
|
|
font-size: 24dp;
|
|
padding: 12dp;
|
|
rotation-origin-point: 50% 50%;
|
|
transition: scale 0.25s, rotation 0.25s 0.25s, border-color 0.25s, background-color 0.25s, border-radius 0.25s;
|
|
}
|
|
|
|
#lvbox > #tpad:hover {
|
|
scale: 1.1;
|
|
rotation: -3;
|
|
background-color: #FF333310;
|
|
border-color: #99999999;
|
|
border-radius: 4;
|
|
}
|
|
|
|
#tpad2 {
|
|
margin-left: 0;
|
|
padding: 24dp;
|
|
opacity: 0.8;
|
|
font-size: 24dp;
|
|
background-color: #333;
|
|
transition: all 0.25s;
|
|
}
|
|
|
|
#tpad2:hover {
|
|
margin-left: 8dp;
|
|
padding: 28dp;
|
|
opacity: 1;
|
|
border-radius: 24;
|
|
background-color: #656;
|
|
}
|
|
|
|
#tpad3 {
|
|
border-width: 2dp;
|
|
border-color: #1e2021d7;
|
|
background-image: linear-gradient( #797a79, #585857 );
|
|
border-radius: 3;
|
|
padding: 12dp;
|
|
transition: all 0.25;
|
|
font-style: shadow;
|
|
color: white;
|
|
}
|
|
|
|
#tpad3:hover {
|
|
background-image: linear-gradient( #9c9d9b, #5b5b5a );
|
|
border-color: #1d1f1fd7;
|
|
border-radius: 3;
|
|
cursor: hand;
|
|
text-shadow-color: black;
|
|
padding: 12dp 100dp 12dp 18dp;
|
|
}
|
|
|
|
#tpad3:pressed {
|
|
background-image: linear-gradient( #4e4f4d, #414141 );
|
|
border-color: #222320d7;
|
|
padding: 12dp 120dp 12dp 22dp;
|
|
}
|
|
|
|
#chbox,
|
|
#rdbut {
|
|
font-size:24dp;
|
|
padding: 12dp;
|
|
background-color: #333;
|
|
}
|
|
|
|
#tres {
|
|
background-color: #444;
|
|
padding: 8dp;
|
|
transition: all 0.25s;
|
|
}
|
|
|
|
#tres:hover {
|
|
width: 128dp;
|
|
height: 48dp;
|
|
}
|
|
|
|
#pbut {
|
|
transition: all 0.25s;
|
|
}
|
|
|
|
#pbut:hover {
|
|
skin-color: #66ff44;
|
|
}
|
|
|
|
@keyframes rtest {
|
|
from {
|
|
background-color: #221122;
|
|
}
|
|
to {
|
|
background-color: #110011;
|
|
}
|
|
}
|
|
|
|
#test_2 > #rtest {
|
|
padding: 8dp;
|
|
background: #221122;
|
|
animation: 1s infinite alternate rtest;
|
|
}
|
|
|
|
#test_2 > #rtest #rttv {
|
|
background: #333;
|
|
font-size: 24dp;
|
|
border-radius: 8;
|
|
padding: 8dp;
|
|
transition: all 0.125s;
|
|
}
|
|
|
|
#test_2 > #rtest #rttv:hover {
|
|
background: #666;
|
|
}
|
|
|
|
#test_2 > #rtest:hover #rttv {
|
|
background: #005522;
|
|
}
|
|
|
|
#test_2 > #rtest:hover #rttv:hover {
|
|
background: #008822;
|
|
}
|
|
|
|
#test_2 > #rtest:hover #rttv:pressed {
|
|
background: lime;
|
|
color: #333;
|
|
}
|
|
|
|
#test_3 {
|
|
background: #221122;
|
|
}
|
|
|
|
#test_3 > .rooter {
|
|
background: red;
|
|
}
|
|
|
|
#test_3 > .rooter .outer {
|
|
background: blue;
|
|
transition: all 0.125s;
|
|
}
|
|
|
|
#test_3 > .rooter:hover .outer {
|
|
background: green;
|
|
}
|
|
|
|
#test_3 > .rooter:hover .outer:hover {
|
|
background: yellow;
|
|
}
|
|
|
|
#test_3 > .rooter .inner {
|
|
background: #123456;
|
|
transition: all 0.125s;
|
|
}
|
|
|
|
#test_3 > .rooter:hover .outer:hover .inner {
|
|
background: #DABA22;
|
|
margin-left: 16dp;
|
|
}
|
|
|
|
#test_3 > .rooter:hover .outer:hover .inner:hover {
|
|
background: #CCC;
|
|
}
|
|
|
|
#test_4 {
|
|
background-color: #221122;
|
|
}
|
|
|
|
#test_4 > RelativeLayout:nth-child(even) {
|
|
background-color: #220022;
|
|
}
|
|
|
|
#test_4 > RelativeLayout {
|
|
background-color: #331133;
|
|
padding: 8dp;
|
|
transition: all 0.125s;
|
|
}
|
|
|
|
#test_4 > RelativeLayout:hover {
|
|
background-color: #442244;
|
|
cursor: hand;
|
|
}
|
|
|
|
#test_4 > RelativeLayout:pressed {
|
|
background-color: #662266;
|
|
}
|
|
|
|
#test_4 > RelativeLayout > TextView {
|
|
margin-left: 0dp;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
#test_4 > RelativeLayout:hover > TextView {
|
|
margin-left: 24dp;
|
|
}
|
|
|
|
TabWidget {
|
|
padding-left: 8dp;
|
|
padding-right: 8dp;
|
|
padding-bottom: 8dp;
|
|
background-color: #656565;
|
|
}
|
|
|
|
#lvbox {
|
|
background-color: #222;
|
|
padding: 12dp;
|
|
}
|
|
|
|
.list {
|
|
font-size: 16dp;
|
|
padding: 8dp;
|
|
}
|
|
|
|
#tviewl {
|
|
font-size: 24dp;
|
|
background-color: #333;
|
|
}
|
|
|
|
#tinput {
|
|
font-size: 24dp;
|
|
padding: 24dp;
|
|
}
|
|
|
|
#rvbox {
|
|
background-color: #323232;
|
|
padding: 12dp;
|
|
}
|
|
|
|
#rrl {
|
|
background-color: #999;
|
|
background-image: url("file://assets/sprites/4.png");
|
|
background-size: auto;
|
|
background-position: bottom right;
|
|
background-repeat: repeat;
|
|
padding: 24dp;
|
|
transition: all 1s;
|
|
}
|
|
|
|
#rrl:hover {
|
|
background-size: 50% 50%;
|
|
background-position: top left;
|
|
}
|
|
|
|
#rrl > .real_back {
|
|
background-color: #333;
|
|
}
|
|
|
|
#rrl > .back {
|
|
width: 1dp;
|
|
height: 1dp;
|
|
background-image: url(file://assets/icon/ee.png);
|
|
background-repeat: repeat;
|
|
background-position: center;
|
|
layout-gravity: center;
|
|
background-color: #333;
|
|
transition: all 0.5s;
|
|
clip: true;
|
|
}
|
|
|
|
#rrl:hover > .back {
|
|
width: 300dp;
|
|
height: 300dp;
|
|
background-color: black;
|
|
background-position: bottom right;
|
|
}
|
|
|
|
#lvbox {
|
|
background-image: url(file://assets/icon/ee.png), url("file://assets/sprites/6.png");
|
|
background-position: bottom right, top left;
|
|
background-size: 128px 128px, auto;
|
|
background-repeat: no-repeat;
|
|
transition: all 1s;
|
|
clip: true;
|
|
}
|
|
|
|
#lvbox:hover {
|
|
background-position: top right, bottom left;
|
|
}
|
|
|
|
#rrl > #tmap {
|
|
font-size: 24dp;
|
|
padding: 12dp;
|
|
}
|
|
|
|
.eltv {
|
|
font-size: 24dp;
|
|
padding: 12dp;
|
|
background-color: #242424;
|
|
}
|
|
|
|
#rrl > #el2,
|
|
#rrl > #tm,
|
|
#rrl > #tmp {
|
|
margin: 12dp;
|
|
}
|
|
|
|
#rrl > #slider {
|
|
padding: 32dp;
|
|
background-color: #555;
|
|
}
|
|
|
|
#rrl > #scrollbar {
|
|
padding: 8dp;
|
|
background-color: #12345666;
|
|
}
|
|
|
|
#rrl > #spinbox {
|
|
padding: 8dp;
|
|
background-color: #54345666;
|
|
}
|
|
|
|
#rrl > TextEdit:not(.cool) {
|
|
padding: 16dp;
|
|
margin-bottom: 140dp;
|
|
}
|
|
|
|
#test_5 {
|
|
padding: 8dp;
|
|
background: #555;
|
|
}
|
|
|
|
#test_5 .ll {
|
|
background: #333;
|
|
}
|
|
|
|
#test_5 TextView {
|
|
margin: 4dp;
|
|
padding: 8dp;
|
|
layout_width: match_parent;
|
|
skin: button;
|
|
}
|
|
|
|
#test_6 {
|
|
margin: 8dp;
|
|
background: #323232;
|
|
}
|
|
|
|
#test_6 > * {
|
|
gravity: center;
|
|
background: #323232;
|
|
transition: all 0.2;
|
|
scale-type: expand;
|
|
padding: 4dp;
|
|
}
|
|
|
|
#test_6 > *:hover {
|
|
background: #444;
|
|
scale: 1.1;
|
|
cursor: hand;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
from {
|
|
scale: 1;
|
|
foreground-color: transparent;
|
|
}
|
|
to {
|
|
scale: 1.2;
|
|
foreground-color: rgba(255, 255, 255, 0.2);
|
|
}
|
|
}
|
|
|
|
#lvbox:hover .tres2 {
|
|
animation: 0.5s infinite alternate pulse;
|
|
}
|
|
|
|
#rttv {
|
|
animation: 0.5s infinite alternate paused ease-in pulse;
|
|
}
|
|
|
|
#rttv:hover {
|
|
/** This rule should be ignored. */
|
|
foreground-color: red;
|
|
animation-play-state: running;
|
|
}
|
|
|
|
#test_8 Widget {
|
|
max-width: 64dp;
|
|
background-color: #323232;
|
|
margin-right: 8dp;
|
|
}
|
|
|
|
#tm {
|
|
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAA/UlEQVR42u3ZsQkAMAhFwW/I/iubIQIp4l1vIw8srE46jLWsQAAIAAEgAASAABAAAkAACAABIAAEwKf21bRH8vAAkqRU4AQgAASAABAAAkAACAABIAAEgAAQAAJAAAgAASAABIAAEAACQAAIAAEgAASAABAAAkAACAABIAAEgAAQAAJAAAgAASAABIAAEAACQAAIAAEgAASAABAAAkAACAABIAAEgAAQAAJAAAKwAgEgAASAABAAAkAACAABIAAEgAAQAAJAAAgAASAABIAAEAACQAAIAAEgAASAABAAAkAACAABIAAEgAAQAAJAAAgAASAABIAAEAACQAA8dwB+IAUBZkHfLAAAAABJRU5ErkJggg=="),
|
|
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3E%3Cpath d='M10 10h60' stroke='%2300F' stroke-width='5'/%3E%3Cpath d='M10 20h60' stroke='%230F0' stroke-width='5'/%3E%3Cpath d='M10 30h60' stroke='red' stroke-width='5'/%3E%3C/svg%3E");
|
|
background-repeat: none;
|
|
background-position: 0 0, 64dp 0dp;
|
|
foreground-image: glyph("monospace", 24dp, "@"), icon("quit", 24dp);
|
|
foreground-position: right center, right top;
|
|
}
|
|
|
|
@media screen and (max-width: 1024px) {
|
|
|
|
#lvbox {
|
|
background-color: red;
|
|
}
|
|
|
|
}
|