Lurkars/rpg-dices
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve styling, sort dices

Browse Source
This commit is contained in:
Lurkars
2025-11-07 22:14:42 +01:00
parent 1919dad1bf
commit 25254b04dd
2 changed files with 299 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+163 -14
View File
@@ -210,6 +210,9 @@ body {
align-items: center;
row-gap: 1em;
grid-template-columns: auto;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.form-container .actions {
@@ -261,45 +264,114 @@ body {
}
.history {
display: grid;
grid-template-columns: repeat(4, auto);
width: 100%;
margin-top: 1.5em;
margin-bottom: 0.5em;
row-gap: 0.3em;
column-gap: 0.3em;
display: flex;
flex-direction: column;
gap: 0.8em;
}
.history hr {
width: 100%;
grid-column: span 4;
margin: 0.5em 0;
border: none;
border-top: 1px solid #ccc;
}
.history-entry {
background: #fff;
border: 0.15em solid #000;
padding: 1em;
transition: all 0.2s ease;
position: relative;
overflow: hidden;
}
.history-entry:hover {
background: #f1f3f4;
}
.history-entry-header {
display: flex;
align-items: flex-start;
margin-bottom: 0.5em;
flex-wrap: wrap;
gap: 0.5em;
}
.history-entry-header .label {
flex: 1;
min-width: 0;
}
.history-entry-header .result {
flex: 0 0 auto;
margin: 0 1em;
}
.history-entry-header .time {
flex: 0 0 auto;
margin-left: auto;
min-width: 8em;
text-align: right;
}
.history .label {
font-size: 1.2em;
font-size: 1.1em;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.3em;
}
.history .result {
text-align: center;
font-size: 1.2em;
font-size: 1.8em;
font-weight: bold;
color: #2c3e50;
text-align: center;
min-width: 3em;
}
.history .time {
font-size: 0.9em;
color: #6c757d;
text-align: right;
opacity: 0.8;
}
.history-entry-details {
margin-top: 0.5em;
padding-top: 0.5em;
border-top: 0.1em solid #000;
}
.history .formula-container {
display: flex;
margin: 0 0.5em;
align-items: center;
font-size: 0.95em;
color: #495057;
}
.history .formula-container .formula {
display: flex;
margin: 0 0.5em;
margin-left: 0.5em;
font-family: 'Courier New', Courier, monospace;
font-size: 1.3em;
background: #f1f3f4;
padding: 0.2em 0.5em;
border: 0.1em solid #000;
}
.history .time {
text-align: right;
.dice-icon {
display: inline-block;
width: 1.2em;
height: 1.2em;
background-color: currentColor;
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
margin-right: 0.2em;
vertical-align: middle;
}
button {
@@ -366,6 +438,37 @@ body.dark .form select {
border-color: #fff;
}
body.dark .history-entry {
background: #000;
border-color: #fff;
}
body.dark .history .result {
color: #e9ecef;
}
body.dark .history .time {
color: #adb5bd;
}
body.dark .history .formula-container {
color: #adb5bd;
}
body.dark .history .formula-container .formula {
background: #2d3436;
color: #ddd;
border-color: #fff;
}
body.dark .history hr {
border-top-color: #fff;
}
body.dark .history-entry-details {
border-top-color: #fff;
}
@media screen and (max-width: 767px) {
.dices {
font-size: 0.65em;
@@ -381,4 +484,50 @@ body.dark .form select {
min-width: auto;
width: 100%;
}
.history-entry {
padding: 0.8em;
}
.history-entry-header {
flex-wrap: wrap;
align-items: flex-start;
gap: 0.5em;
}
.history-entry-header .label {
flex: 0 1 auto;
min-width: 0;
}
.history-entry-header .result {
flex: 0 0 auto;
margin: 0;
}
.history-entry-header .time {
flex: 0 0 auto;
min-width: 6em;
margin-left: auto;
text-align: right;
}
.history .result {
font-size: 1.5em;
align-self: center;
}
.history .time {
align-self: center;
font-size: 0.8em;
}
.history .label {
font-size: 1em;
}
.dice-icon {
width: 1em;
height: 1em;
}
}