mirror of https://github.com/nkoehring/starsy.git
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
368 lines
8.3 KiB
CSS
368 lines
8.3 KiB
CSS
@font-face {
|
|
font-family: 'douar';
|
|
src: url('./assets/douaroutline-webfont.woff2') format('woff2');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'lack';
|
|
src: url('./assets/lack-webfont.woff2') format('woff2');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'xolonium';
|
|
src: url('./assets/xolonium-regular-webfont.woff2') format('woff2');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
:root {
|
|
--bg-graphic: #000;
|
|
--fg-graphic: #FFF;
|
|
--hl-graphic: #FFB;
|
|
--bg-app: #333;
|
|
--fg-app: #EEE;
|
|
--fill-star: #FFB;
|
|
--bg-settings: var(--bg-graphic);
|
|
--fg-settings: var(--fg-graphic);
|
|
--title-font: xolonium;
|
|
--fg-danger: #C00;
|
|
}
|
|
|
|
html,body {
|
|
display: block;
|
|
margin: 0;
|
|
padding: 0;
|
|
min-height: 100vh;
|
|
font-family: sans;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
background: var(--bg-app);
|
|
color: var(--fg-app);
|
|
}
|
|
|
|
input[type="text"], input[type="number"] {
|
|
background: transparent;
|
|
border: 1px solid var(--fg-app);
|
|
color: var(--fg-app);
|
|
}
|
|
input[type="text"]:focus {
|
|
outline: 2px solid var(--fg-app);
|
|
border: 1px solid #FFF5;
|
|
}
|
|
|
|
button {
|
|
cursor: pointer;
|
|
}
|
|
button.settings, button.delete, button.add, button.less, button.close, button.move, button.dice {
|
|
width: 48px;
|
|
height: 48px;
|
|
border: 4px solid var(--bg-app);
|
|
background-color: var(--bg-app);
|
|
background-size: 32px;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
vertical-align: middle;
|
|
}
|
|
button.settings { background-image: url(./assets/change.png); }
|
|
button.delete { background-image: url(./assets/delete.png); }
|
|
button.add { background-image: url(./assets/add.png); }
|
|
button.less { background-image: url(./assets/less.png); }
|
|
button.close { background-image: url(./assets/close.png); }
|
|
button.move { background-image: url(./assets/move.png); }
|
|
button.dice { background-image: url(./assets/dice.png); }
|
|
|
|
body.theme-paper button.settings { background-image: url(./assets/change_inverted.png); }
|
|
body.theme-paper button.add { background-image: url(./assets/add_inverted.png); }
|
|
body.theme-paper button.less { background-image: url(./assets/less_inverted.png); }
|
|
body.theme-paper button.close { background-image: url(./assets/close_inverted.png); }
|
|
body.theme-paper button.move { background-image: url(./assets/move_inverted.png); }
|
|
body.theme-paper button.dice { background-image: url(./assets/dice_inverted.png); }
|
|
|
|
button.small {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-size: 24px;
|
|
}
|
|
|
|
.info {
|
|
width: calc(100% - 4em);
|
|
margin-left: -1em;
|
|
padding: 1em 2em;
|
|
border: 2px solid #8888;
|
|
border-left-width: 1em;
|
|
}
|
|
.info > header { font-weight: bold; }
|
|
.info > li { margin-top: .75em; }
|
|
|
|
body.theme-retro {
|
|
--bg-app: #4B4839;
|
|
--fg-app: #E4DCB5;
|
|
--bg-graphic: #E4DCB5;
|
|
--fg-graphic: #4B4839;
|
|
--hl-graphic: #222;
|
|
--fill-star: var(--fg-graphic);
|
|
--bg-settings: var(--bg-graphic);
|
|
--fg-settings: var(--fg-graphic);
|
|
}
|
|
body.theme-inverse {
|
|
--bg-app: #333;
|
|
--fg-app: #E4DCB5;
|
|
--bg-graphic: #4B4839;
|
|
--fg-graphic: #E4DCB5;
|
|
--hl-graphic: #FF0;
|
|
--fill-star: var(--fg-graphic);
|
|
--bg-settings: var(--bg-graphic);
|
|
--fg-settings: var(--fg-graphic);
|
|
}
|
|
body.theme-paper {
|
|
--bg-app: #FFF;
|
|
--fg-app: #000;
|
|
--bg-graphic: #FFF;
|
|
--fg-graphic: #000;
|
|
--hl-graphic: #555;
|
|
--fill-star: var(--fg-graphic);
|
|
--bg-settings: #DDD;
|
|
--fg-settings: #000;
|
|
}
|
|
|
|
body.title-douar { --title-font: 'douar'; }
|
|
body.title-lack { --title-font: 'lack'; }
|
|
body.title-xolonium { --title-font: 'xolonium'; }
|
|
|
|
svg { background: var(--bg-graphic); }
|
|
line { stroke: var(--fg-graphic); }
|
|
text.tilted { transform: rotate(-45deg) translate(0, 100%); transform-origin: left top; transform-box: fill-box; }
|
|
#axis { stroke-width: 1; }
|
|
#designation { fill: var(--fg-graphic); text-anchor: end; font-family: var(--title-font); }
|
|
#star { fill: var(--fill-star); }
|
|
.object { fill: var(--fg-graphic); text-anchor: middle; font-size: .6em; cursor: pointer; transform-box: fill-box; }
|
|
.object > line { stroke-width: .5; }
|
|
.satellite { text-anchor: start; font-size: .7em; }
|
|
.rings { stroke: var(--fg-graphic); fill: none; transform: skew(-45deg); transform-origin: 50%; }
|
|
.object:hover, .object.selected { fill: var(--hl-graphic); }
|
|
.object:hover > line, .object:hover .rings,
|
|
.object.selected > line, .object.selected .rings { stroke: var(--hl-graphic); }
|
|
|
|
h1 {
|
|
font-family: xolonium;
|
|
}
|
|
|
|
a { color: #AAF; }
|
|
.theme-paper a { color: #33A; }
|
|
|
|
#app > header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 2em;
|
|
font-family: xolonium;
|
|
}
|
|
#app > header label {
|
|
margin: 0 0 0 1em;
|
|
}
|
|
.headline {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
#settings {
|
|
max-width: 700px;
|
|
margin: auto;
|
|
padding: 1em 2em;
|
|
}
|
|
#settings > header {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
align-items: center;
|
|
}
|
|
#settings > header > h1 {
|
|
min-width: 330px;
|
|
}
|
|
|
|
#system-settings {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
#system-settings > label {
|
|
display: flex;
|
|
align-items: center;
|
|
min-width: 300px;
|
|
margin: 0 1em;
|
|
}
|
|
#system-settings button { height: 2em; }
|
|
#system-settings input { width: 200px; }
|
|
#system-settings input[type="text"],
|
|
.satellite-name input[type="text"] {
|
|
margin-left: 1em;
|
|
padding: .5em 1em .4em;
|
|
}
|
|
|
|
#object-list {
|
|
position: relative;
|
|
display: block;
|
|
width: 100%;
|
|
margin: 3em auto;
|
|
}
|
|
#object-list th {
|
|
padding: .25em 1em;
|
|
border-bottom: 2px solid var(--fg-app);
|
|
}
|
|
#object-list tr.selected {
|
|
font-weight: bold;
|
|
}
|
|
#object-list .cell {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
padding: .25em 1em;
|
|
}
|
|
|
|
#object-settings {
|
|
margin-bottom: 5em;
|
|
}
|
|
#object-settings section.main {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
#object-settings input[type="text"].big {
|
|
width: 7em;
|
|
padding: .1em .5em;
|
|
font-size: 1.5em;
|
|
font-weight: bold;
|
|
}
|
|
#object-settings input[type="range"] { width: 100%; }
|
|
#object-settings input[type="number"] {
|
|
width: 4em;
|
|
padding: .2em 0;
|
|
text-align: center;
|
|
}
|
|
#object-settings section.satellite-list {
|
|
margin: 2em 0;
|
|
}
|
|
|
|
.satellite-list-entry {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
position: relative;
|
|
padding: .5em 1em 0;
|
|
transition: padding .2s ease-out;
|
|
}
|
|
|
|
.satellite-list-entry.dragging {
|
|
opacity: .5;
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
}
|
|
.satellite-list-entry.dragover {
|
|
padding-top: 3em;
|
|
}
|
|
.satellite-list-entry.dragunder {
|
|
padding-bottom: 3em;
|
|
}
|
|
.satellite-list-entry.dragover::before,
|
|
.satellite-list-entry.dragunder::after {
|
|
content: " — move here — ";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 2em;
|
|
border: 1px solid white;
|
|
text-align: center;
|
|
line-height: 2em;
|
|
}
|
|
.satellite-list-entry.dragover::before {
|
|
margin-top: -6em;
|
|
}
|
|
.satellite-list-entry.dragunder::after {
|
|
margin-top: 6em;
|
|
}
|
|
|
|
.satellite-list-entry > .options {
|
|
flex: 0 0 auto;
|
|
width: 75%;
|
|
text-align: right;
|
|
}
|
|
.satellite-list-entry > .options, .satellite-list-entry > .options > span {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
}
|
|
.satellite-list-entry .satellite-radius { opacity: .25; }
|
|
.satellite-list-entry .satellite-radius.moon { opacity: 1; }
|
|
|
|
.satellite-list-entry > .options > .actions {
|
|
margin-left: 2em;
|
|
}
|
|
|
|
.satellite-name > input[type="text"] {
|
|
width: 9em;
|
|
}
|
|
.satellite-radius > input[type="range"] {
|
|
width: 50% !important;
|
|
margin-left: .5em;
|
|
}
|
|
|
|
.drag-handle {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 1.6em;
|
|
height: 100%;
|
|
font-size: 1.5em;
|
|
line-height: 1.7em;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
background: var(--fg-app);
|
|
color: var(--bg-app);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.cta {
|
|
vertical-align: middle;
|
|
margin: .2em;
|
|
padding: 2px .5em;
|
|
font-size: 1.2em;
|
|
background: var(--bg-app);
|
|
color: var(--fg-app);
|
|
border: 3px solid var(--fg-app);
|
|
border-radius: 8px;
|
|
transition: border-color .2s ease-out;
|
|
}
|
|
.cta:hover {
|
|
outline: 1px solid var(--fg-app);
|
|
border-color: transparent;
|
|
}
|
|
.danger {
|
|
color: var(--fg-danger);
|
|
border-color: var(--fg-danger);
|
|
}
|
|
.deleted-overlay {
|
|
position: absolute;
|
|
left: 0;
|
|
display: block;
|
|
background: #0008;
|
|
border: none;
|
|
border-radius: 8px;
|
|
width: 100%;
|
|
height: 4.4em;
|
|
color: var(--fg-app);
|
|
font-weight: bold;
|
|
}
|
|
.app-menu-button {
|
|
margin: 0 1em 0 0;
|
|
padding: .2em 1em;
|
|
}
|
|
.highlighted {
|
|
font-weight: bold;
|
|
}
|