archives/worldbuilding
2
0
Fork 0
mirror of https://github.com/RoY7x/worldbuilding.git synced 2025-08-25 23:17:23 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

10: Add attribute groups base implementation

Browse source 
- Added support for attribute groups
- Added rollable buttons to formula attributes
- Added additional i18n translation strings
This commit is contained in:
Matt Smith 2020-09-28 15:54:14 +00:00 • committed by Andrew
parent c515f8d5b7
commit f69e3841ff
13 changed files with 827 additions and 151 deletions
Download patch file Download diff file Expand all files Collapse all files

90
styles/simple.css
View file

@ -109,10 +109,51 @@
flex: none;
width: auto;
}
.worldbuilding .attributes {
position: relative;
}
.worldbuilding .attributes .attribute-control,
.worldbuilding .attributes .group-control {
flex: 0 0 20px;
text-align: center;
line-height: 28px;
border: none;
}
.worldbuilding .attributes .attribute-roll {
flex: 0 0 20px;
text-align: center;
border-bottom: none;
display: flex;
align-items: center;
justify-content: center;
}
.worldbuilding .attributes .group-prefix {
height: 31px;
margin-right: 10px;
}
.worldbuilding .attributes .button {
width: 100%;
flex: 1;
margin: 0;
background: rgba(0, 0, 0, 0.1);
border: 2px groove #f0f0e0;
border-radius: 3px;
font-size: 14px;
line-height: 28px;
display: block;
}
.worldbuilding .attributes .attribute-key {
background: transparent;
border: none;
}
.worldbuilding .attributes-header {
position: sticky;
top: 0;
left: 0;
right: 0;
padding: 5px;
margin: 5px 0;
background: rgba(0, 0, 0, 0.05);
background: #cfcdc2;
border: 1px solid #AAA;
border-radius: 2px;
text-align: center;
@ -138,12 +179,6 @@
border-radius: 0;
border-bottom: 1px solid #AAA;
}
.worldbuilding .attributes-list a.attribute-control {
flex: 0 0 20px;
text-align: center;
line-height: 28px;
border: none;
}
.worldbuilding .attributes-list .attribute-col label {
font-size: 10px;
text-align: center;
@ -155,6 +190,47 @@
line-height: 1;
height: 50%;
}
.worldbuilding .attribute input[type="text"]::placeholder,
.worldbuilding .group-header input[type="text"]::placeholder {
opacity: 0;
transition: opacity 0.25s ease-in-out;
}
.worldbuilding .attribute input[type="text"]:focus::placeholder,
.worldbuilding .group-header input[type="text"]:focus::placeholder {
opacity: 1;
}
.worldbuilding .groups-list {
list-style: none;
margin: 0;
padding: 0;
}
.worldbuilding .group {
margin: 20px 0;
padding: 0;
}
.worldbuilding .group-header {
background: rgba(0, 0, 0, 0.05);
border: 1px solid #AAA;
border-radius: 2px;
padding: 5px;
}
.worldbuilding .group-key,
.worldbuilding .group-label {
font-weight: bold;
border: none;
border-bottom: 1px solid #AAA;
background: transparent;
border-radius: 0;
margin-right: 6px;
}
.worldbuilding .group-key {
flex: 0 0 126px;
opacity: 0.75;
}
.worldbuilding .group-dtype {
margin: 0 5px;
flex: 0;
}
.worldbuilding.sheet.actor {
min-width: 560px;
min-height: 420px;

108
styles/simple.less
View file

@ -125,10 +125,57 @@
}
/* Attributes */
.attributes {
position: relative;
.attribute-control,
.group-control {
flex: 0 0 20px;
text-align: center;
line-height: 28px;
border: none;
}
.attribute-roll {
flex: 0 0 20px;
text-align: center;
border-bottom: none;
display: flex;
align-items: center;
justify-content: center;
}
.group-prefix {
height: 31px;
margin-right: 10px;
}
.button {
width: 100%;
flex: 1;
margin: 0;
background: rgba(0, 0, 0, 0.1);
border: 2px groove #f0f0e0;
border-radius: 3px;
font-size: 14px;
line-height: 28px;
display: block;
}
.attribute-key {
background: transparent;
border: none;
}
}
.attributes-header {
position: sticky;
top: 0;
left: 0;
right: 0;
padding: 5px;
margin: 5px 0;
background: rgba(0, 0, 0, 0.05);
background: #cfcdc2;
border: 1px solid #AAA;
border-radius: 2px;
text-align: center;
@ -158,13 +205,6 @@
border-bottom: 1px solid #AAA;
}
a.attribute-control {
flex: 0 0 20px;
text-align: center;
line-height: 28px;
border: none;
}
.attribute-col {
label {
font-size: 10px;
@ -180,6 +220,58 @@
}
}
}
.attribute,
.group-header {
input[type="text"] {
&::placeholder {
opacity: 0;
transition: opacity 0.25s ease-in-out;
}
&:focus::placeholder {
opacity: 1;
}
}
}
.groups-list {
list-style: none;
margin: 0;
padding: 0;
}
.group {
margin: 20px 0;
padding: 0;
}
.group-header {
background: rgba(0, 0, 0, 0.05);
border: 1px solid #AAA;
border-radius: 2px;
padding: 5px;
}
.group-key,
.group-label {
font-weight: bold;
border: none;
border-bottom: 1px solid #AAA;
background: transparent;
border-radius: 0;
margin-right: 6px;
}
.group-key {
flex: 0 0 126px;
opacity: 0.75;
}
.group-dtype {
margin: 0 5px;
flex: 0;
}
}
.worldbuilding.sheet.actor {