{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: custom_css"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "css = \"\"\"\n", "/* CSSKeyframesRule for animation */\n", "@keyframes animation {\n", "    from {background-color: red;}\n", "    to {background-color: blue;}\n", "}\n", "\n", ".cool-col {\n", "    animation-name: animation;\n", "    animation-duration: 4s;\n", "    animation-iteration-count: infinite;\n", "    border-radius: 10px;\n", "    padding: 20px;\n", "}\n", "\n", "/* CSSStyleRule */\n", ".markdown {\n", "    background-color: lightblue;\n", "    padding: 20px;\n", "}\n", "\n", ".markdown p {\n", "    color: royalblue;\n", "}\n", "\n", "/* CSSMediaRule */\n", "@media screen and (max-width: 600px) {\n", "    .markdown {\n", "        background: blue;\n", "    }\n", "    .markdown p {\n", "        color: lightblue;\n", "    }\n", "}\n", "\n", ".dark .markdown {\n", "    background: pink;\n", "}\n", "\n", ".darktest h3 {\n", "    color: black;\n", "}\n", "\n", ".dark .darktest h3 {\n", "    color: yellow;\n", "}\n", "\n", "/* CSSFontFaceRule */\n", "@font-face {\n", "    font-family: \"test-font\";\n", "    src: url(\"https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf\") format(\"truetype\");\n", "}\n", "\n", ".cool-col {\n", "    font-family: \"test-font\";\n", "}\n", "\n", "/* CSSImportRule */\n", "@import url(\"https://fonts.googleapis.com/css2?family=Protest+Riot&display=swap\");\n", "\n", ".markdown {\n", "  font-family: \"Protest Riot\", sans-serif;\n", "}\n", "\"\"\"\n", "\n", "with gr.Blocks(css=css) as demo:\n", "    with gr.Column(elem_classes=\"cool-col\"):\n", "        gr.Markdown(\"### Gradio Demo with Custom CSS\", elem_classes=\"darktest\")\n", "        gr.Markdown(elem_classes=\"markdown\", value=\"Resize the browser window to see the CSS media query in action.\")\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}