diff --git a/html/themes/breezy/dialog.css b/html/themes/breezy/dialog.css index 7bba8b251c0230b9624e72e63a7bb71c3a05e8b5..a4267007064dc41ae9ddd5f0406dd9dc86dbddcb 100644 --- a/html/themes/breezy/dialog.css +++ b/html/themes/breezy/dialog.css @@ -1,5 +1,5 @@ div.msgbackground { - position: absolute; + position: fixed; left: 0px; top: 0px; right: 0px; @@ -13,15 +13,26 @@ div.msgtrace { left: 0px; top: 0px; right: 0px; + bottom: 0px; + overflow-y: auto; } div.msgtitle { width: auto; - background-color: #f0f0f0; - border: solid 1px #c0c2c3; - margin-bottom: 7px; -} -div.msgtitle h2 { - margin: 10px; + text-align: center; + border-bottom: 1px solid #c0c2c3; + padding: 8px; + background-color: #eff0f1; + min-height: 30px; +} +div.msgtitle > img { + float: left; + height: 30px; +} +div.msgtitle > p { + margin: 0; + padding: 0; + font-size: 24px; + font-weight: bold; } div.msgdialog { width: 60%; @@ -29,11 +40,17 @@ div.msgdialog { position: relative; display: none; margin: auto; + padding: 0; top: 200px; + border: 1px solid #c0c2c3; + background-color: #f3f4f4; } div.msgdialog div.msgcontent { - z-index: 250; width: 100%; + z-index: 250; +} +div.msgdialog div.msgcontent p { + padding: 10px; } div.msgdialog .description { font-style: italic; @@ -50,6 +67,19 @@ div.msgdialog .description { width: auto; } } +div.msgfooter { + width: auto; + padding: 1%; +} +@media (max-width: 640px) { + div.msgfooter { + padding: 5px; + text-align: center !important; + } + div.msgfooter.plugbottom > input[type=submit] { + width: 100% !important; + } +} .error, .notice, .success, diff --git a/html/themes/breezy/less/dialog.less b/html/themes/breezy/less/dialog.less index 21619392774d4a76a3c039e9b67f291eae0cd912..4658266dbba2201b6733ad1eb6fe231471f25de4 100644 --- a/html/themes/breezy/less/dialog.less +++ b/html/themes/breezy/less/dialog.less @@ -1,7 +1,7 @@ @import "colors"; div.msgbackground { - position: absolute; + position: fixed; left: 0px; top: 0px; right: 0px; @@ -16,29 +16,46 @@ div.msgtrace { left: 0px; top: 0px; right: 0px; + bottom: 0px; + overflow-y: auto; } div.msgtitle { width: auto; - background-color: @background-header-color; - border: solid 1px @border-color-1; - margin-bottom: 7px; - h2 { - margin: 10px; + text-align: center; + border-bottom: 1px solid @border-color-1; + padding: 8px; + background-color: @background-color; + min-height: 30px; + > img { + float: left; + height: 30px; + } + > p { + margin: 0; + padding: 0; + font-size: @titlebar-font-size; + font-weight: bold; } } div.msgdialog { div.msgcontent { - z-index: 250; width: 100%; + z-index: 250; + p { + padding: 10px; + } } width: 60%; z-index: 150; position: relative; display: none; margin: auto; + padding: 0; top: 200px; + border: 1px solid @border-color-1; + background-color: @background-second-color; .description { font-style: italic; } @@ -54,6 +71,18 @@ div.msgdialog { } } +div.msgfooter { + width: auto; + padding: 1%; + @media (max-width: 640px) { + padding: 5px; + text-align: center !important; + &.plugbottom > input[type=submit] { + width: 100% !important; + } + } +} + .error, .notice, .success, .info { border: 2px solid @border-color-1; margin: .2em; diff --git a/ihtml/themes/breezy/msg_dialog.tpl b/ihtml/themes/breezy/msg_dialog.tpl index 769fc7582882e2ec5037b4ad02ecd4f5bea0c37b..4dbf6a6b5e41cdeed89d6394f9533aa8295d81ae 100644 --- a/ihtml/themes/breezy/msg_dialog.tpl +++ b/ihtml/themes/breezy/msg_dialog.tpl @@ -12,31 +12,27 @@ </div> {/if} - {if $dialog.type == $smarty.const.INFO_DIALOG || $dialog.type == $smarty.const.CONFIRM_DIALOG} - <div id="e_layer{$dialog.id}" class="info msgdialog"> - {elseif $dialog.type == $smarty.const.WARNING_DIALOG} - <div id="e_layer{$dialog.id}" class="notice msgdialog"> - {else} - <div id="e_layer{$dialog.id}" class="error msgdialog"> - {/if} + <div id="e_layer{$dialog.id}" class="msgdialog"> <div id="e_layerTitle{$dialog.id}" class="msgtitle"> - <h2> - {if $dialog.type == $smarty.const.ERROR_DIALOG} - <img src="geticon.php?context=status&icon=dialog-error&size=32" class="center" alt="{t}Error{/t}"/> - {elseif $dialog.type == $smarty.const.WARNING_DIALOG} - <img src="geticon.php?context=status&icon=dialog-warning&size=32" class="center" alt="{t}Warning{/t}"/> - {elseif $dialog.type == $smarty.const.INFO_DIALOG || $dialog.type == $smarty.const.CONFIRM_DIALOG} - <img src="geticon.php?context=status&icon=dialog-information&size=32" class="center" alt="{t}Information{/t}"/> - {/if} + <p> + {if $dialog.type == $smarty.const.ERROR_DIALOG} + <img src="geticon.php?context=status&icon=dialog-error&size=32" class="center" alt="{t}Error{/t}"/> + {elseif $dialog.type == $smarty.const.WARNING_DIALOG} + <img src="geticon.php?context=status&icon=dialog-warning&size=32" class="center" alt="{t}Warning{/t}"/> + {elseif $dialog.type == $smarty.const.INFO_DIALOG || $dialog.type == $smarty.const.CONFIRM_DIALOG} + <img src="geticon.php?context=status&icon=dialog-information&size=32" class="center" alt="{t}Information{/t}"/> + {/if} {$dialog.title} - </h2> + </p> </div> <div class="msgcontent"> - {$dialog.message} + <p> + {$dialog.message} + </p> </div> - <div class="plugbottom"> + <div class="plugbottom msgfooter"> {if ($dialog.trace != "")} <input type="button" id="Trace" name="Trace" onClick="$('trace_{$dialog.id}').toggle();" value="{t}Trace{/t}"/>