From a376919ad817fbbabacc6e04e1e610a57cffe1e2 Mon Sep 17 00:00:00 2001 From: Franciszek Szczepan Wawrzak Date: Sat, 28 Jan 2012 13:57:01 +0100 Subject: [PATCH] rearranged css files --- Makefile | 12 +- {src => css}/armycalc.xcf | Bin css/layout.css | 45 +++++ css/menu.css | 112 ++++++++++++ css/popup.css | 105 +++++++++++ css/statusbar.css | 29 +++ css/style.css | 363 -------------------------------------- css/toolbar.css | 37 ++++ css/workspace.css | 40 +++++ tests/index.html | 4 +- web/armycalc.css | 205 ++++++++++----------- 11 files changed, 483 insertions(+), 469 deletions(-) rename {src => css}/armycalc.xcf (100%) create mode 100644 css/layout.css create mode 100644 css/menu.css create mode 100644 css/popup.css create mode 100644 css/statusbar.css delete mode 100644 css/style.css create mode 100644 css/toolbar.css create mode 100644 css/workspace.css diff --git a/Makefile b/Makefile index fa6da9a..572e35d 100644 --- a/Makefile +++ b/Makefile @@ -19,11 +19,15 @@ JS_FILES = ${SRC_DIR}/armycalc.js\ ${SRC_DIR}/printer.js\ ${SRC_DIR}/sandbox.js -CSS_FILES = ${CSS_DIR}/style.css\ - ${CSS_DIR}/unitslist.css\ +CSS_FILES = ${CSS_DIR}/layout.css\ + ${CSS_DIR}/menu.css\ + ${CSS_DIR}/statusbar.css\ + ${CSS_DIR}/toolbar.css\ ${CSS_DIR}/validation.css\ - ${CSS_DIR}/submenu.css - + ${CSS_DIR}/popup.css\ + ${CSS_DIR}/submenu.css\ + ${CSS_DIR}/unitslist.css\ + ${CSS_DIR}/workspace.css TEST_FILES = ${TESTS_DIR}/twrreader.js diff --git a/src/armycalc.xcf b/css/armycalc.xcf similarity index 100% rename from src/armycalc.xcf rename to css/armycalc.xcf diff --git a/css/layout.css b/css/layout.css new file mode 100644 index 0000000..2330daf --- /dev/null +++ b/css/layout.css @@ -0,0 +1,45 @@ + +div.acCanvas p, div.acCanvas h2, div.acCanvas div { + margin:0; + padding:0; +} + +div.acCanvas { + + position: relative; + min-height: 150px; + background: white; + font-family: 'Arial'; + font-size: 12px; + border: 1px solid #555; + height: 100%; +} + +div.acFullscreen { + + display: block; + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + +} + +body.acFullscreen { + height:100%; + margin:0; + padding:0; +} + +div.acCanvas img { + border: none; +} + +div.acCanvas a:focus { + outline: none; +} + + diff --git a/css/menu.css b/css/menu.css new file mode 100644 index 0000000..aa242bc --- /dev/null +++ b/css/menu.css @@ -0,0 +1,112 @@ +/* MENU */ + +div.acCanvas div.menucontainer { + background: black; + min-height: 25px; + color: white; + line-height: 22px; + margin-bottom: 7px; +} + +div.acCanvas div.menu { + position:absolute; + z-index:10; + /* + left:20px; + margin-left:-2.5em; + width:80%; + */ +} + +div.acCanvas div.menu #acElements li>ul { + top: auto; + left: auto; +} + +div.acCanvas div.menu #acElements { + list-style: none; +} + +div.acCanvas div.menu #acElements ul { + padding: 0; + margin:0; + list-style: none; + width:10em; + z-index:99; + position:relative; + overflow:visible; +} + +div.acCanvas div.menu #acElements li { + margin:0; + position: relative; + float:left; + width: 10em; + background-color: black; + border:solid 1px #444; + display:block; + height:auto; +} + +div.acCanvas div.menu #acElements ul li{ + background-color: black; +} + +div.acCanvas div.menu #acElements ul li{ + border-width:1px 1px 0 0; +} + +div.acCanvas div.menu #acElements ul ul li{ + border-width:1px 1px 0 1px; +} + +div.acCanvas div.menu #acElements ul ul li:last-child { + border-width:1px; +} + +div.acCanvas div.menu #acElements a { + text-align: center; + text-decoration:none; + display:block; + color: white; + white-space: nowrap; + /* padding: 0.1em; + margin:0.2em 0 0.2em 0.1em; + width:11.5em; + height:1.05em; */ +} + +div.acCanvas div.menu #acElements a:hover { + background-color: white; + color: black; +} +/* div.acCanvas div.menu #acElements a:hover, div.acCanvas div.menu #acElements li:hover, div.acCanvas div.menu #acElements ul li:hover, div.acCanvas div.menu #acElements ul li a:hover */ + +div.acCanvas div.menu #acElements ul{ + display:none; +} + +/*all see this */ +div.acCanvas div.menu #acElements ul ul, div.acCanvas div.menu #acElements ul ul ul{ + display:none; + position:absolute; + margin-top:-1.8em; + margin-left:10em; +} + +/* non-IE browsers see this */ +div.acCanvas div.menu #acElements ul li>ul, div.acCanvas div.menu #acElements ul ul li>ul { + margin-top:-1.35em; +} + + +div.acCanvas div.menu #acElements li:hover ul ul, div.acCanvas div.menu #acElements li:hover ul ul ul, div.acCanvas div.menu #acElements li:hover ul ul ul ul, div.acCanvas div.menu #acElements li:hover ul ul ul ul ul { + display:none; +} + +div.acCanvas div.menu #acElements li:hover ul, div.acCanvas div.menu #acElements ul li:hover ul, div.acCanvas div.menu #acElements ul ul li:hover ul, div.acCanvas div.menu #acElements ul ul ul li:hover ul, div.acCanvas div.menu #acElements ul ul ul ul li:hover ul { + /* display:block; */ +} + + + diff --git a/css/popup.css b/css/popup.css new file mode 100644 index 0000000..ca2ec97 --- /dev/null +++ b/css/popup.css @@ -0,0 +1,105 @@ + +/* POPUP */ + +div#acPopup { + display:none; + position: absolute; + width: 400px; + top:40px; + border: 3px solid white; + left: 50%; + margin-left: -200px; + z-index:200; + +} + +div#acPopupBg { + display:none; + position:fixed; + height:100%; + width:100%; + top:0; + left:0; + background:#000000; + z-index:1; + filter:alpha(opacity=60); + -moz-opacity: 0.6; + opacity: 0.6; + +} + +div#acPopup a#acClosePopup { + position: absolute; + width: 22px; + height: 22px; + top:0; + right:0; + padding:3px; +} + + +div#acPopup h2#acPopupTitle { + background: black; + color: white; + height: 28px; + padding: 0 5px; + margin: 0; + line-height: 28px; + font-size: 14px; + font-weight: bold; + +} + +div#acPopup div#acPopupContent { + + min-height: 100px; + background: white; + overflow: auto; +} + +div#acPopup div#acPopupContent div.piece { + border: 1px dashed #ddd; + margin: 5px; + padding: 10px; + font-size: 12px; + line-height: 16px; + background: none repeat scroll 0 0 #EEEEEE; + font-style: italic; + color: #222; +} + +div#acPopup div#acPopupContent div.piece h3 { + font-size: 18px; + font-weight: bold; + margin-bottom: 10px; +} + +div#acPopup div#acPopupContent div.submit { + border: 1px dashed #ddd; + margin: 5px; + padding: 10px; + overflow: auto; +} + + +div#acPopup div#acPopupContent label { + + display: block; + border: 1px dashed #ddd; + margin: 5px; + padding: 5px; + overflow: auto; + +} + +div#acPopup input, div#acPopup select { + + width: 200px; + border: 1px solid #aaa; + float: right; + +} + + + + diff --git a/css/statusbar.css b/css/statusbar.css new file mode 100644 index 0000000..62c4a9b --- /dev/null +++ b/css/statusbar.css @@ -0,0 +1,29 @@ + +/* STATUSBAR */ +div.acCanvas div.statusbar { + + background: black; + height: 20px; + line-height: 20px; + color: white; + +} + +div.acCanvas div.statusbar div.status { + + float:left; + +} + +div.acCanvas div.statusbar div.link { + + float:right; + +} + +div.acCanvas div.statusbar div.link a{ + + color:white; + +} + diff --git a/css/style.css b/css/style.css deleted file mode 100644 index 335dd59..0000000 --- a/css/style.css +++ /dev/null @@ -1,363 +0,0 @@ - -div.acCanvas p, div.acCanvas h2, div.acCanvas div { - margin:0; - padding:0; -} - -div.acCanvas { - - position: relative; - min-height: 150px; - background: white; - font-family: 'Arial'; - font-size: 12px; - border: 1px solid #555; - height: 100%; -} - -div.acFullscreen { - - display: block; - position: fixed; - left: 0; - top: 0; - width: 100%; - height: 100%; - padding: 0; - margin: 0; - -} - -body.acFullscreen { - height:100%; - margin:0; - padding:0; -} - -div.acCanvas img { - border: none; -} - -div.acCanvas a:focus { - outline: none; -} - -/* TOOLBAR */ -div.acCanvas div.toolbar { - background: black; - height: 26px; - color:white; -} - -div.acCanvas div.toolbar img { - padding: 2px; -} - -div.acCanvas span.langsel { - display: block; - float: left; - padding: 2px; -} - - -div.acCanvas div.toolbar select { - border: 1px solid #eee; - background: #333; - color: white; -} - -div.acCanvas div.buttons1 { - float: left; - height: 26px; -} - - -div.acCanvas div.buttons2 { - float: right; - height: 26px; -} - - - -/* MENU */ - -div.acCanvas div.menucontainer { - background: black; - min-height: 25px; - color: white; - line-height: 22px; - margin-bottom: 7px; -} - -div.acCanvas div.menu { - position:absolute; - z-index:10; - /* - left:20px; - margin-left:-2.5em; - width:80%; - */ -} - -div.acCanvas div.menu #acElements li>ul { - top: auto; - left: auto; -} - -div.acCanvas div.menu #acElements { - list-style: none; -} - -div.acCanvas div.menu #acElements ul { - padding: 0; - margin:0; - list-style: none; - width:10em; - z-index:99; - position:relative; - overflow:visible; -} - -div.acCanvas div.menu #acElements li { - margin:0; - position: relative; - float:left; - width: 10em; - background-color: black; - border:solid 1px #444; - display:block; - height:auto; -} - -div.acCanvas div.menu #acElements ul li{ - background-color: black; -} - -div.acCanvas div.menu #acElements ul li{ - border-width:1px 1px 0 0; -} - -div.acCanvas div.menu #acElements ul ul li{ - border-width:1px 1px 0 1px; -} - -div.acCanvas div.menu #acElements ul ul li:last-child { - border-width:1px; -} - -div.acCanvas div.menu #acElements a { - text-align: center; - text-decoration:none; - display:block; - color: white; - white-space: nowrap; - /* padding: 0.1em; - margin:0.2em 0 0.2em 0.1em; - width:11.5em; - height:1.05em; */ -} - -div.acCanvas div.menu #acElements a:hover { - background-color: white; - color: black; -} -/* div.acCanvas div.menu #acElements a:hover, div.acCanvas div.menu #acElements li:hover, div.acCanvas div.menu #acElements ul li:hover, div.acCanvas div.menu #acElements ul li a:hover */ - -div.acCanvas div.menu #acElements ul{ - display:none; -} - -/*all see this */ -div.acCanvas div.menu #acElements ul ul, div.acCanvas div.menu #acElements ul ul ul{ - display:none; - position:absolute; - margin-top:-1.8em; - margin-left:10em; -} - -/* non-IE browsers see this */ -div.acCanvas div.menu #acElements ul li>ul, div.acCanvas div.menu #acElements ul ul li>ul { - margin-top:-1.35em; -} - - -div.acCanvas div.menu #acElements li:hover ul ul, div.acCanvas div.menu #acElements li:hover ul ul ul, div.acCanvas div.menu #acElements li:hover ul ul ul ul, div.acCanvas div.menu #acElements li:hover ul ul ul ul ul { - display:none; -} - -div.acCanvas div.menu #acElements li:hover ul, div.acCanvas div.menu #acElements ul li:hover ul, div.acCanvas div.menu #acElements ul ul li:hover ul, div.acCanvas div.menu #acElements ul ul ul li:hover ul, div.acCanvas div.menu #acElements ul ul ul ul li:hover ul { - /* display:block; */ -} - - -/* WORKSPACE */ -div.acCanvas div.workspace { - min-height: 150px; - border: none; - overflow: hidden; - background-color: #ddd; -} -div.acCanvas div.workspace div.unitslist{ - margin-left: 160px; - height: 300px; - /* - overflow: auto; - overflow-x: hidden; - -ms-overflow-x: hidden; - */ -} -div.acCanvas div.workspace div.unitdetails{ - width: 160px; - float: left; -} -div.acCanvas div.workspace #acDetails{ - min-height: 100px; - padding: 5px 0; - -} - -div.acCanvas #acDetails ul.actions { - overflow: hidden; - height: 34px; -} - -div.acCanvas #acDetails ul.actions li { - float: left; -} - -div.acCanvas #acDetails ul.actions li a { - display: block; -} - -/* STATUSBAR */ -div.acCanvas div.statusbar { - - background: black; - height: 20px; - line-height: 20px; - color: white; - -} - -div.acCanvas div.statusbar div.status { - - float:left; - -} - -div.acCanvas div.statusbar div.link { - - float:right; - -} - -div.acCanvas div.statusbar div.link a{ - - color:white; - -} - -/* POPUP */ - -div#acPopup { - display:none; - position: absolute; - width: 400px; - top:40px; - border: 3px solid white; - left: 50%; - margin-left: -200px; - z-index:200; - -} - -div#acPopupBg { - display:none; - position:fixed; - height:100%; - width:100%; - top:0; - left:0; - background:#000000; - z-index:1; - filter:alpha(opacity=60); - -moz-opacity: 0.6; - opacity: 0.6; - -} - -div#acPopup a#acClosePopup { - position: absolute; - width: 22px; - height: 22px; - top:0; - right:0; - padding:3px; -} - - -div#acPopup h2#acPopupTitle { - background: black; - color: white; - height: 28px; - padding: 0 5px; - margin: 0; - line-height: 28px; - font-size: 14px; - font-weight: bold; - -} - -div#acPopup div#acPopupContent { - - min-height: 100px; - background: white; - overflow: auto; -} - -div#acPopup div#acPopupContent div.piece { - border: 1px dashed #ddd; - margin: 5px; - padding: 10px; - font-size: 12px; - line-height: 16px; - background: none repeat scroll 0 0 #EEEEEE; - font-style: italic; - color: #222; -} - -div#acPopup div#acPopupContent div.piece h3 { - font-size: 18px; - font-weight: bold; - margin-bottom: 10px; -} - -div#acPopup div#acPopupContent div.submit { - border: 1px dashed #ddd; - margin: 5px; - padding: 10px; - overflow: auto; -} - - -div#acPopup div#acPopupContent label { - - display: block; - border: 1px dashed #ddd; - margin: 5px; - padding: 5px; - overflow: auto; - -} - -div#acPopup input, div#acPopup select { - - width: 200px; - border: 1px solid #aaa; - float: right; - -} - - - - diff --git a/css/toolbar.css b/css/toolbar.css new file mode 100644 index 0000000..639c628 --- /dev/null +++ b/css/toolbar.css @@ -0,0 +1,37 @@ +/* TOOLBAR */ +div.acCanvas div.toolbar { + background: black; + height: 26px; + color:white; +} + +div.acCanvas div.toolbar img { + padding: 2px; +} + +div.acCanvas span.langsel { + display: block; + float: left; + padding: 2px; +} + + +div.acCanvas div.toolbar select { + border: 1px solid #eee; + background: #333; + color: white; +} + +div.acCanvas div.buttons1 { + float: left; + height: 26px; +} + + +div.acCanvas div.buttons2 { + float: right; + height: 26px; +} + + + diff --git a/css/workspace.css b/css/workspace.css new file mode 100644 index 0000000..d97a126 --- /dev/null +++ b/css/workspace.css @@ -0,0 +1,40 @@ + +/* WORKSPACE */ +div.acCanvas div.workspace { + min-height: 150px; + border: none; + overflow: hidden; + background-color: #ddd; +} +div.acCanvas div.workspace div.unitslist{ + margin-left: 160px; + height: 300px; + /* + overflow: auto; + overflow-x: hidden; + -ms-overflow-x: hidden; + */ +} +div.acCanvas div.workspace div.unitdetails{ + width: 160px; + float: left; +} +div.acCanvas div.workspace #acDetails{ + min-height: 100px; + padding: 5px 0; + +} + +div.acCanvas #acDetails ul.actions { + overflow: hidden; + height: 34px; +} + +div.acCanvas #acDetails ul.actions li { + float: left; +} + +div.acCanvas #acDetails ul.actions li a { + display: block; +} + diff --git a/tests/index.html b/tests/index.html index a3e607d..6b1bc6b 100644 --- a/tests/index.html +++ b/tests/index.html @@ -18,9 +18,9 @@
diff --git a/web/armycalc.css b/web/armycalc.css index 435348a..a2102ca 100644 --- a/web/armycalc.css +++ b/web/armycalc.css @@ -42,42 +42,6 @@ div.acCanvas a:focus { outline: none; } -/* TOOLBAR */ -div.acCanvas div.toolbar { - background: black; - height: 26px; - color:white; -} - -div.acCanvas div.toolbar img { - padding: 2px; -} - -div.acCanvas span.langsel { - display: block; - float: left; - padding: 2px; -} - - -div.acCanvas div.toolbar select { - border: 1px solid #eee; - background: #333; - color: white; -} - -div.acCanvas div.buttons1 { - float: left; - height: 26px; -} - - -div.acCanvas div.buttons2 { - float: right; - height: 26px; -} - - /* MENU */ @@ -190,44 +154,7 @@ div.acCanvas div.menu #acElements li:hover ul, div.acCanvas div.menu #acElements } -/* WORKSPACE */ -div.acCanvas div.workspace { - min-height: 150px; - border: none; - overflow: hidden; - background-color: #ddd; -} -div.acCanvas div.workspace div.unitslist{ - margin-left: 160px; - height: 300px; - /* - overflow: auto; - overflow-x: hidden; - -ms-overflow-x: hidden; - */ -} -div.acCanvas div.workspace div.unitdetails{ - width: 160px; - float: left; -} -div.acCanvas div.workspace #acDetails{ - min-height: 100px; - padding: 5px 0; - -} - -div.acCanvas #acDetails ul.actions { - overflow: hidden; - height: 34px; -} -div.acCanvas #acDetails ul.actions li { - float: left; -} - -div.acCanvas #acDetails ul.actions li a { - display: block; -} /* STATUSBAR */ div.acCanvas div.statusbar { @@ -257,6 +184,56 @@ div.acCanvas div.statusbar div.link a{ } +/* TOOLBAR */ +div.acCanvas div.toolbar { + background: black; + height: 26px; + color:white; +} + +div.acCanvas div.toolbar img { + padding: 2px; +} + +div.acCanvas span.langsel { + display: block; + float: left; + padding: 2px; +} + + +div.acCanvas div.toolbar select { + border: 1px solid #eee; + background: #333; + color: white; +} + +div.acCanvas div.buttons1 { + float: left; + height: 26px; +} + + +div.acCanvas div.buttons2 { + float: right; + height: 26px; +} + + + + + +div.acCanvas ul.errors li { + padding: 5px; +} + +div.acCanvas ul.errors li.error { + color: red; + font-weight: bold; +} + + + /* POPUP */ div#acPopup { @@ -362,6 +339,32 @@ div#acPopup input, div#acPopup select { + +div.acCanvas .submenu li { +} + +div.acCanvas .submenu img { + display: block; + margin: 5px auto; +} + + +div.acCanvas .submenu li a { + background-image: url("img/icon_append.png"); + background-position: 5px 5px; + background-repeat: no-repeat; + color: black; + display: block; + line-height: 16px; + padding: 5px 5px 5px 25px; + text-decoration: none; +} + +div.acCanvas .submenu li a:hover { + font-weight: bold; +} + + /* UNITS LIST */ div.acCanvas #acUnits { background-color: white; @@ -422,40 +425,42 @@ div.acCanvas #acUnitsHeader div.title { - -div.acCanvas ul.errors li { - padding: 5px; +/* WORKSPACE */ +div.acCanvas div.workspace { + min-height: 150px; + border: none; + overflow: hidden; + background-color: #ddd; } - -div.acCanvas ul.errors li.error { - color: red; - font-weight: bold; +div.acCanvas div.workspace div.unitslist{ + margin-left: 160px; + height: 300px; + /* + overflow: auto; + overflow-x: hidden; + -ms-overflow-x: hidden; + */ } - - - - -div.acCanvas .submenu li { +div.acCanvas div.workspace div.unitdetails{ + width: 160px; + float: left; } +div.acCanvas div.workspace #acDetails{ + min-height: 100px; + padding: 5px 0; -div.acCanvas .submenu img { - display: block; - margin: 5px auto; } +div.acCanvas #acDetails ul.actions { + overflow: hidden; + height: 34px; +} -div.acCanvas .submenu li a { - background-image: url("img/icon_append.png"); - background-position: 5px 5px; - background-repeat: no-repeat; - color: black; - display: block; - line-height: 16px; - padding: 5px 5px 5px 25px; - text-decoration: none; +div.acCanvas #acDetails ul.actions li { + float: left; } -div.acCanvas .submenu li a:hover { - font-weight: bold; +div.acCanvas #acDetails ul.actions li a { + display: block; } - +