You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@allura.apache.org by he...@apache.org on 2015/10/30 02:07:13 UTC

[33/48] allura git commit: [#7919] Update stylesheet to support new component markup

[#7919] Update stylesheet to support new component markup


Project: http://git-wip-us.apache.org/repos/asf/allura/repo
Commit: http://git-wip-us.apache.org/repos/asf/allura/commit/d090f659
Tree: http://git-wip-us.apache.org/repos/asf/allura/tree/d090f659
Diff: http://git-wip-us.apache.org/repos/asf/allura/diff/d090f659

Branch: refs/heads/hs/7919
Commit: d090f659ecf0a7635ad080c260ca2c88a45f12e4
Parents: 8d1fda8
Author: Heith Seewald <hs...@hsmb.local>
Authored: Thu Oct 22 15:53:35 2015 -0400
Committer: Heith Seewald <hs...@hsmb.local>
Committed: Thu Oct 29 20:21:39 2015 -0400

----------------------------------------------------------------------
 Allura/allura/public/nf/css/navbar.css | 2856 ++++++++++++++++++++++++---
 1 file changed, 2633 insertions(+), 223 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/allura/blob/d090f659/Allura/allura/public/nf/css/navbar.css
----------------------------------------------------------------------
diff --git a/Allura/allura/public/nf/css/navbar.css b/Allura/allura/public/nf/css/navbar.css
index f3c3336..2cc8798 100644
--- a/Allura/allura/public/nf/css/navbar.css
+++ b/Allura/allura/public/nf/css/navbar.css
@@ -3,11 +3,9 @@
     width: 350px;
     display: none;
 }
-
 .hidden {
     display: none;
 }
-
 .submenu ul {
     list-style: none;
     display: block;
@@ -23,7 +21,6 @@
     z-index: -1000;
     padding-top: 11px;
 }
-
 #bar-config {
     display: inline-flex;
     position: absolute;
@@ -32,14 +29,12 @@
     align-items: stretch;
     flex: 1 1 auto;
 }
-
 #threshold-config > span > input {
     width: 2rem;
     background-color: #A1A1A1;
     color: white;
     font-weight: bold;
 }
-
 #toggle-admin-btn {
     position: absolute;
     right: -9px;
@@ -47,21 +42,18 @@
     width: 2rem;
     height: 1.8rem;
 }
-
 nav {
     display: flex;
     flex-direction: row;
     justify-content: center;
     margin: auto;
 }
-
 #top_nav_admin > div.edit-mode > ul {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     flex: 1;
 }
-
 #top_nav_admin > div.edit-mode > ul > .tb-item {
     background-color: #F0F0F0;
     margin-top: 0.5rem;
@@ -70,11 +62,9 @@ nav {
     border: 1px dashed gray;
     padding: 0.3rem 0.6rem 0.3rem 0.6rem;
 }
-
 .admin-toolbar {
     display: flex;
 }
-
 #top_nav_admin {
     display: grid;
     flex-direction: row;
@@ -85,13 +75,17 @@ nav {
     -ms-border-radius: 4px;
     -khtml-border-radius: 4px;
     border-radius: 4px;
-    width: 918px;  /* 940px - 32px for toggle-admin-btn */
+    width: 918px;
+    /* 940px - 32px for toggle-admin-btn */
 }
-
 #top_nav_admin .edit-mode .fa {
     margin: 0 3px;
+    margin-left: 0;
+    padding: 2px;
+    padding-left: 1px;
+    /* font-size: large; */
+    color: #595959;
 }
