diff --git a/Fire Emblem/Fire-emblem.css b/Fire Emblem/Fire-emblem.css index 4edfff48639..e20493da0f0 100644 --- a/Fire Emblem/Fire-emblem.css +++ b/Fire Emblem/Fire-emblem.css @@ -29,78 +29,79 @@ CSS FIRE EMBLEM */ font-style: normal; } -/*============= MENU CSS =============*/ +/*=================== TABS NOU MENU CSS ===================*/ -.sheet-center-menu{ +.sheet-cosmenu2{ float: none; - position: relative; + width: 100%; height: auto; - min-height: 50px; + min-height: 1000px; + margin: 0px auto ; + } + +/* configure the tab buttons */ +.charsheet .sheet-character, +.charsheet .sheet-weapons, +.charsheet .sheet-background, +.charsheet .sheet-abilities{ + display: none; } -label { - font-size:1em; - z-index: 1; +/* style the active button */ +.charsheet .sheet-tabstoggle[value="character"] ~ div .sheet-button0 {background-color: #FF0004 !important; color: #FFDD00 !important;} +.charsheet .sheet-tabstoggle[value="weapons"] ~ div .sheet-button1 {background-color: #FF0004 !important; color: #FFDD00 !important;} +.charsheet .sheet-tabstoggle[value="background"] ~ div .sheet-button2 {background-color: #FF0004 !important; color: #FFDD00 !important;} +.charsheet .sheet-tabstoggle[value="abilities"] ~ div .sheet-button3 {background-color: #FF0004 !important; color: #FFDD00 !important;} + +/* show the selected tab */ +.charsheet .sheet-tabstoggle[value="character"] ~ div.sheet-character, +.charsheet .sheet-tabstoggle[value="weapons"] ~ div.sheet-weapons, +.charsheet .sheet-tabstoggle[value="background"] ~ div.sheet-background, +.charsheet .sheet-tabstoggle[value="abilities"] ~ div.sheet-abilities{ + display: block; } -input.sheet-tab -{ + +.sheet-button0, +.sheet-button1, +.sheet-button2, +.sheet-button3{ width: auto; - position: relative; - margin: 10px 0px 5px 2px; - cursor: pointer; - border: 2px #000000; - text-align: center; - z-index: 1; - display: inline-grid; -} -input.sheet-tab::before -{ - content: attr(title); - text-align: center; - display: inline-block; background: #000000; - color: #FFFFFF; - padding: 10px 49px; - font-family: "Vollkorn SC", serif; - font-weight: 400; - font-style: normal; - width: auto; + color: #ffffff; + margin: 0px 0px 0px 3px; + padding: 14px 46px 12px; + text-align: center; + font-family: "Vollkorn SC", serif; + font-weight: 400; + font-style: normal; font-size: 18px; border: 2px solid #000000; - -webkit-box-shadow: inset 0px 0px 14px 0px rgba(0,0,0,0.75); -moz-box-shadow: inset 0px 0px 14px 0px rgba(0,0,0,0.75); box-shadow: inset 0px 0px 14px 0px rgba(0,0,0,0.75); - z-index: 1; - } -input.sheet-tab:hover::before -{ + } + +.sheet-button0:hover, +.sheet-button1:hover, +.sheet-button2:hover, +.sheet-button3:hover{ + width: auto; background: #FF5F00; - color: white; - border: 2px solid #000000; -} -input.sheet-tab:checked::before -{ - background: #FF0004; - color: #FFDD00; + color: #ffffff; + margin: 0px 0px 0px 3px; + padding: 14px 46px 12px; + text-align: center; + font-family: "Vollkorn SC", serif; + font-weight: 400; + font-style: normal; + font-size: 18px; border: 2px solid #000000; -} + -webkit-box-shadow: inset 0px 0px 14px 0px rgba(0,0,0,0.75); + -moz-box-shadow: inset 0px 0px 14px 0px rgba(0,0,0,0.75); + box-shadow: inset 0px 0px 14px 0px rgba(0,0,0,0.75); + } -div.sheet-tab-content -{ display: none; } -input.sheet-tab1:checked ~ div.sheet-tab1, -input.sheet-tab2:checked ~ div.sheet-tab2, -input.sheet-tab3:checked ~ div.sheet-tab3, -input.sheet-tab4:checked ~ div.sheet-tab4 -{ - display: inline-block; - height: auto; - min-height: 400px; - width: 100%; - margin: 40px 0px; - z-index: 1; -} /*============= CONTENEDORES Y COLUMNAS CSS =============*/ @@ -159,6 +160,16 @@ input.sheet-tab4:checked ~ div.sheet-tab4 background-size: auto; background-position: center; } +.sheet-capinfo{ + float:left; + position:relative; + width:96%; + height:105px; + margin: 0px 2%; + padding: 0px 0px; + box-sizing: border-box; + display: inline-block; + } .sheet-columna600{ float:left; @@ -382,7 +393,7 @@ input.sheet-tab4:checked ~ div.sheet-tab4 } .charsheet button[type="roll"].sheet-textbox{ - background-image: url("https://rolmasters.com/ROLL20/FIRE-EMBLEM/Fire-emblem-chatC-30px.png"); + background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Fire Emblem/images/Fire-emblem-chatC-30px.png"); background-size: 24px 24px; background-repeat: no-repeat; width: 24px; @@ -392,8 +403,8 @@ input.sheet-tab4:checked ~ div.sheet-tab4 margin: 2px 0px 0px 5px; } - /*============= WEAPONS CSS =============*/ + .sheet-weapon-big{ float:left; width:100px; @@ -556,8 +567,6 @@ input.sheet-tab4:checked ~ div.sheet-tab4 height:auto; } -/*=================== MAGIC CSS ===================*/ - /*============= CHECK BOX CSS =============*/ .sheet-mycheck{ filter: hue-rotate(120deg) brightness(0.8); @@ -619,7 +628,6 @@ input.sheet-tab4:checked ~ div.sheet-tab4 /*=================== MEDIA CSS ===================*/ - @media screen and (min-width: 940px){ .sheet-contenedorvj{ width: 100%; @@ -630,11 +638,7 @@ input.sheet-tab4:checked ~ div.sheet-tab4 background-position: center center; box-sizing: border-box; background-color:floralwhite; - } - .sheet-sobrebarra{ - padding: 0px 7px; - background-color:floralwhite; - } + } } @media screen and (min-width: 1000px){ .sheet-contenedorvj{ @@ -646,11 +650,7 @@ input.sheet-tab4:checked ~ div.sheet-tab4 background-position: center center; box-sizing: border-box; background-color:antiquewhite; - } - .sheet-sobrebarra{ - padding: 0px 7px; - background-color:antiquewhite; - } + } } @media screen and (min-width: 1050px){ .sheet-contenedorvj{ @@ -662,11 +662,7 @@ input.sheet-tab4:checked ~ div.sheet-tab4 background-position: center center; box-sizing: border-box; background-color:lavender; - } - .sheet-sobrebarra{ - padding: 0px 7px; - background-color:lavender; - } + } } @media screen and (min-width: 1100px){ .sheet-contenedorvj{ @@ -679,8 +675,4 @@ input.sheet-tab4:checked ~ div.sheet-tab4 box-sizing: border-box; background-color:burlywood; } - .sheet-sobrebarra{ - padding: 0px 7px; - background-color:burlywood; - } } diff --git a/Fire Emblem/Fire-emblem.html b/Fire Emblem/Fire-emblem.html index a146ef1409d..c0ddc93f15c 100644 --- a/Fire Emblem/Fire-emblem.html +++ b/Fire Emblem/Fire-emblem.html @@ -5,7 +5,7 @@