diff options
| author | Nick Colletti <gnomish@gmail.com> | 2020-01-21 12:22:20 -0500 |
|---|---|---|
| committer | Nick Colletti <gnomish@gmail.com> | 2020-01-21 12:22:20 -0500 |
| commit | 41642f22cd11345029b18802e52b782965e3e474 (patch) | |
| tree | b5cfb47b7d08efce761ce11367b825efed55ad6b | |
| parent | 5a52a13850607443d8f76ecad92e498a66d13166 (diff) | |
added groupings checkbox. styled.
| -rw-r--r-- | css/redirector.css | 77 | ||||
| -rw-r--r-- | redirector.html | 19 |
2 files changed, 83 insertions, 13 deletions
diff --git a/css/redirector.css b/css/redirector.css index 34ecaa3..a85311f 100644 --- a/css/redirector.css +++ b/css/redirector.css @@ -258,6 +258,65 @@ a.disabled:hover, button[disabled]:hover { background:white !important; } +/* Toggle Grouping Checkbox */ +.toggle-container { + display: block; + position: absolute; + top: 8%; + right: 5%; + cursor: pointer; + font-size: 22px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.toggle-container input { + position: absolute; + opacity: 0; + cursor: pointer; + height: 0; + width: 0; +} + +.checkmark { + position: absolute; + height: 15px; + width: 15px; + background-color: #eee; +} + +.toggle-container:hover input ~ .checkmark { + background-color: #ccc; +} + +.toggle-container input:checked ~ .checkmark { + background-color: #2196F3; +} + +.checkmark:after { + content: ""; + position: absolute; + display: none; +} + +.toggle-container input:checked ~ .checkmark:after { + display: block; +} + +.toggle-container .checkmark:after { + left: 4px; + top: -1px; + width: 4px; + height: 9px; + border: solid white; + border-width: 0 3px 3px 0; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); +} + /* Popup form for deleting redirects */ #delete-redirect-form { @@ -312,8 +371,8 @@ a.disabled:hover, button[disabled]:hover { } .blur { - -webkit-filter:blur(3px); - filter:blur(3px); + -webkit-filter:blur(3px); + filter:blur(3px); } #edit-redirect-form { @@ -353,7 +412,7 @@ a.disabled:hover, button[disabled]:hover { .input-cell { padding-top:1px; -} +} .form-grid div input[type='text'] { width:510px; @@ -404,7 +463,7 @@ a.disabled:hover, button[disabled]:hover { } ::-moz-placeholder { /* Firefox 19+ */ - color: #c0c0c0; + color: #c0c0c0; } .advanced { @@ -509,10 +568,10 @@ footer small a:hover { .redirect-row:nth-child(odd) { background: rgb(31,32,35); - } + } .redirect-row:nth-child(even) { background: rgb(41,42,45); - } + } .btn { background-color: rgb(32,33,36); @@ -527,6 +586,10 @@ footer small a:hover { color: rgb(53,180,75); } + .toggle { + background-color: #ccc; + } + #message-box.success { background-color: rgb(53,203,75);; } @@ -590,7 +653,7 @@ footer small a:hover { } .example-result-error { - color:rgb(252,87,84) !important; + color:rgb(252,87,84) !important; } #edit-redirect-form input { diff --git a/redirector.html b/redirector.html index af11b6b..f0f73c4 100644 --- a/redirector.html +++ b/redirector.html @@ -10,7 +10,7 @@ <body> <div id="cover"> </div> - + <!-- Confirmation form for deleting redirects --> <div id="delete-redirect-form"> <h3>Are you sure you want to delete this redirect?</h3> @@ -39,7 +39,7 @@ <button id="cancel-delete" class="btn grey large">No, don't delete it</button> </div> </div> - + <!-- Form for creating and editing redirects --> <div id="edit-redirect-form"> @@ -124,20 +124,20 @@ <div id="blur-wrapper"> - + <h1>REDIRECTOR</h1> <h5>Go where <em>YOU</em> want!</h5> <div id="menu"> <a id="create-new-redirect" class="btn blue large">Create new redirect</a> - + <!-- Importing/Exporting of redirects --> <span> <input type="file" id="import-file" accept=".rjson,.json,.txt" /> <label for="import-file" class="btn blue large">Import</label> <a class="btn blue large" id="export-link" download="Redirector.json">Export</a> </span> - + <a class="btn blue large" href="help.html" target="_blank">Help</a> </div> @@ -151,6 +151,13 @@ <div class="redirect-table"> <div class="redirect-rows"> <div class="redirect-row" id="redirect-row-template" > + <!-- <div class="toggle-container"> --> + <!-- <input class="checkmark small gray" type="checkbox" data-action="toggleGroup"> --> + <!-- </div> --> + <label class="toggle-container"> + <input type="checkbox" checked="checked"> + <span class="checkmark"></span> + </label> <h4><span class="disabled-marker" data-show="disabled">[Disabled] </span><span data-bind="description" data-class="disabled:disabled"></span></h4> <div class="redirect-info" data-class="disabled:disabled"> <div> @@ -189,7 +196,7 @@ <footer> <small>Redirector is created by <a target="_blank" href="http://einaregilsson.com">Einar Egilsson</a></small> </footer> - + </div> <script src="js/stub.js"></script> |