This commit is contained in:
uriele
2024-10-09 13:01:59 +02:00
parent 9d43543dec
commit ecd71bb968
11 changed files with 239 additions and 1 deletions
+3
View File
@@ -0,0 +1,3 @@
<input class="avatar_checker" type="hidden" name="attr_character_avatar"/>
<div class="dmi_avatar"><img name="attr_character_avatar"/></div>
+3
View File
@@ -0,0 +1,3 @@
input.avatar_checker(type="hidden" name="attr_character_avatar" value=null)
.dmi_avatar
img(name="attr_character_avatar")
+74
View File
@@ -318,6 +318,80 @@ input.ritual_complexity[value=eleborate] ~ .elaborate {
display: none;
}
.characterviewer > ul.nav-tabs a[data-tab=charsheet] {
background: url("https://www.delta-green.com/wp-content/uploads/2012/04/Delta-Green-title-logo-wide-468.jpg") center/contain no-repeat;
color: transparent;
text-decoration: none;
}
.characterviewer > ul.nav-tabs a[data-tab=charsheet]::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 128, 0, 0.5);
/* Green overlay with 50% opacity */
opacity: 0;
transition: opacity 0.3s ease;
/* Smooth transition */
}
.characterviewer > ul.nav-tabs a[data-tab=charsheet]:hover::before {
opacity: 1;
/* Show the overlay on hover and focus */
}
.avatar_checker {
position: fixed;
}
div.dmi_avatar {
display: flex;
position: absolute;
max-width: 80px;
max-height: 100px;
top: -50px;
border: solid white;
background: black;
border-width: 5px 5px 20px 5px;
flex-wrap: nowrap;
justify-content: center !important;
transform: rotate(6deg);
border-radius: 3px;
z-index: 1000;
overflow: hidden;
box-shadow: 1px 1px 20px -10px rgba(0, 0, 0, 0.75);
right: 50px;
}
div.dmi_avatar img {
max-height: 80px;
max-width: 80px;
}
input.avatar_checker {
display: none;
}
input.avatar_checker:not([value]) ~ div.dmi_avatar {
display: none;
}
input.avatar_checker:placeholder-shown ~ div.dmi_avatar {
display: none;
}
div.picture {
position: sticky;
top: 0;
padding-right: 0em;
height: 0rem;
overflow: visible;
z-index: 1000;
}
.repcontrol, .itemcontrol {
display: grid;
grid-template-columns: 1fr 1fr;
+5
View File
@@ -150,12 +150,17 @@ each (skill,_) in skills1
<!--datalist(id="defensive-qualities")
each val,key in defensiveQualities
+listskills(key)
-->
<div class="compendium-drop-target">
<input name="attr_drop_name" type="hidden" accept="Name"/>
<input name="attr_drop_data" type="hidden" accept="data"/>
<!-- TABS-->
<!-- =============================-->
<div class="picture">
<input class="avatar_checker" type="hidden" name="attr_character_avatar"/>
<div class="dmi_avatar"><img name="attr_character_avatar"/></div>
</div>
<input class="use_global_modifier" type="hidden" name="attr_use_global_modifier"/>
<div class="tabs grid">
<!-- Buttons to toggle on GM whisper-->
+4
View File
@@ -110,10 +110,14 @@ datalist(id="allskills")
//datalist(id="defensive-qualities")
each val,key in defensiveQualities
+listskills(key)
div.compendium-drop-target
include src/pug/compendium/_compendium.pug
// TABS
// =============================
.picture
include charimg.pug
include src/pug/_navigation.pug
// COMPENDIUM DATA
+2 -1
View File
@@ -16,7 +16,8 @@
@import 'src/scss/_ritual_activation';
// NAVIGATION TABS MOCK
@import 'navigation_tab.scss';
// REPEATING SECTIONS
//=============================
@import 'src/scss/toggles/_repcontrol';
File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 4.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 69 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 MiB

+73
View File
@@ -0,0 +1,73 @@
.characterviewer > ul.nav-tabs a[data-tab=charsheet] {
background: url("https://www.delta-green.com/wp-content/uploads/2012/04/Delta-Green-title-logo-wide-468.jpg") center/contain no-repeat;
color: transparent;
text-decoration: none;
}
.characterviewer > ul.nav-tabs a[data-tab=charsheet]::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 128, 0, 0.5);
/* Green overlay with 50% opacity */
opacity: 0;
transition: opacity 0.3s ease;
/* Smooth transition */
}
.characterviewer > ul.nav-tabs a[data-tab=charsheet]:hover::before {
opacity: 1;
/* Show the overlay on hover and focus */
}
.avatar_checker {
position: fixed;
}
div.dmi_avatar {
display: flex;
position: absolute;
max-width: 80px;
max-height: 100px;
top: -50px;
border: solid white;
background: black;
border-width: 5px 5px 20px 5px;
flex-wrap: nowrap;
justify-content: center !important;
transform: rotate(6deg);
border-radius: 3px;
z-index: 1000;
overflow: hidden;
box-shadow: 1px 1px 20px -10px rgba(0, 0, 0, 0.75);
right: 50px;
}
div.dmi_avatar img {
max-height: 80px;
max-width: 80px;
}
input.avatar_checker {
display: none;
}
input.avatar_checker:not([value]) ~ div.dmi_avatar {
display: none;
}
input.avatar_checker:placeholder-shown ~ div.dmi_avatar {
display: none;
}
div.picture {
position: sticky;
top: 0;
padding-right: 0em;
height: 0rem;
overflow: visible;
z-index: 1000;
}
+68
View File
@@ -0,0 +1,68 @@
.characterviewer > ul.nav-tabs a[data-tab="charsheet"]{
background: url('https://www.delta-green.com/wp-content/uploads/2012/04/Delta-Green-title-logo-wide-468.jpg') center/contain no-repeat;
color:transparent;
text-decoration: none;
}
.characterviewer > ul.nav-tabs a[data-tab="charsheet"]::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 128, 0, 0.5); /* Green overlay with 50% opacity */
opacity: 0;
transition: opacity 0.3s ease; /* Smooth transition */
}
.characterviewer > ul.nav-tabs a[data-tab="charsheet"]:hover::before {
opacity: 1; /* Show the overlay on hover and focus */
}
.avatar_checker{
position:fixed;
}
div.dmi_avatar{ display: flex;
position: absolute;
max-width: 80px;
max-height: 100px;
top: -50px;
border: solid white;
background: black;
border-width: 5px 5px 20px 5px;
flex-wrap: nowrap;
justify-content: center !important;
transform: rotate(6deg);
border-radius: 3px;
z-index: 1000;
overflow: hidden;
box-shadow: 1px 1px 20px -10px rgba(0, 0, 0, 0.75);
right: 50px;
}
div.dmi_avatar img{
max-height: 80px;
max-width: 80px;
}
input.avatar_checker{
display:none;
}
input.avatar_checker:not([value])~div.dmi_avatar{
display:none;
}
input.avatar_checker:placeholder-shown~div.dmi_avatar{
display:none;
}
div.picture{
position: sticky;
top: 0;
padding-right: 0em;
height: 0rem;
overflow: visible;
z-index: 1000;
}