GNUsocial
/
gnu-social
4
0
Fork 1
Code Issues Releases Wiki Activity

[UI] Notifications settings styling finished

This commit is contained in:
rainydaysavings 2020-08-08 02:24:27 +01:00 committed by Hugo Sales
parent 6b85d38ad6
commit db8e783233
Signed by: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
4 changed files with 158 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
public/assets/css/settings/settings.css
View File

@ -277,6 +277,7 @@ ul input[type=radio]:checked + label + div {
/* hide radio buttons */
input[type=radio] {
position: absolute;
z-index: 1;
height: 1px;
width: 1px;
overflow: hidden;
@ -286,37 +287,40 @@ input[type=radio] {
#form-tabs {
order: 2;
margin-top: var(--unit-size);
margin-top: var(--side-margin);
margin-left: var(--side-margin);
margin-right: var(--side-margin);
width: 100%;
font-size: var(--medium-size);
}
#form-tabs ul {
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: space-evenly;
padding: 0;
width: 100%;
border-radius: var(--unit-size);
box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75);
background-color: #00000050;
justify-content: space-evenly;
width: 100%;
}
#form-tabs ul label {
order: 1;
flex: 1;
flex: 0;
}
#tabs {
padding: var(--unit-size);
display: inline-flex;
font-size: var(--medium-size);
text-transform: capitalize;
}
#form-tabs ul .form {
order: 2;
padding: calc(2*var(--unit-size));
background-color: #00000000 !important;
font-size: var(--medium-size);
height: 100%;
margin-left: 0;
margin-right: 0;
margin-top: 0;
box-shadow: 0;
border-radius: 0 0 var(--unit-size) var(--unit-size);
font-size: var(--unit-size);
}

72
public/assets/css/settings/settings_mid.css
View File

@ -237,4 +237,76 @@ button {
padding: var(--small-size);
border: none;
border-radius: var(--small-size);
}
/* NOTIFICATIONS TABS */
/* visual feedback */
ul input[type=radio] + label {
color: #91B9D0;
}
ul input[type=radio]:checked + label {
color: #F6F6F6;
}
ul input[type=radio]:focus + label {
color: #F6F6F6;
}
/* show/hide each tab */
ul input[type=radio]:not(:checked) + label + div {
display: none;
}
ul input[type=radio]:checked + label + div {
display: flex;
}
/* hide radio buttons */
input[type=radio] {
position: absolute;
z-index: 1;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
#form-tabs {
order: 2;
margin-top: var(--unit-size);
margin-left: var(--side-margin);
margin-right: var(--side-margin);
width: 100%;
font-size: var(--medium-size);
}
#form-tabs ul {
display: flex;
flex-wrap: wrap;
border-radius: var(--unit-size);
box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75);
background-color: #00000050;
justify-content: space-evenly;
width: 100%;
}
#form-tabs ul label {
order: 1;
flex: 0;
}
#tabs {
padding: var(--unit-size);
text-transform: capitalize;
font-size: var(--medium-size);
}
#form-tabs ul .form {
order: 2;
padding: calc(2*var(--unit-size));
background-color: #00000000 !important;
height: 100%;
margin-left: 0;
margin-right: 0;
margin-top: 0;
box-shadow: 0;
border-radius: 0 0 var(--unit-size) var(--unit-size);
font-size: var(--unit-size);
}

71
public/assets/css/settings/settings_small.css
View File

@ -238,4 +238,75 @@ button {
padding: var(--small-size);
border: none;
border-radius: var(--small-size);
}
/* NOTIFICATIONS TABS */
/* visual feedback */
ul input[type=radio] + label {
color: #91B9D0;
}
ul input[type=radio]:checked + label {
color: #F6F6F6;
}
ul input[type=radio]:focus + label {
color: #F6F6F6;
}
/* show/hide each tab */
ul input[type=radio]:not(:checked) + label + div {
display: none;
}
ul input[type=radio]:checked + label + div {
display: flex;
}
/* hide radio buttons */
input[type=radio] {
position: absolute;
z-index: 1;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
#form-tabs {
order: 2;
margin-top: var(--main-size);
margin-left: 1%;
margin-right: 1%;
width: 100%;
font-size: var(--medium-size);
}
#form-tabs ul {
display: flex;
flex-wrap: wrap;
border-radius: var(--unit-size);
box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75);
background-color: #00000050;
justify-content: space-evenly;
width: 100%;
}
#form-tabs ul label {
order: 1;
flex: 0;
}
#tabs {
padding: var(--unit-size);
text-transform: capitalize;
}
#form-tabs ul .form {
order: 2;
padding: calc(2*var(--unit-size));
background-color: #00000000 !important;
height: 100%;
margin-left: 0;
margin-right: 0;
margin-top: 0;
box-shadow: 0;
border-radius: 0 0 var(--unit-size) var(--unit-size);
font-size: var(--unit-size);
}

4
templates/settings/notifications.html.twig
View File

@ -12,8 +12,8 @@
<div id='form-tabs'>
<ul>
{% for transport, form in tabbed_forms %}
<input type="radio" id="toggle-{{ transport }}" name="tabs" value="toggle-{{ transport }}">
<label for="toggle-{{ transport }}" id='tabs' style = "text-transform:capitalize;">
<input type="radio" id="toggle-{{ transport }}" name="tabs" value="toggle-{{ transport }}" {% if transport == "email" %} checked {% endif %}>
<label for="toggle-{{ transport }}" id='tabs'>
{{ transport }}
</label>
<div id="form_{{ transport }}" class='form'>