Stylized button, and UUID input field

This commit is contained in:
2023-02-27 11:31:29 +01:00
parent 44037e3f37
commit 2945794859
4 changed files with 22 additions and 7 deletions

View File

@@ -1,7 +1,8 @@
@import url('https://necolas.github.io/normalize.css/8.0.1/normalize.css'); @import url('https://necolas.github.io/normalize.css/8.0.1/normalize.css');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('r11addons.css'); @import url('r11addons.css');
@import url('r11tables.css'); @import url('r11tables.css');
@import url('r11tool.css'); @import url('r11tool.css');
@import url('r11tooltip.css'); @import url('r11tooltip.css');
@import url('r11modal.css'); @import url('r11modal.css');
@import url('r11flexbox.css') @import url('r11flexbox.css')

View File

@@ -69,4 +69,4 @@
.content p { .content p {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }

View File

@@ -2,4 +2,21 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: stretch; align-items: stretch;
position: relative;
}
#uuid-flex-container .uuid-inputField-icon{
font-size: medium;
position: absolute;
top: 0;
right: 0;
margin-right: 41%;
margin-top: 1%;
background: none;
color: black;
border: 0;
}
.uuid-inputField-icon-span {
font-size: x-large;
} }

View File

@@ -7,7 +7,6 @@
<link rel="stylesheet" href="../css/main.css" type="text/css"> <link rel="stylesheet" href="../css/main.css" type="text/css">
<!-- <link rel="stylesheet" href="css/common.css" type="text/css"> --> <!-- <link rel="stylesheet" href="css/common.css" type="text/css"> -->
<link rel="stylesheet" href="../css/common.css" type="text/css"> <link rel="stylesheet" href="../css/common.css" type="text/css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,1,0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- <script src="../js/dyn_host.js"></script> --> <!-- <script src="../js/dyn_host.js"></script> -->
</head> </head>
@@ -22,12 +21,10 @@
<label for="uuid-input" class="block-display">UUID</label> <label for="uuid-input" class="block-display">UUID</label>
<div id="uuid-flex-container"> <div id="uuid-flex-container">
<input id="uuid-input" disabled class="bordered-field flex-item with-padding diabled-background" value="UUID" style="margin-bottom:2%; width: 60%;"/> <input id="uuid-input" disabled class="bordered-field flex-item with-padding diabled-background" value="UUID" style="margin-bottom:2%; width: 60%;"/>
<button class="modification-button flex-item btn-copy action-button"> <button class="uuid-inputField-icon modification-button flex-item btn-copy action-button">
<span class="material-symbols-outlined">content_copy</span> <span class="material-icons uuid-inputField-icon-span ">content_copy</span>
</button> </button>
</div> </div>
</br>
<label for="editable">Editable</label> <label for="editable">Editable</label>
<input type="checkbox" name="editable" id="editable" value="false"/> <input type="checkbox" name="editable" id="editable" value="false"/>
</div> </div>