fix transperent mode?

files_cells/notebooks/en/widgets_en.ipynb

@@ -58,6 +58,7 @@
         "parser.add_argument('-x', type=int, help='X coordinate for the image in px', metavar='', default=0)\n",
         "parser.add_argument('-s', '--scale', type=int, help='Scale image in %%', metavar='', default=100)\n",
         "parser.add_argument('-m', '--mode', type=str, help='Specify \"no-repeat\" so that the image pattern is not repeated.', metavar='', default='repeat')\n",
+        "parser.add_argument('-t', '--transparent', action='store_true', help='Makes input/selection fields 35% more transparent')\n",
         "args = parser.parse_args()\n",
         "\"\"\"---\"\"\"\n",
         "url_img = args.image\n",
@@ -72,10 +73,15 @@
         "fix_heigh_img = \"-815px\"\n",
         "if env == \"Google Colab\":\n",
         "    fix_heigh_img = \"-775px\"\n",
+        "# transperent fields\n",
+        "t_bg_alpha = \"1\"\n",
+        "if args.transparent:\n",
+        "    t_bg_alpha = \"0.65\"\n",
         "\n",
         "container_background = f'''\n",
         "<style>\n",
         ":root {{\n",
+        "  /* for background container*/\n",
         "  --img_background: url({url_img});\n",
         "  --img_opacity: {opacity_img};\n",
         "  --img_blur: {blur_img}px;\n",
@@ -83,7 +89,11 @@
         "  --image_x: {x_img}px;\n",
         "  --img_scale: {scale_img}%;\n",
         "  --img_mode: {mode_img};\n",
-        "  --img_height_dif: {fix_heigh_img}\n",
+        "  --img_height_dif: {fix_heigh_img};\n",
+        "\n",
+        "  /* for fields */\n",
+        "  --bg-field-color: rgba(28, 28, 28, {t_bg_alpha}); /* -> #1c1c1c */\n",
+        "  --bg-field-color-hover: rgba(38, 38, 38, {t_bg_alpha}); /* -> #262626; */\n",
         "}}\n",
         "'''\n",
         "\n",
@@ -205,7 +215,7 @@
         ".widget-dropdown select,\n",
         ".widget-text input[type=\"text\"] {\n",
         "    height: 30px;\n",
-        "    background-color: #1c1c1c;\n",
+        "    background-color: var(--bg-field-color);\n",
         "    border: 1px solid #262626;\n",
         "    border-radius: 10px;\n",
         "    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);\n",
@@ -220,10 +230,14 @@
         ".widget-dropdown select:hover,\n",
         ".widget-text input[type=\"text\"]:hover {\n",
         "    transform: scale(1.003);\n",
-        "    background-color: #262626;\n",
+        "    background-color: var(--bg-field-color-hover);\n",
         "    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);\n",
         "}\n",
         "\n",
+        ".widget-dropdown option {\n",
+        "    background-color: #1c1c1c;\n",
+        "}\n",
+        "\n",
         "\n",
         "/* Slider Checkbox style */\n",
         "\n",

files_cells/notebooks/ru/widgets_ru.ipynb

@@ -58,6 +58,7 @@
         "parser.add_argument('-x', type=int, help='X coordinate for the image in px', metavar='', default=0)\n",
         "parser.add_argument('-s', '--scale', type=int, help='Scale image in %%', metavar='', default=100)\n",
         "parser.add_argument('-m', '--mode', type=str, help='Specify \"no-repeat\" so that the image pattern is not repeated.', metavar='', default='repeat')\n",
+        "parser.add_argument('-t', '--transparent', action='store_true', help='Makes input/selection fields 35% more transparent')\n",
         "args = parser.parse_args()\n",
         "\"\"\"---\"\"\"\n",
         "url_img = args.image\n",
@@ -72,10 +73,15 @@
         "fix_heigh_img = \"-815px\"\n",
         "if env == \"Google Colab\":\n",
         "    fix_heigh_img = \"-775px\"\n",
+        "# transperent fields\n",
+        "t_bg_alpha = \"1\"\n",
+        "if args.transparent:\n",
+        "    t_bg_alpha = \"0.65\"\n",
         "\n",
         "container_background = f'''\n",
         "<style>\n",
         ":root {{\n",
+        "  /* for background container*/\n",
         "  --img_background: url({url_img});\n",
         "  --img_opacity: {opacity_img};\n",
         "  --img_blur: {blur_img}px;\n",
@@ -83,7 +89,11 @@
         "  --image_x: {x_img}px;\n",
         "  --img_scale: {scale_img}%;\n",
         "  --img_mode: {mode_img};\n",
-        "  --img_height_dif: {fix_heigh_img}\n",
+        "  --img_height_dif: {fix_heigh_img};\n",
+        "\n",
+        "  /* for fields */\n",
+        "  --bg-field-color: rgba(28, 28, 28, {t_bg_alpha}); /* -> #1c1c1c */\n",
+        "  --bg-field-color-hover: rgba(38, 38, 38, {t_bg_alpha}); /* -> #262626; */\n",
         "}}\n",
         "'''\n",
         "\n",
@@ -205,7 +215,7 @@
         ".widget-dropdown select,\n",
         ".widget-text input[type=\"text\"] {\n",
         "    height: 30px;\n",
-        "    background-color: #1c1c1c;\n",
+        "    background-color: var(--bg-field-color);\n",
         "    border: 1px solid #262626;\n",
         "    border-radius: 10px;\n",
         "    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);\n",
