[feature] API docs theme #197

Closes #197
openwisp · Feb 12, 2022 · ae5df39 · ae5df39
1 parent ac227f6
commit ae5df39
Show file tree

Hide file tree

Showing 4 changed files with 425 additions and 0 deletions.
diff --git a/openwisp_utils/admin_theme/static/drf-yasg/ow-drf-yasg.css b/openwisp_utils/admin_theme/static/drf-yasg/ow-drf-yasg.css
@@ -0,0 +1,193 @@
+/************
+* Scrollbar
+************/
+:root {
+  scrollbar-color: #777 #f1f1f1 !important;
+}
+body::-webkit-scrollbar {
+  width: 12px;
+}
+::-webkit-scrollbar {
+  width: 5px;
+}
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+::-webkit-scrollbar-thumb {
+  background: #777;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #333;
+}
+
+
+/* LOGO */
+#swagger-ui > section > div.topbar > div > div > a > img{
+  content: url(../ui/openwisp/images/openwisp-logo-black.svg);
+  width: 165px;
+  height: 95px;
+}
+
+/* TOPBAR */
+.swagger-ui .topbar {
+  padding: 10px 0;
+  background-color: #f9f9f9;
+  border-bottom: 1px solid #eee;
+}
+.swagger-ui .topbar .download-url-wrapper input[type=text] {
+  border-color: rgb(0, 0, 0);
+}
+.swagger-ui .topbar .download-url-wrapper input[type=text]:focus{
+  border: 3px solid rgb(0, 0, 0);
+}
+
+/* EXPLORE BTN */
+.swagger-ui .topbar .download-url-wrapper .download-url-button{
+  background: #333;
+  font-size: 15px;
+  font-weight: normal;
+  text-transform: uppercase;
+}
+.swagger-ui .topbar .download-url-wrapper .download-url-button:hover{
+  background: #999;
+}
+
+/* SCHEMES */
+.swagger-ui select{
+  border-color: #ccc;
+}
+.swagger-ui .info a {
+  color: #df5d43;
+}
+.swagger-ui .info a:hover, 
+.swagger-ui .info a:visited{
+  color: #D32F2F;
+}
+
+/* AUTH LABEL */
+.label-primary {
+  color: #df5d43;
+  background-color: #ffe5e5;
+}
+
+/* AUTH BTN */
+#django-session-auth .btn.authorize a {
+  color: #fff;
+  text-decoration: none;
+}
+
+/* LOGOUT BTN */
+#django-session-auth > div.btn.authorize{
+  background-color: #333;
+  border: 0;
+}
+#django-session-auth > div.btn.authorize:hover{
+  background-color: #999;
+}
+.swagger-ui .btn.authorize svg {
+  fill: #fff;
+}
+
+/* AUTH BTN */
+.swagger-ui .btn.authorize {
+  color: #fff;
+  border: 0;
+  background-color: #df5d43;
+}
+.swagger-ui .btn.authorize:hover {
+  background-color: #b31e00;
+}
+.swagger-ui .btn.authorize span {
+  padding: 5px 10px 1px 0;
+}
+
+/* LOGOUT & CLOSE BTN */
+.swagger-ui .btn{
+  color: #fff;
+  border: 0;
+  background-color: #333;
+  font-size: 13px;
+  line-height: 20px;
+  text-transform: uppercase;
+  font-weight: normal;
+  margin: 0 5px;
+  font-family: "Roboto","Lucida Grande","DejaVu Sans","Bitstream Vera Sans",Verdana,Arial,sans-seri;
+}
+.swagger-ui .btn:hover{
+  background-color: #999;
+}
+
+
+/* OPBLOCK */
+
+.swagger-ui .opblock-tag.no-desc{
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  padding-left: 26px;
+}
+.swagger-ui .opblock-tag.no-desc span:hover{
+  background: #fdf2f2f2;
+  color: #df5d43;
+}
+.swagger-ui .opblock-tag:hover .nostyle > span{
+  background-color: #fdf2f2f2;
+  color: #df5d43;
+}
+.swagger-ui .opblock-tag:hover{
+  background-color: #fdf2f2f2;
+}
+.swagger-ui .download-contents {
+  width: 89px;
+  font-size: 13px;
+  right: 5px;
+  padding-top: 7px;
+}
+
+/* OPBLOCK EXECUTE */
+
+.swagger-ui .btn.cancel {
+  border: 0;
+  color: #fff;
+  background-color: #333;
+}
+.swagger-ui .btn.cancel:hover{
+  background-color: #999;
+}
+.swagger-ui .btn.execute {
+  border: 0;
+  color: #fff;
+  background-color: #333;
+}
+.swagger-ui .btn.execute:hover{
+
+  background-color: #999;
+}
+
+/* MODELS */
+
+.swagger-ui section.models .model-container {
+  background: #f6f6f9;
+}
+.swagger-ui section.models .model-container:hover{
+  background: #fdf2f2f2;
+  color: #df5d43;
+}
+.swagger-ui .model-title:hover{
+  color: #df5d43;
+}
+.swagger-ui section.models .model-container.is-open:hover{
+  background: #fdf2f2f2;
+  color: #df5d43;
+}
+.swagger-ui .prop-type {
+  color: #df5d43;
+}
+.swagger-ui section.models .model-container:hover .model-box>.pointer>.model-box>.model-title{
+  color: #df5d43;
+}
+.swagger-ui section.models .model-container:hover .model-box>.pointer>.model-toggle .collapsed{
+  color: #df5d43;
+}
+#swagger-ui > section > div.swagger-ui > div > div > section > section > h4:hover{
+  background: #fdf2f2f2;
+  color: #df5d43;
+}
diff --git a/openwisp_utils/admin_theme/static/rest_framework/css/browsable-api.css b/openwisp_utils/admin_theme/static/rest_framework/css/browsable-api.css
@@ -11,3 +11,138 @@
   content: "\a";
   white-space: pre;
 }