-
 .btn-bar {
     display: block;
     clear: both;
@@ -108,7 +102,6 @@ nav {
     position: relative;
     margin: 0 0 20px;
 }
-
 ul.dropdown li {
     float: left;
     vertical-align: middle;
@@ -116,21 +109,17 @@ ul.dropdown li {
     padding-top: 10px;
     padding-bottom: 10px;
 }
-
 ul.dropdown, ul.dropdown li, ul.dropdown ul {
     list-style: none;
     margin: 0;
     padding: 0;
 }
-
 li.tb-item-edit > input {
     width: 2.2rem;
 }
-
 .draggable-handle {
     cursor: move;
 }
-
 ul.dropdown li {
     float: left;
     vertical-align: middle;
@@ -138,35 +127,38 @@ ul.dropdown li {
     padding-top: 10px;
     padding-bottom: 10px;
 }
-
 #content {
     width: 990px;
 }
-
 .react-reorderable-item {
     display: inline-flex;
     float: left;
+    text-align: left;
 }
-
 .react-reorderable-item-active {
     border: 3px dashed #9e9e9e;
     background: #c9c9c9;
-    width: 5rem; /* dynamic would be nice */
+    width: 5rem;
+    /* dynamic would be nice */
     height: 50px;
 }
-
 .react-reorderable-item-active div {
     display: none;
 }
-
 .react-reorderable-handle {
     position: absolute;
 }
-
 #top_nav_admin .tb-item a {
     margin: 10px;
+    text-align: left;
+    display: inline-block;
+    padding-right: 10px;
+    padding-left: 10px;
+    margin-right: 5px;
+    border: 2px solid #8C8C8C;
+    /* border-right: 2px solid #8C8C8C; */
+    border-radius: 3px;
 }
-
 .react-drag {
     -webkit-user-select: none;
     -moz-user-select: none;
@@ -174,7 +166,6 @@ ul.dropdown li {
     -o-user-select: none;
     user-select: none;
 }
-
 ul.dropdown ul {
     visibility: hidden;
     position: absolute;
@@ -184,234 +175,2653 @@ ul.dropdown ul {
     border: 1px solid #dddddd;
     border-top-width: 0;
 }
-
 ul.dropdown .hover, ul.dropdown li:hover {
     position: relative;
     z-index: 599;
     cursor: default;
 }
-
 .anchored {
     cursor: not-allowed;
     color: gray;
 }
-
+.nav_admin {
+    height: auto;
+}
+.nav_admin > div > ul > li {
+    height: 1.2rem;
+    font-weight: inherit;
+}
 .tool-partition {
     height: 0;
-    margin-top: 5px;
-    border-top: 3px solid #777;
+    /*padding-top: 5px;*/
+    /* border-top: 3px solid #777; */
 }
-
 .installable-tool-box {
-    list-style: none;
-    display: flex;
-    background-color: #FFFEFA;
-    flex-wrap: wrap;
-    justify-content: space-around;
-    margin-left: 0;
-    margin-bottom: 8px;
-    margin-top: -8px;
-}
+    /* position: relative; */
+    display: inlin-f;
+    min-height: 289px;
+    align-content: center;
+    border-right: 1px solid #9D9D9D;
+    background-color: yellow;
+    background-image:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
-.installable-tool-box li {
-    margin-top: 15px;
-    height: auto;
-    border-radius: 4px;
-    padding: 10px;
-    text-align: center;
-    font-size: medium;
-    list-style: none;
-    cursor: pointer;
-    border: 1px solid transparent;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    -o-user-select: none;
-    user-select: none;
-}
-.selected-tool{
-    background: #09C;
-    color: white;
-}
 
-.installable-tool-box li:hover {
-    background: white;
-    border: 1px solid #09C;
-}
 
-.installable-tool-box li.selected-tool:hover {
-    background: white;
-    color: rgb(85, 85, 85);
-}
 
-.tool-card {
-    width: 600px;
-    display: block;
-    border: 2px solid #4E4E4E;
-    border-radius: 2px 2px 5px 5px;
-    overflow-y: visible;
-    margin-bottom: 50px;
-    background: white;
-    right: 161px;
-    top: 83px;
-    position: absolute;
-    z-index: 1000;
-}
 
-.tool-card::before {
-    content: "▲";
-    color: #4E4E4E;
-    font-size: xx-large;
-    position: absolute;
-    right: 0px;
-    top: -14px;
-    overflow: visible;
-    float: right;
-    height: 1.5rem;
-}
 
-.box-title {
-    z-index: 60;
-    height: auto;
-    font-size: small;
-    text-align: center;
-    padding-bottom: 3px;
-    position: relative;
-    padding-top: 3px;
-    background: #4E4E4E;
-    color: #DEDEDE;
-}
 
-.tool-info {
-    min-height: 15rem;
-    display: block;
-    clear: both;
-}
 
-.tool-info-left p {
-    text-align: center;
-    vertical-align: text-top;
-    padding-top: 0;
-    left: 0;
-    font-size: large;
-    font-weight: 400;
-    margin: 2rem 33px;
-    color: #CCCBC8;
-    padding-bottom: 20px;
-}
 
-.tool-info-left h1 {
-    text-align: center;
-    padding-bottom: 0;
-    vertical-align: text-top;
-    padding-top: 18px;
-    left: 0;
-    font-size: large;
-    background-color: #AEF4FF;
-    color: #5B5B5B;
-    height: 3rem;
-}
 
-.add-tool-button {
-    width: 140px;
-    height: auto;
-    background: white;
-    min-width: 6rem;
-    min-height: 2.6rem;
-    font-size: large;
-    bottom: -0.3rem;
-    right: -30px;
-}
 
-.tool-info-left {
-    background: #636363;
-    width: 60%;
-    height: 260px;
-    left: 0;
-    float: left;
-    top: 0;
-    color: white;
-}
 
-.tool-info-right {
-    width: 40%;
-    float: right;
-    overflow: hidden;
-    position: relative;
-    display: block;
-    top: 0;
-}
 
-.tool-form {
-    display: inline-block;
-    width: 100%;
-    position: absolute;
-    right: 0;
-    top: 0;
-    padding-top: 1rem;
-    height: auto;
-}
 
-#add-tool-form > label{
-    padding: 0;
-    font-size: 13pt;
-    position: absolute;
-    margin-left: 18px;
-}
 
-#add-tool-form > p{
-    font-size: large;
 
-}
 
-#add-tool-form > input {
-    padding-top: 10px;
-    padding-left: 10px;
-    width: 77%;
-    margin: 23px 60px 11px 19px;
-}
 