@@ -220,10 +230,14 @@
         ".widget-dropdown select:hover,\n",
         ".widget-text input[type=\"text\"]:hover {\n",
         "    transform: scale(1.003);\n",
-        "    background-color: #262626;\n",
+        "    background-color: var(--bg-field-color-hover);\n",
         "    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);\n",
         "}\n",
         "\n",
+        ".widget-dropdown option {\n",
+        "    background-color: #1c1c1c;\n",
+        "}\n",
+        "\n",
         "\n",
         "/* Slider Checkbox style */\n",
         "\n",

files_cells/python/en/widgets_en.py

@@ -39,6 +39,7 @@ parser.add_argument('-y', type=int, help='Y coordinate for the image in px', met
 parser.add_argument('-x', type=int, help='X coordinate for the image in px', metavar='', default=0)
 parser.add_argument('-s', '--scale', type=int, help='Scale image in %%', metavar='', default=100)
 parser.add_argument('-m', '--mode', type=str, help='Specify "no-repeat" so that the image pattern is not repeated.', metavar='', default='repeat')
+parser.add_argument('-t', '--transparent', action='store_true', help='Makes input/selection fields 35% more transparent')
 args = parser.parse_args()
 """---"""
 url_img = args.image
@@ -53,10 +54,15 @@ mode_img = args.mode
 fix_heigh_img = "-815px"
 if env == "Google Colab":
     fix_heigh_img = "-775px"
+# transperent fields
+t_bg_alpha = "1"
+if args.transparent:
+    t_bg_alpha = "0.65"
 
 container_background = f'''
 <style>
 :root {{
+  /* for background container*/
   --img_background: url({url_img});
   --img_opacity: {opacity_img};
   --img_blur: {blur_img}px;
@@ -64,7 +70,11 @@ container_background = f'''
   --image_x: {x_img}px;
   --img_scale: {scale_img}%;
   --img_mode: {mode_img};
-  --img_height_dif: {fix_heigh_img}
+  --img_height_dif: {fix_heigh_img};
+
+  /* for fields */
+  --bg-field-color: rgba(28, 28, 28, {t_bg_alpha}); /* -> #1c1c1c */
+  --bg-field-color-hover: rgba(38, 38, 38, {t_bg_alpha}); /* -> #262626; */
 }}
 '''
 
@@ -186,7 +196,7 @@ a {
 .widget-dropdown select,
 .widget-text input[type="text"] {
     height: 30px;
-    background-color: #1c1c1c;
+    background-color: var(--bg-field-color);
     border: 1px solid #262626;
     border-radius: 10px;
     box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
@@ -201,10 +211,14 @@ a {
 .widget-dropdown select:hover,
 .widget-text input[type="text"]:hover {
     transform: scale(1.003);
-    background-color: #262626;
+    background-color: var(--bg-field-color-hover);
     box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
 }
 
+.widget-dropdown option {
+    background-color: #1c1c1c;
+}
+
 
 /* Slider Checkbox style */
 

files_cells/python/ru/widgets_ru.py

@@ -39,6 +39,7 @@ parser.add_argument('-y', type=int, help='Y coordinate for the image in px', met
 parser.add_argument('-x', type=int, help='X coordinate for the image in px', metavar='', default=0)
 parser.add_argument('-s', '--scale', type=int, help='Scale image in %%', metavar='', default=100)
 parser.add_argument('-m', '--mode', type=str, help='Specify "no-repeat" so that the image pattern is not repeated.', metavar='', default='repeat')
+parser.add_argument('-t', '--transparent', action='store_true', help='Makes input/selection fields 35% more transparent')
 args = parser.parse_args()
 """---"""
 url_img = args.image
@@ -53,10 +54,15 @@ mode_img = args.mode
 fix_heigh_img = "-815px"
 if env == "Google Colab":
     fix_heigh_img = "-775px"
+# transperent fields
+t_bg_alpha = "1"
+if args.transparent:
+    t_bg_alpha = "0.65"
 
 container_background = f'''
 <style>
 :root {{
+  /* for background container*/
   --img_background: url({url_img});
   --img_opacity: {opacity_img};
   --img_blur: {blur_img}px;
@@ -64,7 +70,11 @@ container_background = f'''
   --image_x: {x_img}px;
   --img_scale: {scale_img}%;
   --img_mode: {mode_img};
-  --img_height_dif: {fix_heigh_img}
+  --img_height_dif: {fix_heigh_img};
+
+  /* for fields */
+  --bg-field-color: rgba(28, 28, 28, {t_bg_alpha}); /* -> #1c1c1c */
+  --bg-field-color-hover: rgba(38, 38, 38, {t_bg_alpha}); /* -> #262626; */
 }}
 '''
 
@@ -186,7 +196,7 @@ a {
 .widget-dropdown select,
 .widget-text input[type="text"] {
     height: 30px;
-    background-color: #1c1c1c;
+    background-color: var(--bg-field-color);
     border: 1px solid #262626;
     border-radius: 10px;
     box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
@@ -201,10 +211,14 @@ a {
 .widget-dropdown select:hover,
 .widget-text input[type="text"]:hover {
     transform: scale(1.003);
-    background-color: #262626;
+    background-color: var(--bg-field-color-hover);
     box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
 }
 
+.widget-dropdown option {
+    background-color: #1c1c1c;
+}
+
 
 /* Slider Checkbox style */