+
+/* OW ADMIN THEME CSS */
+
+/************
+* Scrollbar
+************/
+:root {
+  scrollbar-color: #777 #f1f1f1 !important;
+}
+body::-webkit-scrollbar {
+  width: 12px;
+}
+::-webkit-scrollbar {
+  width: 5px;
+}
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+::-webkit-scrollbar-thumb {
+  background: #777;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #333;
+}
+body{
+  background: none;
+  background-attachment: initial;
+}
+.navbar {
+  background: #fff;
+  padding-top: 10px;
+  padding-bottom: 0;
+  color: #777;
+  border: 0;
+  position: static;
+  border-bottom: 1px solid #eee;
+}
+.navbar .nav li, .navbar .nav li a{
+  margin-top: 30px;
+  color: #000;
+  background-color: rgba(0, 0, 0, 0.1);
+  font-weight: bold;
+  padding: 0.4em 0.9em 0.5em;
+  text-align: center;
+  border-radius: 0.25em;
+}
+.navbar-brand>img{
+  width: 165px;
+  height: 95px;
+  margin-left: 15px;
+  margin-bottom: 100px;
+}
+.navbar-brand{
+  width: 185px;
+  height: 105px;
+  margin: 0;
+  padding: 0;
+}
+ul.breadcrumb {
+  margin: 90px 0 0 0;
+}
+ul.breadcrumb{
+  display: none;
+}
+.str, .atv {
+  color: #f7745a;
+  font-weight: bold; 
+}
+.kwd, .prettyprint .tag {
+  color: #333;
+  font-weight: bold; 
+}
+.lit {
+  color: #333;
+  font-weight: bold; 
+}
+.pun, .opn, .clo {
+  color: #333;
+  font-weight: bold;
+}
+.pln {
+  color: #333;
+  font-weight: bold;
+}
+.btn-primary {
+  color: #fff;
+  background-color: #333;
+  border: 0;
+}
+.btn-primary:hover {
+  color: #fff;
+  background-color: #999;
+  border: 0;
+}
+.btn-primary.active, .btn-primary:active, .open>.dropdown-toggle.btn-primary {
+  color: #fff;
+  background-color: #333 !important;
+  background-image: none;
+  border: 0;
+}
+.dropdown-menu>li>a {
+  color: #777;
+}
+.dropdown-menu>li:hover, .dropdown-menu>li>a:hover{
+  color: #df5d43;
+  background: #fdf2f2f2;
+}
+.nav-tabs li a {
+  margin-right: 0;
+  color: #777;
+  font-weight: bold;
+}
+.nav-tabs li a:visited{
+  color: #777;
+}
+.nav-tabs li a:hover{
+  color: #df5d43;
+  background-color: #f9f9f9;
+}
+.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
+  color: #df5d43;
+  cursor: default;
+  font-weight: bold;
+  background-color: #f5f5f5;
+  border: 1px solid #ddd;
+  border-bottom-color: transparent;
+}
+.form-control:focus {
+  border: 2px solid rgb(0, 0, 0);
+  box-shadow: none;
+}
+.form-group label{
+  font-weight: normal;
+  color: #000;
+}