<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="index.css" rel="stylesheet"/>
    <link href="css/tabbedComponent.css" rel="stylesheet"/>
    <title>Custom Theme Generator for Mapcomplete</title>

    <style type="text/css">

        img {
            min-width: 35px;
            min-height: 35px;
        }
        
        input{
            border: 0.5px solid #939393;
        }
        
        .icon-preview {
            max-width: 2em;
            max-height: 2em ;
        }
        
        .image-large-preview {
            max-width: 100%;
            max-height: 30vh;
        }
        
        .json{
            width:100%;
            box-sizing: border-box;
        }
        
        .bordered {
            border: 1px solid black;
            display:block;
            padding: 0.5em;
            border-radius: 0.5em;
            box-sizing: border-box;
        }

        .tag-input-row {
            display: block ruby;
            box-sizing: border-box;
            margin-right: 2em;
            width: calc(100% - 3em);
            padding-right: 0.5em;
            height: min-content;
        }
        
        .min-height {
            display: block;
            height: min-content;
        }

        .main-tabs{
            height: 100vh;
        }
        
        .tab-content {
            padding-top: 0;
            padding-bottom: 0;
            padding-left: 0;
            margin-left: 0.5em;
        }
        
        .main-tabs > .tabs-header-bar {
            background: #eee;
        }


        .scrollable {
            display: block;
            overflow-y: scroll;
            height: calc(100vh - 9em - 10px);
        }

        .main-tabs > .tab-content {
            display: block;
            height: 100%;
            padding-bottom: 0 ;
            padding-right: 0;
        }

        .main-tabs > .tab-content  > span{
            display: block;
            height: 100%;
        }
        
        body {
            height: 100%;
        }
        
        #maindiv {
            height: calc(100% - 6em);
        }
    </style>


</head>
<body>
<div id="maindiv">
    Loading the MapComplete custom theme builder...<br/>
    If this message persists, make sure javascript is enabled and no script blocker is blocking this.
</div>
<script src="./customGenerator.ts"></script>
</body>
</html>