diff --git a/Fire Emblem/Fire-emblem.css b/Fire Emblem/Fire-emblem.css index 4edfff486393..1e29636fe5fc 100644 --- a/Fire Emblem/Fire-emblem.css +++ b/Fire Emblem/Fire-emblem.css @@ -29,93 +29,82 @@ CSS FIRE EMBLEM */ font-style: normal; } -/*============= MENU CSS =============*/ -.sheet-center-menu{ +/*=================== TABS NOU MENU CSS ===================*/ + +.sheet-cosmenu{ 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; -} - -div.sheet-tab-content -{ display: none; } + -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); + } -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 =============*/ - -.sheet-cajamagica{ - background-color: #f5f5f5; - border-color: #ddd; - cursor: not-allowed; - color: #555; - border: 1px solid #ccc; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; -} - -.sheet-clearfloat { + .sheet-clearfloat { clear:both; height:0; font-size: 0px; @@ -160,6 +149,17 @@ input.sheet-tab4:checked ~ div.sheet-tab4 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; position:relative; @@ -241,7 +241,7 @@ input.sheet-tab4:checked ~ div.sheet-tab4 } .sheet-ampladatotal301{ float:none; - width:600px; + width:55%; height:30px; margin: 0px auto; } @@ -324,7 +324,7 @@ input.sheet-tab4:checked ~ div.sheet-tab4 } -/*============= SKILLS, WEAPONS AND ITEMS CSS =============*/ +/*============= SKILLS AND ITEMS CSS =============*/ .sheet-table-head{ float:left; position:relative; @@ -356,7 +356,6 @@ input.sheet-tab4:checked ~ div.sheet-tab4 margin: 0px auto; text-align: center; } - .sheet-item{ float:left; width:160px; @@ -382,7 +381,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; @@ -391,28 +390,7 @@ input.sheet-tab4:checked ~ div.sheet-tab4 background-color: transparent; margin: 2px 0px 0px 5px; } - - /*============= WEAPONS CSS =============*/ -.sheet-weapon-big{ - float:left; - width:100px; - height:30px; - margin: 0px auto; - padding: 5px 0px 0px; - text-align: center; - font-size: 13px; - } -.sheet-weapon-small{ - float:left; - width:68px; - height:30px; - margin: 0px auto; - padding: 5px 0px 0px; - text-align: center; - font-size: 14px; - } - .sheet-combatA{ float:left; width:100px; @@ -423,7 +401,7 @@ input.sheet-tab4:checked ~ div.sheet-tab4 } .sheet-combatB{ float:left; - width:150px; + width:100px; height:30px; margin: 0px auto; text-align: center; @@ -438,26 +416,10 @@ input.sheet-tab4:checked ~ div.sheet-tab4 text-align: center; font-size: 16px; } -.sheet-combatD{ - float:left; - width:300px; - height:30px; - margin: 0px auto; - text-align: center; - font-size: 16px; - } -.sheet-combatE{ - float:left; - width:450px; - height:30px; - margin: 0px auto; - text-align: center; - font-size: 16px; - } .sheet-container-weapon{ float:none; - width:550px; + width:400px; height:auto; margin: 5px auto; padding: 10px; @@ -567,6 +529,36 @@ input.sheet-tab4:checked ~ div.sheet-tab4 background-color: #FF0000; } +/*============= COLUMNES CSS ES POT BORRAR!!! =============*/ + +.sheet-columna50{ + float:left; + position:relative; + width:50%; + height:auto; + margin: 0px auto; + padding: 0px; + } + +.sheet-columna30{ + float:left; + position:relative; + width:27%; + height:auto; + margin: 0% 0% 0% 5%; + padding: 0px; + background-color: aqua; + } + +.sheet-columna20{ + float:left; + position:relative; + width:22%; + height:auto; + margin: 0% 0% 0% 2%; + padding: 0px; + } + /*============= ESPACIADORES Y SEPARADORES CSS =============*/ .sheet-espai-30{ @@ -619,7 +611,6 @@ input.sheet-tab4:checked ~ div.sheet-tab4 /*=================== MEDIA CSS ===================*/ - @media screen and (min-width: 940px){ .sheet-contenedorvj{ width: 100%; @@ -630,11 +621,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{ @@ -647,10 +634,6 @@ input.sheet-tab4:checked ~ div.sheet-tab4 box-sizing: border-box; background-color:antiquewhite; } - .sheet-sobrebarra{ - padding: 0px 7px; - background-color:antiquewhite; - } } @media screen and (min-width: 1050px){ .sheet-contenedorvj{ @@ -662,10 +645,6 @@ 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){ @@ -679,8 +658,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 a146ef1409dc..9f98d8da8591 100644 --- a/Fire Emblem/Fire-emblem.html +++ b/Fire Emblem/Fire-emblem.html @@ -5,7 +5,7 @@