scripts/template/styles.css

0001 .app{
0002     font-family: monospace;
0003     text-align: center;
0004 }
0005
0006 .app h1{
0007     font-size: 40px;
0008 }
0009
0010 .svg-form{
0011     text-align: center;
0012     align-items: center;
0013 }
0014
0015 .form-item{
0016     display: inline-block;
0017     border-color: white;
0018     background-color: transparent;
0019     font-size: 16px;
0020     font-weight: 1000;
0021     margin: 8px;
0022     max-width: 1000px;
0023     height: 20px;
0024 }
0025
0026 .form-item label {
0027     border-radius: 10px;
0028     user-select: none;
0029     cursor: pointer;
0030 }
0031
0032 .form-item label span {
0033     text-align: center;
0034     padding: 3px 3px;
0035     display: block;
0036     border-radius: 10px;
0037     border: grey;
0038     border: solid;
0039     border-width: 2px;
0040 }
0041
0042 .form-item label input {
0043     display: none;
0044 }
0045
0046 .form-item input:checked + span{
0047     background: linear-gradient(
0048         45deg,
0049         rgba(24, 67, 90, 0.8),
0050         rgba(88, 12, 31, 0.8) 100%
0051       );
0052   color: white;
0053 }
0054
0055 .apply-button{
0056     border: 10px;
0057     margin: 20px;
0058     padding: 10px;
0059     font-family: monospace;
0060 }
0061
0062 .result-div{
0063     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
0064     height: 40%;
0065     width: 40%;
0066     display: inline-block;
0067     cursor: grab;
0068 }
0069
0070 .result-div svg g{
0071     cursor: pointer;
0072 }
0073
0074 .tooltip {
0075   font-size: 16px;
0076   position: relative;
0077   display: inline-block;
0078   border-bottom: 1px dotted black;
0079 }
0080
0081 .tooltip span {
0082   width: 300px;
0083   visibility: hidden;
0084   background-color: black;
0085   color: #fff;
0086   text-align: center;
0087   border-radius: 2px;
0088   padding: 8px;
0089   position: absolute;
0090   z-index: 1;
0091 }
0092
0093 .tooltip:hover span {
0094   visibility: visible;
0095 }