Commit d6045774 authored by Carson Black's avatar Carson Black Committed by Nate Graham

Make some style changes

Do/Don't boxes now resemble inline messages
The content can now expand wider and will center horizontally when it hits its maximum width
Breadcrumbs now styled to resemble their Kirigami counterparts some more
parent 65dbd5cc
......@@ -68,9 +68,9 @@ a.icon {
color: rgba(255,255,255,0.7);
}
.wy-side-nav-search input[type="text"] {
border-radius: 4px;
border: 0 solid transparent;
.wy-nav-content {
margin: 0 auto;
max-width: 800px;
}
.wy-nav-content-wrap {
......@@ -130,28 +130,35 @@ a.icon {
background-color: #27ae60;
}
.btn {
.btn, input.searchbtn[type="submit"] {
background-color: #eff0f1 !important;
background-image: linear-gradient(to bottom, #f2f2f3, #e8e9ea);
box-shadow: 0.5px 0.5px 0.5px 0.5px rgba(35,38,39,.1);
border-color: #bdc3c7;
border-radius: 3px;
border-width: 1px;
padding: 8px;
transition: all .1s linear;
outline: 0;
border-style: solid;
}
.btn:hover {
.btn:hover, input.searchbtn[type="submit"]:hover {
border-color: #93cee9;
background-color: #eff0f1 !important;
outline: 0;
}
.btn:active {
.btn:active, input.searchbtn[type="submit"]:active {
background-image: linear-gradient(to bottom, #9cd2eb, #76c1e3);
box-shadow: 0.5px 0.5px 0.5px 0.5px rgba(35,38,39,.1);
padding: 8px;
transform: translate(1px,1px);
outline: 0;
}
.btn:focus:not(:active) {
.btn:focus:not(:active), input.searchbtn[type="submit"]:focus:not(:active) {
color: #fcfcfc !important;
border-color: #3daee9;
background-image: linear-gradient(to bottom, #45b1ea, #25a4e6);
outline: 0;
}
......@@ -277,3 +284,109 @@ h5 {
height: auto !important;
max-width: 100%;
}
.do *, .dont * {
font-style: normal;
}
.do img, .dont img {
display: block;
margin: 0 auto;
}
.dont .caption {
margin-top: 7.5px;
border: 2px solid #da4453;
background-color: rgba(218, 68, 83, 0.2);
border-radius: 4px;
padding: 10px;
}
.do .caption {
margin-top: 7.5px;
border: 2px solid #27ae60;
background-color: rgba(39, 174, 96, 0.2);
border-radius: 4px;
padding: 10px;
}
.dont .iconred, .do .noblefir {
font-weight: bold;
}
.flex.docutils.container {
margin: 0 auto;
justify-content: center;
}
.wy-breadcrumbs li a:first-child {
padding-left: 5px;
}
.wy-breadcrumbs li span:first-child {
padding: 5px;
}
ul.wy-breadcrumbs > li, ul.wy-breadcrumbs a {
font-size: 15pt;
}
li.wy-breadcrumbs-aside {
margin-left: auto;
}
li.wy-breadcrumbs-aside > a {
font-size: 14px;
}
@media screen and (max-width: 768px) {
ul.wy-breadcrumbs > li, ul.wy-breadcrumbs a {
font-size: 14px;
}
}
.wy-menu-vertical a {
font-size: 10pt;
}
span.toctree-expand {
vertical-align: middle;
}
span.toctree-expand::before {
content: "" !important;
background-image: url("go-next.svg");
height: 14px;
width: 14px;
vertical-align: middle;
}
a.current span.toctree-expand::before {
filter: brightness(500);
}
.breeze-icon {
height: 16px;
width: 16px;
}
.rst-content div[role=navigation] ul {
display: flex;
align-items: center;
}
.wy-side-nav-search input[type="text"] {
min-height: 30px;
border-radius: 3px;
border: 1px solid #bcbebf;
box-shadow: none;
font-size: 10pt;
width: 90%;
}
.wy-side-nav-search input[type="text"]:focus {
border: 1px solid #3dade9;
}
input + input.searchbtn[type="submit"] {
width: 30px;
height: 30px;
background-image: url("edit-find.svg");
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
}
input + input.searchbtn[type="submit"]:focus:not(:active) {
background-color: #3daee9 !important;
background-image: url("edit-find-dark.svg");
}
input + input.searchbtn[type="submit"]:active {
background-color: #76c1e3 !important;
background-image: url("edit-find.svg");
}
.wy-side-nav-search input[type="text"] + input.searchbtn {
margin-left: 3px;
}
#rtd-search-form {
display: flex;
justify-content: center;
}
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<defs id="defs3051">
<style type="text/css" id="current-color-scheme">
.ColorScheme-Text {
color:#eff0f1;
}
</style>
</defs>
<path style="fill:currentColor;fill-opacity:1;stroke:none"
d="M 6.5 2 C 4.007 2 2 4.01 2 6.5 C 2 8.993 4.01 11 6.5 11 C 7.5636432 11 8.5263409 10.618801 9.2949219 10.005859 L 13.292969 14.003906 L 14 13.296875 L 10.001953 9.2988281 C 10.617604 8.529048 11 7.565338 11 6.5 C 11 4.007 8.99 2 6.5 2 z M 6.5 3 C 8.439 3 10 4.561 10 6.5 C 10 8.439 8.439 10 6.5 10 C 4.561 10 3 8.439 3 6.5 C 3 4.561 4.561 3 6.5 3 z "
class="ColorScheme-Text"
/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<defs id="defs3051">
<style type="text/css" id="current-color-scheme">
.ColorScheme-Text {
color:#232629;
}
</style>
</defs>
<path style="fill:currentColor;fill-opacity:1;stroke:none"
d="M 6.5 2 C 4.007 2 2 4.01 2 6.5 C 2 8.993 4.01 11 6.5 11 C 7.5636432 11 8.5263409 10.618801 9.2949219 10.005859 L 13.292969 14.003906 L 14 13.296875 L 10.001953 9.2988281 C 10.617604 8.529048 11 7.565338 11 6.5 C 11 4.007 8.99 2 6.5 2 z M 6.5 3 C 8.439 3 10 4.561 10 6.5 C 10 8.439 8.439 10 6.5 10 C 4.561 10 3 8.439 3 6.5 C 3 4.561 4.561 3 6.5 3 z "
class="ColorScheme-Text"
/>
</svg>
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<style
type="text/css"
id="current-color-scheme">
.ColorScheme-Text {
color:#232629;
}
</style>
<path d="M11.707 8l-6 6L5 13.293 10.293 8 5 2.707 5.707 2l6 6z" class="ColorScheme-Text" fill="currentColor"/>
</svg>
{%- extends "sphinx_rtd_theme/breadcrumbs.html" %}
{% block breadcrumbs %}
<li><a href="{{ pathto(master_doc) }}">Docs</a> <img class="breeze-icon" src="{{ pathto('_static/css/go-next.svg', 1)}}"> </li>
{% for doc in parents %}
<li><a href="{{ doc.link|e }}">{{ doc.title }}</a> <img class="breeze-icon" src="{{ pathto('_static/css/go-next.svg', 1)}}"> </li>
{% endfor %}
<li><span>{{ title }}</span></li>
{% endblock %}
\ No newline at end of file
{%- if builder != 'singlehtml' %}
<div role="search">
<form id="rtd-search-form" class="wy-form" action="{{ pathto('search') }}" method="get">
<input type="text" name="q" placeholder="{{ _('Search the HIG...') }}" />
<input type="submit" class="searchbtn" value="" >
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
</form>
</div>
{%- endif %}
\ No newline at end of file
......@@ -25,7 +25,7 @@ Is this the right control?
.. container::
.. figure:: /img/Ambiguous_Opposite_Bad.qml.png
:figclass: border
:figclass: border dont
:iconred:`Don't.` |br|
Don't use a checkbox if the opposite is ambiguous.
......@@ -33,7 +33,7 @@ Is this the right control?
.. container::
.. figure:: /img/Ambiguous_Opposite_Good.qml.png
:figclass: border
:figclass: border do
:noblefir:`Do.` |br|
Use two radio buttons to remove the need to guess.
......@@ -49,7 +49,7 @@ Is this the right control?
.. container::
.. figure:: /img/No_Command_2_Bad.qml.png
:figclass: border
:figclass: border dont
:iconred:`Don't.` |br|
Don't use the selection to perform commands.
......@@ -57,7 +57,7 @@ Is this the right control?
.. container::
.. figure:: /img/No_Command_2_Good.qml.png
:figclass: border
:figclass: border do
:noblefir:`Do.` |br|
Consider using a :doc:`push button <../navigation/pushbutton>` instead.
......@@ -74,7 +74,7 @@ Behavior
.. container::
.. figure:: /img/Checkbox_Enable_Bad.qml.png
:figclass: border
:figclass: border dont
:iconred:`Don't.` |br|
Don't use checkboxes for negatives.
......@@ -82,7 +82,7 @@ Behavior
.. container::
.. figure:: /img/Checkbox_Enable_Good.qml.png
:figclass: border
:figclass: border do
:noblefir:`Do.` |br|
Use checkboxes for positives.
......@@ -106,16 +106,18 @@ Behavior
.. container::
.. figure:: /img/Checkbox_Switch_Desktop.qml.png
:figclass: dont
:iconred:`Don't.` |br|
Don't use sliding switches on desktop.
:iconred:`Don't.` |br|
Don't use sliding switches on desktop.
.. container::
.. figure:: /img/Checkbox_Switch_Mobile.qml.png
:noblefir:`Do.` |br|
Do use sliding switches on mobile.
:figclass: do
:noblefir:`Do.` |br|
Do use sliding switches on mobile.
Appearance
~~~~~~~~~~
......@@ -177,7 +179,7 @@ which will take care of the layout and spacing of your controls.
.. container::
.. figure:: /img/Checkbox_Alignment_Bad.qml.png
:figclass: border
:figclass: border dont
:iconred:`Don't.` |br|
Don't use linebreaks in a checkbox's label.
......@@ -185,7 +187,7 @@ which will take care of the layout and spacing of your controls.
.. container::
.. figure:: /img/Checkbox_Alignment_Good.qml.png
:figclass: border
:figclass: border do
:noblefir:`Do.` |br|
Add another label if more explanation is required.
......
......@@ -26,7 +26,7 @@ Is this the right control?
.. container::
.. figure:: /img/Radiobutton_Many_Bad.qml.png
:figclass: border
:figclass: border dont
:iconred:`Don't.` |br|
Don't use radio buttons for more than five options.
......@@ -34,7 +34,7 @@ Is this the right control?
.. container::
.. figure:: /img/Radiobutton_Many_Good.qml.png
:figclass: border
:figclass: border do
:noblefir:`Do.` |br|
Use a combobox instead.
......@@ -49,7 +49,7 @@ Is this the right control?
.. container::
.. figure:: /img/Radiobutton_Negation_Bad.qml.png
:figclass: border
:figclass: border dont
:iconred:`Don't.` |br|
Don't use radio buttons for do/don't operations.
......@@ -57,7 +57,7 @@ Is this the right control?
.. container::
.. figure:: /img/Radiobutton_Negation_Good.qml.png
:figclass: border
:figclass: border do
:noblefir:`Do.` |br|
Use a checkbox instead.
......@@ -70,7 +70,7 @@ Is this the right control?
.. container::
.. figure:: /img/Radiobutton_Visible_Bad.qml.png
:figclass: border
:figclass: border dont
:iconred:`Don't.` |br|
Don't hide choices that the user should see from the start
......@@ -79,7 +79,7 @@ Is this the right control?
.. container::
.. figure:: /img/Radiobutton_Visible_Good.qml.png
:figclass: border
:figclass: border do
:noblefir:`Do.` |br|
Use radio buttons instead.
......@@ -92,7 +92,7 @@ Is this the right control?
.. container::
.. figure:: /img/Radiobutton_Command_Bad.qml.png
:figclass: border
:figclass: border dont
:iconred:`Don't.` |br|
Don't use the selection to perform commands.
......@@ -100,7 +100,7 @@ Is this the right control?
.. container::
.. figure:: /img/No_Command_2_Good.qml.png
:figclass: border
:figclass: border do
:noblefir:`Do.` |br|
Consider using a :doc:`push button <../navigation/pushbutton>`.
......@@ -117,7 +117,7 @@ Behavior
.. container::
.. figure:: /img/Radiobutton_Default_Bad.qml.png
:figclass: border
:figclass: border dont
:iconred:`Don't.` |br|
Don't forget a default option.
......@@ -125,7 +125,7 @@ Behavior
.. container::
.. figure:: /img/Radiobutton_Default_Good.qml.png
:figclass: border
:figclass: border do
:noblefir:`Do.` |br|
Set a default option.
......@@ -137,7 +137,7 @@ Behavior
.. container::
.. figure:: /img/Radiobutton_First_Bad.qml.png
:figclass: border
:figclass: border dont
:iconred:`Don't.` |br|
Don't have an option besides the first as the default.
......@@ -145,7 +145,7 @@ Behavior
.. container::
.. figure:: /img/Radiobutton_First_Good.qml.png
:figclass: border
:figclass: border do
:noblefir:`Do.` |br|
Set the first option as default. Reorder your items if necessary.
......
......@@ -138,6 +138,7 @@ Resizing
.. figure:: /img/Resize.qml.png
:alt: Add hints on how to resize to your mockups.
:figclass: do
:noblefir:`Do.` |br|
Add hints on how to resize to your mockups.
......@@ -177,6 +177,7 @@ to know how to measure it.
.. figure:: /img/Design.qml.png
:scale: 80%
:figclass: dont
:iconred:`Don't.` |br|
Don't create mockups without measurements.
......@@ -185,6 +186,7 @@ to know how to measure it.
.. figure:: /img/Design_Good.qml.png
:scale: 80%
:figclass: do
:noblefir:`Do.` |br|
Create mockups with detailed measurements.
......
......@@ -29,6 +29,7 @@ How to Use
.. figure:: /img/Form_Align_KDE3.qml.png
:scale: 80%
:figclass: dont
:iconred:`Don't.` |br|
Don't use KDE3-style form alignment
......@@ -37,6 +38,7 @@ How to Use
.. figure:: /img/Form_Align_KDE5.qml.png
:scale: 80%
:figclass: do
:noblefir:`Do.` |br|
Use Plasma 5-style form alignment.
......@@ -47,6 +49,7 @@ How to Use
.. figure:: /img/Form_Align_OSX.qml.png
:scale: 80%
:figclass: dont
:iconred:`Don't.` |br|
Don't use macOS-style form alignment.
......@@ -55,6 +58,7 @@ How to Use
.. figure:: /img/Form_Align_KDE5.qml.png
:scale: 80%
:figclass: do
:noblefir:`Do.` |br|
Use Plasma 5-style form alignment.
......@@ -72,6 +76,7 @@ How to Use
.. figure:: /img/Form_Align_NO.qml.png
:scale: 80%
:figclass: dont
:iconred:`Don't.` |br|
Don't misalign controls.
......@@ -80,6 +85,7 @@ How to Use
.. figure:: /img/Form_Align_YES.qml.png
:scale: 80%
:figclass: do
:noblefir:`Do.` |br|
Align controls to the left.
......@@ -91,6 +97,7 @@ How to Use
.. figure:: /img/Form_Align_Long.qml.png
:scale: 80%
:figclass: dont
:iconred:`Don't.` |br|
Don't use very long captions.
......
......@@ -89,6 +89,7 @@ such exceptions to be effective, they must be very rare.
.. figure:: /img/Typography-Heading-Dont.png
:scale: 80%
:figclass: dont
:iconred:`Don't.` |br|
Don't use the same type scale for everything in your application.
......@@ -97,6 +98,7 @@ such exceptions to be effective, they must be very rare.
.. figure:: /img/Typography-Heading-Do.png
:scale: 80%
:figclass: do
:noblefir:`Do.` |br|
Vary the type scale appropriately in your application.
......
......@@ -68,9 +68,9 @@ a.icon {
color: rgba(255,255,255,0.7);
}
.wy-side-nav-search input[type="text"] {
border-radius: 4px;
border: 0 solid transparent;
.wy-nav-content {
margin: 0 auto;
max-width: 800px;
}
.wy-nav-content-wrap {
......@@ -130,28 +130,35 @@ a.icon {
background-color: #27ae60;
}
.btn {
.btn, input.searchbtn[type="submit"] {
background-color: #eff0f1 !important;
background-image: linear-gradient(to bottom, #f2f2f3, #e8e9ea);
box-shadow: 0.5px 0.5px 0.5px 0.5px rgba(35,38,39,.1);
border-color: #bdc3c7;
border-radius: 3px;
border-width: 1px;
padding: 8px;
transition: all .1s linear;
outline: 0;
border-style: solid;
}
.btn:hover {
.btn:hover, input.searchbtn[type="submit"]:hover {
border-color: #93cee9;
background-color: #eff0f1 !important;
outline: 0;
}
.btn:active {
.btn:active, input.searchbtn[type="submit"]:active {
background-image: linear-gradient(to bottom, #9cd2eb, #76c1e3);
box-shadow: 0.5px 0.5px 0.5px 0.5px rgba(35,38,39,.1);
padding: 8px;
transform: translate(1px,1px);
outline: 0;
}
.btn:focus:not(:active) {
.btn:focus:not(:active), input.searchbtn[type="submit"]:focus:not(:active) {
color: #fcfcfc !important;
border-color: #3daee9;
background-image: linear-gradient(to bottom, #45b1ea, #25a4e6);
outline: 0;
}
......@@ -165,7 +172,13 @@ a.icon {
right: 0;
color: #7f8c8d;
}
.intend:before {
@media (max-width: 950px) {
.intend {
position: static;
}
}
.intend p:before {
content: "For "
}
......@@ -175,9 +188,6 @@ a.icon {
}
.available {
position: absolute;
top: 30px;
right: 0;
color: #da4453;
}
......@@ -223,44 +233,160 @@ a.icon {
font-family:"icons";
content:"\f104";
}
.wy-nav-top {
background-color: #27ae60;
}
.wy-nav-top a:visited {
color: #fcfcfc;
}
/*
* Add more spacing and a 1px seperator between sections */
div[itemprop="articleBody"] .section:not(:first-of-type) {
margin-top: 20px;
padding-top: 20px;
margin-top: 20px;
padding-top: 20px;
}
div[itemprop="articleBody"] > .section > .section:not(:first-of-type) {
border-top: 1px solid #bdc3c7;
margin-top: 30px;
padding-top: 30px;
border-top: 1px solid #bdc3c7;
margin-top: 30px;
padding-top: 30px;
}
/* Increase font sized to have more visual difference */
h1 {
font-size: 300%;
margin-bottom: 8px;
font-weight: normal;
font-size: 300%;
margin-bottom: 8px;
font-weight: normal;
}
h2 {
font-size: 240%;
margin-bottom: 8px;
font-weight: normal;
font-size: 240%;
margin-bottom: 8px;
font-weight: normal;
}
h3 {
font-size: 180%;
margin-bottom: 8px;
font-weight: normal;
font-size: 180%;
margin-bottom: 8px;
font-weight: normal;
}
h4 {
font-size: 140%;
margin-bottom: 8px;
font-weight: normal;
font-size: 140%;
margin-bottom: 8px;
font-weight: normal;
}
h5 {
font-size: 120%;
margin-bottom: 10px;
font-weight: normal;
font-size: 120%;
margin-bottom: 10px;
font-weight: normal;
}
.rst-content img, video, audio {
height: auto !important;
max-width: 100%;
}
.do *, .dont * {
font-style: normal;
}
.do img, .dont img {
display: block;
margin: 0 auto;
}
.dont .caption {
margin-top: 7.5px;
border: 2px solid #da4453;
background-color: rgba(218, 68, 83, 0.2);
border-radius: 4px;
padding: 10px;
}
.do .caption {
margin-top: 7.5px;
border: 2px solid #27ae60;
background-color: rgba(39, 174, 96, 0.2);
border-radius: 4px;
padding: 10px;
}
.dont .iconred, .do .noblefir {
font-weight: bold;
}
.flex.docutils.container {
margin: 0 auto;
justify-content: center;
}
.wy-breadcrumbs li a:first-child {
padding-left: 5px;
}
.wy-breadcrumbs li span:first-child {
padding: 5px;
}
ul.wy-breadcrumbs > li, ul.wy-breadcrumbs a {
font-size: 15pt;
}
li.wy-breadcrumbs-aside {
margin-left: auto;
}
li.wy-breadcrumbs-aside > a {
font-size: 14px;
}
@media screen and (max-width: 768px) {
ul.wy-breadcrumbs > li, ul.wy-breadcrumbs a {
font-size: 14px;
}
}
.wy-menu-vertical a {
font-size: 10pt;
}
span.toctree-expand {
vertical-align: middle;
}
span.toctree-expand::before {
content: "" !important;
background-image: url("go-next.svg");
height: 14px;
width: 14px;
vertical-align: middle;
}
a.current span.toctree-expand::before {
filter: brightness(500);
}
.breeze-icon {
height: 16px;
width: 16px;
}
.rst-content div[role=navigation] ul {
display: flex;
align-items: center;
}
.wy-side-nav-search input[type="text"] {
min-height: 30px;
border-radius: 3px;
border: 1px solid #bcbebf;
box-shadow: none;
font-size: 10pt;
width: 90%;