From d689ae790c33e4b51715822c4e4d5911fa318a8a Mon Sep 17 00:00:00 2001 From: Doug Le Tough Date: Sat, 25 Nov 2017 22:08:43 +0100 Subject: [PATCH] "Action input buttons icons are really handled via CSS" --- tetawebapp/static/images/transparent.png | Bin 0 -> 167 bytes tetawebapp/static/styles/colors.css | 6 +++ tetawebapp/static/styles/fonts.css | 7 +++ tetawebapp/static/styles/tetawebapp.css | 57 ++++++++++++++++++++++- tetawebapp/templates/basics.html | 13 ++++++ tetawebapp/templates/inputs.html | 16 +++---- 6 files changed, 89 insertions(+), 10 deletions(-) create mode 100644 tetawebapp/static/images/transparent.png diff --git a/tetawebapp/static/images/transparent.png b/tetawebapp/static/images/transparent.png new file mode 100644 index 0000000000000000000000000000000000000000..c23935e1695a5f8f060831504958d45f7dd087a7 GIT binary patch literal 167 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx1|;Q0k8}blwj^(N7l!{JxM1({$v_d#0*}aI z1_o|n5N2eUHAey{$X?><>&pI+TT(>T@Fo9*Pe38r%#er@=ltB<)VvZPmw~~#C^fMp zHASI3vm`^o-P1Q9MK6^dD9-Ka;uyklJvo7aiGhKYf$@uivEPgg&ebxsLQ0K4cW AXaE2J literal 0 HcmV?d00001 diff --git a/tetawebapp/static/styles/colors.css b/tetawebapp/static/styles/colors.css index 2b7593d..361cac1 100644 --- a/tetawebapp/static/styles/colors.css +++ b/tetawebapp/static/styles/colors.css @@ -1,3 +1,9 @@ +/* +* Here are the base color scheme and icon set. +* You can modify it or create your own using the same variables +* and make it loaded after this one but before the fonts.css in +* the HTML header section of the index.html template file. +*/ :root { --coloured-bg: #FF5D00; --light-coloured-bg: #FFB387; diff --git a/tetawebapp/static/styles/fonts.css b/tetawebapp/static/styles/fonts.css index b0b05ed..425ce76 100644 --- a/tetawebapp/static/styles/fonts.css +++ b/tetawebapp/static/styles/fonts.css @@ -1,3 +1,10 @@ +/* +* Here are the font definitions. +* You can modify it or create your own and make it loaded +* after this one in the HTML header section of the index.html +* template file. +*/ + @font-face { font-family: "Roboto Condensed"; font-style: normal; diff --git a/tetawebapp/static/styles/tetawebapp.css b/tetawebapp/static/styles/tetawebapp.css index 604aa0f..b24086a 100644 --- a/tetawebapp/static/styles/tetawebapp.css +++ b/tetawebapp/static/styles/tetawebapp.css @@ -1,3 +1,11 @@ +/* +* Do NOT modify this file: +* ------------------------ +* If you want to add or modify classes, create a new +* CSS files and make it loaded after this one in the +* HTML header section of the index.html template file. +*/ + * { box-sizing: border-box; } @@ -176,13 +184,58 @@ button:hover, input[type="button"]:hover, input[type="submit"]:hover { color: var(--text-color); cursor: pointer; } -input[type="image"] { + +input.add, +input.edit, +input.login, +input.logout, +input.refresh, +input.save, +input.search, +input.trash { width: 16px; height: 16px; + margin: 0; + padding: 0; border-radius: 2px; + border-style: none; + background-repeat: no-repeat; + background-position: center center; } -input[type="image"]:hover { +input.add:hover, +input.edit:hover, +input.login:hover, +input.logout:hover, +input.refresh:hover, +input.save:hover, +input.search:hover, +input.trash:hover { background-color: var(--coloured-bg); cursor: pointer; } + +input.add { + background: var(--add_icon); +} +input.edit { + background: var(--edit_icon); +} +input.login { + background: var(--login_icon); +} +input.logout { + background: var(--logout_icon); +} +input.refresh { + background: var(--refresh_icon); +} +input.save { + background: var(--save_icon); +} +input.search { + background: var(--search_icon); +} +input.trash { + background: var(--trash_icon); +} diff --git a/tetawebapp/templates/basics.html b/tetawebapp/templates/basics.html index 1e6e372..da9cb8a 100644 --- a/tetawebapp/templates/basics.html +++ b/tetawebapp/templates/basics.html @@ -12,6 +12,13 @@ change the default theme to your favorite colors and icon set. 

+/*
+* Here are the font definitions.
+* You can modify it or create your own and make it loaded
+* after this one in the HTML header section of the index.html
+* template file.
+*/
+
 @font-face {
 	font-family: "Roboto Condensed";
 	font-style: normal;
@@ -27,6 +34,12 @@
 }
         
+/*
+* Here are the base color scheme and icon set.
+* You can modify it or create your own using the same variables
+* and make it loaded after this one but before the fonts.css in
+* the HTML header section of the index.html template file.
+*/
 :root {
     --coloured-bg: #FF5D00;
     --light-coloured-bg: #FFB387;
diff --git a/tetawebapp/templates/inputs.html b/tetawebapp/templates/inputs.html
index 7eaeed5..7f26589 100644
--- a/tetawebapp/templates/inputs.html
+++ b/tetawebapp/templates/inputs.html
@@ -19,14 +19,14 @@
         

         
         

-        
-        
-        
-        
-        
-        
-        
-        
+        
+        
+        
+        
+        
+        
+        
+        
         

         
 #!/bin/sh