-#add-tool-form{
-    padding-top: 20px;
-    padding-left: 25px;
-    padding-right: 25px;
-}
 
-.tool-form-fields{
-    clear: both;
-    position: relative;
-    display: flex;
-    flex-direction: row;
-}
 
-#mount_point :invalid{
-    background: #333;
-}
 
-.add-tool-toggle{
-    background: rgba(255, 255, 255, 0.32);
-    clear: both;
-    float: right;
-    color: #B3B3B3;
-    font-weight: 900;
-    margin: 1px;
-    right: 127px;
-    position: absolute;
-    padding: 5px 5px 3px;
-    border: 2px dashed #B3B3B3;
-    top: 18px;
-    width: 5.7rem;
-    border-radius: 4px;
-    height: 1.5rem;
-    cursor: pointer;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    -o-user-select: none;
-    user-select: none;
-}
-.add-tool-toggle:hover{
-    background: #F4F4F4;
-    color: #777;
-}
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #ffffff), color-stop(100%, #cccccc));
+    background-image:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    -moz-linear-gradient(top, #ffffff 0%, #cccccc 100%);
+    background-image: linear-gradient(top, #ffffff 0%, #cccccc 100%);
+    /* flex-wrap: wrap; */
+    flex-direction: column;
+    /* justify-content: flex-start; */
+    justify-content: space-around;
+    padding-bottom: 2.2rem;
+    width: 100%;
+    /* -webkit-flex-direction: row; */
+    /* flex-direction: column; */
+    /*margin-bottom: 8px;*/
+    /* min-height: 280px; */
+}
+.installable-tool-box div {
+    /* margin-top: 0.5rem; */
+    margin-left: 0;
+    /* height: auto; */
+    border-radius: 4px;
+    padding: 10px;
+    text-align: right;
+    font-size: medium;
+    list-style: none;
+    cursor: pointer;
+    /*align-items: flex-start;*/
+    min-width: 10%;
+    border: 1px solid transparent;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+    border-radius: 0 4px 4px 0;
+}
+
+/*.installable-tool-box > div{
+    color:blue;
+    background: rgba(255, 255, 255, 0.8);
+    min-width: 75px;
+    border: 1px dashed orange;
+}*/
+
+.installable-tool-box div:hover {
+    background: white;
+    border: 1px solid rgb(0, 153, 204);
+    border: 1;
+}
+.selected-tool {
+    background: rgba(0, 153, 243, 0.8) !important;
+    color: white !important;
+    box-shadow: 3px 3px 2px #ABABAB !important;
+    font-weight: bold;
+}
+.installable-tool-box div.selected-tool:hover {
+    background: white;
+    color: rgb(85, 85, 85);
+}
+.tool-card {
+    width: 447px;
+    height: 345px;
+    display: block;
+    border: 2px solid #5B5B5B;
+    box-shadow: 7px 5px 21px rgba(68, 68, 68, 0.58);
+    border-radius: 2px 2px 5px 5px;
+    overflow: inherit;
+    margin-bottom: 50px;
+    background: rgb(255, 255, 255);
+    right: 20px;
+    position: absolute;
+    background-image:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #ffffff), color-stop(100%, rgba(233, 233, 233, 0.67)));
+    z-index: 1000;
+    background-image: linear-gradient(top, #ffffff 0%, #cccccc 100%);
+    -webkit-gradient(
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    linear, 0% 0%, 0% 100%,
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    color-stop(0%, #ffffff),
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    color-stop(100%, #cccccc));
+    background-image:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    -moz-linear-gradient(top, #ffffff 0%, #cccccc 100%);
+    background-image: linear-gradient(top, #ffffff 0%, #cccccc 100%);
+}
+.tool-card::before {
+    content: "â–²";
+    color: #4E4E4E;
+    font-size: xx-large;
+    position: absolute;
+    right: 0px;
+    top: -14px;
+    overflow: visible;
+    float: right;
+    height: 1.5rem;
+}
+.box-title {
+    z-index: 60;
+    height: auto;
+    font-size: small;
+    text-align: center;
+    padding-bottom: 3px;
+    position: relative;
+    /* padding-top: 3px; */
+    background: #4E4E4E;
+    color: #DEDEDE;
+    background-image:
+
+
+
+
+
+
+
+
+    -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #555), color-stop(100%, #666));
+    background-image:
+
+
+
+
+
+
+
+
+    -moz-linear-gradient(top, #666 0%, #555 100%);
+    background-image: linear-gradient(top, #666 0%, #555 100%);
+}
+.tool-info {
+    min-height: 22rem;
+    /* display: block; */
+    width: 72%;
+    float: right;
+    /* clear: both; */
+}
+.tool-info-left p {
+    text-align: center;
+    vertical-align: text-top;
+    padding-top: 0;
+    left: 0;
+    font-size: small;
+    font-kerning: 81;
+    font-weight: 100;
+    min-height: 70px;
+    margin: 1.5rem 23px;
+    margin-top: 0;
+    color: #FFFFFF;
+    padding-bottom: 0px;
+}
+.tool-info-left h1 {
+    text-align: center;
+    padding-bottom: 0;
+    vertical-align: text-top;
+    padding-top: 8px;
+    left: 0;
+    font-size: large;
+    /* background-color: #AEF4FF; */
+    color: #5B5B5B;
+    height: 2.6rem;
+    box-shadow: 3px 2px 5px rgba(34, 34, 34, 0.56);
+}
+.add-tool-button {
+    width: 109px;
+    height: auto;
+    background: white;
+    min-width: 6rem;
+    position: absolute;
+    min-height: 2.1rem;
+    margin-top: 5px;
+    font-size: large;
+    /* bottom: -2.3rem; */
+    overflow: visible;
+    right: 0px;
+    bottom: -29px;
+}
+.tool-info-left {
+    background: rgb(98, 98, 98);
+    /* width: 75%; */
+    position: relative;
+    /* float: right; */
+    /* display: inline-block; */
+    height: auto;
+    /* box-shadow: 0px 1px 5px darkgray; */
+    /* left: 0; */
+    /* border-left: 1px solid #B3B3B3; */
+    /* float: right; */
+    /* top: 0; */
+    color: white;
+}
+.tool-info-right {
+    /* width: 100%; */
+    /* float: right; */
+    /* overflow: hidden; */
+    /* display: inline-grid; */
+    /* flex-direction: column; */
+    /* float: right; */
+    /* position: relative; */
+    /* left: 50px; */
+    /* display: block; */
+    top: 0;
+    /* align-content: center; */
+    height: auto;
+    position: relative;
+    top: -9px;
+}
+.tool-form {
+    display: inline-block;
+    width: 100%;
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding-top: 1rem;
+    /*height: auto;*/
+}
+#add-tool-form > label {
+    /* padding: 0; */
+    font-size: 8pt;
+    /* position: relative; */
+    /* left: -128px; */
+    /* top: 27px; */
+    /* margin-left: 18px; */
+    color: grey;
+}
+#add-tool-form > p {
+    font-size: large;
+}
+#add-tool-form > input {
+    /* padding-top: 10px; */
+    /* padding-left: 10px; */
+    /* position: relative; */
+    /* width: 60%; */
+    /* display: inline-flex; */
+    float: left;
+    /* flex-wrap: wrap; */
+    width: 100px;
+    margin-left: 4px;
+    margin-right: 20px;
+}
+#add-tool-url-preview {
+    font-size: 10pt;
+    position: relative;
+    right: 143px;
+    top: 43px;
+    height: 20px;
+    padding-bottom: 0;
+    margin-bottom: 0;
+}
+#add-tool-form {
+    padding-top: 0;
+    margin-top: 0;
+    display: flex;
+    flex-direction: row;
+    width: 95%;
+    /* align-items: center; */
+    padding-left: 0;
+    /* padding-right: 25px; */
+    /* height: 80px; */
+    align-content: center;
+    /* float: left; */
+}
+.tool-form-fields {
+    clear: both;
+    position: relative;
+    display: flex;
+    flex-direction: row;
+}
+#mount_point:invalid {
+    /* background: #333; */
+}
+.add-tool-toggle {
+    background: rgba(255, 255, 255, 0.32);
+    /* clear: both; */
+    color: #8b8b8b;
+    /* font-weight: bold; */
+    /* margin: 1px; */
+    /*position: relative;*/
+    /* right: 127px; */
+    /* position: absolute; */
+    /*padding: 5px 5px 3px;*/
+    border: 1px dashed #B3B3B3;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    /* top: 18px; */
+    height: 100%;
+    width: 5.7rem;
+    float: right;
+    border-radius: 4px;
+    /*height: 1.5rem;*/
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+}
+.add-tool-toggle:hover {
+    background: #F4F4F4;
+    color: #777;
+}
+.active-nav-link {
+    font-weight: bolder;
+}
+.menu-appear {
+    opacity: 0.01;
+}
+.example-appear.example-appear-active {
+    opacity: 1;
+    transition: opacity .5s ease-in;
+}
+#installable-items {
+    position: initial;
+    left: 0px;
+    float: left;
+    width: 28%;
+}
+
+.error-box{
+    background: rgba(255, 165, 0, 0.54);
+    color: white;
+    padding: 4px;
+    font-weight: bold;
+    position: absolute;
+    top: 66px;
+    width: 146px;
+    box-shadow: 0px 1px 1px #8E8E8E;
+    /* left: 17px; */
+    border-radius: 4px;
+    font-size: 9pt;
+    float: left;
+}
+#add-tool-url-preview{
+    /* float: right; */
+}
+
+#add-tool-url-preview > p > small {
+    color: grey;
+}
+
+#add-tool-url-preview > p > strong {
+    color: orange;
+}
+
+.add-tool-field{
+    width: 50%;
+    min-height: 137px;
+}