Switch to a dark background and light text.

- Change the main font to "Plus Jakarta Sans".
- Changed the favicon.
- Added other minor UI tweaks.
This commit is contained in:
nicomiguelino
2023-01-26 11:09:05 -08:00
parent 0fc7e9e69a
commit 819841e588
12 changed files with 58 additions and 18 deletions

View File

@@ -8928,13 +8928,23 @@ a.text-dark:hover, a.text-dark:focus {
border-color: #dee2e6;
}
}
::-moz-selection {
color: #000000;
background: #FFE11A;
}
::selection {
color: #000000;
background: #FFE11A;
}
html {
position: relative;
min-height: 100%;
}
body {
background-color: #f0f0f0;
background-color: #270035;
margin-top: 95px;
margin-bottom: 104px;
font-family: "Plus Jakarta Sans", Helvetica, Arial, sans-serif;
@@ -8943,7 +8953,7 @@ body {
.content {
background-color: white;
border-radius: 4px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
border-left: 6px solid #FFE11A;
padding: 15px 0;
min-height: 60vh;
margin: 0;
@@ -8964,7 +8974,7 @@ label {
}
.btn-long {
width: 170px;
min-width: 170px;
}
.btn-primary {
@@ -8975,6 +8985,12 @@ label {
.btn-outline-primary {
color: #000000;
background-color: #FFFFFF;
transition: none;
}
.btn-outline-primary:hover {
background-image: linear-gradient(133.73deg, #FFF963, #FFD800);
font-weight: 600;
}
.switch-ios.switch-light input:checked ~ span {
@@ -9064,16 +9080,17 @@ label {
max-height: 50px;
}
#footer .links a {
color: rgba(54, 54, 54, 0.45);
color: rgba(255, 255, 255, 0.7);
font-weight: bold;
text-transform: uppercase;
}
#footer .links a:hover {
text-decoration: none;
color: rgba(255, 255, 255, 0.9);
}
#footer .copy {
border-top: 1px solid rgba(0, 0, 0, 0.1);
color: rgba(54, 54, 54, 0.45);
color: rgba(255, 255, 255, 0.7);
font-size: 0.7em;
}

View File

File diff suppressed because one or more lines are too long

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 15 KiB

View File

@@ -14,6 +14,17 @@
box-shadow: $shadow;
}
// Selected text
@mixin selection {
::-moz-selection { @content; }
::selection { @content; }
}
@include selection {
color: #000000;
background: $anthias-yellow-3;
}
$footer-height: 84px;
$secondary-color: #6c757d;
$base-line-height: 20px !default;
@@ -24,7 +35,7 @@ html {
}
body {
background-color: #f0f0f0;
background-color: $anthias-purple;
margin-top: 95px;
margin-bottom: $footer-height + $base-line-height;
font-family: "Plus Jakarta Sans", Helvetica, Arial, sans-serif;
@@ -33,7 +44,7 @@ body {
.content {
background-color: white;
border-radius: 4px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
border-left: 6px solid $anthias-yellow-3;
padding: 15px 0;
min-height: 60vh;
margin: 0;
@@ -56,17 +67,24 @@ label {
}
.btn-long {
width: 170px;
min-width: 170px;
}
.btn-primary {
background-image: linear-gradient(133.73deg, $anthias-yellow-1, $anthias-yellow-2);
background-image: $anthias-yellow-gradient;
color: $anthias-purple;
font-weight: 600;
}
.btn-outline-primary {
color: #000000;
background-color: #FFFFFF;
transition: none;
&:hover {
background-image: $anthias-yellow-gradient;
font-weight: 600;
}
}
.switch-ios.switch-light {
@@ -192,19 +210,20 @@ label {
.links {
a {
color: rgba(54, 54, 54, 0.45);
color: rgba(255, 255, 255, 0.70);
font-weight: bold;
text-transform: uppercase;
&:hover {
text-decoration: none;
color: rgba(255, 255, 255, 0.90);
}
}
}
.copy {
border-top: 1px solid rgba(0, 0, 0, .1);
color: rgba(54, 54, 54, 0.45);
color: rgba(255, 255, 255, 0.70);
font-size: 0.7em;
}
}

View File

@@ -2,3 +2,5 @@ $anthias-purple: #270035;
$anthias-yellow-1: #FFF963;
$anthias-yellow-2: #FFD800;
$anthias-yellow-3: #FFE11A;
$anthias-yellow-gradient: linear-gradient(133.73deg, $anthias-yellow-1, $anthias-yellow-2);

View File

@@ -16,7 +16,7 @@
<div class="container mt-2">
<div class="row">
<div class="col-6 small">
<div class="col-6 small text-white">
<span>Want to get more out of your digital signage?
<a class="brand"
href="https://www.screenly.io/?utm_source=Screenly-OSE&amp;utm_medium=root-page&amp;utm_campaign=OSE"

View File

@@ -28,7 +28,7 @@
</div>
</div>
</div>
<div class="copy">
<div class="copy pb-4">
<div class="container">
<div class="text-center p-2">
&copy; Screenly, Inc.

View File

@@ -19,6 +19,8 @@
<link href="/static/favicons/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png"/>
<link href="/static/favicons/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png"/>
<link href="/static/favicons/favicon-128.png" rel="icon" sizes="128x128" type="image/png"/>
<link href="https://fonts.googleapis.com/css?family=Plus Jakarta Sans" rel="stylesheet">
<link rel="icon" href="/static/favicons/favicon.ico">
<meta content="screenly-ose;" name="application-name"/>
<meta content="#FFFFFF" name="msapplication-TileColor"/>
<meta content="/static/favicons/mstile-144x144.png" name="msapplication-TileImage"/>

View File

@@ -302,7 +302,7 @@
<div class="row">
<div class="col-12">
<h5 class="d-flex">
<b class="justify-content-center align-self-center">Schedule Overview</b>
<b class="justify-content-center align-self-center text-white">Schedule Overview</b>
<div class="ml-auto">
<a id="previous-asset-button" class="btn btn-long btn-outline-primary" href="#">
<i class="fas fa-chevron-left pr-2"></i>

View File

@@ -4,7 +4,7 @@
<div class="container pt-3 pb-3">
<div class="row">
<div class="col-12">
<h5 class="page-header">
<h5 class="text-white">
<b>Integrations</b>
</h5>
</div>

View File

@@ -15,7 +15,7 @@
<div class="container pt-3 pb-3">
<div class="row">
<div class="col-12">
<h5 class="page-header">
<h5 class="page-header text-white">
<b>Settings</b>
</h5>
</div>

View File

@@ -4,7 +4,7 @@
<div class="container pt-3 pb-3">
<div class="row">
<div class="col-12">
<h5 class="page-header">
<h5 class="page-header text-white">
<b>System Info</b>
</h5>
</div>