|
@@ -1179,6 +1179,14 @@ main[role="main"] {
|
|
|
main[role="main"] > .wrapper {
|
|
|
width: 100vw; }
|
|
|
|
|
|
+@keyframes rotating {
|
|
|
+ from {
|
|
|
+ transform: rotate(0deg);
|
|
|
+ transform-origin: center; }
|
|
|
+ to {
|
|
|
+ transform: rotate(360deg);
|
|
|
+ transform-origin: center; } }
|
|
|
+
|
|
|
body {
|
|
|
font-size: 16px;
|
|
|
font-family: "Ubuntu",Arial,"MS Trebuchet",sans-serif;
|
|
@@ -1271,23 +1279,26 @@ header[role="banner"] {
|
|
|
position: relative; }
|
|
|
header[role="banner"] #user-flags h2 {
|
|
|
cursor: pointer; }
|
|
|
+ header[role="banner"] #user-flags h2:before {
|
|
|
+ padding-right: 0.2em; }
|
|
|
header[role="banner"] #user-flags ul {
|
|
|
- position: absolute;
|
|
|
- width: 8em;
|
|
|
- left: 0;
|
|
|
background-color: #fff;
|
|
|
- border-radius: 3px;
|
|
|
- background-clip: padding-box;
|
|
|
- box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
|
|
|
- padding: 0.3em 0.3em 0.5em;
|
|
|
- opacity: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ width: 11em;
|
|
|
max-height: 1px;
|
|
|
- transition: opacity,max-height 0.3s ease-in-out;
|
|
|
- overflow: hidden; }
|
|
|
+ padding: 0.01em 1em;
|
|
|
+ box-sizing: content-box;
|
|
|
+ transition: all 0.4s ease-in-out;
|
|
|
+ transition-delay: 2s;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 1.7em;
|
|
|
+ box-sizing: content-box; }
|
|
|
header[role="banner"] #user-flags:hover ul {
|
|
|
- opacity: 1;
|
|
|
- max-height: 100px;
|
|
|
- transition: opacity,max-height 0.2s ease-in-out; }
|
|
|
+ transition-delay: 0s;
|
|
|
+ max-height: 12em;
|
|
|
+ padding: 1em 1em;
|
|
|
+ box-shadow: 0 0 10px #ccc; }
|
|
|
header[role="banner"] #user-flags li {
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
@@ -1302,17 +1313,32 @@ header[role="banner"] {
|
|
|
opacity: 0;
|
|
|
transition: opacity 0.3s ease-in-out;
|
|
|
padding-left: 0.5em; }
|
|
|
+ header[role="banner"] #user-flags li div.actions span.mdi {
|
|
|
+ cursor: pointer;
|
|
|
+ color: #4e4d4d; }
|
|
|
+ header[role="banner"] #user-flags li div.actions span.delete-btn.loading:before {
|
|
|
+ animation: rotating 2s linear infinite; }
|
|
|
header[role="banner"] #user-flags li:hover div.actions {
|
|
|
opacity: 1; }
|
|
|
- header[role="banner"] #user-flags li input {
|
|
|
- border: 1px solid #bbb;
|
|
|
- border-radius: 5px;
|
|
|
- width: calc(100% - 2em);
|
|
|
- font-size: 0.8em; }
|
|
|
- header[role="banner"] #user-flags li span.mdi-plus-box,
|
|
|
- header[role="banner"] #user-flags li span.mdi-trash-can-outline {
|
|
|
- cursor: pointer;
|
|
|
- color: #4e4d4d; }
|
|
|
+ header[role="banner"] #user-flags li.create-flag {
|
|
|
+ margin-top: 0.2em; }
|
|
|
+ header[role="banner"] #user-flags li.create-flag input {
|
|
|
+ align-self: flex-end;
|
|
|
+ border: 1px solid #bbb;
|
|
|
+ border-radius: 5px;
|
|
|
+ width: calc(100% - 2em);
|
|
|
+ font-size: 0.8em; }
|
|
|
+ header[role="banner"] #user-flags li.create-flag span.add-btn {
|
|
|
+ align-self: flex-end;
|
|
|
+ color: #bbb;
|
|
|
+ font-size: 1em;
|
|
|
+ padding: 0 0 0 .5em;
|
|
|
+ transition: all 0.2s ease-in-out; }
|
|
|
+ header[role="banner"] #user-flags li.create-flag span.add-btn.active {
|
|
|
+ cursor: pointer;
|
|
|
+ color: #1a1a1a; }
|
|
|
+ header[role="banner"] #user-flags li.create-flag span.add-btn.loading:before {
|
|
|
+ animation: rotating 2s linear infinite; }
|
|
|
header[role="banner"] #block-header {
|
|
|
margin-right: 1em;
|
|
|
padding-left: 1em;
|