diff --git a/Delta Green 2/charimg.html b/Delta Green 2/charimg.html new file mode 100644 index 0000000000..4ce39eb3fa --- /dev/null +++ b/Delta Green 2/charimg.html @@ -0,0 +1,3 @@ + + +
\ No newline at end of file diff --git a/Delta Green 2/charimg.pug b/Delta Green 2/charimg.pug new file mode 100644 index 0000000000..44775fa679 --- /dev/null +++ b/Delta Green 2/charimg.pug @@ -0,0 +1,3 @@ +input.avatar_checker(type="hidden" name="attr_character_avatar" value=null) +.dmi_avatar + img(name="attr_character_avatar") \ No newline at end of file diff --git a/Delta Green 2/deltagreen.css b/Delta Green 2/deltagreen.css index 8a86c6e013..8f15e29f4e 100644 --- a/Delta Green 2/deltagreen.css +++ b/Delta Green 2/deltagreen.css @@ -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; diff --git a/Delta Green 2/deltagreen.html b/Delta Green 2/deltagreen.html index 67c3fe7ba1..f815116f6d 100644 --- a/Delta Green 2/deltagreen.html +++ b/Delta Green 2/deltagreen.html @@ -150,12 +150,17 @@ each (skill,_) in skills1
+
+ +
+
diff --git a/Delta Green 2/deltagreen.pug b/Delta Green 2/deltagreen.pug index 4ddf3a7bee..11af58aeeb 100644 --- a/Delta Green 2/deltagreen.pug +++ b/Delta Green 2/deltagreen.pug @@ -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 diff --git a/Delta Green 2/deltagreen.scss b/Delta Green 2/deltagreen.scss index 25964712db..e7e25fbc52 100644 --- a/Delta Green 2/deltagreen.scss +++ b/Delta Green 2/deltagreen.scss @@ -16,7 +16,8 @@ @import 'src/scss/_ritual_activation'; - +// NAVIGATION TABS MOCK + @import 'navigation_tab.scss'; // REPEATING SECTIONS //============================= @import 'src/scss/toggles/_repcontrol'; diff --git a/Delta Green 2/img/Delta_Green_Paper_Texture.svg b/Delta Green 2/img/Delta_Green_Paper_Texture.svg new file mode 100644 index 0000000000..07254f3842 --- /dev/null +++ b/Delta Green 2/img/Delta_Green_Paper_Texture.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/Delta Green 2/img/gorgeous.png b/Delta Green 2/img/gorgeous.png new file mode 100644 index 0000000000..9f46003651 Binary files /dev/null and b/Delta Green 2/img/gorgeous.png differ diff --git a/Delta Green 2/img/mock_up_player_image.gif b/Delta Green 2/img/mock_up_player_image.gif new file mode 100644 index 0000000000..5c84f6d81e Binary files /dev/null and b/Delta Green 2/img/mock_up_player_image.gif differ diff --git a/Delta Green 2/navigation_tab.css b/Delta Green 2/navigation_tab.css new file mode 100644 index 0000000000..3d505f2264 --- /dev/null +++ b/Delta Green 2/navigation_tab.css @@ -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; +} \ No newline at end of file diff --git a/Delta Green 2/navigation_tab.scss b/Delta Green 2/navigation_tab.scss new file mode 100644 index 0000000000..1e010f7eb1 --- /dev/null +++ b/Delta Green 2/navigation_tab.scss @@ -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; +} +